/* ==========================================================================
   EPSYLON — Jetons de design
   Source : dossier de marque EP-DS-001, planches EP.03 (palette),
   EP.04 (typographies) et EP.05 (ton rédactionnel).

   Règle cardinale : le noir occupe 75 % de l'écran, l'or n'excède jamais 10 %.
   Ne jamais introduire de couleur hors de cette palette.
   ========================================================================== */

:root {
  /* --- Palette canonique (EP.03) ------------------------------------- */
  --noir:      #0A0A0B;   /* Fond canonique, 75 % de l'écran            */
  --carbone:   #131315;   /* Cartes et plaques                          */
  --graphite:  #1D1D20;   /* Surfaces élevées, survols                  */
  --or:        #C9A959;   /* Accent unique, 10 % maximum                */
  --ivoire:    #ECE8DF;   /* Texte principal, jamais #FFF               */
  --acier:     #8E8B80;   /* Texte secondaire                           */

  /* Déclinaisons dérivées — aucune teinte nouvelle, uniquement des
     opacités de la palette ci-dessus, pour les filets et les voiles.   */
  --or-12:     rgba(201, 169, 89, 0.12);
  --or-20:     rgba(201, 169, 89, 0.20);
  --or-32:     rgba(201, 169, 89, 0.32);
  --or-60:     rgba(201, 169, 89, 0.60);
  --ivoire-08: rgba(236, 232, 223, 0.08);
  --ivoire-14: rgba(236, 232, 223, 0.14);
  --ivoire-24: rgba(236, 232, 223, 0.24);
  --ivoire-70: rgba(236, 232, 223, 0.70);
  --noir-72:   rgba(10, 10, 11, 0.72);
  --noir-92:   rgba(10, 10, 11, 0.92);

  /* --- Rôles sémantiques --------------------------------------------- */
  --fond:            var(--noir);
  --fond-carte:      var(--carbone);
  --fond-eleve:      var(--graphite);
  --texte:           var(--ivoire);
  --texte-secondaire:var(--acier);
  --texte-accent:    var(--or);
  --filet:           var(--ivoire-14);
  --filet-accent:    var(--or-32);

  /* --- Typographies (EP.04) ------------------------------------------
     Display  : Michroma. Titres uniquement, toujours en capitales.
                Chasse 0,14 à 0,22 em. Jamais sous 12 px, jamais un
                paragraphe.
     Texte    : Archivo. Graisses 300 à 500 exclusivement.
     Mono     : références et données chiffrées.
     Les piles de repli sont volontairement fournies : si les fichiers de
     police manquent, la page reste lisible et conserve sa structure.    */
  --police-display: "Michroma", "Eurostile", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --police-texte:   "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-mono:    "Archivo", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Chasse (letter-spacing) — bornes imposées par le deck              */
  --chasse-min:  0.14em;
  --chasse-med:  0.18em;
  --chasse-max:  0.22em;

  /* Échelle typographique fluide. Le display ne descend jamais sous
     12 px, conformément à EP.04.                                        */
  --t-display-xl: clamp(2.125rem, 1.30rem + 3.55vw, 4.25rem);
  --t-display-l:  clamp(1.625rem, 1.16rem + 2.00vw, 2.75rem);
  --t-display-m:  clamp(1.125rem, 0.94rem + 0.79vw, 1.5rem);
  --t-display-s:  clamp(0.8125rem, 0.77rem + 0.19vw, 0.9375rem);
  --t-display-xs: 0.75rem;   /* 12 px — plancher absolu                  */

  --t-corps-l:    clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);
  --t-corps:      1rem;
  --t-corps-s:    0.9375rem;
  --t-legende:    0.8125rem;
  --t-mention:    0.75rem;

  --interligne-titre: 1.18;
  --interligne-corps: 1.68;

  /* --- Rythme spatial (base 8) ---------------------------------------- */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  2.5rem;
  --e-8:  3rem;
  --e-9:  4rem;
  --e-10: 5rem;
  --e-11: 6.5rem;
  --e-12: 8rem;

  /* Respiration verticale des sections — généreuse, comme il sied à une
     vitrine où le vide est un matériau.                                 */
  --section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7rem);

  /* --- Trame ----------------------------------------------------------- */
  --largeur-max:    1280px;
  --largeur-texte:  62ch;   /* Confort de lecture                        */
  --gouttiere:      clamp(1.25rem, 0.6rem + 2.8vw, 3rem);

  /* --- Traits, angles, ombres ------------------------------------------
     Aucun arrondi marqué : l'identité est orthogonale, seul l'anneau
     du logotype est circulaire.                                         */
  --rayon-0: 0;
  --rayon-1: 2px;
  --rayon-rond: 999px;

  --trait: 1px solid var(--filet);
  --trait-accent: 1px solid var(--filet-accent);

  --ombre-carte:  0 1px 0 var(--ivoire-08), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --ombre-eleve:  0 1px 0 var(--ivoire-14), 0 28px 60px -28px rgba(0, 0, 0, 1);

  /* --- Mouvement -------------------------------------------------------
     Sobre et court. Rien qui attire l'œil pour lui-même.                */
  --transition-rapide: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:        220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-lente:  420ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Superpositions --------------------------------------------------- */
  --z-fond:    0;
  --z-contenu: 1;
  --z-entete:  50;
  --z-ticker:  49;
  --z-menu:    60;
  --z-modale:  70;

  /* --- Dimensions structurelles ----------------------------------------- */
  --hauteur-entete: 4.5rem;
}

