/* ==========================================================================
   Eye Five 2026 — feuille de style du thème
   Charte Rose Agency 2026 : aplats bordeaux / crème / charbon, accents navy,
   sapin et rouge avec parcimonie ; Switzer pour le texte, Almeria Pro (équivalent
   licencié d'Americana) pour les titres en capitales. Aucun dégradé, aucune ombre
   portée sur les signes, aucune opacité sur les couleurs de marque.
   ========================================================================== */

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-variableitalic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Almeria Pro — dessin de la famille d'Americana, licence web Fontspring (commande 134272770,
   EULA 2.0 dans ce dossier) : usage @font-face uniquement, fichiers réservés au site. */
@font-face { font-family: 'Almeria Pro'; src: url('../fonts/almeria-pro-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almeria Pro'; src: url('../fonts/almeria-pro-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Almeria Pro'; src: url('../fonts/almeria-pro-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almeria Pro'; src: url('../fonts/almeria-pro-extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --bordeaux: #3E2020;
  --creme: #F2EFE1;
  --charbon: #191618;
  --navy: #2E334E;
  --sapin: #154734;
  --rouge: #AF231C;
  --blanc: #FFFFFF;
  /* Fond des photos de monture (cartes, galerie et sélecteur de la fiche) : gris très clair au
     lieu du crème (décision de Maxime du 24/09/2026). Neutre, et assez soutenu pour que le
     symbole en gaufrage blanc reste lisible. Le crème reste la matière des autres panneaux. */
  --gris-photo: #EDEDED;
  /* Cartes des collections : dégradé vertical gris plus clair → blanc → gris, sur lequel la
     monture pose son ombre (variante « Studio », décision de Maxime du 24/09/2026). */
  --gris-carte: #F3F3F3;

  --fond: var(--blanc);
  --panneau: var(--creme);
  --encre: var(--charbon);
  --accent: var(--bordeaux);

  --font-texte: 'Switzer', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-titre: 'Almeria Pro', 'Americana Std', Georgia, serif;

  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-18: 1.125rem;
  --t-24: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --t-30: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem);
  --t-36: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);
  --t-affiche: clamp(2.75rem, 1.5rem + 6.5vw, 7rem);

  --largeur: 1280px;
  --gouttiere: clamp(1rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8rem);
  --trait: 1px solid var(--charbon);

  --duree: 0.55s;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: var(--t-18);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
}
h1 { font-size: var(--t-36); }
h2 { font-size: var(--t-30); }
h3 { font-size: var(--t-24); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* L'attribut hidden l'emporte sur les display des classes (.bouton, .etiquette…). */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--bordeaux); color: var(--creme); padding: 0.75rem 1rem;
}
.lien-evitement:focus { top: 1rem; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }

/* ---- Typographie d'ensemble -------------------------------------------- */

.sur-titre {
  font-size: var(--t-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.75rem;
}
.sur-titre__ref { font-weight: 400; letter-spacing: 0.08em; }
.sur-titre__ref::before { content: '· '; }

.titre-affiche { font-size: var(--t-affiche); line-height: 0.98; }
.section__titre { font-size: var(--t-36); max-width: 18ch; }
.accroche {
  font-family: var(--font-titre);
  font-size: var(--t-30);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.prose { max-width: 66ch; }
.prose--large { font-size: var(--t-24); line-height: 1.4; }
.prose--clair { color: var(--creme); }
.prose h2, .prose h3 { margin: 2rem 0 0.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose img { margin: 2rem 0; }

.lien-fleche {
  display: inline-block;
  font-size: var(--t-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: var(--trait);
  padding-bottom: 0.35em;
}
.lien-fleche::after { content: '\00a0→'; display: inline-block; transition: transform var(--duree) var(--courbe); }
.lien-fleche:hover::after { transform: translateX(0.35em); }
.lien-fleche--clair { color: var(--creme); border-color: var(--creme); }
.lien-fleche--clair:hover { color: var(--creme); }

.bouton {
  display: inline-block;
  background: var(--bordeaux);
  color: var(--creme);
  font-size: var(--t-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1px solid var(--bordeaux);
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.bouton:hover { background: var(--charbon); border-color: var(--charbon); color: var(--creme); }
.bouton--contour { background: transparent; color: var(--bordeaux); }
.bouton--contour:hover { background: var(--bordeaux); color: var(--creme); }
.bouton--creme { background: var(--creme); color: var(--charbon); border-color: var(--creme); }
.bouton--creme:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); }
.bouton + .bouton, .bouton + .lien-fleche { margin-left: 0.75rem; }
/* Vendu en ligne mais boutique pas encore ouverte (lot D) : annoncé, pas cliquable. */
.bouton--inactif, .bouton--inactif:hover { background: transparent; color: var(--bordeaux); border-style: dashed; cursor: default; }

.etiquette {
  display: inline-block;
  font-size: var(--t-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35em 0.7em;
  color: var(--creme);
  background: var(--navy);
}
.etiquette--disponible { background: var(--sapin); }
.etiquette--bientot { background: var(--navy); }
.etiquette--epuise { background: var(--rouge); }
.etiquette--nouveau { background: var(--bordeaux); }
.sur-titre .etiquette--nouveau { margin-left: 0.75em; vertical-align: 0.1em; }

.vide { font-size: var(--t-24); font-family: var(--font-titre); text-transform: uppercase; padding: 3rem 0; }

/* ---- Apparitions ---------------------------------------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--courbe), transform 0.8s var(--courbe);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .reveal.est-visible { opacity: 1; transform: none; }
/* Le titre de la page et l'élément qui le suit (introduction), sur une collection son en-tête et sa
   première rangée de cartes (.carte--tete), sur Goodies ses engagements et sa première rangée (.gd-carte--tete),
   n'attendent pas theme.js : le même mouvement est joué par le CSS dès le premier affichage. Sinon le
   premier écran restait vide jusqu'à l'arrivée du script, placé après tout le HTML — titre à 3,9 s en 4G
   lente sur Lunettes optiques (PageSpeed du 01/10/2026). Ces éléments sont donc visibles par défaut, et
   l'animation ne dure que son temps : .est-visible, posé ensuite par le script, n'y change rien. */
/* Départ à 0,01 et non à 0 : Chrome ne compte un élément comme affiché (LCP) qu'à partir d'une opacité non
   nulle ; parti de 0, le titre n'était compté qu'à la FIN du fondu, 0,8 s après avoir commencé à paraître. */
@keyframes apparition { from { opacity: 0.01; transform: translateY(18px); } }
html.js h1.reveal, html.js h1.reveal + .reveal, html.js .collection__entete > .reveal, html.js .carte--tete.reveal,
html.js .gd-engagements.reveal, html.js .gd-carte--tete.reveal {
  opacity: 1; transform: none; transition: none;
  animation: apparition 0.8s var(--courbe) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* Le sur-titre placé juste avant le titre, de même. Règle à part : un navigateur qui ne connaît pas :has()
   ignorerait toute la liste de sélecteurs ci-dessus (le sur-titre y attend alors le script, comme avant). */
html.js .reveal:has(+ h1.reveal) {
  opacity: 1; transform: none; transition: none;
  animation: apparition 0.8s var(--courbe) backwards;
}
@media (prefers-reduced-motion: reduce) {
  html.js h1.reveal, html.js h1.reveal + .reveal, html.js .collection__entete > .reveal, html.js .carte--tete.reveal,
  html.js .gd-engagements.reveal, html.js .gd-carte--tete.reveal { animation: none; }
  html.js .reveal:has(+ h1.reveal) { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

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

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--fond);
  border-bottom: var(--trait);
}
.entete__barre {
  display: flex; align-items: center; justify-content: flex-start; gap: 2rem;
  min-height: 4.75rem;
}
/* Logo à gauche, menu poussé à droite, puis le lien Panier (s'il existe) et le bouton Espace pro.
   Sous 1 100 px (la barre ne loge plus le bouton), le menu sort du flux (panneau fixe) : ce sont
   les outils (Panier, Menu) qui se poussent à droite, et l'Espace pro passe au pied du panneau. */
.entete__barre > .navigation { margin-left: auto; }
.entete__logo { display: block; color: var(--bordeaux); }
.entete__outils { display: flex; align-items: center; gap: 1.25rem; }
/* Lien « Panier » : le mot souligné et, à côté, une pastille bordeaux au nombre de pièces
   (variante « pastille » retenue par Maxime le 24/09/2026 ; nombre posé par header.php). */
.entete__panier { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; white-space: nowrap; padding: 0.5rem 0; color: var(--bordeaux); }
.entete__panier-mot { padding: 0.15rem 0; border-bottom: 1px solid currentColor; }
.entete__panier-nombre {
  display: grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--bordeaux); color: var(--creme);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
  transition: transform 0.45s var(--courbe);
}
.entete__panier:is(:hover, :focus-visible) .entete__panier-nombre { transform: scale(1.12); }
.entete__outils:empty { display: none; }
.logotype { height: 2.6rem; width: auto; }
/* Zone de toucher de 44 px (le mot seul en faisait 18), dessin inchangé. */
.entete__burger { display: none; align-items: center; min-height: 2.75rem; gap: 0.6rem; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.entete__burger-trait { width: 1.4rem; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.menu a {
  display: block;
  font-size: var(--t-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
}
.menu a:hover, .menu .current-menu-item > a, .menu .current_page_parent > a { border-bottom-color: currentColor; color: var(--bordeaux); }

/* Flèche de sortie « ↗ » : deux tracés superposés ; au survol, le premier file en haut à droite,
   le second arrive d'en bas à gauche. */
.fleche-sortie { position: relative; display: inline-block; flex: none; width: 0.8em; height: 0.8em; overflow: hidden; }
.fleche-sortie svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square;
  transition: transform var(--duree) var(--courbe);
}
.fleche-sortie svg + svg { transform: translate(-115%, 115%); }
.pilule-pro:is(:hover, :focus-visible) .fleche-sortie svg:first-child { transform: translate(115%, -115%); }
.pilule-pro:is(:hover, :focus-visible) .fleche-sortie svg + svg { transform: none; }

/* Espace pro : pilule « PRO » suivie d'une pastille ronde portant la flèche ; au survol, la
   pastille s'étend jusqu'à remplir toute la pilule. Couleurs et taille par variables : bordeaux
   sur blanc dans l'en-tête, crème sur le panneau bordeaux du menu. */
.pilule-pro {
  --pilule-fond: var(--bordeaux);
  --pilule-encre: var(--creme);
  --pilule-puce: 2.3rem;
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.3rem 0.3rem 0.3rem 1.2rem;
  border: 1px solid var(--pilule-fond); border-radius: 999px;
  color: var(--pilule-fond); text-decoration: none; white-space: nowrap;
  transition: color 0.6s var(--courbe);
}
.pilule-pro::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--pilule-fond);
  clip-path: circle(calc(var(--pilule-puce) / 2) at calc(100% - 0.3rem - var(--pilule-puce) / 2) 50%);
  transition: clip-path 0.7s var(--courbe);
}
.pilule-pro:hover, .pilule-pro:focus-visible { color: var(--pilule-encre); }
.pilule-pro:hover::before, .pilule-pro:focus-visible::before { clip-path: circle(150% at calc(100% - 0.3rem - var(--pilule-puce) / 2) 50%); }
.pilule-pro__mot { font-size: 0.8125rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.16em; }
.pilule-pro__puce { display: grid; place-items: center; width: var(--pilule-puce); height: var(--pilule-puce); color: var(--pilule-encre); font-size: 0.85rem; }
.navigation__pro { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pilule-pro, .pilule-pro::before, .fleche-sortie svg, .entete__panier-nombre { transition: none; }
}

/* Entre 1 100 et 1 239 px, la barre est juste : espacements resserrés. */
@media (min-width: 1100px) and (max-width: 1239px) {
  .entete__barre { gap: 1.5rem; }
  .menu { gap: 1.25rem; }
}

@media (max-width: 1099px) {
  .entete__burger { display: inline-flex; }
  .entete__outils { margin-left: auto; }
  /* Panneau fermé : remonté de sa hauteur ET de celle de l'en-tête, puis caché (visibility) une fois
     la transition finie. Avec translateY(-110%) seul, son bas restait sous l'en-tête dès que l'écran
     faisait moins de ≈ 836 px de haut (bande de 17 px sur iPhone, en-tête recouvert en paysage) et
     ses liens restaient tabulables (recette du 31/10/2026, R-01 et R-14). --entete-h : hauteur réelle
     de l'en-tête, posée par theme.js (R-04). */
  .navigation {
    position: fixed; inset: var(--entete-h, 4.75rem) 0 0 0;
    background: var(--bordeaux); color: var(--creme);
    padding: var(--gouttiere);
    transform: translateY(calc(-100% - var(--entete-h, 4.75rem)));
    visibility: hidden;
    transition: transform var(--duree) var(--courbe), visibility 0s linear var(--duree);
    overflow: auto;
  }
  html:not(.js) .navigation { position: static; transform: none; visibility: visible; background: transparent; color: inherit; padding: 0 0 1rem; }
  .navigation.est-ouvert { transform: none; visibility: visible; transition: transform var(--duree) var(--courbe), visibility 0s; }
  .menu { flex-direction: column; gap: 0; }
  .menu a { font-family: var(--font-titre); font-size: var(--t-36); letter-spacing: 0.01em; padding: 0.6rem 0; border-bottom: 1px solid var(--creme); }
  .menu a:hover, .menu .current-menu-item > a { color: var(--creme); }
  /* Page courante soulignée, comme au bureau (R-15). */
  .menu .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  html.menu-ouvert { overflow: hidden; }
  .entete__barre { flex-wrap: wrap; }
  html:not(.js) .entete__barre { flex-direction: column; align-items: flex-start; }

  /* Espace pro au pied du panneau : la même pilule, en crème et plus grande. */
  .entete__pro { display: none; }
  .navigation__pro {
    --pilule-fond: var(--creme);
    --pilule-encre: var(--bordeaux);
    --pilule-puce: 3rem;
    display: flex; width: fit-content; margin-top: 2.5rem;
    padding-left: 1.6rem; gap: 1.25rem;
  }
  .navigation__pro .pilule-pro__mot { font-size: 1rem; }
  .navigation__pro .pilule-pro__puce { font-size: 1.2rem; }
  .navigation__pro:focus-visible { outline-color: var(--creme); }
  html:not(.js) .navigation__pro { --pilule-fond: var(--bordeaux); --pilule-encre: var(--creme); }
}

/* Téléphone, panier non vide : le mot « Panier » faisait passer la loupe, le panier et « Menu » sous le
   logo (en-tête de 119 px, R-04). La pastille seule reste ; le lien garde son nom (« Panier, 2 pièces »). */
@media (max-width: 599px) {
  .entete__panier-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .entete__panier { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  /* Logo 130 + loupe 42 + panier 44 + Menu 73 : tient en 343 px (375 moins les gouttières). */
  .entete__barre { gap: 1rem; }
  .entete__outils { gap: 0.75rem; }
}

/* ---- Accueil : hero --------------------------------------------------------- */
/* Choix de Maxime du 24/09/2026 (maquette 39-hero-accueil, variante B « Écrin », mode « teintes ») :
   une monture de face détourée par tableau, monumentale, sur sa couleur de la charte ; son nom en
   filigrane derrière (lisible à travers les verres des optiques), son symbole à côté de la fiche.
   Le fond et les encres sont deux variables enregistrées : elles glissent d'une teinte à l'autre. */

@property --hero-fond { syntax: '<color>'; inherits: true; initial-value: #191618; }
@property --hero-encre { syntax: '<color>'; inherits: true; initial-value: #F2EFE1; }

.hero {
  --hero-fond: var(--charbon); --hero-encre: var(--creme);
  /* 65 % (au lieu de 55) : ≥ 4,8:1 sur toutes les teintes, petits textes compris (review 51, 25/09/2026). */
  --hero-douce: color-mix(in srgb, var(--hero-encre) 65%, var(--hero-fond));
  --hero-filigrane: color-mix(in srgb, var(--hero-fond) 90%, var(--hero-encre));
  --hero-ombre: rgba(8, 4, 4, 0.55); --hero-ombre-proche: rgba(8, 4, 4, 0.35);
  --hero-lent: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-duree: 7s;
  position: relative; isolation: isolate; overflow: hidden;
  height: max(38rem, calc(100svh - 4.75rem - 1px)); max-height: 62rem;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1.5rem, 3vw, 2.75rem) max(var(--gouttiere), calc((100vw - var(--largeur)) / 2)) clamp(1.5rem, 2.6vw, 2.5rem);
  background: var(--hero-fond); color: var(--hero-encre);
  transition: --hero-fond 1.3s var(--courbe), --hero-encre 1.3s var(--courbe);
  /* Glisser horizontal géré par theme.js ; le défilement vertical reste au navigateur. */
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.hero[data-teinte="sapin"] { --hero-fond: var(--sapin); }
.hero[data-teinte="navy"] { --hero-fond: var(--navy); }
.hero[data-teinte="bordeaux"] { --hero-fond: var(--bordeaux); }
.hero[data-teinte="charbon"] { --hero-fond: var(--charbon); }
.hero[data-teinte="creme"], .hero[data-teinte="gris"] {
  --hero-encre: var(--charbon);
  --hero-ombre: rgba(25, 22, 24, 0.26); --hero-ombre-proche: rgba(25, 22, 24, 0.18);
}
.hero[data-teinte="creme"] { --hero-fond: var(--creme); }
.hero[data-teinte="gris"] { --hero-fond: var(--gris-photo); }

.hero__scene { position: absolute; inset: 0; z-index: -1; }
.hero__filigranes { position: absolute; inset: 0; display: grid; place-items: center; }
.hero__filigrane {
  grid-area: 1 / 1; margin: 0; white-space: nowrap;
  font-family: var(--font-titre); text-transform: uppercase; line-height: 1; letter-spacing: 0.02em;
  font-size: var(--taille, 17vw);
  color: var(--hero-filigrane);
  transform: translateY(-2%);
}
/* white-space: pre (25/10/2026) : une lettre qui n'est qu'une espace garde sa largeur — sans lui, « Voie Lactée » s'écrivait « VOIELACTÉE ». */
.hero__lettre { display: inline-block; white-space: pre; opacity: 0; transform: translateY(18%); transition: opacity 1.1s var(--hero-lent), transform 1.4s var(--hero-lent); transition-delay: calc(var(--l) * 55ms); }
.hero__filigrane.est-actif .hero__lettre { opacity: 1; transform: none; transition-delay: calc(var(--l) * 55ms + 250ms); }
html:not(.js) .hero__filigrane:not(.est-actif) { display: none; }
/* Caché tant que theme.js ne l'a pas mis à sa taille (sinon il saute : décalage de mise en page). */
html.js .hero:not(.est-ajuste) .hero__filigrane { visibility: hidden; }
/* Dégradé du nom réglé au portail (25/10/2026) : chaque lettre porte le même dégradé, à la largeur du mot et décalé de
   sa place (--degrade-l, --degrade-x, posés par theme.js) : un seul dégradé sur le nom, lettres montantes comprises.
   Sans script, les lettres ne sont pas séparées : le nom entier le porte. */
.hero__filigrane.a-degrade .hero__lettre, html:not(.js) .hero__filigrane.a-degrade {
  background-image: var(--hero-degrade); background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero__filigrane.a-degrade .hero__lettre { background-size: var(--degrade-l, 100%) 100%; background-position: calc(-1 * var(--degrade-x, 0px)) 0; }

.hero__vues { position: absolute; inset: 0; }
.hero__vue {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity 1.4s var(--hero-lent), transform 2.6s var(--hero-lent);
}
.hero__vue.est-active { opacity: 1; transform: none; }
.hero__photo {
  position: absolute; left: 50%; top: 49%; width: min(80vw, 128svh); height: auto; max-width: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1.5rem 1.4rem var(--hero-ombre)) drop-shadow(0 0.3rem 0.35rem var(--hero-ombre-proche));
}

.hero__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.hero__titre { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); line-height: 0.92; margin: 0; }
.hero__titre em { font-style: italic; }
.hero__ligne { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.hero__ligne > * { display: inline-block; }
.hero__sur { margin: 0; text-align: right; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.8; color: var(--hero-douce); }

/* Entrée : lignes du titre révélées par le bas, le reste en fondu (seulement avec JavaScript). */
.hero__entre { transition: transform 1.3s var(--hero-lent), opacity 1.3s var(--hero-lent); transition-delay: calc(var(--d, 0) * 110ms + 150ms); }
html.js .hero:not(.est-entree) .hero__ligne > .hero__entre { transform: translateY(105%); }
html.js .hero:not(.est-entree) .hero__entre:not(.hero__ligne > *) { opacity: 0; transform: translateY(14px); }

.hero__bas { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38rem); align-items: end; gap: 2rem; }
.hero__fiches { display: grid; }
.hero__fiche { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: end; }
.hero__fiche.est-active > div:last-child { animation: hero-fiche 0.9s var(--hero-lent) both 0.2s; }
@keyframes hero-fiche { from { opacity: 0; transform: translateY(12px); } }
.hero__meta { margin: 0 0 0.6rem; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--hero-douce); }
.hero__num { font-variant-numeric: tabular-nums; margin-right: 0.9em; }
.hero__nom { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); line-height: 1; margin: 0 0 0.6rem; }
.hero__phrase { font-size: var(--t-14); line-height: 1.5; max-width: 46ch; margin-bottom: 1rem; }
.hero .lien-fleche, .hero .lien-fleche:hover { color: var(--hero-encre); border-bottom-color: var(--hero-encre); }
.hero__symbole { width: clamp(4.5rem, 7vw, 6.5rem); color: var(--hero-encre); }
.hero__symbole svg, .hero__symbole img { width: 100%; height: auto; }
/* Le symbole se révèle depuis son centre, comme une gravure qui apparaît. */
.hero__fiche.est-active .hero__symbole { animation: hero-eclosion 1.6s var(--hero-lent) both 0.35s; }
@keyframes hero-eclosion { from { clip-path: circle(0% at 50% 50%); opacity: 0.2; } to { clip-path: circle(75% at 50% 50%); opacity: 1; } }

/* Navigation : un trait par monture, qui se remplit au rythme du défilement ; le nom dessous. */
.hero__nav { display: flex; align-items: flex-end; gap: clamp(0.6rem, 1.2vw, 1.1rem); padding-bottom: 0.2rem; }
.hero__point { flex: 1 1 0; min-width: 0; text-align: left; padding: 0.9rem 0 0.2rem; color: var(--hero-douce); transition: color 0.5s var(--courbe); }
.hero__point:hover, .hero__point.est-actif { color: var(--hero-encre); }
.hero__trait { display: block; height: 1px; background: var(--hero-douce); margin-bottom: 0.7rem; overflow: hidden; }
.hero__trait > span { display: block; height: 100%; background: var(--hero-encre); transform: scaleX(0); transform-origin: left; }
.hero__point.est-vu .hero__trait > span { transform: scaleX(1); }
.hero__point.est-actif .hero__trait > span { animation: hero-remplir var(--hero-duree) linear forwards; }
.hero.est-en-pause .hero__point.est-actif .hero__trait > span { animation-play-state: paused; }
@keyframes hero-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__point-nom { display: block; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__pause { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; color: var(--hero-encre); margin-bottom: -0.1rem; }
.hero__pause span { width: 7px; height: 9px; border-inline: 2px solid currentColor; }
.hero__pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.hero__point:focus-visible, .hero__pause:focus-visible, .hero .lien-fleche:focus-visible { outline: 1px solid var(--hero-encre); outline-offset: 4px; }
html:not(.js) .hero__nav { display: none; }

/* Damier de l'accueil : ses cases passent en fondu d'une image à l'autre (theme.js, « Diaporama »).
   Le trait de l'image affichée se remplit en --duree ; à la main (toucher, clic, glisser), le fondu est
   plus court. */
/* Pistes bornées : sans elles, la case prenait la largeur de la photo d'origine (3 002 px dans une
   case de 628 : photos agrandies ×5, review 51-review-design-test2, D1). */
.diaporama { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.diaporama__vue { grid-area: 1 / 1; min-width: 0; min-height: 0; margin: 0; opacity: 0; transition: opacity 1s var(--courbe); pointer-events: none; }
.diaporama__vue.est-active { opacity: 1; pointer-events: auto; position: relative; z-index: 1; }
.diaporama.est-manuel .diaporama__vue { transition-duration: 0.45s; }
.diaporama img { -webkit-user-drag: none; }
.diaporama:focus-visible { outline: 1px solid var(--charbon); outline-offset: 4px; }
.diaporama__traits { position: absolute; z-index: 2; left: clamp(0.9rem, 2vw, 1.4rem); right: clamp(0.9rem, 2vw, 1.4rem); bottom: clamp(0.9rem, 2vw, 1.4rem); display: flex; gap: 0.35rem; pointer-events: none; filter: drop-shadow(0 0 3px rgba(25, 22, 24, 0.35)); }
.diaporama__trait { flex: 1 1 0; height: 2px; background: rgba(242, 239, 225, 0.45); overflow: hidden; }
.diaporama__trait > span { display: block; height: 100%; background: var(--creme); transform: scaleX(0); transform-origin: left; }
.diaporama__trait.est-vu > span { transform: scaleX(1); }
.diaporama__trait.est-actif > span { animation: diaporama-remplir var(--duree, 6s) linear forwards; }
.diaporama.est-en-pause .diaporama__trait.est-actif > span { animation-play-state: paused; }
@keyframes diaporama-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html:not(.js) .diaporama__traits { display: none; }
@media (prefers-reduced-motion: reduce) {
  .diaporama__trait.est-actif > span { animation: none; transform: scaleX(1); }
}

@media (max-width: 899px) {
  .hero { height: auto; min-height: calc(100svh - 4.75rem - 1px); max-height: none; padding-top: 1.25rem; }
  .hero__haut { flex-direction: column; gap: 0.6rem; }
  .hero__sur { text-align: left; }
  .hero__titre { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero__filigranes, .hero__vues { bottom: auto; height: 62%; top: 12%; }
  /* Au téléphone, la monture remplit la largeur. */
  .hero__photo { width: 110vw; top: 50%; }
  .hero__bas { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__fiche { gap: 1rem; }
  .hero__symbole { width: 3.75rem; }
  /* Les traits seuls : le nom de la monture est déjà dans la fiche. */
  .hero__point-nom { display: none; }
  .hero__point { padding: 1rem 0 0.9rem; }
  .hero__trait { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { transition: none; }
  .hero__entre, .hero__vue, .hero__lettre { transition: none !important; }
  .hero__fiche.est-active > div:last-child, .hero__fiche.est-active .hero__symbole { animation: none; }
  .hero__point.est-actif .hero__trait > span { animation: none; transform: scaleX(1); }
}

/* ---- Sections ---------------------------------------------------------------- */

.section { padding: var(--section) 0; }
.section__entete {
  display: flex; align-items: end; justify-content: space-between; gap: 2rem;
  padding-bottom: 1.5rem; margin-bottom: 2.5rem;
  border-bottom: var(--trait);
}
.section__entete--bande { border-color: var(--creme); align-items: start; }
.bande { color: var(--creme); padding: var(--section) 0; }
.bande--bordeaux { background: var(--bordeaux); }
.bande--charbon { background: var(--charbon); }
.bande .sur-titre, .bande .section__titre { color: var(--creme); }
.bande__texte { max-width: 44ch; font-size: var(--t-18); }
.bande__pied { margin-top: 2.5rem; }
.bande__grille-claire { background: var(--fond); color: var(--charbon); padding: var(--gouttiere); }

/* ---- Grilles et cartes ------------------------------------------------------ */

.grille { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem) var(--gouttiere); }
/* 3 montures par ligne (décision de Maxime du 24/09/2026), 2 sur tablette, 1 au téléphone. */
.grille--montures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .grille--montures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grille--montures { grid-template-columns: 1fr; } }
/* Carte « présentoir » (24/09/2026, maquette 38) : photo de trois quarts du coloris choisi,
   symbole en gaufrage derrière, tablette des coloris vus de face dessous. Variante « Studio »
   (24/09/2026, maquette 44) : fond en dégradé vertical, monture agrandie qui porte son ombre. */
.carte { position: relative; min-width: 0; }
.carte__visuel { position: relative; background: var(--gris-carte); }
.carte__scene {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: inherit;
  background: linear-gradient(180deg, var(--gris-carte) 0%, var(--blanc) 50%, var(--gris-carte) 100%);
}
/* La photo remplit la scène et grossit de 5 % : les photos de trois quarts sont toutes au 16:9
   avec au moins 3,5 % de marge de chaque côté (relevé du 24/09/2026 sur 212 photos), aucune
   branche n'est coupée. L'ombre suit la forme de la monture (drop-shadow, pas une ellipse). */
.carte__img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(1.05); filter: drop-shadow(0 14px 10px rgba(25, 22, 24, 0.1));
  transition: opacity 0.45s var(--courbe), transform 0.8s var(--courbe), filter 0.8s var(--courbe);
}
.carte__img.est-active { opacity: 1; }
/* Vue de face (survol) : la monture y est plus petite dans sa photo (79 % de la largeur en
   médiane contre 88 % de trois quarts, au moins 5 % de marge) : agrandie de 10 % pour garder
   la même présence. */
.carte__img--survol { z-index: 2; transform: scale(1.1); }
/* Survol de la photo (souris) : la vue de face du coloris choisi (25/09/2026, au lieu de la
   vue de côté), et la monture se soulève (son ombre s'éloigne et s'estompe). */
@media (hover: hover) {
  .carte__scene.a-survol:hover .carte__img--survol { opacity: 1; }
  .carte__scene.a-survol:hover .carte__img:not(.carte__img--survol) { opacity: 0; }
  .carte__scene:hover .carte__img { transform: translateY(-3.5%) scale(1.05); filter: drop-shadow(0 30px 18px rgba(25, 22, 24, 0.07)); }
  .carte__scene:hover .carte__img--survol { transform: translateY(-3.5%) scale(1.1); }
}
/* Gaufrage : le symbole en grand, BLANC PLEIN (ni opacité ni dégradé : charte), décalé à droite
   et coupé par le bord ; il reste immobile quand les coloris passent devant lui et se dessine
   au survol de la photo (symbol-motion.js, contexte « card »). */
.carte__gaufrage {
  position: absolute; right: -7%; top: 50%; z-index: 0; height: 124%; aspect-ratio: 1;
  color: var(--blanc); transform: translateY(-50%); pointer-events: none;
}
.carte__gaufrage .ef-motion, .carte__gaufrage .ef-motion__svg { width: 100%; height: 100%; }
.carte__gaufrage img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); } /* symbole sans animation */
/* « Nouveauté » puis la disponibilité du coloris, côte à côte en haut à gauche de la photo. */
.carte__etiquettes { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.25rem; pointer-events: none; }
.carte__etiquette { display: flex; } /* sans ligne de texte autour : l'étiquette colle au bord haut */
/* Texte : le nom et, sur sa ligne à droite, le prix du coloris choisi (le nom du coloris n'est
   plus écrit sous le nom, décision de Maxime du 24/09/2026 : la tablette le montre). */
.carte__texte {
  position: relative; padding: 1rem 0 0.75rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline;
}
.carte__texte .sur-titre { grid-column: 1 / -1; }
.carte__titre { font-size: var(--t-24); margin: 0; }
.carte__lien { text-decoration: none; color: inherit; }
.carte__lien::after { content: ''; position: absolute; inset: 0; } /* tout le bloc de texte mène à la fiche */
@media (hover: hover) { .carte:hover .carte__lien { color: var(--bordeaux); } }
.carte__meta { margin: 0; font-size: var(--t-18); }
.carte__prix { font-weight: 500; white-space: nowrap; }

/* Tablette : centrée quand tout tient, calée à gauche quand ça déborde (un justify-content:
   center rendrait la première monture inaccessible). Sur ordinateur, les miniatures
   rétrécissent pour que 8 coloris tiennent ; au téléphone, la tablette défile au doigt. */
.tablette {
  /* Hauteur fixe : les miniatures rétrécies ne décalent pas les cartes d'une même ligne. */
  position: relative; display: flex; align-items: center; gap: 0.2rem; height: 3.6rem; padding: 0 0.5rem;
  border-top: 1px solid var(--blanc); /* chant de la tablette : blanc sur gris */
  overflow-x: auto; scrollbar-width: none;
}
.tablette::-webkit-scrollbar { display: none; }
.tablette__monture {
  position: relative; flex: 0 1 4.6rem; min-width: 2.25rem; aspect-ratio: 16 / 9;
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
}
.tablette__monture:first-child { margin-left: auto; }
.tablette__monture:last-child { margin-right: auto; }
/* multiply : les vues de face portent un voile presque transparent plus clair que le fond, qui
   dessinait un rectangle derrière certaines miniatures. */
.tablette__monture img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.35s var(--courbe); }
.tablette__monture:hover img { transform: translateY(-2px); }
.tablette__monture::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: -0.2rem; height: 2px;
  background: transparent; transition: background-color 0.3s var(--courbe);
}
.tablette__monture[aria-pressed="true"]::after { background: var(--bordeaux); }
.tablette__monture.est-epuisee img { filter: grayscale(1); }
.tablette__monture.est-epuisee::before {
  content: attr(data-etat); position: absolute; top: -0.1rem; right: 0; z-index: 1; white-space: nowrap;
  font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rouge);
}

/* Pellicule (téléphone, construite par theme.js) : la grande photo se glisse au doigt, la
   monture suivante dépasse à droite pour s'annoncer. */
.pellicule {
  position: absolute; inset: 0; z-index: 1; display: flex;
  overflow-x: auto; overflow-y: hidden; /* la photo agrandie ne doit pas ouvrir un défilement vertical */
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pellicule::-webkit-scrollbar { display: none; }
.pellicule::after { content: ''; flex: 0 0 16%; }
.pellicule__vue { position: relative; flex: 0 0 84%; scroll-snap-align: start; }
.pellicule__vue img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: scale(1.05); filter: drop-shadow(0 14px 10px rgba(25, 22, 24, 0.1));
}

@media (max-width: 599px) {
  /* Avant que theme.js ne monte la pellicule, la photo occupe déjà la place de sa première vue (84 %) :
     elle ne saute pas quand le script arrive. Sans script, elle garde toute la largeur. */
  html.js .carte--coloris .carte__scene > .carte__img { right: 16%; width: 84%; }
  .tablette { gap: 0.5rem; }
  .tablette__monture { flex: 0 0 4.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carte__img, .tablette__monture img { transition: none; }
  .carte__scene:hover .carte__img { transform: scale(1.05); }
  .carte__scene:hover .carte__img--survol { transform: scale(1.1); }
}

.pastilles { display: flex; gap: 0.4rem; align-items: center; }
.pastille {
  display: inline-block; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--pastille, transparent) center / cover;
  border: 1px solid var(--charbon);
}
.pastille--inconnue { background: repeating-linear-gradient(45deg, var(--charbon) 0 1px, transparent 1px 4px); }
.pastilles__plus { font-size: var(--t-12); letter-spacing: 0.08em; }

/* ---- Accueil : symboles, duo, appels ---------------------------------------- */

.symboles-bande__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gouttiere); }
.symbole-tuile a { display: grid; gap: 1rem; text-decoration: none; color: var(--creme); justify-items: center; text-align: center; }
.symbole-tuile__img { width: min(100%, 220px); aspect-ratio: 1; object-fit: contain; transition: transform var(--duree) var(--courbe); }
.symbole-tuile a:hover .symbole-tuile__img { transform: translateY(-6px); }
.symbole-tuile__nom { font-family: var(--font-titre); text-transform: uppercase; font-size: var(--t-24); }

.duo__grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gouttiere); }
.duo__tuile {
  display: grid; align-content: end; gap: 0.75rem;
  min-height: min(60vw, 26rem);
  padding: var(--gouttiere);
  text-decoration: none; color: inherit;
  border: var(--trait);
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.duo__tuile--creme { background: var(--panneau); border-color: var(--panneau); }
.duo__tuile--charbon { background: var(--charbon); color: var(--creme); border-color: var(--charbon); }
.duo__tuile--charbon .sur-titre { color: var(--creme); }
.duo__tuile--creme:hover { background: var(--bordeaux); color: var(--creme); border-color: var(--bordeaux); }
.duo__tuile--creme:hover .lien-fleche { color: var(--creme); border-color: var(--creme); }
.duo__titre { font-size: clamp(2.5rem, 1rem + 4.5vw, 5.5rem); overflow-wrap: anywhere; }
.duo__texte { max-width: 34ch; }
@media (max-width: 699px) { .duo__grille { grid-template-columns: 1fr; } }

.marque-appel { background: var(--panneau); }
.marque-appel__grille { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gouttiere); align-items: start; }
.marque-appel__texte { font-size: var(--t-24); line-height: 1.4; max-width: 36ch; }
/* Khamsa seule et fixe : sous le titre au bureau, en fin de bloc au téléphone. */
.marque-appel__signes { height: clamp(76px, 8vw, 112px); margin-top: clamp(1.5rem, 3vw, 2.5rem); color: var(--encre); }
.marque-appel__signes svg { display: block; height: 100%; width: auto; fill: currentColor; }
.marque-appel__signes--mobile { display: none; }
@media (max-width: 799px) {
  .marque-appel__grille { grid-template-columns: 1fr; }
  .marque-appel__signes--bureau { display: none; }
  .marque-appel__signes--mobile { display: block; }
}

