/* Kordelys — site public.
   Direction : un atelier de métal la nuit. Surfaces graphite chaud, texte ivoire, un seul accent cuivre (celui du K).
   Le tilleul ne sert qu'aux chiffres mesurés, comme dans l'application. Angles presque droits, grille de 4 px. */
:root {
  --fond-0: #050505; --fond: #000000; --carte: #0a0a0a; --leve: #151515;
  --texte: #efe9de; --texte-2: #b0a89c; --texte-3: #8d867b;
  --ligne: rgba(255, 255, 255, .08); --ligne-2: rgba(255, 255, 255, .15);
  --cuivre: #f28d56; --cuivre-encre: #1b100a; --mesure: #b9d67a; --alerte: #e5484d;
  --police: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --titre: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  --r: 4px; --r-2: 8px; --courbe: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { background: var(--fond); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/26px var(--police); color: var(--texte); background: var(--fond); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 500; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.discret { color: var(--texte-3); }
.cadre { width: min(1160px, 100% - 48px); margin-inline: auto; }
.etroit { width: min(760px, 100% - 48px); margin-inline: auto; }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--texte); color: var(--fond); padding: 8px 12px; border-radius: var(--r); z-index: 100; }
.evitement:focus { left: 8px; }
.bandeau-apercu { background: var(--leve); color: var(--texte-2); font-size: 13px; line-height: 20px; text-align: center; padding: 6px 16px; border-bottom: 1px solid var(--ligne); }
.a-completer { color: var(--cuivre); font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------ en-tête */
.entete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ligne); }
.entete-ligne { display: flex; align-items: center; gap: 32px; height: 60px; }
.marque { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--titre); color: var(--texte); }
.marque svg { color: var(--cuivre); }
.menu { display: flex; gap: 4px; flex: 1; }
.menu a { padding: 6px 12px; border-radius: var(--r); font-size: 14.5px; line-height: 20px; color: var(--texte-2); transition: color 140ms var(--courbe), background-color 140ms var(--courbe); }
.menu a:hover { color: var(--texte); background: var(--leve); }
.menu a[aria-current="page"] { color: var(--texte); }
.entete-actions { display: flex; align-items: center; gap: 16px; }
.lien-discret { font-size: 14.5px; color: var(--texte-2); transition: color 140ms var(--courbe); }
.lien-discret:hover { color: var(--texte); }
.bouton-menu { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; background: none; border: 1px solid var(--ligne-2); border-radius: var(--r); cursor: pointer; }

