/**
 * Composants réutilisables : boutons, en-tête, menu, cartes, pied de page.
 * Aucune couleur en dur, tout vient de tokens.css.
 */

/* ------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------ */

.safir-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--safir-esp-2xs);
  min-height: 62px;
  padding: 18px 27px;
  /* Style « vitre » de la maquette (nœud 5992:1433), commun à tout le site :
     contour blanc de 1,5 px, fond blanc à 5 %, flou léger. */
  border: 1.5px solid var(--safir-blanc);
  border-radius: var(--safir-rayon-bouton);
  font-size: 1rem;
  font-weight: var(--safir-graisse-moyenne);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: var(--safir-texte-inverse);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(2px);
  transition: background var(--safir-transition), color var(--safir-transition), border-color var(--safir-transition);
}

.safir-bouton:hover,
.safir-bouton:focus-visible {
  background: var(--safir-blanc);
  color: var(--safir-noir);
}

/* Sur une photo (bandeau, visionneuse) : un voile sombre sous la vitre. */
.safir-bouton--clair { background: rgba(0, 0, 0, .28); }
.safir-bouton--clair:hover,
.safir-bouton--clair:focus-visible { background: var(--safir-blanc); }

/* Boutons du bandeau (nœud 5992:1433) : icône de chaque côté. */
.safir-bouton--vitre { gap: 17px; padding: 18px; }

/* Bouton blanc plein (nœuds 5992:5604 et 5992:5702). */
.safir-bouton--blanc {
  background: var(--safir-blanc);
  border-color: var(--safir-blanc);
  color: var(--safir-noir);
  font-weight: var(--safir-graisse-forte);
  font-size: 1rem;
}

.safir-bouton--blanc:hover,
.safir-bouton--blanc:focus-visible { background: var(--safir-gris-10); border-color: var(--safir-gris-10); }

.safir-bouton--accent {
  background: var(--safir-degrade-accent);
  border-color: transparent;
  color: var(--safir-texte-inverse);
  font-weight: var(--safir-graisse-forte);
  font-size: 1rem;
}

.safir-bouton--accent:hover,
.safir-bouton--accent:focus-visible { filter: brightness(1.12); }

/* Bouton contact de l'en-tête (nœud 5992:1420) : dégradé radial. */
.safir-bouton--contact {
  gap: 9px;
  background: radial-gradient(ellipse 150% 100% at 50% -10%, var(--safir-accent-sombre) 0%, var(--safir-accent) 39%, var(--safir-accent-clair) 78%);
  border-color: transparent;
  color: var(--safir-texte-inverse);
  font-weight: var(--safir-graisse-forte);
  font-size: 1rem;
  white-space: nowrap;
}

.safir-bouton--contact:hover,
.safir-bouton--contact:focus-visible { filter: brightness(1.12); }

/* Bouton rond des commandes de carrousel */
.safir-rond {
  width: 48px; height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--safir-bordure);
  border-radius: 50%;
  background: var(--safir-fond);
  cursor: pointer;
  transition: background var(--safir-transition), border-color var(--safir-transition);
}

.safir-rond:hover { background: var(--safir-fond-alt); }
.safir-rond[disabled] { opacity: .35; cursor: default; }

/* ------------------------------------------------------------------
   En-tête
   ------------------------------------------------------------------ */

/* Le positionnement est confié à LW Smart Header : solidaire de la bannière
   sur l'accueil, flottant ensuite. Le thème ne décrit ici que l'apparence.

   IMPORTANT : ne jamais redéclarer `transition` en raccourci sur cet élément.
   La propriété est partagée avec le plugin, qui anime `transform` ; un
   raccourci l'écraserait et l'en-tête réapparaîtrait d'un coup, sans glisser. */
.safir-entete {
  background: var(--safir-fond);
  border-bottom: 1px solid var(--safir-bordure);
  transition-property: background-color, border-color, color;
  transition-duration: var(--safir-transition);
}

/* Pages sans bannière : l'en-tête flotte, un cale-vide compense sa hauteur. */
body:not(.safir-accueil) .safir-principal { padding-top: var(--safir-entete-hauteur, 96px); }

/* Sur l'accueil, l'en-tête se fond dans la bannière. */
.safir-entete--transparente {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--safir-texte-inverse);
}

/* Devenu flottant, il reprend un fond opaque et se détache par une ombre
   discrète : sans elle, il flotte sans qu'on comprenne qu'il est au-dessus. */
.safir-entete--transparente.lw-sh--flottant {
  background: var(--safir-fond);
  border-bottom-color: var(--safir-bordure);
  color: var(--safir-texte);
  box-shadow: var(--safir-ombre-carte);
}