.revendeurs-appel__grille { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gouttiere); align-items: end; }
.revendeurs-appel__titre { font-size: var(--t-affiche); color: var(--creme); }
@media (max-width: 799px) { .revendeurs-appel__grille { grid-template-columns: 1fr; } }

/* ---- Mosaïque d'ambiance ---------------------------------------------------- */

/* Accueil — « Chaque monture raconte une histoire » : deux scènes « Révélation » (variante D du banc 116,
   choix de Maxime du 19/10/2026). Chaque scène : la case de photos (tuile-visuels, diaporama) qui occupe
   toute la scène, le titre complet rempli par la photo affichée, puis le message en crème.
   --p (0 : la scène entre par le bas ; 1 : ouverte) est posé par theme.js ; --o ouvre la photo depuis le
   centre, --q fait passer le mot en crème et fait monter le message. Sans script, scène ouverte. */
.histoire__accroche { font-family: var(--font-titre); font-size: var(--t-36); text-align: center; margin: 0 0 clamp(2rem, 5vw, 3.5rem); padding-inline: var(--gouttiere); }
.histoire__scenes { display: grid; --h-scene: clamp(30rem, 86vh, 50rem); }
/* La case de photos (tuile-visuels.php) : photo en couverture ; sans adresse encore posée (chargement différé),
   elle laisse la place à celle de <noscript>. */
