:root {
  --papier: #fbfaf6; --blanc: #ffffff; --encre: #1a1a1a; --corps: #4a4a4a;
  --label: #8f8d84; --filet: #dcd8cc; --froid: #f1f0ec; --champ: #ffffff;
  --vert: #2d5a3d; --vert-clair: #6b8e5a;
  --violet: #5054a0; --turquoise: #70bfac; --orange: #e17303;
  --sans: 'Open Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Sometype Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --titre: 'Albert Sans', 'Open Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; transition: background-color .5s ease, color .5s ease; }
a { color: var(--vert); text-decoration: none; }
a:hover { color: var(--vert-clair); }
h1, h2, h3 { margin: 0 0 18px; font-family: var(--sans); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: 54px; letter-spacing: -0.015em; }
h2 { font-size: 38px; }
h3 { font-size: 23px; margin-bottom: 10px; }
@media (max-width: 760px) { h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 21px; } }
p { margin: 0 0 15px; }
ul, ol { padding-left: 22px; margin: 0 0 15px; }
li { margin: 0 0 8px; }
strong { font-weight: 600; color: var(--encre); }
em { font-style: italic; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (min-width: 900px) { .wrap { padding: 0 56px; } }
.texte { max-width: 740px; }
.mono { font-family: var(--mono); color: var(--corps); line-height: 1.7; }
.grand { font-family: var(--mono); font-size: 21px; line-height: 1.5; color: var(--encre); }
@media (max-width: 760px) { .grand { font-size: 18px; } }
.sur { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vert); margin: 0 0 16px; }
.source { font-family: var(--mono); font-size: 13px; color: var(--label); margin: -6px 0 16px; }
.degrade { font-family: var(--titre); font-weight: 600; letter-spacing: -0.025em; color: var(--encre); }

/* ---- les climate stripes, d'ou viennent les couleurs de la marque */
.stripes { display: flex; height: 74px; width: 100%; }
.stripes i { flex: 1; display: block; }
.stripes.fine { height: 8px; }
.legende { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--label); letter-spacing: .06em; margin-top: 9px; }
.legende span:nth-child(2) { text-align: center; }
@media (max-width: 700px) { .stripes { height: 46px; } .legende span:nth-child(2) { display: none; } }

