/* =====================================================================
   LABORATOIRE VECTEUR — FEUILLE DE STYLE COMMUNE
   ---------------------------------------------------------------------
   Toutes les pages du site utilisent ce fichier.
   Concept : « Verre et mesure ». Une grille précise, alignée à gauche,
   beaucoup d'air, et des données techniques présentées comme sur une
   fiche de laboratoire. Les cartes de verres (schémas des zones de
   vision) sont la signature visuelle du site.

   Sommaire
     1. Charte : couleurs, polices, espacements
     2. Base
     3. Typographie
     4. Mise en page
     5. Boutons et liens
     6. En-tête et menu
     7. Composants (fiches, tableaux, cartes de verres, OKIO…)
     8. Sections sombres (Vecteur Intelligence)
     9. Pied de page
    10. Petits écrans
   ===================================================================== */


/* =====================================================================
   1. CHARTE : COULEURS, POLICES, ESPACEMENTS
   Modifiez une valeur ici : elle change sur tout le site.
   ===================================================================== */
:root {
  color-scheme: light;

  /* Les 5 couleurs de la charte (issues du logo et d'OKIO) */
  --blanc-optique: #F4F7F7;  /* fond : la clarté d'un verre propre        */
  --abysse:        #0E2229;  /* texte et nuit : la profondeur, la précision */
  --petrole:       #40646E;  /* marque et laboratoire (triangle du logo)  */
  --bleu-verre:    #7FADB9;  /* lumière, verres et traitements (logo)      */
  --bordeaux:      #7A2432;  /* signature : Vecteur Intelligence, OKIO, action principale */

  /* Nuances de travail, dérivées des 5 couleurs (ne pas en ajouter d'autres) */
  --papier:        #FFFFFF;
  --brume:         #E4EDEF;  /* fond de panneau clair, teinte de bleu verre */
  --texte-doux:    #4A5F66;  /* texte secondaire (contraste AA sur blanc)  */
  --filet:         #CCDADE;  /* filets et bordures                         */
  --nuit-2:        #16343D;  /* second ton des sections sombres            */
  --texte-nuit:    #C6D6DA;  /* texte secondaire sur fond sombre           */
  --bordeaux-clair:#E8A3AE;  /* bordeaux lisible sur fond sombre           */

  /* Les 4 polices de la charte, chacune pour une manière de parler */
  --f-titre:  "Archivo", "Helvetica Neue", Arial, sans-serif;        /* la voix du laboratoire : titres, affirmations */
  --f-texte:  "Jost", "Futura", "Avenir Next", "Segoe UI", sans-serif; /* la voix claire : texte courant, interface, OKIO */
  --f-recit:  "Source Serif 4", Georgia, "Times New Roman", serif;   /* la voix humaine : récits, témoignages, santé */
  --f-mesure: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* la voix de la mesure : chiffres techniques */

  /* Échelle typographique (rapport 1,25) */
  --t-xs: 0.8125rem;  /* 13 px */
  --t-s:  0.9375rem;  /* 15 px */
  --t-m:  1.0625rem;  /* 17 px : texte courant */
  --t-l:  1.3125rem;  /* 21 px */
  --t-xl: 1.6875rem;  /* 27 px */
  --t-2xl: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-3xl: clamp(2.2rem, 5vw, 3.75rem);

  /* Espacements */
  --largeur-max: 1240px;
  --gouttiere: clamp(18px, 4.5vw, 64px);
  --section: clamp(72px, 10vw, 136px);
  --rayon: 14px;
  --pilule: 999px;
}


/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc-optique);
  color: var(--abysse);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--bleu-verre); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bleu-verre); color: var(--abysse); }

.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--abysse); color: var(--papier); padding: 10px 16px; border-radius: 8px;
}
.lien-evitement:focus { top: 12px; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* =====================================================================
   3. TYPOGRAPHIE
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-stretch: 125%;            /* titres étirés, comme le logotype */
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); font-weight: 400; line-height: 1.2; }
h4 { font-size: var(--t-m); font-weight: 500; font-stretch: 112%; letter-spacing: 0; }
h1 strong, h2 strong { font-weight: 500; }

p { margin: 0; max-width: 64ch; }
p + p { margin-top: 1em; }

.chapeau { font-size: var(--t-l); line-height: 1.5; color: var(--texte-doux); max-width: 56ch; }
.recit { font-family: var(--f-recit); font-size: 1.125rem; line-height: 1.75; }
.recit p { max-width: 68ch; }
.petit { font-size: var(--t-s); color: var(--texte-doux); }
.mesure { font-family: var(--f-mesure); font-size: 0.92em; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.liste li { padding-left: 22px; position: relative; max-width: 62ch; }
.liste li::before {
  /* petit triangle du logo Vecteur en guise de puce */
  content: ""; position: absolute; left: 2px; top: 0.62em;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 9px solid var(--bleu-verre);
}


/* =====================================================================
   4. MISE EN PAGE
   ===================================================================== */
.contenu { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--section); }
.section.serree { padding-block: calc(var(--section) * 0.6); }
.section + .section.filet-haut { border-top: 1px solid var(--filet); }
.fond-papier { background: var(--papier); }
.fond-brume { background: var(--brume); }

.entete-section { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 780px; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.grille-2.centre { align-items: center; }
.grille-2-1 { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.grille-1-2 { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.pile { display: grid; gap: 20px; align-content: start; }
.pile-l { display: grid; gap: 32px; align-content: start; }
.grille-2 > *, .grille-2-1 > *, .grille-1-2 > *, .grille-3 > *, .grille-4 > * { min-width: 0; }

/* Fil d'Ariane */
.ariane { font-size: var(--t-xs); color: var(--texte-doux); padding-top: 28px; }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ariane li + li::before { content: "/"; margin-right: 6px; color: var(--filet); }
.ariane a { text-decoration: none; }
.ariane a:hover { color: var(--petrole); text-decoration: underline; }

/* En-tête de page intérieure */
.titre-page { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 7vw, 88px); }
.titre-page .contenu > .grille-2-1 { align-items: end; }
.titre-page h1 { margin-top: 18px; }
.titre-page .chapeau { margin-top: 24px; }


/* =====================================================================
   5. BOUTONS ET LIENS
   ===================================================================== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: var(--pilule); border: 1.5px solid var(--abysse);
  font-family: var(--f-texte); font-size: var(--t-s); font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; background: transparent; color: var(--abysse);
  transition: background-color .2s, color .2s, border-color .2s;
}
.bouton:hover { background: var(--abysse); color: var(--papier); }
.bouton.principal { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--papier); }
.bouton.principal:hover { background: var(--abysse); border-color: var(--abysse); }
.bouton.plein { background: var(--abysse); color: var(--papier); }
.bouton.plein:hover { background: var(--petrole); border-color: var(--petrole); }
.rangee-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

.lien-fort { font-weight: 500; color: var(--petrole); text-decoration: underline; text-decoration-color: var(--bleu-verre); text-decoration-thickness: 2px; }
.lien-fort:hover { color: var(--abysse); text-decoration-color: var(--abysse); }


/* =====================================================================
   6. EN-TÊTE ET MENU
   ===================================================================== */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(244, 247, 247, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--filet);
}
.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }

/* Logo horizontal : le V officiel + le logotype officiel */
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marque svg { width: 26px; height: auto; }
.marque img { width: 118px; height: auto; }

.menu { display: flex; align-items: center; gap: 28px; }
.menu > ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.menu > ul a { white-space: nowrap; text-decoration: none; font-size: var(--t-s); padding-block: 6px; border-bottom: 1.5px solid transparent; }
.menu > ul a:hover, .menu > ul a[aria-current="page"] { border-bottom-color: var(--bleu-verre); }
.menu .rangee-boutons { gap: 10px; flex-wrap: nowrap; }
.menu .bouton { white-space: nowrap; min-height: 40px; padding: 8px 18px; font-size: var(--t-xs); }
.bouton-menu {
  display: none; min-height: 42px; padding: 8px 18px; border-radius: var(--pilule);
  border: 1.5px solid var(--abysse); background: transparent; color: var(--abysse);
  font: 500 var(--t-s) var(--f-texte); cursor: pointer;
}


/* =====================================================================
   7. COMPOSANTS
   ===================================================================== */

/* --- Héros de l'accueil --- */
.heros { padding-block: clamp(40px, 7vw, 96px) clamp(64px, 9vw, 120px); }
.heros .grille-2-1 { align-items: center; grid-template-columns: 1.1fr 1fr; }
.heros h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); }
.heros .chapeau { margin-top: 28px; }

.portes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; max-width: 600px; }
.porte {
  display: grid; gap: 4px; padding: 20px 22px; text-decoration: none;
  border: 1.5px solid var(--abysse); border-radius: var(--rayon);
  transition: background-color .2s, color .2s;
}
.porte strong { font-family: var(--f-titre); font-stretch: 112%; font-weight: 500; font-size: var(--t-m); }
.porte span { font-size: var(--t-s); color: var(--texte-doux); }
.porte:hover { background: var(--abysse); color: var(--papier); }
.porte:hover span { color: var(--texte-nuit); }

