/* ═══ Kamagate Conseil 2 — refonte intégrale (atelier, 2026-08-30) ═══════════
   Charte : charte.md (provenance par jeton). Parti-pris de composition tiré du
   terrain : des RAYURES VERTICALES (fils de la toile de Korhogo / ailettes de
   La Pyramide) — le fil indigo est l'accent, jamais un aplat gratuit. */
:root{
  --lin:#efe9dc; --encre:#241b12; --indigo:#2e4a63; --fil:#41678c;
  --sepia:#6d5439; --kraft:#ddcfae; --harmattan:#e9e2da;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--lin); color:var(--encre);
  font-family:"Alegreya Sans","Gill Sans","Century Gothic",sans-serif;
  font-size:1.08rem; line-height:1.55; overflow-x:clip;
}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:1.02;margin:0}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
h2 em,h1 em{font-style:italic}
.surtitre{font-size:.78rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--sepia)}
.evite{position:absolute;left:-9999px}
.evite:focus{left:1rem;top:1rem;z-index:99;background:var(--indigo);color:var(--lin);padding:.6rem 1.2rem}
:focus-visible{outline:2px solid var(--fil);outline-offset:3px}
::selection{background:var(--fil);color:var(--lin)}
img{max-width:100%;height:auto;display:block}

/* ── bandeau ─────────────────────────────────────────────────────────────── */
.bandeau{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:.8rem 4vw;background:color-mix(in srgb,var(--lin) 92%,transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--kraft)}
.marque{display:flex;align-items:center;gap:.6rem;color:var(--encre);text-decoration:none;
  font-family:"Instrument Serif",Georgia,serif;font-size:1.25rem}
.marque-fil{width:3px;height:1.3em;background:var(--indigo)}
.bandeau-cta{font-size:.85rem;font-weight:700;color:var(--indigo);text-decoration:none;
  border-bottom:2px solid var(--fil)}

/* ── §1 seuil : deux bandes verticales inégales ──────────────────────────── */
.seuil{display:grid;grid-template-columns:11fr 7fr;min-height:92vh}
.seuil-texte{
  background:var(--indigo);color:var(--lin);padding:16vh 5vw 10vh 4vw;position:relative;
}
/* les fils de chaîne de la bande indigo — la toile, pas un aplat */
.seuil-texte::after{content:"";position:absolute;inset:0 0 0 auto;width:5.5rem;
  background:repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--lin) 14%,transparent) 14px 16px)}
.seuil-texte .surtitre{color:var(--kraft)}
.seuil h1{font-size:clamp(2.8rem,6.2vw,5.2rem);margin:.4em 0 0;color:var(--lin)}
.seuil .epse{display:block;font-size:.42em;letter-spacing:.14em;color:var(--kraft);text-transform:uppercase}
.role{font-size:1.25rem;font-weight:500;margin:.9em 0 0;color:var(--kraft)}
.chapo{max-width:38ch;margin:1.6em 0 0;font-size:1.12rem}
.cta{display:inline-block;margin-top:2rem;padding:.85rem 1.8rem;background:var(--lin);
  color:var(--encre);font-weight:700;text-decoration:none;
  transition:translate .22s,background .22s,color .22s}
.seuil-domaines{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;
  margin:3.2rem 0 0;padding:1rem 0 0;border-top:1px solid color-mix(in srgb,var(--lin) 30%,transparent);
  font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--kraft)}
.seuil-domaines li{counter-increment:dom}
.seuil-portrait{margin:0;position:relative;display:flex;flex-direction:column}
.seuil-portrait img{width:100%;height:100%;object-fit:cover;flex:1}
.seuil-portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem .8rem;
  font-size:.72rem;color:var(--lin);background:linear-gradient(transparent,rgba(20,15,8,.78))}

/* ── §2 les six mots : la frise que le fil traverse ──────────────────────── */
.mots{padding:14vh 6vw 10vh;max-width:1100px}
.mots-liste{list-style:none;margin:2.5rem 0 0;padding:0}
.mots-liste li{
  position:relative;font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.12;padding-left:2.2rem;
}
.mots-liste li::before{content:"";position:absolute;left:.6rem;top:0;bottom:0;width:3px;
  background:var(--fil);transform-origin:top;transform:scaleY(1)}
.mots-liste li:nth-child(even){margin-left:8vw;color:var(--sepia)}
.mots-note{max-width:52ch;margin-top:2.5rem;color:var(--sepia)}