.tuile-visuels { aspect-ratio: 4 / 5; overflow: hidden; background: var(--panneau); }
.tuile-visuels img { width: 100%; height: 100%; object-fit: cover; }
.tuile-visuels img:not([src]) { display: none; }
.revele { --p: 0; --o: clamp(0, calc((var(--p) - 0.12) / 0.7), 1); --q: clamp(0, calc((var(--p) - 0.8) / 0.2), 1);
  position: relative; height: var(--h-scene); overflow: hidden; background: var(--panneau); color: var(--creme); }
html:not(.js) .revele { --p: 1; }
.revele .tuile-visuels { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: transparent;
  clip-path: inset(calc((1 - var(--o)) * 50%) calc((1 - var(--o)) * 50%)); }
.revele .tuile-visuels img { object-position: 50% 30%; }
.revele .diaporama__traits { top: clamp(0.9rem, 2vw, 1.4rem); bottom: auto; opacity: var(--q); }
.revele::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--q);
  background: linear-gradient(0deg, rgba(25, 22, 24, var(--dip-voile, 0.82)) 0%, rgba(25, 22, 24, calc(var(--dip-voile, 0.82) * 0.427)) 34%, transparent 60%); }
.revele__masque { position: absolute; inset: 0; z-index: 3; margin: 0; display: grid; place-items: center; pointer-events: none;
  background-color: transparent; background-size: cover; background-position: 50% 30%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: color-mix(in srgb, var(--creme) calc(var(--q) * 100%), transparent); -webkit-text-fill-color: color-mix(in srgb, var(--creme) calc(var(--q) * 100%), transparent);
  font-family: var(--font-titre); font-weight: 400; text-align: center; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em; white-space: nowrap; }