/* --- Carte de verre (schéma des zones de vision) --- */
.carte-verre { margin: 0; }
.carte-verre svg { width: 100%; height: auto; overflow: visible; }
.carte-verre figcaption { margin-top: 14px; font-size: var(--t-xs); color: var(--texte-doux); }
.carte-verre .lentille { fill: var(--papier); stroke: var(--abysse); stroke-width: 1.2; }
.carte-verre .flou { fill: var(--bleu-verre); fill-opacity: 0.22; }
.carte-verre .net { fill: var(--papier); }
.carte-verre .iso { fill: none; stroke: var(--petrole); stroke-width: 1; }
.carte-verre .repere { fill: none; stroke: var(--abysse); stroke-width: 1.1; }
.carte-verre .defocus { fill: var(--bleu-verre); fill-opacity: 0.5; }
.carte-verre text { font-family: var(--f-mesure); font-size: 12px; fill: var(--abysse); letter-spacing: 0.04em; }
.carte-verre .annot { fill: var(--texte-doux); font-size: 13px; }
.carte-verre .trait-annot { stroke: var(--texte-doux); stroke-width: 0.8; stroke-dasharray: 2 3; fill: none; }
@media (prefers-reduced-motion: no-preference) {
  .carte-verre.anime .iso { stroke-dasharray: 900; stroke-dashoffset: 900; animation: tracer 2.2s cubic-bezier(.3,.6,.2,1) forwards; }
  .carte-verre.anime .iso.k2 { animation-delay: .15s; }
  .carte-verre.anime .iso.k3 { animation-delay: .3s; }
  .carte-verre.anime .iso.k4 { animation-delay: .45s; }
}
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* --- Étiquette de sachet : les faits clés, comme sur l'étiquette d'un verre --- */
.etiquette {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1.5px solid var(--abysse); border-radius: var(--rayon); background: var(--papier);
}
.etiquette > div { padding: 18px 20px; display: grid; gap: 4px; align-content: start; }
.etiquette > div + div { border-left: 1px solid var(--filet); }
.etiquette dt { font-size: var(--t-xs); color: var(--texte-doux); }
.etiquette dd { margin: 0; font-family: var(--f-mesure); font-size: var(--t-l); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.etiquette dd small { display: block; font-family: var(--f-texte); font-size: var(--t-xs); font-weight: 400; color: var(--texte-doux); letter-spacing: 0; }

/* --- Liste des familles de verres --- */
.familles { border-top: 1.5px solid var(--abysse); }
.famille {
  display: grid; grid-template-columns: 92px 1.1fr 1.3fr 1.4fr; gap: 28px; align-items: center;
  padding-block: 26px; border-bottom: 1px solid var(--filet); text-decoration: none;
}
.famille .mini { width: 92px; }
.famille h3 { font-size: var(--t-xl); }
.famille p { color: var(--texte-doux); }
.famille .gamme { font-family: var(--f-mesure); font-size: var(--t-xs); color: var(--abysse); }
.famille:hover h3 { color: var(--petrole); }

/* --- Fiche produit (grille de cartes de verres) --- */
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.produit {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 24px;
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon);
  text-decoration: none; transition: border-color .2s;
}
.produit:hover { border-color: var(--abysse); }
.produit .carte-verre { max-width: 168px; }
.produit h3 { font-size: var(--t-l); }
.produit p { font-size: var(--t-s); color: var(--texte-doux); }
.produit .voir { font-size: var(--t-s); font-weight: 500; color: var(--petrole); }

/* --- Fiche technique (tableau clé / valeur) --- */
.fiche { margin: 0; border-top: 1.5px solid var(--abysse); }
.fiche > div { display: grid; grid-template-columns: minmax(130px, 0.8fr) 2fr; gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--filet); }
.fiche dt { font-size: var(--t-s); color: var(--texte-doux); }
.fiche dd { margin: 0; }
.fiche .mesure { font-size: 0.95rem; }

/* --- Tableaux (comparatif, compatibilités) --- */
.defile { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--papier); }
table.tableau { width: 100%; border-collapse: collapse; min-width: 680px; font-size: var(--t-s); }
.tableau caption { text-align: left; padding: 16px 20px 0; font-size: var(--t-xs); color: var(--texte-doux); caption-side: bottom; padding-bottom: 16px; }
.tableau th, .tableau td { position: relative; padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau thead th { font-family: var(--f-titre); font-stretch: 112%; font-weight: 500; font-size: var(--t-s); border-bottom: 1.5px solid var(--abysse); white-space: nowrap; }
.tableau tbody th { font-weight: 500; }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau .mesure { white-space: nowrap; }
.tableau .oui, .tableau .non { font-family: var(--f-mesure); text-align: center; }
.tableau .oui::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--petrole); vertical-align: -1px; }
.tableau .non::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--filet); vertical-align: -1px; }
.tableau .ligne-vedette { background: var(--brume); }

/* --- Points clés (texte court, aligné sur une grille) --- */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 40px; }
.point { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--filet); }
.point h3 { font-size: var(--t-m); font-weight: 500; font-stretch: 112%; }
.point p { font-size: var(--t-s); color: var(--texte-doux); }

/* --- Citation / témoignage --- */
.temoignage { margin: 0; display: grid; gap: 18px; }
.temoignage p { font-family: var(--f-recit); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.45; font-weight: 400; max-width: 34ch; }
.temoignage footer { font-size: var(--t-s); color: var(--texte-doux); }
.temoignage footer strong { color: var(--abysse); font-weight: 500; }

/* --- Chiffres clés de Vecteur Intelligence --- */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(198, 214, 218, 0.28); }
/* Dans le HTML, l'intitulé (dt) précède le chiffre (dd) ; on affiche le chiffre en premier. */
.chiffres { margin: 0; }
.chiffres > div { padding: 22px 22px 0 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.chiffres > div + div { padding-left: 22px; border-left: 1px solid rgba(198, 214, 218, 0.28); }
.chiffres dd { margin: 0; font-family: var(--f-mesure); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; color: var(--papier); font-variant-numeric: tabular-nums; }
.chiffres dt { font-size: var(--t-s); color: var(--texte-nuit); }

/* --- Étapes numérotées (seulement quand l'ordre compte vraiment) --- */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px; padding-block: 22px; border-top: 1px solid var(--filet); }
.etapes li:last-child { border-bottom: 1px solid var(--filet); }
.etapes li::before { content: counter(etape, decimal-leading-zero); grid-row: span 2; font-family: var(--f-mesure); font-size: var(--t-s); color: var(--petrole); padding-top: 3px; }
.etapes strong { font-weight: 500; }
.etapes p { font-size: var(--t-s); color: var(--texte-doux); }

/* --- OKIO --- */
.okio { margin: 0; }
.okio img { width: 100%; height: auto; }
.okio-bulle {
  position: relative; display: grid; gap: 6px; padding: 18px 22px;
  background: var(--papier); border: 1.5px solid var(--abysse); border-radius: 18px;
  font-size: var(--t-s); max-width: 34ch;
}
.okio-bulle strong { font-family: var(--f-titre); font-stretch: 112%; font-weight: 500; }
.avec-okio { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 28px; align-items: end; }

/* --- Pastilles de sujets --- */
.sujets { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sujets a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--filet); border-radius: var(--pilule); background: var(--papier);
  text-decoration: none; font-size: var(--t-s);
}
.sujets a:hover { border-color: var(--abysse); }

/* --- Nuancier de teintes --- */
.nuancier { display: grid; gap: 34px; }
.famille-teintes h3 { font-size: var(--t-m); font-weight: 500; font-stretch: 112%; margin-bottom: 14px; }
.teintes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.teinte { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 8px; background: var(--papier); border: 1px solid var(--filet); border-radius: 10px; }
.teinte i { width: 34px; height: 34px; border-radius: 50%; background: var(--c, var(--bleu-verre)); box-shadow: inset 0 0 0 1px rgba(14, 34, 41, 0.12); }
.teinte span { font-size: var(--t-xs); line-height: 1.3; }
.teinte .mesure { display: block; color: var(--texte-doux); }

/* --- Coupe de l'antireflet multicouches --- */
.empilement { display: grid; gap: 0; border: 1.5px solid var(--abysse); border-radius: var(--rayon); overflow: hidden; background: var(--papier); }
.couche { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; border-bottom: 1px solid var(--filet); }
.couche:last-child { border-bottom: 0; }
.couche .materiau { display: grid; align-content: center; padding: 12px 16px; background: var(--fond-couche, var(--brume)); font-family: var(--f-mesure); font-size: var(--t-s); font-weight: 500; }
.couche .role { padding: 12px 18px; font-size: var(--t-s); }
.couche .role strong { font-weight: 500; }
.couche.fine .materiau { padding-block: 8px; }

/* --- Formulaires --- */
.formulaire { display: grid; gap: 18px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: var(--t-s); font-weight: 500; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--abysse);
  background: var(--papier); border: 1px solid var(--filet); border-radius: 10px;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--bleu-verre); outline-offset: 1px; border-color: var(--petrole); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.erreur { color: var(--bordeaux); font-size: var(--t-s); }
.retour-formulaire { padding: 16px 18px; border-radius: 10px; background: var(--brume); font-size: var(--t-s); }

/* --- Recherche d'opticiens --- */
.recherche { display: flex; gap: 10px; flex-wrap: wrap; }
.recherche input { flex: 1 1 260px; }
.resultats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.resultat { padding: 20px 22px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); display: grid; gap: 4px; }
.resultat strong { font-family: var(--f-titre); font-stretch: 112%; font-weight: 500; }
.resultat .mesure { font-size: var(--t-xs); color: var(--texte-doux); }

/* --- Brèves du journal --- */
.breves { display: grid; gap: 0; border-top: 1.5px solid var(--abysse); }
.breve { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--filet); }
.breve time { font-family: var(--f-mesure); font-size: var(--t-xs); color: var(--texte-doux); padding-top: 4px; }
.breve h3 { font-size: var(--t-l); margin-bottom: 8px; }
.breve p { color: var(--texte-doux); font-size: var(--t-s); }