/* ── §3 la trame : tirer un fil ──────────────────────────────────────────── */
.trame{background:var(--harmattan);padding:12vh 6vw;position:relative}
.trame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),color-mix(in srgb,var(--sepia) 9%,transparent) calc(20% - 1px) 20%)}
.trame>*{position:relative}
.trame-mode-demploi{max-width:52ch;color:var(--sepia);margin-top:1rem}
.trame-fils{display:none}
.has-js .trame-fils{display:flex;flex-direction:column;gap:.7rem;margin:2.4rem 0 2.6rem}
.fils-chaine,.fils-trame{display:flex;flex-wrap:wrap;gap:.5rem}
.fil-btn{
  font:700 .85rem/1 "Alegreya Sans",sans-serif;letter-spacing:.08em;
  padding:.65rem 1.1rem;border:1px solid var(--sepia);background:var(--lin);
  color:var(--encre);cursor:pointer;border-top-width:4px;
  transition:background .2s,color .2s,border-color .2s;
}
.fils-trame .fil-btn{border-top-style:dashed;border-top-width:3px}
.fil-btn:hover,.fil-btn:active{background:var(--indigo);color:var(--lin);border-color:var(--indigo)}
.fil-btn.est-tire{background:var(--indigo);color:var(--lin);border-color:var(--indigo);border-top-color:var(--fil)}
.domaine{margin-top:2.2rem}
.domaine h3{font-size:1.9rem;margin-bottom:1rem}
.domaine h3 span{color:var(--fil);font-size:.72em;margin-right:.3rem}
.domaine dl{margin:0;display:grid;gap:1rem 2.5rem;grid-template-columns:repeat(2,1fr)}
.croisement{position:relative;padding:.35rem 0 .35rem 1.3rem;background:none}
.croisement::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--fil)}
.croisement dt{font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sepia)}
.croisement dd{margin:.25rem 0 0}
/* fil de TRAME tiré : dans chaque domaine ne survit que le croisement du mot */
.has-js .toile[data-fil-actif="m-ecouter"] .croisement:not([data-m="m-ecouter"]),
.has-js .toile[data-fil-actif="m-comprendre"] .croisement:not([data-m="m-comprendre"]),
.has-js .toile[data-fil-actif="m-proposer"] .croisement:not([data-m="m-proposer"]),
.has-js .toile[data-fil-actif="m-suivre"] .croisement:not([data-m="m-suivre"]),
.has-js .toile[data-fil-actif="m-transparence"] .croisement:not([data-m="m-transparence"]),
.has-js .toile[data-fil-actif="m-proximite"] .croisement:not([data-m="m-proximite"]){display:none}
/* fil de CHAÎNE tiré : un seul domaine à l'écran */
.has-js .toile[data-fil-actif="d-epargne"] .domaine:not(#d-epargne),
.has-js .toile[data-fil-actif="d-credit"] .domaine:not(#d-credit),
.has-js .toile[data-fil-actif="d-assurance"] .domaine:not(#d-assurance),
.has-js .toile[data-fil-actif="d-quotidien"] .domaine:not(#d-quotidien),
.has-js .toile[data-fil-actif="d-projets"] .domaine:not(#d-projets){display:none}
.has-js .toile[data-fil-actif^="m-"] .domaine dl{grid-template-columns:1fr;max-width:62ch}
.trame-chute{max-width:52ch;margin-top:3rem;font-weight:500;font-size:1.15rem}

/* ── §4 parcours : quatre paliers en escalier ────────────────────────────── */
.parcours{padding:12vh 6vw}
.paliers{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:2rem;
  grid-template-columns:repeat(4,1fr);align-items:start}
.paliers li:nth-child(2){margin-top:2.6rem}
.paliers li:nth-child(3){margin-top:5.2rem}
.paliers li:nth-child(4){margin-top:7.8rem}
.palier-n{font-family:"Instrument Serif",Georgia,serif;font-size:3.6rem;color:var(--kraft);
  display:block;line-height:1;-webkit-text-stroke:1px var(--sepia)}
.paliers h3{font-size:1.35rem;margin:.4rem 0 .4rem}
.paliers p{margin:0;color:var(--sepia)}

/* ── §5 limites : la bande indigo ────────────────────────────────────────── */
.limites{background:var(--indigo);color:var(--lin);padding:12vh 6vw}
.limites h2{color:var(--lin)}
.limites ul{list-style:none;margin:2.6rem 0 0;padding:0;max-width:70ch}
.limites li{padding:.9rem 0 .9rem 1.4rem;border-left:2px solid var(--fil);
  margin-bottom:.6rem;transition:border-left-width .18s,padding-left .18s}
.limites li:hover,.limites li:active{border-left-width:8px;padding-left:1.9rem}
.limites strong{font-weight:700}
.limites-chute{margin-top:2.4rem;max-width:56ch;font-family:"Instrument Serif",Georgia,serif;
  font-size:1.5rem;line-height:1.3;color:var(--kraft)}

/* ── §6 comptez vous-même ────────────────────────────────────────────────── */
.compte{padding:12vh 6vw;background:var(--lin)}
.compte-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin:3rem 0 0}
.compte-chiffres dt{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(3.6rem,8vw,6.5rem);
  line-height:1;color:var(--sepia)}
.compte-chiffres dd{margin:.5rem 0 0;max-width:26ch;color:var(--encre)}
.compte-note{margin-top:2.6rem;color:var(--sepia);max-width:52ch}

/* ── §7 pourquoi + matière ───────────────────────────────────────────────── */
.pourquoi{display:grid;grid-template-columns:7fr 6fr;gap:4vw;padding:12vh 6vw;
  background:var(--harmattan);align-items:start}
.pourquoi-texte p{max-width:54ch;margin:1.2rem 0 0}
.matiere{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;align-items:end}
.matiere figure{margin:0}
.matiere figure:nth-child(1){margin-bottom:3.5rem}
.matiere figure:nth-child(3){margin-bottom:6.5rem}
.matiere img{aspect-ratio:2/3;object-fit:cover;
  transition:scale .5s cubic-bezier(.22,.61,.36,1),filter .5s}
.matiere img:hover,.matiere img:active{scale:1.04;filter:saturate(1.15)}
.matiere figcaption{font-size:.72rem;color:var(--sepia);margin-top:.5rem;
  border-top:1px solid var(--kraft);padding-top:.4rem}

/* ── §8 écrire ───────────────────────────────────────────────────────────── */
.ecrire{padding:14vh 6vw 16vh;text-align:center}
.ecrire p{max-width:44ch;margin:1.4rem auto 0}
.cta-grand{display:inline-flex;flex-direction:column;gap:.2rem;margin-top:2.4rem;
  background:var(--indigo);color:var(--lin);padding:1.2rem 3rem;font-size:1.15rem}
.cta-grand span{font-size:.85rem;font-weight:400;letter-spacing:.12em}
.cta:hover,.cta:active{translate:0 -3px;background:var(--sepia);color:var(--lin)}

/* ── pied ────────────────────────────────────────────────────────────────── */
.pied{background:var(--harmattan);border-top:1px solid var(--kraft);padding:3rem 6vw 3.4rem;
  font-size:.82rem;color:var(--sepia)}
.pied p{max-width:78ch;margin:.5rem 0}
.pied a{color:var(--indigo);text-decoration-thickness:1px;transition:text-decoration-thickness .15s}
.pied a:hover,.pied a:active{text-decoration-thickness:3px}
.pied-adresse{margin-top:1.4rem;font-weight:500;color:var(--encre)}

/* ── mouvement : 4 familles, toutes pilotées par la traversée de l'écran ──── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    /* 1 · le FIL se dessine (échelle verticale — le geste signature, perpendiculaire au scroll) */
    .mots-liste li::before{animation:fil-descend linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .croisement::before{animation:fil-descend linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    /* 2 · la MONTÉE (translation + opacité) */
    .paliers li,.compte-chiffres>div{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    /* 3 · la DÉCOUPE (clip-path) sur les titres de section */
    .mots .surtitre,.trame h2,.parcours h2,.limites h2,.compte h2,.pourquoi h2,.ecrire h2{
      animation:decoupe linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    /* 4 · le VOILE d'harmattan se lève (filtre) sur les images de matière */
    .matiere img{animation:voile linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes fil-descend{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes monte{from{translate:0 42px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes decoupe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes voile{from{filter:blur(7px) saturate(.4);opacity:.4}to{filter:blur(0) saturate(1);opacity:1}}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .seuil{grid-template-columns:1fr;min-height:0}
  .seuil-texte{padding:12vh 7vw 8vh}
  .seuil-texte::after{width:2.6rem}
  .seuil-portrait img{aspect-ratio:4/5;height:auto}
  .domaine dl{grid-template-columns:1fr}
  .paliers{grid-template-columns:1fr 1fr}
  .paliers li:nth-child(n){margin-top:0}
  .paliers li:nth-child(even){margin-top:2rem}
  .compte-chiffres{grid-template-columns:1fr 1fr}
  .pourquoi{grid-template-columns:1fr}
  .mots-liste li:nth-child(even){margin-left:6vw}
}

/* ── mouvement réduit : tout est là, rien ne bouge ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}