/**
 * Styles propres aux gabarits. La page d'accueil d'abord, les autres
 * viendront s'ajouter ici au fur et à mesure.
 */

/* ------------------------------------------------------------------
   Bandeau de la page d'accueil
   Nœud 5992:1410 : 957 px de haut en 1920, la ligne à 670, le logo 42 px
   sous la ligne, les boutons sur la même ligne à droite.
   ------------------------------------------------------------------ */

.safir-bandeau {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* L'en-tête transparent le chevauche : le bandeau doit donc commencer
     sous lui, pas après. */
  z-index: 1;
  /* Même proportion que la maquette (957 / 1920), bornée : sur un écran
     bas, un bandeau plein écran repousse tout le contenu hors de vue. */
  min-height: clamp(560px, 49.85vw, 957px);
  color: var(--safir-texte-inverse);
  overflow: hidden;
}

.safir-bandeau__fond { position: absolute; inset: 0; }

.safir-bandeau__image,
.safir-bandeau__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.safir-bandeau__video { opacity: 0; transition: opacity 600ms ease; }
.safir-bandeau__video[data-pret] { opacity: 1; }

/* Voile de lisibilité : sans lui, le logo blanc disparaît sur un ciel clair. */
.safir-bandeau__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, .12) 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, transparent 30%);
}

.safir-bandeau__contenu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--safir-esp-l);
  width: 100%;
  padding-block: 42px 78px;
  margin-top: auto;
}

/* La ligne court sur la largeur utile, pas sur les gouttières. */
.safir-bandeau__contenu::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--safir-gouttiere);
  height: 1px;
  background: var(--safir-blanc);
  opacity: .9;
}

.safir-bandeau__titre { margin: 0; line-height: 0; }
.safir-bandeau__logo { width: min(385px, 62vw); height: auto; }

.safir-bandeau__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-bandeau__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--safir-esp-m);
  /* Les boutons sont à 99 px sous la ligne dans la maquette, le logo à 42. */
  margin-top: 57px;
}

@media (max-width: 960px) {
  .safir-bandeau__actions { margin-top: 0; }
}

@media (max-width: 720px) {
  .safir-bandeau__contenu { flex-direction: column; align-items: stretch; padding-block: var(--safir-esp-m) var(--safir-esp-l); }
  .safir-bandeau__actions .safir-bouton { flex: 1 1 auto; }
  /* La flèche de fin ferait passer le libellé long sur deux lignes. */
  .safir-bandeau__actions .safir-icone:last-child { display: none; }
  .safir-bandeau__baseline { font-size: 1rem; }
}

/* ------------------------------------------------------------------
   Sections de l'accueil : 84 px entre le bas d'un bloc et le titre suivant,
   72 px entre le titre et le contenu (relevé sur 5992:1410).
   ------------------------------------------------------------------ */

.safir-accueil .safir-section { padding-block: 84px 0; }
.safir-accueil .safir-section__titre { margin-bottom: 32px; }
.safir-accueil .safir-actualites { padding-bottom: 38px; }

/* ------------------------------------------------------------------
   Trois entrées du catalogue : jointives, carrées, titre 48 px en bas.
   ------------------------------------------------------------------ */

.safir-categories {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.safir-categorie {
  position: relative;
  display: block;
  /* Proportion relevée sur la maquette : 560 x 539. */
  aspect-ratio: 560 / 539;
  container-type: inline-size;
  color: var(--safir-texte-inverse);
  text-decoration: none;
  overflow: hidden;
  background: var(--safir-noir);
}

.safir-categorie__media { position: absolute; inset: 0; }

.safir-categorie__media img {
  transition: transform 700ms cubic-bezier(.2, .6, .3, 1);
}

/* Assombrissement progressif du bas, comme sur la maquette : l'image reste
   lisible en haut, et le titre se détache sans voile sur toute la carte. */
.safir-categorie__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 1) 100%);
}

.safir-categorie:hover .safir-categorie__media img,
.safir-categorie:focus-visible .safir-categorie__media img {
  transform: scale(1.05);
}

/* Au survol, un triangle plein grandit depuis l'angle bas droit (relevé sur
   l'enregistrement du 8 septembre 2026), une couleur par entrée. */
.safir-categorie::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 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;
}

.safir-categorie:hover::after,
.safir-categorie:focus-visible::after { border-width: 0 0 81px 81px; }



.safir-categorie__titre {
  position: absolute;
  left: 42px;
  bottom: 54px;
  right: var(--safir-esp-m);
  font-family: var(--safir-police-titre);
  /* 48 px sur une carte de 560 dans la maquette, soit 8,6 % de sa largeur :
     la même proportion sur nos cartes de 427 px, sinon « Documentaires »
     touche le bord droit. Piste abandonnée : garder 48 px et réduire le
     `left` de 42 px, le mot dépassait encore à 1280. Le `clamp` rend ses
     48 px à 1920 (cartes de 560) et plafonne à 3rem au-delà. */
  font-size: clamp(1.5rem, 8.6cqi, 3rem);
  font-weight: var(--safir-graisse-forte);
  line-height: 1.1;
  text-wrap: balance;
}

@media (max-width: 560px) {
  .safir-categorie__titre { left: var(--safir-esp-m); bottom: var(--safir-esp-m); }
}

/* ------------------------------------------------------------------
   Bandeau association (nœud 5992:1441) : 239 px, dégradé, texte à 49 px
   du bord, boutons à droite. 40 px sous les entrées du catalogue.
   ------------------------------------------------------------------ */

.safir-asso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--safir-esp-l);
  min-height: 239px;
  margin-top: 40px;
  padding: var(--safir-esp-l) 49px;
  /* Fond exporté de la maquette (nœud 5992:1441) : dégradé, grain et
     constellations dans un seul SVG, arrondi de 12 px. */
  background: var(--safir-fond-panneau) url("../img/fond-decouvrir.svg") center / cover no-repeat;
  border-radius: var(--safir-rayon-m);
  color: var(--safir-texte-inverse);
}