/* Le site est nativement sombre : il n'existe pas de variante claire.
   On le déclare pour que les contrôles natifs (champs, barres de
   défilement) s'accordent au fond noir sur tous les systèmes.           */
:root {
  color-scheme: dark;
}


/* ==========================================================================
   EPSYLON — Fondations : polices, réinitialisation, typographie
   ========================================================================== */

/* --- Polices auto-hébergées ------------------------------------------------
   Aucune requête vers un CDN : les fichiers vivent dans assets/fonts/.
   Le site fonctionne donc hors ligne, derrière un proxy, et sur n'importe
   quel hébergement. Si un fichier manque, la pile de repli déclarée dans
   01-tokens.css prend le relais sans casser la mise en page.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Michroma";
  src: url("fonts/michroma-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 300 500;   /* EP.04 : graisses 300 à 500 exclusivement */
  font-style: normal;
  font-display: swap;
}

/* --- Réinitialisation ------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale les ancres pour qu'elles ne passent pas sous l'en-tête fixe. */
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--interligne-corps);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* --- Typographie -----------------------------------------------------------
   EP.04 : le display est réservé aux titres, toujours en capitales, avec une
   chasse de 0,14 à 0,22 em. Jamais un paragraphe en Michroma.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-display);
  font-weight: 400;
  line-height: var(--interligne-titre);
  text-transform: uppercase;
  letter-spacing: var(--chasse-min);
  color: var(--texte);
  text-wrap: balance;
}

h1 { font-size: var(--t-display-xl); letter-spacing: var(--chasse-min); }
h2 { font-size: var(--t-display-l);  letter-spacing: var(--chasse-med); }
h3 { font-size: var(--t-display-m);  letter-spacing: var(--chasse-med); }
h4 { font-size: var(--t-display-s);  letter-spacing: var(--chasse-max); }
h5,
h6 { font-size: var(--t-display-xs); letter-spacing: var(--chasse-max); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--e-4);
}

strong,
b {
  font-weight: 500;   /* Plafond imposé par EP.04 */
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-rapide);
}

/* Liens au fil du texte : soulignement discret, jamais de bleu système. */
.prose a {
  color: var(--or);
  text-decoration: underline;
  text-decoration-color: var(--or-32);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  text-decoration-color: var(--or);
}

::selection {
  background-color: var(--or-32);
  color: var(--ivoire);
}

/* --- Accessibilité --------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* Réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement, visible uniquement au clavier. */
.saut-contenu {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: var(--z-modale);
  padding: var(--e-3) var(--e-5);
  background-color: var(--or);
  color: var(--noir);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-med);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.saut-contenu:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Barres de défilement --------------------------------------------------- */

@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--graphite) var(--noir);
    scrollbar-width: thin;
  }
}


/* ==========================================================================
   EPSYLON — Trame : contenants, sections, en-tête, pied de page
   ========================================================================== */

/* --- Contenants ------------------------------------------------------------ */

.contenant {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenant--etroit {
  max-width: 860px;
}

.contenant--lecture {
  max-width: 680px;
}

.section {
  padding-block: var(--section-y);
}

.section--serree {
  padding-block: calc(var(--section-y) * 0.6);
}

.section--filet-haut {
  border-top: var(--trait);
}

/* --- En-tête de section ----------------------------------------------------
   Un surtitre en or, un titre en display, une amorce en acier. Ce triptyque
   se répète sur tout le site pour donner un rythme reconnaissable.
   -------------------------------------------------------------------------- */

.entete-section {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
}

.entete-section--centre {
  align-items: center;
  text-align: center;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-max);
  color: var(--or);
  text-transform: uppercase;
}

/* Filet horizontal accolé au surtitre — rappel de l'index du monogramme. */
.surtitre::before {
  content: "";
  width: var(--e-6);
  height: 1px;
  background-color: var(--or);
  flex-shrink: 0;
}

.entete-section--centre .surtitre::after {
  content: "";
  width: var(--e-6);
  height: 1px;
  background-color: var(--or);
  flex-shrink: 0;
}

.amorce {
  max-width: var(--largeur-texte);
  color: var(--texte-secondaire);
  font-size: var(--t-corps-l);
  font-weight: 300;
}

.entete-section--centre .amorce {
  margin-inline: auto;
}

/* --- Bandeau d'annonce -----------------------------------------------------
   Une seule ligne, factuelle. Aucune urgence artificielle, aucun compte à
   rebours : EP.05 proscrit le superlatif et le point d'exclamation.
   -------------------------------------------------------------------------- */

