/* ==========================================================================
   ARKATE — planches techniques animées & couche d'animations
   Chargé après arkate.css. Dépend des mêmes jetons.
   ========================================================================== */

/* 20. PLANCHES SVG
   ------------------------------------------------------------------ */
.ark-plan{position:relative;width:100%;color:inherit;line-height:0;}
.ark-plan svg{width:100%;height:auto;display:block;overflow:visible;}
.ark-plan svg *{vector-effect:non-scaling-stroke;}
.ark-plan svg text{vector-effect:none;}

/* État initial : traits masqués, textes et aplats effacés. */
.ark-plan [data-len]{stroke-dashoffset:var(--len);stroke-dasharray:var(--len);}
.ark-plan [data-len]{transition:stroke-dashoffset calc(1.15s / var(--plan-speed,1)) cubic-bezier(.33,0,.2,1);}
.ark-plan text,.ark-plan [data-fade]{opacity:0;transition:opacity .55s var(--ark-ease);}
.ark-plan.is-drawn [data-len]{stroke-dashoffset:0;}
.ark-plan.is-drawn text,.ark-plan.is-drawn [data-fade]{opacity:var(--op,1);}

/* Redessin : on retire la classe puis on la remet (JS). */
.ark-plan.is-redraw [data-len]{transition:none;}

@media (prefers-reduced-motion:reduce){
  .ark-plan [data-len]{stroke-dashoffset:0!important;transition:none!important;}
  .ark-plan text,.ark-plan [data-fade]{opacity:1!important;transition:none!important;}
}

/* 21. HÉROS : calque de trame + parallaxe
   ------------------------------------------------------------------ */
.ark-hero__plan{
  position:absolute;z-index:1;pointer-events:none;
  top:calc(var(--ark-header-h) + 2vh);right:-8%;width:min(78vw,1180px);
  color:var(--ark-white);opacity:.22;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:opacity 1.4s var(--ark-ease);
}
@media (max-width:900px){
  .ark-hero__plan{right:-30%;width:150vw;top:auto;bottom:8vh;opacity:.16;}
}
.ark-hero__inner,.ark-hero__meta{position:relative;z-index:3;}

/* Trame de fond légèrement mobile */
.ark-hero__grid{transform:translate3d(calc(var(--px,0px) * -.35),calc(var(--py,0px) * -.35),0);}

/* Compteur de coordonnées du héros */
.ark-hero__coords{
  position:absolute;left:clamp(6px,1.1vw,18px);top:50%;z-index:3;
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
  display:flex;gap:clamp(18px,2.4vw,34px);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ark-line-num);opacity:.6;
}
@media (max-width:1280px){.ark-hero__coords{display:none;}}

/* 22. SECTION « PIÈCES DU DOSSIER »
   ------------------------------------------------------------------ */
.ark-sheets{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(24px,3.4vw,64px);align-items:start;}
@media (max-width:1024px){.ark-sheets{grid-template-columns:1fr;}}

.ark-sheets__list{border-top:1px solid var(--ark-rule-dark);}
.ark-light .ark-sheets__list{border-color:var(--ark-rule-light);}
.ark-sheet-btn{
  position:relative;width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) 18px;
  align-items:center;gap:16px;padding:clamp(14px,1.6vw,22px) 0;
  background:none;border:0;border-bottom:1px solid var(--ark-rule-dark);
  color:inherit;text-align:left;cursor:pointer;
  transition:padding-left .45s var(--ark-ease),opacity .35s;
}
.ark-light .ark-sheet-btn{border-color:var(--ark-rule-light);}
.ark-sheet-btn__code{font-size:11px;letter-spacing:.22em;color:var(--ark-line-num);transition:color .35s;}
.ark-light .ark-sheet-btn__code{color:var(--ark-muted);}
.ark-sheet-btn__title{font-family:var(--ark-font-display);text-transform:uppercase;font-size:clamp(16px,1.5vw,24px);line-height:1;letter-spacing:-.005em;}
.ark-sheet-btn__mark{position:relative;width:12px;height:12px;opacity:.35;transition:opacity .35s,transform .45s var(--ark-ease);}
.ark-sheet-btn__mark::before,.ark-sheet-btn__mark::after{content:"";position:absolute;background:currentColor;}
.ark-sheet-btn__mark::before{top:50%;left:0;width:100%;height:1px;}
.ark-sheet-btn__mark::after{left:50%;top:0;width:1px;height:100%;}
.ark-sheet-btn:hover{padding-left:12px;}
.ark-sheet-btn.is-active{padding-left:14px;}
.ark-sheet-btn.is-active .ark-sheet-btn__mark{opacity:1;transform:rotate(45deg);}
.ark-sheet-btn.is-active .ark-sheet-btn__code{color:inherit;}
.ark-sheet-btn::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:currentColor;
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ark-ease-out);
}
.ark-sheet-btn.is-active::before{transform:scaleY(1);}
.ark-sheet-desc{margin-top:18px;font-size:15px;line-height:1.6;font-weight:300;max-width:52ch;opacity:.72;min-height:4.8em;}