/* Le texte cède la place aux boutons, qui restent sur une ligne à droite. */
.safir-asso__texte { flex: 1 1 0; min-width: 0; max-width: 927px; }
.safir-asso__actions { flex: none; }

.safir-asso__titre {
  font-size: 1.5rem;
  margin: 0 0 var(--safir-esp-xs);
}

.safir-asso__texte p {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--safir-graisse-moyenne);
  line-height: var(--safir-interligne-texte);
  letter-spacing: .06em;
}

.safir-asso__actions { display: flex; flex-wrap: wrap; gap: 27px; }
.safir-asso__actions .safir-bouton { min-width: 207px; }

@media (max-width: 960px) {
  .safir-asso__texte { flex-basis: 100%; }
  .safir-asso__actions { width: 100%; }
}

@media (max-width: 640px) {
  .safir-asso { padding: var(--safir-esp-m); }
  .safir-asso__actions { gap: var(--safir-esp-s); }
  .safir-asso__actions .safir-bouton { flex: 1 1 auto; min-width: 0; }
}

/* ------------------------------------------------------------------
   Auteur au hasard (nœud 5992:3772) : deux aplats dégradés jointifs à la
   fiche bordeaux de 647 px, 756 px de haut.
   ------------------------------------------------------------------ */

.safir-auteur-hasard__cadre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(647px, 100%) minmax(0, 1fr);
  min-height: 756px;
  /* Fond exporté de la maquette (nœud 5992:3772), arrondi de 12 px. */
  background: var(--safir-fond-panneau) url("../img/fond-auteur.svg") center / cover no-repeat;
  border-radius: var(--safir-rayon-m);
  overflow: hidden;
}

.safir-auteur-hasard__fiche {
  display: grid;
  grid-template-columns: min(335px, 100%);
  justify-content: center;
  align-content: start;
  gap: 0;
  padding: 37px 0 65px;
  text-align: center;
  grid-column: 2;
  background: var(--safir-fond-panneau);
  color: var(--safir-texte-inverse);
  box-shadow: 0 0 30px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 1;
}

.safir-auteur-hasard__nom {
  font-size: 1.75rem;
  line-height: 1.35;
  margin: 0 0 36px;
}
.safir-auteur-hasard__nom a { text-decoration: none; color: inherit; }
.safir-auteur-hasard__nom a:hover { color: var(--safir-rose-pale); }

.safir-auteur-hasard__portrait {
  display: block;
  aspect-ratio: 1 / 1;
  margin: 0 0 14px;
}

/* Montserrat 16 semi-gras, six lignes puis points de suspension. */
.safir-auteur-hasard__bio {
  margin: 0 0 36px;
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .safir-auteur-hasard__cadre { grid-template-columns: 1fr; min-height: 0; background: none; }
  .safir-auteur-hasard__fiche { grid-column: 1; }
  .safir-auteur-hasard__fiche { padding: var(--safir-esp-m) var(--safir-esp-m) var(--safir-esp-l); }
}

/* ------------------------------------------------------------------
   Carrousel d'actualités
   ------------------------------------------------------------------ */

.safir-actualites__zone {
  position: relative;
  /* Largeur d'une carte : trois par largeur utile, avec deux écarts de 21 px.
     Calculée sur la grille et non sur le rail, qui déborde à droite. */
  --safir-carte-actu: calc((min(var(--safir-largeur-utile), 100vw - 2 * var(--safir-gouttiere)) - 42px) / 3);
}

/* Le rail est un enfant de la grille : son bord gauche est donc aligné sur
   le titre de section sans le moindre calcul. Seul le débordement vers la
   droite est provoqué, par une marge négative qui va jusqu'au bord de la
   fenêtre. Poser le padding sur un élément à la fois centré, contraint en
   largeur et scrollable ne fonctionne pas : le contenu ignore le padding de
   début et le carrousel se décale d'une gouttière vers la gauche. */
.safir-actualites__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 21px;
}

/* Défilement horizontal au doigt, avec ancrage sur chaque carte. Largeur de
   carte : 546 sur 1680 utiles, soit un tiers moins la gouttière. */
.safir-actualites__piste--defilante .safir-actualites__rail {
  grid-auto-columns: max(260px, var(--safir-carte-actu));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--safir-esp-2xs);

  /* 50% se rapporte au bloc de grille, 50vw à la fenêtre : la différence
     est exactement la distance qui reste jusqu'au bord droit. */
  margin-right: calc(50% - 50vw);
  padding-right: var(--safir-gouttiere);
}

/* La fenêtre ne doit jamais défiler horizontalement à cause du carrousel :
   50vw inclut la barre de défilement verticale, d'où ce garde-fou. */
.safir-actualites { overflow-x: clip; }

.safir-actualites__piste--defilante .safir-actualites__rail::-webkit-scrollbar { display: none; }
.safir-actualites__piste--defilante .safir-carte-actu { scroll-snap-align: start; }

/* Flèches posées sur les visuels, à mi-hauteur, comme le nœud 5992:3749. */
.safir-actualites__commandes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  /* Même boîte que la grille : les flèches se placent par rapport au bord
     des cartes, pas au bord de la fenêtre, quel que soit l'écran. */
  max-width: var(--safir-largeur-max);
  margin-inline: auto;
}

.safir-actualites__fleche {
  position: absolute;
  /* Centre du visuel : largeur de carte = (largeur utile - 2 x 21) / 3,
     hauteur = largeur x 521 / 546. */
  top: calc(var(--safir-carte-actu) * 521 / 546 / 2);
  transform: translateY(-50%);
  width: 60px;
  height: 62px;
  padding: 0;
  gap: 0;
  pointer-events: auto;
  background: rgba(0, 0, 0, .35);
}