.revele__intitule { display: block; width: 86%; font-size: clamp(2rem, 6vw, 7rem); }
.revele__mot { display: block; width: max-content; margin-inline: auto; }
.revele__suite { display: block; margin-top: 0.22em; font-size: 0.46em; font-style: italic; line-height: 1.12; white-space: normal; overflow-wrap: anywhere; }
/* À l'ouverture, les deux lignes descendent ensemble au-dessus du message (--descente, posée par theme.js). */
.revele__masque { transform: translateY(calc(var(--q) * var(--descente, 0px))); }
/* Le titre et le message se choisissent indépendamment pour chaque photo. Le masque reste visible avant
   l'ouverture ; le titre peut ensuite s'effacer. Sans titre ni message, le voile s'efface aussi.
   Masqué, le bouton n'est plus atteignable (visibility, après le fondu). */
.revele__masque, .revele::after { transition: opacity 0.8s var(--courbe); }
.revele__texte { transition: opacity 0.8s var(--courbe), visibility 0s; }
.revele:has(.diaporama__vue.est-active[data-masquer-titre]) .revele__masque { opacity: calc(1 - var(--q)); }
.revele:has(.diaporama__vue.est-active[data-symbole-incruste][data-masquer-titre])::after { opacity: 0; }
.revele:has(.diaporama__vue.est-active[data-symbole-incruste]) .revele__texte { opacity: 0; visibility: hidden;
  transition: opacity 0.8s var(--courbe), visibility 0s 0.8s; }
