/* ═══════════════════════════════════════════════════════════════════════
   kamagate-terrain — « L'HEURE OBLIQUE » (direction gagnante E4).
   Une seule variable pilote la page : --incidence, l'angle qu'a l'ombre du
   brise-soleil en ce moment même à Abidjan. Tout en dépend : l'arête qui
   traverse l'écran, l'inclinaison des filets, la case éclairée de la matrice.
   Règles dures de la direction : aucun arrondi, aucun flou, aucun dégradé de
   couleur, aucune ombre diffuse. La lumière tropicale a une arête.
   ═════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--marbre);color:var(--verre);
  font-family:var(--lecture);font-size:var(--t-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
/* height:auto : sans lui l'attribut height l'emporte sur aspect-ratio */
img{max-width:100%;display:block;height:auto}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--terre);outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--verre);color:var(--marbre);
  padding:.8rem 1.2rem;z-index:99;text-decoration:none}
.saut:focus{left:.6rem;top:.6rem}
.has-js [data-reveal]{opacity:0;transform:translateY(14px);
  clip-path:polygon(0 0,100% 0,100% 0,0 8%)}       /* fermé sur une arête OBLIQUE */
.has-js [data-reveal].vu{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:clip-path .7s var(--ease)}

/* ── L'ARÊTE D'INCIDENCE ────────────────────────────────────────────── */
.arete{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.arete__lame{
  position:absolute;left:-30vw;right:-30vw;top:-40vh;bottom:-40vh;
  transform:rotate(var(--incidence));
  background:repeating-linear-gradient(180deg,
    rgba(43,39,35,.16) 0 clamp(52px,7vh,90px),
    rgba(43,39,35,0)   clamp(52px,7vh,90px) clamp(150px,20vh,260px));
  mix-blend-mode:multiply;
  transition:transform var(--dur) var(--ease);
}
/* La poignée : on tire la lame au doigt ou à la souris. C'est de
   l'information (l'heure), pas un ornement — donc elle reste disponible
   même en mouvement réduit. */
.tirette{position:fixed;right:0;top:0;bottom:0;width:clamp(34px,4vw,54px);z-index:41;
  cursor:ew-resize;touch-action:none;background:transparent;border:0}
.tirette::after{content:"";position:absolute;top:50%;right:12px;width:2px;height:64px;
  background:var(--alu);transform:translateY(-50%)}

/* ── BLOC 1 · LE CADRAN ─────────────────────────────────────────────── */
.cadran{min-height:70vh;display:grid;align-content:center;gap:1.6rem;
  padding:calc(var(--bande) + 2rem) var(--marge) var(--bande);
  border-bottom:1px solid var(--alu)}
@media (min-width:900px){.cadran{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);align-items:end}}
.nom{font-size:var(--t-nom);letter-spacing:-.045em;
  margin-left:calc(var(--marge) * -1);padding-left:var(--marge)}   /* déborde à gauche */
.nom span{display:block;font-size:.34em;letter-spacing:.16em;color:var(--beton);margin-top:.5rem}
.faits{list-style:none;margin:0;padding:0;font-family:var(--display);font-size:var(--t-mini);
  line-height:1.9;color:var(--beton);letter-spacing:-.02em}
.etat{color:var(--verre)}
.etat b{color:var(--terre-fonce)}
.cadran__joindre{align-self:end}
.cadran__note{font-size:var(--t-chapo);max-width:34ch}
.cadran__src{font-size:var(--t-mini);color:var(--beton);margin:1rem 0 0;max-width:36ch}

/* ── LE BLOC D'APPEL — ombre portée NETTE, décalée de l'angle ───────── */
.appel{display:inline-flex;flex-direction:column;gap:.2rem;text-decoration:none;
  background:var(--verre);color:var(--marbre);padding:1rem 1.7rem;font-weight:700;
  box-shadow:6px 6px 0 var(--terre);transition:box-shadow var(--dur) var(--ease),
  transform var(--dur) var(--ease)}
.appel span{font-family:var(--display);font-size:var(--t-mini);letter-spacing:.06em;opacity:.85}
.appel:hover{box-shadow:12px 12px 0 var(--terre);transform:translate(-3px,-3px)}
.appel:active{box-shadow:3px 3px 0 var(--terre);transform:translate(2px,2px)}