/* Nœud 5992:3749 : 24 px à l'intérieur de la carte qui déborde à droite,
   soit 40 px au-delà du bord de la grille ; la flèche « précédent » en
   miroir, 40 px avant le bord gauche. Sur un écran plus étroit que la
   maquette, elles restent à 16 px du bord de la fenêtre. */
/* La flèche « suivant » reste ancrée à la fenêtre (16 px du bord, validé
   par Pierre) : on retranche la marge de centrage de la boîte. */
.safir-actualites__fleche--suivant { right: calc(max(16px, var(--safir-gouttiere) - 100px) - max(0px, (100vw - var(--safir-largeur-max)) / 2)); }
/* Les deux flèches ne sont pas symétriques, et c'est voulu. Le bloc
   `.safir-actualites__commandes` est centré sur la grille (max-width) pour
   que « précédent » se pose juste avant la première carte, quel que soit
   l'écran. « Suivant » doit rester à 16 px du bord de la fenêtre (arbitrage
   de Pierre le 8 septembre, après un essai symétrique qu'il a refusé) : on
   retranche donc la marge de centrage du bloc, `(100vw - largeur-max) / 2`,
   nulle sous 1440. Ne pas « simplifier » en alignant les deux sur la grille. */
.safir-actualites__fleche--precedent { left: max(16px, calc(var(--safir-gouttiere) - 100px)); }
.safir-actualites__fleche[disabled] { opacity: 0; pointer-events: none; }

/* Sous 1100 px la gouttière ne laisse plus la place : le rail se fait au doigt. */
@media (max-width: 1100px) {
  .safir-actualites__fleche { display: none; }
}

.safir-vide { color: var(--safir-texte-doux); }

/* ------------------------------------------------------------------
   Page absente
   ------------------------------------------------------------------ */

.safir-404 { max-width: var(--safir-largeur-texte); }
.safir-404__recherche { margin-block: var(--safir-esp-m); }
.safir-404__pistes { list-style: none; padding: 0; }
.safir-404__pistes li + li { margin-top: var(--safir-esp-2xs); }

/* ------------------------------------------------------------------
   Actualité héritée de l'ancien site
   Page de lecture simple, colonne de texte, sans navigation vers d'autres
   actualités : elles n'existent pas comme rubrique.
   ------------------------------------------------------------------ */

.safir-actu-heritee__article {
  max-width: var(--safir-largeur-texte);
  margin-inline: auto;
}

.safir-actu-heritee__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-actu-heritee__titre {
  font-size: var(--safir-t-2xl);
  margin: 0 0 var(--safir-esp-s);
}

.safir-actu-heritee__date {
  margin: 0 0 var(--safir-esp-l);
  color: var(--safir-texte-doux);
}

.safir-actu-heritee__media {
  margin: 0 0 var(--safir-esp-l);
  aspect-ratio: 16 / 10;
  border-radius: var(--safir-rayon-m);
}

.safir-actu-heritee__texte { font-size: var(--safir-t-m); }
.safir-actu-heritee__texte p + p { margin-top: var(--safir-esp-s); }

.safir-actu-heritee__infos {
  margin-top: var(--safir-esp-m);
  padding: var(--safir-esp-s) var(--safir-esp-m);
  border-left: 3px solid var(--safir-accent-texte);
  background: var(--safir-fond-alt);
  color: var(--safir-texte-doux);
}

.safir-actu-heritee__suite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-xs);
  margin-top: var(--safir-esp-xl);
}

/* ------------------------------------------------------------------
   Fiche œuvre
   Titre au-dessus d'une visionneuse pleine largeur, puis deux colonnes :
   la lecture à gauche, les actions à droite. Sans lecture (fiche minimale),
   les actions prennent toute la largeur.
   ------------------------------------------------------------------ */

.safir-oeuvre__fil { padding-top: var(--safir-esp-m); }

.safir-oeuvre__entete { padding-block: var(--safir-esp-l); }

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

.safir-oeuvre__titre {
  font-size: var(--safir-t-3xl);
  line-height: 1.05;
  margin: 0 0 var(--safir-esp-m);
  text-wrap: balance;
}

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

.safir-oeuvre__credits li { display: flex; flex-direction: column; }
.safir-oeuvre__credits a,
.safir-oeuvre__credits span { font-size: var(--safir-t-l); font-family: var(--safir-police-titre); font-weight: var(--safir-graisse-forte); }
.safir-oeuvre__credits a { text-decoration: none; }
.safir-oeuvre__credits a:hover,
.safir-oeuvre__credits a:focus-visible { color: var(--safir-accent-texte); }
.safir-oeuvre__credits small { font-size: var(--safir-t-xs); color: var(--safir-texte-doux); letter-spacing: var(--safir-interlettre-mention); text-transform: uppercase; }

.safir-oeuvre__corps {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--safir-esp-2xl);
  align-items: start;
  padding-block: var(--safir-esp-xl) var(--safir-esp-2xl);
}

.safir-oeuvre__corps--sans-lecture { grid-template-columns: 1fr; }
.safir-oeuvre__corps--sans-lecture .safir-oeuvre__actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--safir-esp-m);
  align-items: start;
}

.safir-oeuvre__lecture { display: grid; gap: var(--safir-esp-xl); }

.safir-oeuvre__sous-titre {
  font-size: var(--safir-t-l);
  margin: 0 0 var(--safir-esp-s);
}

.safir-oeuvre__sous-titre--discret {
  font-family: var(--safir-police-texte);
  font-size: var(--safir-t-xs);
  font-weight: var(--safir-graisse-moyenne);
  letter-spacing: var(--safir-interlettre-mention);
  text-transform: uppercase;
  color: var(--safir-texte-doux);
}