.safir-entete__interieur {
  display: grid;
  /* Trois colonnes, les deux latérales égales : la recherche est centrée
     sur la page, et tombe au même endroit dans le menu déplié, dont la
     colonne de gauche (fermer + logo) fait 222 px. */
  grid-template-columns: minmax(222px, 1fr) minmax(0, 892px) minmax(222px, 1fr);
  align-items: center;
  column-gap: var(--safir-esp-m);
  min-height: 96px;
  max-width: var(--safir-largeur-max);
  margin-inline: auto;
  padding-inline: var(--safir-gouttiere);
}

.safir-entete__menu {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--safir-esp-2xs);
  /* Compensation optique : le padding sert de zone de clic confortable, mais
     il décalerait les barres vers l'intérieur. La marge négative réaligne le
     tracé visible sur la grille, pas la boîte du bouton. */
  margin-left: calc(-1 * var(--safir-esp-2xs));
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

/* Barres resserrées à 5 px (7 avant, 28 x 16 au lieu de 28 x 20) : correction
   optique décidée par Pierre le 24 septembre 2026. À hauteur de tracé égale,
   le Menu paraissait plus grand que les boutons voisins, fermés et pleins. */
.safir-entete__menu-barres { display: grid; gap: 5px; padding-block: 1px; }
.safir-entete__menu-barres span {
  display: block;
  width: 28px; height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.safir-entete__menu-mot {
  font-size: .75rem;
  font-weight: var(--safir-graisse-moyenne);
  letter-spacing: .06em;
}

/* 892 px dans la maquette, centrée dans l'espace restant entre le menu et
   le bouton de contact, lui-même aligné sur le bord droit de la grille. */
.safir-entete__recherche { grid-column: 2; }
.safir-entete .safir-bouton--contact { grid-column: 3; justify-self: end; }

/* Accueil : tant que l'en-tête est posé sur la vidéo, la recherche est
   repliée en un bouton « Rechercher » placé juste à gauche de « Nous
   contacter », et se déplie vers la gauche au clic (retour Safir du 24
   septembre 2026 : dégager la vidéo sans cacher la recherche). Navigation à
   gauche (Menu), actions à droite (chercher, écrire) : décision Pierre du
   même jour, après un essai au centre puis à côté du menu.
   En-tête flottant : barre complète centrée, comme sur les autres pages.
   Les classes d'état ne sont posées que par le script : sans lui, la barre
   reste dépliée, contre le bouton contact. */
.safir-entete__recherche { display: grid; justify-items: center; }
.safir-entete__recherche > .safir-recherche { width: 100%; }
.safir-entete__loupe { display: none; gap: var(--safir-esp-xs); padding-inline: 16px 20px; }
.safir-entete__recherche.est-repliee > .safir-recherche { display: none; }
.safir-entete__recherche.est-repliee > .safir-entete__loupe { display: inline-flex; }

.safir-entete--transparente:not(.lw-sh--flottant) .safir-entete__interieur:has([data-safir-recherche-repliable]) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
/* Collée au contact (12 px au lieu des 24 de la grille) pour se lire comme
   un groupe. Dépliée, elle garde la largeur de la maquette (892 px). */
.safir-entete--transparente:not(.lw-sh--flottant) [data-safir-recherche-repliable] {
  justify-items: end;
  margin-inline-end: calc(var(--safir-esp-xs) - var(--safir-esp-m));
}
.safir-entete--transparente:not(.lw-sh--flottant) [data-safir-recherche-repliable] > .safir-recherche { max-width: 892px; }

.safir-entete__recherche.est-depliee > .safir-recherche {
  animation: safir-recherche-deplier 280ms cubic-bezier(.2, .6, .3, 1);
}
@keyframes safir-recherche-deplier {
  from { clip-path: inset(0 0 0 82% round var(--safir-rayon-m)); opacity: .4; }
  to   { clip-path: inset(0 0 0 0 round var(--safir-rayon-m)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .safir-entete__recherche.est-depliee > .safir-recherche { animation: none; }
}

/* Rangée de l'en-tête (et sa copie dans le menu déplié) : contact, bouton
   « Rechercher » et barre ramenés à 40 px, et le bouton Menu étiré à la même
   hauteur de tracé (haut des barres au bas des lettres de « Menu », mesuré
   au pixel près : 40 px, même centre). Décision Pierre du 24 septembre 2026 :
   62 px dans la maquette, jugés trop lourds une fois la recherche repliée.
   La zone de clic des boutons est ramenée à 44 px par un pseudo-élément
   invisible, sans grossir le dessin. */
.safir-entete__menu { gap: 9px; }
.safir-entete__menu-mot { line-height: 1; }

.safir-entete .safir-bouton--contact,
.safir-entete__loupe,
.safir-menu .safir-menu__contact {
  position: relative;
  min-height: 40px;
  padding-block: 0;
}
.safir-entete .safir-bouton--contact::after,
.safir-entete__loupe::after,
.safir-menu .safir-menu__contact::after {
  content: "";
  position: absolute;
  inset: -3px 0;
}
.safir-entete .safir-bouton--contact,
.safir-menu .safir-menu__contact { padding-inline: 20px; }
.safir-entete .safir-recherche,
.safir-menu .safir-recherche { min-height: 40px; }
.safir-entete .safir-recherche__envoi,
.safir-menu .safir-recherche__envoi { width: 32px; height: 32px; min-height: 0; }
/* Le champ remplit la hauteur de la barre : toute la barre reste cliquable. */
.safir-entete .safir-recherche__champ,
.safir-menu .safir-recherche__champ { padding-block: 0; align-self: stretch; }
/* « Fermer » du menu déplié : la croix est dessinée au centre d'une boîte de
   24 (tracé de 6 à 18), elle laisse du vide au-dessus. Écart et décalage
   mesurés pour que le tracé aille du haut de la croix au bas de « Fermer »
   sur les mêmes 40 px que la rangée. */
.safir-menu .safir-menu__fermer { gap: 3px; margin-top: -8px; }
.safir-menu .safir-menu__fermer .safir-entete__menu-mot { margin-top: -4px; }
/* Téléphone : le bouton y fait 72 px de haut, le décalage n'est plus le même.
   Mesuré : la croix tombe alors exactement à la place des barres du Menu. */
@media (max-width: 560px) { .safir-menu .safir-menu__fermer { margin-top: 1px; } }

/* La recherche et le bouton contact cèdent la place au téléphone :
   le menu déplié les propose tous les deux. */
@media (max-width: 900px) {
  .safir-entete__interieur { grid-template-columns: auto 1fr auto; }
  .safir-entete__recherche { display: none; }
}

@media (max-width: 560px) {
  .safir-entete__interieur { min-height: 72px; }
  .safir-entete .safir-bouton--contact { display: none; }
}

/* ------------------------------------------------------------------
   Champ de recherche
   ------------------------------------------------------------------ */

.safir-recherche {
  display: flex;
  align-items: center;
  gap: var(--safir-esp-2xs);
  min-height: 62px;
  padding-inline: var(--safir-esp-xs) var(--safir-esp-s);
  border: 1.5px solid var(--safir-bordure);
  border-radius: var(--safir-rayon-m);
  background: var(--safir-fond-alt);
}

/* Sur le bandeau et dans le menu : contour blanc, fond blanc à 5 %, flou. */
.safir-entete--transparente .safir-recherche,
.safir-menu .safir-recherche {
  background: rgba(255, 255, 255, .05);
  border-color: var(--safir-blanc);
  backdrop-filter: blur(2px);
}

.safir-entete--transparente.lw-sh--flottant .safir-recherche {
  background: var(--safir-fond-alt);
  border-color: var(--safir-bordure);
  backdrop-filter: none;
}

.safir-recherche__champ {
  flex: 1;
  min-width: 0;
  padding: var(--safir-esp-2xs) 0;
  border: 0;
  background: none;
  font-size: 1rem;
  font-weight: var(--safir-graisse-moyenne);
}

.safir-recherche__champ::placeholder { color: currentColor; opacity: .8; }
.safir-recherche__champ:focus { outline: none; }
.safir-recherche:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }

.safir-recherche__envoi {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--safir-rayon-s);
  background: none;
  cursor: pointer;
  color: inherit;
}

.safir-recherche__envoi:hover { background: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------------
   Menu déplié
   ------------------------------------------------------------------ */

.safir-menu {
  position: fixed;
  inset: 0;
  /* Au-dessus de l'en-tête flottant (100, lw-smart-header) : sinon le bouton
     « menu » reste posé sur « Fermer » et le panneau ne se referme plus. */
  z-index: 110;
  overflow-y: auto;
  /* La page reste visible, assombrie, sous le panneau (nœud 5992:1622). */
  background: rgba(0, 0, 0, .55);
}

.safir-menu__panneau {
  background: var(--safir-bordeaux) url("../img/constellation.svg") right top / 1679px 756px no-repeat;
  color: var(--safir-texte-inverse);
  padding-bottom: 74px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.safir-menu__interieur {
  max-width: var(--safir-largeur-max);
  margin-inline: auto;
  padding-inline: var(--safir-gouttiere);
  display: grid;
  /* Même répartition que l'en-tête : la recherche du menu tombe exactement
     sur celle de l'en-tête, et la colonne de contenu s'aligne dessous. */
  grid-template-columns: minmax(222px, 1fr) minmax(0, 892px) minmax(222px, 1fr);
  column-gap: var(--safir-esp-m);
}

.safir-menu__rangee { display: contents; }

.safir-menu__gauche {
  display: flex;
  align-items: center;
  gap: var(--safir-esp-m);
  min-height: 96px;
}

.safir-menu__fermer { margin-left: calc(-1 * var(--safir-esp-2xs)); }
.safir-menu__fermer .safir-icone { width: 36px; height: 36px; }

/* Logo 173 x 49 à côté de « Fermer » (nœud 5992:5785). */
.safir-menu__marque { display: block; line-height: 0; }
.safir-menu__logo { width: 140px; height: auto; }

.safir-menu__recherche { align-self: center; grid-column: 2; }
.safir-menu__contact { align-self: center; grid-column: 3; justify-self: end; }

.safir-menu__colonne {
  grid-column: 2;
  padding-top: var(--safir-esp-s);
}

.safir-menu__presentation { margin-bottom: var(--safir-esp-m); }
.safir-menu__presentation p { margin: 0; font-size: 1rem; line-height: var(--safir-interligne-texte); letter-spacing: .01em; }

.safir-menu__presentation-titre {
  font-family: var(--safir-police-titre);
  font-weight: 700;
  margin-bottom: var(--safir-esp-2xs) !important;
}

.safir-menu__liste { list-style: none; margin: 0; padding: 0; counter-reset: safir-menu; }

.safir-menu__liste li { counter-increment: safir-menu; }

/* Lignes de 95 px, numéro en lettres creuses (nœud 5992:1685). */
.safir-menu__liste a {
  display: flex;
  align-items: center;
  gap: 44px;
  min-height: 95px;
  font-family: var(--safir-police-titre);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  font-weight: var(--safir-graisse-forte);
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--safir-texte-inverse);
  transition: color var(--safir-transition);
}

.safir-menu__liste a::before {
  content: counter(safir-menu, decimal-leading-zero);
  flex: 0 0 51px;
  letter-spacing: .06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--safir-texte-inverse);
  font-variant-numeric: tabular-nums;
}

.safir-menu__liste a:hover,
.safir-menu__liste a:focus-visible,
.safir-menu__liste .current-menu-item a { color: var(--safir-rose-pale); }

.safir-menu__membres {
  display: inline-block;
  margin-top: var(--safir-esp-l);
  font-size: var(--safir-t-m);
  text-underline-offset: .3em;
}

@media (max-width: 900px) {
  .safir-menu__interieur { grid-template-columns: auto 1fr auto; row-gap: var(--safir-esp-s); }
  .safir-menu__gauche { grid-column: 1 / 3; min-height: 72px; gap: var(--safir-esp-m); }
  .safir-menu__logo { width: 140px; }
  .safir-menu__recherche { grid-column: 1 / -1; }
  .safir-menu__colonne { grid-column: 1 / -1; }
  .safir-menu__fermer { min-height: 72px; }
  .safir-menu__liste a { min-height: 64px; gap: var(--safir-esp-m); }
  .safir-menu__panneau { padding-bottom: var(--safir-esp-l); }
}

@media (max-width: 560px) {
  .safir-menu__contact { display: none; }
}

/* ------------------------------------------------------------------
   Cartes
   ------------------------------------------------------------------ */

.safir-carte-oeuvre__lien,
.safir-carte-actu__lien { display: block; text-decoration: none; color: inherit; }

.safir-carte-oeuvre__media,
.safir-carte-actu__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--safir-fond-media);
  margin-bottom: var(--safir-esp-s);
}