.bandeau-annonce {
  background-color: var(--carbone);
  border-bottom: 1px solid var(--ivoire-08);
  padding-block: var(--e-2);
  text-align: center;
}

.bandeau-annonce p {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-med);
  color: var(--acier);
  text-transform: uppercase;
}

.bandeau-annonce strong {
  color: var(--or);
  font-weight: 400;
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background-color: var(--noir-92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}

/* Le filet n'apparaît qu'une fois la page défilée : au repos, l'en-tête se
   fond dans le hero. Classe posée par src/scripts/nav.js. */
.entete.est-detachee {
  border-bottom-color: var(--ivoire-08);
  background-color: var(--noir-92);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 4.5rem;
}

.entete__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.entete__logo img {
  height: 1.375rem;
  width: auto;
}

/* --- Navigation principale -------------------------------------------------- */

.nav-principale {
  display: none;
}

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--e-4), 1.6vw, var(--e-6));
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-principale a {
  position: relative;
  display: block;
  padding-block: var(--e-2);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-med);
  color: var(--acier);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-principale a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-principale a:hover,
.nav-principale a:focus-visible {
  color: var(--ivoire);
}

.nav-principale a:hover::after,
.nav-principale a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-principale a[aria-current="page"] {
  color: var(--ivoire);
}

/* --- Actions de l'en-tête ---------------------------------------------------- */

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-shrink: 0;
}

/* Sélecteur de langue : deux jetons séparés d'une barre oblique. */
.selecteur-langue {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-min);
}

.selecteur-langue a {
  color: var(--acier);
  padding: var(--e-1);
}

.selecteur-langue a:hover {
  color: var(--ivoire);
}

.selecteur-langue a[aria-current="true"] {
  color: var(--or);
}

.selecteur-langue span {
  color: var(--ivoire-24);
}

/* --- Bouton du menu mobile ---------------------------------------------------- */

.bouton-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: var(--trait);
}

.bouton-menu span {
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--ivoire);
  transition: transform var(--transition), opacity var(--transition-rapide);
}

.bouton-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.bouton-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.bouton-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Panneau de navigation mobile ---------------------------------------------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background-color: var(--noir);
  padding: var(--e-6) var(--gouttiere) var(--e-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.menu-mobile.est-ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-mobile__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  margin-bottom: var(--e-7);
}

.menu-mobile__tete img {
  height: 1.375rem;
  width: auto;
}

.menu-mobile nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-mobile nav li {
  border-bottom: 1px solid var(--ivoire-08);
}

.menu-mobile nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--e-5);
  font-family: var(--police-display);
  font-size: var(--t-display-s);
  letter-spacing: var(--chasse-med);
  color: var(--ivoire);
  text-transform: uppercase;
}

.menu-mobile nav a[aria-current="page"] {
  color: var(--or);
}

/* Numérotation discrète des entrées, en mono. */
.menu-mobile nav a span {
  font-family: var(--police-mono);
  font-size: var(--t-mention);
  letter-spacing: var(--chasse-min);
  color: var(--acier);
}

.menu-mobile__pied {
  margin-top: auto;
  padding-top: var(--e-7);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

/* Le défilement de la page est gelé quand le menu occupe l'écran. */
body.menu-ouvert {
  overflow: hidden;
}

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

.pied {
  border-top: var(--trait);
  background-color: var(--noir);
  padding-block: var(--e-9) var(--e-6);
}

.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-8);
}

.pied__marque img {
  height: 1.5rem;
  width: auto;
  margin-bottom: var(--e-5);
}

.pied__marque p {
  max-width: 34ch;
  color: var(--acier);
  font-size: var(--t-corps-s);
  font-weight: 300;
}

.pied__colonne h4 {
  color: var(--ivoire);
  margin-bottom: var(--e-5);
}

.pied__colonne ul {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied__colonne a {
  color: var(--acier);
  font-size: var(--t-corps-s);
}

.pied__colonne a:hover {
  color: var(--or);
}

.pied__bas {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: var(--e-9);
  padding-top: var(--e-5);
  border-top: 1px solid var(--ivoire-08);
}

.pied__bas p,
.pied__bas a {
  font-size: var(--t-mention);
  color: var(--acier);
}

.pied__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied__mentions a:hover {
  color: var(--ivoire);
}

/* Avertissement de sourcing — obligatoire, mais sobre. */
.pied__avertissement {
  max-width: 88ch;
  color: var(--acier);
  font-size: var(--t-mention);
  line-height: 1.6;
  opacity: 0.85;
}

/* --- Grilles réutilisables -------------------------------------------------------- */

.grille {
  display: grid;
  gap: var(--e-5);
}

.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
.grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Points de bascule -------------------------------------------------------------- */

@media (min-width: 600px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pied__bas {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pied__grille {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--e-6);
  }
}

@media (min-width: 1024px) {
  .nav-principale {
    display: block;
  }

  .bouton-menu {
    display: none;
  }
}


/* ==========================================================================
   EPSYLON — Composants
   ========================================================================== */

/* --- Boutons ---------------------------------------------------------------
   Deux niveaux seulement. Le bouton plein or est l'unique élément saturé
   d'une page : jamais deux dans le même champ de vision.
   -------------------------------------------------------------------------- */

.bouton {
  --bouton-fond: transparent;
  --bouton-texte: var(--ivoire);
  --bouton-bordure: var(--ivoire-24);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-6);
  min-height: 3rem;
  background-color: var(--bouton-fond);
  color: var(--bouton-texte);
  border: 1px solid var(--bouton-bordure);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-med);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}