/* ------------------------------------------------------------ boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r); border: 1px solid var(--ligne-2);
  background: var(--leve); color: var(--texte); font: 500 15px/1 var(--police); cursor: pointer; white-space: nowrap;
  transition: background-color 140ms var(--courbe), border-color 140ms var(--courbe), transform 140ms var(--courbe); }
.bouton:hover { background: #2c2925; border-color: rgba(239, 233, 222, .26); }
.bouton:active { transform: scale(.98); }
.bouton.principal { background: var(--texte); color: var(--fond-0); border-color: var(--texte); }
.bouton.principal:hover { background: #fffaf0; }
.bouton.cuivre { background: var(--cuivre); color: var(--cuivre-encre); border-color: var(--cuivre); }
.bouton.cuivre:hover { background: #f79c69; }
.bouton.petit { height: 34px; padding: 0 14px; font-size: 14px; }
.bouton[aria-disabled="true"], .bouton:disabled { opacity: .45; cursor: not-allowed; }
.fleche { display: inline-flex; align-items: center; gap: 6px; color: var(--texte); font-weight: 500; border-bottom: 1px solid var(--ligne-2); padding-bottom: 2px; transition: border-color 140ms var(--courbe); }
.fleche:hover { border-color: var(--cuivre); }
.fleche::after { content: "→"; font-family: var(--mono); }

/* ------------------------------------------------------------ héros */
.heros { position: relative; overflow-x: clip; border-bottom: 1px solid var(--ligne); }
.heros-scene { position: absolute; inset: 0 0 auto 0; height: 720px; background: url("img/k-acier.webp") right -40px top -40px / auto 760px no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%); mask-image: linear-gradient(to bottom, #000 55%, transparent 96%); }
.heros-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fond) 18%, rgba(19, 18, 16, .72) 46%, rgba(19, 18, 16, 0) 72%); }
.heros-texte { position: relative; padding: 104px 0 72px; max-width: 620px; }
.heros h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -.028em; }
.heros h1 em { font-style: normal; color: var(--cuivre); }
.heros .chapeau { margin-top: 24px; font-size: 19px; line-height: 30px; color: var(--texte-2); max-width: 34rem; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.heros-note { margin-top: 20px; font-size: 13.5px; line-height: 20px; color: var(--texte-3); }
.heros-vue { position: relative; z-index: 2; margin-bottom: -88px; }

/* ------------------------------------------------------------ aperçu de l'application (construit en HTML) */
.app { background: var(--fond-0); border: 1px solid var(--ligne-2); border-radius: var(--r-2); box-shadow: 0 32px 80px rgba(0, 0, 0, .55); overflow: hidden; font-size: 13px; line-height: 20px; }
.app-barre { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--ligne); background: var(--fond); }
.app-barre .marque { font-size: 14px; gap: 8px; }
.app-projet { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--ligne-2); border-radius: var(--r); }
.app-projet { white-space: nowrap; }
.app-projet b { font-weight: 600; }
.app-projet span { color: var(--texte-3); padding-left: 8px; border-left: 1px solid var(--ligne-2); }
.app-onglets { display: flex; gap: 2px; flex: 1; color: var(--texte-3); }
.app-onglets span { padding: 4px 10px; }
.app-onglets .actif { color: var(--texte); box-shadow: inset 0 -1px 0 var(--texte); }
.app-puce { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--mesure) 40%, var(--ligne)); border-radius: var(--r); color: var(--texte-2); white-space: nowrap; }
.app-puce b { color: var(--mesure); font-family: var(--mono); font-weight: 600; }
.app-mur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ligne); }
.agent { background: var(--fond-0); padding: 16px; min-height: 304px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.agent-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-tete b { font-weight: 600; font-size: 14px; }
.etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-3); font-family: var(--mono); }
.etat i { width: 6px; height: 6px; border-radius: 50%; background: var(--texte-3); }
.etat.travaille { color: var(--cuivre); } .etat.travaille i { background: var(--cuivre); }
.etat.fini { color: var(--mesure); } .etat.fini i { background: var(--mesure); }
.bulle { padding: 10px 12px; border-radius: var(--r); background: var(--carte); color: var(--texte-2); }
.bulle.moi { background: var(--leve); color: var(--texte); }
.outil { display: flex; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--texte-3); padding: 0 2px; }
.outil b { color: var(--texte-2); font-weight: 400; }
.extrait { font-family: var(--mono); font-size: 12px; line-height: 18px; background: var(--carte); border-left: 2px solid var(--cuivre); padding: 8px 12px; color: var(--texte-2); white-space: pre; overflow: hidden; }
.extrait .n { color: var(--texte-3); }
.agent-pied { margin-top: auto; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--texte-3); border-top: 1px solid var(--ligne); padding-top: 10px; }

/* ------------------------------------------------------------ sections */
.section { padding: 112px 0; border-bottom: 1px solid var(--ligne); }
.section.apres-vue { padding-top: 184px; }
.section.serree { padding: 80px 0; }
.section-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.section-tete h2, .page-tete h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.section-tete p { color: var(--texte-2); font-size: 17px; line-height: 28px; max-width: 34rem; }
.repere { display: block; font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--cuivre); margin-bottom: 16px; }
.page-tete { padding: 88px 0 56px; border-bottom: 1px solid var(--ligne); }
.page-tete p { margin-top: 20px; color: var(--texte-2); font-size: 18px; line-height: 30px; max-width: 40rem; }