.safir-carte-actu__media { aspect-ratio: 546 / 521; border-radius: var(--safir-rayon-s); }

.safir-carte-oeuvre__media img,
.safir-carte-actu__media img { transition: transform 600ms cubic-bezier(.2, .6, .3, 1); }

/* Même geste que les entrées de catégories de l'accueil : un triangle plein
   grandit depuis l'angle bas droit du visuel, couleur de la famille
   (calques « Polygon 1 » : 81 px sur 560, soit 14,5 % de la largeur). */
.safir-carte-oeuvre__media,
.safir-carte-auteur__portrait { position: relative; container-type: inline-size; }

.safir-carte-oeuvre__media::after,
.safir-carte-auteur__portrait::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0;
  border-color: transparent transparent var(--safir-coin, var(--safir-accent-clair)) transparent;
  transition: border-width 350ms cubic-bezier(.2, .6, .3, 1);
  pointer-events: none;
  z-index: 1;
}

.safir-carte-oeuvre__lien:hover .safir-carte-oeuvre__media::after,
.safir-carte-oeuvre__lien:focus-visible .safir-carte-oeuvre__media::after,
.safir-carte-auteur__lien:hover .safir-carte-auteur__portrait::after,
.safir-carte-auteur__lien:focus-visible .safir-carte-auteur__portrait::after { border-width: 0 0 14.5cqi 14.5cqi; }