.bouton__fleche {
  display: inline-block;
  transition: transform var(--transition);
}

.bouton:hover .bouton__fleche {
  transform: translateX(3px);
}

/* Primaire — or plein, texte noir. Le seul aplat de couleur du site. */
.bouton--primaire {
  --bouton-fond: var(--or);
  --bouton-texte: var(--noir);
  --bouton-bordure: var(--or);
}

.bouton--primaire:hover {
  --bouton-fond: var(--ivoire);
  --bouton-bordure: var(--ivoire);
}

/* Secondaire — filet or, texte or. */
.bouton--secondaire {
  --bouton-texte: var(--or);
  --bouton-bordure: var(--or-60);
}

.bouton--secondaire:hover {
  --bouton-fond: var(--or-12);
  --bouton-bordure: var(--or);
}

/* Discret — filet ivoire, pour les actions de second rang. */
.bouton--discret:hover {
  --bouton-fond: var(--graphite);
  --bouton-bordure: var(--ivoire-24);
}

.bouton--pleine-largeur {
  width: 100%;
}

.bouton[disabled],
.bouton[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Lien-flèche : la forme la plus légère de l'appel à l'action. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-med);
  color: var(--or);
  text-transform: uppercase;
}

.lien-fleche span {
  transition: transform var(--transition);
}

.lien-fleche:hover span {
  transform: translateX(4px);
}

/* --- Référence et disponibilité ---------------------------------------------
   EP.04 : les références se composent en mono. Elles ne sont jamais un titre.
   -------------------------------------------------------------------------- */

.ref {
  font-family: var(--police-mono);
  font-size: var(--t-mention);
  font-weight: 400;
  letter-spacing: var(--chasse-min);
  color: var(--acier);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.puce {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--or-32);
  font-family: var(--police-display);
  font-size: 0.625rem;
  letter-spacing: var(--chasse-min);
  color: var(--or);
  text-transform: uppercase;
  white-space: nowrap;
}

.puce::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--rayon-rond);
  background-color: var(--or);
  flex-shrink: 0;
}

.puce--neutre {
  border-color: var(--ivoire-24);
  color: var(--acier);
}

.puce--neutre::before {
  background-color: var(--acier);
}

/* --- Hero ------------------------------------------------------------------
   Fond noir, lumière rasante venue du haut, comme les prises de vue décrites
   en EP.07. Aucun visuel de fond n'est requis : le vide suffit.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 78svh, 46rem);
  padding-block: var(--e-10);
  overflow: hidden;
  isolation: isolate;
}

/* Halo dorée très diffuse — moins de 10 % de saturation perçue. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-fond);
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(201, 169, 89, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(19, 19, 21, 0.9), transparent 70%);
  pointer-events: none;
}

.hero__contenu {
  position: relative;
  z-index: var(--z-contenu);
  max-width: 44rem;
}

.hero__visuel {
  position: absolute;
  inset: 0;
  z-index: var(--z-fond);
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

/* Voile de lisibilité posé sur le visuel du hero. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: var(--z-fond);
  background: linear-gradient(
    100deg,
    var(--noir) 0%,
    var(--noir-72) 42%,
    rgba(10, 10, 11, 0.35) 72%,
    rgba(10, 10, 11, 0.55) 100%
  );
  pointer-events: none;
}

.hero h1 {
  margin-block: var(--e-5) var(--e-5);
}

.hero .amorce {
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-7);
}

/* Hero réduit, pour les pages intérieures. */
.hero--page {
  min-height: auto;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  border-bottom: var(--trait);
}

.hero--page .hero__contenu {
  max-width: 52rem;
}

/* --- Fil d'Ariane ------------------------------------------------------------- */

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  margin: 0 0 var(--e-5);
  padding: 0;
  font-family: var(--police-mono);
  font-size: var(--t-mention);
  letter-spacing: var(--chasse-min);
  text-transform: uppercase;
  color: var(--acier);
}

.fil-ariane li + li::before {
  content: "/";
  margin-right: var(--e-2);
  color: var(--ivoire-24);
}

.fil-ariane a:hover {
  color: var(--or);
}

.fil-ariane [aria-current="page"] {
  color: var(--ivoire);
}