/* --- Questions fréquentes --- */
.faq { border-top: 1.5px solid var(--abysse); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--f-titre); font-stretch: 112%; font-weight: 400; font-size: var(--t-l); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; margin-top: -4px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid var(--petrole);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .reponse { padding: 0 0 26px; display: grid; gap: 12px; }
.faq .reponse p { max-width: 70ch; }

/* --- Emplacement photo (à remplacer par vos photos) --- */
.photo { margin: 0; display: grid; gap: 10px; }
.photo .cadre {
  aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--rayon); overflow: hidden;
  background: var(--nuit-2); display: grid; place-items: center; color: var(--texte-nuit);
  font-size: var(--t-s); text-align: center; padding: 24px;
}
.photo .cadre img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { font-size: var(--t-xs); color: var(--texte-doux); }

/* --- Vidéo --- */
.video { border-radius: var(--rayon); overflow: hidden; background: var(--abysse); aspect-ratio: 16 / 9; max-width: 100%; }
.video video { width: 100%; height: 100%; object-fit: cover; }

/* --- Encadré d'avertissement santé --- */
.alerte {
  padding: 22px 24px; border-radius: var(--rayon); background: var(--papier);
  border: 1.5px solid var(--bordeaux); display: grid; gap: 10px;
}
.alerte h3 { font-size: var(--t-m); font-weight: 500; font-stretch: 112%; color: var(--bordeaux); }


/* =====================================================================
   8. SECTIONS SOMBRES (VECTEUR INTELLIGENCE, ESPACE OPTICIENS)
   ===================================================================== */
.nuit { background: var(--abysse); color: var(--papier); }
.nuit .chapeau, .nuit .petit, .nuit .point p, .nuit .etapes p { color: var(--texte-nuit); }
.nuit .point, .nuit .etapes li { border-color: rgba(198, 214, 218, 0.28); }
.nuit .etapes li:last-child { border-color: rgba(198, 214, 218, 0.28); }
.nuit .etapes li::before { color: var(--bleu-verre); }
.nuit .bouton { border-color: var(--papier); color: var(--papier); }
.nuit .bouton:hover { background: var(--papier); color: var(--abysse); }
.nuit .bouton.principal { background: var(--bordeaux); border-color: var(--bordeaux); }
.nuit .bouton.principal:hover { background: var(--papier); border-color: var(--papier); color: var(--abysse); }
.nuit .lien-fort { color: var(--bleu-verre); text-decoration-color: var(--bleu-verre); }
.nuit .lien-fort:hover { color: var(--papier); }
.nuit .okio-bulle { background: var(--nuit-2); border-color: var(--bleu-verre); color: var(--papier); }
.nuit .ariane, .nuit .ariane a { color: var(--texte-nuit); }
.nuit .carte-verre .lentille { fill: var(--nuit-2); stroke: var(--bleu-verre); }
.nuit .carte-verre .net { fill: var(--nuit-2); }
.nuit .carte-verre .iso { stroke: var(--bleu-verre); }
.nuit .carte-verre text { fill: var(--papier); }
.signature {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 6px 14px 6px 10px; border-radius: var(--pilule);
  background: var(--bordeaux); color: var(--papier); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.02em;
}
.signature svg { width: 12px; }
.ia-produits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ia-produit { padding: 24px; border: 1px solid rgba(198, 214, 218, 0.35); border-radius: var(--rayon); display: grid; gap: 8px; align-content: start; }
.ia-produit h3 { font-size: var(--t-l); }
.ia-produit p { font-size: var(--t-s); color: var(--texte-nuit); }


/* =====================================================================
   9. PIED DE PAGE
   ===================================================================== */
.pied { background: var(--abysse); color: var(--texte-nuit); padding-block: 80px 36px; font-size: var(--t-s); }
.pied .grille-pied { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.pied h2 { font-family: var(--f-texte); font-stretch: 100%; font-size: var(--t-s); font-weight: 500; color: var(--papier); letter-spacing: 0.02em; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--papier); text-decoration: underline; }
.pied .marque img { width: 128px; }
.pied address { font-style: normal; margin-top: 22px; line-height: 1.7; }
.pied .labels { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(198, 214, 218, 0.22); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--t-xs); }
.pied .bas { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--t-xs); }


/* =====================================================================
   10. PETITS ÉCRANS
   ===================================================================== */