.safir-oeuvre__resume {
  max-width: var(--safir-largeur-texte);
  font-size: var(--safir-t-l);
  font-weight: var(--safir-graisse-fine);
  line-height: 1.5;
}
.safir-oeuvre__resume p { margin: 0; }
.safir-oeuvre__resume p + p { margin-top: var(--safir-esp-s); }

.safir-oeuvre__actions {
  position: sticky;
  /* Sous l'en-tête flottant quand il réapparaît, jamais dessous. */
  top: calc(var(--safir-entete-hauteur, 96px) + var(--safir-esp-s));
  scroll-margin-top: calc(var(--safir-entete-hauteur, 96px) + var(--safir-esp-s));
  display: grid;
  gap: var(--safir-esp-m);
}

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

.safir-oeuvre__cta-note {
  margin: var(--safir-esp-3xs) 0 0;
  text-align: center;
  font-size: var(--safir-t-xs);
  color: var(--safir-texte-doux);
}

/* Actualité de l'œuvre, en section sur fond alterné. */
.safir-oeuvre__actualite { background: var(--safir-fond-alt); }

.safir-oeuvre__actualite-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--safir-esp-xl);
  align-items: start;
}

.safir-oeuvre__actualite-grille > div:only-child { grid-column: 1 / -1; max-width: var(--safir-largeur-texte); }

.safir-oeuvre__actualite-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--safir-rayon-m);
}

.safir-oeuvre__actualite-titre { font-size: var(--safir-t-xl); margin: 0 0 var(--safir-esp-3xs); }
.safir-oeuvre__actualite-texte { max-width: var(--safir-largeur-texte); }
.safir-oeuvre__actualite-texte p { margin: 0; }
.safir-oeuvre__actualite-texte p + p { margin-top: var(--safir-esp-s); }

.safir-oeuvre__autres { background: var(--safir-fond-alt); }

.safir-oeuvre__autres-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--safir-esp-s) var(--safir-esp-m);
}

.safir-oeuvre__autres-entete .safir-section__titre { margin-bottom: 0; }
.safir-oeuvre__autres-entete + .safir-grille { margin-top: var(--safir-esp-l); }

@media (max-width: 960px) {
  .safir-oeuvre__corps,
  .safir-oeuvre__actualite-grille { grid-template-columns: 1fr; gap: var(--safir-esp-l); }
  .safir-oeuvre__actions { position: static; }
}

/* ------------------------------------------------------------------
   Catalogue
   Titre, recherche et onglets de familles en tête ; puis colonne de
   filtres à gauche et résultats à droite. Sous 960 px, la colonne devient
   une boîte de dialogue plein écran ouverte par le bouton « Filtres ».
   ------------------------------------------------------------------ */

.safir-catalogue__entete {
  padding-top: var(--safir-esp-l);
  display: grid;
  gap: var(--safir-esp-m);
}

.safir-catalogue__titre { font-size: var(--safir-t-2xl); margin: 0; }

.safir-catalogue__intro {
  margin: 0;
  font-size: var(--safir-t-l);
  font-weight: var(--safir-graisse-fine);
  color: var(--safir-texte-doux);
}

.safir-catalogue__recherche { max-width: 892px; }
.safir-catalogue__recherche .safir-recherche { background: var(--safir-fond-alt); }

/* Onglets de familles : soulignement en accent, compte en gris. */
.safir-onglets {
  display: flex;
  gap: 0 var(--safir-esp-2xs);
  border-bottom: 1px solid var(--safir-bordure);
  /* Sur mobile, les onglets défilent en ligne plutôt que de s'empiler. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.safir-onglet {
  display: inline-flex;
  align-items: baseline;
  gap: var(--safir-esp-2xs);
  min-height: 44px;
  padding: var(--safir-esp-xs) var(--safir-esp-s);
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: var(--safir-t-m);
  text-decoration: none;
  white-space: nowrap;
  color: var(--safir-texte);
  transition: color var(--safir-transition), border-color var(--safir-transition);
}

.safir-onglet:hover { color: var(--safir-accent-texte); }
.safir-onglet[aria-current="page"] { color: var(--safir-accent-texte); border-bottom-color: var(--safir-accent-texte); }

.safir-onglet__nombre {
  font-family: var(--safir-police-texte);
  font-weight: var(--safir-graisse-moyenne);
  font-size: var(--safir-t-xs);
  letter-spacing: var(--safir-interlettre-mention);
  color: var(--safir-texte-doux);
  font-variant-numeric: tabular-nums;
}

.safir-catalogue__corps {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--safir-esp-l) var(--safir-esp-xl);
  align-items: start;
  padding-block: var(--safir-esp-l) var(--safir-esp-2xl);
}

.safir-catalogue__mobile { display: none; }

/* La colonne de filtres est un <dialog> : fermé, il n'a pas de rendu. Sur
   grand écran on le force en bloc statique et on cache ce qui n'a de sens
   qu'en boîte (titre avec bouton de fermeture, pied collant).

   Ni collante ni défilante en interne : une colonne coupée par le bord de
   l'écran, sans indice, se lit comme une liste qui s'arrête là. Elle défile
   avec la page, entière ; les puces au-dessus des résultats rappellent ce
   qui est coché quand on est descendu. */
.safir-filtres {
  display: block;
  /* Un <dialog> fermé est en position absolue par défaut : sans ceci il
     sort de la grille et s'étale sur toute la largeur de la fenêtre. */
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.safir-filtres__entete { display: none; }

.safir-filtres__groupes { display: grid; gap: var(--safir-esp-s); }

.safir-filtre { border: 0; padding: 0; margin: 0; display: grid; gap: 0; }

.safir-filtre__legende {
  padding: 0;
  margin-bottom: var(--safir-esp-2xs);
  font-family: var(--safir-police-texte);
  font-size: var(--safir-t-xs);
  font-weight: var(--safir-graisse-moyenne);
  letter-spacing: var(--safir-interlettre-mention);
  text-transform: uppercase;
  color: var(--safir-texte-doux);
}

.safir-filtre__option {
  display: flex;
  align-items: center;
  gap: var(--safir-esp-xs);
  /* 32 px : la case et son libellé restent une cible de 44 px en largeur,
     et une liste de trente options tient sans faire défiler la colonne. */
  min-height: 32px;
  cursor: pointer;
  font-size: var(--safir-t-s);
}

.safir-filtre__option input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--safir-accent-clair); }
.safir-filtre__libelle { flex: 1; line-height: 1.3; }
.safir-filtre__nombre { font-size: var(--safir-t-xs); color: var(--safir-texte-doux); font-variant-numeric: tabular-nums; }
.safir-filtre__option--vide { color: var(--safir-texte-doux); }

