/* Polices du site (licence OFL, auto-hébergées, sous-ensemble latin). Chemins propres aux maquettes. */
@font-face { font-family: 'Jost'; font-weight: 100 900; font-display: swap; src: url(/polices/jost/jost-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-display: swap; src: url(/polices/instrument-sans/instrument-sans-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/polices/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }


/* Jetons du système « La lumière de Cannes » (web-concept-06.com).
   Les couleurs de fond (--papier, --surface…) sont les valeurs de repli, sans JavaScript ; lumiere.js les teinte
   selon le soleil de Cannes, dans la famille claire ou sombre. Les encres ne bougent pas : leurs contrastes AA sont
   vérifiés sur toutes les teintes de l'année (outils/lumiere-balayage.mjs). */

:root {
  /* la marque : les trois rectangles du logo, et l'encre qui se pose sur chacun */
  --sauge: #6f9a8f;   --sur-sauge: #0e1412;
  --olive: #d2cc95;   --sur-olive: #14150f;
  --ardoise: #53564f; --sur-ardoise: #fbfaf5;

  /* famille claire (jour) */
  --papier: #f6f4ee;      /* fond de page */
  --surface: #ece8de;     /* blocs posés sur le papier */
  --encre: #15181d;       /* texte */
  --encre-2: #464b53;     /* texte secondaire */
  --accent: #2f6155;      /* liens, focus, repères (sauge foncée) */
  --trait: #737980;       /* bordures de champs et de contrôles (3:1) */
  --trait-doux: #c9c6bd;  /* filets décoratifs, sans information */
  --erreur: #a3261d;      /* champ refusé, message d'erreur */
  --plaque: rgba(246, 244, 238, .92);  /* plaques posées sur le ciel */
  --soleil: #fff3cf;      /* couleur du disque solaire, à l'instant (décor) */
  --ciel-haut: #2b67b2;
  --ciel-bas: #cbe4f0;
  color-scheme: light;

  /* typographie */
  --police-titre: 'Jost', 'Avenir Next', 'Century Gothic', sans-serif;
  --police-texte: 'Instrument Sans', system-ui, sans-serif;
  --police-mesure: 'IBM Plex Mono', ui-monospace, monospace;
  --t-mini: .8125rem;                                   /* 13 px : étiquettes en chasse fixe */
  --t-petit: .9375rem;                                  /* 15 px */
  --t-texte: 1.0625rem;                                 /* 17 px */
  --t-chapeau: clamp(1.125rem, 1rem + .5vw, 1.375rem);  /* 18 → 22 px */
  --t-h3: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);       /* 20 → 24 px */
  --t-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);     /* 30 → 52 px */
  --t-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem);      /* 36 → 76 px */
  --t-phrase: clamp(1.625rem, 4.4vw, 3rem);            /* 26 → 48 px (plafond dès 1 090 px ; trop gros à 76 px, avis de Mathieu du 13/10) */
  --interligne: 1.6;
  --interligne-titre: 1.08;

  /* espace : une échelle de 4 px */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --respiration: clamp(3.5rem, 2rem + 6vw, 8rem);       /* entre deux sections */
  --goutiere: clamp(16px, 3.5vw, 40px);                 /* marge latérale */
  --largeur: min(1240px, calc(100vw - 2 * var(--goutiere)));
  --mesure-texte: 64ch;                                 /* longueur de ligne */

  /* formes : des rectangles, comme le logo ; le seul rond est le soleil */
  --angle: 2px;
  --vide: .14em;          /* le vide autour du rectangle olive, repris dans la phrase */
  --filet: 1px;

  /* mouvement */
  --duree-lumiere: 1.2s;  /* la lumière tourne lentement */
  --duree-geste: .45s;    /* ce qui répond à un geste */
  --courbe: cubic-bezier(.6, 0, .2, 1);
}

/* famille sombre (nuit) : celle de l'appareil sans JavaScript, ou celle que lumiere.js choisit */
@media (prefers-color-scheme: dark) {
  :root:not([data-famille]) {
    --papier: #0d1322; --surface: #161d31; --encre: #eef0f5; --encre-2: #b4bccb; --accent: #9ccabd; --trait: #6b7590;
    --trait-doux: #2a3249; --erreur: #ff9d92; --plaque: rgba(13, 19, 34, .9); --ciel-haut: #0b1433; --ciel-bas: #25305d; color-scheme: dark;
  }
}
:root[data-famille="sombre"] {
  --papier: #0d1322; --surface: #161d31; --encre: #eef0f5; --encre-2: #b4bccb; --accent: #9ccabd; --trait: #6b7590;
  --trait-doux: #2a3249; --erreur: #ff9d92; --plaque: rgba(13, 19, 34, .9); color-scheme: dark;
}

/* Composants et mise en page du système « La lumière de Cannes ». Les valeurs viennent de jetons.css. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* un élément caché le reste, quel que soit son composant */
html { scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 var(--t-texte)/var(--interligne) var(--police-texte); -webkit-font-smoothing: antialiased;
  transition: background-color var(--duree-lumiere) ease, color var(--duree-lumiere) ease;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: var(--interligne-titre); margin: 0; }
h2 { font-size: var(--t-h2); letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); font-weight: 500; }
p { margin: 0; }
code { font: 500 .9em var(--police-mesure); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -80px; z-index: 50; padding: 10px 16px; background: var(--encre); color: var(--papier); }
.evitement:focus { top: 8px; }
.etiquette { font: 500 var(--t-mini)/1.4 var(--police-mesure); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); margin: 0 0 var(--e-3); }
.plaque { background: var(--plaque); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: var(--angle); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--encre) 10%, transparent); }

/* ---------- boutons et liens ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 12px 22px;
  background: var(--encre); color: var(--papier); border: 2px solid var(--encre); border-radius: var(--angle);
  font: 600 1rem/1.2 var(--police-texte); text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-lumiere) ease, color var(--duree-lumiere) ease, transform .2s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton-2 { background: transparent; color: var(--encre); }
.bouton-petit { min-height: 40px; padding: 7px 14px; font-size: var(--t-petit); }
.lien-bouton { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.lien-discret { color: var(--encre-2); }

/* ---------- l'en-tête, posé sur le ciel ---------- */
.haut { position: relative; }
.tete {
  position: absolute; z-index: 20; top: var(--e-4); left: 50%; transform: translateX(-50%); width: var(--largeur);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2);
}
/* le logo se pose directement sur le ciel, sans plaque (demande de Mathieu, 13/10/2026) : texte clair, et une ombre
   légère qui détache les rectangles du ciel de jour comme de nuit */
