/* Altiarc. Système de design commun aux cinq pages. */

:root{
  --canvas:#0A0D14;
  --surface:#10141E;
  --surface-2:#141926;
  --line:#1B2130;
  --line-strong:#2C3446;
  --text:#ECEEF2;
  --muted:#8C94A6;
  --dim:#5E6678;
  --accent:#E8A24A;
  --accent-soft:rgba(232,162,74,.14);
  --mark:#B3121D;
  --btn-bg:#F1EFE9;
  --btn-fg:#0A0D14;

  --display:"Schibsted Grotesk",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4.4vw,72px);
  --maxw:1240px;
  --tshadow:0 1px 2px rgba(5,6,12,.95),0 3px 12px rgba(5,6,12,.78),0 10px 44px rgba(5,6,12,.8);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--body);font-size:clamp(15.5px,1vw,17px);line-height:1.65;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* une seule couche de fond derrière tout le site */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 38% at 82% 4%,rgba(232,162,74,.065),transparent 72%),
    radial-gradient(46% 36% at 6% 62%,rgba(179,18,29,.06),transparent 72%);
  animation:drift 78s var(--ease) -14s infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2.4%,0) scale(1.05)}}

.wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto;position:relative;z-index:1}
main{position:relative;z-index:1}
section{padding:clamp(64px,8.5vw,128px) 0;position:relative}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--accent);color:#0A0D14;padding:12px 18px}
.skip:focus{left:0}

/* ---------- typographie ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(34px,5.6vw,72px);line-height:1.02}
h2{font-size:clamp(27px,3.6vw,50px);line-height:1.06;max-width:19ch;margin-bottom:18px}
h3{font-size:clamp(18px,1.55vw,23px);line-height:1.2;letter-spacing:-.02em}
.lede{color:var(--muted);max-width:56ch;margin:0 0 44px;font-size:clamp(16px,1.15vw,18.5px)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--mark)}
.small{font-size:14px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------- navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px var(--gut);
  background:linear-gradient(to bottom,rgba(10,13,20,.9),rgba(10,13,20,0));
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,13,20,.93);border-bottom-color:var(--line);backdrop-filter:blur(14px)}
.brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.04em;text-decoration:none}
.brand i{color:var(--mark);font-style:normal}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none;padding:8px 13px;border-radius:2px;
  transition:color .35s var(--ease),background .35s var(--ease)}
.nav-links a:hover{color:var(--text);background:rgba(241,239,233,.05)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--accent);margin-top:5px}
.burger{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);
  width:42px;height:38px;border-radius:2px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}
@media (max-width:940px){
  .nav-links{position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,13,20,.985);border-bottom:1px solid var(--line);padding:10px var(--gut) 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.4s var(--ease);backdrop-filter:blur(14px)}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .nav-links .btn{margin-top:16px;border-bottom:0}
  .burger{display:inline-flex}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:500;
  padding:14px 24px;border:0;border-radius:2px;cursor:pointer;font-family:var(--body);font-size:15.5px;
  letter-spacing:-.01em;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.45);background:#fff}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:rgba(241,239,233,.06);border-color:var(--muted);box-shadow:none}
.btn-accent{background:var(--accent);color:#0A0D14}
.btn-accent:hover{background:#F2B45F}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- filets et révélations ---------- */
.rule{width:100%;height:1px;border:0;background:var(--line);margin:0 0 34px;
  transform:scaleX(var(--draw,0));transform-origin:left;transition:transform 1.2s var(--ease-out)}
[data-reveal] > *{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-reveal].in > *{opacity:1;transform:none}
[data-reveal].in > *:nth-child(2){transition-delay:.08s}
[data-reveal].in > *:nth-child(3){transition-delay:.16s}
[data-reveal].in > *:nth-child(4){transition-delay:.24s}
[data-reveal].in > *:nth-child(5){transition-delay:.32s}
[data-reveal].in > *:nth-child(6){transition-delay:.4s}
[data-reveal].in.settled > *{transition-delay:0s}

/* ---------- grilles et cartes ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,18px)}
/* Safari calcule les pistes de grille sur la largeur intrinsèque du contenu
   si on ne le lui interdit pas explicitement : un mot long ou une image
   déborde alors de sa carte, sans qu'aucun overflow de page ne le signale.
   min-width:0 force chaque carte à respecter sa colonne. */
.g2>*,.g3>*,.g4>*,.levels>*,.works .work>*,.step>*{min-width:0}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
@media (max-width:560px){.g4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);padding:clamp(20px,2.2vw,30px);
  position:relative;overflow:hidden;transition:border-color .5s var(--ease),background .5s var(--ease)}
.card:hover{border-color:var(--line-strong);background:var(--surface-2)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);margin:0;font-size:15px}
.card .num{font-family:var(--mono);font-size:11px;color:var(--dim);display:block;margin-bottom:16px;letter-spacing:.1em}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(to right,var(--accent),transparent);opacity:0;transition:opacity .5s var(--ease)}
.card:hover::after{opacity:.9}
.card.wow{background:linear-gradient(170deg,rgba(232,162,74,.07),var(--surface) 46%);border-color:#2A2A2C}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--line-strong);color:var(--muted);margin-bottom:14px}
.tag.hot{border-color:rgba(232,162,74,.45);color:var(--accent);background:var(--accent-soft)}

/* vignette animée dans les cartes de prestation */
.viz{height:86px;margin:18px 0 0;position:relative;overflow:hidden;
  border-top:1px solid var(--line);padding-top:18px}
.viz .bar{position:absolute;bottom:0;width:7px;background:var(--line-strong);border-radius:1px;
  transform-origin:bottom;transform:scaleY(.2);transition:transform .9s var(--ease-out),background .5s var(--ease)}
.card:hover .viz .bar{background:var(--accent)}
.viz .dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;
  transition:opacity .6s var(--ease),transform .9s var(--ease-out)}