/* Sans script, tout est visible : le repli n'existe qu'avec le bouton. */
html:not(.safir-js) .safir-filtre__option[hidden] { display: flex !important; }
html:not(.safir-js) .safir-filtre__plus { display: none; }

.safir-filtre__plus {
  justify-self: start;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--safir-t-xs);
  font-weight: var(--safir-graisse-moyenne);
  letter-spacing: var(--safir-interlettre-mention);
  text-transform: uppercase;
  color: var(--safir-accent-texte);
  cursor: pointer;
}
.safir-filtre__plus:hover { text-decoration: underline; }

.safir-filtres__pied {
  display: grid;
  gap: var(--safir-esp-2xs);
  justify-items: center;
  margin-top: var(--safir-esp-m);
}

/* Avec JavaScript, le changement d'une case recharge la page : le bouton
   « Voir les œuvres » n'est utile que dans la boîte mobile. */
.safir-js .safir-filtres__pied .safir-bouton { display: none; }

/* Trois colonnes à côté des filtres, du portable au grand écran : les
   affiches restent lisibles, et une carte garde la taille qu'elle a sur la
   fiche œuvre. Deux colonnes sur tablette, une sur téléphone. */
.safir-catalogue__resultats .safir-grille {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.safir-catalogue__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--safir-esp-s) var(--safir-esp-m);
  margin-bottom: var(--safir-esp-m);
}

.safir-catalogue__compte { font-size: var(--safir-t-xl); margin: 0; color: var(--safir-texte-doux); }

.safir-catalogue__outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--safir-esp-m); }

.safir-tri { display: inline-flex; align-items: center; gap: var(--safir-esp-2xs); }
.safir-tri__libelle { font-size: var(--safir-t-xs); letter-spacing: var(--safir-interlettre-mention); text-transform: uppercase; color: var(--safir-texte-doux); }

.safir-tri__champ {
  min-height: 44px;
  padding: 0 var(--safir-esp-s);
  border: 1px solid var(--safir-bordure-inverse);
  border-radius: var(--safir-rayon-s);
  background: var(--safir-fond-alt);
  color: var(--safir-texte);
  font-weight: var(--safir-graisse-moyenne);
}

.safir-tri__envoi { min-height: 44px; padding: 0 var(--safir-esp-s); border: 1px solid var(--safir-bordure); border-radius: var(--safir-rayon-s); background: transparent; color: inherit; cursor: pointer; }
.safir-js .safir-tri__envoi { display: none; }

.safir-lien-discret {
  display: inline-flex;
  align-items: center;
  gap: var(--safir-esp-2xs);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--safir-t-s);
  font-weight: var(--safir-graisse-moyenne);
  color: var(--safir-accent-texte);
  cursor: pointer;
  text-decoration: none;
}
.safir-lien-discret:hover { text-decoration: underline; }

/* Puces des filtres actifs, chacune retirable. */
.safir-puces {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--safir-esp-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--safir-esp-2xs);
}

.safir-puce {
  display: inline-flex;
  align-items: center;
  gap: var(--safir-esp-2xs);
  min-height: 40px;
  padding: 0 var(--safir-esp-xs) 0 var(--safir-esp-s);
  border-radius: var(--safir-rayon-bouton);
  background: var(--safir-accent);
  color: var(--safir-texte-inverse);
  font-size: var(--safir-t-s);
  font-weight: var(--safir-graisse-moyenne);
  text-decoration: none;
  transition: background var(--safir-transition);
}
.safir-puce:hover { background: var(--safir-accent-sombre); }
.safir-puce span[aria-hidden] { font-size: 1.2em; line-height: 1; }

.safir-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--safir-esp-3xs);
  margin-top: var(--safir-esp-xl);
  padding-top: var(--safir-esp-m);
  border-top: 1px solid var(--safir-bordure);
}

.safir-pagination__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--safir-esp-2xs);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--safir-esp-xs);
  border-radius: var(--safir-rayon-m);
  background: var(--safir-fond-alt);
  color: var(--safir-texte);
  font-weight: var(--safir-graisse-moyenne);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.safir-pagination__lien--bord { background: transparent; padding: 0 var(--safir-esp-s); }
.safir-pagination__lien:hover { background: var(--safir-fond-media); }
.safir-pagination__lien[aria-current="page"] { background: var(--safir-accent); color: var(--safir-texte-inverse); }
.safir-pagination__points { padding: 0 var(--safir-esp-2xs); color: var(--safir-texte-doux); }