.tete-marque { display: block; padding: 8px 0; color: var(--logo-encre, #f4f6fa); line-height: 0; filter: drop-shadow(0 1px 1.5px var(--logo-ombre, rgba(5, 10, 25, .45))) drop-shadow(0 0 10px rgba(5, 10, 25, .14)); transition: color var(--duree-lumiere) ease; }
.tete-marque.plaque { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.tete-marque .logo-wc06 tspan { fill: var(--logo-06, #b7d3ca); }   /* le « 06 » vert-de-gris, d'un ton plus clair ou plus foncé selon le ciel */
.tete-marque svg { width: 188px; height: auto; }
.tete-outils { display: flex; align-items: center; gap: 2px; padding: 5px; }
.outil {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--angle);
  background: transparent; color: var(--encre); font: 600 var(--t-petit)/1.2 var(--police-texte); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.outil:hover { background: var(--surface); }
.outil[aria-expanded="true"] { background: var(--surface); }
.outil-heure { font: 500 var(--t-mini)/1 var(--police-mesure); color: var(--encre-2); }
.point-soleil { width: 12px; height: 12px; border-radius: 50%; background: var(--soleil); box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 35%, transparent), 0 0 10px var(--soleil); flex: none; }
.outil-capot { font-family: var(--police-mesure); font-weight: 500; background: var(--encre); color: var(--papier); }
.outil-capot:hover { background: var(--encre); color: var(--papier); text-decoration: underline; }
.outil-capot[aria-pressed="true"] { background: var(--olive); color: var(--sur-olive); }
.outil-capot .court { display: none; }
.outil-ecrire { text-decoration: underline; text-underline-offset: .22em; }

/* le réglage de la lumière */
.reglage { position: relative; }
.panneau-lumiere {
  position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: min(380px, calc(100vw - 2 * var(--goutiere)));
  padding: var(--e-5); background: var(--papier); color: var(--encre); border: var(--filet) solid var(--trait-doux); border-radius: var(--angle);
  box-shadow: 0 18px 50px rgba(5, 10, 25, .28); white-space: normal;
}
.panneau-lumiere fieldset { border: 0; margin: 0; padding: 0; }
.panneau-lumiere legend { font: 500 var(--t-mini)/1.4 var(--police-mesure); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); margin-bottom: var(--e-2); padding: 0; }
.choix { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; padding: var(--e-2) 0; font-size: var(--t-petit); line-height: 1.45; color: var(--encre-2); cursor: pointer; }
.choix b { display: block; color: var(--encre); font-weight: 600; }
.choix input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.journee { display: grid; gap: var(--e-2); margin-top: var(--e-4); padding-top: var(--e-4); border-top: var(--filet) solid var(--trait-doux); }
.journee label { font-weight: 600; font-size: var(--t-petit); }
.journee output { font: 500 var(--t-petit) var(--police-mesure); }
.journee input { width: 100%; accent-color: var(--accent); }
.journee .bouton { justify-self: start; }
.panneau-note { margin-top: var(--e-4); font-size: var(--t-mini); line-height: 1.5; color: var(--encre-2); }

/* le menu : toutes les pages, sur une feuille */
.menu {
  position: absolute; z-index: 19; top: 88px; left: 50%; transform: translateX(-50%); width: var(--largeur);
  display: grid; grid-template-columns: 3fr 2fr; gap: var(--e-6); padding: var(--e-6); background: var(--papier);
  box-shadow: 0 18px 50px rgba(5, 10, 25, .25);
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu-portes a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); padding: var(--e-2) 0; color: var(--encre); text-decoration: none; border-bottom: var(--filet) solid var(--trait-doux); }
.menu-portes span { font: 300 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.2 var(--police-titre); }
.menu-portes small { font-size: var(--t-petit); color: var(--encre-2); }
.menu-portes a:hover span { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
.menu-autres a { display: block; padding: var(--e-2) 0; font-size: var(--t-chapeau); color: var(--encre); }

/* ---------- la scène : la vue depuis la Croisette ---------- */
.scene { position: relative; margin: 0; height: clamp(380px, 52vh, 580px); overflow: hidden; background: var(--ciel-haut); }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene.bande { height: clamp(150px, 22vh, 210px); }
.scene-legende {
  position: absolute; z-index: 2; left: max(var(--goutiere), calc((100% - 1240px) / 2)); bottom: 72px; max-width: min(600px, calc(100% - 2 * var(--goutiere)));
  padding: 10px 14px; font-size: var(--t-petit); line-height: 1.45; color: var(--encre);
}
.scene-moment { display: block; font: 500 var(--t-mini)/1.4 var(--police-mesure); color: var(--encre-2); }
.vague { stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 46 120 14 90; opacity: .5; animation: houle 26s linear infinite; }
.vague.v1 { stroke-dasharray: 80 160 22 60; animation-duration: 34s; animation-direction: reverse; }
.vague.v2 { stroke-dasharray: 30 70 60 140; animation-duration: 41s; }
#sc-reflet rect { animation: miroite 7s ease-in-out infinite alternate; }
#sc-reflet rect:nth-child(2n) { animation-delay: -3.4s; }
@keyframes houle { to { stroke-dashoffset: -1600; } }
@keyframes miroite { from { opacity: .6; } }
#sc-etoiles { transition: opacity var(--duree-lumiere) ease; }
/* la mer scintille doucement : des cycles lents, un écart faible (plus de clignotement) */
#sc-scintillement rect { animation: scintille 6s ease-in-out infinite alternate; }
#sc-scintillement rect:nth-child(3n) { animation-delay: -2.1s; animation-duration: 7.5s; }
#sc-scintillement rect:nth-child(3n+1) { animation-delay: -4.3s; }
@keyframes scintille { from { fill-opacity: .55; } }
/* le capot ouvert sur la scène */
#sc-capot .capot-trait { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: 1.5; stroke-dasharray: 6 6; }
#sc-capot .capot-course { fill: none; stroke: var(--olive); stroke-width: 2.5; stroke-dasharray: 1 9; stroke-linecap: round; }
#sc-capot .capot-etiquette rect { fill: #0b0f1a; fill-opacity: .9; }
#sc-capot .capot-etiquette text { fill: #eef0f5; font: 500 15px var(--police-mesure); }

/* ---------- l'ouverture : la feuille posée sur la mer, et la phrase ---------- */
.feuille { position: relative; z-index: 3; width: min(1336px, 100%); margin: -48px auto 0; padding: clamp(28px, 4vw, 52px) max(var(--goutiere), 48px) 0; background: var(--papier); transition: background-color var(--duree-lumiere) ease; }
.surtitre { font: 500 var(--t-petit)/1.4 var(--police-mesure); color: var(--encre-2); letter-spacing: .01em; margin: 0 0 var(--e-4); }
.invite { font-size: var(--t-chapeau); color: var(--encre-2); margin: 0 0 var(--e-5); }
.phrase { display: flex; flex-wrap: wrap; align-items: baseline; gap: .16em .26em; margin: 0; font: 300 var(--t-phrase)/1.24 var(--police-titre); letter-spacing: -.012em; }
/* les trois mots, posés sur les trois rectangles du logo : même hauteur, même ligne de base ; un chevron dit qu'on peut
   les toucher ; au survol ou au focus, le mot se soulève comme un plan du logo vivant, avec le vide autour de lui */
.mot { position: relative; display: inline-flex; align-items: baseline; transition: transform .3s var(--courbe); }
.mot select {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; border-radius: 0; padding: .02em .74em .08em .32em; max-width: calc(100vw - 2 * var(--goutiere));
  font: inherit; font-weight: 400; letter-spacing: inherit; cursor: pointer; text-overflow: ellipsis;
  transition: width var(--duree-geste) var(--courbe), opacity .25s ease, box-shadow .3s ease;
}
.mot::after { content: ''; position: absolute; right: .3em; top: 50%; width: .17em; height: .17em; border-right: .05em solid currentColor; border-bottom: .05em solid currentColor; transform: translateY(-75%) rotate(45deg); opacity: .75; pointer-events: none; }
.mot:hover, .mot:focus-within { z-index: 3; transform: translate(-.05em, -.07em); }
.mot:hover select, .mot:focus-within select { box-shadow: 0 0 0 var(--vide) var(--papier), .09em .11em 0 var(--vide) color-mix(in srgb, var(--encre) 16%, transparent); }
.mot select:focus-visible { outline: 3px solid var(--accent); outline-offset: calc(var(--vide) + 3px); }
.mot select option { font: 400 1rem var(--police-texte); background: #fff; color: #111; }
.mot-1 { color: var(--sur-sauge); }
.mot-1 select { background: var(--sauge); color: var(--sur-sauge); }
.mot-2 { color: var(--sur-olive); }
.mot-2 select { background: var(--olive); color: var(--sur-olive); }
.mot-3 { color: var(--sur-ardoise); }
.mot-3 select { background: var(--ardoise); color: var(--sur-ardoise); }
.mot-3::after { right: .3em; }
/* largeurs fixes pendant les exemples (le plus long de chaque mot, mesuré en Jost : outils/phrase-largeurs.py) : rien
   ne bouge quand ils défilent */
.phrase.exemples .mot-1 select { width: 10.19em; }
.phrase.exemples .mot-2 select { width: 6.58em; }
.phrase.exemples .mot-3 select { width: 12.3em; }
.lie, .point { color: var(--encre); }
.saut { display: none; }
.point { position: absolute; left: 100%; bottom: 0; margin-left: .06em; }
.change .mot select { opacity: .25; }
.phrase-aide { margin-top: var(--e-3); font-size: var(--t-petit); color: var(--encre-2); }
.phrase-aide { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); }
.reponse-courte { margin-top: var(--e-5); font: 400 var(--t-h3)/1.3 var(--police-titre); }
.reponse-courte a { font-weight: 500; }

/* ---------- la réponse : l'offre et sa démonstration ---------- */
.reponse { width: var(--largeur); margin: var(--respiration) auto 0; display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.offre h2 { margin-bottom: var(--e-4); }
.offre-texte { font-size: var(--t-chapeau); color: var(--encre-2); max-width: 40ch; }
.offre h3 { font: 600 var(--t-texte)/1.4 var(--police-texte); margin: var(--e-6) 0 var(--e-2); }
.coches { list-style: none; margin: 0; padding: 0; }
.coches li { position: relative; padding: 6px 0 6px 26px; border-bottom: var(--filet) solid var(--trait-doux); }
.coches li::before { content: ''; position: absolute; left: 0; top: .78em; width: 12px; height: 9px; background: var(--sauge); }
.offre-lien { margin-top: var(--e-5); font-weight: 600; }

/* la fenêtre : un cadre pour chaque démonstration (les trois carrés du logo en guise de boutons de fenêtre) */
.fenetre { margin: 0; background: var(--papier); border: var(--filet) solid var(--trait-doux); border-radius: var(--angle); box-shadow: 0 1px 0 var(--trait-doux), 0 24px 48px -28px rgba(5, 10, 25, .35); }
.fenetre-barre { display: flex; align-items: center; gap: var(--e-3); padding: 10px 14px; border-bottom: var(--filet) solid var(--trait-doux); background: var(--surface); font: 500 var(--t-mini)/1.4 var(--police-mesure); color: var(--encre-2); }
.fenetre-points { flex: none; width: 38px; height: 10px; background: linear-gradient(90deg, var(--sauge) 0 10px, transparent 10px 14px, var(--olive) 14px 24px, transparent 24px 28px, var(--ardoise) 28px 38px); }
.fenetre-corps { padding: var(--e-5); min-height: 240px; }
.reponse .fenetre-corps { height: 380px; overflow: auto; }   /* hauteur fixe : changer de démonstration ne décale rien */
.sans-transition, .sans-transition * { transition: none !important; }

/* les démonstrations */
.agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.agenda .jour { display: grid; gap: 6px; }
.agenda .nom-jour { text-align: center; font-weight: 600; font-size: var(--t-petit); }
.creneau { min-height: 36px; padding: 6px 2px; border: var(--filet) solid var(--trait); border-radius: var(--angle); background: var(--papier); color: var(--encre); font: 500 var(--t-petit) var(--police-texte); cursor: pointer; }
.creneau:hover { background: var(--surface); }
.creneau:disabled { color: var(--encre-2); border-style: dashed; cursor: not-allowed; }
.creneau.pris { background: var(--ardoise); border-color: var(--ardoise); color: var(--sur-ardoise); }
.demo-ok { margin-top: var(--e-3); min-height: 1.6em; font-weight: 600; color: var(--accent); }
/* la requête du métier, au-dessus du résultat : une barre de recherche (une loupe en CSS, sans image) */
.requete { position: relative; margin: 0 0 var(--e-4); padding: 9px 16px 9px 42px; border: var(--filet) solid var(--trait); border-radius: 999px; background: var(--papier); font-size: var(--t-petit); color: var(--encre); overflow-wrap: anywhere; }
.requete::before { content: ''; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; border: 2px solid var(--encre-2); border-radius: 50%; transform: translateY(-62%); }
.requete::after { content: ''; position: absolute; left: 26px; top: calc(50% + 3px); width: 6px; height: 2px; background: var(--encre-2); transform: rotate(45deg); }
.resultat .url { font-size: var(--t-petit); color: var(--encre-2); }
.resultat .titre-res { margin: 2px 0 4px; font-size: 1.2rem; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.resultat .desc { color: var(--encre-2); font-size: var(--t-petit); }
.bulle { margin: 0 0 10px; padding: 12px 14px; max-width: 88%; border-radius: var(--angle); }
.bulle.client { background: var(--surface); }
.bulle.ia { margin-left: auto; background: color-mix(in srgb, var(--sauge) 18%, var(--papier)); border-left: 4px solid var(--sauge); }
.bulle.ia.valide { border-left-color: var(--ardoise); }
.boutons { display: flex; gap: var(--e-2); justify-content: flex-end; }
.chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chiffres li { display: flex; align-items: baseline; gap: 12px; border-bottom: var(--filet) solid var(--trait-doux); padding-bottom: 8px; }
.chiffres b { font: 300 2.4rem/1 var(--police-titre); min-width: 3.6ch; }
.avap { position: relative; height: 230px; overflow: hidden; border: var(--filet) solid var(--trait); }
.avant, .apres { position: absolute; inset: 0; }
.avant { background: #e6e6e6; }   /* l'ancien site : une capture, gris clair dans les deux thèmes */
.apres { z-index: 1; background: var(--papier); }
.etq { position: absolute; z-index: 2; bottom: 8px; max-width: calc(50% - 16px); padding: 2px 8px; background: var(--encre); color: var(--papier); font: 500 var(--t-mini)/1.35 var(--police-mesure); }   /* une étiquette longue passe à la ligne, dans sa moitié */
.etq-av { left: 8px; } .etq-ap { right: 8px; }
.curseur { width: 100%; margin-top: var(--e-3); accent-color: var(--accent); }
.zoom-carte { border: var(--filet) solid var(--trait); padding: 14px; overflow-wrap: anywhere; }
.zt { font-weight: 600; font-size: 1.1em; }
.zp { margin-top: 4px; color: var(--encre-2); }
.produit { display: grid; gap: 8px; }
.prix { font: 300 1.9rem var(--police-titre); }
.quantite { display: flex; align-items: center; gap: 10px; }
.quantite .n { min-width: 1.5ch; text-align: center; font-weight: 600; }
.total { margin-top: var(--e-3); font-weight: 600; }

/* les aperçus par métier (retour de Mathieu du 15/10 : l'aperçu montre le métier, pas seulement ses mots) */
/* l'agenda : la ressource (table, chambre, consultation…), la quantité, puis les créneaux de cette ressource */
.agenda-ressources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e-3); }
.ressource { display: grid; gap: 1px; padding: 6px 12px; text-align: left; border: var(--filet) solid var(--trait); border-radius: var(--angle); background: var(--papier); color: var(--encre); font: 600 var(--t-petit)/1.25 var(--police-texte); cursor: pointer; }
.ressource:hover { background: var(--surface); }
.ressource-detail { font: 400 var(--t-mini)/1.25 var(--police-texte); color: var(--encre-2); }
.ressource[aria-pressed="true"], .ressource[aria-pressed="true"]:hover { background: var(--ardoise); border-color: var(--ardoise); color: var(--sur-ardoise); }   /* choisie : en ardoise, comme le créneau pris */
.ressource[aria-pressed="true"] .ressource-detail { color: var(--sur-ardoise); }
.quantite { margin-bottom: var(--e-3); }
.quantite-libelle { min-width: 6ch; font-size: var(--t-petit); color: var(--encre-2); }
/* la recherche : la ligne d'infos et les liens du site sous le résultat (du texte, rien de cliquable) */
.resultat .infos { margin: 4px 0 0; font-size: var(--t-mini); color: var(--encre-2); }
.liens-res { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--t-petit); font-weight: 500; color: var(--accent); }
/* le panier : choisir un produit, puis la quantité et le total */
.produits { display: grid; gap: 6px; margin-bottom: var(--e-3); }
.produit-choix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 7px 12px; border: var(--filet) solid var(--trait); border-radius: var(--angle); cursor: pointer; }
.produit-choix:hover { background: var(--surface); }
.produit-choix input { grid-row: 1 / span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.produit-nom { font-weight: 600; font-size: var(--t-petit); line-height: 1.3; }
.produit-detail { grid-column: 2; font-size: var(--t-mini); line-height: 1.3; color: var(--encre-2); }
.produit-prix { grid-column: 3; grid-row: 1 / span 2; font: 300 1.3rem/1 var(--police-titre); white-space: nowrap; }
.produit-choix:has(input:checked) { background: var(--surface); border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
/* l'application : deux gestes du métier, sous les tâches */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; }
.actions .bouton { min-height: 40px; padding: 4px 6px; font-size: var(--t-mini); line-height: 1.2; white-space: normal; }
/* l'avant-après : deux pages en miniature ; l'ancienne se lit à gauche, la nouvelle à droite, le curseur entre les deux */
.mini { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; padding: 14px 16px 40px; overflow: hidden; }
.mini > * { max-width: 46%; margin: 0; }
.mini-avant { justify-items: start; font-family: 'Times New Roman', Times, serif; color: #222; }
.mini-avant .mini-titre { font-size: 1.15rem; font-weight: 700; }
.mini-menu { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 0; list-style: none; font-size: .875rem; color: #00c; text-decoration: underline; }
.mini-avant .mini-texte { font-size: .875rem; }
.mini-apres { justify-items: end; text-align: right; color: var(--encre); }
.mini-apres .mini-titre { font: 300 1.3rem/1.12 var(--police-titre); }
.mini-bouton { padding: 6px 12px; background: var(--ardoise); color: var(--sur-ardoise); font: 600 var(--t-mini)/1.3 var(--police-texte); }
.mini-points { display: grid; gap: 2px; padding: 0; list-style: none; font-size: var(--t-mini); color: var(--encre-2); }
.mini-points li::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; background: var(--sauge); }
.avap { container-type: inline-size; }
@container (max-width: 420px) {   /* une demi-page de 150 px : des titres plus petits, le bouton plus serré */
  .mini { padding: 10px 10px 38px; gap: 6px; }
  .mini-avant .mini-titre, .mini-apres .mini-titre { font-size: 1rem; }
  .mini-menu, .mini-avant .mini-texte { font-size: .8125rem; }
  .mini-bouton { padding: 4px 8px; }
}
@media (max-width: 720px) {
  .avap { height: 300px; }
}
.telephone { width: 252px; margin: 0 auto; padding: 12px; border: 7px solid var(--encre); border-radius: 24px; background: var(--papier); }
.tache { margin-top: 5px; padding: 5px 8px; background: var(--surface); border-left: 3px solid var(--sauge); font-size: var(--t-mini); line-height: 1.3; }
.ecran .zt { font-size: 1rem; }
.ecran .zp { margin-top: 2px; font-size: var(--t-mini); }
.installer { margin-top: 8px; padding: 4px; text-align: center; background: var(--ardoise); color: var(--sur-ardoise); font: 600 var(--t-mini) var(--police-texte); }
/* la 3D : les trois rectangles du logo, en plaques dans l'espace */
.espace { height: 220px; display: grid; place-items: center; perspective: 700px; }
.objet { position: relative; width: 150px; height: 110px; transform-style: preserve-3d; transition: transform .12s linear; }
.objet span { position: absolute; display: block; }
.objet .p-sauge { left: 0; top: 18px; width: 50px; height: 38px; background: var(--sauge); transform: translateZ(-40px); }
.objet .p-ardoise { left: 55px; top: 0; width: 98px; height: 78px; background: var(--ardoise); transform: translateZ(-80px); }
.objet .p-olive { left: 39px; top: 40px; width: 46px; height: 71px; background: var(--olive); transform: translateZ(10px); box-shadow: 0 0 0 4px var(--papier); }

/* ---------- la demande ---------- */
.demande { width: var(--largeur); margin: var(--respiration) auto 0; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.demande-intro p { color: var(--encre-2); margin-top: var(--e-4); max-width: 44ch; }
.demande-intro h2 { max-width: 14ch; }
.demande-direct { font-size: var(--t-petit); }
.formulaire { display: grid; gap: var(--e-2); }
.formulaire label { font-weight: 600; font-size: var(--t-petit); }
.facultatif { font-weight: 400; color: var(--encre-2); }
.formulaire textarea, .formulaire input {
  width: 100%; padding: 12px 14px; border: var(--filet) solid var(--trait); border-radius: var(--angle); background: var(--papier); color: var(--encre);
  font: 400 var(--t-texte)/1.55 var(--police-texte); transition: background-color var(--duree-lumiere) ease;
}
.formulaire textarea { resize: vertical; min-height: 170px; background: var(--surface); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-top: var(--e-3); }
.champs-2 > div { display: grid; gap: var(--e-2); }
.formulaire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-4); }
.formulaire-note { font-size: var(--t-petit); color: var(--encre-2); }
.formulaire-etat { font-weight: 600; color: var(--accent); min-height: 1.6em; }
.formulaire-etat[data-etat="erreur"] { color: var(--erreur); }
.formulaire [aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }
.formulaire-sans-js { margin-top: var(--e-4); }

/* ---------- la preuve : la salle des machines, sombre dans les deux thèmes ---------- */
.zone-capot, .preuve {
  --papier: #0b0f1a; --surface: #141a2b; --encre: #eef0f5; --encre-2: #b4bccb; --accent: #9ccabd; --trait: #6b7590; --trait-doux: #262d40;
  background-color: var(--papier); color: var(--encre); color-scheme: dark;
  background-image: linear-gradient(rgba(238, 240, 245, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 240, 245, .035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.preuve {
  margin-top: var(--respiration); padding: var(--respiration) max(var(--goutiere), calc((100% - 1240px) / 2));
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 72px); align-items: start;
}
.affirmation { margin-top: var(--e-5); font: 300 clamp(1.75rem, 1rem + 2.6vw, 3.25rem)/1.32 var(--police-titre); letter-spacing: -.01em; }
.mesuree { font: 500 .74em/1 var(--police-mesure); letter-spacing: -.02em; background: var(--olive); color: var(--sur-olive); padding: .06em .28em .1em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preuve-chute { margin-top: var(--e-5); color: var(--encre-2); max-width: 46ch; }
.preuve-actions { margin-top: var(--e-6); }
.preuve-cascade h3 { font: 500 var(--t-mini)/1.4 var(--police-mesure); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); margin-bottom: var(--e-4); }
.cascade { list-style: none; margin: 0; padding: 0; font: 500 var(--t-mini)/1.3 var(--police-mesure); }
.cascade li { display: grid; grid-template-columns: minmax(96px, 190px) 1fr auto; gap: 14px; align-items: center; padding: 7px 0; border-bottom: var(--filet) solid var(--trait-doux); }
.cascade .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cascade .piste { position: relative; height: 10px; background: var(--surface); }
.cascade .barre { position: absolute; top: 0; bottom: 0; background: var(--ardoise); }
.cascade .barre.navigation { background: #eef0f5; }
.cascade .barre.css, .cascade .barre.link { background: var(--sauge); }
.cascade .barre.script { background: var(--olive); }
.cascade .barre.fetch, .cascade .barre.xmlhttprequest { background: #9aa3b5; }
.cascade .info { color: var(--encre-2); text-align: right; white-space: nowrap; }
.methode { margin-top: var(--e-5); font-size: var(--t-petit); }
.methode summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.methode dl { margin: var(--e-4) 0 0; display: grid; grid-template-columns: 11rem 1fr; gap: var(--e-2) var(--e-5); }
.methode dt { font: 500 var(--t-mini)/1.6 var(--police-mesure); }
.methode dd { margin: 0; color: var(--encre-2); }

/* ---------- le pied de page : les mesures, le plan, l'identité ---------- */
.pied { width: var(--largeur); margin: 0 auto; padding: var(--e-7) 0 var(--e-7); }
.pied-mesures { padding: var(--e-3) 0; border-bottom: var(--filet) solid var(--trait-doux); }
.pied-mesures p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.pied-mesures .etiquette { margin: 0 var(--e-2) 0 0; }
.puce-mesure { font: 500 var(--t-mini)/1.3 var(--police-mesure); padding: 5px 9px; background: var(--surface); border-left: 3px solid var(--sauge); white-space: nowrap; }
.mesure-sens { font-size: var(--t-petit); color: var(--encre-2); margin-right: var(--e-2); }
/* la mention du cache, après la mesure du poids : petite et discrète partout, même dans la grande phrase de la preuve */
.mesure-note { margin: 0 .3em; font: 400 var(--t-petit)/1.4 var(--police-texte); letter-spacing: 0; color: var(--encre-2); white-space: normal; }
.pied-mesures a { font-size: var(--t-petit); }
.pied-plan { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: var(--e-6); padding: var(--e-7) 0; }
.pied ul, .pied-portes, .pied-liens { list-style: none; margin: 0; padding: 0; }
.pied-portes a { display: inline-block; padding: 3px 0; font: 300 clamp(1.4rem, 1rem + 1.3vw, 2.1rem)/1.25 var(--police-titre); color: var(--encre); text-decoration: none; }
.pied-portes a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.pied-liens a { display: inline-block; padding: 5px 0; color: var(--encre); }
.pied-qui svg { width: min(340px, 100%); height: auto; color: var(--encre); display: block; margin-bottom: var(--e-4); }
.pied-qui p { color: var(--encre-2); font-size: var(--t-petit); }
.pied-legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); padding-top: var(--e-4); border-top: var(--filet) solid var(--trait-doux); font-size: var(--t-petit); color: var(--encre-2); }
.pied-legal a { color: var(--encre-2); }
.pied-credit { margin-top: var(--e-3); font-size: var(--t-mini); line-height: 1.5; color: var(--encre-2); max-width: 90ch; }

/* ---------- le logo vivant : au survol, les trois plans s'écartent ---------- */
.logo-wc06 rect { transition: transform .6s var(--courbe); }
.logo-wc06.vivant:hover .r-olive, .logo-wc06.vivant:hover .trou { transform: translate(-18px, 16px); }
.logo-wc06.vivant:hover .r-sauge { transform: translate(-14px, -10px); }
.logo-wc06.vivant:hover .r-ardoise { transform: translate(14px, -12px); }

/* ---------- le capot ouvert : chaque élément montre ses contours ---------- */
body.capot main *, body.capot .pied * { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1px; }
body.capot .vise { outline: 2px solid var(--accent) !important; background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.capot-panneau {
  position: fixed; z-index: 40; top: var(--e-4); right: var(--e-4); bottom: var(--e-4); width: 340px; overflow: auto; padding: var(--e-5);
  background: #0b0f1a; color: #eef0f5; font: 500 var(--t-mini)/1.5 var(--police-mesure); box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.capot-panneau[hidden] { display: none; }
.capot-titre { color: var(--olive); text-transform: uppercase; letter-spacing: .08em; }
.capot-aide { color: #b4bccb; margin: 4px 0 14px; }
.capot-mesures { list-style: none; margin: 8px 0 14px; padding: 0; }
.capot-mesures li { padding: 3px 0; }
.capot-mesures b { color: var(--olive); font-weight: 500; }
.capot-fiche { min-height: 128px; margin-bottom: var(--e-5); padding: 12px; border: 1px solid #3a4258; }
.capot-fiche p { margin: 0 0 6px; overflow-wrap: anywhere; }
.capot-fiche b { color: var(--olive); font-weight: 500; }
.capot-plan { list-style: none; margin: var(--e-2) 0 var(--e-5); padding: 0; }
.capot-plan button { display: block; width: 100%; padding: 4px 0; border: 0; background: none; color: #eef0f5; font: inherit; text-align: left; cursor: pointer; }
.capot-plan button:hover, .capot-plan button:focus-visible { color: var(--olive); text-decoration: underline; }
.capot-plan .n3 button { padding-left: 14px; }
.capot-fermer { background: #eef0f5; color: #0b0f1a; border-color: #eef0f5; }
@media (min-width: 1100px) {
  body.capot { margin-right: 372px; --largeur: min(1240px, calc(100vw - 372px - 2 * var(--goutiere))); }
}

/* ---------- les pages intérieures ---------- */
.fil { width: var(--largeur); margin: var(--e-6) auto 0; font: 500 var(--t-mini)/1.4 var(--police-mesure); color: var(--encre-2); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; }
.fil li + li::before { content: '/'; margin-right: var(--e-2); color: var(--encre-2); }
.fil a { color: var(--encre-2); }
.page-tete { width: var(--largeur); margin: var(--e-5) auto 0; display: grid; grid-template-columns: 7fr 4fr; gap: clamp(28px, 4vw, 72px); align-items: end; }
.page-tete h1 { font: 300 var(--t-h1)/1.04 var(--police-titre); letter-spacing: -.018em; }
.page-tete h1 em { font-style: normal; font-weight: 400; text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: .12em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.chapeau { margin-top: var(--e-5); font-size: var(--t-chapeau); color: var(--encre-2); max-width: 46ch; }
.fiche-technique { margin: 0; padding: var(--e-5); background: var(--surface); border-left: 4px solid var(--sauge); font-size: var(--t-petit); }
.fiche-technique dt { font: 500 var(--t-mini)/1.4 var(--police-mesure); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); }
.fiche-technique dd { margin: 2px 0 var(--e-3); }
.fiche-technique dd:last-child { margin-bottom: 0; }
.section { width: var(--largeur); margin: var(--respiration) auto 0; }
.section-tete { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: var(--e-6); }
.section-tete p { color: var(--encre-2); max-width: 52ch; }

/* le site qui se construit : quatre états d'un même site fictif */
.construction { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: 2px; }
.etapes button {
  width: 100%; display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--e-3); align-items: baseline; padding: 14px 16px; border: 0; border-left: 4px solid transparent;
  background: transparent; color: var(--encre); text-align: left; font: 400 var(--t-texte)/1.4 var(--police-texte); cursor: pointer;
}
.etapes button:hover { background: var(--surface); }
.etapes button[aria-pressed="true"] { background: var(--surface); border-left-color: var(--sauge); }
.etapes .num { font: 500 var(--t-mini) var(--police-mesure); color: var(--encre-2); }
.etapes b { display: block; font: 500 1.25rem/1.3 var(--police-titre); }
.etapes small { display: block; font-size: var(--t-petit); color: var(--encre-2); margin-top: 2px; }
.chantier { --c-fond: #fbf7ef; --c-encre: #2b211b; --c-accent: #9a3d22; position: relative; overflow: hidden; height: 360px; border-top: 0; background: #fff; color: #222; font-family: var(--police-texte); }
.chantier .ch-nav, .chantier .ch-hero, .chantier .ch-cartes { position: absolute; left: 24px; right: 24px; transition: all .6s var(--courbe); }
.chantier .ch-nav { top: 18px; height: 22px; display: flex; justify-content: space-between; align-items: center; }
.chantier .ch-logo { width: 90px; height: 16px; background: #ccc; }
.chantier .ch-liens { width: 160px; height: 10px; background: repeating-linear-gradient(90deg, #ccc 0 34px, transparent 34px 42px); }
.chantier .ch-hero { top: 64px; height: 150px; background: #e6e6e6; display: grid; align-content: center; padding: 0 24px; gap: 10px; }
.chantier .ch-titre { width: 62%; height: 22px; background: #c4c4c4; }
.chantier .ch-sous { width: 44%; height: 10px; background: #d2d2d2; }
.chantier .ch-btn { width: 120px; height: 30px; background: #bdbdbd; margin-top: 6px; }
.chantier .ch-cartes { top: 232px; height: 104px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chantier .ch-cartes span { background: #ececec; border: 1px dashed #bbb; }
.chantier .ch-code { position: absolute; inset: 0; margin: 0; padding: 18px 22px; background: #0b0f1a; color: #cfd6e4; font: 500 12px/1.65 var(--police-mesure); white-space: pre; opacity: 0; transition: opacity .5s ease; overflow: hidden; }
.chantier .ch-code .t { color: #9ccabd; } .chantier .ch-code .a { color: #d2cc95; } .chantier .ch-code .c { color: #8a93a6; }
.chantier .ch-mesure { position: absolute; right: 16px; bottom: 14px; padding: 4px 9px; background: var(--olive); color: var(--sur-olive); font: 500 12px var(--police-mesure); opacity: 0; transition: opacity .5s ease; }
/* état 2 : le dessin */
.chantier[data-etat="2"] .ch-hero, .chantier[data-etat="4"] .ch-hero { background: linear-gradient(135deg, #3b5d55, #6f9a8f); }
.chantier[data-etat="2"] .ch-titre, .chantier[data-etat="4"] .ch-titre { background: #fbf7ef; height: 26px; }
.chantier[data-etat="2"] .ch-sous, .chantier[data-etat="4"] .ch-sous { background: #e7dcc4; }
.chantier[data-etat="2"] .ch-btn, .chantier[data-etat="4"] .ch-btn { background: #d2cc95; }
.chantier[data-etat="2"] .ch-logo, .chantier[data-etat="4"] .ch-logo { background: #2b211b; }
.chantier[data-etat="2"] .ch-liens, .chantier[data-etat="4"] .ch-liens { background: repeating-linear-gradient(90deg, #6f6a62 0 34px, transparent 34px 42px); }
.chantier[data-etat="2"] .ch-cartes span, .chantier[data-etat="4"] .ch-cartes span { border: 0; background: #f1ead9; }
.chantier[data-etat="2"] .ch-cartes span:nth-child(2), .chantier[data-etat="4"] .ch-cartes span:nth-child(2) { background: #e6eee9; }
.chantier[data-etat="3"] .ch-code { opacity: 1; }
.chantier[data-etat="4"] .ch-mesure { opacity: 1; }
.chantier[data-etat="4"] { background: #fbf7ef; }

/* trois offres, chacune sur un rectangle du logo */
.offres-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.offres-3.quatre { grid-template-columns: repeat(4, 1fr); }
.offres-3.quatre .carte:nth-child(4) { border-top-color: var(--sauge); }
.carte { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); background: var(--surface); border-top: 10px solid var(--sauge); }
.carte:nth-child(2) { border-top-color: var(--olive); }
.carte:nth-child(3) { border-top-color: var(--ardoise); }
.carte h3 { font-size: var(--t-h3); }
.carte p { color: var(--encre-2); }
.carte dl { margin: auto 0 0; padding-top: var(--e-3); border-top: var(--filet) solid var(--trait-doux); font-size: var(--t-petit); }
.carte dt { font: 500 var(--t-mini)/1.4 var(--police-mesure); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); }
.carte dd { margin: 2px 0 0; }

/* la méthode : une ligne d'horizon, cinq étapes */
.horizon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-4); position: relative; }
.horizon::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--trait-doux); }
.horizon li { position: relative; padding-top: 38px; }
.horizon li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--papier); border: 2px solid var(--accent); }
.horizon li:last-child::before { background: var(--soleil); border-color: var(--encre); }
.horizon .num { font: 500 var(--t-mini) var(--police-mesure); color: var(--encre-2); }
.horizon b { display: block; font: 500 1.2rem/1.3 var(--police-titre); margin: 4px 0 6px; }
.horizon p { font-size: var(--t-petit); color: var(--encre-2); }

/* où j'interviens */
.lieux { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.lieux li { padding: 8px 14px; background: var(--surface); font-size: var(--t-petit); }
.lieux li.ici { background: var(--sauge); color: var(--sur-sauge); font-weight: 600; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); }
.encart { padding: var(--e-6); background: var(--surface); }
.encart h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom: var(--e-4); }
.encart p { color: var(--encre-2); }
.encart p + p { margin-top: var(--e-3); }
.questions details { border-bottom: var(--filet) solid var(--trait-doux); }
.questions summary { padding: var(--e-4) 0; cursor: pointer; font: 400 var(--t-h3)/1.3 var(--police-titre); }
.questions details p { padding: 0 0 var(--e-4); color: var(--encre-2); max-width: 70ch; }
.phrase-fin { width: var(--largeur); margin: var(--respiration) auto 0; padding: var(--e-7) 0 0; border-top: var(--filet) solid var(--trait-doux); }
.phrase-fin .phrase { font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem); }
.phrase-fin .reponse-courte { margin-top: var(--e-5); }

/* ---------- écrans moyens ---------- */
@media (max-width: 1000px) {
  .reponse, .demande, .preuve, .page-tete, .section-tete, .construction, .deux { grid-template-columns: 1fr; }
  .pied-plan { grid-template-columns: 1fr 1fr; }
  .pied-qui { grid-column: 1 / -1; }
  .offres-3, .offres-3.quatre { grid-template-columns: 1fr; }
  .horizon { grid-template-columns: 1fr; gap: 0; }
  .horizon::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .horizon li { padding: 0 0 var(--e-5) 36px; }
  .menu { grid-template-columns: 1fr; }
}
/* ---------- téléphones ---------- */
@media (max-width: 720px) {
  .tete { top: 12px; }
  .tete-marque { padding: 6px 0; }
  .tete-marque svg { width: 118px; }
  .tete-outils { padding: 3px; }
  .outil { padding: 8px 9px; }
  .outil-libelle, .outil-ecrire { display: none; }
  .outil-capot .long { display: none; }
  .outil-capot .court { display: inline; }
  .menu { top: 72px; padding: var(--e-5); }
  .reglage { position: static; }
  .tete-outils { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* sinon la plaque retient le panneau dans sa largeur */
  .panneau-lumiere { top: calc(100% + 8px); left: 0; right: 0; width: auto; }
  .scene { height: max(280px, 46svh); }
  .scene.bande { height: 150px; }
  .scene-legende { bottom: 40px; padding: 8px 10px; font-size: var(--t-mini); }
  .scene-legende .scene-moment { display: none; }   /* l'heure est déjà dans l'en-tête */
  .feuille { margin-top: -24px; padding: var(--e-5) var(--goutiere) 0; }
  .saut { display: block; flex-basis: 100%; height: 0; }   /* empilée comme le logo : le vert-de-gris, puis l'olive et « veut », puis l'ardoise */
  .phrase { row-gap: .14em; line-height: 1.3; }
  .champs-2 { grid-template-columns: 1fr; }
  .cascade li { grid-template-columns: minmax(0, 1fr) auto; }
  .cascade .piste { grid-column: 1 / -1; grid-row: 2; }
  .methode dl { grid-template-columns: 1fr; }
  .agenda { gap: 4px; }
  .creneau { font-size: var(--t-mini); }
  .pied-plan { grid-template-columns: 1fr; }
  .capot-panneau { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 48vh; }
  .chantier { height: 300px; }
  .chantier .ch-cartes { top: 220px; height: 64px; }
  .chantier .ch-hero { height: 136px; }
}
/* téléphones étroits : « Comment c'est fait ? » ne tient plus à côté du logo ; l'en-tête passe sur deux lignes */
@media (max-width: 520px) {
  .tete { flex-wrap: wrap; row-gap: 8px; }
  .tete-outils { margin-left: auto; }
  .outil-capot { font-size: var(--t-mini); }
  .menu { top: 124px; }
  .scene.bande { height: 200px; }
  .scene { height: max(320px, 50svh); }
}
@media (max-width: 380px) {
  .outil-heure { display: none; }
  .outil-lumiere { padding: 8px 12px; }
}

/* ---------- mouvement réduit : la lumière change sans glisser, rien ne bouge seul ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.reduit *, .reduit *::before, .reduit *::after { transition: none !important; animation: none !important; }

/* l'outil de mesure de la phrase (largeur de chaque mot), hors de l'écran */
.mesure-texte { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: pre; }
.h2-moyen { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom: var(--e-4); }
.h2-marge { margin-bottom: var(--e-4); }
.lieux-intro { color: var(--encre-2); margin: 0 0 var(--e-4); }
.lieux + .lieux-intro { margin: var(--e-4) 0 0; }
.phrase-fin .etiquette { margin-bottom: var(--e-5); }

/* ---------- la démonstration « tableau de bord » (données fictives) : une série, des barres fines, une tuile par chiffre ---------- */
.tableau { display: grid; gap: var(--e-4); font-size: var(--t-petit); }
.tb-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.tb-nom { font-weight: 600; }
.tb-periode { display: inline-flex; border: var(--filet) solid var(--trait); border-radius: var(--angle); }
.tb-choix { min-height: 32px; padding: 4px 12px; border: 0; background: transparent; color: var(--encre); font: 500 var(--t-mini) var(--police-texte); cursor: pointer; }
.tb-choix[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.tb-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--e-2); }
.tb-tuiles li { display: grid; gap: 2px; align-content: start; padding: 10px 12px; background: var(--surface); }
.tb-libelle, .tb-ecart { font-size: var(--t-mini); color: var(--encre-2); }
.tb-valeur { font: 600 1.5rem/1.15 var(--police-texte); font-variant-numeric: tabular-nums; }
.tb-graphe { margin: 0; }
.tb-titre { font-weight: 600; margin-bottom: var(--e-2); }
.tb-zone { display: flex; height: 140px; padding-top: 20px; }
.tb-colonne { flex: 1; display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.tb-barre { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-bottom: var(--filet) solid var(--trait); background: transparent; cursor: pointer; }
.tb-trait { display: block; width: min(24px, 64%); background: var(--accent); border-radius: 4px 4px 0 0; transition: opacity .2s ease; }
.tb-barre:hover .tb-trait, .tb-barre:focus-visible .tb-trait { opacity: .72; }
.tb-max { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font: 600 var(--t-mini)/1.4 var(--police-texte); color: var(--encre); }
.tb-jour { padding-top: 4px; text-align: center; font-size: var(--t-mini); color: var(--encre-2); }
.tb-lecture { min-height: 1.5em; margin-top: var(--e-2); font-size: var(--t-mini); color: var(--encre-2); }
.tb-sous-titre { font-weight: 600; margin-bottom: 4px; }
.tb-factures ul { list-style: none; margin: 0; padding: 0; }
.tb-factures li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 5px 0; border-bottom: var(--filet) solid var(--trait-doux); }
.tb-num { font: 500 var(--t-mini) var(--police-mesure); }
.tb-etat::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.payee .tb-etat::before { background: var(--accent); }
.attente .tb-etat::before { border: 1.5px solid var(--encre-2); box-sizing: border-box; }
.section > .fenetre.demo { max-width: 860px; }   /* une démonstration seule ne s'étire pas sur toute la page */

/* ---------- les pages légales : une colonne lisible, des sections rapprochées ---------- */
.section.juridique { max-width: 760px; margin-left: max(var(--goutiere), calc((100% - 1240px) / 2)); margin-top: var(--e-7); }
.juridique h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: var(--e-3); }
.juridique p { color: var(--encre-2); max-width: 68ch; }
.juridique p + p { margin-top: var(--e-3); }
.juridique .base { font: 500 var(--t-mini)/1.5 var(--police-mesure); color: var(--encre-2); }
.juridique .mise-a-jour { margin-top: var(--e-5); font-size: var(--t-petit); }
.identite { margin: 0; display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: var(--e-2) var(--e-5); }
.identite dt { font: 500 var(--t-mini)/1.6 var(--police-mesure); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); }
.identite dd { margin: 0; }
@media (max-width: 720px) { .identite { grid-template-columns: 1fr; gap: 2px; } .identite dd { margin-bottom: var(--e-3); } }

/* ---------- l'accueil qui vend (choisi par Mathieu le 15/10) : à gauche, qui je suis, ce que je fabrique et la preuve
   mesurée ; à droite, les trois mots, étiquetés et expliqués ; la phrase du soleil devient une petite légende.
   La version d'avant reste en réserve (maquettes/systeme/index.html) : ces règles ne touchent que la nouvelle. ---------- */
.accueil:has(.vente) .scene { height: clamp(280px, 40vh, 480px); }
.accueil:has(.vente) .scene-legende {
  left: auto; right: max(var(--goutiere), calc((100% - 1240px) / 2)); bottom: 64px; max-width: min(640px, calc(100% - 2 * var(--goutiere)));
  padding: 6px 10px; font-size: var(--t-mini); line-height: 1.4;
}
.accueil:has(.vente) .scene-legende .scene-moment { display: none; }   /* l'heure est déjà dans l'en-tête */

.vente-titre { margin: 0 0 var(--e-5); font: 300 clamp(2.125rem, 1.25rem + 2.5vw, 3.5rem)/1.06 var(--police-titre); letter-spacing: -.02em; text-wrap: balance; }
.vente-promesse { margin: 0 0 var(--e-4); max-width: 30em; font: 400 var(--t-h3)/1.35 var(--police-titre); }
.vente-portes ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.vente-portes a { display: inline-block; padding: 4px 0; font-size: var(--t-petit); font-weight: 500; color: var(--encre); text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--encre) 40%, transparent); }
.vente-portes a:hover { text-decoration-color: currentColor; }
/* la preuve, mesurée par le navigateur du visiteur (chaque data-mesure) ; sans JavaScript, seulement ce qui est vrai par
   construction (0 cookie, 0 site tiers) : la mesure du temps et sa note attendent JavaScript, leur place gardée */
.vente-preuves { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.vente-preuves-titre { flex-basis: 100%; margin: 0; font: 500 var(--t-mini)/1 var(--police-mesure); color: var(--encre-2); }
.vente-preuves ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.vente-preuves li { display: flex; }
.vente-preuves b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; font: 500 var(--t-mini)/1.2 var(--police-mesure); white-space: nowrap; color: var(--encre); background: var(--surface); }
.vente-preuves [data-avec-js][hidden] { display: revert !important; visibility: hidden; }
.vente-preuves li[data-avec-js][hidden] { display: flex !important; }
.mesuree-vive b::before, .pastille-vive { content: ''; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mesuree-vive b::before { visibility: hidden; }   /* la place est gardée : la pastille apparaît sans rien pousser */
.vente-preuves.vive .mesuree-vive b::before { visibility: visible; }
.vente-preuves-note { flex-basis: 100%; margin: var(--e-1) 0 0; font-size: var(--t-mini); color: var(--encre-2); }
.vente-preuves-note .pastille-vive { margin-right: 7px; vertical-align: .08em; }

.trois-mots { container-type: inline-size; }
.trois-mots-titre { margin: 0 0 var(--e-3); font: 400 clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem)/1.15 var(--police-titre); letter-spacing: -.01em; }
.trois-mots .invite { max-width: 32em; margin-bottom: var(--e-5); }
/* la phrase s'empile comme le logo (le vert-de-gris, puis l'olive et « veut », puis l'ardoise) et prend la largeur de
   sa colonne : 7,8 % de la colonne laisse au plus long des besoins (12,3 em, plus le point) sa place */
.trois-mots .saut { display: block; flex-basis: 100%; height: 0; }
.trois-mots .phrase { font-size: min(var(--t-phrase), 7.8cqi); row-gap: calc(var(--t-mini) + 16px); padding-top: calc(var(--t-mini) + 9px); }
/* chaque mot dit ce qu'il demande : l'étiquette visible est aussi le nom du champ */
.mot-etiquette { position: absolute; left: 0; bottom: calc(100% + 6px); font: 500 var(--t-mini)/1 var(--police-mesure); letter-spacing: .01em; white-space: nowrap; color: var(--encre-2); cursor: pointer; }

@media (min-width: 960px) {
  .ouverture:has(.vente) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
}
@media (max-width: 959px) {
  .trois-mots { margin-top: var(--e-7); padding-top: var(--e-6); border-top: var(--filet) solid var(--trait-doux); }
}
@media (max-width: 720px) {
  .accueil:has(.vente) .scene { height: max(260px, 36svh); }
  .accueil:has(.vente) .scene-legende { display: none; }   /* sur un téléphone, la scène se suffit : le message d'abord */
  .vente-portes ul { gap: 0 var(--e-4); }
}
@media (max-width: 520px) {
  .accueil:has(.vente) .scene { height: max(270px, 34svh); }
}