/* --- Bande de réassurance -----------------------------------------------------
   Faits mesurables uniquement (EP.05). Séparés par des filets, sans icônes
   décoratives superflues.
   -------------------------------------------------------------------------- */

.bande-reassurance {
  border-block: var(--trait);
  background-color: var(--carbone);
}

.bande-reassurance__liste {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bande-reassurance__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-4);
  border-bottom: 1px solid var(--ivoire-08);
}

.bande-reassurance__item:last-child {
  border-bottom: none;
}

.bande-reassurance__item dt {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-min);
  color: var(--ivoire);
  text-transform: uppercase;
}

.bande-reassurance__item dd {
  margin: 0;
  color: var(--acier);
  font-size: var(--t-legende);
  font-weight: 300;
  line-height: 1.55;
}

/* --- Chiffres du manifeste ------------------------------------------------------
   2026 / 0 / 1:1 — les trois données de la planche EP.01.
   -------------------------------------------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chiffres__valeur {
  display: block;
  font-family: var(--police-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  letter-spacing: var(--chasse-min);
  color: var(--or);
  line-height: 1;
  margin-bottom: var(--e-3);
}

.chiffres__libelle {
  color: var(--acier);
  font-size: var(--t-corps-s);
  font-weight: 300;
}

/* --- Critères de qualité ---------------------------------------------------
   Section I / II / III sur la page d'accueil. Même structure que les étapes
   mais ton plus factuel, numérotation romaine, filet haut sur chaque item.
   -------------------------------------------------------------------------- */

.criteres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: var(--e-9) 0 0;
  padding: 0;
}

.critere {
  padding: var(--e-6) 0;
  border-top: 1px solid var(--filet);
}

.critere__numero {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-max);
  color: var(--or);
  margin-bottom: var(--e-4);
}

.critere__intitule {
  font-size: var(--t-display-s);
  letter-spacing: var(--chasse-med);
  color: var(--ivoire);
  margin-bottom: var(--e-3);
}

.critere__detail {
  color: var(--acier);
  font-size: var(--t-corps-s);
  font-weight: 300;
  line-height: var(--interligne-corps);
  max-width: 38ch;
}

/* --- Carte de marque -------------------------------------------------------------
   Grand visuel, nom en display, nombre de références en mono.
   -------------------------------------------------------------------------- */

.carte-marque {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 20rem;
  padding: var(--e-6);
  background-color: var(--carbone);
  border: var(--trait);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--transition), transform var(--transition);
}

.carte-marque:hover {
  border-color: var(--or-32);
  transform: translateY(-2px);
}

.carte-marque__visuel {
  position: absolute;
  inset: 0;
  z-index: var(--z-fond);
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 38%;
  padding: var(--e-7);
  opacity: 0.85;
  transition: opacity var(--transition-lente);
}

.carte-marque:hover .carte-marque__visuel {
  opacity: 1;
}

.carte-marque__voile {
  position: absolute;
  inset: 0;
  z-index: var(--z-fond);
  background: linear-gradient(
    to top,
    var(--noir) 0%,
    var(--noir-72) 38%,
    transparent 78%
  );
  pointer-events: none;
}

.carte-marque__corps {
  position: relative;
  z-index: var(--z-contenu);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.carte-marque__nom {
  font-size: var(--t-display-m);
  letter-spacing: var(--chasse-med);
  color: var(--ivoire);
}

.carte-marque__accroche {
  color: var(--acier);
  font-size: var(--t-corps-s);
  font-weight: 300;
  max-width: 32ch;
}

.carte-marque__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--ivoire-14);
}

/* Rend toute la carte cliquable sans imbriquer les liens. */
.lien-etendu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-contenu);
}

/* --- Carte de modèle ---------------------------------------------------------------
   Cadrage serré sur fond noir, référence en mono, aucune mention de prix.
   -------------------------------------------------------------------------- */

.carte-modele {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--carbone);
  border: var(--trait);
  overflow: hidden;
  transition: border-color var(--transition), background-color var(--transition);
}

.carte-modele:hover {
  border-color: var(--or-32);
  background-color: var(--graphite);
}

.carte-modele__cadre {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--noir);
  overflow: hidden;
}

.carte-modele__visuel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-lente);
}

.carte-modele:hover .carte-modele__visuel {
  transform: scale(1.04);
}

.carte-modele__puce {
  position: absolute;
  top: var(--e-4);
  left: var(--e-4);
  z-index: var(--z-contenu);
  background-color: var(--noir-92);
}

.carte-modele__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  flex: 1;
}

.carte-modele__marque {
  font-family: var(--police-display);
  font-size: 0.625rem;
  letter-spacing: var(--chasse-max);
  color: var(--or);
  text-transform: uppercase;
}

.carte-modele__nom {
  font-size: var(--t-display-s);
  letter-spacing: var(--chasse-min);
  color: var(--ivoire);
}

.carte-modele--demande {
  border-style: dashed;
  border-color: var(--or-32);
}