@media (max-width: 1220px) {
  .bouton-menu { display: inline-flex; align-items: center; }
  .menu {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 24px var(--gouttiere) 32px; background: var(--blanc-optique);
    border-bottom: 1px solid var(--filet); max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .menu.ouvert { display: flex; }
  .menu > ul { flex-direction: column; gap: 2px; }
  .menu > ul a { display: block; font-size: var(--t-l); font-family: var(--f-titre); font-stretch: 112%; padding-block: 10px; border-bottom: 1px solid var(--filet); }
  .menu .rangee-boutons { flex-wrap: wrap; }
  .menu .bouton { min-height: 48px; font-size: var(--t-s); }
}
@media (max-width: 960px) {
  .grille-2, .grille-2-1, .grille-1-2 { grid-template-columns: 1fr; }
  .grille-3 { grid-template-columns: 1fr 1fr; }
  .grille-4 { grid-template-columns: 1fr 1fr; }
  .etiquette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etiquette > div + div { border-left: 0; }
  .etiquette > div { border-bottom: 1px solid var(--filet); }
  .etiquette > div:nth-child(even) { border-left: 1px solid var(--filet); }
  .etiquette > div:last-child { border-bottom: 0; }
  .famille { grid-template-columns: 72px 1fr; gap: 6px 20px; }
  .famille .mini { width: 72px; grid-row: span 3; align-self: start; }
  .pied .grille-pied { grid-template-columns: 1fr 1fr; }
  .heros .grille-2-1 { grid-template-columns: 1fr; }
  .heros .carte-verre { max-width: 520px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .portes { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr; }
  .chiffres > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(198, 214, 218, 0.28); }
  .chiffres > div { padding: 18px 0; }
  .fiche > div { grid-template-columns: 1fr; gap: 4px; }
  .breve { grid-template-columns: 1fr; gap: 6px; }
  .champs-2 { grid-template-columns: 1fr; }
  .ia-produits { grid-template-columns: 1fr; }
  .avec-okio { grid-template-columns: 110px 1fr; gap: 16px; }
  .couche { grid-template-columns: 104px 1fr; }
  .pied .grille-pied { grid-template-columns: 1fr; }
  .entete .contenu { height: 68px; }
  .menu { top: 68px; }
  .marque img { width: 104px; }
}

/* Compléments : vignettes larges (schémas de l'œil) et verre solaire */
.produit .carte-verre.large { max-width: none; }
.carte-verre.solaire .net { fill: var(--petrole); fill-opacity: 0.55; }
.carte-verre.solaire .iso { stroke: var(--abysse); }
.schema-oeil svg { overflow: visible; }
.sujets-statique { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 18px; border: 1px solid var(--filet); border-radius: var(--pilule); font-size: var(--t-s); }


/* =====================================================================
   11. VERSION 2 : PLUS CLASSÉ, LA GRAVURE, OKIO, LA COMMANDE
   Ces règles complètent et remplacent certaines règles plus haut.
   ===================================================================== */
:root {
  --rayon: 4px;          /* angles plus nets, plus classés */
  --rayon-bouton: 2px;
}
.bouton { border-radius: var(--rayon-bouton); min-height: 50px; padding: 13px 28px; letter-spacing: 0.02em; }
.menu .bouton { border-radius: var(--rayon-bouton); }
.porte, .produit, .resultat, .teinte, .defile, .alerte, .etiquette, .empilement { border-radius: var(--rayon); }
.sujets a, .sujets-statique { border-radius: var(--rayon-bouton); }

/* --- En-tête sombre (accueil, Vecteur Intelligence) --- */
.marque .wm-clair { display: none; }
body.tete-sombre .entete { background: rgba(14, 34, 41, 0.92); border-bottom-color: rgba(198, 214, 218, 0.14); color: var(--papier); }
body.tete-sombre .entete .wm-sombre { display: none; }
body.tete-sombre .entete .wm-clair { display: block; }
body.tete-sombre .entete .bouton { border-color: rgba(255, 255, 255, 0.6); color: var(--papier); }
body.tete-sombre .entete .bouton:hover { background: var(--papier); color: var(--abysse); }
body.tete-sombre .entete .bouton.principal { border-color: var(--bordeaux); }
body.tete-sombre .bouton-menu { border-color: var(--papier); color: var(--papier); }
@media (max-width: 1220px) {
  body.tete-sombre .menu { background: var(--abysse); border-color: rgba(198, 214, 218, 0.14); }
  body.tete-sombre .menu > ul a { border-color: rgba(198, 214, 218, 0.14); }
}

/* --- La gravure : signature visuelle --- */
.gravure { margin: 0; display: grid; gap: 12px; }
.gravure .cadre-gravure { position: relative; background: var(--abysse); border-radius: var(--rayon); overflow: hidden; }
.gravure .gravure-toile { display: block; width: 100%; aspect-ratio: 4 / 3; color: var(--bleu-verre); }
.gravure.claire .cadre-gravure { background: var(--papier); border: 1px solid var(--filet); }
.gravure.claire .gravure-toile { color: var(--petrole); }
.gravure.solaire .cadre-gravure { background: linear-gradient(180deg, #2B4148 0%, #0E2229 100%); }
.gravure .legende-gravure { position: absolute; left: 16px; bottom: 12px; font-family: var(--f-mesure); font-size: 11px; color: var(--texte-nuit); letter-spacing: 0.04em; }
.gravure figcaption { font-size: var(--t-xs); color: var(--texte-doux); }
.produit .gravure { max-width: none; }
.produit .gravure .gravure-toile { aspect-ratio: 16 / 10; }

/* --- Héros de l'accueil --- */
.heros-v2 { position: relative; background: var(--abysse); color: var(--papier); overflow: hidden; }
.heros-v2 .fond-gravure { position: absolute; inset: 0 0 0 28%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.heros-v2 .fond-gravure canvas { width: 100%; height: 100%; display: block; color: var(--bleu-verre); }
.heros-v2 .contenu { position: relative; padding-block: clamp(72px, 12vw, 168px) clamp(64px, 9vw, 120px); pointer-events: none; }
.heros-v2 .contenu a, .heros-v2 .contenu button { pointer-events: auto; }
.heros-v2 h1 { font-size: clamp(2.5rem, 6.2vw, 5.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; max-width: 13ch; }
.heros-v2 h1 span { display: block; }
.heros-v2 h1 span + span { color: var(--bleu-verre); }
.heros-v2 h1 span:last-child { color: var(--papier); }
.heros-v2 .chapeau { color: var(--texte-nuit); margin-top: 32px; max-width: 46ch; }
.heros-v2 .rangee-boutons { margin-top: 44px; }
.heros-v2 .bouton { border-color: rgba(255, 255, 255, 0.65); color: var(--papier); }
.heros-v2 .bouton:hover { background: var(--papier); color: var(--abysse); }
.heros-v2 .bouton.principal { border-color: var(--bordeaux); }
.heros-v2 .indice-gravure { margin-top: 56px; font-family: var(--f-mesure); font-size: 11px; color: var(--texte-nuit); letter-spacing: 0.04em; max-width: 44ch; }

/* --- Trois engagements --- */
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--abysse); }
.pilier { padding: 36px 36px 8px 0; display: grid; gap: 14px; align-content: start; }
.pilier + .pilier { padding-left: 36px; border-left: 1px solid var(--filet); }
.pilier .chiffre { font-family: var(--f-mesure); font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em; color: var(--petrole); }
.pilier h3 { font-size: var(--t-xl); font-weight: 300; }
.pilier p { color: var(--texte-doux); }

/* --- Le manifeste --- */
.manifeste { font-family: var(--f-recit); font-size: clamp(1.6rem, 3.4vw, 2.75rem); line-height: 1.28; max-width: 26ch; font-weight: 400; letter-spacing: -0.01em; }
.manifeste em { font-style: italic; color: var(--petrole); }

/* --- Familles de verres, version gravure --- */
.rangs { display: grid; gap: clamp(56px, 7vw, 96px); }
.rang { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.rang:nth-child(even) .gravure { order: 2; }
.rang h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; }
.rang .liste-verres { list-style: none; margin: 22px 0 28px; padding: 0; border-top: 1px solid var(--filet); }
.rang .liste-verres a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.rang .liste-verres a:hover { color: var(--petrole); }
.rang .liste-verres span { color: var(--texte-doux); font-size: var(--t-s); text-align: right; }

/* --- Étapes de commande (vraie séquence) --- */
.parcours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: pas; border-top: 1px solid rgba(198, 214, 218, 0.3); }
.parcours li { list-style: none; counter-increment: pas; padding: 28px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.parcours li + li { padding-left: 28px; border-left: 1px solid rgba(198, 214, 218, 0.3); }
.parcours li::before { content: counter(pas, decimal-leading-zero); font-family: var(--f-mesure); font-size: var(--t-s); color: var(--bleu-verre); }
.parcours strong { font-family: var(--f-titre); font-stretch: 112%; font-weight: 400; font-size: var(--t-l); }
.parcours p { color: var(--texte-nuit); font-size: var(--t-s); }
.parcours.clair { border-color: var(--abysse); }
.parcours.clair li + li { border-color: var(--filet); }
.parcours.clair li::before { color: var(--petrole); }
.parcours.clair p { color: var(--texte-doux); }

/* --- OKIO : la scène sur l'accueil --- */
.okio-scene { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.okio-scene .okio img { max-width: 360px; margin-inline: auto; }

/* --- OKIO : la conversation --- */
.okio-conv { display: flex; flex-direction: column; min-height: 0; background: var(--papier); }
.okio-fil { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.okio-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 92%; }
.okio-msg img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.okio-msg .okio-texte { padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--brume); font-size: var(--t-s); line-height: 1.55; }
.okio-msg .okio-texte a { color: var(--petrole); font-weight: 500; }
.okio-msg.moi { align-self: flex-end; }
.okio-msg.moi .okio-texte { background: var(--abysse); color: var(--papier); border-radius: 14px 14px 4px 14px; }
.okio-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.okio-suggestions button { font: 400 var(--t-xs) var(--f-texte); padding: 8px 12px; border: 1px solid var(--filet); border-radius: var(--rayon-bouton); background: var(--papier); color: var(--abysse); cursor: pointer; text-align: left; }
.okio-suggestions button:hover { border-color: var(--abysse); }
.okio-saisie { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--filet); }
.okio-saisie input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 1rem; border: 1px solid var(--filet); border-radius: var(--rayon-bouton); background: var(--blanc-optique); color: var(--abysse); }
.okio-saisie button { min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--rayon-bouton); background: var(--bordeaux); color: var(--papier); font: 500 var(--t-s) var(--f-texte); cursor: pointer; }
.okio-points { display: inline-flex; gap: 4px; padding: 4px 0; }
.okio-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--petrole); opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .okio-points i { animation: okio-point 1s infinite; }
  .okio-points i:nth-child(2) { animation-delay: .15s; } .okio-points i:nth-child(3) { animation-delay: .3s; }
}
@keyframes okio-point { 50% { opacity: 1; } }
[data-okio-integre] { height: 540px; border: 1px solid var(--abysse); border-radius: var(--rayon); overflow: hidden; }

/* --- OKIO : bouton flottant et panneau --- */
.okio-bouton {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px;
  background: var(--abysse); color: var(--papier); border: 1px solid rgba(127, 173, 185, 0.5); border-radius: 999px;
  font-family: var(--f-texte); text-align: left; cursor: pointer; box-shadow: 0 12px 32px rgba(14, 34, 41, 0.28);
}
.okio-bouton img { width: 44px; height: 44px; border-radius: 50%; }
.okio-bouton strong { display: block; font-weight: 500; font-size: var(--t-s); }
.okio-bouton small { display: block; font-size: var(--t-xs); color: var(--texte-nuit); }
.okio-panneau {
  position: fixed; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 41;
  width: min(410px, calc(100vw - 40px)); height: min(620px, calc(100vh - 140px));
  display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--abysse); border-radius: var(--rayon);
  box-shadow: 0 24px 60px rgba(14, 34, 41, 0.3); overflow: hidden;
}
.okio-panneau[hidden] { display: none; }
.okio-tete { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--abysse); color: var(--papier); }
.okio-tete img { width: 40px; height: 40px; border-radius: 50%; }
.okio-tete div { flex: 1; display: grid; }
.okio-tete strong { font-family: var(--f-titre); font-stretch: 125%; font-weight: 400; letter-spacing: 0.06em; }
.okio-tete small { font-size: var(--t-xs); color: var(--texte-nuit); }
.okio-fermer { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: var(--papier); border-radius: var(--rayon-bouton); padding: 6px 12px; font: 400 var(--t-xs) var(--f-texte); cursor: pointer; }
.okio-corps { flex: 1; display: flex; min-height: 0; }
.okio-corps .okio-conv { flex: 1; }
@media (max-width: 640px) {
  .okio-bouton { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-right: 16px; }
  .okio-bouton small { display: none; }
  .okio-panneau { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.okio-ouvert .okio-bouton { display: none; }
  body.okio-ouvert { overflow: hidden; }
}

/* --- Commande en ligne --- */
.commande { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.commande > * { min-width: 0; }
.etapes-commande { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.etapes-commande li { font-size: var(--t-xs); color: var(--texte-doux); padding-top: 10px; border-top: 2px solid var(--filet); }
.etapes-commande li.actif { color: var(--abysse); border-color: var(--bordeaux); font-weight: 500; }
.etapes-commande li.fait { color: var(--abysse); border-color: var(--abysse); }
.panneau-commande[hidden] { display: none; }
.panneau-commande { display: grid; gap: 28px; }
.panneau-commande h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.question-commande { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.question-commande legend { font-family: var(--f-titre); font-stretch: 112%; font-size: var(--t-l); font-weight: 400; margin-bottom: 12px; padding: 0; }
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.choix-carte { position: relative; display: grid; gap: 4px; padding: 16px 18px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); cursor: pointer; }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte strong { font-weight: 500; }
.choix-carte span { font-size: var(--t-xs); color: var(--texte-doux); }
.choix-carte:hover { border-color: var(--abysse); }
.choix-carte:has(input:checked) { border-color: var(--abysse); box-shadow: inset 0 0 0 1px var(--abysse); background: var(--brume); }
.choix-carte:has(input:focus-visible) { outline: 3px solid var(--bleu-verre); outline-offset: 2px; }
.navigation-commande { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--filet); }
.recommandation { display: grid; gap: 18px; padding: 28px; background: var(--abysse); color: var(--papier); border-radius: var(--rayon); }
.recommandation .gravure .cadre-gravure { background: var(--nuit-2); }
.recommandation h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; }
.recommandation p { color: var(--texte-nuit); }
.recommandation a { color: var(--bleu-verre); }
.recap { position: sticky; top: 100px; display: grid; gap: 16px; padding: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); }
.recap h2 { font-size: var(--t-l); font-weight: 400; }
.recap dl { margin: 0; display: grid; gap: 0; }
.recap dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--filet); font-size: var(--t-s); }
.recap dt { color: var(--texte-doux); }
.recap dd { margin: 0; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-s); }
.case input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--abysse); }
.confirmation { display: grid; gap: 20px; padding: clamp(24px, 4vw, 44px); background: var(--papier); border: 1px solid var(--abysse); border-radius: var(--rayon); }

