/* Peak Digital — feuille de styles commune
   Charte : glacier, roche, nuit, gris, balise (accent unique, avec parcimonie).
   Schibsted Grotesk pour les titres et le texte, IBM Plex Mono pour les libellés. */

:root{
  --glacier:#E9EDEF; --roche:#C5CDD3; --nuit:#17202B; --gris:#5B6672; --balise:#F26B1D;
  --blanc:#FFFFFF; --ligne-nuit:#2A3644; --texte-nuit:#A9B4BF; --pied:#10171F; --pied-texte:#8A96A2;
  --sans:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --marge:clamp(20px, 4vw, 48px);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{background:var(--glacier);color:var(--nuit);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--balise);outline-offset:3px;border-radius:4px}

.cadre{width:min(1240px, 100% - 2 * var(--marge));margin-inline:auto}
.mono{font-family:var(--mono);font-size:12px;line-height:1.45;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.saut{position:absolute;left:12px;top:-60px;z-index:100;background:var(--balise);color:var(--nuit);padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.saut:focus{top:12px}
.a-completer{display:inline-block;font-family:var(--mono);font-size:.72em;font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1.3;padding:3px 8px;border-radius:6px;border:1.5px dashed var(--balise);white-space:nowrap;vertical-align:middle}

/* ---------- Marque ---------- */
.marque{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap;text-decoration:none}
.marque svg{width:30px;height:22px;flex:none}

/* ---------- En-tête : profil de dénivelé ---------- */
.profil{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--nuit);transition:background .3s}
.profil.defile{background:rgba(233,237,239,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.profil-barre{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px var(--marge) 6px}
.profil-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.profil-logo svg{width:34px;height:25px;flex:none}
.profil-nav{display:flex;align-items:center;gap:4px}
.profil-nav > a,.profil-groupe > button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-weight:500;font-size:15px;text-decoration:none}
.profil-nav > a[aria-current="page"],.profil-metiers a[aria-current="page"],.profil-nav > a:hover,.profil-groupe > button:hover,.profil-groupe > button[aria-expanded="true"]{background:rgba(23,32,43,.07)}
.profil-nav > .profil-appel{margin-left:10px;padding-inline:18px;background:var(--nuit);color:#fff;font-weight:700}
.profil-nav > .profil-appel:hover{background:#2E3B4A}
.profil-groupe{position:relative}
.profil-metiers{position:absolute;top:calc(100% + 10px);left:0;width:330px;display:grid;padding:8px;border-radius:18px;background:var(--blanc);box-shadow:0 24px 48px -20px rgba(23,32,43,.35), 0 0 0 1px var(--roche)}
.profil-metiers a{display:grid;gap:2px;padding:10px 12px;border-radius:12px;text-decoration:none}
.profil-metiers a:hover{background:var(--glacier)}
.profil-metiers b{font-size:15px}
.profil-metiers span{font-size:13.5px;color:var(--gris)}
.profil-menu{display:none}
.profil-trace{position:relative;height:34px;cursor:pointer}
.profil-trace svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.profil-fond{fill:rgba(197,205,211,.5)}
.profil-parcouru{fill:var(--nuit)}
.profil-ligne{fill:none;stroke:var(--nuit);stroke-width:1.5;vector-effect:non-scaling-stroke}
.profil-marcheur{position:absolute;z-index:2;left:calc(var(--x, 0) * 100%);top:calc(var(--y, 1) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--balise);box-shadow:0 0 0 3px var(--glacier);pointer-events:none}
.profil-etiquette{position:absolute;top:22px;left:6px;padding:6px 9px;border-radius:6px;background:var(--nuit);color:#fff;white-space:nowrap;transform:translateX(calc(var(--x, 0) * -100%));opacity:0;transition:opacity .3s}
.profil.bouge .profil-etiquette,.profil-trace:hover .profil-etiquette{opacity:1}
.profil.ouvert .profil-etiquette{opacity:0}
.profil-borne{position:absolute;bottom:0;left:calc(var(--pos, 0) * 100%);width:17px;height:calc(var(--h, 0) * 100%);margin-left:-8px;padding:0;background:linear-gradient(var(--gris), var(--gris)) center / 1px 100% no-repeat}
.profil-borne::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--glacier);box-shadow:inset 0 0 0 1.5px var(--nuit);transition:background .3s}
.profil-borne.passee::before{background:var(--balise);box-shadow:0 0 0 1.5px var(--glacier)}
.profil-borne::after{content:attr(data-nom);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:6px;background:var(--nuit);color:#fff;font:500 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.profil-borne:hover::after{opacity:1}

@media (max-width:899px){
  .profil{transition:background .3s, transform .3s}
  .profil-barre{padding-block:5px 1px}
  .profil-logo{font-size:17px}
  .profil-logo svg{width:30px;height:22px}
  /* En descendant, la barre se replie : il ne reste que le profil (24 px). */
  .profil.replie:not(.ouvert){transform:translateY(-46px)}
  .profil-menu{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--nuit);color:#fff;font-weight:600}
  .profil-nav{display:none}
  .profil.ouvert{background:var(--glacier)}
  .profil.ouvert .profil-nav{position:absolute;left:0;right:0;top:100%;display:grid;gap:0;padding:6px var(--marge) 22px;background:var(--glacier);box-shadow:0 26px 30px -26px rgba(23,32,43,.45)}
  .profil-nav > a{min-height:54px;padding:0;border-radius:0;font-size:18px;border-bottom:1px solid var(--roche)}
  .profil-nav > a:hover{background:none}
  .profil-groupe > button{display:none}
  .profil.ouvert .profil-metiers[hidden]{display:grid!important}
  .profil-metiers{position:static;width:auto;padding:6px 0 10px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--roche)}
  .profil-metiers a{padding:8px 0}
  .profil-nav > .profil-appel{justify-content:center;margin:16px 0 0;border:0;border-radius:999px}
  .profil-trace{height:24px}
  .profil-etiquette{top:16px}
  .profil-borne::after{display:none}
}
@media (max-width:420px){ .marque span{font-size:16px} }

/* ---------- Structure des sections ---------- */
.bloc{padding-block:clamp(76px, 11vw, 150px)}
.bloc-blanc{background:var(--blanc)}
.surtitre{color:var(--gris);margin-bottom:18px}
.titre{font-weight:800;font-size:clamp(34px, 5.6vw, 76px);line-height:.97;letter-spacing:-.042em;max-width:16ch;text-wrap:balance}
.chapo{font-size:clamp(17px, 1.5vw, 20px);line-height:1.5;color:var(--gris);max-width:36em;margin-top:22px}
.lien-fleche{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;padding-bottom:4px;border-bottom:2px solid var(--balise)}
.lien-fleche span{transition:transform .25s}
.lien-fleche:hover span{transform:translateX(5px)}

/* ---------- Accueil : la carte topographique ---------- */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:flex-end;padding-block:128px 28px;overflow:hidden;touch-action:pan-y}
.hero-carte{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(to top, var(--glacier) 34%, rgba(233,237,239,0) 72%)}
.hero-balise{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--balise);z-index:-1;opacity:0;transition:opacity .6s .9s}
.hero-balise.pose{opacity:1}
.hero-balise::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--balise);opacity:0}
@media (prefers-reduced-motion:no-preference){ .hero-balise.pose::after{animation:signal 2.8s ease-out 1.6s infinite} }
@keyframes signal{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.hero-lecture{position:absolute;left:0;top:0;z-index:4;pointer-events:none;background:var(--nuit);color:#fff;padding:7px 10px;border-radius:8px;white-space:nowrap;opacity:0;transition:opacity .2s}
.hero-lecture.visible{opacity:1}
.hero-cadre{position:relative}
.hero-texte{max-width:860px}
.hero h1{font-weight:inherit}
.hero-sujet{display:block;max-width:34em;margin-bottom:22px;color:var(--gris)}
.hero-titre{display:block;font-weight:800;font-size:clamp(46px, 8.6vw, 128px);line-height:.92;letter-spacing:-.05em}
.hero-titre .ligne{display:block}
.hero-titre .point{color:var(--balise)}
.hero-chapo{margin-top:28px;font-size:clamp(17px, 1.55vw, 20px);line-height:1.5;color:var(--gris);max-width:35em}
.hero-bas{margin-top:clamp(32px, 6vh, 64px);padding-top:14px;border-top:1px solid var(--roche);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;color:var(--gris)}
.hero-bas i{font-style:normal;display:inline-block}
@media (prefers-reduced-motion:no-preference){ .hero-bas i{animation:descend 1.8s ease-in-out infinite} }
@keyframes descend{50%{transform:translateY(4px)}}
@media (min-width:900px){
  .hero{align-items:center;padding-block:140px 36px}
  .hero::before{background:linear-gradient(90deg, rgba(233,237,239,.92) 0%, rgba(233,237,239,.55) 38%, rgba(233,237,239,0) 62%)}
  .hero-cadre{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - 176px)}
  .hero-texte{margin-block:auto}
}

/* ---------- Accueil : la crête de téléphones ---------- */
.crete-tete{display:grid;gap:8px 64px}
@media (min-width:960px){ .crete-tete{grid-template-columns:1.15fr .85fr;align-items:end} .crete-tete .chapo{margin-top:0} }
.crete-lien{margin-top:24px}
.crete{position:relative;margin-top:clamp(40px, 6vw, 76px)}
.crete-ligne{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.crete-ligne path{fill:none;stroke:var(--roche);stroke-width:1.5;stroke-linejoin:round}
.crete-ligne circle{fill:var(--balise)}
.crete-rangee{position:relative;display:flex;justify-content:center;gap:clamp(14px, 2.2vw, 30px);padding:56px var(--marge) 150px}
.crete-tel{flex:0 0 clamp(150px, 16.5vw, 232px);transform:translateY(var(--dy, 0px))}
.crete-legende{margin-top:14px;display:grid;gap:3px}
.crete-legende b{font-size:15px;letter-spacing:-.01em;line-height:1.2}
.crete-legende span{color:var(--gris)}
@media (max-width:759px){
  .crete-ligne{display:none}
  .crete-rangee{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:12px 64px}
  .crete-rangee::-webkit-scrollbar{display:none}
  .crete-tel{flex-basis:58vw;scroll-snap-align:center;transform:translateY(calc(var(--dy, 0px) * .35))}
}

/* ---------- Appareils ---------- */
.tel{position:relative;aspect-ratio:9/19;background:#0c0d10;border-radius:clamp(22px, 2.6vw, 34px);padding:clamp(5px, .55vw, 8px);box-shadow:0 34px 60px -30px rgba(23,32,43,.55), inset 0 0 0 1.5px #2a2c31}
.tel::before{content:"";position:absolute;top:calc(clamp(5px, .55vw, 8px) + 8px);left:50%;transform:translateX(-50%);width:30%;height:clamp(12px, 1.4vw, 18px);background:#0c0d10;border-radius:999px;z-index:2}
.ecran{height:100%;overflow-y:auto;overflow-x:hidden;background:#fff;scrollbar-width:none;overscroll-behavior:contain}
.ecran::-webkit-scrollbar{display:none}
.tel .ecran{border-radius:clamp(17px, 2.05vw, 27px)}
.ecran img{width:100%;height:auto}
.pc-cadre{background:#0c0d10;border-radius:14px 14px 0 0;padding:clamp(6px, 1vw, 11px);box-shadow:inset 0 0 0 1.5px #2a2c31}
.pc .ecran{height:auto;aspect-ratio:16/10;border-radius:3px}
.pc-socle{height:clamp(8px, 1.2vw, 14px);width:112%;margin-left:-6%;background:linear-gradient(#d6d9dd, #9fa4aa);border-radius:0 0 16px 16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}

/* ---------- Principes ---------- */
.principes{display:grid;gap:0 48px;margin-top:clamp(8px, 2vw, 24px);border-top:1.5px solid var(--nuit)}
.principe{padding-block:20px;border-bottom:1px solid var(--roche)}
.principe h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.principe p{margin-top:6px;color:var(--gris);font-size:16px}
@media (min-width:900px){ .principes{grid-template-columns:repeat(3, 1fr)} .principe{border-bottom:0;padding-block:22px 0} }

/* ---------- Méthode : le sentier ---------- */
.sentier{position:relative;margin-top:clamp(56px, 8vw, 100px)}
.sentier-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trace-fond{fill:none;stroke:var(--roche);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.trace-faite{fill:none;stroke:var(--balise);stroke-width:3;stroke-linecap:round}
.etapes{position:relative;display:grid;gap:clamp(64px, 10vw, 128px)}
.etape{position:relative;min-height:60px;padding-left:calc(var(--x, 0%) + 84px)}
.etape-repere{position:absolute;left:var(--x, 0%);top:-6px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--glacier);box-shadow:inset 0 0 0 2px var(--roche);font-family:var(--mono);font-weight:500;font-size:15px;transition:background .35s, box-shadow .35s}
.etape.atteinte .etape-repere{background:var(--balise);box-shadow:0 0 0 7px var(--glacier)}
.etape-corps{max-width:430px}
.etape-corps .mono{color:var(--gris)}
.etape h3{margin-top:6px;font-size:clamp(28px, 3.2vw, 44px);font-weight:800;letter-spacing:-.035em;line-height:1}
.etape p:last-child{margin-top:12px;color:var(--gris)}
@media (min-width:900px){ .etape{--x:var(--xd, 0%)} }
@media (max-width:899px){ .etape{padding-left:76px} .etape-repere{width:52px;height:52px;top:-2px} }

/* ---------- Métiers ---------- */
.metiers{margin-top:clamp(40px, 6vw, 72px);border-top:1.5px solid var(--nuit)}
.metier-lien{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;padding-block:26px;border-bottom:1px solid var(--roche);text-decoration:none}
.metier-lien strong{font-size:clamp(25px, 3.6vw, 48px);font-weight:800;letter-spacing:-.038em;line-height:1.02}
.metier-desc{grid-column:1;color:var(--gris)}
.metier-fleche{grid-column:2;grid-row:1 / 3;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--nuit);font-size:20px;transition:background .25s, box-shadow .25s, transform .25s}
.metier-lien:hover .metier-fleche{background:var(--balise);box-shadow:none;transform:translateX(4px)}

/* ---------- Offres ---------- */
.offres{display:grid;margin-top:clamp(40px, 6vw, 72px)}
@media (min-width:880px){ .offres{grid-template-columns:1fr 20px 1fr} }
.offres-ou{position:relative;z-index:2;height:20px}
.offres-ou span{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--balise);color:var(--nuit);font-weight:800;font-size:24px;letter-spacing:-.03em;box-shadow:0 0 0 8px var(--glacier)}
.bloc-blanc .offres-ou span{box-shadow:0 0 0 8px var(--blanc)}
@media (min-width:880px){ .offres-ou{height:auto} }
.offre{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:clamp(26px, 3.4vw, 44px);border-radius:24px;background:var(--blanc)}
.bloc-blanc .offre:not(.offre-nuit){background:var(--glacier)}
.offre-nuit{background:var(--nuit);color:var(--glacier)}
.offre-nuit .topo{position:absolute;right:-55%;top:-40%;width:130%;pointer-events:none}
.offre-nuit .topo path{fill:none;stroke:var(--ligne-nuit);stroke-width:1.4}
.offre-nuit .topo circle{fill:var(--balise)}
.offre > *{position:relative}
.offre-option{color:var(--gris)}
.offre-nuit .offre-option{color:var(--texte-nuit)}
.offre-nom{margin-top:-14px;font-size:clamp(22px, 2.1vw, 27px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
/* Montants : le fort en très grand avec sa note dessous, le léger en ligne, derrière un filet */
.montant-quand{color:var(--gris)}
.offre-nuit .montant-quand,.offre-nuit .offre-option{color:var(--texte-nuit)}
.montant-ligne{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:8px}
.montant-valeur{font-weight:800;font-size:clamp(30px, 3vw, 40px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.montant-valeur small{font-size:.42em;font-weight:700;letter-spacing:-.01em;margin-left:.12em}
.montant-note{font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--gris)}
.offre-nuit .montant-note{color:var(--texte-nuit)}
.montant-couvre{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.montant-couvre li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--blanc);font-size:14.5px;line-height:1.25}
.bloc .offre .montant-couvre li{background:var(--glacier)}
.bloc-blanc .offre .montant-couvre li{background:var(--blanc)}
.montant-couvre li::before{content:"";width:11px;height:8px;background:var(--gris);clip-path:polygon(0 100%, 36% 22%, 55% 58%, 70% 35%, 100% 100%)}
.montant + .montant{padding-top:20px;border-top:1px solid var(--roche)}
.offre-nuit .montant + .montant{border-color:var(--ligne-nuit)}
.montant-fort .montant-ligne{flex-direction:column;align-items:flex-start;gap:10px;margin-top:10px}
.montant-fort .montant-valeur{font-size:clamp(66px, 8vw, 112px);line-height:.84;letter-spacing:-.06em}
.montant-fort .montant-valeur small{font-size:.28em;margin-left:.1em}
.montant-fort .montant-note{font-size:19px;color:inherit}
.offre-nuit .montant-fort .montant-note{color:var(--glacier)}
.offre-pour{margin-top:auto;font-size:16px;color:var(--gris)}
.offre-nuit .offre-pour{color:var(--texte-nuit)}
/* Ordinateur : sous-grille, pour que chaque ligne reste en face de sa jumelle malgré les tailles inversées */
@media (min-width:880px){
  .offres{grid-template-rows:repeat(5, auto)}
  .offre{grid-row:1 / span 5;display:grid;grid-template-rows:subgrid;row-gap:22px;align-content:start}
  .offre:first-child{grid-column:1}
  .offre-nuit{grid-column:3}
  .offres-ou{grid-column:2;grid-row:1 / span 5}
  .montant{align-self:end}
  .montant + .montant{align-self:start}
}
.inclus{margin-top:16px;padding:clamp(24px, 3vw, 40px);border-radius:24px;background:var(--blanc)}
.bloc-blanc .inclus{background:var(--glacier)}
.inclus-titre{font-size:clamp(22px, 2.2vw, 28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.inclus-groupes{display:grid;gap:22px 48px;margin-top:22px}
@media (min-width:640px){ .inclus-groupes{grid-template-columns:1fr 1fr} }
.inclus .offres-note{margin-top:22px}
.offre-groupe{margin-bottom:10px;color:var(--gris)}
.offre-liste{display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--roche)}
.offre-nuit .offre-liste{border-color:var(--ligne-nuit)}
.offre-liste li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:16px;line-height:1.4}
.offre-liste li::before{content:"";width:12px;height:9px;margin-top:6px;background:var(--gris);clip-path:polygon(0 100%, 36% 22%, 55% 58%, 70% 35%, 100% 100%)}
.offre-nuit .offre-liste li::before{background:var(--balise)}
.offres-note{margin-top:14px;color:var(--gris)}
.devis{display:grid;gap:20px 48px;margin-top:16px;padding:clamp(24px, 3vw, 40px);border-radius:24px;box-shadow:inset 0 0 0 1.5px var(--roche)}
@media (min-width:880px){ .devis{grid-template-columns:.8fr 1.2fr;align-items:start} }
.devis h3{font-size:clamp(22px, 2.2vw, 28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.devis p{margin-top:10px;color:var(--gris)}
.devis-liste{display:flex;flex-wrap:wrap;gap:8px}
.devis-liste li{padding:9px 15px;border-radius:999px;background:var(--blanc);font-size:15px;line-height:1.3}
.bloc-blanc .devis-liste li{background:var(--glacier)}
.suite-lien{margin-top:36px}

/* ---------- FAQ ---------- */
.faq-grille{display:grid;gap:40px 72px}
@media (min-width:960px){ .faq-grille{grid-template-columns:.8fr 1.2fr;align-items:start} .faq-grille > div:first-child{position:sticky;top:120px} }
.faq{border-top:1.5px solid var(--nuit)}
.faq details{border-bottom:1px solid var(--roche)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 34px;align-items:center;gap:18px;padding-block:22px;font-weight:700;font-size:clamp(18px, 1.7vw, 21px);line-height:1.3;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--nuit);background:linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;transition:transform .25s, background-color .25s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--balise);box-shadow:none}
.faq-reponse{padding-bottom:24px;color:var(--gris);max-width:42em}
.faq-reponse a{color:var(--nuit)}

/* ---------- Sommet : contact ---------- */
.sommet{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);color:var(--glacier);padding-block:clamp(96px, 13vw, 170px)}
.sommet .topo{position:absolute;right:-45%;bottom:-18%;width:140%;max-width:1240px;z-index:-1;pointer-events:none}
.sommet .topo path{fill:none;stroke:var(--ligne-nuit);stroke-width:1.2}
.sommet .topo circle{fill:var(--balise)}
@media (min-width:960px){ .sommet .topo{right:-8%;bottom:-32%;width:76%} }
.sommet .surtitre{color:var(--texte-nuit)}
.sommet-titre{font-weight:800;font-size:clamp(42px, 8.2vw, 116px);line-height:.93;letter-spacing:-.05em;max-width:12ch;text-wrap:balance}
.sommet-titre em{font-style:normal;color:var(--balise)}
.sommet-texte{margin-top:26px;max-width:32em;font-size:clamp(17px, 1.5vw, 20px);color:var(--texte-nuit)}
.contact{margin-top:52px;max-width:780px;border-top:1px solid var(--ligne-nuit)}
.contact > div{display:grid;gap:4px 24px;padding-block:18px;border-bottom:1px solid var(--ligne-nuit)}
@media (min-width:640px){ .contact > div{grid-template-columns:150px 1fr;align-items:baseline} }
.contact dt{color:var(--texte-nuit)}
.contact dd{font-size:clamp(18px, 1.8vw, 22px);font-weight:600;letter-spacing:-.01em}
.contact dd a{text-decoration-color:var(--balise);text-underline-offset:5px}

/* ---------- Pied de page ---------- */
.pied{background:var(--pied);color:var(--pied-texte);padding-block:60px 32px;font-size:15px}
.pied-grille{display:grid;gap:36px}
@media (min-width:880px){ .pied-grille{grid-template-columns:1.5fr 1fr 1.2fr 1fr} }
.pied .marque{color:#fff}
.pied-desc{margin-top:16px;max-width:30em}
.pied h2{margin-bottom:14px;color:#6F7C88}
.pied ul{display:grid;gap:8px}
.pied a{text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:52px;padding-top:20px;border-top:1px solid var(--ligne-nuit);font-size:13px;color:#6F7C88}

/* ---------- Pages intérieures ---------- */
.intro{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(132px, 16vw, 196px) clamp(56px, 7vw, 92px)}
.intro .topo{position:absolute;right:-48%;top:-6%;width:130%;max-width:1060px;z-index:-1;pointer-events:none}
.intro .topo path{fill:none;stroke:var(--roche);stroke-width:1.2}
.intro .topo circle{fill:var(--balise)}
@media (min-width:960px){ .intro .topo{right:-10%;top:-34%;width:60%} }
.fil{margin-bottom:30px;color:var(--gris)}
.fil ol{display:flex;flex-wrap:wrap;gap:4px 10px}
.fil li + li::before{content:"/";margin-right:10px;color:var(--roche)}
.fil a{text-decoration:none}
.fil a:hover{color:var(--nuit);text-decoration:underline}
.intro h1{font-weight:inherit}
.intro-sujet{display:block;max-width:40em;margin-bottom:20px;color:var(--gris)}
.intro-titre{display:block;font-weight:800;font-size:clamp(42px, 7.4vw, 108px);line-height:.93;letter-spacing:-.05em;max-width:14ch;text-wrap:balance}
.intro-titre .point{color:var(--balise)}

/* ---------- Réalisations ---------- */
.specimen{display:flex;flex-wrap:wrap;align-items:baseline;gap:.18em .6em;margin-top:44px;font-size:clamp(28px, 4.2vw, 58px);line-height:1.12}
.specimen li{display:inline-flex;align-items:baseline;gap:.6em}
.specimen li + li::before{content:"";width:.18em;height:.18em;border-radius:50%;background:var(--balise);transform:translateY(-.2em)}
.specimen a{text-decoration:none;text-underline-offset:.12em;text-decoration-thickness:3px;text-decoration-color:var(--balise)}
.specimen a:hover{text-decoration-line:underline}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.filtres button{min-height:42px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--roche);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.filtres button:hover{box-shadow:inset 0 0 0 1.5px var(--nuit)}
.filtres button[aria-pressed="true"]{background:var(--nuit);color:#fff;box-shadow:none}
.apercu{position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s;box-shadow:0 24px 50px -20px rgba(0,0,0,.5)}
.apercu.visible{opacity:1}
.apercu img{width:100%;height:100%;object-fit:cover;object-position:top}
.projet{background:var(--bg);color:var(--ink);padding-block:clamp(60px, 8vw, 112px);scroll-margin-top:0}
.projet-grille{display:grid;gap:40px}
@media (min-width:980px){ .projet-grille{grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);align-items:center;gap:72px} }
.projet-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.projet-type{padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor}
.projet-nom{margin-top:16px;font-size:clamp(42px, 6.4vw, 92px);line-height:1;font-weight:400;letter-spacing:-.01em}
.projet-concept{margin-top:18px;max-width:32em;font-size:clamp(17px, 1.5vw, 20px);line-height:1.45;opacity:.88}
.projet-signature{margin-top:26px;padding-top:18px;border-top:1px solid color-mix(in srgb, currentColor 22%, transparent)}
.projet-signature .mono{opacity:.72}
.projet-signature p:last-child{margin-top:6px;font-size:17px;font-weight:500;line-height:1.4}
.palette{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
.palette i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent)}
.palette .mono{margin-left:6px;opacity:.78}
.projet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}
.voir{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none;white-space:nowrap}
.voir:hover{background:var(--acc);color:var(--acc-ink)}
.projet-page{font-size:15px;text-underline-offset:4px}
.scene{position:relative;aspect-ratio:1.32}
.scene .pc{position:absolute;left:0;top:4%;width:84%}
.scene .tel{position:absolute;right:0;bottom:0;height:80%;width:auto}

/* ---------- Pages métier ---------- */
.besoins{display:grid;gap:0 56px;margin-top:clamp(36px, 5vw, 64px);border-top:1.5px solid var(--nuit)}
@media (min-width:860px){ .besoins{grid-template-columns:1fr 1fr} }
.besoin{padding-block:24px;border-bottom:1px solid var(--roche)}
.besoin h3{display:flex;gap:12px;align-items:baseline;font-size:clamp(21px, 2vw, 25px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.besoin h3::before{content:"";flex:none;width:14px;height:10px;background:var(--balise);clip-path:polygon(0 100%, 36% 22%, 55% 58%, 70% 35%, 100% 100%)}
.besoin p{margin-top:8px;padding-left:26px;color:var(--gris)}
.maquettes{display:grid;gap:18px;margin-top:clamp(36px, 5vw, 60px)}
@media (min-width:700px){ .maquettes{grid-template-columns:repeat(2, 1fr)} }
@media (min-width:1040px){ .maquettes-3{grid-template-columns:repeat(3, 1fr)} }
.maquette{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--blanc)}
.bloc-blanc .maquette{background:var(--glacier)}
.maquette img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;object-position:top}
.maquette-corps{display:grid;gap:4px;padding:20px 22px 24px}
.maquette-corps h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.maquette-corps .mono{color:var(--gris)}
.maquette-corps p:not(.mono){margin-top:6px;font-size:15.5px;color:var(--gris)}
.maquette-liens{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-weight:600;font-size:15px}
.maquette-liens a{text-underline-offset:4px;text-decoration-color:var(--balise)}
.note-fictif{margin-top:18px;color:var(--gris)}
.autres{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.autres a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--roche);text-decoration:none;font-weight:600}
.autres a:hover{box-shadow:inset 0 0 0 1.5px var(--nuit)}

/* ---------- Tarifs ---------- */
.tableau{margin-top:clamp(36px, 5vw, 60px);overflow-x:auto;border-radius:20px;background:var(--glacier)}
.tableau table{width:100%;min-width:600px;border-collapse:collapse;font-size:16px}
.tableau th,.tableau td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--roche);vertical-align:top}
.tableau tbody tr:last-child > *{border-bottom:0}
.tableau thead th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.tableau tbody th{font-weight:600}
.oui::before{content:"";display:inline-block;width:12px;height:9px;margin-right:8px;background:var(--balise);clip-path:polygon(0 100%, 36% 22%, 55% 58%, 70% 35%, 100% 100%)}
.extras{display:grid;gap:0 48px;margin-top:clamp(36px, 5vw, 60px);border-top:1.5px solid var(--nuit)}
@media (min-width:760px){ .extras{grid-template-columns:1fr 1fr} }
.extra{padding-block:22px;border-bottom:1px solid var(--roche)}
.extra h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.extra p{margin-top:6px;color:var(--gris);font-size:16px}

/* ---------- Texte courant (mentions légales) ---------- */
.texte{max-width:46em}
.texte h2{margin-top:44px;font-size:26px;font-weight:800;letter-spacing:-.025em}
.texte p,.texte ul{margin-top:12px;color:var(--gris)}
.texte li{margin-top:6px}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation:none!important} }