/* Sans photo encore posée (chargement différé), le mot reste lisible : bordeaux sur crème. */
.revele__masque:not([style*="background-image"]) { color: var(--bordeaux); -webkit-text-fill-color: var(--bordeaux); }
.revele__texte { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3rem); display: grid; justify-items: center; text-align: center;
  padding-inline: var(--gouttiere); opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 1.5rem)); pointer-events: none; }
.revele.est-ouverte .revele__texte { pointer-events: auto; }
.revele__phrase { max-width: 34ch; margin: 0 0 1.5rem; }
.revele__action { margin: 0; }
.revele .bouton--creme:hover { background: var(--charbon); border-color: var(--charbon); color: var(--creme); }
@media (max-width: 699px) {
  .histoire__scenes { --h-scene: min(86svh, 42rem); }
}
/* Harmonisation (Maxime, 22/10/2026) : bord à bord (le conteneur prend toute la largeur, l'accroche garde sa
   gouttière), scènes jointives, mots de même corps posés au-dessus de leur message (theme.js). À l'ordinateur,
   les deux scènes en diptyque, côte à côte, chaque panneau au 4:5 des photos sans dépasser l'écran. */
.histoire > .conteneur { width: 100%; }
@media (min-width: 900px) {
  .histoire__scenes { grid-template-columns: 1fr 1fr; --h-scene: max(38rem, min(62.5vw, 86vh)); }
}
/* Chaque rangée s'arrête à l'écran le temps de l'animation (Maxime, 22/10 : « je n'ai pas le temps de voir le texte
   masqué ») : elle est plus haute que sa scène de 100vh, la scène y reste collée sous l'en-tête, centrée dans
   l'écran ; theme.js mesure --p sur cette course (0 à l'arrêt, 1 à la reprise du défilement). Le mot masqué se
   voit pendant l'arrivée et le début de l'arrêt, la photo s'ouvre ensuite, puis le message. Diptyque : une seule
   rangée pour les deux scènes ; téléphone : une rangée par scène, arrêt raccourci à 60vh (Maxime, 23/10 :
   « accélère un peu », deux arrêts à la suite). */
@media (prefers-reduced-motion: no-preference) {
  html.js .histoire__scenes { --arret: var(--dip-arret, 100vh); grid-auto-rows: calc(var(--h-scene) + var(--arret)); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.js .histoire__scenes { --arret: var(--dip-arret-mobile, 60vh); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .revele { position: sticky; top: max(4.75rem, calc((100svh + 4.75rem - var(--h-scene)) / 2)); align-self: start;
    --o: clamp(0, calc((var(--p) - 0.12) / 0.58), 1); --q: clamp(0, calc((var(--p) - 0.72) / 0.2), 1); }
}

/* Bande de pied d'accueil « Surround yourself with magic » (bannière du site d'origine). */
.final { position: relative; background: var(--charbon); color: var(--creme); overflow: hidden; }
.final__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.final__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 22, 24, 0.15) 0%, rgba(25, 22, 24, 0.35) 38%, rgba(25, 22, 24, 0.85) 68%, rgba(25, 22, 24, 0.92) 100%); }
.final__contenu { position: relative; min-height: min(62vh, 30rem); display: flex; align-items: center; justify-content: flex-end; padding: var(--section) 0; }
.final__bloc { width: min(100%, 28rem); text-align: center; }
.final__titre { font-size: clamp(1.9rem, 0.9rem + 3.2vw, 3.5rem); line-height: 1; color: var(--creme); margin: 0; }
.final__titre em { font-style: italic; }
/* Les deux boutons (optiques, solaires) sous le titre, centrés côte à côte, l'un sous l'autre quand la place manque
   (23/10/2026 ; la phrase « Toute la collection solaire… » qui les précédait a été retirée le même jour). */
.final__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.final__actions .bouton + .bouton { margin-left: 0; }
/* Téléphone (23/10/2026, variante B choisie par Maxime) : la photo carrée du duo coiffe la section (source téléphone du
   <picture>), le titre se pose sur son bas dans un dégradé, les deux boutons suivent sur le charbon. Avant, la bannière
   large était étirée depuis sa plus petite déclinaison (374 px) et le titre couvrait les lunettes. */
.final__photo { display: block; }
@media (max-width: 799px) {
    .final__fond { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
    .final__voile { inset: 0 0 auto 0; height: auto; aspect-ratio: 1 / 1; background: linear-gradient(180deg, rgba(25, 22, 24, 0) 45%, rgba(25, 22, 24, 0.55) 75%, rgba(25, 22, 24, 0.92) 100%); }
    .final__contenu { justify-content: center; min-height: 0; padding: 1.5rem 0 2.5rem; }
    .final__bloc { position: relative; width: 100%; }
    .final__titre { position: absolute; left: 0; right: 0; bottom: calc(100% + 2.6rem); padding: 0 0.5rem; }
    .final__actions { margin-top: 0; }
}

.mosaique__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1.2vw, 1rem); }
.mosaique__grille--4 { grid-template-columns: repeat(4, 1fr); }
.mosaique__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--panneau); }
.mosaique__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.mosaique__photo:hover img { transform: scale(1.04); }
.mosaique__photo:nth-child(4n+1) { margin-top: 2.5rem; }
.mosaique__photo:nth-child(4n+3) { margin-top: 1.25rem; }
@media (max-width: 699px) { .mosaique__grille, .mosaique__grille--4 { grid-template-columns: repeat(2, 1fr); } .mosaique__photo:nth-child(4n+1), .mosaique__photo:nth-child(4n+3) { margin-top: 0; } .mosaique__photo:nth-child(2n) { margin-top: 1.5rem; } }
.duo__accroche { font-family: var(--font-titre); font-size: var(--t-24); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

/* ---- Fiche ------------------------------------------------------------------ */
/* La photo d'ambiance de la fiche (.ambiance) est stylée avec les intermèdes des collections. */

.fiche__cotes dt { display: flex; align-items: center; gap: 0.4rem; }
.picto { width: 2rem; height: auto; color: var(--charbon); }
.picto path, .picto polygon, .picto rect, .picto circle { fill: currentColor; }

/* ---- Goodies ------------------------------------------------------------------------- */

.goodies__grille { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--section); }
.goodie__visuel { aspect-ratio: 1; background: var(--panneau); display: grid; place-items: center; overflow: hidden; }
.goodie__visuel img { width: 100%; height: 100%; object-fit: cover; }
.goodie__nom { font-size: var(--t-24); margin-top: 0.75rem; }
.goodies__note { display: inline-block; margin-left: 1rem; font-size: var(--t-14); }
@media (max-width: 699px) { .goodies__grille { grid-template-columns: 1fr; } }