.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.case { background: var(--fond); padding: 32px; }
.case h3 { font-size: 19px; line-height: 26px; margin-bottom: 8px; }
.case p { color: var(--texte-2); font-size: 15px; line-height: 24px; }
.case .num { font-family: var(--mono); font-size: 13px; color: var(--texte-3); margin-bottom: 24px; display: block; }
.case ul { margin-top: 16px; display: grid; gap: 8px; }
.case li, .liste li { position: relative; padding-left: 20px; color: var(--texte-2); font-size: 15px; line-height: 24px; }
.case li::before, .liste li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 1px; background: var(--cuivre); }
.liste { display: grid; gap: 10px; }

.duo { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.duo.inverse { grid-template-columns: 6fr 5fr; }
.duo h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.14; letter-spacing: -.018em; margin-bottom: 16px; }
.duo p { color: var(--texte-2); }
.duo p + p, .duo p + .liste, .duo .liste + p { margin-top: 16px; }
.duo .fleche { margin-top: 24px; }

/* ------------------------------------------------------------ mesures (le moment riche du site) */
.banc { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-2); padding: 32px; }
.banc-tete { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 8px; }
.banc-tete h3 { font-size: 18px; line-height: 26px; }
.banc-question { font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--texte-2); margin-bottom: 28px; }
.barres { display: grid; gap: 20px; }
.barre-ligne { display: grid; grid-template-columns: 96px 1fr 72px; gap: 16px; align-items: center; }
.barre-ligne > span:first-child { font-size: 14px; color: var(--texte-2); }
.barre-paire { display: grid; gap: 4px; }
.barre { height: 12px; background: var(--leve); border-radius: 2px; position: relative; }
.barre i { position: absolute; inset: 0 auto 0 0; background: #5f5a52; border-radius: 2px; transform-origin: left; }
.barre.k i { background: var(--mesure); }
.barre-ligne .ecart { font-family: var(--mono); font-size: 15px; text-align: right; color: var(--mesure); font-variant-numeric: tabular-nums; }
.barre-ligne .ecart.pire { color: var(--cuivre); }
.legende { display: flex; gap: 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--texte-3); flex-wrap: wrap; }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende i { width: 12px; height: 8px; border-radius: 2px; background: #5f5a52; }
.legende .k i { background: var(--mesure); }
.source { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--texte-3); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.chiffre { background: var(--fond); padding: 24px; }
.chiffre b { display: block; font: 500 34px/1 var(--mono); letter-spacing: -.02em; color: var(--mesure); font-variant-numeric: tabular-nums; }
.chiffre span { display: block; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--texte-2); }
.chiffre small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 18px; color: var(--texte-3); }

/* ------------------------------------------------------------ tableau, tarifs */
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.tableau th, .tableau td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { font-weight: 500; color: var(--texte-3); font-size: 13.5px; }
.tableau td { color: var(--texte-2); }
.tableau td:first-child { color: var(--texte); }
.tableau .mono { font-size: 14px; }
.defile { overflow-x: auto; }