.safir-vide-resultats {
  display: grid;
  gap: var(--safir-esp-m);
  justify-items: start;
  max-width: 720px;
  padding: var(--safir-esp-l) var(--safir-esp-m);
  background: var(--safir-fond-alt);
  border-radius: var(--safir-rayon-m);
}
.safir-vide-resultats__titre { font-size: var(--safir-t-xl); margin: 0; }
.safir-vide-resultats__texte { margin: 0; color: var(--safir-texte-doux); }
.safir-vide-resultats__pistes { display: flex; flex-wrap: wrap; gap: var(--safir-esp-xs); }

@media (max-width: 960px) {
  .safir-catalogue__corps { grid-template-columns: 1fr; gap: var(--safir-esp-m); }
  .safir-catalogue__mobile { display: flex; align-items: center; justify-content: space-between; gap: var(--safir-esp-s); }
  .safir-catalogue__outils .safir-tri { display: none; }

  /* Redevient une vraie boîte de dialogue plein écran. */
  .safir-filtres { display: none; position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; max-width: none; background: var(--safir-fond); overscroll-behavior: contain; }
  .safir-filtres[open] { display: flex; flex-direction: column; }
  .safir-filtres form { display: flex; flex-direction: column; min-height: 100%; }
  .safir-filtres__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--safir-esp-s); padding: var(--safir-esp-s) var(--safir-gouttiere); border-bottom: 1px solid var(--safir-bordure); position: sticky; top: 0; background: var(--safir-fond); z-index: 1; }
  .safir-filtres__entete .safir-dialogue__fermer { position: static; }
  .safir-filtres__titre { font-size: var(--safir-t-xl); margin: 0; }
  .safir-filtres__groupes { flex: 1; padding: var(--safir-esp-m) var(--safir-gouttiere); gap: var(--safir-esp-l); }
  .safir-filtre__option { min-height: 44px; }
  .safir-filtre__option input { width: 20px; height: 20px; }
  .safir-filtres__pied { position: sticky; bottom: 0; margin: 0; padding: var(--safir-esp-s) var(--safir-gouttiere) var(--safir-esp-m); background: var(--safir-fond); border-top: 1px solid var(--safir-bordure); }
  .safir-js .safir-filtres__pied .safir-bouton { display: flex; }
}

/* ------------------------------------------------------------------
   Répertoire des auteurs
   Titre, recherche et barre de lettres en tête ; puis un groupe par
   initiale, chacun avec sa lettre en marge et une grille de portraits.
   ------------------------------------------------------------------ */

.safir-repertoire__entete {
  padding-top: var(--safir-esp-l);
  display: grid;
  gap: var(--safir-esp-m);
}

.safir-repertoire__titre { font-size: var(--safir-t-2xl); margin: 0; }

.safir-repertoire__intro {
  margin: 0;
  font-size: var(--safir-t-l);
  font-weight: var(--safir-graisse-fine);
  color: var(--safir-texte-doux);
}

.safir-repertoire__recherche { max-width: 560px; }
.safir-repertoire__recherche .safir-recherche { background: var(--safir-fond-alt); }

.safir-repertoire__compte { margin: 0; color: var(--safir-texte-doux); }

/* Barre de lettres : les initiales sans fiche restent visibles mais
   estompées, pour que l'alphabet garde sa forme et que l'œil s'y repère. */
.safir-lettres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-3xs);
  padding-bottom: var(--safir-esp-s);
  border-bottom: 1px solid var(--safir-bordure);
}

.safir-lettres__lettre {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--safir-rayon-s);
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: var(--safir-t-m);
  text-decoration: none;
  color: var(--safir-texte);
  transition: background var(--safir-transition), color var(--safir-transition);
}
.safir-lettres__lettre:hover,
.safir-lettres__lettre:focus-visible { background: var(--safir-fond-alt); color: var(--safir-accent-texte); }
.safir-lettres__lettre--vide { color: var(--safir-texte-doux); opacity: .4; }

.safir-repertoire__corps { padding-block: var(--safir-esp-l) var(--safir-esp-2xl); }

.safir-repertoire__groupe {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--safir-esp-m);
  padding-block: var(--safir-esp-l);
  border-top: 1px solid var(--safir-bordure);
  /* Ancre atteinte depuis la barre de lettres : sous l'en-tête, pas dessous. */
  scroll-margin-top: calc(var(--safir-entete-hauteur, 96px) + var(--safir-esp-s));
}
.safir-repertoire__groupe:first-child { border-top: 0; padding-top: 0; }
/* 95 cartes : les groupes hors écran ne sont pas mis en page avant d'y arriver. */
.safir-repertoire__groupe { content-visibility: auto; contain-intrinsic-size: auto 400px; }

.safir-repertoire__lettre {
  margin: 0;
  font-size: var(--safir-t-3xl);
  line-height: 1;
  color: var(--safir-accent-texte);
  position: sticky;
  top: calc(var(--safir-entete-hauteur, 96px) + var(--safir-esp-s));
}

.safir-repertoire__grille {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--safir-esp-l) var(--safir-esp-m);
}

.safir-carte-auteur__lien { display: block; text-decoration: none; color: inherit; }

.safir-carte-auteur__portrait {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--safir-rayon-m);
  margin-bottom: var(--safir-esp-xs);
  container-type: inline-size;
}
.safir-carte-auteur__portrait img { transition: transform 600ms cubic-bezier(.2, .6, .3, 1); }
.safir-carte-auteur__lien:hover .safir-carte-auteur__portrait img,
.safir-carte-auteur__lien:focus-visible .safir-carte-auteur__portrait img { transform: scale(1.04); }

.safir-carte-auteur__nom {
  display: block;
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: var(--safir-t-m);
  line-height: 1.25;
}
.safir-carte-auteur__lien:hover .safir-carte-auteur__nom { color: var(--safir-accent-texte); }

.safir-carte-auteur__meta {
  display: block;
  margin-top: var(--safir-esp-3xs);
  font-size: var(--safir-t-xs);
  color: var(--safir-texte-doux);
}