/* ---- Pages de collection --------------------------------------------------- */

.collection { padding: clamp(3rem, 6vw, 5rem) 0 var(--section); }
.collection__entete { margin-bottom: 3rem; }

/* ---- Intermèdes des collections et photo d'ambiance de la fiche -------------------------------
   Photos toutes les 18 montures (rythme espacé le 06/10/2026) ; titres sur photo sans cartouches,
   variante B de 80-titres-intermedes retenue par Maxime le 06/10/2026. La photo d'ambiance de la fiche
   monture (.ambiance) prend le même traitement depuis le 15/10/2026 (demande de Maxime : « même style
   que sur la page Optiques et Solaires ») : largeur de la page, 21:9, dégradé, accroche sans pavé. */
.intermede { grid-column: 1 / -1; margin: clamp(0.5rem, 2vw, 1.5rem) 0; }
.ambiance { margin-top: var(--section); }
.intermede__lien, .ambiance { position: relative; display: block; overflow: hidden; background: var(--charbon); color: var(--creme); text-decoration: none; }
.intermede__lien:hover { color: var(--creme); }
.intermede__lien::after, .ambiance::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(25, 22, 24, 0.85) 0%, rgba(25, 22, 24, 0.52) 20%, transparent 65%); }
.intermede__lien:focus-visible { outline-offset: 4px; }
.intermede picture, .ambiance picture { display: block; }
.intermede__img, .ambiance__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.intermede__img { transition: transform 1.4s var(--courbe); }
.intermede__lien:hover .intermede__img { transform: scale(1.03); }
.intermede__contenu { position: absolute; z-index: 1; inset: auto 2rem 1.875rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.ambiance__accroche { position: absolute; z-index: 1; left: 2rem; right: 2rem; bottom: 1.875rem; }
.intermede__accroche, .ambiance__accroche { min-width: 0; max-width: 23ch; margin: 0; font-family: var(--font-titre); text-transform: uppercase;
  font-size: clamp(1.5625rem, 2.8vw, 2.25rem); line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; }
.intermede__details { display: grid; flex: 0 0 auto; gap: 0.625rem; max-width: 35%; }
.intermede__nom { font-family: var(--font-titre); text-transform: uppercase; font-size: 1.25rem; line-height: 1.2; overflow-wrap: break-word; }
.intermede__details .lien-fleche { justify-self: start; border-color: currentColor; font-size: 0.6875rem; }
@media (max-width: 699px) {
  .intermede, .ambiance { margin-inline: calc(-1 * var(--gouttiere)); }
  .intermede__img, .ambiance__img { aspect-ratio: 4 / 5; }
  .intermede__contenu { inset: auto 1.375rem 1.5rem; display: grid; gap: 1.25rem; }
  .ambiance__accroche { left: 1.375rem; right: 1.375rem; bottom: 1.5rem; }
  .intermede__accroche, .ambiance__accroche { max-width: 20ch; font-size: 1.75rem; }
  .intermede__details { gap: 0.4375rem; max-width: none; }
  .intermede__nom { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { .intermede__img { transition: none; } }
.collection__intro { font-size: var(--t-24); line-height: 1.4; max-width: 46ch; margin: 1.5rem 0 2rem; }
.filtres { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filtre {
  font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none; padding: 0.6rem 1rem; border: var(--trait);
}
.filtre.est-actif, .filtre:hover { background: var(--charbon); color: var(--creme); }
.filtre--bascule.est-actif, .filtre--bascule:hover { background: var(--bordeaux); border-color: var(--bordeaux); }
.pagination { margin-top: 3rem; }
.pagination ul { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-block; padding: 0.6rem 1rem; border: var(--trait); text-decoration: none; font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.pagination .current { background: var(--charbon); color: var(--creme); }

/* ---- Fiche monture --------------------------------------------------------------- */

.fiche { padding: clamp(2rem, 5vw, 4rem) 0 0; }
.fiche__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gouttiere); align-items: start; }
.fiche__principale { margin: 0; aspect-ratio: 16 / 9; background: var(--gris-photo); padding: 4%; }
.fiche__img { width: 100%; height: 100%; object-fit: contain; }
.fiche__vignettes { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
/* 4 vignettes de 5,5rem dépassent un téléphone de 375-390 px : elles rétrécissent plutôt que d'élargir la page. */
.fiche__vignettes > li { flex: 0 1 5.5rem; min-width: 0; }
.fiche__vignette { width: 100%; aspect-ratio: 16 / 9; border: 1px solid transparent; background: var(--gris-photo); }
.fiche__vignette img { width: 100%; height: 100%; object-fit: contain; }
.fiche__vignette.est-active, .fiche__vignette:hover { border-color: var(--charbon); }
.fiche__infos { position: sticky; top: 6rem; }
.fiche__titre { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); line-height: 0.95; margin-bottom: 1rem; overflow-wrap: anywhere; }
.fiche__symbole-lien { font-size: var(--t-14); text-transform: uppercase; letter-spacing: 0.1em; }
.fiche__prix-dispo { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.fiche__prix { font-family: var(--font-titre); font-size: var(--t-30); margin: 0; }
.fiche__prix-mention { font-family: var(--font-texte); font-size: var(--t-12); letter-spacing: 0.1em; text-transform: uppercase; }
.fiche__coloris { margin: 1.5rem 0; padding-top: 1.5rem; border-top: var(--trait); }
.fiche__coloris-nom { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-14); }
.fiche__coloris-compte { text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-12); font-weight: 500; }
.selecteur { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.selecteur__bouton { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid transparent; }
.selecteur__bouton .pastille { width: 1.5rem; height: 1.5rem; }
.selecteur__bouton[aria-pressed="true"], .selecteur__bouton:hover { border-color: var(--charbon); }
/* Sélecteur en miniatures de face (24/09/2026) : la même tablette que les cartes. */
.selecteur__bouton--photo {
  position: relative; width: 4.5rem; height: auto; aspect-ratio: 16 / 9; border-radius: 0;
  border: 0; background: var(--gris-photo); padding: 0.2rem;
}
.selecteur__bouton--photo img { width: 100%; height: 100%; object-fit: contain; }
.selecteur__bouton--photo::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -0.35rem; height: 2px; background: transparent; }
.selecteur__bouton--photo[aria-pressed="true"]::after { background: var(--bordeaux); }
.selecteur__bouton--photo:hover img { transform: translateY(-2px); }
.selecteur__bouton--photo img { transition: transform 0.35s var(--courbe); }
/* « En rupture » / « Épuisé » au-dessus de la miniature grisée, comme la tablette des cartes (22/10/2026) ;
   posé hors de la miniature, les rangées s'écartent pour le loger. */
.selecteur:has(.est-epuisee) { row-gap: 1.1rem; margin-top: 1.1rem; }
.selecteur__bouton.est-epuisee { position: relative; }
.selecteur__bouton.est-epuisee img { filter: grayscale(1); }
.selecteur__bouton.est-epuisee::before {
  content: attr(data-etat); position: absolute; bottom: calc(100% + 0.15rem); right: 0; z-index: 1; white-space: nowrap;
  font-size: 0.55rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rouge);
}
.fiche__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 1.5rem 0; }
.fiche__actions .bouton + .bouton, .fiche__actions .bouton + .lien-fleche { margin-left: 0; }
.fiche__note { font-size: var(--t-14); margin: -0.5rem 0 1.5rem; }
.fiche__cotes { display: flex; gap: 2rem; margin: 2rem 0 0; padding-top: 1.5rem; border-top: var(--trait); }
.fiche__cotes dt { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.fiche__cotes dd { margin: 0.2rem 0 0; font-family: var(--font-titre); font-size: var(--t-24); }
.fiche__cotes dd span:not([data-cote]) { font-family: var(--font-texte); font-size: var(--t-12); }
.fiche__histoire { padding: var(--section) 0; }
.fiche__histoire .prose { margin-left: auto; margin-right: 0; width: min(100%, 60ch); }
@media (max-width: 899px) {
  .fiche__grille { grid-template-columns: minmax(0, 1fr); }
  .fiche__infos { position: static; }
  .fiche__histoire .prose { margin-left: 0; }
}

.symbole-bande__grille { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gouttiere); align-items: center; }
.symbole-bande__img { width: min(100%, 320px); aspect-ratio: 1; object-fit: contain; }
@media (max-width: 799px) { .symbole-bande__grille { grid-template-columns: 1fr; } }

/* ---- Symboles ---------------------------------------------------------------------- */

.symbole__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gouttiere); align-items: start; padding: clamp(2rem, 5vw, 4rem) 0 var(--section); }
/* Titre d'un seul long mot (« New Dreamcatcher », « Grandmaster Five », « Thunderbird ») : la colonne gardait
   la largeur du mot, le dessin tombait à 91 px au bureau et la page défilait en largeur au téléphone
   (recette du 31/10/2026, R-08). --mot (posé par single-symboles.php) : lettres du mot le plus long ; une lettre
   de la police des titres fait au plus 0,85 em (relevé du 31/10) : le mot tient dans sa colonne, les titres
   courts gardent --t-affiche. */