/* Planche affichée */
.ark-sheets__stage{position:relative;border:1px solid var(--ark-rule-dark);padding:clamp(18px,2.4vw,40px) clamp(18px,2.4vw,40px) clamp(58px,5vw,78px);}
.ark-light .ark-sheets__stage{border-color:var(--ark-rule-light);}
.ark-sheets__stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.5px);background-size:34px 34px;
}
.ark-light .ark-sheets__stage::before{background-image:radial-gradient(rgba(18,18,18,.1) 1.2px,transparent 1.5px);}
.ark-sheets__frame{position:absolute;inset:12px;border:1px solid currentColor;opacity:.28;pointer-events:none;}
.ark-sheets__holder{position:relative;}
.ark-sheets__holder .ark-plan{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ark-ease);}
.ark-sheets__holder .ark-plan.is-current{position:relative;opacity:1;visibility:visible;}

/* Cartouche */
.ark-cartouche{
  position:absolute;left:clamp(18px,2.4vw,40px);right:clamp(18px,2.4vw,40px);bottom:clamp(14px,1.6vw,22px);
  display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;justify-content:space-between;
  padding-top:12px;border-top:1px solid currentColor;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;
}
.ark-cartouche b{font-weight:500;letter-spacing:.18em;}

/* 23. PLANCHE EN REMPLACEMENT D'IMAGE (projets)
   ------------------------------------------------------------------ */
.ark-project__plan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:9%;color:var(--ark-line-num);}
.ark-project__plan .ark-plan{width:100%;}
.ark-project__media .ark-project__plan + .ark-project__ph{display:none;}
.ark-project:hover .ark-project__plan{color:var(--ark-paper);}
.ark-project__plan{transition:color .5s var(--ark-ease),transform 1.1s var(--ark-ease-out);}
.ark-project:hover .ark-project__plan{transform:scale(1.04);}

/* Balayage au survol */
.ark-project__media::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;color:var(--ark-paper);
  opacity:0;z-index:2;transform:translateY(0);
}
.ark-project:hover .ark-project__media::before{opacity:.55;animation:ark-scan 1.5s var(--ark-ease) infinite;}
@keyframes ark-scan{0%{transform:translateY(0);opacity:0;}12%{opacity:.55;}100%{transform:translateY(var(--scan,320px));opacity:0;}}

/* 24. TITRES : révélation mot à mot
   ------------------------------------------------------------------ */
.ark-split{display:inline;}
/* Le débord vertical laisse passer les accents (É, À, Ç) sans les couper. */
.ark-split .ark-word{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .04em .06em;margin:-.16em -.04em -.06em;}
.ark-split .ark-word > i{
  display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .9s var(--ark-ease-out);transition-delay:calc(var(--i,0) * .055s);
}
.is-in .ark-split .ark-word > i,.ark-split.is-in .ark-word > i{transform:none;}
@media (prefers-reduced-motion:reduce){.ark-split .ark-word > i{transform:none!important;}}

/* 25. CURSEUR TECHNIQUE (réticule)
   ------------------------------------------------------------------ */
.ark-cross{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .5s var(--ark-ease);}
.ark-cross.is-on{opacity:1;}
.ark-cross i{position:absolute;background:currentColor;opacity:.16;}
.ark-cross__x{left:0;right:0;height:1px;transform:translate3d(0,var(--cy,50vh),0);}
.ark-cross__y{top:0;bottom:0;width:1px;transform:translate3d(var(--cx,50vw),0,0);}
.ark-cross__dot{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  transform:translate3d(var(--cx,50vw),var(--cy,50vh),0);
  border:1px solid currentColor;opacity:.34;
  transition:width .3s var(--ark-ease),height .3s var(--ark-ease),opacity .3s;
}
.ark-cross__val{
  position:absolute;transform:translate3d(calc(var(--cx,50vw) + 24px),calc(var(--cy,50vh) + 18px),0);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;white-space:nowrap;
}
body.ark-cross-dark .ark-cross{color:var(--ark-paper);}
body.ark-cross-light .ark-cross{color:var(--ark-ink);}
@media (pointer:coarse),(max-width:900px),(prefers-reduced-motion:reduce){.ark-cross{display:none;}}