.carte-modele--demande:hover {
  border-color: var(--or);
  background-color: var(--carbone);
}

.carte-modele__cadre--demande {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte-modele__demande-icone {
  font-size: 2.5rem;
  color: var(--or-32);
  line-height: 1;
  transition: color var(--transition);
}

.carte-modele--demande:hover .carte-modele__demande-icone {
  color: var(--or);
}

.carte-modele__nom--demande {
  color: var(--acier);
  text-align: center;
}

.carte-modele__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-top: auto;
  padding-top: var(--e-4);
}

/* Séparateur en losange entre les données techniques. */
.carte-modele__meta li + li::before {
  content: "·";
  margin-right: var(--e-2);
  color: var(--ivoire-24);
}

.carte-modele__meta ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Caractéristiques techniques -------------------------------------------------
   Une liste de définition, en mono pour les valeurs. Faits mesurables, sans
   adjectif (EP.05).
   -------------------------------------------------------------------------- */

.caracteristiques {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: var(--trait);
}

.caracteristiques__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--ivoire-08);
}

.caracteristiques dt {
  font-family: var(--police-display);
  font-size: 0.625rem;
  letter-spacing: var(--chasse-max);
  color: var(--acier);
  text-transform: uppercase;
  flex-shrink: 0;
}

.caracteristiques dd {
  margin: 0;
  font-family: var(--police-mono);
  font-size: var(--t-corps-s);
  color: var(--ivoire);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Étapes numérotées (EP.09) ----------------------------------------------------- */

.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}

.etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-6);
  border-top: var(--trait-accent);
}

.etape__numero {
  font-family: var(--police-display);
  font-size: var(--t-display-l);
  letter-spacing: var(--chasse-min);
  color: var(--or);
  line-height: 1;
}

.etape__titre {
  font-size: var(--t-display-s);
  letter-spacing: var(--chasse-med);
  color: var(--ivoire);
}

.etape__texte {
  color: var(--acier);
  font-weight: 300;
  font-size: var(--t-corps-s);
  max-width: 38ch;
}

/* --- Accordéon (FAQ) ---------------------------------------------------------------- */

.accordeon {
  border-top: var(--trait);
}

.accordeon__item {
  border-bottom: 1px solid var(--ivoire-08);
}

.accordeon__bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  width: 100%;
  padding: var(--e-5) 0;
  text-align: left;
  font-family: var(--police-display);
  font-size: var(--t-display-s);
  letter-spacing: var(--chasse-min);
  color: var(--ivoire);
  text-transform: uppercase;
  transition: color var(--transition-rapide);
}

.accordeon__bouton:hover {
  color: var(--or);
}

/* Croix qui pivote en signe moins à l'ouverture. */
.accordeon__signe {
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.accordeon__signe::before,
.accordeon__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--or);
  transition: transform var(--transition);
}

.accordeon__signe::after {
  transform: rotate(90deg);
}

.accordeon__bouton[aria-expanded="true"] .accordeon__signe::after {
  transform: rotate(0deg);
}

.accordeon__panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
}

.accordeon__panneau[data-ouvert="true"] {
  grid-template-rows: 1fr;
}

.accordeon__panneau > div {
  overflow: hidden;
}

.accordeon__panneau p {
  padding-bottom: var(--e-5);
  color: var(--acier);
  font-weight: 300;
  max-width: var(--largeur-texte);
}

/* --- Formulaire ------------------------------------------------------------------------ */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.champ__etiquette {
  font-family: var(--police-display);
  font-size: 0.625rem;
  letter-spacing: var(--chasse-max);
  color: var(--acier);
  text-transform: uppercase;
}

.champ__etiquette .requis {
  color: var(--or);
}

.champ__aide {
  font-size: var(--t-mention);
  color: var(--acier);
  font-weight: 300;
}

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: var(--e-4);
  background-color: var(--carbone);
  color: var(--ivoire);
  border: 1px solid var(--ivoire-14);
  border-radius: var(--rayon-0);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  font-weight: 300;
  transition: border-color var(--transition), background-color var(--transition);
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: var(--acier);
  opacity: 0.6;
}

.champ input:hover,
.champ textarea:hover,
.champ select:hover {
  border-color: var(--ivoire-24);
}

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--or);
  background-color: var(--graphite);
}

.champ textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Flèche du menu déroulant, dessinée en CSS pour éviter tout fichier. */
.champ select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--acier) 50%),
    linear-gradient(135deg, var(--acier) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) calc(50% + 1px),
    calc(100% - 1rem) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--e-8);
}

.champ__erreur {
  font-size: var(--t-mention);
  color: var(--or);
  font-weight: 400;
}

.champ[data-invalide="true"] input,
.champ[data-invalide="true"] textarea,
.champ[data-invalide="true"] select {
  border-color: var(--or);
}

.champ-groupe {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-5);
}

/* Case à cocher pour le consentement. */
.champ-case {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.champ-case input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--or);
  flex-shrink: 0;
}