@media (max-width: 960px) {
  .piliers { grid-template-columns: 1fr; }
  .pilier, .pilier + .pilier { padding: 28px 0 0; border-left: 0; }
  .pilier + .pilier { border-top: 1px solid var(--filet); margin-top: 28px; }
  .rang { grid-template-columns: 1fr; }
  .rang:nth-child(even) .gravure { order: 0; }
  .parcours { grid-template-columns: 1fr 1fr; }
  .parcours li:nth-child(3) { padding-left: 0; border-left: 0; }
  .okio-scene { grid-template-columns: 1fr; }
  .okio-scene .okio img { max-width: 220px; }
  .commande { grid-template-columns: 1fr; }
  .recap { position: static; }
  .heros-v2 .fond-gravure { inset: 0; opacity: 0.55; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, #000 55%); }
}
@media (max-width: 640px) {
  .parcours { grid-template-columns: 1fr; }
  .parcours li, .parcours li + li { padding: 22px 0 0; border-left: 0; }
  .etapes-commande { grid-template-columns: repeat(5, 1fr); }
  .etapes-commande li { font-size: 0; }
  .etapes-commande li.actif { font-size: var(--t-xs); grid-column: span 5; order: -1; border: 0; padding: 0; }
  [data-okio-integre] { height: 500px; }
  .recap dl > div { grid-template-columns: 1fr; gap: 2px; }
}
/* Laisse la place au bouton OKIO en bas de page sur téléphone */
@media (max-width: 640px) { .pied { padding-bottom: 110px; } main { padding-bottom: 8px; } .confirmation { margin-bottom: 72px; } }
.nuit .gravure .cadre-gravure { background: var(--nuit-2); }


/* =====================================================================
   12. VERSION 3 : EN-TÊTES GRAVÉS CLAIRS, MA CORRECTION, COMPARATIF
   ===================================================================== */

/* --- En-tête gravé clair des pages intérieures --- */
.titre-page.grave { position: relative; overflow: hidden; background: var(--blanc-optique); border-bottom: 1px solid var(--filet); }
.titre-page.grave .fond-gravure { position: absolute; inset: 0 0 0 42%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.titre-page.grave .fond-gravure canvas { width: 100%; height: 100%; display: block; color: var(--petrole); }
.titre-page.grave .contenu { position: relative; }
.titre-page.grave .ariane { padding-top: 0; }
.titre-page.grave { padding-top: 28px; }
.titre-page.grave .sujets a { background: rgba(255, 255, 255, 0.86); }
@media (max-width: 960px) {
  .titre-page.grave .fond-gravure { inset: 0; opacity: 0.35; -webkit-mask-image: none; mask-image: none; }
}

/* --- Saisie de la correction --- */
.rx { display: grid; gap: 14px; }
.rx-grille { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 20px; background: var(--abysse); color: var(--papier); border-radius: var(--rayon); }
.rx-entete { display: grid; gap: 2px; text-align: center; }
.rx-entete strong { font-weight: 500; font-size: var(--t-s); color: var(--bleu-verre); }
.rx-entete span { font-size: 11px; color: var(--texte-nuit); }
.rx-oeil { display: grid; }
.rx-oeil strong { font-family: var(--f-titre); font-stretch: 125%; font-weight: 400; font-size: var(--t-l); }
.rx-oeil span { font-size: var(--t-xs); color: var(--texte-nuit); }
.rx-mobile { display: none; }
.rx-pas { display: flex; height: 50px; border: 1px solid rgba(127, 173, 185, 0.4); border-radius: var(--rayon-bouton); overflow: hidden; background: rgba(255, 255, 255, 0.04); }
.rx-pas button { width: 38px; flex: none; border: 0; background: rgba(127, 173, 185, 0.12); color: var(--bleu-verre); font-size: 20px; cursor: pointer; touch-action: manipulation; }
.rx-pas button:hover { background: rgba(127, 173, 185, 0.26); }
.rx-pas input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--papier); text-align: center; font-family: var(--f-mesure); font-size: 1rem; }
.rx-pas input:focus { outline: 2px solid var(--bleu-verre); outline-offset: -2px; }
.rx-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rx-lien { background: none; border: 0; padding: 4px 0; font: 400 var(--t-s) var(--f-texte); color: var(--petrole); text-decoration: underline; text-decoration-color: var(--bleu-verre); cursor: pointer; }
.resume-rx { padding: 14px 18px; background: var(--brume); border-radius: var(--rayon); font-size: var(--t-s); }
.resume-rx a { color: var(--petrole); }
@media (max-width: 760px) {
  .rx-grille { grid-template-columns: 1fr 1fr; padding: 16px; }
  .rx-vide, .rx-entete { display: none; }
  .rx-oeil { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid rgba(198, 214, 218, 0.2); }
  .rx-oeil:first-of-type { border-top: 0; padding-top: 0; }
  .rx-cellule { display: grid; gap: 4px; }
  .rx-mobile { display: block; font-size: var(--t-xs); color: var(--texte-nuit); }
}

/* --- Invitation au questionnaire --- */
.invitation-ia { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 24px; background: var(--abysse); color: var(--papier); border-radius: var(--rayon); }
.invitation-ia h3 { font-size: var(--t-l); }
.invitation-ia p { color: var(--texte-nuit); font-size: var(--t-s); }
.invitation-ia .bouton { border-color: var(--papier); color: var(--papier); }
.invitation-ia .bouton:hover { background: var(--papier); color: var(--abysse); }
.invitation-ia[hidden] { display: none; }
.choix-carte.conseille::after { content: "Conseillé"; position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--bordeaux); font-weight: 500; }
.choix-carte[hidden] { display: none; }
@media (max-width: 640px) { .invitation-ia { grid-template-columns: 1fr; } }