/* ── BLOC 2 · LA LAME EN DÉBORD DROIT ───────────────────────────────── */
.lameimg{padding:var(--bande) 0 0}
.lameimg figure{margin:0 0 0 22%}
.lameimg img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--alu)}
.lameimg figcaption{font-family:var(--display);font-size:var(--t-mini);color:var(--beton);
  padding:.7rem var(--marge) 0 0;max-width:52ch;letter-spacing:-.02em}

/* ── BLOC 3 · LES QUATRE NOMBRES, COLONNES INÉGALES ─────────────────── */
.nombres{padding:var(--bande) var(--marge)}
h2{font-size:var(--t-xxl);max-width:22ch;position:relative;padding-bottom:.5rem;letter-spacing:-.04em}
h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:3.4rem;background:var(--terre);
  transform:scaleX(var(--trait,1)) skewX(calc(var(--incidence) * -.5));transform-origin:left}
.has-js [data-titre]{--trait:0}
.chapo{font-size:var(--t-chapo);color:var(--beton);max-width:54ch;margin-top:1.1rem}
.note{margin-top:1.6rem;max-width:60ch;color:var(--beton);font-size:var(--t-petit)}
.nombres__liste{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;background:var(--alu)}
@media (min-width:760px){.nombres__liste{grid-template-columns:1.9fr .8fr 1.4fr .7fr;
  margin-left:-40px}}                                       /* mord dans la marge */
.nombres__liste li{background:var(--marbre);padding:1.1rem 1.1rem 1.3rem}
.nombres__liste b{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,3rem);display:block;
  color:var(--terre-fonce);font-variant-numeric:tabular-nums;letter-spacing:-.06em}
.nombres__liste span{display:block;margin-top:.4rem;font-size:var(--t-petit);color:var(--beton)}

/* ── BLOC 4 · LES BARREAUX ──────────────────────────────────────────── */
.barreaux{position:sticky;top:0;z-index:30;background:var(--marbre-haut);
  border-block:1px solid var(--alu);margin-top:-28px}          /* chevauche */
.barreaux ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1.6fr .9fr 1.3fr .7fr 1.1fr;gap:1px;background:var(--alu)}
.barreaux li{background:var(--marbre-haut)}
.barreaux a{display:block;padding:.8rem var(--marge) .8rem .9rem;text-decoration:none;
  font-family:var(--display);font-size:var(--t-mini);letter-spacing:-.02em;color:var(--beton)}
.barreaux a:hover,.barreaux a:active{background:var(--verre);color:var(--marbre)}

/* ── BLOC 5 · LA MATRICE — la façade vue de face ────────────────────── */
.matrice{padding:var(--bande) var(--marge)}
.grille{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:6px 14px;background:transparent;
  grid-template-columns:1fr}
@media (min-width:820px){
  .grille{grid-template-columns:1.6fr .9fr 1.3fr .7fr 1.1fr;
    width:112%;margin-left:-6%}                              /* déborde des DEUX côtés */
}
.tete{font-family:var(--display);font-size:var(--t-mini);letter-spacing:.02em;
  color:var(--verre);border-bottom:2px solid var(--verre);padding-bottom:.5rem}
.case{background:var(--marbre-haut);border:1px solid var(--alu);padding:.85rem .9rem;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.case i{font-style:normal;font-family:var(--display);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terre-fonce);display:block;margin-bottom:.4rem}
.case p{margin:0;font-size:.9rem;line-height:1.5;color:var(--beton)}
.case:hover,.case:active{background:var(--verre)}
.case:hover i,.case:active i{color:var(--marbre)}
.case:hover p,.case:active p{color:var(--marbre)}
/* La case que la lame éclaire : inversion franche, posée par le JS. */
.case.eclairee{background:var(--terre);border-color:var(--terre)}
.case.eclairee i{color:var(--marbre-haut)}
.case.eclairee p{color:var(--marbre-haut)}