/* Couleurs relevées sur les calques « Polygon 1 » de la maquette. */
.safir-famille--documentaire { --safir-coin: #d0ae42; }
.safir-famille--fiction { --safir-coin: #2ba8aa; }
.safir-famille--animation { --safir-coin: #992055; }
.safir-famille--ecritures-numeriques { --safir-coin: var(--safir-accent-clair); }

.safir-carte-oeuvre__lien:hover .safir-carte-oeuvre__media img,
.safir-carte-actu__lien:hover .safir-carte-actu__media img { transform: scale(1.04); }

.safir-carte-oeuvre__titre,
.safir-carte-actu__titre {
  font-size: var(--safir-t-l);
  margin-bottom: var(--safir-esp-3xs);
}

/* Nœud 5992:3752 : Asap gras 20 px, interligne 1,55, puis la date en 16. */
.safir-carte-actu__titre {
  font-family: var(--safir-police-texte);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: var(--safir-interligne-texte);
  margin-bottom: 0;
}

.safir-carte-actu__date {
  font-size: 1rem !important;
  font-weight: var(--safir-graisse-forte);
  line-height: var(--safir-interligne-texte);
}

.safir-carte-oeuvre__credits,
.safir-carte-oeuvre__meta,
.safir-carte-actu__date {
  margin: 0;
  font-size: var(--safir-t-s);
  color: var(--safir-texte-doux);
}

.safir-media__absent {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--safir-fond-alt) 0 12px, var(--safir-fond-media) 12px 24px);
}

/* ------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------ */

.safir-pied {
  background: var(--safir-bordeaux) url("../img/constellation.svg") center / 1679px 756px no-repeat;
  color: var(--safir-texte-inverse);
  margin-top: var(--safir-esp-2xl);
}

.safir-pied__interieur {
  max-width: var(--safir-largeur-max);
  margin-inline: auto;
  padding-inline: var(--safir-gouttiere);
}

/* Nœud 5992:1547 : logo à gauche, réseaux vers le milieu, coordonnées à
   droite, 112 px de marge en haut, la ligne à 376 px. */
.safir-pied > .safir-pied__interieur {
  display: grid;
  gap: var(--safir-esp-l);
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  padding-block: 112px 96px;
}

.safir-pied__logo { width: min(385px, 70vw); height: auto; }

.safir-pied__baseline {
  max-width: 448px;
  margin: var(--safir-esp-s) 0 0;
  font-size: 1.125rem;
  font-weight: var(--safir-graisse-moyenne);
  line-height: var(--safir-interligne-texte);
  letter-spacing: .06em;
}

.safir-pied__reseaux { padding-top: 44px; }
.safir-pied__reseaux ul { list-style: none; margin: 0; padding: 0; }
.safir-pied__reseaux li + li { margin-top: var(--safir-esp-m); }

.safir-pied__reseaux a {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-normale);
  font-size: 1.5rem;
  letter-spacing: .01em;
  text-decoration: none;
}