/* --- Comprendre ma correction --- */
.explications { display: grid; gap: clamp(40px, 6vw, 72px); }
.explications[hidden] { display: none; }
.okio-verdict { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; }
.okio-verdict img { width: 72px; height: 72px; border-radius: 50%; }
.okio-verdict .okio-bulle { max-width: 60ch; font-size: var(--t-m); }
.sommaire-ametropies .sujets a { min-height: 40px; }
.carte-ametropie { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(24px, 4vw, 44px); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); scroll-margin-top: 100px; }
.carte-ametropie > * { min-width: 0; }
.carte-ametropie h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; }
.carte-ametropie h3 .mesure { font-size: 0.6em; color: var(--petrole); margin-left: 8px; white-space: nowrap; }
.carte-ametropie h4 { margin-bottom: 10px; }
.badge-niveau { display: inline-block; width: fit-content; padding: 3px 12px; border-radius: var(--rayon-bouton); background: var(--brume); color: var(--petrole); font-size: var(--t-xs); font-weight: 500; }
.schema-bascule { display: grid; gap: 16px; align-content: start; }
.bascule { display: inline-flex; width: fit-content; border: 1px solid var(--abysse); border-radius: var(--rayon-bouton); overflow: hidden; }
.bascule button { padding: 9px 16px; border: 0; background: var(--papier); color: var(--abysse); font: 500 var(--t-xs) var(--f-texte); cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--abysse); color: var(--papier); }
.schema-rayons svg { width: 100%; height: auto; display: block; }
.s-oeil { fill: var(--brume); stroke: var(--abysse); stroke-width: 1.2; }
.s-cornee { fill: var(--papier); stroke: var(--abysse); stroke-width: 1.1; }
.s-cristallin { fill: var(--bleu-verre); fill-opacity: 0.5; stroke: var(--petrole); }
.s-retine { fill: none; stroke: var(--bordeaux); stroke-width: 4; }
.s-rayon { fill: none; stroke: var(--petrole); stroke-width: 1.5; }
.s-tirets { stroke-dasharray: 4 4; opacity: 0.7; }
.s-foyer { fill: var(--bordeaux); }
.s-verre { fill: var(--bleu-verre); fill-opacity: 0.45; stroke: var(--petrole); stroke-width: 1.2; }
.s-objet { stroke: var(--abysse); stroke-width: 3; }
.s-legende { font-family: var(--f-mesure); font-size: 12px; fill: var(--texte-doux); }
.s-fort { fill: var(--abysse); font-weight: 500; }
.s-ok { fill: var(--petrole); font-weight: 500; }
.s-ko { fill: var(--bordeaux); font-weight: 500; }
.s-grille { fill: none; stroke: var(--filet); stroke-width: 1; }
.s-courbe { fill: none; stroke: var(--petrole); stroke-width: 2; }
.s-cadran { stroke: var(--abysse); stroke-width: 2.4; stroke-linecap: round; }
.s-ballon { fill: var(--bleu-verre); fill-opacity: 0.35; stroke: var(--petrole); stroke-width: 1.5; }
.s-axe { stroke: var(--bordeaux); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vision-demo { position: relative; display: grid; place-items: center; gap: 10px; min-height: 170px; padding: 24px; background: linear-gradient(180deg, #DCE7EA 0%, #F4F7F7 100%); border-radius: var(--rayon); overflow: hidden; }
.vision-demo > :not(.loin) { filter: blur(var(--flou)); transition: filter 0.9s ease; }
.corrige .vision-demo > * { filter: none; }
.vision-demo .loin { font-family: var(--f-mesure); font-size: 11px; color: var(--texte-doux); filter: none; }
.panneau-route { display: flex; gap: 18px; align-items: baseline; padding: 14px 26px; background: var(--petrole); color: var(--papier); border: 3px solid var(--papier); outline: 2px solid var(--petrole); border-radius: 6px; font-family: var(--f-titre); font-stretch: 112%; font-size: 1.8rem; }
.texte-pres { max-width: 32ch; font-family: var(--f-recit); font-size: 1rem; line-height: 1.5; color: var(--abysse); }
.vision-demo.astig svg { width: 180px; height: 180px; filter: none; }
.vision-demo.astig p { font-size: var(--t-xs); color: var(--texte-doux); text-align: center; filter: none; max-width: 40ch; }
.corrige .vision-demo.astig line { filter: none; }
.jauge { display: grid; gap: 6px; }
.jauge-zones { display: flex; font-size: 11px; color: var(--texte-doux); }
.jauge-zones span { text-align: center; }
.jauge-barre { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--brume) 0%, var(--bleu-verre) 55%, var(--petrole) 100%); }
.jauge-barre i { position: absolute; top: -6px; width: 4px; height: 20px; margin-left: -2px; background: var(--bordeaux); border-radius: 2px; }
.jauge-graduations { display: flex; justify-content: space-between; font-family: var(--f-mesure); font-size: 11px; color: var(--texte-doux); }
.cornee svg, .repere-age svg { width: 100%; max-width: 420px; height: auto; display: block; }
.epaisseurs { display: grid; gap: 10px; padding: clamp(24px, 4vw, 40px); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); }
.epaisseurs > div { display: grid; grid-template-columns: 52px 1fr 90px; gap: 14px; align-items: center; }
.epaisseurs i { height: 14px; background: var(--petrole); border-radius: 2px; }
.epaisseurs small { font-family: var(--f-mesure); font-size: 12px; color: var(--texte-doux); }
.conseil-vecteur { display: grid; gap: 28px; padding: clamp(24px, 4vw, 44px); background: var(--abysse); color: var(--papier); border-radius: var(--rayon); }
.conseil-vecteur .point { border-color: rgba(198, 214, 218, 0.28); }
.conseil-vecteur .point p { color: var(--texte-nuit); }
.conseil-vecteur .lien-fort { color: var(--bleu-verre); text-decoration-color: var(--bleu-verre); }
.conseil-vecteur .bouton { border-color: var(--papier); color: var(--papier); }
.conseil-vecteur .bouton:hover { background: var(--papier); color: var(--abysse); }
.conseil-vecteur .bouton.principal { border-color: var(--bordeaux); }
.avertissement { max-width: 70ch; }
@media (max-width: 960px) { .carte-ametropie { grid-template-columns: 1fr; } }

/* --- Comparatif des progressifs : la montée en gamme --- */
.escalier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.marche { display: grid; grid-template-rows: auto 1fr; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--filet); background: var(--papier); }
.marche .tete-marche { display: grid; gap: 4px; padding: 20px; color: var(--papier); background: var(--abysse); }
.marche:nth-child(1) .tete-marche { background: #4F7782; }
.marche:nth-child(2) .tete-marche { background: var(--petrole); }
.marche:nth-child(3) .tete-marche { background: #24434C; }
.marche:nth-child(4) .tete-marche { background: var(--abysse); }
.tete-marche .niveau { font-family: var(--f-mesure); font-size: 11px; color: var(--bleu-verre); letter-spacing: 0.04em; }
.tete-marche h4 { font-family: var(--f-titre); font-stretch: 125%; font-weight: 300; font-size: var(--t-xl); }
.tete-marche p { font-size: var(--t-xs); color: var(--texte-nuit); }
.marche .corps-marche { display: grid; align-content: start; gap: 0; padding: 6px 20px 20px; }
.marche:nth-child(1) .corps-marche { min-height: 230px; }
.marche:nth-child(2) .corps-marche { min-height: 290px; }
.marche:nth-child(3) .corps-marche { min-height: 350px; }
.marche:nth-child(4) .corps-marche { min-height: 410px; }
.corps-marche .gravure .gravure-toile { aspect-ratio: 16 / 9; }
.corps-marche .gravure { margin: 14px 0 6px; }
.atout { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--filet); font-size: var(--t-s); }
.atout::before { content: "+"; font-family: var(--f-mesure); color: var(--bordeaux); font-weight: 500; }
.atout.base { color: var(--texte-doux); }
.atout.base::before { content: "\2713"; color: var(--petrole); }
.corps-marche .voir { margin-top: 16px; font-size: var(--t-s); font-weight: 500; color: var(--petrole); }
.couronne-ia { display: grid; grid-template-columns: 2fr 2fr; gap: 14px; margin-top: 14px; }
.couronne-ia > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: var(--bordeaux); color: var(--papier); border-radius: var(--rayon); }
.couronne-ia a { color: var(--papier); font-weight: 500; }
.fleche-gamme { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--f-mesure); font-size: 12px; color: var(--texte-doux); }
.fleche-gamme i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--filet), var(--abysse)); position: relative; }
.fleche-gamme i::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 8px solid var(--abysse); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
@media (max-width: 960px) {
  .escalier { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .marche .corps-marche { min-height: 0 !important; }
  .couronne-ia { grid-template-columns: 1fr; }
  .couronne-ia > div:first-child { display: none; }
}
@media (max-width: 560px) { .escalier { grid-template-columns: 1fr; } }

/* --- Section « Ma correction » de l'accueil --- */
.bandeau-correction { position: relative; overflow: hidden; background: var(--blanc-optique); }
.bandeau-correction .fond-gravure { position: absolute; inset: 0; }
.bandeau-correction .fond-gravure canvas { width: 100%; height: 100%; display: block; color: var(--petrole); opacity: 0.55; }
.bandeau-correction .contenu { position: relative; }
.carte-blanche { padding: clamp(28px, 4vw, 48px); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--abysse); border-radius: var(--rayon); display: grid; gap: 20px; max-width: 640px; }
.carte-blanche h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ordonnance-exemple { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 4px 14px; font-family: var(--f-mesure); font-size: var(--t-s); }
.ordonnance-exemple span:nth-child(-n+5) { font-family: var(--f-texte); font-size: 11px; color: var(--texte-doux); }
.rx-pas button { width: 32px; }
.rx-pas input { font-size: 0.95rem; padding: 0 2px; }
.aide-ordonnance { max-width: 760px; }
.aide-ordonnance .fiche > div { grid-template-columns: 110px 1fr; }
.svg-cornee .s-legende { font-size: 8px; }
.cornee svg { max-width: 360px; }
.repere-age svg { max-width: 560px; }
/* Un élément masqué reste masqué, quel que soit son style d'affichage */
[hidden] { display: none !important; }
@media (max-width: 640px) { .schema-rayons .s-legende { font-size: 19px; } }
.marche { text-decoration: none; color: var(--abysse); transition: border-color .2s; }
.marche:hover { border-color: var(--abysse); }

/* =====================================================================
   13. v4 : photos du laboratoire, histoire d'OKIO, vision de près,
       espace partenaire (accès, précal, calibre, documents, cotes)
   ===================================================================== */

/* --- Photos --- */
.photo .cadre:has(img) { padding: 0; }
.photo .cadre.portrait { aspect-ratio: 4 / 5; }
.galerie-labo { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 980px; gap: clamp(12px, 2vw, 24px); }
.galerie-labo figure { margin: 0; display: grid; gap: 10px; }
.galerie-labo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.galerie-labo figcaption { font-size: var(--t-xs); color: var(--texte-nuit); }


/* --- Affiche cliquable (flyer, poster) --- */
.affiche { display: grid; gap: 10px; text-decoration: none; color: inherit; max-width: 340px; }
.affiche.paysage { max-width: 640px; }
.affiche img { width: 100%; height: auto; border-radius: var(--rayon); box-shadow: 0 24px 60px rgba(0,0,0,.28); transition: transform .4s ease; }
.affiche:hover img { transform: translateY(-4px); }
.affiche span { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }

/* --- L'histoire d'OKIO --- */
.chapitre .numero-chapitre { font-family: var(--f-recit); font-style: italic; font-size: var(--t-2xl); line-height: 1; letter-spacing: .3em; color: var(--bordeaux); margin: 0; }
.nuit .chapitre .numero-chapitre { color: var(--bordeaux-clair); }
.vers { font-family: var(--f-recit); font-size: clamp(1.06rem, 1.4vw, 1.25rem); line-height: 1.7; display: grid; gap: 1.2em; max-width: 46ch; }
.vers p { margin: 0; }
.chapitre .okio { max-width: 300px; justify-self: center; }
.photo-chapitre { margin: 0; }
.photo-chapitre img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--rayon); }