/* ---- barre de navigation */
header.site { position: sticky; top: 0; z-index: 60; background: rgba(251,250,246,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); }
header.site .dedans { display: flex; align-items: center; gap: 20px; max-width: 1320px; margin: 0 auto; padding: 14px 28px; }
header.site .marque { display: flex; align-items: center; gap: 10px; margin-right: auto; }
header.site .marque img { width: 28px; height: 28px; object-fit: contain; }
header.site .marque span { font-family: var(--titre); font-weight: 700; font-size: 22px; color: var(--encre); }
nav.menu { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
nav.menu a { color: var(--corps); font-weight: 600; padding: 4px 0; white-space: nowrap; }
nav.menu a.on { color: var(--encre); box-shadow: inset 0 -1px 0 var(--encre); }
nav.menu a:hover { color: var(--encre); }
/* l'interrupteur de l'accueil : la pastille couvre « Inver » en noir, « sion » en clair */
.bascule { position: relative; display: flex; width: 96px; height: 38px; padding: 0; border: 2px solid var(--encre); border-radius: 50vw; background: transparent; color: var(--encre); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto; overflow: hidden; }
.bascule i { position: absolute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 50vw; background: #669ca9; transition: transform .5s ease; }
html[data-theme="clair"] .bascule i { transform: translate3d(100%,0,0); }
.bascule b { position: relative; z-index: 1; width: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.bascule:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; }
@media (max-width: 900px) { header.site .dedans { flex-wrap: wrap; gap: 12px 18px; } nav.menu { order: 3; width: 100%; font-size: 14px; gap: 4px 18px; } }

/* ---- corps */
main { padding: 0; }
section { margin: 0 0 78px; }
@media (max-width: 760px) { section { margin-bottom: 54px; } }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.deux.large-gauche { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 900px) { .deux, .deux.large-gauche { grid-template-columns: 1fr; gap: 32px; } }

/* ---- la paire opposee, le geste central de cette direction */
.paire { display: grid; grid-template-columns: 1fr 1px 1fr; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); margin: 0 0 22px; }
.paire .axe { background: var(--filet); }
.paire .cote { padding: 44px 46px 48px; }
.paire .hier { background: var(--froid); }
.paire .t { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.paire .hier .t { color: var(--label); }
.paire .demain .t { color: var(--vert); }
.paire h3 { font-size: 30px; margin-bottom: 0; }
.paire .hier h3 { color: #6e6c66; }
.paire ul { margin: 22px 0 0; padding: 0; list-style: none; }
.paire .hier li { font-size: 15px; line-height: 1.35; color: #6e6c66; padding: 7px 0; margin: 0; border-bottom: 1px solid #e4e2db; }
.paire .demain li { font-size: 17px; line-height: 1.75; color: var(--corps); padding: 15px 0; margin: 0; border-bottom: 1px solid var(--filet); }
.paire li b { font-weight: 500; color: var(--encre); }
@media (max-width: 860px) { .paire { grid-template-columns: 1fr; } .paire .axe { height: 1px; } .paire .cote { padding: 32px 28px 36px; } }

/* ---- cartes, devenues des filets */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; margin: 0 0 22px; }
.carte { background: transparent; border: 0; border-top: 1px solid var(--filet); border-radius: 0; padding: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.carte .num { font-family: var(--sans); font-weight: 600; font-size: 52px; line-height: 1; color: var(--vert-clair); }
.carte p { flex-grow: 1; color: var(--corps); }
.carte a { font-size: 15px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 26px; border-radius: 3px; background: var(--vert); color: #fff; font-family: var(--mono); font-size: 16px; font-weight: 500; border: 0; cursor: pointer; text-align: center; }
.bouton:hover { background: #24492f; color: #fff; }
.bouton.creux { background: transparent; border: 1px solid var(--filet); color: var(--encre); }
.bouton.creux:hover { background: var(--froid); color: var(--encre); }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; }
.note { font-family: var(--mono); font-size: 14px; color: var(--label); margin: 6px 0 0; }
figure.fig { margin: 0; }
figure.fig img, figure.fig video { width: 100%; display: block; border-radius: 3px; }
figure.fig figcaption { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--label); text-align: left; margin-top: 12px; }
blockquote { margin: 0 0 22px; padding-left: 20px; border-left: 2px solid var(--vert-clair); }
blockquote p.dit { font-family: var(--sans); font-size: 22px; font-style: italic; font-weight: 400; line-height: 1.45; color: var(--encre); margin: 0 0 6px; }
blockquote p.qui { font-family: var(--mono); font-size: 13px; color: var(--label); margin: 0; }
.tableau { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
/* tableau des dates de la formation : sur ordinateur, une date tient sur une ligne ; la séance gratuite, plus longue, garde ses deux lignes par un style posé sur sa case (09/11/2026) */
@media (min-width: 900px) { table.dates td:first-child { white-space: nowrap; } }
th { text-align: left; padding: 0 16px 12px 0; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); border-bottom: 1px solid var(--filet); }
td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--filet); font-size: 16px; color: var(--corps); }
td:first-child { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--encre); }
td b, td strong { font-weight: 500; color: var(--encre); }
td:last-child, th:last-child { padding-right: 0; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 30px 40px; }
.chiffres .n { font-family: var(--sans); font-weight: 600; font-size: 64px; line-height: 1; color: var(--vert); }
.chiffres .l { font-size: 15px; color: var(--corps); margin-top: 6px; }
.pas { counter-reset: pas; list-style: none; padding: 0; }
.pas li { counter-increment: pas; position: relative; padding-left: 48px; margin: 0 0 18px; }
.pas li::before { content: counter(pas); position: absolute; left: 0; top: -2px; font-family: var(--mono); font-size: 22px; color: var(--vert-clair); }
.faq h3 { font-size: 20px; margin: 24px 0 4px; }
.bandeau { background: var(--blanc); border: 1px solid var(--filet); border-radius: 3px; padding: 34px; }
.trois-temps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.trois-temps > div { border-top: 1px solid var(--filet); padding-top: 20px; }
.trois-temps .duree { font-family: var(--mono); font-size: 20px; color: var(--vert-clair); margin-bottom: 8px; }
.trois-temps > div:nth-child(2) .duree { color: var(--turquoise); }
.trois-temps > div:nth-child(3) .duree { color: var(--orange); }

/* ---- formulaire */
form .champ { margin: 0 0 14px; }
label { display: block; font-family: var(--mono); font-size: 14px; color: var(--corps); margin: 0 0 6px; }
input[type=text], input[type=email], textarea, select { width: 100%; font: inherit; font-size: 17px; padding: 13px; border: 1px solid var(--filet); border-radius: 3px; background: var(--champ); color: var(--encre); }
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--label) 50%), linear-gradient(135deg, var(--label) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--vert-clair); border-color: var(--vert); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--mono); font-size: 14px; color: var(--corps); margin: 10px 0 16px; }
.consent input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--vert); flex: 0 0 auto; }
.erreur { color: #a33; font-size: 15px; margin: 10px 0; display: none; }
.merci { display: none; background: #eef3ec; border: 1px solid var(--vert-clair); border-radius: 3px; padding: 18px; margin: 12px 0; color: var(--encre); }
.deux-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ---- carrousel de mots */
.mots { overflow: hidden; margin: 26px 0 30px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mots .piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.mots .piste span { font-family: var(--sans); font-weight: 500; font-size: 32px; padding: 0 26px; white-space: nowrap; color: var(--vert); }
.mots .piste span:nth-child(2n) { color: var(--encre); }
.mots .piste span:nth-child(3n) { color: var(--orange); }
@keyframes defile { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (max-width: 760px) { .mots .piste span { font-size: 23px; padding: 0 16px; } }

/* ---- citation animée */
.citation { font-family: var(--sans); font-size: 52px; font-weight: 600; line-height: 1.28; letter-spacing: -0.02em; max-width: 1000px; margin: 0 auto; }
.citation em { font-style: normal; display: inline-block; }
.citation .m-robustes { color: var(--vert); }
.citation .m-performants { color: var(--vert); }
.citation .m-deconstruire { color: var(--orange); }
.citation .m-inverser { color: var(--violet); }
@media (max-width: 760px) { .citation { font-size: 30px; } }

/* ---- fin de page */
.fin { position: relative; }
.fin .dedans { min-height: 68vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.fin .cercle { position: absolute; left: 50%; top: 50%; width: 34vh; height: 34vh; border-radius: 50%; background: #eef1ea; transform: translate3d(-50%, -50%, 0) scale(.5); z-index: 0; }
.fin .par-dessus { position: relative; z-index: 1; }
.fin .grand-titre { font-family: var(--sans); font-size: 60px; font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; margin-bottom: 26px; color: var(--encre); }
@media (max-width: 760px) { .fin .grand-titre { font-size: 40px; } .fin .cercle { width: 56vw; height: 56vw; } }
footer.site { position: relative; z-index: 3; background: var(--papier); border-top: 1px solid var(--filet); padding: 34px 0 52px; }
footer.site .lignes { display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; font-family: var(--mono); font-size: 13px; color: var(--label); }
footer.site a { color: var(--label); }
footer.site a:hover { color: var(--encre); }

/* ---- animations, toutes derrière .js */
.voile { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; }
html.js .voile { display: flex; }
.voile .pan { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--papier); transition: transform 1s cubic-bezier(.76,0,.24,1); }
.voile .pan.g { left: 0; } .voile .pan.d { right: 0; }
.voile img { width: 80px; position: relative; z-index: 1; opacity: 1; transition: opacity .5s ease; }
html.ouvert .voile .pan.g { transform: translate3d(-101%,0,0); }
html.ouvert .voile .pan.d { transform: translate3d(101%,0,0); }
html.ouvert .voile img { opacity: 0; }
html.fini .voile { display: none; }

html.js .masque { overflow: hidden; }
html.js .masque > * { transform: translate3d(0,120%,0); transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
html.js.ouvert .masque > * { transform: translate3d(0,0,0); }
html.js .fondu { opacity: 0; transition: opacity 1s ease .15s; }
html.js.ouvert .fondu { opacity: 1; }

html.js .revele { opacity: 0; transform: translate3d(0,24px,0); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
html.js .revele.vu { opacity: 1; transform: translate3d(0,0,0); }
html.js .revele.tard { transition-delay: .12s; }
html.js .revele.plus-tard { transition-delay: .24s; }

html.js .colle { position: sticky; top: 110px; }
@media (max-width: 900px) { html.js .colle { position: static; } }

/* l'inversion : la colonne d'hier se vide de sa couleur, celle de demain la prend */
html.js .paire .hier { filter: saturate(1); transition: filter 1.2s ease, opacity 1.2s ease; }
html.js .paire.vu .hier { filter: saturate(0); opacity: .72; }
html.js .paire .demain li { opacity: .35; transition: opacity .7s ease; }
html.js .paire.vu .demain li { opacity: 1; }
html.js .paire.vu .demain li:nth-child(2) { transition-delay: .08s; }
html.js .paire.vu .demain li:nth-child(3) { transition-delay: .16s; }
html.js .paire.vu .demain li:nth-child(4) { transition-delay: .24s; }
html.js .paire.vu .demain li:nth-child(5) { transition-delay: .32s; }
html.js .paire.vu .demain li:nth-child(6) { transition-delay: .40s; }

/* les bandes se déploient de gauche à droite, comme la mesure qu'elles sont */
html.js .stripes i { transform: scaleY(.12); transform-origin: bottom; transition: transform .9s cubic-bezier(.16,1,.3,1); }
html.js .stripes.vu i { transform: scaleY(1); }

html.js .fin .cercle { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
html.js .fin.vu .cercle { transform: translate3d(-50%,-50%,0) scale(1); }
html.js .fin .grand-titre span { display: inline-block; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
html.js .fin .grand-titre span.g { transform: translate3d(-110%,0,0); }
html.js .fin .grand-titre span.d { transform: translate3d(110%,0,0); }
html.js .fin.vu .grand-titre span { transform: translate3d(0,0,0); }
html.js .fin .bouton { transform: translate3d(0,180%,0); transition: transform 1s cubic-bezier(.16,1,.3,1) .2s; }
html.js .fin.vu .bouton { transform: translate3d(0,0,0); }

html.js .citation em { transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity 1.1s ease; }
html.js .citation .m-robustes { transform: scale(.72); opacity: .2; }
html.js .citation .m-performants { transform: rotate(38deg); }
html.js .citation .m-deconstruire { transform: skewX(-38deg); }
html.js .citation .m-inverser { transform: scaleY(-1); }
html.js .citation.vu em { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .revele, html.js .fondu, html.js .masque > *, html.js .citation em,
  html.js .fin .cercle, html.js .fin .grand-titre span, html.js .fin .bouton,
  html.js .stripes i, html.js .paire .demain li, html.js .paire .hier {
    opacity: 1 !important; transform: none !important; transition: none !important; filter: none !important;
  }
  .mots .piste { animation: none; }
  html.js .colle { position: static; }
}

/* ---- le guide de respiration, signe de l'offre */
.guide { margin: 26px 0 0; }
.guide svg { display: block; overflow: visible; }
#souffle { width: 100%; height: auto; touch-action: none; cursor: grab; }
#souffle:active { cursor: grabbing; }
.guide .fantome { fill: none; stroke: #e3e0d6; stroke-width: 7; stroke-linecap: round; }
.guide .comete { fill: none; stroke: url(#degrade-souffle); stroke-linecap: round; }
.guide .perle { fill: var(--encre); }
.guide .halo { fill: var(--turquoise); opacity: .22; }
.temps { display: flex; gap: 14px; margin: 18px 0 0; }
.etiquette { flex: 1; font-family: var(--mono); font-size: 17px; color: var(--label); border-top: 2px solid var(--filet); padding-top: 12px; transition: color .5s ease, border-color .5s ease; }
.etiquette b { display: block; font-weight: 400; font-size: 13px; color: var(--label); margin-top: 3px; }
.etiquette.actif { color: var(--encre); border-top-color: var(--vert); }
.guide .pilote { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0 0; }
.guide .pilote .bouton { min-height: 46px; padding: 11px 20px; font-size: 15px; }
.guide .pilote .bouton[aria-pressed="true"] { border-color: var(--vert); color: var(--vert); }
.guide .compte { font-family: var(--mono); font-size: 15px; color: var(--label); margin-left: auto; }
.guide .bilan { margin: 22px 0 0; border: 1px solid var(--vert-clair); border-radius: 3px; padding: 20px; background: #eef3ec; display: none; }
.guide .bilan.vu { display: block; }

/* ---- la balance des deux boucles */
.balance svg { width: 100%; height: auto; display: block; overflow: visible; }
.bal-lab { font-size: 17px; fill: var(--encre); font-family: var(--sans); }
.bal-sous { font-size: 13px; fill: var(--label); font-family: var(--sans); }
.curseur { margin: 24px 0 0; }
.curseur label { display: block; font-size: 13px; color: var(--label); margin-bottom: 12px; }
input[type=range] { width: 100%; max-width: 520px; height: 30px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0; border: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--filet); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: var(--vert); border: none; }
input[type=range]::-moz-range-track { height: 3px; background: var(--filet); border-radius: 2px; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--vert); border: none; }
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 4px; }
.verdict { margin: 20px 0 0; min-height: 92px; border-left: 2px solid var(--filet); padding-left: 20px; font-size: 16px; line-height: 1.75; color: var(--corps); }
.verdict strong { color: var(--encre); font-weight: 500; display: block; margin-bottom: 6px; }

/* ---- les trois formes de rythme */
.formes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; margin: 28px 0 20px; }
@media (max-width: 760px) { .formes { grid-template-columns: 1fr; } }
.formes .forme { border-top: 1px solid var(--filet); padding-top: 20px; }
.formes .forme svg { width: 100%; height: 86px; display: block; margin-bottom: 14px; }
.formes .r { font-family: var(--mono); font-size: 22px; color: var(--orange); margin: 0 0 6px; }
.formes .forme.sans .r { color: var(--vert); }
.formes .forme p { font-size: 15px; color: var(--corps); margin: 0; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .guide .comete { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ---- l'inversion : le noir de l'accueil est la couleur d'ouverture du site,
   décision de Philippe du 14 septembre 2026. Les valeurs viennent de la feuille
   du site actuel : #171717, #f3f3f3, #b8b8b8, le bleu #669ca9 et le turquoise #70bfac. */
html[data-theme="noir"] {
  --papier: #171717; --blanc: #1c1c1c; --encre: #f3f3f3; --corps: #b8b8b8;
  --label: #8a8a8a; --filet: #2e2e2e; --froid: #202020; --champ: #141414;
  --vert: #669ca9; --vert-clair: #70bfac;
  color-scheme: dark;
}
header.site, footer.site { transition: background-color .5s ease; }
html[data-theme="noir"] header.site { background: rgba(23,23,23,.9); }
html[data-theme="noir"] .bouton:hover { background: #e17303; color: #fff; }
html[data-theme="noir"] .bouton.creux:hover { background: var(--froid); color: var(--encre); }
html[data-theme="noir"] .merci, html[data-theme="noir"] .guide .bilan { background: #1d2b27; }
html[data-theme="noir"] .fin .cercle { background: #232323; }
html[data-theme="noir"] .guide .fantome { stroke: #2e2e2e; }
html[data-theme="noir"] .erreur { color: #ff9a8a; }

/* ---- le crash test, page du site depuis le 15 septembre 2026, refondu le 16 en version 4 :
   quatre faits, six questions graduées, la matrice à quatre cases où le visiteur fait glisser
   six cartes, le résultat en position sur l'axe performance-robustesse. Tout vit sous .crash ;
   les couleurs et les polices sont celles du site, en noir et en clair. */
.crash { max-width: 700px; }
.crash.large { max-width: 1040px; }
.crash .progres { height: 3px; background: var(--filet); border-radius: 2px; margin: 0 0 34px; overflow: hidden; }
.crash .progres i { display: block; height: 100%; background: var(--vert-clair); transition: width .3s; }
.crash p:not([class]) { font-family: var(--mono); color: var(--corps); line-height: 1.7; margin: 0 0 14px; }
.crash em { font-style: normal; color: var(--vert); }
.crash .sur { margin: 0 0 12px; }
.crash .grand { margin: 0 0 18px; }
.crash .sous { font-family: var(--mono); font-size: 16px; line-height: 1.7; color: var(--corps); margin: 0 0 14px; }
.crash .source { margin: 2px 0 14px; }
.crash .titre, .crash .enonce, .crash .fait, .crash .formule { font-family: var(--sans); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--encre); }
.crash .titre { font-size: 44px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 16px; }
.crash .enonce, .crash .formule { font-size: 30px; margin: 0 0 16px; }
.crash .fait { font-size: 24px; margin: 0 0 10px; }
.crash .chiffre { font-family: var(--sans); font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: -0.02em; color: var(--vert); margin: 6px 0 10px; }
@media (max-width: 760px) {
  .crash .titre { font-size: 34px; }
  .crash .enonce, .crash .formule { font-size: 25px; }
  .crash .fait { font-size: 21px; }
  .crash .chiffre { font-size: 56px; }
}
.crash .champ { margin: 0 0 12px; }
.crash .choix { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.crash .choix button { flex: 1 1 40%; font-family: var(--mono); font-size: 16px; line-height: 1.5; padding: 13px; border: 1px solid var(--filet); border-radius: 3px; background: var(--champ); color: var(--encre); cursor: pointer; }
.crash .choix button.on { background: var(--vert); border-color: var(--vert); color: #fff; }
.crash .choix.colonne { flex-direction: column; }
.crash .choix.colonne button { flex: 0 0 auto; width: 100%; text-align: left; }
.crash .suite { margin: 26px 0 0; }
.crash .suite + .suite { margin-top: 12px; }
.crash .suite .bouton { width: 100%; }
.crash .bouton:disabled, .crash .bouton:disabled:hover { background: var(--filet); color: var(--label); cursor: default; }
.crash .bloc { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--filet); }
.crash .liste { font-family: var(--mono); color: var(--encre); line-height: 1.6; margin: 0 0 14px; padding-left: 20px; }
.crash .liste li { margin: 0 0 6px; }
.crash .mention { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--label); margin: 44px 0 0; padding-top: 16px; border-top: 1px solid var(--filet); }

/* la matrice : la pile de cartes à gauche, les quatre cases à droite */
.crash .plateau-bloc { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; margin: 8px 0 0; }
.crash .pile { display: flex; flex-direction: column; gap: 10px; min-height: 140px; padding: 12px; border: 1px dashed var(--filet); border-radius: 3px; }
.crash .choc { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 3px; background: var(--champ); color: var(--encre); font-family: var(--mono); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.crash .choc b { display: block; font-family: var(--sans); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--encre); }
.crash .choc span { display: block; font-size: 13px; line-height: 1.5; color: var(--corps); margin-top: 4px; }
.crash .choc i { display: block; font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vert); margin-top: 6px; }
.crash .choc.choisie { border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert); }
.crash .choc:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 2px; }
.crash .choc.vol { position: fixed; z-index: 100; pointer-events: none; cursor: grabbing; box-shadow: 0 12px 30px rgba(0,0,0,.28); transform: rotate(-1.5deg); }
.crash .plateau { min-width: 0; }
.crash .axe-v { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); text-align: center; margin: 0 0 8px; }
.crash .grille { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.crash .case { position: relative; min-height: 200px; padding: 38px 10px 10px; border: 1px solid var(--filet); border-radius: 3px; background: var(--froid); display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.crash .case:focus-visible { outline: 2px solid var(--vert-clair); }
.crash .case .titre-case { position: absolute; top: 11px; left: 10px; right: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crash .case.survol { background: var(--blanc); border-color: var(--vert); }
.crash .case .choc { width: auto; max-width: 100%; padding: 7px 10px; }
.crash .case .choc b { font-size: 13px; }
.crash .case .choc span, .crash .case .choc i { display: none; }
.crash .axe-h { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 6px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.crash .axe-v.bas { margin: 0; }
@media (max-width: 899px) { .crash .plateau-bloc { grid-template-columns: 190px 1fr; gap: 16px; } .crash .case { min-height: 170px; } .crash .axe-h, .crash .axe-v { font-size: 12px; letter-spacing: .06em; } }

/* le résultat : l'axe performance-robustesse, la fenêtre de viabilité, le repère. La classe
   .curseur existe déjà pour la balance de la page du cercle, avec une marge haute : ne pas la reprendre ici. */
.crash .axe { position: relative; height: 104px; margin: 22px 0 6px; }
.crash .axe .milieu { position: absolute; left: 64%; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--vert); white-space: nowrap; }
.crash .axe .fenetre { position: absolute; left: 42%; width: 44%; top: 26px; height: 34px; border-radius: 3px; background: var(--vert); opacity: .22; }
.crash .axe .ligne { position: absolute; left: 0; right: 0; top: 41px; height: 4px; border-radius: 2px; background: var(--label); }
.crash .axe .repere { position: absolute; top: 31px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--vert); border: 3px solid var(--papier); box-shadow: 0 0 0 2px var(--vert), 0 6px 16px rgba(0,0,0,.35); }
.crash .axe .bornes { position: absolute; left: 0; right: 0; top: 72px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }

/* le téléphone : le test se fait sur ordinateur ou sur tablette, décision de Philippe du 16/09 */
.crash .telephone { display: none; }
@media (max-width: 699px), (max-height: 520px) and (pointer: coarse) {
  .crash #app, .crash .progres { display: none; }
  .crash .telephone { display: block; }
}

/* programme de « Bâtir pour durer » : douze leçons de robustesse, une ligne par séance (12/11/2026) */
.lecons { list-style: none; padding: 0; margin: 28px 0 10px; border-top: 1px solid var(--filet); }
.lecons li { display: grid; grid-template-columns: 210px 1fr 300px; gap: 8px 44px; align-items: start; margin: 0; padding: 26px 0 24px; border-bottom: 1px solid var(--filet); }
.lecons .quand { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--label); margin: 0; }
.lecons .quand b { display: block; font-family: var(--sans); font-weight: 600; font-size: 40px; line-height: 1; color: var(--vert-clair); margin-bottom: 10px; }
.lecons .quand i { display: block; font-style: normal; color: var(--orange); }
.lecons h4 { font-family: var(--sans); font-weight: 700; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--encre); }
.lecons .mono { font-size: 16px; margin: 0; }
.lecons .fonction { font-family: var(--mono); font-size: 15px; line-height: 1.6; color: var(--encre); margin: 4px 0 0; padding-left: 18px; border-left: 2px solid var(--turquoise); }
.lecons .fonction span { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise); margin-bottom: 6px; }
@media (max-width: 1020px) { .lecons li { grid-template-columns: 150px 1fr; } .lecons .fonction { grid-column: 2; margin-top: 10px; } }
@media (max-width: 640px) { .lecons li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; } .lecons .quand b { display: inline-block; font-size: 26px; margin: 0 12px 0 0; vertical-align: -3px; } .lecons .quand i { display: inline; margin-left: 8px; } .lecons .fonction { grid-column: 1; margin-top: 8px; } .lecons h4 { font-size: 22px; margin-top: 4px; } }