.card:hover .viz .dot{opacity:1}
.viz .lineart{position:absolute;inset:18px 0 0;width:100%;height:calc(100% - 18px)}
.viz .lineart path{stroke:var(--line-strong);stroke-width:1.2;fill:none;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.5s var(--ease-out),stroke .5s var(--ease)}
[data-reveal].in .viz .lineart path{stroke-dashoffset:0}
.card:hover .viz .lineart path{stroke:var(--accent)}

/* ---------- étapes numérotées ---------- */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:76px 1fr 1fr;gap:clamp(14px,2.4vw,44px);
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);align-items:baseline;
  transition:background .5s var(--ease)}
.step:hover{background:rgba(241,239,233,.018)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.step p{color:var(--muted);margin:0;font-size:15px}
@media (max-width:800px){.step{grid-template-columns:52px 1fr}.step p{grid-column:2}}

/* ---------- bandeaux image ---------- */
/* Un léger zoom continu sur chaque vignette, partout dans le site : la page
   respire même quand rien ne défile. Discret, jamais gênant pour lire le
   texte posé dessus, et coupé net par le mouvement réduit (règle globale
   plus bas) et par la pause d'onglet caché (body.paused, dans app.js). */
@keyframes plateZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.plate{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.plate img{width:100%;height:100%;object-fit:cover;opacity:.92;
  animation:plateZoom 28s ease-in-out -6s infinite alternate;will-change:transform}
section:nth-of-type(2n) .plate img{animation-direction:alternate-reverse}
.plate.tall{aspect-ratio:16/7}
.plate .over{position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(to right,rgba(10,13,20,.94) 8%,rgba(10,13,20,.35) 62%,rgba(10,13,20,.1))}
.plate .over .wrap{width:100%;padding:0 clamp(22px,4vw,64px)}
/* En dessous de 640px, une vignette avec étiquette + titre + paragraphe ne
   tient plus dans une hauteur calée sur 16:7 : le texte se fait couper par
   le cadrage. On abandonne le ratio fixe pour une hauteur qui respire. */
@media (max-width:640px){
  .plate.tall{aspect-ratio:auto;min-height:300px}
  .plate .over{padding-block:28px}
}

/* ---------- travaux livrés ---------- */
.works{border-top:1px solid var(--line)}
.work{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.work:hover{padding-left:10px}
.work .what{color:var(--muted);font-size:15px;margin:4px 0 0}
.work .state{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.work .state.live{color:var(--accent)}

/* ---------- questions ---------- */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;gap:16px;align-items:baseline;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.5vw,21px);transition:color .4s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;color:var(--accent);font-family:var(--mono);font-size:19px;
  transition:transform .4s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--accent)}
.qa .a{color:var(--muted);padding:0 0 22px;max-width:64ch;margin:0;font-size:15px}

/* ---------- formulaire ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
  padding:13px 14px;font-family:var(--body);font-size:16px;border-radius:2px;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:var(--surface-2)}
.field textarea{min-height:120px;resize:vertical}
.ok{display:none;border:1px solid var(--line-strong);background:var(--surface);padding:30px}
.ok.show{display:block;animation:fade .7s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- pied de page ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 36px;color:var(--dim);font-size:14px;position:relative;z-index:1}
footer .cols{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:28px}
footer a{color:var(--muted);text-decoration:none;transition:color .35s var(--ease)}
footer a:hover{color:var(--text)}
footer .col p{margin:0 0 7px}
.disclosure{font-size:12.5px;border-top:1px solid var(--line);padding-top:20px;color:var(--dim);max-width:74ch}

/* ---------- en-tête intérieur ---------- */
.phead{padding:clamp(120px,15vw,190px) 0 clamp(40px,5vw,66px);position:relative}
.phead h1{max-width:17ch}
.phead .lede{margin-top:20px;margin-bottom:0;max-width:52ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal] > *{opacity:1;transform:none}
  .rule{transform:scaleX(1)}
  .viz .lineart path{stroke-dashoffset:0}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- effets d'interaction ---------- */

/* Titre des pages intérieures, mot par mot (flou vers net). Les mots sont
   découpés par app.js ; sans JavaScript le titre reste un simple texte. */
@keyframes wdIn{from{opacity:0;filter:blur(10px);transform:translateY(.28em)}
  to{opacity:1;filter:blur(0);transform:none}}
.wd{display:inline-block;opacity:0;
  animation:wdIn .8s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * 75ms + 140ms)}

/* Halo lumineux qui suit le curseur sur les cartes. Souris seulement :
   sur écran tactile il n'y a pas de survol, on ne le dessine pas. */
@media (hover:hover) and (pointer:fine){
  .halo{--mx:50%;--my:50%}
  .halo:hover{background-image:radial-gradient(340px circle at var(--mx) var(--my),rgba(232,162,74,.13),transparent 68%)}
  .level.top.halo:hover{background-image:radial-gradient(340px circle at var(--mx) var(--my),rgba(232,162,74,.16),transparent 68%),linear-gradient(168deg,rgba(232,162,74,.09),var(--surface) 44%)}
  /* Bouton magnétique : app.js écrit --tx et --ty, le bouton suit de loin. */
  .btn{translate:var(--tx,0px) var(--ty,0px);
    transition:transform .4s var(--ease),translate .3s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
}

@media (prefers-reduced-motion:reduce){
  .wd{opacity:1;filter:none;transform:none}
}