.champ-case label {
  font-size: var(--t-legende);
  color: var(--acier);
  font-weight: 300;
  line-height: 1.5;
}

/* --- Aperçu du message ------------------------------------------------------------------
   Le visiteur voit exactement ce qui partira sur WhatsApp. Aucune donnée n'est
   transmise à un serveur : tout se compose dans le navigateur.
   -------------------------------------------------------------------------- */

.apercu {
  border: var(--trait);
  background-color: var(--carbone);
}

.apercu__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--ivoire-08);
}

.apercu__tete h3 {
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-max);
  color: var(--acier);
}

.apercu__corps {
  padding: var(--e-5);
  margin: 0;
  font-family: var(--police-mono);
  font-size: var(--t-legende);
  line-height: 1.7;
  color: var(--ivoire);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 8rem;
}

.apercu__corps:empty::before {
  content: attr(data-vide);
  color: var(--acier);
  opacity: 0.6;
}

/* --- Bloc citation / manifeste ------------------------------------------------------------ */

.citation {
  position: relative;
  padding-left: var(--e-6);
  border-left: 2px solid var(--or);
  font-size: var(--t-corps-l);
  font-weight: 300;
  color: var(--ivoire);
  max-width: 48ch;
}

.citation cite {
  display: block;
  margin-top: var(--e-4);
  font-style: normal;
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-max);
  color: var(--acier);
  text-transform: uppercase;
}

/* --- Autres marques (encarts logoless) ------------------------------------------------------ */

.autres-marques__titre {
  font-size: var(--t-display-s);
  color: var(--ivoire);
  margin-bottom: var(--e-3);
}

.autres-marques__amorce {
  color: var(--acier);
  font-size: var(--t-corps-s);
  margin-bottom: var(--e-7);
  max-width: 52ch;
}

.autres-marques__grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.autres-marques__encart {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border: 1px solid var(--or-32);
  border-radius: 2px;
  background: var(--carbone);
}

.autres-marques__logo {
  height: 1.25rem;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
}

.autres-marques__nom {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-min);
  color: var(--acier);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Panneau (bloc mis en avant) ------------------------------------------------------------ */

.panneau {
  padding: clamp(var(--e-6), 4vw, var(--e-9));
  background-color: var(--carbone);
  border: var(--trait);
}

.panneau--accent {
  border-color: var(--or-32);
  background:
    linear-gradient(var(--carbone), var(--carbone)) padding-box,
    linear-gradient(160deg, var(--or-32), transparent 55%) border-box;
  border: 1px solid transparent;
}

/* --- Corps de texte long --------------------------------------------------------------------- */

.prose {
  max-width: var(--largeur-texte);
  color: var(--acier);
  font-weight: 300;
  font-size: var(--t-corps-l);
}

.prose > * + * {
  margin-top: var(--e-5);
}

.prose h2 {
  margin-top: var(--e-9);
  color: var(--ivoire);
}

.prose h3 {
  margin-top: var(--e-7);
  color: var(--ivoire);
}

.prose ul,
.prose ol {
  padding-left: var(--e-5);
}

.prose li + li {
  margin-top: var(--e-3);
}

.prose li::marker {
  color: var(--or);
}

.prose strong {
  color: var(--ivoire);
  font-weight: 500;
}

/* --- Filtres du catalogue ------------------------------------------------------------------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  padding-block: var(--e-5);
  border-block: var(--trait);
  margin-bottom: var(--e-7);
}

.filtres__libelle {
  font-family: var(--police-display);
  font-size: 0.625rem;
  letter-spacing: var(--chasse-max);
  color: var(--acier);
  text-transform: uppercase;
  margin-right: var(--e-2);
}

.filtre {
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--ivoire-14);
  font-family: var(--police-display);
  font-size: 0.625rem;
  letter-spacing: var(--chasse-min);
  color: var(--acier);
  text-transform: uppercase;
  transition: color var(--transition-rapide), border-color var(--transition-rapide);
}

.filtre:hover {
  color: var(--ivoire);
  border-color: var(--ivoire-24);
}

.filtre[aria-pressed="true"] {
  color: var(--noir);
  background-color: var(--or);
  border-color: var(--or);
}

.filtres__compte {
  margin-left: auto;
  font-family: var(--police-mono);
  font-size: var(--t-mention);
  color: var(--acier);
  font-variant-numeric: tabular-nums;
}

/* État vide du catalogue après filtrage. */
.etat-vide {
  padding: var(--e-10) var(--e-5);
  text-align: center;
  border: var(--trait);
  background-color: var(--carbone);
}

.etat-vide p {
  color: var(--acier);
  font-weight: 300;
}

/* --- Cartouche de contact --------------------------------------------------------------------- */

.canal {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  background-color: var(--carbone);
  border: var(--trait);
  transition: border-color var(--transition);
}

.canal:hover {
  border-color: var(--or-32);
}

.canal__intitule {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-max);
  color: var(--or);
  text-transform: uppercase;
}