/* 26. BARRE DE PROGRESSION DE LECTURE
   ------------------------------------------------------------------ */
.ark-progress{position:absolute;left:var(--ark-gut);right:var(--ark-gut);bottom:0;height:1px;pointer-events:none;}
.ark-progress i{display:block;height:100%;background:currentColor;transform:scaleX(var(--p,0));transform-origin:left;}

/* 27. PRÉ-CHARGEUR
   ------------------------------------------------------------------ */
.ark-loader{
  position:fixed;inset:0;z-index:200;background:var(--ark-ink);color:var(--ark-paper);
  display:grid;place-items:center;transition:opacity .6s var(--ark-ease),visibility .6s;
}
.ark-loader.is-done{opacity:0;visibility:hidden;}
.ark-loader__inner{width:min(78vw,420px);text-align:left;}
.ark-loader__word{font-family:var(--ark-font-display);text-transform:uppercase;font-size:clamp(30px,6vw,64px);line-height:1;letter-spacing:-.02em;}
.ark-loader__meta{display:flex;justify-content:space-between;margin:18px 0 10px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ark-line-num);}
.ark-loader__bar{height:8px;border:1px solid rgba(255,255,255,.5);position:relative;}
.ark-loader__bar i{position:absolute;inset:1px;background:currentColor;transform:scaleX(var(--p,0));transform-origin:left;transition:transform .35s linear;}
@media (prefers-reduced-motion:reduce){.ark-loader{display:none;}}

/* 28. BANDEAU DOUBLE
   ------------------------------------------------------------------ */
.ark-marquee--rev .ark-marquee__track{animation-direction:reverse;animation-duration:56s;}
.ark-marquee + .ark-marquee{border-top:0;}
.ark-marquee--thin .ark-marquee__group span{font-family:var(--ark-font-text);font-weight:300;font-size:clamp(12px,1.1vw,15px);letter-spacing:.2em;text-transform:uppercase;}

/* 29. PARALLAXE DE TRAME & DIVERS
   ------------------------------------------------------------------ */
.ark-dots::before{background-position:0 var(--dots,0px);}
.ark-footer__word{transform:translateX(var(--drift,0px));transition:transform .2s linear;}

/* Boutons magnétiques */
.ark-btn{transform:translate3d(var(--mx,0px),var(--my,0px),0);}

/* Fil vertical de progression de la méthode */
.ark-steps{position:relative;}
.ark-steps::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.22;
  transform:scaleX(var(--steps-p,0));transform-origin:left;transition:transform .2s linear;
}
.ark-step{padding-top:30px;}

/* Lignes techniques d'ambiance sur les sections sombres */
.ark-section--ruled::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(90deg,currentColor 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;opacity:.06;
}

/* 30. COMPLÉMENTS
   ------------------------------------------------------------------ */
.ark-lineup.is-split{overflow:visible;}
.ark-lineup.is-split > span{transform:none;}
.ark-cross.is-hover .ark-cross__dot{width:58px;height:58px;margin:-29px 0 0 -29px;opacity:.75;}
.ark-cross.is-hover .ark-cross__x,.ark-cross.is-hover .ark-cross__y{opacity:.3;}
.ark-project__ph--corner{
  inset:auto auto 14px 16px;display:block;background:none;
  font-size:9px;letter-spacing:.28em;opacity:.55;z-index:3;
}
.ark-project__media .ark-project__plan + .ark-project__ph--corner{display:block;}

/* La vignette qui porte une planche se lit comme une feuille de dessin. */
.ark-project__media:has(.ark-project__plan){border:1px solid var(--ark-rule-dark);}
.ark-light .ark-project__media:has(.ark-project__plan){border-color:var(--ark-rule-light);}
.ark-project__media:has(.ark-project__plan)::after{
  content:"";position:absolute;inset:10px;border:1px solid currentColor;color:var(--ark-line-num);
  opacity:.28;pointer-events:none;transition:inset .5s var(--ark-ease),opacity .4s;
}
.ark-project:hover .ark-project__media:has(.ark-project__plan)::after{inset:16px;opacity:.6;}

/* 31. PICTOGRAMMES
   ------------------------------------------------------------------ */