.safir-pied__reseaux a::before {
  content: "";
  width: 25px; height: 1px;
  background: var(--safir-rose-doux);
  margin-left: -38px;
}

.safir-pied__reseaux a:hover { text-decoration: underline; text-underline-offset: .3em; }

.safir-pied__contact {
  padding-top: 23px;
  font-size: .75rem;
  line-height: var(--safir-interligne-texte);
  letter-spacing: .06em;
}
.safir-pied__contact p { margin: 0; }
.safir-pied__contact p + p, .safir-pied__contact address { margin-top: 0; }
.safir-pied__contact address { font-style: normal; margin-top: 1.55em; }
.safir-pied__contact a { color: inherit; }
.safir-pied__nom { font-weight: 700; }

.safir-pied__bas { border-top: 1.5px solid var(--safir-bordure-pied); }

.safir-pied__bas .safir-pied__interieur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-s) var(--safir-esp-m);
  justify-content: center;
  padding-block: 27px 29px;
  font-size: .75rem;
  letter-spacing: .06em;
  line-height: var(--safir-interligne-texte);
}

.safir-pied__droits { margin: 0; }

.safir-pied__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-m);
  list-style: none;
  margin: 0; padding: 0;
}
.safir-pied__legal a { text-decoration: none; }
.safir-pied__legal a:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .safir-pied > .safir-pied__interieur { grid-template-columns: 1fr 1fr; padding-block: var(--safir-esp-xl); }
  .safir-pied__marque { grid-column: 1 / -1; }
  .safir-pied__reseaux, .safir-pied__contact { padding-top: 0; }
  .safir-pied__reseaux a::before { margin-left: 0; }
}