.symbole__texte { container-type: inline-size; }
.symbole__texte .titre-affiche { font-size: min(var(--t-affiche), calc(100cqi / (var(--mot, 1) * 0.9))); overflow-wrap: break-word; }
.symbole__visuel { background: var(--panneau); padding: 2rem; }
.symbole__img { width: min(100%, 360px); aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.symbole__or img { width: 8rem; aspect-ratio: 1; object-fit: contain; }
.symbole__retour { padding: 3rem 0 var(--section); }
@media (max-width: 799px) { .symbole__grille { grid-template-columns: minmax(0, 1fr); } }

.grille--symboles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.symbole-carte a { display: grid; gap: 0.6rem; text-decoration: none; color: inherit; text-align: center; justify-items: center; }
.symbole-carte__visuel { display: block; width: 100%; aspect-ratio: 1; background: var(--panneau); padding: 12%; }
.symbole-carte__visuel img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--duree) var(--courbe); }
.symbole-carte a:hover img { transform: scale(1.06); }
.symbole-carte__nom { font-family: var(--font-titre); text-transform: uppercase; font-size: var(--t-18); }
.symbole-carte__compte { font-size: var(--t-12); letter-spacing: 0.1em; text-transform: uppercase; }
/* Symbole et jumeau solaire réunis (25/09/2026, 53-fiche-selection-symboles) : au survol, le dessin
   solaire et ses rayons remplacent l'optique. */
.symbole-carte__visuel--jumeaux { position: relative; }
.symbole-carte__solaire { position: absolute; inset: 12%; opacity: 0; }
.symbole-carte__solaire > *, .symbole-carte__solaire svg { display: block; width: 100%; height: 100%; }
.symbole-carte__visuel--jumeaux > *, .symbole-carte__solaire { transition: opacity 0.6s var(--courbe); }
.symbole-carte a:is(:hover, :focus-visible) .symbole-carte__visuel--jumeaux > .symbole-carte__solaire { opacity: 1; }
.symbole-carte a:is(:hover, :focus-visible) .symbole-carte__visuel--jumeaux > :not(.symbole-carte__solaire) { opacity: 0; }
.symbole-carte__types { display: block; margin-top: 0.15rem; opacity: 0.7; }

/* ---- La marque (déroulé fidèle à la page d'origine) ------------------------------ */

/* Ouverture (22/10/2026) : une photo de campagne et « Eye Five » en grand. 23/10 : photo découpée sur le duo (centré
   à toutes les largeurs), plus de EY5 dans l'angle ; le nom, essayé en minuscules puis en logotype dessiné, est en
   Almeria Pro capitales (« rétablis avec la typo en majuscule », Maxime, 15 h 05), un peu plus bas qu'à 14 h 40. */
/* Au-delà de 1 680 px de large, l'ouverture grandit (moitié de la largeur, jamais plus que l'écran) : la photo centrée
   sur le duo zoome moins sur les visages. */
.marque-ouverture { position: relative; height: min(max(840px, 50vw), calc(100svh - 4.75rem)); min-height: 560px; overflow: hidden; background: var(--charbon); color: #fff; isolation: isolate; }
.marque-ouverture::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 65%, rgb(25 22 24 / .4)); pointer-events: none; }
.marque-ouverture__photo, .marque-ouverture__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.marque-ouverture__photo { z-index: -2; }
.marque-ouverture__photo img { object-fit: cover; object-position: 50% 5%; }
/* Largeur de « EYE FIVE » ≈ 4,88 × la taille (lettres resserrées à −0,05 em, Maxime, 17 h 04 puis 17 h 20 ; 5,44 à +0,02 em) : min(12vw, 180px).
   Hauteur : 63 %, ou plus bas quand la photo, zoomée sur un écran large, met les visages plus bas (36 % de la hauteur de
   la photo = 26vw + 5 % de l'ouverture), le tout abaissé de min(3vw, 44px) (« abaisse-la un peu », Maxime, 15 h 05) ;
   jamais à moins de 0,6 em du bas. */
.marque-ouverture__titre { position: absolute; left: 50%; top: clamp(calc(63% + min(3vw, 44px)), calc(26vw + 5% + 0.35em + min(3vw, 44px)), calc(100% - 0.6em)); margin: 0; transform: translate(-50%, -50%); font-family: var(--font-titre); font-weight: 400; font-size: min(12vw, 180px); line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 26px rgb(30 14 6 / .3); }
@media (max-width: 700px) {
  .marque-ouverture { height: calc(88svh - 4.75rem); min-height: 520px; max-height: 800px; }
  .marque-ouverture__photo img { object-position: 50% 0; }
  /* Au téléphone, la photo recadrée sur elle : le nom posé bas (choix de Maxime, 22/10), sur 84 % de la largeur. */
  .marque-ouverture__titre { font-size: 15.4vw; top: auto; bottom: 17%; transform: translateX(-50%); }
}

.concept { padding: clamp(3rem, 6vw, 5rem) 0 var(--section); }
.concept__intro { font-size: var(--t-24); line-height: 1.4; max-width: 60ch; margin: 1.5rem 0 3rem; }
.concept__colonnes { display: grid; grid-template-columns: 2fr 5fr 5fr; gap: var(--gouttiere); align-items: start; }
.concept__embleme img, .concept__ey5 { width: min(100%, 140px); height: auto; color: var(--charbon); } /* height: auto : l'image porte ses dimensions */
.concept__texte p { max-width: 42ch; }
@media (max-width: 799px) { .concept__colonnes { grid-template-columns: 1fr; } }

/* Bande Supakitch : le portrait est montré en entier (jamais recadré), le titre se pose sur
   la partie noire à gauche — comme sur le site d'origine. */
.supakitch { position: relative; background: var(--charbon); color: var(--creme); }
.supakitch__fond { display: block; width: 100%; height: auto; }
.supakitch__contenu { position: absolute; inset: 0; display: flex; align-items: center; }
.supakitch__grille { display: flex; align-items: center; gap: clamp(1rem, 4vw, 4rem); }
.supakitch__titre { font-size: clamp(1.4rem, 0.4rem + 3.2vw, 3.75rem); line-height: 0.95; margin: 0; }
.supakitch__calli { width: clamp(52px, 8vw, 120px); flex: none; }
.supakitch__calli img { display: block; width: 100%; height: auto; }
@media (max-width: 799px) {
    .supakitch__fond { aspect-ratio: 3 / 2; object-fit: cover; object-position: 72% 30%; }
    .supakitch__contenu { position: static; padding: clamp(1.5rem, 5vw, 2.5rem) 0 clamp(2rem, 6vw, 3rem); }
    .supakitch__titre { font-size: clamp(2rem, 1rem + 5vw, 3rem); }
    .supakitch__calli { width: 70px; }
}

.signature { padding-top: var(--section); }
.signature__grille { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gouttiere); align-items: stretch; }
.signature__photo img { width: 100%; height: 100%; object-fit: cover; }
.signature__citation { font-family: var(--font-titre); font-size: var(--t-30); text-transform: uppercase; line-height: 1.15; max-width: 22ch; margin-bottom: 1.5rem; }
.signature__texte p { max-width: 48ch; }
@media (max-width: 799px) { .signature__grille { grid-template-columns: 1fr; } }

.galerie-marque { background: var(--panneau); padding: var(--gouttiere) 0; }
.galerie-marque__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1.5vw, 1.25rem); width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.galerie-marque__grille li { aspect-ratio: 640 / 885; overflow: hidden; }
.galerie-marque__grille img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.galerie-marque__grille li:hover img { transform: scale(1.04); }
@media (max-width: 699px) { .galerie-marque__grille { grid-template-columns: repeat(2, 1fr); } }

/* ---- Cartes d'opticiens (page des résultats de la recherche, search.php) ---------------
   La page Revendeurs a sa propre feuille, assets/css/revendeurs.css (25/09/2026). */

.grille--revendeurs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.revendeur { background: var(--panneau); padding: 1.25rem; }
.revendeur__nom { font-size: var(--t-18); }
.revendeur__adresse { font-size: var(--t-14); margin: 0.4rem 0 0; }

/* ---- Pages simples ------------------------------------------------------------------ */
/* La page Contact a sa feuille depuis le 30/09/2026 (assets/css/contact.css, chargée par page-contact.php). */

.page-simple__entete { padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.page-simple__corps { padding-bottom: var(--section); }
.liste-simple li { padding: 0.75rem 0; border-bottom: var(--trait); }

/* ---- Pied de page « Talisman » (25/09/2026) ------------------------------------------ */
/* Le symbole EY5 monumental, gravé d'un trait crème, s'illumine et s'éteint lentement : un
   « souffle » de 7 s (choix de Maxime sur le banc 50-pied-de-page/ : ni doré, ni suivi de la
   souris, aucun symbole de monture). theme.js grave le trait à l'arrivée, suspend le souffle
   hors de l'écran et centre la lueur du fond sur le symbole. */

.liste-simple li { border-color: var(--charbon); }

.pied {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bordeaux); color: var(--creme);
  padding: clamp(4.5rem, 9vw, 8rem) 0 1.5rem;
}
.pied a { color: inherit; }
.pied a:hover { color: var(--creme); }
.pied .pilule-pro { --pilule-fond: var(--creme); --pilule-encre: var(--bordeaux); }
/* Lueur douce derrière le symbole, qui respire avec lui. */
.pied::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(circle var(--rayon, 380px) at var(--lx, 80%) var(--ly, 45%), rgba(242, 239, 225, 0.08), rgba(242, 239, 225, 0) 100%);
  animation: pied-souffle-fond 7s ease-in-out infinite;
}