@media (max-width: 720px) {
  .safir-repertoire__groupe { grid-template-columns: 1fr; gap: var(--safir-esp-s); padding-block: var(--safir-esp-m); }
  .safir-repertoire__lettre { position: static; font-size: var(--safir-t-2xl); }
  .safir-repertoire__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--safir-esp-m) var(--safir-esp-s); }
  .safir-lettres__lettre { min-width: 36px; }
}

/* ------------------------------------------------------------------
   Fiche auteur
   Même grille que la fiche œuvre : lecture à gauche (identité puis
   parcours), actions à droite, collées sous l'en-tête au défilement.
   ------------------------------------------------------------------ */

.safir-auteur__corps {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  grid-template-areas: "identite actions" "bio actions";
  gap: var(--safir-esp-l) var(--safir-esp-2xl);
  align-items: start;
  padding-block: var(--safir-esp-m) var(--safir-esp-2xl);
}
.safir-auteur__corps--sans-actions { grid-template-columns: 1fr; grid-template-areas: "identite" "bio"; }

.safir-auteur__identite {
  grid-area: identite;
  display: flex;
  align-items: flex-end;
  gap: var(--safir-esp-l);
}

.safir-auteur__portrait {
  flex: 0 0 280px;
  aspect-ratio: 1 / 1;
  border-radius: var(--safir-rayon-m);
  container-type: inline-size;
}

.safir-auteur__nom { min-width: 0; }

.safir-auteur__titre {
  font-size: var(--safir-t-3xl);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.safir-auteur__compte { margin: var(--safir-esp-xs) 0 0; font-size: var(--safir-t-s); color: var(--safir-texte-doux); }
.safir-auteur__compte a { color: inherit; }
.safir-auteur__compte a:hover { color: var(--safir-accent-texte); }

.safir-auteur__bio { grid-area: bio; }

.safir-auteur .safir-oeuvre__autres { scroll-margin-top: var(--safir-entete-hauteur, 96px); }

.safir-auteur__actions {
  grid-area: actions;
  position: sticky;
  top: calc(var(--safir-entete-hauteur, 96px) + var(--safir-esp-s));
  scroll-margin-top: calc(var(--safir-entete-hauteur, 96px) + var(--safir-esp-s));
  display: grid;
  gap: var(--safir-esp-m);
}
.safir-auteur__actions .safir-bouton small { font-size: var(--safir-t-xs); font-weight: var(--safir-graisse-moyenne); opacity: .8; }

@media (max-width: 960px) {
  .safir-auteur__corps { grid-template-columns: 1fr; grid-template-areas: "identite" "actions" "bio"; gap: var(--safir-esp-l); }
  .safir-auteur__actions { position: static; }
}

@media (max-width: 720px) {
  .safir-auteur__identite { flex-direction: column; align-items: flex-start; gap: var(--safir-esp-m); }
  .safir-auteur__portrait { flex-basis: auto; width: min(240px, 60%); }
  .safir-auteur__titre { font-size: var(--safir-t-2xl); }
}

/* ------------------------------------------------------------------
   Fiche auteur : d'autres auteurs à découvrir, sur le fond dégradé de la
   maquette (le même que « Découvrir la Safir »), 4 cartes du répertoire.
   ------------------------------------------------------------------ */

.safir-auteurs-suite {
  padding: 49px;
  background: var(--safir-fond-panneau) url("../img/fond-decouvrir.svg") center / cover no-repeat;
  border-radius: var(--safir-rayon-m);
  color: var(--safir-texte-inverse);
}

.safir-auteurs-suite__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--safir-esp-s) var(--safir-esp-m);
  margin-bottom: var(--safir-esp-m);
}

.safir-auteurs-suite__titre { font-size: 1.5rem; margin: 0; }

.safir-auteurs-suite__grille {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--safir-esp-m);
}

.safir-auteurs-suite .safir-carte-auteur__meta {
  /* Sur le dégradé, le gris doux du répertoire ne tient pas : blanc plein,
     un cran plus grand et plus gras, comme le texte du bandeau de la maquette. */
  color: var(--safir-texte-inverse);
  font-size: .9375rem;
  font-weight: var(--safir-graisse-moyenne);
}
.safir-auteurs-suite .safir-carte-auteur__lien:hover .safir-carte-auteur__nom { color: var(--safir-texte-inverse); text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 960px) {
  .safir-auteurs-suite { padding: var(--safir-esp-m); }
  .safir-auteurs-suite__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   Qui sommes-nous (page-qui-sommes-nous.php)
   Composition sans maquette, essai du 22 octobre 2026 : en-tête du
   répertoire, chiffres, une colonne de lecture, cartes texte sur fond
   alterné, liste de partenaires, bandeau « Découvrir » en appel final.
   ------------------------------------------------------------------ */

.safir-qsn__entete {
  padding-top: var(--safir-esp-l);
  display: grid;
  gap: var(--safir-esp-m);
}

.safir-qsn__titre { font-size: var(--safir-t-2xl); margin: 0; }

.safir-qsn__nom {
  margin: calc(-1 * var(--safir-esp-xs)) 0 0;
  font-family: var(--safir-police-titre);
  font-size: var(--safir-t-s);
  letter-spacing: var(--safir-interlettre-mention);
  color: var(--safir-accent-texte);
}

.safir-qsn__intro,
.safir-qsn__chapo {
  max-width: var(--safir-largeur-texte);
  margin: 0;
  font-size: var(--safir-t-l);
  font-weight: var(--safir-graisse-fine);
  color: var(--safir-texte-doux);
}

.safir-qsn__chapo { margin-bottom: var(--safir-esp-l); }

/* Le chiffre se lit d'abord, le libellé ensuite ; dans le code, le libellé
   (dt) précède la valeur (dd), comme le veut une liste de définitions. */
.safir-qsn__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--safir-esp-m) var(--safir-esp-xl);
  margin: 0;
  padding-top: var(--safir-esp-m);
  border-top: 1px solid var(--safir-bordure);
}