/* --- Échelle de lecture (illustration) --- */
.echelle-parinaud { list-style: none; margin: 0; padding: clamp(20px, 3vw, 36px); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); display: grid; gap: 14px; }
.echelle-parinaud li { display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline; gap: 14px; }
.echelle-parinaud .mesure { font-size: var(--t-xs); color: var(--texte-doux); }
.echelle-parinaud .texte-echelle { font-family: var(--f-recit); font-size: var(--taille); line-height: 1.2; }

/* --- Accès partenaire --- */
.acces-pro .acces-partenaire { max-width: 460px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); }
.acces-pro h2 { font-size: var(--t-xl); }
.onglets-pro { position: sticky; top: 0; z-index: 30; background: var(--abysse); }
.onglets-pro .contenu { display: flex; gap: 6px 26px; flex-wrap: wrap; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.onglets-pro a { color: var(--blanc-optique); text-decoration: none; font-size: var(--t-s); }
.onglets-pro a:hover { color: var(--bleu-verre); }
.onglets-pro button { margin-left: auto; background: none; border: 0; color: var(--texte-nuit); font: inherit; font-size: var(--t-xs); cursor: pointer; }

/* --- Précal --- */
.precal { display: grid; gap: 22px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(18px, 3vw, 40px); }
.precal-tete { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 20px; align-items: end; padding-bottom: 20px; border-bottom: 1.5px solid var(--abysse); }
.marque-precal { display: flex; gap: 16px; align-items: center; }
.marque-precal svg { width: 44px; height: auto; flex: none; }
.marque-precal .petit { margin: 0; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.titre-precal { margin: 2px 0 0; font-family: var(--f-titre); font-stretch: 112%; font-weight: 600; font-size: var(--t-xl); }
.bloc-precal { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.bloc-precal legend { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 0 6px; font-family: var(--f-titre); font-stretch: 112%; font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--filet); }
.bloc-precal legend span { display: inline-grid; place-items: center; min-width: 30px; height: 24px; background: var(--petrole); color: #fff; border-radius: 2px; font-size: 12px; letter-spacing: .04em; }
.bloc-precal legend small { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: var(--f-texte); font-weight: 400; color: var(--texte-doux); font-size: var(--t-xs); }
.grille-precal { display: grid; gap: 12px; }
.grille-precal.g2 { grid-template-columns: repeat(2, 1fr); }
.grille-precal.g3 { grid-template-columns: repeat(3, 1fr); }
.grille-precal.g4 { grid-template-columns: repeat(4, 1fr); }
.precal .champ label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--texte-doux); }
.precal .champ label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.precal .champ input, .precal .champ select, .precal .champ textarea { padding: 10px 12px; font-size: var(--t-s); }
.ligne-cases { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding: 12px 16px; background: var(--brume); border-radius: var(--rayon); }
.ligne-cases > div[role="radiogroup"] { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.etiq-precal { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--texte-doux); margin-right: 4px; }
.case { display: inline-flex; gap: 7px; align-items: center; font-size: var(--t-s); cursor: pointer; }
.case input { width: 17px; height: 17px; accent-color: var(--petrole); margin: 0; }
.teinte-precal { flex: 1 1 220px; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.duo-precal .ligne-cases { background: none; padding: 0; }
.table-precal { width: 100%; border-collapse: collapse; min-width: 520px; }
.duo-precal .table-precal { min-width: 0; }
.table-precal th, .table-precal td { border: 1px solid var(--filet); padding: 0; text-align: center; }
.table-precal thead th { background: var(--brume); padding: 8px 6px; font-size: 11px; letter-spacing: .1em; font-weight: 600; }
.table-precal thead th small { display: block; letter-spacing: 0; font-weight: 400; color: var(--texte-doux); }
.table-precal tbody th { background: var(--petrole); color: #fff; width: 52px; font-family: var(--f-titre); font-stretch: 112%; }
.table-precal thead th:first-child { background: var(--abysse); }
.table-precal input { width: 100%; border: 0; padding: 13px 8px; text-align: center; font-family: var(--f-mesure); font-size: var(--t-s); background: transparent; min-width: 0; }
.table-precal input:focus { outline: 2px solid var(--bleu-verre); outline-offset: -2px; background: #F7FBFC; }
.outils-rx { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.outils-rx .bouton, .outils-calibre .outil { padding: 8px 14px; font-size: var(--t-xs); }
.duo-precal { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.calibre-duo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.outils-calibre { display: flex; flex-wrap: wrap; gap: 6px; }
.outil { border: 1px solid var(--filet); background: var(--papier); border-radius: 2px; cursor: pointer; font: inherit; color: var(--abysse); }
.outil:hover { border-color: var(--petrole); }
.outil.actif { background: var(--abysse); color: #fff; border-color: var(--abysse); }
.zone-calibre { position: relative; border: 1px solid var(--abysse); border-radius: 2px; overflow: hidden; }
#calibre { display: block; width: 100%; height: auto; aspect-ratio: 90 / 70; touch-action: none; cursor: crosshair; }
.repere-calibre { position: absolute; bottom: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.9); padding: 3px 7px; border-radius: 2px; pointer-events: none; }
.repere-calibre.gauche { left: 8px; } .repere-calibre.droite { right: 8px; }
.okio-bulle.petite { font-size: var(--t-s); }
.actions-precal { display: grid; gap: 14px; padding-top: 22px; border-top: 1.5px solid var(--abysse); }
@media (max-width: 900px) {
  .precal-tete, .duo-precal, .calibre-duo { grid-template-columns: 1fr; }
  .grille-precal.g4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .grille-precal.g2, .grille-precal.g4 { grid-template-columns: 1fr; }
  .grille-precal.g3 { grid-template-columns: 1fr 1fr 1fr; }
  .grille-precal.g3 .champ label { font-size: 10px; letter-spacing: .04em; }
  .precal-tete .champs-2 { grid-template-columns: 1fr; }
}

/* --- Documents --- */
.documents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 22px; }
.document { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 18px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--papier); align-items: start; }
.document h3 { font-size: var(--t-m); margin: 0; }
.document p { margin: 0; font-size: var(--t-s); }
.document .pile { gap: 8px; }
.document .rangee-boutons { gap: 8px; margin-top: 4px; }
.document .bouton { padding: 7px 12px; font-size: var(--t-xs); }
.vignette-doc img { width: 100%; height: 146px; object-fit: cover; object-position: top; border: 1px solid var(--filet); border-radius: 2px; }

/* --- Cotes de montage --- */
.cotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cote { padding: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); display: grid; gap: 8px; align-content: start; }
.cote .valeur { font-size: var(--t-2xl); color: var(--bordeaux); margin: 0; }
.cote h3 { margin: 0; font-size: var(--t-m); }
.cote p { margin: 0; }
.schema-cote { width: 100%; max-width: 260px; color: var(--petrole); margin-top: 10px; }
@media (max-width: 820px) { .cotes { grid-template-columns: 1fr; } }

/* --- Impression du précal : la fiche seule, calibre à l'échelle 1:1 --- */
@media print {
  body.impression-precal > *:not(main), body.impression-precal .okio-flottant, body.impression-precal .titre-page,
  body.impression-precal .ariane, body.impression-precal .onglets-pro, body.impression-precal #documents,
  body.impression-precal #cotes, body.impression-precal .entete-section, body.impression-precal .outils-calibre,
  body.impression-precal .outils-rx, body.impression-precal .actions-precal, body.impression-precal .okio-bulle,
  body.impression-precal .acces-pro { display: none !important; }
  body.impression-precal .section { padding: 0 !important; background: none !important; }
  body.impression-precal .precal { border: 0; padding: 0; gap: 8px; font-size: 10pt; }
  body.impression-precal .precal input, body.impression-precal .precal select, body.impression-precal .precal textarea { font-size: 9pt; padding: 3px 6px; }
  body.impression-precal .table-precal input { padding: 4px; }
  body.impression-precal .duo-precal { grid-template-columns: 1fr 1fr; gap: 14px; }
  body.impression-precal .calibre-duo { grid-template-columns: 90mm 1fr; }
  body.impression-precal #calibre { width: 90mm !important; height: 70mm !important; }
  body.impression-precal .grille-precal.g4 { grid-template-columns: repeat(4, 1fr); }
  body.impression-precal .precal-tete { grid-template-columns: 1fr 1fr; }
  body.impression-precal .precal ::placeholder { color: transparent; }
  body.impression-precal .precal .champ { gap: 2px; }
  body.impression-precal .precal .champ label { font-size: 7pt; }
  body.impression-precal .bloc-precal { gap: 5px; }
  body.impression-precal .bloc-precal legend { font-size: 8pt; padding-bottom: 2px; }
  body.impression-precal .grille-precal { gap: 6px; }
  body.impression-precal .ligne-cases { padding: 4px 8px; gap: 4px 14px; }
  body.impression-precal .precal-tete { padding-bottom: 6px; gap: 8px; }
  body.impression-precal .titre-precal { font-size: 15pt; }
  body.impression-precal .table-precal thead th { padding: 2px; }
  body.impression-precal .precal textarea { min-height: 60mm; }
  body.impression-precal .bloc-precal small { font-size: 7pt; }
  body.impression-precal #mesure-calibre { font-size: 8pt; margin: 0; }
  body.impression-precal .defile { overflow: visible; }
  body.impression-precal .table-precal { min-width: 0; }
  body.impression-precal .precal input, body.impression-precal .precal select { height: 7mm; min-height: 0; }
  body.impression-precal .table-precal input { height: 6mm; }
  body.impression-precal .precal textarea { min-height: 62mm; height: 62mm; }
  body.impression-precal .ligne-cases input { height: auto; }
  @page { size: A4; margin: 8mm; }
}
.table-precal input::placeholder { color: #B5C3C7; }
.okio-bulle.petite { align-self: start; }

/* --- Précal : teintes de base et intensité --- */
.teintes-precal { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--filet); border-radius: var(--rayon); }
.puces-teintes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.puce-teinte { position: relative; cursor: pointer; }
.puce-teinte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-teinte span { display: inline-block; padding: 7px 12px; border: 1px solid var(--filet); border-radius: 2px; font-size: var(--t-xs); background: var(--papier); transition: background .15s, color .15s; }
.puce-teinte:hover span { border-color: var(--petrole); }
.puce-teinte input:checked + span { background: var(--abysse); color: #fff; border-color: var(--abysse); }
.puce-teinte input:focus-visible + span { outline: 2px solid var(--bleu-verre); outline-offset: 2px; }
.champs-teinte { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.champs-teinte .champ { flex: 0 1 260px; }
.champs-teinte .intensite-teinte { flex: 0 0 150px; }
.avec-unite { display: flex; align-items: center; gap: 8px; }
.avec-unite input { width: 100%; font-family: var(--f-mesure); }
.avec-unite span { font-family: var(--f-mesure); color: var(--texte-doux); }
@media print {
  body.impression-precal .teintes-precal { padding: 4px 8px; gap: 4px; }
  body.impression-precal .puce-teinte span { padding: 2px 6px; font-size: 7pt; }
}

/* --- Traitements : pastilles de couleur et cartes d'options --- */
.nuances { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.nuances li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); }
.nuances i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14,34,41,.15); flex: none; }
.cartes-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.carte-option { display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); }
.carte-option h3 { margin: 0; font-size: var(--t-m); }
.carte-option p { margin: 0; }
.carte-option .petit { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; margin-top: 4px; }
.carte-option.sobre { background: var(--brume); border-color: transparent; }
.note-quadro { margin: 0; padding: 10px 14px; background: #F6ECEE; border-left: 3px solid var(--bordeaux); font-size: var(--t-s); }

/* --- Bandeau de consentement --- */
.consentement { position: fixed; z-index: 90; left: 20px; bottom: 20px; width: min(540px, calc(100% - 40px)); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--papier); color: var(--abysse); border: 1px solid var(--abysse); border-radius: var(--rayon); padding: 24px; display: grid; gap: 14px;
  box-shadow: 0 24px 60px rgba(14,34,41,.25); font-size: var(--t-s); }
.consentement h2 { margin: 0; font-size: var(--t-l); }
.consentement p { margin: 0; }
.consentement a { color: inherit; }
.consentement-detail { display: grid; gap: 10px; }
.consentement-cat { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px; background: var(--brume); border-radius: var(--rayon); cursor: pointer; }
.consentement-cat input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--petrole); }
.consentement-cat small { display: block; color: var(--texte-doux); margin-top: 2px; }
.consentement-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.consentement-boutons .bouton { flex: 1 1 auto; justify-content: center; }
body.consentement-ouvert .okio-bouton { display: none; }
@media (max-width: 640px) { .consentement { left: 10px; bottom: 10px; width: calc(100% - 20px); padding: 18px; } }
@media print { .consentement { display: none !important; } }

