/* PROOPULS — site vitrine, nouvelle DA « futuriste pro » (30/10/2026, maquette 9 de Essais_DA).
   Deux affichages : nuit (par défaut) et clair, au choix du visiteur (pastille lune / soleil, js/main.js).
   Règle de Johan : orange sur fond sombre, bleu sur fond clair (logo, mots des titres, bouton « Nous contacter »).
   Police unique : Plus Jakarta Sans (charte), hébergée avec le site. */

@font-face { font-family: "Jakarta"; src: url("../assets/polices/PlusJakartaSans_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/polices/PlusJakartaSans_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/polices/PlusJakartaSans_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/polices/PlusJakartaSans_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* Nuit : la nuit de la charte, panneaux en verre, halos bleu + orange */
:root {
  --fond: #110B35;
  --fond2: #1A1446;
  --ligne: rgba(141, 179, 234, .14);
  --bord: rgba(141, 179, 234, .28);
  --txt: #F2F3FA;
  --doux: #A6ABD0;
  --titre-haut: #FFFFFF;
  --titre-bas: #B9C6EE;
  --nav-b: #F2F3FA;
  --nav-b-txt: #110B35;
  --voile: color-mix(in srgb, #1A1446 60%, transparent);
  --bouton: rgba(26, 20, 70, .6);
  /* l'accent : orange sur fond sombre */
  --accent: #E37E12;
  --accent-degrade: linear-gradient(135deg, #E37E12, #C05918);
  --accent-ombre: rgba(227, 126, 18, .6);
  --mot-degrade: linear-gradient(90deg, #E37E12, #C05918);
  --bleu-ui: #8DB3EA;
  /* halos et motif */
  --halo-bleu: rgba(19, 92, 192, .55);
  --halo-orange: rgba(227, 126, 18, .30);
  --halo-graph: rgba(59, 123, 240, .38);
  --motif-trait: rgba(141, 179, 234, .10);
  /* graphiques : Ciel et bleu sur fond sombre */
  --g-bleu: #8DB3EA;
  --g-bleu2: #2F7CEA;
  --g-orange: #E37E12;
  --g-orange2: #C05918;
  --g-encre: #FFFFFF;
  --g-grille: rgba(141, 179, 234, .10);
  --g-rien: rgba(255, 255, 255, .45);
  --g-essai: rgba(166, 171, 208, .55);
  /* bon / mauvais : couleurs d'état de la charte, éclaircies sur fond sombre (jamais l'orange) */
  --hausse: #3FBFB0;
  --baisse: #F08070;
  --ombre-verre: none;
  --largeur: 1240px;
  --gouttiere: 24px;
  --sortie: cubic-bezier(.22, 1, .36, 1);
  --verre: linear-gradient(var(--fond2), var(--fond2)) padding-box, linear-gradient(180deg, var(--bord), transparent 70%) border-box;
  color-scheme: dark;
}
/* Clair : fond Brume, panneaux blancs, mêmes halos et même motif ; l'accent passe au bleu du logo */
[data-theme="clair"] {
  --fond: #EEF3FB;
  --fond2: #FFFFFF;
  --ligne: rgba(17, 11, 53, .09);
  --bord: rgba(17, 11, 53, .10);
  --txt: #110B35;
  --doux: #5B6177;
  --titre-haut: #110B35;
  --titre-bas: #3A3F6B;
  --nav-b: #110B35;
  --nav-b-txt: #FFFFFF;
  --voile: rgba(255, 255, 255, .7);
  --bouton: rgba(255, 255, 255, .7);
  --accent: #2F7CEA;
  --accent-degrade: linear-gradient(135deg, #2F7CEA, #2A3AB5);
  --accent-ombre: rgba(47, 124, 234, .5);
  --mot-degrade: linear-gradient(90deg, #2F7CEA, #2A3AB5);
  --bleu-ui: #135CC0;
  --halo-bleu: rgba(59, 123, 240, .34);
  --halo-orange: rgba(227, 126, 18, .22);
  --halo-graph: rgba(59, 123, 240, .20);
  --motif-trait: rgba(19, 92, 192, .09);
  --g-bleu: #135CC0;
  --g-encre: #110B35;
  --g-grille: rgba(17, 11, 53, .08);
  --g-rien: rgba(17, 11, 53, .40);
  --g-essai: rgba(91, 97, 119, .45);
  --hausse: #0E7C7B;
  --baisse: #912D1C;
  --ombre-verre: 0 24px 60px -36px rgba(17, 11, 53, .35);
  color-scheme: only light;
}
/* Téléphone en mode sombre : certains navigateurs (Samsung Internet) repeignent les sites qui ne réagissent pas à ce réglage.
   Cette règle ne change rien à l'affichage : elle montre seulement que le site gère déjà son affichage sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { color-scheme: dark; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-padding-top: 80px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--fond); }
body { margin: 0; position: relative; overflow-x: hidden; font-family: "Jakarta", "Segoe UI", system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; word-spacing: .04em; color: var(--txt); background: var(--fond); transition: background-color .3s, color .3s; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.1; }
p { margin: 0; }
main { position: relative; }

/* Les titres : dégradé vertical discret, et le dégradé du logo sur les mots de couleur (voulu, Johan 30/10) */
h1, h2 { letter-spacing: -.03em; word-spacing: .1em; padding-bottom: .08em;
  background: linear-gradient(180deg, var(--titre-haut) 30%, var(--titre-bas)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orange, .or { background: var(--mot-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
h3 { letter-spacing: -.02em; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); position: relative; z-index: 2; }
.mono, .surtitre { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.surtitre { display: inline-block; margin-bottom: 14px; font-size: 13.5px; } /* un peu plus grand que les étiquettes .mono (Johan, 30/10) */
.ouverture .surtitre { font-size: 14px; color: var(--txt); } /* accueil : surtitre simple, sans pastille (Johan, 30/10), mais lisible face au grand titre */
.doux { color: var(--doux); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pour-clair { display: none; }
[data-theme="clair"] .pour-clair { display: block; }
[data-theme="clair"] .pour-nuit { display: none; }

/* Le décor du haut de page : deux halos flous et le motif « courbes » (couleur selon l'affichage) */
.decor { position: absolute; inset: 0 0 auto; height: 1100px; overflow: hidden; pointer-events: none; z-index: 0; }
.lueur { position: absolute; border-radius: 50%; filter: blur(120px); }
.lueur-1 { width: 640px; height: 380px; left: calc(50% - 420px); top: 330px; background: var(--halo-bleu); }
.lueur-2 { width: 560px; height: 340px; left: calc(50% - 40px); top: 390px; background: var(--halo-orange); }
.motif { position: absolute; inset: 0; background: var(--motif-trait);
  -webkit-mask: url("../assets/images/motif_courbes.svg") top center / cover no-repeat; mask: url("../assets/images/motif_courbes.svg") top center / cover no-repeat; }
.page .lueur-1 { top: 120px; }
.page .lueur-2 { top: 200px; }

/* Panneaux en verre : fond plein, bordure claire en haut qui s'efface vers le bas */
.verre, .benefice, .carte, .tableau, .atelier, .engagement, .etape-carte, .carte-service, .carte-graphique, .chiffre-cle, .indicateur,
.pupitre, .poids, .role-carte, .methode, .carte-nuit, .etape-chemin, .carte-formulaire, .encart-nuit, .en-bref, .essai-ligne {
  background: var(--verre); border: 1px solid transparent; border-radius: 18px; box-shadow: var(--ombre-verre); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s var(--sortie), filter .2s, box-shadow .2s; }
.bouton-orange { background: var(--accent-degrade); color: #FFFFFF; box-shadow: 0 10px 40px -12px var(--accent-ombre); }
@media (hover: hover) and (pointer: fine) { .bouton-orange:hover { transform: translateY(-2px); filter: brightness(1.06); } }
.bouton-clair { border: 1px solid var(--ligne); background: var(--voile); color: inherit; font-weight: 500; }
.bouton-clair:hover { border-color: var(--bord); }
.bouton:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fleche { display: inline-block; transition: transform .2s var(--sortie); }
@media (hover: hover) and (pointer: fine) { a:hover .fleche { transform: translateX(4px); } }
/* Retour à l'appui : ce qui se clique se tasse un peu dès qu'on appuie (skills apple-design et emil-design-eng) */
.bouton:active, .menu .bouton:active, .pas button:active:not(:disabled), .choix button:active, .onglets-service button:active, .tuiles-claires button:active, .remise:active, .pastille button:active, .fenetre-rdv .fermer:active { transform: scale(.97); }
.lien-bleu, .lien-section { display: inline-flex; gap: 8px; margin-top: 28px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--txt); text-decoration: none; }
.lien-bleu:hover, .lien-section:hover { color: var(--accent); }
.lien-bleu-texte, .texte-legal a, .engagements-grille a, .ensuite .engagement a, .formulaire .note-exemple a, .merci a { color: var(--bleu-ui); font-weight: 500; }
.lien-bleu-texte:hover { color: var(--accent); }

/* En-tête : le menu dans une barre en verre, puis la pastille nuit / clair */
/* Même hauteur en haut de page et en descendant : il ne saute pas quand on change de page (Johan, 30/10) */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px 0; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.entete.defile { background: color-mix(in srgb, var(--fond) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--ligne); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { flex: none; }
.logo img { height: 32px; width: auto; }
.logo-clair { display: none; }
[data-theme="clair"] .logo-nuit { display: none; }
[data-theme="clair"] .logo-clair { display: block; }
.entete-droite { display: flex; align-items: center; gap: 12px; }
/* Nom de la page, à côté du logo, quand le menu est replié dans le burger (pages intérieures seulement) */
.page-en-cours { display: none; }
.menu { display: flex; align-items: center; gap: 4px; font-size: 14px; border: 1px solid var(--ligne); border-radius: 12px; padding: 5px; background: var(--voile); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.menu a { position: relative; white-space: nowrap; padding: 9px 15px; color: var(--doux); text-decoration: none; border-radius: 8px; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--txt); }
/* La page en cours : une pastille pleine et un trait de l'accent sous le mot (Johan, 30/10 : le blanc seul ne se voyait pas assez) */
/* Même graisse que les autres mots : le menu ne change pas de largeur d'une page à l'autre */
.menu { position: relative; }
.menu a { z-index: 1; }
.menu a[aria-current="page"]:not(.bouton) { color: var(--txt); }
/* La pastille de la page en cours est un élément à part, posé sous le mot (positionnement par ancre, Chrome et Edge) :
   au changement de page, elle glisse de l'ancien mot au nouveau (transition de page, plus bas) */
.menu-repere { display: none; }
@supports (anchor-name: --a) {
  .menu a[aria-current="page"]:not(.bouton) { anchor-name: --page-en-cours; }
  .menu-repere { display: block; position: absolute; z-index: 0; pointer-events: none; position-anchor: --page-en-cours;
    left: anchor(left); right: anchor(right); top: anchor(top); bottom: anchor(bottom); border-radius: 8px;
    background: color-mix(in srgb, var(--bleu-ui) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bleu-ui) 30%, transparent); }
  /* le glissement au clic (js/main.js) : de la place du mot actuel à celle du mot cliqué */
  .menu:not(:has(a[aria-current="page"]:not(.bouton))) .menu-repere { opacity: 0; }
  .menu-repere.glisse { transition: left .24s var(--sortie), width .24s var(--sortie), top .24s var(--sortie), height .24s var(--sortie), opacity .2s ease; } /* finit avant le départ (260 ms, js/main.js) */
  body .menu .menu-repere.glisse.visible { opacity: 1; } /* même poids que la règle « opacity: 0 » au-dessus, et placée après */
  body .menu .menu-repere.glisse.efface { opacity: 0; }
  .menu a.quitte { color: var(--doux); }
  .menu a.vise { color: var(--txt); }
  .menu-repere::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--accent-degrade); }
}
/* Ailleurs (Firefox, Safari), la pastille reste sur le mot, sans glisser */
@supports not (anchor-name: --a) {
  .menu a[aria-current="page"]:not(.bouton) { background: color-mix(in srgb, var(--bleu-ui) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bleu-ui) 30%, transparent); }
}
.menu .bouton { padding: 9px 16px; font-size: 14px; font-weight: 500; color: #FFFFFF; box-shadow: none; border-radius: 8px; }
.menu .bouton:hover { color: #FFFFFF; }
.menu .bouton:hover:not(:active) { transform: none; }
/* Un seul « Nous contacter » à l'écran : celui du menu s'efface quand un bouton de la page est visible */
@media (min-width: 961px) {
  .menu .bouton { transition: opacity .35s ease, visibility .35s, filter .2s, transform .16s var(--sortie); }
  .bouton-double .menu .bouton { opacity: 0; visibility: hidden; }
}
@media (min-width: 961px) and (max-width: 1200px) { .menu a { padding: 9px 10px; } }
@media (min-width: 961px) and (max-width: 1020px) { .menu { font-size: 13px; } .menu a { padding: 8px 8px; } }
.pastille { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--voile); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pastille button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--doux); cursor: pointer; transition: background-color .2s, color .2s, transform .16s var(--sortie); }
.pastille button:hover { color: var(--txt); }
.pastille button[aria-pressed="true"] { background: var(--nav-b); color: var(--nav-b-txt); }
.burger { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--voile); cursor: pointer; }
.burger span { display: block; height: 2px; margin: 4px 0; background: var(--txt); border-radius: 2px; transition: transform .3s, opacity .3s; }

/* Haut de l'accueil : texte seul, centré (Johan, 30/10) */
.ouverture { position: relative; z-index: 2; text-align: center; min-height: min(100svh, 900px); display: flex; flex-direction: column; justify-content: center; padding: 120px 0 70px; }
.ouverture h1 { font-size: clamp(46px, 7vw, 96px); max-width: 1000px; margin: 26px auto 0; line-height: 1.02; }
.ouverture .intro { font-size: 19px; color: var(--doux); max-width: 620px; margin: 24px auto 0; }
.ouverture .actions { margin-top: 32px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Pages intérieures : même ouverture, centrée, l'étiquette de la page en pastille */
.bandeau { position: relative; z-index: 2; text-align: center; padding: 150px 0 40px; }
/* Pastille du haut des pages : plus grande et plus franche face au titre, avec un point lumineux de la couleur d'accent (Gemini, 30/10) */
.bandeau .surtitre { display: inline-flex; align-items: center; gap: 10px; margin: 0; border: 1px solid var(--bord); border-radius: 999px; padding: 8px 18px 8px 15px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--txt); background: var(--voile); }
.bandeau .surtitre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.bandeau h1 { font-size: clamp(42px, 6vw, 76px); max-width: 15em; margin: 24px auto 0; line-height: 1.04; }
.bandeau .intro { font-size: 19px; color: var(--doux); max-width: 640px; margin: 22px auto 0; }
.bandeau .actions { margin-top: 32px; display: flex; justify-content: center; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.bouton-lien { color: var(--txt); font-weight: 500; }
.bouton-lien:hover { color: var(--accent); }

/* Sections : toutes sur le même fond ; les anciennes sections « nuit » gardent des halos légers */
.section { position: relative; padding: clamp(64px, 10vh, 110px) 0; }
.section-nuit::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 15% 20%, color-mix(in srgb, var(--halo-bleu) 45%, transparent), transparent 70%), radial-gradient(520px 280px at 85% 65%, color-mix(in srgb, var(--halo-orange) 45%, transparent), transparent 70%); }
.titre-section { font-size: clamp(32px, 4vw, 52px); max-width: 17em; }
.chapeau { margin-top: 18px; font-size: 18px; color: var(--doux); max-width: 40em; }
.note-exemple, .mention { margin-top: 14px; font-size: 13px; color: var(--doux); }
.numero-titre { display: flex; align-items: flex-start; gap: 18px; }
.numero-titre .num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: .2em; border-radius: 12px; border: 1px solid var(--ligne); background: var(--voile); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--txt); -webkit-text-fill-color: var(--txt); }

/* Titre à gauche, texte à droite quand ils se suivent (grand écran) */
@media (min-width: 1100px) {
  .conteneur:has(> .titre-section + .chapeau) { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 64px; }
  .conteneur:has(> .titre-section + .chapeau) > * { grid-column: 1 / -1; }
  .conteneur > .titre-section:has(+ .chapeau) { grid-column: 1; max-width: none; }
  .conteneur > .titre-section + .chapeau { grid-column: 2; margin-top: 0; align-self: end; font-size: 16px; }
  .conteneur > .surtitre { justify-self: start; }
}

/* Tracés qui se dessinent (pathLength="1") ; --delai, ou --d pour l'écran */
.trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.joue .trace { animation: dessiner var(--duree, 1.3s) var(--sortie) var(--delai, var(--d, 0s)) forwards; }
.apparait { opacity: 0; }
.joue .apparait { animation: apparaitre .6s ease var(--delai, var(--d, 0s)) forwards; }
.joue .pt { transform-box: fill-box; transform-origin: center; animation: grandir .45s var(--sortie) var(--d, 0s) both; }
@keyframes dessiner { to { stroke-dashoffset: 0; } }
@keyframes apparaitre { to { opacity: 1; } }
@keyframes grandir { from { transform: scale(.6); opacity: 0; } }
/* Changement de service : le nouveau contenu sort d'un léger flou, sans repartir du vide si l'on clique vite */
@keyframes fondu-flou { from { opacity: .35; filter: blur(3px); } }
@keyframes fondu-seul { from { opacity: 0; } }

/* Apparitions au défilement */
.revele { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--sortie); transition-delay: var(--delai, 0s); }
.revele.visible { opacity: 1; transform: none; }
/* un titre en dégradé garde son dégradé pendant l'apparition */
h1.revele, h2.revele { will-change: opacity, transform; }

/* Couleurs des graphiques, selon l'affichage */
.g-grille { stroke: var(--g-grille); }
.g-axe { stroke: var(--g-grille); stroke-width: 1.5; }
.g-b { fill: var(--g-bleu); }
.g-o { fill: var(--g-orange); }
.g-encre { fill: var(--g-encre); }
.s-b { stop-color: var(--g-bleu); }
.s-b2 { stop-color: var(--g-bleu2); }
.s-o { stop-color: var(--g-orange); }
.g-bande { fill: var(--g-orange); fill-opacity: .14; }
.g-auj { stroke: var(--g-rien); stroke-dasharray: 3 5; }
.g-rond { fill: var(--fond2); stroke: var(--g-encre); stroke-width: 2.5; }
.g-reel { fill: none; stroke: var(--g-bleu); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.g-rien { fill: none; stroke: var(--g-rien); stroke-width: 2.2; stroke-dasharray: 6 6; }
.g-dec { fill: none; stroke: var(--g-orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.g-echo { fill: none; stroke: var(--g-bleu); stroke-width: 1.2; }
.g-essai { fill: none; stroke: var(--g-essai); stroke-width: 2.5; stroke-linejoin: round; }
.g-texte { fill: var(--doux); }
.g-texte-fort { fill: var(--g-encre); }
/* Graphiques de Prévoir et Simuler dessinés dans la page : leurs couleurs d'origine suivent l'affichage */
.carte-graphique svg [stroke="#110B35"] { stroke: var(--g-encre); }
.carte-graphique svg [stroke="#135CC0"] { stroke: var(--g-bleu); }
.carte-graphique svg [stroke="#E6ECF5"], .carte-nuit svg [stroke="#2E2860"] { stroke: var(--g-grille); }
.carte-graphique svg [stroke="#C9D3E3"] { stroke: var(--bord); }
.carte-graphique svg [stroke="#8D93B3"] { stroke: var(--g-rien); }
.carte-graphique svg [stroke="#A6B3CF"] { stroke: var(--g-essai); }
.carte-graphique svg [stroke-opacity=".45"] { stroke: var(--g-rien); stroke-opacity: 1; }
svg text { font-family: "Jakarta", sans-serif; font-size: 12px; font-weight: 500; fill: var(--doux); }
.hausse { color: var(--hausse); }
.baisse { color: var(--baisse); }

/* ===== Accueil ===== */

/* 2. Pourquoi : trois cartes, chacune avec son trait de graphique (C points, B dégradé, D courbes de niveau) */
.pourquoi { position: relative; z-index: 2; padding: 40px 0 110px; }
.tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.tete h2 { font-size: clamp(32px, 4vw, 52px); max-width: 760px; }
.tete p { max-width: 360px; font-size: 16px; color: var(--doux); }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.carte { padding: 26px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .3s var(--sortie); }
@media (hover: hover) and (pointer: fine) { .carte:hover { transform: translateY(-4px); } }
.carte > div { display: contents; }
.vis { border-radius: 12px; border: 1px solid var(--ligne); margin-bottom: 22px; padding: 18px 16px 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 115%, var(--halo-graph), transparent 70%); }
.carte h3 { font-size: 21px; margin-bottom: 6px; }
.carte p { font-size: 15.5px; flex: 1; }
.carte .l { display: inline-block; margin-top: 18px; color: var(--txt); }

/* 3. Ce que nous changeons */
.avant-apres { margin-top: 56px; display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 32px; align-items: start; }
.avant-apres .passage { align-self: center; }
.colonne-titre { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); margin-bottom: 16px; }
.colonne-titre strong { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.02em; text-transform: none; color: var(--txt); margin-top: 6px; }
.fichiers { position: relative; height: 260px; }
.fichier { position: absolute; width: 120px; padding: 14px; background: var(--verre); border: 1px solid transparent; border-radius: 12px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); font-size: 13px; font-weight: 500; transform: rotate(var(--r)); }
.fichier i { display: block; height: 5px; border-radius: 3px; background: var(--ligne); margin-top: 8px; }
.fichier i + i { width: 70%; }
.visible .fichier { animation: flotter 5s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes flotter { to { transform: rotate(calc(var(--r) * -1)) translateY(-6px); } }
.passage, .plus { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--voile); color: var(--accent); }
.tableau { padding: 24px; }
.tableau .barres { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-bottom: 8px; border-bottom: 1px solid var(--ligne); }
.tableau .barres span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--g-bleu), color-mix(in srgb, var(--g-bleu) 20%, transparent)); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--sortie); transition-delay: var(--d); }
.tableau .barres span.haute { background: linear-gradient(180deg, #E37E12, rgba(192, 89, 24, .25)); box-shadow: 0 0 18px -4px rgba(227, 126, 18, .6); }
.visible .tableau .barres span { transform: scaleY(1); }
.bulles { margin-top: 18px; display: grid; gap: 10px; }
.bulle { border: 1px solid var(--ligne); background: var(--voile); border-radius: 12px 12px 12px 4px; padding: 12px 16px; font-size: 15px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--sortie); transition-delay: var(--d); }
.visible .bulle { opacity: 1; transform: none; }
@media (min-width: 601px) {
  .tableau { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: center; }
  .tableau .bulles { margin-top: 0; }
}
.nouveau { position: relative; margin: 64px auto 0; padding-top: 46px; text-align: center; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.4; max-width: 32em; }
.nouveau::before { content: "“"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 84px; line-height: 1; background: var(--mot-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 4. Simuler : des choix tout faits, un clic suffit (les molettes sont abandonnées, Johan 30/10) */
.simulation { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: center; }
.simulation .slogan { margin-top: 26px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.atelier { padding: 28px 30px; }
.atelier-titre { font-size: 20px; letter-spacing: -.02em; font-weight: 500; }
.choix-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 16px; flex-wrap: wrap; }
.choix { display: flex; gap: 4px; border: 1px solid var(--ligne); border-radius: 12px; padding: 4px; background: var(--bouton); }
.choix button { font: inherit; font-size: 15px; padding: 8px 15px; border: 0; border-radius: 9px; background: none; color: var(--doux); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, transform .16s var(--sortie); }
.choix button:hover { color: var(--txt); }
.choix button[aria-pressed="true"] { background: var(--nav-b); color: var(--nav-b-txt); }
/* Le fond du choix en cours est un élément à part qui glisse d'un choix à l'autre, comme la pastille du menu (P.curseur, js/main.js) */
.choix { position: relative; }
.curseur { position: absolute; z-index: 0; border-radius: 9px; background: var(--nav-b); pointer-events: none; }
.a-curseur button { position: relative; z-index: 1; }
.choix.a-curseur button[aria-pressed="true"] { background: none; }
.graphe-sim { border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px 10px; background: radial-gradient(ellipse 70% 90% at 60% 110%, var(--halo-graph), transparent 70%); }
.graphe-legende { display: flex; gap: 18px; flex-wrap: wrap; }
.graphe-legende .o { color: var(--g-orange); margin-left: auto; }
.graphe-sim svg { width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.g-bas { fill: var(--fond2); stroke: var(--g-encre); stroke-width: 2.5; }
.effets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.effet { border: 1px solid var(--ligne); border-radius: 12px; padding: 9px 12px; }
.effet b { display: block; font-weight: 500; font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* 5. Les étapes */
.etapes { margin: 64px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.etapes::before, .etapes::after { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 84px) / 4 - 28px); height: 2px; background: var(--ligne); }
.etapes::after { background: var(--mot-degrade); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--sortie) .2s; }
.etapes.visible::after { transform: scaleX(1); }
.etape { position: relative; z-index: 1; }
.etape .numero { width: 56px; height: 56px; border-radius: 50%; background: var(--fond2); border: 1px solid var(--bord); display: grid; place-items: center; font-weight: 500; font-size: 20px; color: var(--doux); transition: background .4s, color .4s, border-color .4s; transition-delay: var(--d); }
.etapes.visible .numero { background: var(--accent-degrade); border-color: transparent; color: #FFFFFF; box-shadow: 0 10px 30px -12px var(--accent-ombre); }
.etape h3 { margin-top: 20px; font-size: 20px; }
.etape p { margin-top: 8px; color: var(--doux); }

/* 6. Vos données */
.donnees { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.engagements { display: grid; gap: 12px; }
.engagement { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; }
.engagement svg { flex: none; width: 26px; height: 26px; color: var(--accent); }
.engagement strong { display: block; font-size: 17px; font-weight: 500; }
.engagement span { color: var(--doux); font-size: 15px; }

/* 7. Associés */
.associes { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.associe { text-align: center; }
.associe img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin: 0 auto; border: 1px solid var(--bord); box-shadow: 0 30px 60px -30px var(--halo-bleu); transition: transform .4s var(--sortie); }
@media (hover: hover) and (pointer: fine) { .associe:hover img { transform: scale(1.04); } }
.associe .role { margin-top: 20px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.associe h3 { margin-top: 6px; font-size: 21px; }
.associe p { margin: 6px auto 0; color: var(--doux); font-size: 15px; max-width: 22em; }
.lieu { margin-top: 48px; text-align: center; color: var(--doux); display: flex; justify-content: center; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* 8. Appel final : un grand panneau en verre, halos dedans */
.appel { text-align: center; }
.appel::before { content: none; }
.appel .conteneur { padding-top: 72px; padding-bottom: 72px; border-radius: 28px; overflow: hidden; max-width: calc(var(--largeur) - 48px);
  background: radial-gradient(520px 260px at 25% 0%, color-mix(in srgb, var(--halo-bleu) 70%, transparent), transparent 70%), radial-gradient(480px 260px at 80% 100%, color-mix(in srgb, var(--halo-orange) 80%, transparent), transparent 70%), var(--verre);
  border: 1px solid transparent; box-shadow: var(--ombre-verre); }
.appel h2 { font-size: clamp(34px, 4.6vw, 56px); max-width: 16em; margin: 0 auto; }
.appel p { margin: 18px auto 32px; font-size: 18px; color: var(--doux); max-width: 30em; }
.appel .insecable { white-space: nowrap; }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ===== Analyser ===== */
.parcours { margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 28px; position: relative; }
.etape-carte { position: relative; display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; padding: 28px 36px; }
.etape-carte + .etape-carte::before { content: ""; position: absolute; left: 190px; top: -29px; width: 2px; height: 28px; background: var(--mot-degrade); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--sortie) .2s; }
.etape-carte.visible + .etape-carte.visible::before { transform: none; }
.texte { position: relative; padding-left: 56px; }
.num-etape { position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--voile); font-size: 16px; font-weight: 500; }
.etape-carte h3 { font-size: 24px; }
.etape-carte p { margin-top: 10px; font-size: 17px; color: var(--doux); max-width: 34em; }
.illus { display: flex; align-items: center; gap: 16px; min-height: 150px; }
.fleche-o { color: var(--accent); font-size: 24px; opacity: 0; transition: opacity .4s .3s; }
.visible .fleche-o { opacity: 1; }
.sources { display: grid; gap: 10px; }
.sources span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--doux); }
.sources i { width: 46px; height: 34px; border-radius: 6px; border: 1px solid var(--bord); background: linear-gradient(var(--g-bleu), var(--g-bleu)) 0 0 / 100% 3px no-repeat, var(--fond2); }
.sources i.o { background: linear-gradient(#E37E12, #E37E12) 0 0 / 100% 3px no-repeat, var(--fond2); }
.coches { margin: 0; padding: 14px 16px; list-style: none; display: grid; gap: 9px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--fond2); font-size: 15px; }
.coches li { display: flex; align-items: center; gap: 10px; }
.coches li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; color: #FFFFFF; background: var(--accent-degrade); transform: scale(.6); opacity: 0; transition: transform .4s var(--sortie) var(--d), opacity .3s ease var(--d); }
.visible .coches li::before { transform: none; opacity: 1; }
.feuilles { position: relative; width: 120px; height: 140px; }
.feuilles span { position: absolute; left: var(--x); top: var(--y); width: 70px; height: 76px; border: 1px solid var(--bord); border-radius: 6px; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .5); transform: rotate(var(--r)); transition: transform .9s var(--sortie) .2s;
  background-color: var(--fond2); background-image: linear-gradient(#E37E12, #E37E12), linear-gradient(var(--ligne), var(--ligne)), linear-gradient(var(--ligne), var(--ligne)); background-size: 22px 4px, 46px 3px, 36px 3px; background-position: 10px 12px, 10px 26px, 10px 36px; background-repeat: no-repeat; }
.visible .feuilles span { transform: rotate(0) translateX(10px); }
.grille { width: 150px; display: grid; gap: 4px; }
.grille b { height: 22px; border-radius: 4px; background: var(--accent-degrade); }
.grille i { height: 16px; border-radius: 3px; background: var(--fond2); border: 1px solid var(--ligne); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sortie) var(--d); }
.visible .grille i { transform: none; }
.illus-resultats { position: relative; }
.mini-tdb { width: 220px; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: var(--fond2); }
.mini-barre { height: 14px; border-bottom: 1px solid var(--ligne); background: var(--voile); }
.mini-barres { height: 110px; display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 0; }
.mini-barres b { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--ligne); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--sortie) var(--d); }
.mini-barres b.bleu { background: linear-gradient(180deg, var(--g-bleu), color-mix(in srgb, var(--g-bleu) 25%, transparent)); }
.mini-barres b.haute { background: linear-gradient(180deg, #E37E12, rgba(192, 89, 24, .3)); }
.visible .mini-barres b { transform: none; }
.bulle-o { position: absolute; left: 150px; top: 0; background: var(--accent-degrade); color: #FFFFFF; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 10px 10px 10px 2px; box-shadow: 0 10px 24px -12px var(--accent-ombre); white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .4s 1.2s, transform .5s var(--sortie) 1.2s; }
.visible .bulle-o { opacity: 1; transform: none; }

/* Par service : onglets, indicateurs cliquables, « D'où vient ce chiffre ? » */
.par-service { margin-top: 44px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.onglets-service { display: grid; gap: 6px; }
.onglets-service button { text-align: left; font: inherit; font-size: 16px; color: var(--doux); background: var(--voile); border: 1px solid var(--ligne); border-radius: 12px; padding: 13px 18px; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s, transform .16s var(--sortie); }
.onglets-service button:hover { color: var(--txt); border-color: var(--bord); }
.onglets-service button[aria-selected="true"] { color: var(--nav-b-txt); background: var(--nav-b); border-color: transparent; }
.carte-service { padding: 24px 26px 20px; }
.carte-service.change { animation: fondu-flou .3s var(--sortie); }
.question-service { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.tuiles-claires { margin-top: 16px; gap: 12px; }
.tuiles-claires button { text-align: left; font: inherit; cursor: pointer; color: inherit; background: none; border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 16px; min-width: 0; transition: border-color .2s, background-color .2s, transform .16s var(--sortie); }
.tuiles-claires button:hover { border-color: var(--bord); }
/* Repère discret : chaque chiffre se clique pour voir d'où il vient (Gemini, 30/10) */
.tuiles-claires button { position: relative; }
.tuiles-claires button::after { content: "?"; position: absolute; top: 10px; right: 12px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--ligne); border-radius: 50%; font-size: 11px; font-weight: 500; color: var(--doux); transition: color .2s, border-color .2s; }
.tuiles-claires button:hover::after, .tuiles-claires button[aria-pressed="true"]::after { color: var(--accent); border-color: var(--accent); }
.tuiles-claires button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tuiles-claires span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.tuiles-claires strong { display: block; margin-top: 4px; font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.tuiles-claires em { display: block; font-style: normal; font-size: 13px; color: var(--doux); }
.explication { margin-top: 14px; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--voile); border-radius: 0 10px 10px 0; font-size: 15.5px; color: var(--doux); }
.explication strong { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.explication.change { animation: fondu-flou .3s var(--sortie); }
.explication .textes { display: grid; }
.explication .textes > span { grid-area: 1 / 1; }
.explication .textes > span[aria-hidden] { visibility: hidden; }
.graphes { margin-top: 14px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.graphe { border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px 16px; display: flex; flex-direction: column; background: radial-gradient(ellipse 80% 90% at 50% 120%, var(--halo-graph), transparent 70%); }
.titre-graphe { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.barres-service { margin-top: 12px; flex: 1; min-height: 140px; display: flex; align-items: flex-end; gap: 6px; }
.barres-service b { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--g-bleu), color-mix(in srgb, var(--g-bleu) 20%, transparent)); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--sortie) var(--d); }
.barres-service b.haute { background: linear-gradient(180deg, #E37E12, rgba(192, 89, 24, .3)); }
.repartition { margin: 12px 0 0; padding: 0; list-style: none; flex: 1; display: grid; align-content: space-around; gap: 10px; }
.repartition li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; color: var(--doux); }
.repartition strong { font-size: 14px; font-weight: 500; color: var(--txt); }
.repartition i { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--ligne); overflow: hidden; }
.repartition i::before { content: ""; display: block; width: var(--l); height: 100%; border-radius: 4px; background: var(--g-bleu); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--sortie) var(--d); }
.repartition li:first-child i::before { background: linear-gradient(90deg, #E37E12, #C05918); }
.graphes.monte .barres-service b, .graphes.monte .repartition i::before { transform: none; }
.carte-service .note-exemple { margin-top: 12px; }

/* Ce qui ne change jamais */
.encart-nuit { padding: 36px 40px; background: radial-gradient(600px 260px at 0% 0%, color-mix(in srgb, var(--halo-bleu) 50%, transparent), transparent 70%), var(--verre); }
.engagements-nuit { display: grid; grid-template-columns: repeat(3, 1fr); }
.engagements-nuit > div { padding: 0 28px; border-left: 1px solid var(--ligne); }
.engagements-nuit > div:first-child { padding-left: 0; border-left: 0; }
.engagements-nuit h3 { font-size: 22px; }
.engagements-nuit p { margin-top: 10px; color: var(--doux); }

/* ===== Simuler ===== */
.exemple { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; margin-top: 8px; }
.carte-graphique { padding: 22px 24px; background: radial-gradient(ellipse 70% 70% at 60% 115%, var(--halo-graph), transparent 70%), var(--verre); }
.legende-claire, .legende-sim { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--doux); margin-top: 8px; }
.legende-claire i { display: inline-block; width: 20px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 3px solid var(--g-bleu); }
.legende-claire i.base { border-top: 2px dashed var(--g-rien); }
.legende-claire i.avec { border-top-color: var(--g-orange); }
/* Prévoir, banc d'essai : le réel en trait plein, les essais en pointillés (Johan, 30/10) */
.legende-claire i.reel { border-top-color: var(--g-encre); }
.legende-claire i.ecartee { border-top: 2px dashed var(--g-essai); }
.legende-claire i.retenue-l { border-top: 3px dashed var(--g-orange); }
.chiffres-cles { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chiffre-cle { padding: 16px 16px 12px; }
.chiffre-cle span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.chiffre-cle strong { display: block; margin-top: 6px; font-size: 24px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.chiffre-cle:first-child strong { background: var(--mot-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffre-cle em { font-style: normal; font-size: 14px; color: var(--doux); }

/* Un réglage « − valeur + » par variable, comme dans l'outil (Johan, 30/10) */
/* Résultats à gauche, réglages à droite (Johan, 30/10) */
.atelier-sim { margin-top: 40px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: stretch; }
.pupitre { padding: 22px 24px; display: flex; flex-direction: column; }
.reglages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bloc-reglage { border: 1px solid var(--ligne); border-radius: 14px; padding: 16px 18px 18px; }
.pas { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 14px; }
.pas button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ligne); border-radius: 11px; background: var(--bouton); color: var(--txt); font: inherit; line-height: 0; cursor: pointer; transition: border-color .2s, transform .16s var(--sortie); }
.pas button:hover { border-color: var(--bord); }
.pas button:disabled { opacity: .35; cursor: default; }
.pas output { white-space: nowrap; font-size: 32px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.barre-reglage { position: relative; height: 8px; border-radius: 99px; background: var(--ligne); cursor: pointer; touch-action: none; }
.barre-reglage::before { content: ""; position: absolute; inset: -14px -8px; } /* zone de prise plus haute que la jauge */
.barre-reglage .poignee { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2.5px #E37E12, 0 2px 6px rgba(0, 0, 0, .35); transition: left .25s var(--sortie), transform .15s var(--sortie); }
@media (hover: hover) and (pointer: fine) { .barre-reglage:hover .poignee { transform: scale(1.15); } }
.barre-reglage.tenue .poignee { transform: scale(1.15); }
.barre-reglage.tenue { cursor: grabbing; }
.barre-reglage.tenue i, .barre-reglage.tenue .poignee { transition-duration: .1s; }
.barre-reglage i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #E37E12, #C05918); box-shadow: 0 0 10px rgba(227, 126, 18, .55); transition: left .25s, width .25s; }
.barre-reglage b { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--txt); border-radius: 2px; }
.bornes { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; }
.pied-pupitre { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; padding-top: 16px; }
.remise { white-space: nowrap; font: inherit; font-size: 14px; color: var(--txt); border: 1px solid var(--ligne); padding: 9px 18px; border-radius: 10px; background: var(--bouton); cursor: pointer; transition: border-color .2s, transform .16s var(--sortie); }
.remise:hover { border-color: var(--bord); }
.resultats { display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; }
.indicateurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.indicateur { padding: 14px 18px 10px; }
.indicateur .tete-ind { display: flex; justify-content: space-between; align-items: baseline; }
.indicateur .tete-ind span { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.indicateur .tete-ind strong { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.indicateur svg { margin-top: 8px; width: 100%; height: 64px; overflow: visible; }
.indicateur .g-rien, .indicateur .g-dec { vector-effect: non-scaling-stroke; }
.indicateur .g-rien { stroke-width: 1.5; stroke-dasharray: 4 4; }
.indicateur .g-dec { stroke-width: 2.5; }
.poids { padding: 18px 20px; }
.poids .etiquette { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--doux); text-transform: uppercase; margin-bottom: 12px; }
.barre-poids { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 10px; font-size: 14px; color: var(--doux); margin-top: 10px; }
.barre-poids .piste { position: relative; height: 8px; border-radius: 99px; background: var(--ligne); }
.barre-poids .piste::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--doux); border-radius: 2px; }
.barre-poids .rempli { position: absolute; top: 0; bottom: 0; border-radius: 99px; transition: left .25s, width .25s; }
.barre-poids strong { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.barre-poids.total { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ligne); color: var(--txt); }
.slogan-sim { margin-top: 32px; font-size: 26px; font-weight: 500; letter-spacing: -.02em; }

/* Le partage des rôles */
.roles { margin-top: 48px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.role-carte { padding: 30px; }
.role-carte .qui { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.role-carte p { margin-top: 12px; font-size: 18px; }
.plus { align-self: center; }
.decision { margin-top: 44px; text-align: center; font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -.03em; }

/* Limites (Prévoir et Simuler) */
.limites { margin: 32px 0 0; display: grid; gap: 14px; max-width: 760px; padding: 0; list-style: none; }
.limites li { position: relative; padding-left: 34px; font-size: 18px; }
/* « En toute franchise » : le titre à gauche, la liste encadrée à droite (Gemini, 30/10) */
@media (min-width: 961px) {
  .franchise { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto auto 1fr auto; column-gap: 56px; align-items: start; }
  .franchise > .surtitre { grid-column: 1; grid-row: 1; }
  .franchise > h2 { grid-column: 1; grid-row: 2; }
  .franchise > .limites { grid-column: 2; grid-row: 1 / span 3; margin: 0; max-width: none; padding: 26px 28px; border: 1px solid transparent; border-radius: 18px; background: var(--verre); box-shadow: var(--ombre-verre); }
  .franchise > .note-exemple { grid-column: 2; grid-row: 4; }
}
.limites li::before { content: ""; position: absolute; left: 0; top: .6em; width: 18px; height: 2px; border-radius: 2px; background: var(--mot-degrade); }

/* ===== Prévoir ===== */
/* Le banc d'essai : chaque essai se trace, devient pointillé, puis les écartés s'estompent */
.banc { margin-top: 48px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; align-items: center; }
.banc .carte-graphique { margin: 0; }
.essai, .essai-retenu { --fin: calc(var(--delai) + var(--duree)); }
.joue .essai { animation: dessiner var(--duree) var(--sortie) var(--delai) forwards, pointiller .01s linear var(--fin) forwards, estomper .5s ease 2.5s forwards; }
.joue .essai-retenu { animation: dessiner var(--duree) var(--sortie) var(--delai) forwards, pointiller .01s linear var(--fin) forwards; }
@keyframes pointiller { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 0; stroke-dasharray: .016 .011; } }
@keyframes estomper { to { stroke-dashoffset: 0; stroke-dasharray: .016 .011; opacity: .35; } }
.essais { display: grid; gap: 12px; }
.essai-ligne { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; opacity: 0; transform: translateX(16px); }
.essai-ligne i { flex: none; width: 24px; margin-top: .75em; border-top: 3px dashed var(--g-essai); }
.essai-ligne strong { display: block; font-size: 17px; font-weight: 500; }
.essai-ligne span { font-size: 15px; color: var(--doux); }
.essai-ligne b { font-weight: 500; color: var(--txt); font-variant-numeric: tabular-nums; }
.essai-ligne.gagnante i { border-top-color: var(--g-orange); }
.retenue { display: inline-block; margin-left: 10px; font-style: normal; font-size: 13px; font-weight: 500; color: #FFFFFF; background: linear-gradient(135deg, #E37E12, #C05918); padding: 2px 10px; border-radius: 999px; opacity: 0; transform: scale(.6); }
.joue .essai-ligne { animation: entrer .5s var(--sortie) var(--delai) forwards; }
.joue .essai-ligne:not(.gagnante) { animation: entrer .5s var(--sortie) var(--delai) forwards, effacer .5s ease 2.5s forwards; }
.joue .essai-ligne.gagnante { animation: entrer .5s var(--sortie) var(--delai) forwards, mettre-en-avant .5s var(--sortie) 2.5s forwards; }
.joue .retenue { animation: tamponner .45s var(--sortie) 2.6s forwards; }
/* Survoler ou toucher une méthode met sa courbe en avant (Gemini, 30/10, js/prevision.js) ; !important : passe devant les animations */
.essai-ligne { cursor: pointer; }
.essai-ligne.en-avant { opacity: 1 !important; box-shadow: var(--ombre-verre), inset 0 0 0 1px var(--bord); }
.essai-ligne.gagnante.en-avant { box-shadow: var(--ombre-verre), inset 0 0 0 1px #E37E12, 0 0 30px -10px rgba(227, 126, 18, .6); }
.banc.compare .essai, .banc.compare .essai-retenu { opacity: .15 !important; transition: opacity .2s; }
.banc.compare .en-avant.essai, .banc.compare .en-avant.essai-retenu { opacity: 1 !important; stroke-width: 3.5; }
@keyframes entrer { to { opacity: 1; transform: none; } }
@keyframes effacer { from { opacity: 1; transform: none; } to { opacity: .45; transform: none; } }
@keyframes mettre-en-avant { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; box-shadow: var(--ombre-verre), inset 0 0 0 1px #E37E12, 0 0 30px -10px rgba(227, 126, 18, .6); } }
@keyframes tamponner { to { opacity: 1; transform: none; } }
.remise-claire { margin: 6px 0 0; justify-self: start; }

/* Les méthodes */
.methodes { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.methode { padding: 28px; }
.methode h3 { font-size: 20px; }
.methode p { margin-top: 10px; color: var(--doux); }

/* La fourchette : elle se déroule, puis les mois réels tombent un à un */
.fourchette-bloc { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
.carte-nuit { margin: 0; padding: 24px 24px 18px; background: radial-gradient(ellipse 70% 70% at 60% 115%, var(--halo-graph), transparent 70%), var(--verre); }
.bande { clip-path: inset(0 100% 0 0); }
.joue .bande { animation: derouler 1.6s var(--sortie) .2s forwards; }
@keyframes derouler { to { clip-path: inset(0 0 0 0); } }
.points circle { fill: var(--g-bleu); stroke: var(--fond2); stroke-width: 2; opacity: 0; transform: translateY(-24px); transform-box: fill-box; }
.points circle.dehors { fill: var(--g-essai); }
.joue .points circle { animation: tomber .5s var(--sortie) var(--delai) forwards; }
@keyframes tomber { to { opacity: 1; transform: none; } }
.compteur { margin-top: 10px; font-size: 15px; color: var(--doux); }
.compteur i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--g-bleu); margin-right: 8px; }
.compteur strong { color: var(--txt); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ===== Vos données ===== */
.chemin { margin: 44px 0 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 44px; }
.etape-chemin { position: relative; padding: 26px 24px 28px; opacity: .35; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--sortie); transition-delay: calc(.2s + var(--i) * .25s); } /* 4e étape allumée vers 1 s, au lieu de 2,4 s (Gemini, 30/10) */
.chemin.visible .etape-chemin { opacity: 1; transform: none; }
.etape-chemin .icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--voile); color: var(--bleu-ui); }
.etape-chemin .icone svg { width: 24px; height: 24px; }
.etape-chemin::after { content: counter(list-item); position: absolute; top: 22px; right: 24px; font-size: 13px; color: var(--doux); }
.etape-chemin h3 { margin-top: 18px; font-size: 21px; }
.etape-chemin p { margin-top: 8px; color: var(--doux); }
.etape-france { background: radial-gradient(ellipse 90% 80% at 50% 120%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), var(--verre); box-shadow: var(--ombre-verre), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.etape-france .icone { background: var(--accent-degrade); border-color: transparent; color: #FFFFFF; }
.etape-chemin + .etape-chemin::before { content: ""; position: absolute; left: -38px; top: calc(50% - 5px); width: 32px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10'%3E%3Cpath d='M1 5h28M24 1l5 4-5 4' fill='none' stroke='%23E37E12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--sortie); transition-delay: calc(.1s + var(--i) * .25s); }
.chemin.visible .etape-chemin + .etape-chemin::before { transform: none; }
.engagements-grille { margin-top: 36px; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ===== Qui sommes-nous ===== */
.associes-page { margin-top: 0; }
.portrait { position: relative; width: 220px; height: 220px; margin: 0 auto; display: grid; place-items: center; }
.associes-page .associe img { width: 190px; height: 190px; }
.portrait svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.portrait circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.associes-page .associe h3 { font-size: 23px; }
.associes-page .associe p { font-size: 16px; }
.mission { text-align: center; max-width: 900px; }
.filet-o { display: block; width: 48px; height: 3px; margin: 0 auto 28px; border-radius: 2px; background: var(--mot-degrade); }
.mission blockquote { margin: 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2;
  background: linear-gradient(180deg, var(--titre-haut) 30%, var(--titre-bas)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mission p { margin: 22px auto 0; max-width: 40em; font-size: 18px; color: var(--doux); }

/* ===== Nous contacter ===== */
.rdv { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.suite { margin: 28px 0 32px; padding: 0; list-style: none; counter-reset: suite; display: grid; gap: 22px; }
.suite li { position: relative; padding-left: 58px; counter-increment: suite; }
.suite li::before { content: counter(suite); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--ligne); background: var(--voile); font-weight: 500; }
.suite li:last-child::before { background: var(--accent-degrade); border-color: transparent; color: #FFFFFF; }
.suite li + li::after { content: ""; position: absolute; left: 19px; top: -20px; width: 2px; height: 16px; background: var(--ligne); }
.suite strong { display: block; font-size: 18px; font-weight: 500; }
.suite span { color: var(--doux); }
.carte-formulaire { padding: 32px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.requis { color: var(--accent); }
.facultatif { font-weight: 400; color: var(--doux); }
.champ input, .champ textarea { width: 100%; font: inherit; font-size: 16px; color: var(--txt); background: var(--voile); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.champ textarea { resize: vertical; min-height: 110px; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.champ [aria-invalid="true"] { border-color: var(--baisse); }
.champ textarea::placeholder { color: var(--doux); }
.aide { margin-top: 6px; font-size: 14px; color: var(--doux); }
.erreur { font-size: 14px; font-weight: 500; color: var(--baisse); }
.erreur:not(:empty) { margin-top: 6px; }
.formulaire .bouton { width: 100%; margin-top: 6px; }
.formulaire .bouton:disabled { opacity: .7; cursor: wait; }
.erreur-envoi:not(:empty) { margin: 0 0 12px; }
.merci { text-align: center; padding: 24px 0; outline: none; }
.merci-coche { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-degrade); color: #FFFFFF; animation: coche-apparait .5s var(--sortie); }
.merci-coche svg { width: 32px; height: 32px; }
.merci-titre { margin-top: 18px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.merci p { margin-top: 8px; font-size: 18px; color: var(--doux); }
@keyframes coche-apparait { from { transform: scale(.4); opacity: 0; } }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* La fenêtre « Nous contacter », ouverte depuis tous les boutons */
.fenetre-ouverte { overflow: hidden; }
.fenetre-rdv { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 26px 30px 20px; border: 1px solid transparent; border-radius: 22px; background: radial-gradient(500px 220px at 0% 0%, color-mix(in srgb, var(--halo-bleu) 45%, transparent), transparent 70%), var(--verre); color: var(--txt); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); overflow-y: auto; overscroll-behavior: contain; animation: fenetre-entre .35s var(--sortie); }
.fenetre-rdv::backdrop { background: rgba(17, 11, 53, .6); backdrop-filter: blur(4px); animation: voile-entre .3s ease; }
.fenetre-rdv.ferme { animation: fenetre-sort .2s ease forwards; }
.fenetre-rdv.ferme::backdrop { animation: voile-sort .2s ease forwards; }
.fenetre-rdv h2 { font-size: 30px; line-height: 1.15; }
.fenetre-rdv .surtitre { margin-bottom: 8px; }
.fenetre-intro { margin: 6px 0 16px; font-size: 15px; color: var(--doux); }
.fenetre-rdv .fermer { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid var(--ligne); border-radius: 50%; background: var(--voile); color: var(--txt); font-size: 24px; line-height: 1; cursor: pointer; transition: border-color .2s, transform .16s var(--sortie); }
.fenetre-rdv .fermer:hover { border-color: var(--bord); }
.poignee-tiroir { display: none; } /* téléphone seulement */
.fenetre-rdv .champ { margin-bottom: 12px; }
.fenetre-rdv .champ label { margin-bottom: 4px; font-size: 14px; }
.fenetre-rdv .champ input, .fenetre-rdv .champ textarea { padding: 10px 12px; }
.fenetre-rdv .champ textarea { min-height: 70px; }
.fenetre-rdv .formulaire .bouton { margin-top: 2px; padding: 12px 24px; }
.fenetre-rdv .note-exemple { margin-top: 10px; }
.fenetre-rdv .merci { padding: 8px 0; }
@keyframes fenetre-entre { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes fenetre-sort { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes voile-entre { from { opacity: 0; } }
@keyframes voile-sort { to { opacity: 0; } }

/* ===== Pages légales : sommaire collant à gauche, texte à droite ===== */
.legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
.sommaire { position: sticky; top: 110px; }
.sommaire p { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); margin-bottom: 14px; }
.sommaire ol { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--ligne); display: grid; gap: 10px; font-size: 15px; }
.sommaire a { text-decoration: none; color: var(--doux); }
.sommaire a:hover { color: var(--txt); }
.texte-legal { max-width: 42em; }
.texte-legal article { padding: 32px 0; border-top: 1px solid var(--ligne); scroll-margin-top: 96px; }
.texte-legal article:first-child, .en-bref + article { border-top: 0; padding-top: 0; }
.texte-legal h2 { font-size: 26px; margin-bottom: 14px; }
.texte-legal p + p, .texte-legal p + ul { margin-top: 12px; }
.texte-legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.texte-legal dl { margin: 16px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.texte-legal dt { color: var(--doux); }
.texte-legal dd { margin: 0; }
.en-bref { padding: 28px 32px; margin-bottom: 40px; }
.en-bref h2 { font-size: 22px; margin-bottom: 12px; }
.en-bref ul { gap: 8px; }
.mise-a-jour { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--ligne); font-size: 14px; color: var(--doux); }
/* Ce qui reste à remplir (immatriculation) : souligné en orange sur la maquette */
.a-completer { color: #E37E12; text-decoration: underline dashed #E37E12; text-underline-offset: 3px; }

/* ===== Pied de page ===== */
.pied { position: relative; z-index: 2; border-top: 1px solid var(--ligne); color: var(--doux); padding: 56px 0 32px; font-size: 15px; margin-top: 40px; }
.pied .conteneur { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pied img { height: 28px; width: auto; margin-bottom: 16px; }
.pied h4 { margin: 0 0 12px; color: var(--txt); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--txt); }
.pied .bas { grid-column: 1 / -1; border-top: 1px solid var(--ligne); padding-top: 22px; margin-top: 12px; font-size: 13px; }

/* Étiquette de la version d'essai (à retirer à la mise en ligne) */

/* ===== Écrans d'ordinateur peu hauts : chaque partie tient en entier à l'écran, comme sur l'ancien site
   (Johan a environ 1430 × 690 px utiles). L'en-tête rangé fait environ 66 px. ===== */
/* L'écran d'Analyser garde son format 16:10 mais sa largeur suit la hauteur de la fenêtre */
/* Molette : un aimant doux cale le bloc quand on s'arrête près de son bord (Johan, 30/10). « proximity » et non
   « mandatory » : la molette reste libre, et un bloc plus haut que l'écran se lit en entier. Ordinateur seulement. */
@media (min-width: 961px) and (min-height: 660px) {
  html { scroll-snap-type: y proximity; }
  main > section { scroll-snap-align: start; }
}
@media (min-width: 961px) and (max-height: 900px) {
  .section { padding: clamp(48px, 8vh, 90px) 0; }
  .titre-section, .tete h2 { font-size: clamp(30px, 3.2vw, 44px); }
  .chapeau { font-size: 16px; }
  /* Accueil : de vos fichiers à vos décisions */
  .avant-apres { margin-top: 32px; }
  .fichiers { height: 210px; }
  .tableau { padding: 20px; }
  .tableau .barres { height: 160px; }
  .nouveau { margin-top: 40px; }
  /* Analyser : les trois étapes et la carte par service */
  .parcours { margin-top: 28px; gap: 20px; }
  .etape-carte { padding: 18px 30px; gap: 36px; }
  .etape-carte + .etape-carte::before { top: -21px; height: 20px; }
  .illus { min-height: 0; transform: scale(.85); transform-origin: left center; margin: -10px 0; }
  .par-service { margin-top: 28px; }
  .carte-service { padding: 18px 22px 14px; }
  .barres-service { min-height: 100px; }
  /* Prévoir : le banc d'essai */
  .banc { margin-top: 28px; }
  /* Pages intérieures : moins de vide sous l'en-tête, la première partie remonte (Gemini, 30/10) */
  .bandeau { padding: 118px 0 20px; }
  .bandeau + .section { padding-top: 36px; }
  /* Simuler : réglages et résultats ensemble */
  .atelier-sim { margin-top: 24px; gap: 12px; }
  .pupitre { padding: 18px 22px; }
  .pas { margin: 8px 0 10px; }
  .pas button { width: 36px; height: 36px; }
  .pas output { font-size: 26px; }
  .pied-pupitre { padding-top: 12px; }
  .remise { padding: 7px 14px; }
  .resultats { gap: 12px; }
  .indicateurs { gap: 12px; }
  .indicateur { padding: 10px 16px 8px; }
  .indicateur svg { height: 40px; margin-top: 4px; }
  .poids { padding: 14px 18px; }
  .poids .etiquette { margin-bottom: 4px; }
  .barre-poids { margin-top: 7px; }
  .barre-poids.total { margin-top: 10px; padding-top: 8px; }
  .slogan-sim { margin-top: 16px; font-size: 22px; }
  .mention { margin-top: 4px; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .section { padding: 48px 0; }
  .titre-section, .tete h2 { font-size: clamp(28px, 2.8vw, 38px); }
  .surtitre { margin-bottom: 8px; }
  .numero-titre .num { width: 34px; height: 34px; font-size: 14px; }
  /* Accueil */
  .fichiers { height: 180px; }
  .colonne-titre { margin-bottom: 10px; }
  .colonne-titre strong { font-size: 21px; }
  .tableau { padding: 16px; }
  .tableau .barres { height: 140px; }
  .nouveau { margin-top: 28px; padding-top: 38px; font-size: 21px; }
  .nouveau::before { font-size: 68px; }
  .etapes { margin-top: 40px; }
  /* Analyser */
  .parcours { margin-top: 20px; gap: 14px; }
  .etape-carte { grid-template-columns: 280px 1fr; padding: 10px 26px; gap: 28px; }
  .etape-carte + .etape-carte::before { left: 160px; top: -15px; height: 14px; }
  .illus { transform: scale(.72); margin: -22px 0; }
  .etape-carte h3 { font-size: 21px; }
  .etape-carte p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; }
  .par-service { margin-top: 20px; }
  .onglets-service button { padding: 10px 16px; }
  .carte-service { padding: 14px 20px 10px; }
  .question-service { font-size: 19px; }
  .tuiles-claires { margin-top: 10px; gap: 10px; }
  .tuiles-claires button { padding: 7px 12px; }
  .tuiles-claires strong { font-size: 20px; margin-top: 2px; }
  .explication { margin-top: 10px; padding: 8px 14px; font-size: 14.5px; }
  .graphes { margin-top: 10px; gap: 12px; }
  .graphe { padding: 10px 14px 12px; }
  .barres-service { margin-top: 8px; min-height: 60px; }
  .repartition { margin-top: 6px; gap: 4px; }
  .carte-service .note-exemple { margin-top: 8px; }
  /* Prévoir */
  .banc .carte-graphique { padding: 14px 18px; }
  .essai-ligne { padding: 10px 16px; }
  /* Simuler */
  .exemple .carte-graphique { padding: 14px 18px; }
  .chiffres-cles { margin-top: 18px; }
  .atelier-sim { margin-top: 18px; }
  .pupitre { padding: 14px 18px; }
  .bloc-reglage { padding: 10px 14px 12px; }
  .pas { margin: 6px 0 8px; }
  .pas button { width: 34px; height: 34px; border-radius: 10px; }
  .pas output { font-size: 23px; }
  .bornes { margin-top: 4px; }
  .pied-pupitre { padding-top: 8px; }
  .indicateur svg { height: 30px; }
  .slogan-sim { margin-top: 10px; font-size: 19px; }
  .roles { margin-top: 28px; }
  .decision { margin-top: 28px; }
  /* Vos données */
  .chemin { margin-top: 28px; }
  .engagements-grille { margin-top: 24px; gap: 10px; }
  .engagement { padding: 12px 18px; }
}

/* Changement de page (Chrome, Edge, Safari récents) : la pastille a déjà glissé avant le départ (js/main.js),
   l'en-tête de la nouvelle page remplace l'ancien d'un coup, sans fondu ni glissement (rien ne peut sauter),
   et le contenu dessous apparaît en simple fondu : les blocs du haut montent déjà d'eux-mêmes (.revele),
   un second mouvement sur toute la page les faisait monter deux fois.
   Avant (30/10) le menu entier glissait comme une image : il se déformait quand sa largeur changeait. */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-group(entete), ::view-transition-old(entete), ::view-transition-new(entete) { animation: none; }
::view-transition-old(root) { animation: page-sort .22s ease both; }
::view-transition-new(root) { animation: fondu-seul .4s ease .05s both; }
@keyframes page-sort { to { opacity: 0; } }
/* Pendant que la pastille glisse, le contenu s'efface déjà (js/main.js) */
main, .pied { transition: opacity .22s ease, transform .22s ease; }
body.sortie main, body.sortie .pied { opacity: 0; transform: translateY(-6px); }
/* Nuit ↔ clair : toute la page passe d'un thème à l'autre en fondu, sans saut de lumière (js/main.js) */
html.change-theme::view-transition-old(root), html.change-theme::view-transition-old(entete) { animation: none; }
html.change-theme::view-transition-new(root), html.change-theme::view-transition-new(entete) { animation: fondu-seul .35s ease both; }
html.change-theme::view-transition-group(entete) { animation: none; }
html.change-theme * { transition: none !important; }

/* ===== Tablette (et base du téléphone, repris plus bas) ===== */
@media (max-width: 960px) {
  .simulation, .donnees, .exemple, .banc, .fourchette-bloc, .rdv, .legal { grid-template-columns: 1fr; gap: 40px; }
  .sommaire { position: static; }
  .cartes, .methodes { grid-template-columns: 1fr; }
  .tete { flex-direction: column; align-items: flex-start; gap: 16px; }
  .avant-apres { grid-template-columns: 1fr; justify-items: center; }
  .avant-apres > div { width: 100%; }
  .passage { transform: rotate(90deg); }
  .avant-apres > .passage { width: 56px; }
  .etapes { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .etapes::before, .etapes::after { display: none; }
  .etape-carte { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .etape-carte + .etape-carte::before { left: 50%; }
  .par-service { grid-template-columns: 1fr; }
  .onglets-service { grid-template-columns: repeat(4, 1fr); }
  .onglets-service button { text-align: center; padding: 10px 6px; font-size: 14px; }
  .engagements-nuit { grid-template-columns: 1fr; gap: 22px; }
  .engagements-nuit > div { padding: 0; border-left: 0; }
  .reglages { grid-template-columns: repeat(2, 1fr); }
  .resultats, .atelier-sim { grid-template-columns: 1fr; }
  /* Simuler, partie 1 : sur petit écran, le graphique reste avant les chiffres clés */
  .exemple > div:first-child { display: contents; }
  .exemple { row-gap: 0; }
  .exemple > div:last-child { margin-top: 28px; }
  .exemple .chiffres-cles, .exemple .note-exemple { order: 2; }
  /* Simuler, atelier : les quatre courbes juste au-dessus des quatre réglages (on les voit bouger pendant qu'on règle),
     puis le poids de chaque variable ; les deux rôles restent côte à côte, reliés par le « + » */
  .atelier-sim .resultats { display: contents; }
  .indicateurs { order: 1; }
  .atelier-sim .pupitre { order: 2; }
  .poids { order: 3; }
  .roles { gap: 16px; }
  /* Vos données : le chemin en 2 × 2, sans les flèches ; les engagements restent sur deux colonnes */
  .chemin { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 18px; }
  .etape-chemin + .etape-chemin::before { display: none; }
  /* Nous contacter : le formulaire d'abord */
  .rdv .carte-formulaire { order: -1; }
  .pied .conteneur { grid-template-columns: 1fr 1fr; }
  .pied .conteneur > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) { /* le menu passe dans le burger dès la tablette (Gemini, 30/10 : il débordait entre 861 et 925 px) */
  .burger { display: block; }
  .menu { position: fixed; inset: 0 0 auto; padding: 90px var(--gouttiere) 28px; border: 0; border-radius: 0 0 20px 20px; background: var(--fond); flex-direction: column; align-items: stretch; gap: 4px; font-size: 18px; transform: translateY(-105%); transition: transform .4s var(--sortie); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
  .menu .bouton { margin-top: 10px; font-size: 16px; padding: 12px 18px; }
  .entete.ouvert .menu { transform: none; }
  .entete .logo, .pastille, .burger { position: relative; z-index: 2; }
  .page-en-cours { display: block; flex: 1; min-width: 0; margin-left: -4px; padding-left: 14px; border-left: 1px solid var(--bord); font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-repere { display: none !important; }
  .menu a[aria-current="page"]:not(.bouton) { background: color-mix(in srgb, var(--bleu-ui) 18%, transparent); }
  .entete.ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .entete.ouvert .burger span:nth-child(2) { opacity: 0; }
  .entete.ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
/* ===== Téléphone (phase 2, 30/10/2026) : chaque bloc tient à peu près sur un écran (~375-390 × 680 px utiles).
   Plutôt que d'empiler les grilles en une colonne, on resserre et on garde côte à côte ce qui tient
   (cahier des charges de Gemini, skills apple-design et emil-design-eng). ===== */
@media (max-width: 760px) {
  .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Nous contacter : le formulaire d'abord, la suite des étapes en dessous */
  .rdv { gap: 20px; }
  .carte-formulaire .deux-champs { grid-template-columns: 1fr 1fr; gap: 0 10px; }
}
@media (max-width: 600px) {
  :root { --gouttiere: 16px; }
  html { scroll-padding-top: 64px; }
  body { font-size: 16px; }

  /* --- Commun --- */
  /* En-tête compact (~56 px) */
  .entete { padding: 8px 0; }
  .entete .logo img { height: 22px; }
  .entete-droite { gap: 8px; }
  .entete .conteneur { gap: 8px; }
  .page-en-cours { margin-left: 2px; padding-left: 9px; font-size: 13px; letter-spacing: -.01em; } /* « Qui sommes-nous ? » tient à 360 px ; en dessous, des points de suspension */
  .pastille { padding: 3px; }
  .pastille button { width: 28px; height: 28px; }
  /* Un seul bouton : celui du thème que l'on n'a pas (la lune la journée, le soleil la nuit) ; la place va au nom de la page */
  .pastille button[aria-pressed="true"] { display: none; }
  .burger { width: 40px; height: 40px; padding: 8px 9px; border-radius: 11px; }
  .menu { padding: 66px var(--gouttiere) 20px; font-size: 17px; }
  .menu a { padding: 11px 14px; }

  /* Haut des pages intérieures : resserré, la première partie commence tout de suite dessous */
  .bandeau { padding: 76px 0 18px; }
  .bandeau .surtitre { padding: 5px 13px 5px 11px; font-size: 13px; gap: 8px; }
  .bandeau .surtitre::before { width: 6px; height: 6px; }
  .bandeau h1 { font-size: clamp(28px, 7.5vw, 36px); margin-top: 12px; }
  .bandeau .intro { font-size: 15px; line-height: 1.45; margin-top: 8px; }
  .bandeau + .section { padding-top: 22px; }

  .section { padding: 52px 0; } /* de l'air entre les grands blocs (Gemini, 30/10) : la place vient des textes secondaires retirés plus bas */
  .surtitre { margin-bottom: 8px; font-size: 12px; }
  .titre-section, .tete h2 { font-size: clamp(22px, 6vw, 28px); }
  .chapeau { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .note-exemple, .mention { margin-top: 8px; font-size: 12px; line-height: 1.45; }
  /* Textes secondaires retirés sur téléphone (Gemini, 30/10) : le titre et le visuel se suffisent.
     On garde la mention de confidentialité du formulaire, et « Exemple fictif » seul sous les exemples chiffrés */
  .note-exemple:not(.note-fictif), .mention:not(.note-fictif) { display: none; }
  .formulaire .note-exemple { display: block; }
  .note-suite { display: none; }
  #pourquoi .tete p, .chapeau:has(+ .par-service), .chapeau:has(+ .atelier-sim) { display: none; }
  .numero-titre { gap: 12px; }
  .numero-titre .num { width: 30px; height: 30px; margin-top: 0; border-radius: 9px; font-size: 14px; }
  .lien-bleu, .lien-section { margin-top: 14px; font-size: 12px; }
  .bouton { padding: 12px 20px; font-size: 15px; }
  /* Petits textes des graphiques : lisibles une fois le dessin réduit à la largeur du téléphone */
  .carte-graphique svg text { font-size: 19px; }
  .carte-graphique svg text[style] { font-size: 16px !important; }

  /* Appel de fin de page : panneau arrondi, avec une marge de chaque côté */
  .appel .conteneur { width: auto; margin: 0 var(--gouttiere); padding: 32px 18px; border-radius: 20px; }
  .appel h2 { font-size: 24px; }
  .appel p { margin: 12px auto 20px; font-size: 15px; }

  /* Pied de page : le logo, puis « Contact » et « Le site » côte à côte */
  .pied { margin-top: 12px; padding: 32px 0 24px; font-size: 14px; }
  .pied .conteneur { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pied .conteneur > :first-child { grid-column: 1 / -1; }
  .pied img { height: 24px; margin-bottom: 10px; }
  .pied .bas { margin-top: 0; padding-top: 16px; font-size: 12px; }

  /* Fenêtre « Nous contacter » : un tiroir qui monte du bas (style iOS), le formulaire d'un seul bloc */
  .fenetre-rdv { width: 100%; max-width: none; height: fit-content; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom)); animation: tiroir-entre .42s var(--sortie); }
  .fenetre-rdv.ferme { animation: tiroir-sort .24s cubic-bezier(.4, 0, 1, 1) forwards; }
  .fenetre-rdv.tire { animation: none; transition: none; }
  .poignee-tiroir { display: block; position: absolute; top: 0; left: 0; right: 56px; height: 40px; cursor: grab; touch-action: none; }
  .poignee-tiroir::before { content: ""; position: absolute; top: 7px; left: calc(50% + 28px); width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--bord); }
  .fenetre-rdv.tire .poignee-tiroir { cursor: grabbing; }
  .fenetre-rdv .fermer { top: 12px; right: 12px; width: 34px; height: 34px; font-size: 21px; }
  .fenetre-rdv .surtitre { margin-bottom: 4px; }
  .fenetre-rdv h2 { font-size: 23px; padding-right: 40px; }
  .fenetre-intro { margin: 4px 0 12px; font-size: 13.5px; line-height: 1.45; }
  .fenetre-rdv .deux-champs { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .fenetre-rdv .champ { margin-bottom: 8px; }
  .fenetre-rdv .champ label { font-size: 13px; margin-bottom: 3px; }
  .fenetre-rdv .champ input, .fenetre-rdv .champ textarea { padding: 9px 11px; }
  .fenetre-rdv .champ textarea { min-height: 56px; }
  .fenetre-rdv .erreur { font-size: 12.5px; }
  .fenetre-rdv .formulaire .bouton { padding: 12px 20px; }
  .fenetre-rdv .note-exemple { margin-top: 8px; }

  /* --- Accueil --- */
  /* 1. Ouverture : plein écran, centrée */
  .ouverture { min-height: 100svh; padding: 72px 0 32px; }
  .ouverture .surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0; border: 1px solid var(--bord); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; letter-spacing: .02em; background: var(--voile); }
  .ouverture h1 { font-size: clamp(38px, 10.5vw, 46px); margin-top: 18px; }
  .ouverture .intro { font-size: 16px; margin-top: 16px; }
  .ouverture .actions { margin-top: 24px; }
  .ouverture .bouton { padding: 12px 18px; font-size: 14px; }

  /* 2. Trois cartes horizontales : le texte à gauche, la vignette à droite */
  .pourquoi { padding: 52px 0; }
  .tete { gap: 8px; }
  .tete p { max-width: none; font-size: 15px; line-height: 1.5; }
  .cartes { margin-top: 18px; gap: 12px; }
  .carte { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .carte .vis { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 8px; }
  .carte h3 { grid-column: 1; margin: 0; font-size: 16.5px; line-height: 1.2; align-self: end; }
  .carte p { grid-column: 1; margin-top: 4px; font-size: 13.5px; line-height: 1.4; align-self: start; }
  .carte .l { grid-column: 1; margin-top: 6px; font-size: 11px; }

  /* 3. De vos fichiers à vos décisions : les quatre fichiers sur une ligne, la flèche, puis le tableau */
  .avant-apres { margin-top: 16px; gap: 8px; }
  .colonne-titre { margin-bottom: 8px; font-size: 11px; }
  .colonne-titre strong { display: inline; margin: 0 0 0 6px; font-size: 17px; } /* l'étiquette et le titre sur une ligne */
  .fichiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: auto; }
  .fichier { position: static; width: auto; padding: 8px 6px; font-size: 11px; --r: 0deg; }
  .fichier i { height: 4px; margin-top: 5px; }
  .avant-apres > .passage { width: 34px; height: 34px; }
  .passage svg { width: 18px; height: 18px; }
  .tableau { padding: 12px; }
  .tableau .barres { height: 85px; gap: 7px; }
  .bulles { margin-top: 10px; gap: 6px; }
  .bulle { padding: 8px 12px; font-size: 13.5px; line-height: 1.4; }
  .nouveau { margin-top: 20px; padding-top: 28px; font-size: 16.5px; line-height: 1.4; }
  .nouveau::before { top: -6px; font-size: 56px; }

  /* 4. Simuler : le texte court, puis l'exemple compact (les quatre effets sur une ligne) */
  /* le slogan et le lien passent sous l'exemple : le titre, le texte et l'exemple tiennent ensemble */
  .simulation { gap: 0; }
  .simulation > div:first-child { display: contents; }
  .simulation > div:first-child > * { justify-self: start; }
  .simulation .slogan, .simulation .lien-section { order: 2; }
  .simulation .slogan { margin-top: 14px; font-size: 17px; }
  .atelier { margin-top: 14px; padding: 12px 14px; }
  .atelier-titre { font-size: 16px; }
  .choix-zone { margin: 8px 0; }
  .choix-zone > .mono { display: none; } /* « Une variable » : déjà dit par le titre et la légende */
  .choix { flex: 1; }
  .choix button { flex: 1; padding: 7px 0; font-size: 13.5px; }
  .graphe-sim { padding: 8px 10px 6px; }
  .graphe-legende { gap: 10px; }
  .graphe-legende .mono { font-size: 10.5px; }
  .graphe-sim svg { margin-top: 4px; }
  .effets { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .effet { padding: 6px 4px; text-align: center; }
  .effet .mono { font-size: 9.5px; letter-spacing: .03em; }
  .effet b { font-size: 16px; }

  /* 5. Les quatre étapes en 2 × 2 */
  .etapes { grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 20px; }
  .etape .numero { width: 34px; height: 34px; font-size: 15px; }
  .etape h3 { margin-top: 10px; font-size: 16px; line-height: 1.2; }
  .etape p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }

  /* 6. Vos données : le titre et le lien, puis les trois engagements resserrés */
  .donnees { gap: 14px; }
  .engagements { gap: 8px; }
  .engagement { padding: 12px 14px; gap: 12px; }
  .engagement svg { width: 22px; height: 22px; }
  .engagement strong { font-size: 15.5px; }
  .engagement span { font-size: 13.5px; line-height: 1.45; }

  /* 7. Les associés en lignes : la photo à gauche, le texte à droite */
  .associes { grid-template-columns: 1fr; margin-top: 18px; gap: 14px; }
  .associe { display: grid; grid-template-columns: 68px 1fr; column-gap: 14px; text-align: left; align-items: center; }
  .associe img { grid-row: 1 / 4; width: 68px; height: 68px; margin: 0; }
  .associe .role { margin-top: 0; font-size: 11px; align-self: end; }
  .associe h3 { margin-top: 1px; font-size: 17px; }
  .associe p { margin: 2px 0 0; max-width: none; font-size: 13.5px; line-height: 1.4; align-self: start; }
  .lieu { margin-top: 18px; font-size: 14px; }

  /* --- Analyser --- */
  /* 1. Les trois étapes : numéro, titre et petite illustration sur une ligne, le texte dessous */
  .parcours { margin-top: 16px; gap: 10px; }
  .etape-carte { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 6px 10px; padding: 12px 14px; }
  .etape-carte + .etape-carte::before { left: 32px; top: -11px; height: 10px; }
  .etape-carte .texte { display: contents; }
  .num-etape { position: static; grid-row: 1; grid-column: 1; width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
  .etape-carte h3 { grid-row: 1; grid-column: 2; font-size: 17px; line-height: 1.2; }
  .etape-carte .illus { grid-row: 1; grid-column: 3; min-height: 0; zoom: .4; }
  .bulle-o { left: auto; right: -12px; top: -14px; }
  .etape-carte p { grid-row: 2; grid-column: 1 / -1; margin-top: 0; font-size: 14px; line-height: 1.45; }

  /* 2. Par service : les quatre onglets, les trois chiffres et les deux graphiques côte à côte */
  .par-service { margin-top: 14px; gap: 8px; }
  .onglets-service { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .onglets-service button { padding: 8px 2px; font-size: 12.5px; border-radius: 10px; }
  .carte-service { padding: 12px; }
  .question-service { font-size: 16.5px; }
  .tuiles-claires { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
  .tuiles-claires button { padding: 8px; border-radius: 10px; }
  .tuiles-claires button::after { top: 5px; right: 5px; width: 14px; height: 14px; font-size: 9px; }
  .tuiles-claires span { padding-right: 12px; font-size: 9.5px; letter-spacing: .03em; line-height: 1.25; }
  .tuiles-claires strong { margin-top: 2px; font-size: 17px; }
  .tuiles-claires em { font-size: 11px; line-height: 1.3; }
  .explication { margin-top: 8px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; }
  .explication strong { font-size: 10px; margin-bottom: 2px; }
  .graphes { grid-template-columns: 1fr; margin-top: 10px; }
  .graphe:has(.repartition) { display: none; } /* le graphique en barres seul, sur toute la largeur */
  .graphe { padding: 8px 10px 10px; }
  .titre-graphe { font-size: 9.5px; letter-spacing: .03em; }
  .barres-service { margin-top: 8px; min-height: 96px; gap: 4px; }

  /* 3. Ce qui ne change jamais */
  .encart-nuit { padding: 20px 18px; }
  .engagements-nuit { gap: 14px; }
  .engagements-nuit h3 { font-size: 17px; }
  .engagements-nuit p { margin-top: 4px; font-size: 14px; line-height: 1.5; }

  /* --- Prévoir --- */
  /* 1. Le banc d'essai : le graphique, puis les trois méthodes côte à côte */
  .banc { margin-top: 14px; gap: 8px; }
  .banc .carte-graphique { padding: 10px 10px 8px; }
  .legende-claire, .legende-sim { gap: 4px 12px; margin-top: 4px; font-size: 11.5px; }
  .legende-claire i { width: 16px; margin-right: 4px; }
  .essais { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .essai-ligne { flex-direction: column; gap: 4px; padding: 8px 10px; font-size: 13px; }
  .essai-ligne i { width: 20px; margin-top: 2px; }
  .essai-ligne strong { font-size: 14px; }
  .essai-ligne span { font-size: 12px; line-height: 1.35; }
  .essai-ligne b { display: block; font-size: 17px; letter-spacing: -.02em; }
  .retenue { margin: 4px 0 0; font-size: 11px; padding: 1px 8px; }
  .remise-claire { grid-column: 1 / -1; margin-top: 2px; }
  .remise { padding: 7px 14px; font-size: 13px; }

  /* 2. Les méthodes resserrées */
  .methodes { margin-top: 16px; gap: 12px; }
  .methode { padding: 14px 16px; }
  .methode h3 { font-size: 17px; }
  .methode p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }

  /* 3. La fourchette */
  .fourchette-bloc { gap: 14px; }
  .carte-nuit { padding: 14px 14px 12px; }
  .compteur { margin-top: 6px; font-size: 13.5px; }

  /* 4. En toute franchise (Prévoir et Simuler) */
  .limites { margin-top: 14px; gap: 8px; }
  .limites li { padding-left: 26px; font-size: 15px; line-height: 1.5; }
  .limites li::before { width: 14px; }

  /* --- Simuler --- */
  /* 1. Le graphique, puis les trois chiffres clés côte à côte */
  .exemple > div:last-child { margin-top: 12px; }
  .exemple .carte-graphique { padding: 10px 10px 8px; }
  .chiffres-cles { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
  .chiffre-cle { padding: 8px 10px; }
  .chiffre-cle span { font-size: 9.5px; letter-spacing: .03em; line-height: 1.25; }
  .chiffre-cle strong { margin-top: 3px; font-size: 17px; line-height: 1.15; }
  .chiffre-cle em { font-size: 12px; }

  /* 2. L'atelier : le titre, les quatre courbes et les quatre réglages juste dessous (ordre posé à 960 px) ;
     le poids de chaque variable et le slogan restent sur ordinateur et tablette */
  .atelier-sim { margin-top: 18px; gap: 12px; }
  .indicateurs { gap: 10px; }
  .atelier-sim .pupitre { padding: 10px 12px; }
  .poids, .slogan-sim { display: none; }
  .indicateur { padding: 8px 10px 6px; }
  .indicateur .tete-ind span { font-size: 10px; letter-spacing: .04em; }
  .indicateur .tete-ind strong { font-size: 16px; }
  .indicateur svg { height: 32px; margin-top: 2px; }
  .reglages { gap: 10px; }
  .bloc-reglage { padding: 6px 10px 10px; border-radius: 12px; }
  .bloc-reglage > .mono { font-size: 10px; }
  .pas { margin: 2px 0 8px; }
  .pas button { width: 28px; height: 28px; border-radius: 8px; }
  .pas output { font-size: 17px; }
  .bornes { display: none; }
  .pied-pupitre { padding-top: 8px; gap: 8px; }
  .pied-pupitre .mono { font-size: 10px; line-height: 1.3; }
  .pied-pupitre .remise { padding: 6px 10px; font-size: 12.5px; }

  /* 3. Les rôles : deux cartes compactes reliées par le « + » */
  .roles { grid-template-columns: 1fr; margin-top: 14px; gap: 0; }
  .role-carte { padding: 14px 16px; }
  .role-carte p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
  .roles .plus { position: relative; z-index: 1; width: 34px; height: 34px; margin: -6px auto; }
  .roles .plus svg { width: 16px; height: 16px; }
  .decision { margin-top: 18px; font-size: 22px; }

  /* --- Vos données --- */
  /* 1. Le chemin en 2 × 2, sans les flèches entre les cartes */
  .chemin { gap: 10px; margin-top: 16px; }
  .etape-chemin { padding: 14px 12px; }
  .etape-chemin::after { top: 12px; right: 12px; font-size: 12px; }
  .etape-chemin .icone { width: 36px; height: 36px; border-radius: 11px; }
  .etape-chemin .icone svg { width: 20px; height: 20px; }
  .etape-chemin h3 { margin-top: 10px; font-size: 16px; line-height: 1.2; }
  .etape-chemin p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }

  /* 2. Les six engagements : le titre seul de chacun, l'explication reste sur ordinateur et tablette */
  .engagements-grille { grid-template-columns: 1fr; margin-top: 16px; gap: 10px; }
  .engagements-grille .engagement { padding: 12px 14px; gap: 12px; align-items: center; }
  .engagements-grille .engagement svg { width: 20px; height: 20px; }
  .engagements-grille .engagement strong { font-size: 15px; line-height: 1.3; }
  .engagements-grille .engagement span { display: none; }

  /* --- Qui sommes-nous --- */
  .associes-page .associe { grid-template-columns: 80px 1fr; }
  .portrait { grid-row: 1 / 4; width: 80px; height: 80px; margin: 0; }
  .associes-page .associe img { width: 68px; height: 68px; }
  .portrait circle { stroke-width: 4; }
  .associes-page .associe h3 { font-size: 18px; }
  .associes-page .associe p { font-size: 14px; }
  .filet-o { margin-bottom: 18px; }
  .mission blockquote { font-size: clamp(20px, 5.5vw, 26px); }
  .mission p { margin-top: 14px; font-size: 15.5px; }

  /* --- Nous contacter --- */
  .carte-formulaire { padding: 16px 14px; }
  .champ { margin-bottom: 10px; }
  .champ label { font-size: 13.5px; margin-bottom: 4px; }
  .champ input, .champ textarea { padding: 10px 11px; }
  .champ textarea { min-height: 64px; }
  .ensuite .titre-section { font-size: 22px; }
  .suite { margin: 14px 0 16px; gap: 12px; }
  .suite li { padding-left: 44px; }
  .suite li::before { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
  .suite li + li::after { left: 15px; top: -11px; height: 8px; }
  .suite strong { font-size: 15.5px; line-height: 1.3; }
  .suite span { font-size: 14px; }

  /* --- Pages légales : le sommaire devient une rangée de pastilles qui défile de côté --- */
  .legal { grid-template-columns: minmax(0, 1fr); gap: 18px; } /* minmax : la rangée de pastilles défile au lieu d'élargir la page */
  .sommaire p { margin-bottom: 8px; font-size: 11px; }
  .sommaire ol { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere) 8px; border-left: 0; white-space: nowrap; scrollbar-width: none; font-size: 13.5px; }
  .sommaire ol::-webkit-scrollbar { display: none; }
  .sommaire li { flex: none; }
  .sommaire a { display: block; padding: 6px 12px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--voile); }
  .texte-legal article { padding: 22px 0; }
  .texte-legal h2 { font-size: 21px; margin-bottom: 10px; }
  .texte-legal dl { grid-template-columns: 1fr; gap: 2px; }
  .en-bref { padding: 18px 16px; margin-bottom: 24px; }
  .en-bref h2 { font-size: 19px; }
}
@keyframes tiroir-entre { from { transform: translateY(100%); } }
@keyframes tiroir-sort { to { transform: translateY(100%); } }

/* ===== Aperçu téléphone sur ordinateur (conception, serveur local seulement : js/main.js) ===== */
.bouton-apercu { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px dashed var(--bord); border-radius: 999px; background: var(--voile); color: var(--doux); font: inherit; font-size: 13px; cursor: pointer; transition: color .2s, border-color .2s; }
.bouton-apercu:hover { color: var(--txt); border-color: var(--accent); }
@media (max-width: 1199px) { .bouton-apercu { display: none; } } /* en dessous, le menu n'a pas la place */
html.apercu-ouvert { overflow: hidden; }
.apercu { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: rgba(6, 4, 22, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #F2F3FA; font-size: 14px; animation: voile-entre .25s ease; }
.apercu-barre { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.apercu-barre strong { font-weight: 600; }
.apercu-formats { display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; }
.apercu-formats button, .apercu-fermer, .apercu-tourner { font: inherit; font-size: 13px; border: 0; border-radius: 9px; padding: 7px 12px; background: none; color: #A6ABD0; cursor: pointer; transition: background-color .2s, color .2s; }
.apercu-formats button:hover { color: #F2F3FA; }
.apercu-formats button[aria-pressed="true"] { background: #F2F3FA; color: #110B35; }
.apercu-tourner { border: 1px solid rgba(255, 255, 255, .12); }
.apercu-tourner:hover { color: #F2F3FA; }
.apercu-tourner[aria-pressed="true"] { border-color: #E37E12; color: #F2F3FA; }
.apercu-echelle { font-size: 12px; color: #A6ABD0; }
.apercu-fermer { margin-left: auto; border: 1px solid rgba(255, 255, 255, .16); color: #F2F3FA; }
.apercu-fermer:hover { border-color: #E37E12; }
.apercu-scene { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* flex : le téléphone réduit reste centré même quand sa taille d'origine dépasse */
.apercu-telephone { flex: none; }
.apercu-telephone { padding: 12px; border-radius: 50px; background: #04030D; box-shadow: 0 0 0 2px #2A2550, 0 40px 90px -30px rgba(0, 0, 0, .9); transform: scale(var(--echelle, 1)); }
.apercu-telephone iframe { display: block; width: var(--l, 390px); height: var(--h, 700px); border: 0; border-radius: 38px; background: #110B35; }
/* La page vue dans le cadre : pas de barre de défilement, comme sur un téléphone */
html.dans-apercu { scrollbar-width: none; scrollbar-gutter: auto; }
html.dans-apercu::-webkit-scrollbar { display: none; }

/* Moins d'animations demandées : rien ne bouge, tout s'affiche directement,
   mais les fondus courts restent (couleurs, opacité, page, fenêtre) : réduire n'est pas tout couper */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  ::view-transition-group(entete) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: page-sort .15s ease both; }
  ::view-transition-new(root) { animation: fondu-seul .2s ease both; }
  .fenetre-rdv, .fenetre-rdv::backdrop { animation: voile-entre .2s ease !important; }
  .bouton:active, .menu .bouton:active, .pas button:active:not(:disabled), .choix button:active, .onglets-service button:active, .tuiles-claires button:active, .remise:active, .pastille button:active, .fenetre-rdv .fermer:active { transform: none; }
  .trace { stroke-dashoffset: 0; }
  .apparait, .revele, .bulle, .fleche-o, .bulle-o { opacity: 1; transform: none; }
  .tableau .barres span, .etape-carte + .etape-carte::before, .coches li::before, .grille i, .mini-barres b, .barres-service b, .repartition i::before { transform: none; }
  .etapes::after { transform: scaleX(1); }
  .essai, .essai-retenu { stroke-dasharray: .016 .011; }
  .essai { opacity: .35; }
  .essai-ligne, .retenue, .points circle, .etape-chemin, .etape-chemin + .etape-chemin::before { opacity: 1; transform: none; }
  .essai-ligne:not(.gagnante) { opacity: .45; }
  .essai-ligne.gagnante { box-shadow: var(--ombre-verre), inset 0 0 0 1px #E37E12; }
  .bande { clip-path: none; }
  .remise-claire { display: none; }
}