@media (max-width: 560px) {
  .safir-pied > .safir-pied__interieur { grid-template-columns: 1fr; gap: var(--safir-esp-m); }
}

/* ------------------------------------------------------------------
   Précisions typographiques relevées sur la maquette
   ------------------------------------------------------------------ */

.safir-section__titre {
  font-weight: var(--safir-graisse-forte);
  letter-spacing: var(--safir-interlettre-titre);
}


/* ------------------------------------------------------------------
   Étiquettes (genre, thématique, lieux, mots-clés)
   ------------------------------------------------------------------ */

.safir-etiquettes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-2xs);
}

.safir-etiquette {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--safir-bordure);
  border-radius: var(--safir-rayon-s);
  font-size: var(--safir-t-xs);
  letter-spacing: var(--safir-interlettre-mention);
  text-transform: uppercase;
  color: var(--safir-texte-doux);
  text-decoration: none;
  transition: border-color var(--safir-transition), color var(--safir-transition);
}

a.safir-etiquette:hover,
a.safir-etiquette:focus-visible { border-color: var(--safir-accent-texte); color: var(--safir-accent-texte); }

/* ------------------------------------------------------------------
   Encart latéral (actualité, espace membres)
   ------------------------------------------------------------------ */

.safir-encart {
  padding: var(--safir-esp-m);
  background: var(--safir-fond-alt);
  border-radius: var(--safir-rayon-m);
}

.safir-encart + .safir-encart { margin-top: var(--safir-esp-m); }

.safir-encart__mention {
  margin: 0 0 var(--safir-esp-xs);
  font-family: var(--safir-police-titre);
  font-size: var(--safir-t-xs);
  letter-spacing: var(--safir-interlettre-mention);
  text-transform: uppercase;
  color: var(--safir-accent-texte);
}

.safir-encart__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--safir-rayon-s);
  margin-bottom: var(--safir-esp-s);
}

.safir-encart__titre {
  font-size: var(--safir-t-l);
  margin: 0 0 var(--safir-esp-3xs);
}

.safir-encart__date {
  margin: 0 0 var(--safir-esp-s);
  font-size: var(--safir-t-s);
  color: var(--safir-texte-doux);
}

.safir-encart__texte { font-size: var(--safir-t-s); }
.safir-encart__texte p { margin: 0; }
.safir-encart__texte p + p { margin-top: var(--safir-esp-xs); }
.safir-encart__texte + .safir-bouton { margin-top: var(--safir-esp-s); }

.safir-encart__liste { list-style: none; padding: 0; margin: 0; }
.safir-encart__liste li + li { margin-top: var(--safir-esp-xs); }
.safir-encart__liste a { font-weight: var(--safir-graisse-moyenne); }
.safir-encart__liste small { display: block; color: var(--safir-texte-doux); }
.safir-encart__liste code { font-family: inherit; padding: 1px 6px; background: rgba(255, 255, 255, .12); border-radius: var(--safir-rayon-s); }

/* Les accès membres sont sur fond bordeaux : c'est une porte, pas une info. */
.safir-encart--membres {
  background: var(--safir-bordeaux);
  color: var(--safir-texte-inverse);
}

/* Constellation de la maquette (vecteurs de 5992:3772, sans dégradé) en
   filigrane sur les panneaux bordeaux : même densité qu'en accueil, jamais
   mise à l'échelle, le motif est simplement recadré. */