.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.offre { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-2); padding: 32px; display: flex; flex-direction: column; }
.offre.choix { border-color: color-mix(in srgb, var(--cuivre) 55%, var(--ligne)); }
.offre h3 { font-size: 20px; line-height: 28px; }
.offre .pour { color: var(--texte-2); font-size: 15px; line-height: 24px; margin-top: 4px; }
.prix { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 24px; }
.prix b { font: 500 56px/1 var(--titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prix span { color: var(--texte-2); font-size: 15px; }
.offre .liste { margin-bottom: 32px; }
.offre .bouton { margin-top: auto; }
.mention { margin-top: 24px; font-size: 14px; line-height: 22px; color: var(--texte-3); }

/* ------------------------------------------------------------ étapes, formulaires */
.etapes { counter-reset: etape; display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.etape { counter-increment: etape; background: var(--fond); padding: 28px 32px 28px 88px; position: relative; }
.etape::before { content: counter(etape, decimal-leading-zero); position: absolute; left: 32px; top: 30px; font: 400 15px/24px var(--mono); color: var(--cuivre); }
.etape h3 { font-size: 18px; line-height: 26px; margin-bottom: 6px; }
.etape p { color: var(--texte-2); font-size: 15px; line-height: 24px; max-width: 44rem; }
.etape p + p { margin-top: 8px; }
.etape code, .prose code, .case code { font-family: var(--mono); font-size: 13.5px; background: var(--leve); padding: 2px 6px; border-radius: 3px; color: var(--texte); }

.commande { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.champ { display: grid; gap: 8px; margin-bottom: 24px; }
.champ label, .champ legend { font-size: 14.5px; font-weight: 500; }
.champ small { color: var(--texte-3); font-size: 13.5px; line-height: 20px; }
.champ input[type="text"], .champ input[type="email"], .champ textarea { height: 44px; padding: 0 12px; background: var(--fond-0); border: 1px solid var(--ligne-2); border-radius: var(--r); width: 100%;
  transition: border-color 140ms var(--courbe); }
.champ textarea { height: 88px; padding: 10px 12px; resize: vertical; font-family: var(--mono); font-size: 13.5px; line-height: 20px; }
.champ input:hover, .champ textarea:hover { border-color: rgba(239, 233, 222, .28); }
.champ input.mono { font-size: 13.5px; }
.champ .erreur { color: var(--alerte); font-size: 13.5px; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.choix-formule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.choix-formule label { display: block; padding: 16px; border: 1px solid var(--ligne-2); border-radius: var(--r); cursor: pointer; background: var(--fond-0); transition: border-color 140ms var(--courbe), background-color 140ms var(--courbe); }
.choix-formule input { position: absolute; opacity: 0; }
.choix-formule label:has(input:checked) { border-color: var(--cuivre); background: var(--carte); }
.choix-formule label:has(input:focus-visible) { outline: 2px solid var(--cuivre); outline-offset: 2px; }
.choix-formule b { display: block; font-weight: 500; }
.choix-formule span { font-family: var(--mono); font-size: 14px; color: var(--texte-2); }
.recu { position: sticky; top: 84px; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-2); padding: 28px; }
.recu h2 { font-size: 17px; line-height: 24px; margin-bottom: 16px; }
.recu dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14.5px; line-height: 22px; }
.recu dt { color: var(--texte-3); }
.recu dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.recu .total { border-top: 1px solid var(--ligne); margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.recu .total b { font: 500 30px/1 var(--titre); font-variant-numeric: tabular-nums; }
.recu .bouton { width: 100%; margin-top: 12px; }
.recu .mention { margin-top: 16px; font-size: 13px; line-height: 20px; }
.message-pret { margin-top: 16px; }
.message-pret[hidden] { display: none; }

/* ------------------------------------------------------------ texte long, questions */
.prose { padding: 64px 0 112px; }
.prose h2 { font-size: 24px; line-height: 32px; margin: 48px 0 12px; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; line-height: 26px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--texte-2); }
.prose p + p { margin-top: 12px; }
.prose ul { display: grid; gap: 8px; margin: 12px 0; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 1px; background: var(--cuivre); }
.prose a { color: var(--texte); border-bottom: 1px solid var(--ligne-2); }
.prose a:hover { border-color: var(--cuivre); }
.prose .maj { font-family: var(--mono); font-size: 13px; color: var(--texte-3); margin-bottom: 32px; }
.encadre { border: 1px solid var(--ligne-2); border-left: 2px solid var(--cuivre); background: var(--carte); padding: 20px 24px; border-radius: var(--r); margin: 24px 0; }
.encadre p { color: var(--texte-2); }
.encadre b { color: var(--texte); font-weight: 500; }
details { border-bottom: 1px solid var(--ligne); }
details:first-of-type { border-top: 1px solid var(--ligne); }
summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-size: 17px; line-height: 26px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 20px/28px var(--mono); color: var(--texte-3); transition: transform 180ms var(--courbe); }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 40px 20px 0; color: var(--texte-2); max-width: 46rem; }
details p + p { margin-top: -8px; }

.notes { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.note { background: var(--fond); padding: 32px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
.note h2 { font: 500 22px/28px var(--mono); }
.note time { display: block; color: var(--texte-3); font-size: 14px; margin-top: 4px; }

.appel { padding: 104px 0; text-align: left; }
.appel-ligne { display: flex; justify-content: space-between; align-items: end; gap: 48px; flex-wrap: wrap; }
.appel h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.024em; max-width: 16em; }
.appel .heros-actions { margin-top: 0; }

/* ------------------------------------------------------------ pied */
.pied { background: var(--fond-0); border-top: 1px solid var(--ligne); padding: 64px 0 32px; font-size: 14.5px; line-height: 22px; }
.pied-grille { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.pied-marque p { color: var(--texte-2); margin-top: 12px; max-width: 18rem; }
.pied-marque .mono { font-size: 12.5px; }
.pied h2 { font: 500 13.5px/20px var(--police); color: var(--texte-3); margin-bottom: 12px; }
.pied nav a { display: block; padding: 4px 0; color: var(--texte-2); transition: color 140ms var(--courbe); }
.pied nav a:hover { color: var(--texte); }
.pied-bas { display: flex; justify-content: space-between; gap: 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ligne); color: var(--texte-3); font-size: 13px; line-height: 20px; }
.pied-bas span:last-child { max-width: 44rem; text-align: right; }

/* ------------------------------------------------------------ une seule entrée au chargement */
@media (prefers-reduced-motion: no-preference) {
  .heros-texte > *, .heros-vue { animation: entree 460ms var(--courbe) both; }
  .heros-texte > :nth-child(2) { animation-delay: 50ms; } .heros-texte > :nth-child(3) { animation-delay: 100ms; }
  .heros-texte > :nth-child(4) { animation-delay: 150ms; } .heros-vue { animation-delay: 220ms; }
  .barre i { transition: transform 700ms var(--courbe); }
  .attente .barre i { transform: scaleX(0); }
}
@keyframes entree { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------ écrans étroits */
@media (max-width: 960px) {
  .section-tete, .duo, .duo.inverse, .commande { grid-template-columns: 1fr; gap: 32px; }
  .grille-3 { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
  .app-mur { grid-template-columns: 1fr; }
  .app-mur .agent:nth-child(n+2) { display: none; }
  .app-onglets, .app-puce { display: none; }
  .app-barre .app-projet span { display: none; }
  .recu { position: static; }
  .heros-scene { background-position: right -180px top -20px; opacity: .55; }
  .note { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .cadre, .etroit { width: calc(100% - 32px); }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; background: var(--fond); border-bottom: 1px solid var(--ligne); padding: 8px 16px 16px; }
  .menu.ouvert { display: flex; }
  .menu a { padding: 12px; font-size: 16px; }
  .bouton-menu { display: inline-flex; }
  .entete-actions .lien-discret { display: none; }
  .entete-ligne { justify-content: space-between; gap: 12px; }
  .heros-texte { padding: 56px 0 48px; }
  .heros .chapeau { font-size: 17px; line-height: 28px; }
  .heros-vue { margin-bottom: -56px; }
  .section { padding: 72px 0; } .section.apres-vue { padding-top: 120px; }
  .grille-2, .offres, .choix-formule { grid-template-columns: 1fr; }
  .case { padding: 24px; }
  .etape { padding: 24px 24px 24px 64px; } .etape::before { left: 24px; top: 26px; }
  .barre-ligne { grid-template-columns: 72px 1fr 56px; gap: 12px; }
  .banc { padding: 24px; }
  .pied-bas { flex-direction: column; gap: 12px; } .pied-bas span:last-child { text-align: left; }
  .appel { padding: 72px 0; }
}


/* ==================================================================== v2 — noir total, mouvement réversible */
html, body { background: #000; }
.entete { background: rgba(0, 0, 0, .72); backdrop-filter: blur(16px) saturate(140%); }
.bandeau-apercu { background: #0a0a0a; }
.pied { background: #000; }
.bouton:hover { background: #1d1d1d; border-color: rgba(255, 255, 255, .28); }
.cadre { width: min(1200px, 100% - 48px); }

/* fil de progression de la page */
.fil-progres { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.fil-progres i { display: block; height: 100%; background: var(--cuivre); transform-origin: left; transform: scaleX(0); }

/* ---- héros : le K d'acier sur noir, qui recule quand on descend */
.heros { border-bottom: 0; }
.heros-scene { height: 100vh; min-height: 720px; max-height: 1000px; background-position: right 4% center; background-size: auto 92%;
  -webkit-mask-image: radial-gradient(ellipse 46% 56% at 70% 52%, #000 38%, transparent 100%); mask-image: radial-gradient(ellipse 46% 56% at 70% 52%, #000 38%, transparent 100%);
  transform: translate3d(0, calc(var(--a, 0) * 120px), 0) scale(calc(1 + var(--a, 0) * .12)); opacity: calc(1 - var(--a, 0) * .9); transform-origin: 72% 50%; will-change: transform, opacity; }
.heros-scene::after { background: linear-gradient(90deg, #000 12%, rgba(0, 0, 0, .7) 40%, rgba(0, 0, 0, 0) 68%); }
.heros-texte { padding: clamp(96px, 17vh, 176px) 0 clamp(72px, 12vh, 128px); max-width: 700px;
  transform: translate3d(0, calc(var(--a, 0) * -40px), 0); opacity: calc(1 - var(--a, 0) * 1.25); will-change: transform, opacity; }
.heros h1 { font-size: clamp(42px, 6.3vw, 84px); line-height: 1.02; letter-spacing: -.032em; }
.heros .chapeau { font-size: 20px; line-height: 32px; }
.heros-vue { margin-bottom: -120px; perspective: 1800px; }
.heros-vue::before { content: ""; position: absolute; inset: -18% -6% 40% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(242, 141, 86, .16), transparent 70%); opacity: var(--p, 0); }
.js .heros-vue .app { transform-origin: 50% 0; will-change: transform;
  transform: rotateX(calc((1 - var(--p, 0)) * 22deg)) scale(calc(.9 + var(--p, 0) * .1)) translate3d(0, calc((1 - var(--p, 0)) * 48px), 0);
  opacity: calc(.35 + var(--p, 0) * .65); }
.app { background: #050505; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 48px 120px rgba(0, 0, 0, .9); }
.app-barre { background: #000; }
.agent { background: #050505; }
.section.apres-vue { padding-top: 232px; }

/* ---- manifeste : les mots s'allument avec le défilement, s'éteignent quand on remonte */
.manifeste-bloc { border-bottom: 0; padding-bottom: 72px; }
.manifeste { font: 500 clamp(28px, 4.2vw, 56px)/1.16 var(--titre); letter-spacing: -.024em; max-width: 20em; text-wrap: balance; }
.manifeste .mot { transition: opacity 160ms linear; }

/* ---- apparitions réversibles */
.js .anim { opacity: 0; transform: translate3d(0, 36px, 0) scale(.985); filter: blur(8px);
  transition: opacity 720ms var(--courbe), transform 720ms var(--courbe), filter 720ms var(--courbe);
  transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.js .anim.sorti-haut { transform: translate3d(0, -36px, 0) scale(.985); }
.js .anim.vu { opacity: 1; transform: none; filter: none; }
.js .anim:not(.vu) { transition-duration: 420ms; transition-delay: 0ms; }
.js .grille-3 > .anim, .js .grille-2 > .anim, .js .chiffres > .anim, .js .etapes > .anim, .js .notes > .anim { background-color: #000; }

/* ---- surfaces sur noir */
.grille-3, .grille-2, .chiffres, .etapes, .notes { background: transparent; border-color: var(--ligne); gap: 0; }
.grille-3 > *, .grille-2 > *, .chiffres > *, .etapes > *, .notes > * { box-shadow: 0 0 0 .5px var(--ligne); }
.case, .chiffre, .etape, .note { background: #000; }
.banc, .offre, .recu { background: linear-gradient(180deg, #0c0c0c, #060606); border-color: var(--ligne); }
.offre.choix { border-color: rgba(242, 141, 86, .5); }
.barre { background: #161616; }
.barre i { background: #4a4a4a; transition: transform 900ms var(--courbe); }
.attente .barre i { transform: scaleX(0); }
.barre-ligne:nth-child(2) .barre i { transition-delay: 80ms; } .barre-ligne:nth-child(3) .barre i { transition-delay: 160ms; } .barre-ligne:nth-child(4) .barre i { transition-delay: 240ms; }
.barre.k i { transition-delay: 320ms; }
.champ input[type="text"], .champ input[type="email"], .champ textarea, .choix-formule label { background: #050505; }
.choix-formule label:has(input:checked) { background: #0d0d0d; }
.chiffre b { font-size: clamp(32px, 3.6vw, 48px); }
.section-tete h2, .page-tete h1 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.026em; }
.page-tete { padding: 120px 0 72px; position: relative; overflow: hidden; }
.page-tete::before { content: ""; position: absolute; right: -8%; top: -40%; width: 60%; height: 180%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(242, 141, 86, .1), transparent 62%); }
.section { padding: 128px 0; }
.section.serree { padding: 96px 0; }

/* reflet de cuivre sous la souris */
.reflet { position: relative; }
.reflet::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 141, 86, .09), transparent 70%); transition: opacity 240ms var(--courbe); }
.reflet:hover::after { opacity: 1; }
.case, .chiffre { transition: background-color 240ms var(--courbe); }

/* étapes : un trait de cuivre se trace avec le défilement */
.etapes { position: relative; }
.js .etapes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cuivre); z-index: 2;
  transform-origin: top; transform: scaleY(var(--p, 0)); }

/* appel final */
.appel { padding: 160px 0; position: relative; overflow: hidden; }
.appel::before { content: ""; position: absolute; left: 50%; bottom: -70%; width: 90%; height: 140%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(242, 141, 86, .14), transparent 62%); }
.appel h2 { font-size: clamp(34px, 5vw, 68px); letter-spacing: -.03em; }
.appel .cadre { position: relative; }

@media (max-width: 960px) {
  .heros-scene { background-position: right -160px center; opacity: calc(.6 - var(--a, 0) * .5); }
}
@media (max-width: 720px) {
  .cadre { width: calc(100% - 32px); }
  .heros-vue { margin-bottom: -72px; }
  .section, .section.serree { padding: 80px 0; } .section.apres-vue { padding-top: 152px; }
  .page-tete { padding: 72px 0 48px; }
  .appel { padding: 96px 0; }
  .js .anim { transform: translate3d(0, 24px, 0); filter: none; }
  .js .anim.sorti-haut { transform: translate3d(0, -24px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .heros-scene, .heros-texte, .heros-vue .app { transform: none !important; opacity: 1 !important; }
}


/* ==================================================================== v3 — le héros montre la carte du projet (plus d'image) */
.heros-scene { background: none; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  transform: translate3d(0, calc(var(--a, 0) * 90px), 0) scale(calc(1 + var(--a, 0) * .06)); transform-origin: 70% 50%; }
.heros-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.heros-scene::after { background: linear-gradient(90deg, #000 20%, rgba(0, 0, 0, .55) 44%, rgba(0, 0, 0, 0) 62%); }
@media (max-width: 960px) {
  .heros-scene { opacity: calc(.5 - var(--a, 0) * .4); }
  .heros-scene::after { background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .7)); }
}


/* ==================================================================== v4 — compte */
.compte-acces { padding: 96px 0 128px; position: relative; overflow: hidden; }
.compte-acces::before { content: ""; position: absolute; right: -10%; top: -30%; width: 70%; height: 160%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(242, 141, 86, .12), transparent 62%); }
.compte-grille { position: relative; display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: center; }
.compte-accroche h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.028em; margin-bottom: 20px; }
.compte-accroche p { color: var(--texte-2); font-size: 18px; line-height: 30px; max-width: 34rem; margin-bottom: 24px; }
.carte-acces { background: linear-gradient(180deg, #0d0d0d, #060606); border: 1px solid var(--ligne-2); border-radius: var(--r-2); padding: 32px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8); }
.onglets-acces { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #000; border: 1px solid var(--ligne); border-radius: var(--r); margin-bottom: 28px; }
.onglets-acces button { height: 38px; border: 0; border-radius: 3px; background: none; color: var(--texte-2); font: 500 14.5px/1 var(--police); cursor: pointer;
  transition: background-color 160ms var(--courbe), color 160ms var(--courbe); }
.onglets-acces button[aria-pressed="true"] { background: var(--leve); color: var(--texte); }
.carte-acces .bouton { width: 100%; margin-top: 4px; }
.carte-acces .champ input { background: #000; }
.etat-acces { min-height: 22px; margin-top: 16px; font-size: 14.5px; line-height: 22px; color: var(--texte-2); }
.etat-acces.erreur { color: var(--alerte); }
.compte-espace { padding: 88px 0 128px; }
.espace-tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.espace-tete h1 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -.024em; }
.espace-tete .heros-actions { margin-top: 0; }
.espace-grille { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: 24px; }
.formule { display: flex; flex-direction: column; gap: 8px; }
.formule-nom { font: 500 clamp(36px, 4vw, 52px)/1.05 var(--titre); letter-spacing: -.03em; margin-top: 8px; }
.formule p { color: var(--texte-2); font-size: 15px; line-height: 24px; margin-bottom: 20px; }
.formule .bouton { margin-top: auto; align-self: flex-start; }
.ligne-compte { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.ligne-compte:last-child { border-bottom: 0; }
.ligne-compte b { display: block; font-weight: 500; }
.ligne-compte .discret { font-size: 13.5px; }
.ligne-vide { color: var(--texte-3); font-size: 15px; padding: 14px 0; }
.editeur { border-color: rgba(242, 141, 86, .4); }
.editeur-recherche { display: flex; gap: 8px; margin: 12px 0 16px; }
.editeur-recherche input, .accorder input, .accorder select { height: 34px; padding: 0 10px; background: #000; border: 1px solid var(--ligne-2); border-radius: var(--r); font-size: 14px; color: var(--texte); min-width: 0; }
.editeur-recherche input { flex: 1; }
.accorder { display: flex; gap: 8px; flex-wrap: wrap; }
.accorder input { flex: 1 1 160px; }
@media (max-width: 960px) {
  .compte-grille, .espace-grille { grid-template-columns: 1fr; gap: 40px; }
  .entete-actions .lien-discret[href="telecharger.html"] { display: none; }
}
@media (max-width: 720px) {
  .compte-acces { padding: 56px 0 80px; }
  .carte-acces { padding: 24px; }
  .entete-actions .lien-discret[href="compte.html"] { display: inline; }
}

[hidden] { display: none !important; }

/* ajouts : comptes et paiement par carte */
button.lien-discret { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14.5px; color: var(--texte-2); text-align: left; }
.carte-acces #oubli { margin-top: 4px; }
.choix-paiement { display: grid; gap: 12px; }
#paiement-zone { margin-top: 24px; min-height: 0; }
#paiement-zone:empty { display: none; }

/* téléchargement réservé aux comptes qui ont une formule */
a[href^="telecharger.html"] { display: none !important; }
html.formule-active a[href^="telecharger.html"] { display: revert !important; }
html.formule-active .bouton[href^="telecharger.html"] { display: inline-flex !important; }
body.reservee main { visibility: hidden; }
body.reservee.verifie main { visibility: visible; }