.ark-icon{display:block;width:100%;height:auto;}
.ark-icon *{vector-effect:non-scaling-stroke;}

/* 32. PARCOURS EN CINQ ÉTAPES
   ------------------------------------------------------------------ */
.ark-shead--tight{margin-bottom:clamp(30px,3.6vw,60px);align-items:end;}

.ark-path{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;background:var(--ark-rule-light);border:1px solid var(--ark-rule-light);
  list-style:none;margin:0;padding:0;
}
.ark-dark .ark-path{background:var(--ark-rule-dark);border-color:var(--ark-rule-dark);}
@media (max-width:1080px){.ark-path{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.ark-path{grid-template-columns:1fr;}}

.ark-path__step{
  position:relative;background:var(--ark-paper);
  padding:clamp(20px,2.2vw,34px) clamp(18px,1.8vw,28px) clamp(24px,2.6vw,38px);
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:color .45s var(--ark-ease);
}
.ark-dark .ark-path__step{background:var(--ark-ink);}
.ark-path__step::before{
  content:"";position:absolute;inset:0;background:var(--ark-ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ark-ease-out);z-index:0;
}
.ark-dark .ark-path__step::before{background:var(--ark-paper);}
.ark-path__step:hover::before{transform:scaleY(1);}
.ark-path__step:hover{color:var(--ark-paper);}
.ark-dark .ark-path__step:hover{color:var(--ark-ink);}
.ark-path__step > *{position:relative;z-index:1;}

.ark-path__num{
  font-family:var(--ark-font-display);font-size:clamp(26px,2.6vw,40px);line-height:1;
  color:transparent;-webkit-text-stroke:1.4px var(--num-c,#121212);letter-spacing:-.02em;
}
.ark-path__step:hover .ark-path__num{-webkit-text-stroke-color:currentColor;}
.ark-path__art{display:block;width:clamp(34px,3vw,46px);margin:6px 0 4px;opacity:.9;}
.ark-path__title{
  font-family:var(--ark-font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(15px,1.25vw,20px);line-height:1.02;letter-spacing:-.005em;margin:0;
}
.ark-path__note{font-size:12px;letter-spacing:.06em;line-height:1.4;opacity:.6;margin:0;}

/* Flèche de liaison entre les étapes */
.ark-path__step:not(:last-child)::after{
  content:"";position:absolute;right:-1px;top:50%;width:1px;height:26px;
  background:currentColor;opacity:.3;transform:translateY(-50%);z-index:2;
}
@media (max-width:1080px){.ark-path__step::after{display:none;}}

/* 33. TUILES À PICTOGRAMME
   ------------------------------------------------------------------ */
.ark-tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--ark-rule-dark);border:1px solid var(--ark-rule-dark);
}
.ark-light .ark-tiles{background:var(--ark-rule-light);border-color:var(--ark-rule-light);}
.ark-tiles--four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1024px){.ark-tiles,.ark-tiles--four{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.ark-tiles,.ark-tiles--four{grid-template-columns:1fr;}}

.ark-tile{
  position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  background:var(--ark-ink);color:inherit;
  padding:clamp(22px,2.4vw,40px);min-height:clamp(180px,17vw,250px);
  transition:color .45s var(--ark-ease);
}
.ark-light .ark-tile{background:var(--ark-paper);}
.ark-tile::before{
  content:"";position:absolute;inset:0;background:var(--ark-paper);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ark-ease-out);z-index:0;
}
.ark-light .ark-tile::before{background:var(--ark-ink);}
.ark-tile:hover::before{transform:scaleY(1);}
.ark-tile:hover{color:var(--ark-ink);}
.ark-light .ark-tile:hover{color:var(--ark-paper);}
.ark-tile > *{position:relative;z-index:1;}
.ark-tile__idx{font-size:11px;letter-spacing:.24em;opacity:.5;}
.ark-tile__art{display:block;width:clamp(36px,3.2vw,50px);margin:auto 0 6px;}
.ark-tile__title{
  font-family:var(--ark-font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(16px,1.45vw,23px);line-height:1;letter-spacing:-.005em;margin:0;
}
.ark-tile__note{font-size:12.5px;letter-spacing:.05em;opacity:.6;margin:0;}

/* 34. CHIFFRES : unité accolée
   ------------------------------------------------------------------ */
.ark-stat b em{
  font-style:normal;font-family:var(--ark-font-text);font-weight:300;
  font-size:.34em;letter-spacing:.14em;text-transform:uppercase;margin-left:.3em;
}