.safir-constellation {
  background-image: url("../img/constellation.svg");
  background-size: 1679px 756px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sur un petit panneau, le recadrage centré ne montre qu'un bout de ligne
   et ressemble à un défaut (capture de Pierre du 8 septembre sur l'encart
   membres) : on cale le motif sur sa zone la plus dense (haut gauche du
   calque), légèrement réduit. Piste écartée : `background-size: cover`,
   qui étire les traits à 0,6 px jusqu'à les faire disparaître. */
.safir-encart--membres.safir-constellation,
.safir-dialogue--bordeaux.safir-constellation,
.safir-qsn__accroche.safir-constellation {
  background-size: 1200px auto;
  background-position: -60px -40px;
}
.safir-encart--membres .safir-encart__mention { color: var(--safir-accent-texte); }
.safir-encart--membres a { color: inherit; }
/* Le bouton par défaut est déjà la vitre blanche : sur bordeaux, seul le
   survol change de teinte. */
.safir-encart--membres .safir-bouton:hover,
.safir-encart--membres .safir-bouton:focus-visible { color: var(--safir-bordeaux); }
.safir-encart--membres small { color: rgba(255, 255, 255, .7); }
.safir-encart--membres code { background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------
   Fiche technique
   ------------------------------------------------------------------ */

.safir-fiche-technique { margin: 0; }

.safir-fiche-technique__ligne {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--safir-esp-s);
  padding-block: var(--safir-esp-xs);
  border-top: 1px solid var(--safir-bordure);
}

.safir-fiche-technique__ligne:last-child { border-bottom: 1px solid var(--safir-bordure); }

.safir-fiche-technique dt {
  font-size: var(--safir-t-xs);
  letter-spacing: var(--safir-interlettre-mention);
  text-transform: uppercase;
  color: var(--safir-texte-doux);
  padding-top: .2em;
}

.safir-fiche-technique dd { margin: 0; }

@media (max-width: 560px) {
  .safir-fiche-technique__ligne { grid-template-columns: 1fr; gap: var(--safir-esp-3xs); }
}

/* ------------------------------------------------------------------
   Visionneuse d'œuvre
   L'image est montrée entière (contain) sur une copie floutée d'elle-même :
   aucun photogramme n'est recadré, quelle que soit sa proportion.
   ------------------------------------------------------------------ */

.safir-visionneuse { display: grid; gap: var(--safir-esp-xs); }

.safir-visionneuse__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--safir-noir);
  border-radius: var(--safir-rayon-m);
}

.safir-visionneuse__fond {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(28px);
  opacity: .55;
}

.safir-visionneuse__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.safir-visionneuse__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 35%);
  pointer-events: none;
}

.safir-visionneuse__lecture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--safir-esp-m);
}

.safir-visionneuse__compteur {
  position: absolute;
  right: var(--safir-esp-s);
  bottom: var(--safir-esp-xs);
  z-index: 1;
  color: var(--safir-texte-inverse);
  font-size: var(--safir-t-xs);
  letter-spacing: var(--safir-interlettre-mention);
  font-variant-numeric: tabular-nums;
}

.safir-visionneuse__vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-2xs);
}

.safir-visionneuse__vignette {
  width: 96px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--safir-rayon-s);
  overflow: hidden;
  background: var(--safir-fond-media);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--safir-transition), box-shadow var(--safir-transition);
}

.safir-visionneuse__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.safir-visionneuse__vignette:hover,
.safir-visionneuse__vignette:focus-visible { opacity: 1; }
.safir-visionneuse__vignette[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--safir-accent-clair); }

/* Lecteur en place : il remplace le cadre, pas de fenêtre modale. */
.safir-visionneuse__lecteur { position: relative; }
.safir-visionneuse__iframe { aspect-ratio: 16 / 9; background: var(--safir-noir); border-radius: var(--safir-rayon-m); overflow: hidden; }
.safir-visionneuse__iframe iframe { display: block; width: 100%; height: 100%; border: 0; }

.safir-visionneuse__fermer {
  position: absolute;
  top: var(--safir-esp-xs);
  right: var(--safir-esp-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--safir-esp-3xs);
  min-height: 44px;
  padding: 0 var(--safir-esp-s);
  border: 1px solid var(--safir-bordure-inverse);
  border-radius: var(--safir-rayon-bouton);
  background: rgba(0, 0, 0, .45);
  color: var(--safir-texte-inverse);
  font-size: var(--safir-t-s);
  cursor: pointer;
}

.safir-visionneuse__fermer:hover,
.safir-visionneuse__fermer:focus-visible { background: var(--safir-blanc); color: var(--safir-noir); }

/* ------------------------------------------------------------------
   Liens discrets et bouton bloc
   ------------------------------------------------------------------ */

.safir-lien-retour,
.safir-lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--safir-esp-2xs);
  min-height: 44px;
  font-size: var(--safir-t-s);
  font-weight: var(--safir-graisse-moyenne);
  text-decoration: none;
  color: var(--safir-texte-doux);
}

.safir-lien-retour:hover,
.safir-lien-fleche:hover { color: var(--safir-accent-texte); }
.safir-lien-fleche::after { content: "→"; }

.safir-bouton--bloc { display: flex; width: 100%; }

/* ------------------------------------------------------------------
   Boîte de dialogue et formulaire
   ------------------------------------------------------------------ */

.safir-dialogue {
  width: min(640px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--safir-rayon-m);
  background: var(--safir-fond);
  color: var(--safir-texte);
  box-shadow: 0 30px 80px rgba(22, 20, 18, .35);
}

.safir-dialogue::backdrop { background: rgba(22, 20, 18, .7); }