.canal__valeur {
  font-family: var(--police-mono);
  font-size: var(--t-corps);
  color: var(--ivoire);
  word-break: break-word;
}

.canal__note {
  font-size: var(--t-legende);
  color: var(--acier);
  font-weight: 300;
}

/* --- Article du journal ----------------------------------------------------------------------- */

.carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6) 0;
  border-bottom: 1px solid var(--ivoire-08);
  transition: border-color var(--transition);
}

.carte-article:hover {
  border-color: var(--or-32);
}

.carte-article__date {
  font-family: var(--police-mono);
  font-size: var(--t-mention);
  letter-spacing: var(--chasse-min);
  color: var(--acier);
  text-transform: uppercase;
}

.carte-article__titre {
  font-size: var(--t-display-s);
  letter-spacing: var(--chasse-min);
  color: var(--ivoire);
  transition: color var(--transition-rapide);
}

.carte-article:hover .carte-article__titre {
  color: var(--or);
}

.carte-article__amorce {
  color: var(--acier);
  font-weight: 300;
  font-size: var(--t-corps-s);
  max-width: var(--largeur-texte);
}

/* --- Points de bascule ------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .champ-groupe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chiffres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
  }

  .criteres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .critere {
    padding: var(--e-7) var(--e-5) var(--e-7) 0;
    border-top: none;
    border-left: 1px solid var(--filet);
    padding-left: var(--e-6);
  }

  .critere:first-child {
    border-left: none;
    padding-left: 0;
  }
}

@media (min-width: 900px) {
  .bande-reassurance__liste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .bande-reassurance__item {
    border-bottom: none;
    border-right: 1px solid var(--ivoire-08);
    padding: var(--e-6) var(--e-5);
  }

  .bande-reassurance__item:last-child {
    border-right: none;
  }
}

/* --- Galerie de photos (fiche modèle) ---------------------------------------
   La principale affiche une image à la fois via opacity.
   Les vignettes ne s'affichent qu'à partir de 2 photos.
   -------------------------------------------------------------------------- */

.galerie__principale {
  position: relative;
  aspect-ratio: 1 / 1;
  border: var(--trait);
  overflow: hidden;
  background-color: var(--fond-carte);
}

.galerie__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.galerie__img--active {
  opacity: 1;
}

.galerie__vignettes {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-3);
  flex-wrap: wrap;
}

.galerie__vignette {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--filet);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
  flex-shrink: 0;
  background: none;
  padding: 0;
}

.galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galerie__vignette:hover {
  border-color: var(--or-60);
}

.galerie__vignette--active {
  border-color: var(--or);
}

/* --- QR codes (footer + page contact) --------------------------------------
   Les images QR ont un fond blanc (contrainte technique du QR code).
   On les encadre d'un léger filet or pour les intégrer au fond sombre.
   -------------------------------------------------------------------------- */

.pied__scan {
  display: flex;
  gap: var(--e-5);
  margin-top: var(--e-6);
}

.pied__scan-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}

.pied__scan-qr img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
  background: var(--noir);
  border: 1px solid var(--or-32);
  border-radius: 4px;
}

.pied__scan-qr span {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-min);
  color: var(--acier);
  text-transform: uppercase;
}

/* Contact page — QR plus grands, centrés */

.scan-contact {
  text-align: center;
}

.scan-contact__grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-8);
  justify-content: center;
}

.scan-contact__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}

.scan-contact__qr img {
  display: block;
  border: 1px solid var(--or-32);
  border-radius: 4px;
}

.scan-contact__libelle {
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  letter-spacing: var(--chasse-med);
  color: var(--or);
  text-transform: uppercase;
  margin: 0;
}

/* --- Ticker défilant -------------------------------------------------------
   Bandeau pleine largeur qui défile en boucle. Utilisé sur les pages
   catalogue pour rappeler que la sélection n'est pas exhaustive.
   aria-hidden : le même message figure dans la note sous la grille.
   -------------------------------------------------------------------------- */

.ticker {
  position: sticky;
  top: var(--hauteur-entete);
  z-index: var(--z-ticker);
  overflow: hidden;
  border-block: 1px solid var(--filet);
  background-color: var(--noir-92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: var(--e-3);
  white-space: nowrap;
  user-select: none;
}

.ticker__piste {
  display: flex;
  width: max-content;
  animation: ticker-defilement 120s linear infinite;
}

.ticker__piste:hover {
  animation-play-state: paused;
}

.ticker__segment {
  display: inline-flex;
  align-items: center;
  gap: var(--e-5);
  padding-inline-end: var(--e-5);
}

.ticker__texte {
  font-family: var(--police-texte);
  font-size: var(--t-legende);
  font-weight: 300;
  color: var(--texte-secondaire);
  letter-spacing: var(--chasse-min);
}

.ticker__separateur {
  color: var(--or);
  font-family: var(--police-display);
  font-size: var(--t-display-xs);
  flex-shrink: 0;
}

@keyframes ticker-defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__piste {
    animation: none;
  }
}