/* ── BLOC 6 · L'ESCALIER ────────────────────────────────────────────── */
.escalier{padding:var(--bande) var(--marge);display:grid;gap:clamp(1.4rem,3vw,2.6rem)}
@media (min-width:900px){.escalier{grid-template-columns:2.3fr .45fr;align-items:start}}
.escalier h2{grid-column:1/-1}
.temps{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem}
.temps li{position:relative;padding-left:3.2rem;border-left:2px solid var(--alu)}
.temps li:nth-child(2){margin-left:7%}
.temps li:nth-child(3){margin-left:14%}
.temps li:nth-child(4){margin-left:21%;margin-right:-8%}       /* sort du conteneur */
.temps b{position:absolute;left:.7rem;top:0;font-family:var(--display);color:var(--terre-fonce)}
.temps h3{font-family:var(--lecture);font-weight:700;font-size:1.05rem;margin-bottom:.25rem}
.temps p{margin:0;color:var(--beton);font-size:var(--t-petit)}
.escalier__img{margin:1.8rem 0 0}
.escalier__img img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--alu)}

/* ── BLOC 7 · L'APLAT D'ENCRE — la lame ne l'atteint jamais ─────────── */
.ombre{background:var(--verre);color:var(--marbre);padding:var(--bande) var(--marge);
  position:relative;z-index:41}                    /* passe AU-DESSUS de l'arête */
.ombre h2{color:var(--marbre)}
.ombre h2::after{background:var(--marbre)}
.ombre p{max-width:52ch;color:var(--marbre-terne)}
.ombre b{color:var(--marbre)}
@media (min-width:900px){.ombre p{margin-left:38%}.ombre h2{margin-left:38%}}
.ombre__pied{font-size:var(--t-petit);border-top:1px solid var(--verre-filet);padding-top:1.1rem;margin-top:2rem}

/* ── BLOC 8 · TROIS LARGEURS INÉGALES ───────────────────────────────── */
.trois{display:grid;gap:1rem;padding:0 var(--marge) var(--bande)}
@media (min-width:820px){.trois{grid-template-columns:52% 21% 27%;gap:0;align-items:start}}
.trois figure{margin:0}
.trois__a{margin-top:-80px;position:relative;z-index:42}        /* chevauche la section */
.trois__a img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--alu)}
.trois__b img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--alu)}
.trois__c img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--alu)}
.trois figcaption{font-family:var(--display);font-size:.68rem;letter-spacing:-.02em;
  color:var(--beton);padding:.5rem .8rem 0 0;line-height:1.5}

/* ── BLOC 9 · LES QUESTIONS ─────────────────────────────────────────── */
.questions{padding:var(--bande) var(--marge)}
.questions__corps{display:grid;gap:1px;background:var(--alu);margin-top:1.8rem}
@media (min-width:900px){.questions__corps{grid-template-columns:1.7fr 1fr}}
.questions details{background:var(--marbre-haut);padding:1rem 1.1rem}
.questions summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none}
.questions summary::-webkit-details-marker{display:none}
.questions summary::before{content:"+ ";font-family:var(--display);color:var(--terre-fonce)}
.questions details[open] summary::before{content:"– "}
.questions details p{margin:.8rem 0 0;color:var(--beton);font-size:var(--t-petit)}
.questions summary:hover,.questions summary:active{color:var(--terre-fonce)}

/* ── BLOC 10 · LE PIED ──────────────────────────────────────────────── */
.pied{background:var(--marbre-haut);border-top:1px solid var(--alu);
  padding:var(--bande) var(--marge) calc(var(--bande) * .8);position:relative;
  margin-top:-48px;z-index:43}          /* le PIED chevauche la section, pas son titre */
.pied__liste{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;
  align-items:center}
@media (min-width:820px){.pied__liste{grid-template-columns:auto 1fr auto}}
.pied__etat{font-family:var(--display);font-size:var(--t-mini);color:var(--beton);letter-spacing:-.02em}
.pied__mentions{margin-top:2.4rem;border-top:1px solid var(--alu);padding-top:1.4rem}
.pied__mentions p{max-width:76ch;font-size:var(--t-petit);color:var(--beton)}
.pied__mentions strong{color:var(--verre)}
.appel--final{box-shadow:8px 8px 0 var(--terre)}

/* ── Micro-interactions restantes + parité tactile ──────────────────── */
.lien-nav{text-decoration:none}
.lien-nav:focus-visible{outline:2px solid var(--terre);outline-offset:2px}
@media (hover:none){
  .appel:hover{box-shadow:6px 6px 0 var(--terre);transform:none}
  .case:hover{background:var(--marbre-haut)}
  .case:hover i{color:var(--terre-fonce)}
  .case:hover p{color:var(--beton)}
}