/* En colonne inversée, flex-end = haut : les chiffres s'alignent même si un
   libellé passe sur deux lignes. */
.safir-qsn__chiffre { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.safir-qsn__chiffre dd {
  margin: 0;
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: var(--safir-t-2xl);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.safir-qsn__chiffre dt {
  font-size: var(--safir-t-s);
  letter-spacing: var(--safir-interlettre-mention);
  color: var(--safir-texte-doux);
}

.safir-qsn__chiffre dt a { color: inherit; }
.safir-qsn__chiffre dt a:hover { color: var(--safir-accent-texte); }

.safir-qsn__asso { padding-top: var(--safir-esp-xl); }

/* Texte à gauche, accroche « rejoindre » à droite sur un panneau bordeaux,
   comme l'encart membres : c'est une porte d'entrée, pas une information. */
.safir-qsn__asso-grille {
  display: grid;
  gap: var(--safir-esp-xl);
  grid-template-columns: minmax(0, var(--safir-largeur-texte)) minmax(0, 1fr);
  align-items: end;
}

.safir-qsn__lecture p:last-child { margin-bottom: 0; }

.safir-qsn__accroche {
  padding: var(--safir-esp-l);
  background-color: var(--safir-fond-panneau);
  border-radius: var(--safir-rayon-m);
  color: var(--safir-texte-inverse);
}

.safir-qsn__accroche p {
  margin: 0;
  font-family: var(--safir-police-titre);
  font-weight: var(--safir-graisse-forte);
  font-size: var(--safir-t-l);
  line-height: 1.4;
}

@media (max-width: 960px) {
  .safir-qsn__asso-grille { grid-template-columns: 1fr; gap: var(--safir-esp-l); }
}

/* Missions : une rangée par mission, titre à gauche, texte à droite. Les
   textes vont d'une à trois paragraphes : en cartes côte à côte, les plus
   courtes laissaient de grands vides. */
.safir-qsn__rangs { border-bottom: 1px solid var(--safir-bordure); }

.safir-qsn__rang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--safir-esp-s) var(--safir-esp-xl);
  padding-block: var(--safir-esp-l);
  border-top: 1px solid var(--safir-bordure);
}

.safir-qsn__rang-titre { font-size: var(--safir-t-xl); margin: 0; color: var(--safir-accent-texte); }
.safir-qsn__rang-texte { max-width: var(--safir-largeur-texte); }
.safir-qsn__rang-texte p:last-of-type { margin-bottom: 0; }
.safir-qsn__rang-texte a:not(.safir-lien-fleche) { color: var(--safir-accent-texte); }
.safir-qsn__rang-texte .safir-lien-fleche { margin-top: var(--safir-esp-xs); }

@media (max-width: 720px) {
  .safir-qsn__rang { grid-template-columns: 1fr; padding-block: var(--safir-esp-m); }
}

.safir-qsn__missions { background: var(--safir-fond-alt); }

/* Deux colonnes dès que la place le permet, une seule sur téléphone. */
.safir-qsn__cartes {
  display: grid;
  gap: var(--safir-esp-m);
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

.safir-qsn__carte {
  display: flex;
  flex-direction: column;
  padding: var(--safir-esp-l);
  background: var(--safir-fond-alt);
  border-radius: var(--safir-rayon-m);
}


.safir-qsn__carte-titre { font-size: var(--safir-t-l); margin: 0 0 var(--safir-esp-s); }
.safir-qsn__carte p:last-of-type { margin-bottom: 0; }
.safir-qsn__carte a:not(.safir-lien-fleche) { color: var(--safir-accent-texte); }
.safir-qsn__carte-lien { margin-top: auto; padding-top: var(--safir-esp-s); align-self: flex-start; }

.safir-qsn__partenaires { padding-top: 0; }

.safir-qsn__liens {
  display: grid;
  gap: var(--safir-esp-xs);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.safir-qsn__liens li { display: flex; }

.safir-qsn__lien {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--safir-esp-3xs);
  min-height: 44px;
  padding: var(--safir-esp-s) var(--safir-esp-m);
  border: 1px solid var(--safir-bordure);
  border-radius: var(--safir-rayon-m);
  text-decoration: none;
  transition: border-color var(--safir-transition), color var(--safir-transition);
}

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

.safir-qsn__lien-nom { font-weight: var(--safir-graisse-moyenne); line-height: 1.3; transition: color var(--safir-transition); }

.safir-qsn__lien-adresse {
  font-size: var(--safir-t-xs);
  color: var(--safir-texte-doux);
  overflow-wrap: anywhere;
}

.safir-qsn__lien-nom .safir-icone { width: 14px; height: 14px; margin-left: var(--safir-esp-3xs); color: var(--safir-texte-doux); vertical-align: -.1em; }

.safir-qsn__fin { padding-bottom: var(--safir-esp-2xl); }
.safir-qsn__fin .safir-asso { margin-top: 0; }

@media (max-width: 640px) {
  .safir-qsn__carte { padding: var(--safir-esp-m); }
}

/* Téléphone : les chiffres restent côte à côte (libellés sur deux lignes),
   et les douze partenaires passent sur deux colonnes au lieu d'une longue
   pile. */
@media (max-width: 560px) {
  .safir-qsn__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--safir-esp-m); }
  .safir-qsn__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safir-qsn__lien { padding: var(--safir-esp-xs) var(--safir-esp-s); }
  /* L'adresse se couperait au milieu sur une demi-largeur : le nom suffit,
     l'icône dit que le lien sort du site. */
  .safir-qsn__lien-adresse { display: none; }
}