.talisman {
  position: absolute; z-index: -1; pointer-events: none;
  top: clamp(2.5rem, 5vw, 4.5rem);
  right: max(-2rem, calc((100vw - var(--largeur)) / 2 - 1rem));
  height: clamp(26rem, 6rem + 36vw, 50rem); aspect-ratio: 510.48 / 601.86;
}
.talisman__svg { width: 100%; height: 100%; overflow: visible; }
.talisman use { fill: none; stroke: var(--creme); stroke-linecap: round; stroke-linejoin: round; }
.talisman__gravure { stroke-opacity: 0.26; stroke-width: 1.3; }
.talisman__lueur, .talisman__vif { opacity: 0; animation: pied-souffle 7s ease-in-out infinite; }
.talisman__lueur { stroke-width: 7; }
.talisman__vif { stroke-width: 1.6; }
@keyframes pied-souffle { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } }
@keyframes pied-souffle-fond { 0%, 100% { opacity: 0.55; } 50% { opacity: 1.6; } }
html.js .pied:not(.est-visible) .talisman__svg *, html.js .pied:not(.est-visible)::before { animation-play-state: paused; }
/* Le trait se grave une fois, à l'arrivée du pied dans l'écran ; le souffle commence ensuite. */
html.js .pied .talisman__gravure { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.js .pied.est-grave .talisman__gravure { stroke-dashoffset: 0; transition: stroke-dashoffset 3.6s cubic-bezier(0.45, 0.05, 0.2, 1); }
html.js .pied:not(.est-grave) :is(.talisman__lueur, .talisman__vif) { visibility: hidden; }

.talisman__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); row-gap: clamp(2.5rem, 5vw, 4rem); }
.talisman__grille > * { grid-column: 1; }
.talisman__signature {
  margin: 0;
  font-family: var(--font-titre); font-size: clamp(2.5rem, 0.9rem + 4.6vw, 5.4rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: -0.005em;
}
.talisman__signature em { font-style: italic; }
.talisman__colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 2.5vw, 2.5rem); }
.talisman__titre {
  margin: 0 0 1rem; font-family: var(--font-texte); font-size: var(--t-12); font-weight: 500;
  line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.62;
}
.talisman__menu li, .talisman__colonne p, .talisman__reseaux { font-size: var(--t-14); line-height: 1.9; }
.talisman__colonne p { margin: 0 0 1rem; line-height: 1.55; opacity: 0.8; }
.talisman__colonne .talisman__courriel { margin-top: 0.85rem; opacity: 1; }

/* Liens : un trait qui se tire de gauche à droite au survol. */
:is(.talisman__menu, .talisman__legal, .talisman__courriel) a, .talisman__reseaux a span {
  text-decoration: none; padding-bottom: 0.1em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--courbe);
}
:is(.talisman__menu, .talisman__legal, .talisman__courriel) a:is(:hover, :focus-visible),
.talisman__reseaux a:is(:hover, :focus-visible) span { background-size: 100% 1px; }
.talisman__reseaux { display: grid; gap: 0.35rem; }
.talisman__reseaux a { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.talisman__reseaux svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* « Essayer près de chez vous » : un champ souligné et une flèche, vers /revendeurs/?ville=. */
/* « Recevoir la lettre » (plugin Eye Five — Lettre) : même champ, à côté sur grand écran. */
.talisman__formulaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.opticien, .lettre { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.55rem; max-width: 26rem; }
.lettre label { font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.lettre__piege { position: absolute; left: -5000px; }
.lettre__note { margin: 0.2rem 0 0; font-size: var(--t-12); opacity: 0.7; }
.lettre__note a { text-underline-offset: 0.2em; }
.lettre__note.est-reponse { font-size: var(--t-14); opacity: 1; }
/* Page /lettre/ : le formulaire, ou le bouton d’un lien d’e-mail (confirmer, se désinscrire). */
.lettre-page :is(.lettre, .lettre-action) { margin-top: 2rem; }
.opticien label { font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.opticien__champ { display: flex; align-items: center; border-bottom: 1px solid currentColor; }
.opticien__champ:focus-within { border-bottom-width: 2px; margin-bottom: -1px; }
:is(.opticien, .lettre) input {
  flex: 1; min-width: 0; padding: 0.65rem 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; font-size: var(--t-18); outline: none; -webkit-appearance: none; appearance: none;
}
:is(.opticien, .lettre) input::placeholder { color: inherit; opacity: 0.5; }
:is(.opticien, .lettre) input::-webkit-search-cancel-button { display: none; }
:is(.opticien, .lettre) button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; }
:is(.opticien, .lettre) button svg { width: 1.35rem; transition: transform 0.5s var(--courbe); }
:is(.opticien, .lettre) button:is(:hover, :focus-visible) svg, .opticien__champ:focus-within button svg { transform: translateX(0.35rem); }

.talisman__bas {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; flex-wrap: wrap;
  margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.25rem;
  border-top: 1px solid rgba(242, 239, 225, 0.28);
  font-size: var(--t-12); letter-spacing: 0.08em; text-transform: uppercase;
}
.talisman__bas p { margin: 0; }
.talisman__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }

/* Tablette et téléphone : le talisman passe au-dessus de la signature, dans le flux. */
@media (max-width: 999px) {
  .pied { padding-top: clamp(2.5rem, 7vw, 4rem); }
  .talisman { position: relative; top: auto; right: auto; display: block; height: clamp(15rem, 10rem + 22vw, 22rem); margin: 0 auto clamp(2rem, 6vw, 3rem); }
  .talisman__grille { grid-template-columns: minmax(0, 1fr); }
  .talisman__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talisman__gravure { stroke-width: 2; }
  .talisman__vif { stroke-width: 2.4; }
}
@media (max-width: 599px) {
  .talisman__bas { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pied::before, .talisman__lueur, .talisman__vif { animation: none; }
  .talisman__lueur, .talisman__vif { opacity: 0.45; }
  html.js .pied .talisman__gravure { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.js .pied:not(.est-grave) :is(.talisman__lueur, .talisman__vif) { visibility: visible; }
  :is(.opticien, .lettre) button svg { transition: none; }
}

/* ---- Éditeur (Gutenberg) ---------------------------------------------------------- */

.editor-styles-wrapper { background: var(--blanc); color: var(--charbon); font-family: var(--font-texte); }
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3 { font-family: var(--font-titre); text-transform: uppercase; font-weight: 400; }

/* Diptyque configurable : mêmes variantes que le banc 136, sur ordinateur seulement. */
/* Alternance : les slogans restent dans les caches. Les photos portent seulement leur catégorie.
   Sans JS, sur téléphone ou en mouvement réduit, les deux photos restent directement accessibles. */
[data-animation="alternee"] .revele .tuile-visuels { clip-path: none; }
[data-animation="alternee"] .revele::after { display: none; }
[data-animation="alternee"] .revele .revele__masque { opacity: 0; visibility: hidden; transform: none; transition: none; color: transparent; -webkit-text-fill-color: transparent; }
[data-animation="alternee"] .revele .revele__texte,
[data-animation="alternee"] .revele:has(.diaporama__vue.est-active[data-symbole-incruste]) .revele__texte { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; }
[data-animation="alternee"] .revele__phrase { display: none; }
[data-animation="alternee"] .revele .bouton { background: var(--panneau); color: var(--bordeaux); border-color: transparent; }
[data-animation="alternee"] .revele .bouton:hover { background: var(--bordeaux); color: var(--panneau); }
[data-animation="alternee"] .revele .diaporama__traits { opacity: 0; pointer-events: none; }
@media (max-width:899px) {
  html.js [data-animation="alternee"] .histoire__scenes { grid-auto-rows: auto; }
  html.js [data-animation="alternee"] .revele { position: relative; top: auto; }
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference) {
  html.js [data-animation="alternee"] .revele::before { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--panneau); pointer-events: none; }
  html.js [data-animation="alternee"] .revele .revele__masque { visibility: visible; }
  html.js [data-animation="alternee"] .revele:nth-child(1)::before,
  html.js [data-animation="alternee"] .revele:nth-child(1) .revele__masque { clip-path: inset(0 0 calc(var(--dip-alternance, 0) * 100%) 0); }
  html.js [data-animation="alternee"] .revele:nth-child(2)::before,
  html.js [data-animation="alternee"] .revele:nth-child(2) .revele__masque { clip-path: inset(calc((1 - var(--dip-alternance, 0)) * 100%) 0 0 0); }
  html.js [data-animation="alternee"] .revele:nth-child(1) .revele__masque { opacity: clamp(0, calc((0.3 - var(--dip-alternance, 0)) / 0.3), 1); }
  html.js [data-animation="alternee"] .revele:nth-child(2) .revele__masque { opacity: clamp(0, calc((var(--dip-alternance, 0) - 0.7) / 0.3), 1); }
  html.js [data-animation="alternee"] .revele .revele__masque:not([style*="background-image"]) { color: var(--bordeaux); -webkit-text-fill-color: var(--bordeaux); }
}
@media (min-width:900px) {
  [data-animation="asymetrique"] .revele:nth-child(2) { --o:1; --q:1; }
  [data-animation="inversee"] .revele:nth-child(2) .tuile-visuels { clip-path:none; }
  [data-animation="inversee"] .revele:nth-child(2)::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--panneau); clip-path:inset(calc(var(--o) * 50%)); }
  [data-animation="miroir"] .revele:nth-child(1) .tuile-visuels { clip-path:inset(0 0 0 calc((1 - var(--o)) * 100%)); }
  [data-animation="miroir"] .revele:nth-child(2) .tuile-visuels { clip-path:inset(0 calc((1 - var(--o)) * 100%) 0 0); }
  [data-animation="croisee"] .revele:nth-child(1) .tuile-visuels { clip-path:inset(0 0 calc((1 - var(--o)) * 100%) 0); }
  [data-animation="croisee"] .revele:nth-child(2) .tuile-visuels { clip-path:inset(calc((1 - var(--o)) * 100%) 0 0 0); }
  [data-animation="iris"] .revele:nth-child(2) .tuile-visuels { clip-path:circle(calc(var(--o) * 71%) at 50% 50%); }
}