/* Boîte de contact : panneau bordeaux, comme les autres encarts de marque.
   Les champs restent sur fond sombre neutre pour la lisibilité de la saisie. */
.safir-dialogue--bordeaux { background-color: var(--safir-bordeaux); color: var(--safir-texte-inverse); }
.safir-dialogue--bordeaux .safir-dialogue__texte { color: var(--safir-rose-pale); }
.safir-dialogue--bordeaux .safir-encart__mention { color: var(--safir-accent-texte); }
.safir-dialogue--bordeaux .safir-champ label span { color: var(--safir-rose-pale); }
.safir-dialogue--bordeaux .safir-champ input,
.safir-dialogue--bordeaux .safir-champ textarea { background: rgba(0, 0, 0, .3); color: var(--safir-texte-inverse); }
.safir-dialogue--bordeaux .safir-dialogue__fermer { border-color: var(--safir-bordure-inverse); color: inherit; }
.safir-dialogue--bordeaux .safir-dialogue__fermer:hover,
.safir-dialogue--bordeaux .safir-dialogue__fermer:focus-visible { background: var(--safir-blanc); color: var(--safir-bordeaux); }
.safir-dialogue--bordeaux .safir-retour { background: rgba(0, 0, 0, .3); }
.safir-dialogue[open] { max-height: 90dvh; overflow: auto; overscroll-behavior: contain; }
.safir-formulaire .safir-retour { margin-bottom: var(--safir-esp-m); }

.safir-dialogue__fermer {
  position: absolute;
  top: var(--safir-esp-s);
  right: var(--safir-esp-s);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--safir-bordure);
  border-radius: 50%;
  background: var(--safir-fond);
  color: inherit;
  cursor: pointer;
}

.safir-dialogue__fermer:hover,
.safir-dialogue__fermer:focus-visible { background: var(--safir-texte); color: var(--safir-fond); }

.safir-dialogue__titre { font-size: var(--safir-t-xl); margin: 0 0 var(--safir-esp-2xs); padding-right: 56px; }
.safir-dialogue__texte { margin: 0 0 var(--safir-esp-m); color: var(--safir-texte-doux); font-size: var(--safir-t-s); }

.safir-formulaire { padding: var(--safir-esp-l); }
.safir-formulaire__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 var(--safir-esp-s); }
.safir-formulaire__piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.safir-formulaire__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-xs);
  margin-top: var(--safir-esp-m);
}

.safir-champ { display: grid; gap: var(--safir-esp-3xs); margin: 0 0 var(--safir-esp-s); }
.safir-champ label { font-size: var(--safir-t-s); font-weight: var(--safir-graisse-moyenne); }
.safir-champ label span { font-weight: var(--safir-graisse-normale); color: var(--safir-texte-doux); }

.safir-champ input,
.safir-champ textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--safir-esp-xs) var(--safir-esp-s);
  border: 1px solid var(--safir-bordure-inverse);
  border-radius: var(--safir-rayon-s);
  background: var(--safir-fond);
  font-size: var(--safir-t-m);
}

.safir-champ textarea { resize: vertical; }
.safir-champ input:focus-visible,
.safir-champ textarea:focus-visible { outline: 2px solid var(--safir-accent-texte); outline-offset: 1px; border-color: var(--safir-accent-texte); }
.safir-champ input:user-invalid,
.safir-champ textarea:user-invalid { border-color: var(--safir-accent-sombre); }

/* Message de retour après envoi. */
.safir-retour {
  margin: 0;
  padding: var(--safir-esp-s) var(--safir-esp-m);
  border-radius: var(--safir-rayon-s);
  border-left: 3px solid var(--safir-accent-texte);
  background: var(--safir-fond-alt);
  font-size: var(--safir-t-s);
}
.safir-retour--ok { border-left-color: var(--safir-succes); }
.safir-retour--erreur { border-left-color: var(--safir-accent-clair); }

.safir-encart__lien { display: block; text-align: center; margin-top: var(--safir-esp-xs); font-size: var(--safir-t-s); }
.safir-encart__mention .safir-icone { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.safir-encart__liste .safir-icone { width: 16px; height: 16px; vertical-align: -3px; }

.safir-icone { display: inline-block; flex: none; vertical-align: -.2em; }

/* Portrait de remplacement : initiales sur fond média, même cadre carré que
   la photo. Le répertoire en affiche une vingtaine, il ne doit pas jurer. */
.safir-portrait-absent {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: var(--safir-fond-media);
  color: var(--safir-texte-doux);
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: clamp(1.75rem, 12cqi, 3.5rem);
  letter-spacing: .04em;
  user-select: none;
}