/* --- Mentions RGPD sous les formulaires --- */
.mention-rgpd { font-size: var(--t-xs); color: var(--texte-doux); max-width: 70ch; margin: 0; }
.mention-rgpd a { color: inherit; }
.nuit .mention-rgpd { color: var(--texte-nuit); }
.tableau-rgpd td, .tableau-rgpd th { vertical-align: top; font-size: var(--t-s); }

/* --- v6 : citation de Vitruve, labels, OKIO en trame --- */
.citation-vitruve { font-family: var(--f-recit); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--petrole); max-width: 46ch; margin: 0; padding-left: 16px; border-left: 2px solid var(--bleu-verre); }
.nuit .citation-vitruve { color: var(--texte-nuit); }
.labels-vecteur { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.label-vecteur { display: grid; grid-template-rows: auto 1fr; gap: 22px; padding: clamp(22px, 3vw, 36px); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon); }
.label-vecteur img { height: 92px; width: auto; max-width: 100%; object-fit: contain; justify-self: start; }
.label-vecteur h3 { margin: 0; font-size: var(--t-l); }
.label-vecteur p { margin: 0; max-width: 62ch; }
@media (max-width: 820px) { .labels-vecteur { grid-template-columns: 1fr; } }
.pied .labels { align-items: center; }
.logo-label { display: inline-flex; background: #fff; padding: 6px 10px; border-radius: var(--rayon); }
.logo-label img { height: 34px; width: auto; display: block; }
.okio-trame { margin: 0; justify-self: center; max-width: 300px; width: 100%; }
.okio-trame img { width: 100%; height: auto; display: block; animation: trame-apparait 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes trame-apparait { from { opacity: 0; filter: blur(6px); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .okio-trame img { animation: none; } }
@media (max-width: 760px) { .okio-trame { max-width: 220px; } }

/* --- Comparatif : du plus haut de gamme à l'essentiel --- */
.escalier.descendant .marche:nth-child(1) .tete-marche { background: var(--abysse); }
.escalier.descendant .marche:nth-child(2) .tete-marche { background: #24434C; }
.escalier.descendant .marche:nth-child(3) .tete-marche { background: var(--petrole); }
.escalier.descendant .marche:nth-child(4) .tete-marche { background: #4F7782; }
.escalier.descendant .marche:nth-child(1) .corps-marche { min-height: 410px; }
.escalier.descendant .marche:nth-child(2) .corps-marche { min-height: 350px; }
.escalier.descendant .marche:nth-child(3) .corps-marche { min-height: 290px; }
.escalier.descendant .marche:nth-child(4) .corps-marche { min-height: 230px; }
.fleche-gamme.descendante i { background: linear-gradient(90deg, var(--abysse), var(--filet)); }
.fleche-gamme.descendante i::after { border-left-color: var(--filet); }
.couronne-ia.descendante > div:first-child { order: 2; }

/* précal : suppléments en cases séparées, export .oma */
.supplements-precal { margin-top: 12px; }
@media (min-width: 900px) { .grille-precal.g4.supplements-precal { grid-template-columns: 1.5fr .8fr 1.2fr 1fr; } }
.supplements-precal .champ[hidden] { display: none; }
.export-oma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.export-oma p { margin: 0; max-width: 56ch; }
@media print { .export-oma { display: none; } }

/* visuel Réfraction des verres */
.gravure .verre-toile { display: block; width: 100%; aspect-ratio: 4 / 3; color: var(--bleu-verre); }
.produit .gravure .verre-toile { aspect-ratio: 16 / 10; }
.corps-marche .gravure .verre-toile { aspect-ratio: 16 / 9; }
.gravure.claire .verre-toile { color: var(--petrole); }
.gravure.refraction .cadre-gravure { background: var(--abysse); }
.gravure.refraction.claire .cadre-gravure { background: var(--papier); }
.nuit .gravure.refraction .cadre-gravure, .recommandation .gravure.refraction .cadre-gravure { background: var(--nuit-2); }
.produit:hover .verre-toile, .rang:hover .verre-toile { cursor: crosshair; }

/* Easy Kids : vidéo, étude publiée, documentation */
.video-verre video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--abysse); }
.produit .video-verre video { aspect-ratio: 16 / 10; }
.chiffre-etude { justify-self: center; text-align: center; max-width: 380px; }
.chiffre-etude .mesure { display: block; white-space: nowrap; font-size: clamp(56px, 8vw, 112px); line-height: 1; color: var(--petrole); letter-spacing: -0.03em; }
.chiffre-etude p { margin-top: 12px; color: var(--texte-doux); }
.docs-easy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.doc-easy { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.doc-easy img { width: 100%; height: 260px; object-fit: cover; object-position: top; border: 1px solid var(--filet); border-radius: var(--rayon); background: #fff; transition: transform .25s; }
.doc-easy:hover img { transform: translateY(-4px); }
.doc-easy span { font-size: var(--t-xs); color: var(--texte-doux); }
@media (max-width: 760px) { .docs-easy { grid-template-columns: 1fr; } .doc-easy img { height: 200px; } }

/* LED PRO : spectre visible et ses deux bandes filtrées */
.spectre-led { display: grid; gap: 10px; width: 100%; max-width: 460px; justify-self: center; }
.bande-spectre { position: relative; height: 72px; border-radius: 4px;
  background: linear-gradient(90deg, #6a2bd8 0%, #3047ff 14%, #1e9bff 26%, #19c6b0 38%, #55d04a 50%, #c9e23a 60%, #ffd23a 70%, #ff8a2a 82%, #e8322a 100%); }
.bande-spectre .creux { position: absolute; top: -6px; bottom: -6px; width: 9%; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(14,34,41,.82) 30%, rgba(14,34,41,.82) 70%, transparent);
  border-left: 1px dashed rgba(255,255,255,.5); border-right: 1px dashed rgba(255,255,255,.5); }
.graduation-spectre { position: relative; height: 16px; font-size: 11px; color: var(--texte-nuit); }
.graduation-spectre span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.graduation-spectre span:nth-child(1) { left: 0; transform: none; }
.graduation-spectre span:nth-child(2) { left: 16.7%; }
.graduation-spectre span:nth-child(3) { left: 50%; }
.graduation-spectre span:nth-child(4) { right: 0; left: auto; transform: none; }