/* =========================================================
   THE FORGE STUDIO — shared stylesheet
   Trade-sign identity (green enamel, gold leaf, paper)
   on a studio-grade layout. One file for every page.
   ========================================================= */

:root{
  /* ── Forge palette ── */
  --vert:#0E2A22;          /* enseigne — primary dark surface */
  --vert-clair:#1B4034;    /* hover on dark */
  --papier:#E7E5DC;        /* light canvas */
  --papier-fonce:#D6D3C7;  /* alternating light band */
  --or:#C9A227;            /* gold accent */
  --or-clair:#E3C766;      /* gold hover */
  --encre:#12201B;         /* body text */
  --gris:#5C6862;          /* secondary text */
  --blanc:#FBFAF6;         /* card surface on paper */

  /* ── Type ── */
  --titre:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --texte:'Karla',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-caption:11px;
  --t-body:16px;
  --t-body-lg:18px;
  --t-sub:20px;
  --t-h3:24px;
  --t-h2:32px;
  --t-h2-lg:40px;
  --t-display:56px;
  --t-display-xl:80px;

  /* ── Spacing / layout ── */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s40:40px; --s48:48px; --s64:64px; --s80:80px; --s96:96px;
  --max:1200px;
  --gap-section:88px;

  /* Near-square corners — enamel plaques, not app chrome */
  --r:3px;
  --r-sm:2px;

  --ombre:0 1px 2px rgba(18,32,27,.06),0 8px 24px -12px rgba(18,32,27,.22);
  --ombre-forte:0 2px 4px rgba(18,32,27,.08),0 18px 44px -18px rgba(18,32,27,.4);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-doux:cubic-bezier(.4,0,.2,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--titre);font-weight:600;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px}

/* ── Utility: grain + gold rule ────────────────────────── */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:overlay;
}
.filet{height:1px;background:var(--or);opacity:.55}

/* ── Scroll progress ───────────────────────────────────── */
.progres{position:fixed;inset:0 0 auto 0;height:2px;z-index:130;pointer-events:none}
.progres__barre{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--or)}

/* ── Custom cursor ─────────────────────────────────────── */
.curseur{position:fixed;top:0;left:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s}
.curseur.actif{opacity:1}
.curseur__point,.curseur__anneau{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)}
.curseur__point{width:6px;height:6px;background:var(--or)}
.curseur__anneau{
  width:30px;height:30px;border:1px solid rgba(201,162,39,.6);display:grid;place-items:center;
  transition:width .3s var(--ease),height .3s var(--ease),background-color .3s,border-color .3s;
}
.curseur__txt{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vert);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease);
}
.curseur.survol .curseur__anneau{width:50px;height:50px;background:rgba(201,162,39,.16);border-color:var(--or)}
.curseur.survol .curseur__point{opacity:0}
.curseur.voir .curseur__anneau{width:74px;height:74px;background:var(--or);border-color:var(--or)}
.curseur.voir .curseur__txt{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  html.curseur-ok body,html.curseur-ok a,html.curseur-ok button{cursor:none}
}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:var(--texte);font-size:15px;font-weight:700;line-height:1;
  cursor:pointer;overflow:hidden;white-space:nowrap;
  transition:background-color .3s var(--ease-doux),color .3s,border-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn--or{background:var(--or);color:var(--vert)}
.btn--or:hover{background:var(--or-clair);box-shadow:0 10px 26px -12px rgba(201,162,39,.9)}
.btn--vide{background:transparent;color:currentColor;border-color:currentColor}
.btn--vide:hover{background:rgba(201,162,39,.14);border-color:var(--or);color:var(--or)}
.sur-vert .btn--vide{color:var(--papier)}
.sur-vert .btn--vide:hover{color:var(--or)}
.btn--vert{background:var(--vert);color:var(--papier)}
.btn--vert:hover{background:var(--vert-clair);box-shadow:var(--ombre-forte)}
.btn--plein{width:100%}
.btn:active{transform:translateY(1px)}
/* gold sweep */
.btn--or::before,.btn--vert::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn--or:hover::before,.btn--vert:hover::before{transform:translateX(120%)}
.fleche{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .fleche,a:hover>.fleche{transform:translateX(4px)}

/* ── Top bar ───────────────────────────────────────────── */
.barre{background:var(--vert);color:rgba(231,229,220,.72);font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.barre__in{max-width:var(--max);margin-inline:auto;padding:9px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.barre a{transition:color .25s}
.barre a:hover{color:var(--or)}
.barre__droite{display:flex;align-items:center;gap:18px}

/* ── Navigation ────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(231,229,220,.86);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .35s,background-color .35s}
.nav.colle{border-bottom-color:rgba(201,162,39,.5);background:rgba(231,229,220,.96)}
.nav__in{max-width:var(--max);margin-inline:auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:32px}

.marque{display:inline-flex;align-items:center;gap:11px}
.marque__sceau{
  width:34px;height:34px;flex:none;border-radius:var(--r-sm);background:var(--vert);
  display:grid;place-items:center;border:1px solid var(--or);
  transition:transform .55s var(--ease),background-color .35s;
}
.marque:hover .marque__sceau{transform:rotate(-8deg) scale(1.05);background:var(--vert-clair)}
.marque__sceau span{font-family:var(--titre);font-weight:800;font-size:17px;color:var(--or);line-height:1}
.marque__nom{font-family:var(--titre);font-weight:800;font-size:20px;letter-spacing:.06em;text-transform:uppercase}

.nav__liens{display:flex;align-items:center;gap:26px;margin-right:auto}
.nav__liens a{position:relative;font-size:15px;font-weight:500;padding:7px 0;transition:color .25s}
.nav__liens a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--or);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.nav__liens a:hover{color:var(--vert)}
.nav__liens a:hover::after,.nav__liens a[aria-current="page"]::after{transform:scaleX(1)}
.nav__liens a[aria-current="page"]{font-weight:700}

.nav__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.burger{display:none;width:40px;height:40px;padding:0;background:transparent;border:1px solid rgba(18,32,27,.25);border-radius:var(--r-sm);cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;top:50%;height:1.6px;background:var(--encre);transition:transform .35s var(--ease)}
.burger span:first-child{transform:translateY(-4px)}
.burger span:last-child{transform:translateY(4px)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(0) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(0) rotate(-45deg)}
.nav__mobile{display:none;flex-direction:column;padding:8px 24px 24px;border-top:1px solid rgba(201,162,39,.4);background:var(--papier)}
.nav__mobile a{padding:14px 0;font-family:var(--titre);font-size:var(--t-sub);font-weight:600;border-bottom:1px solid rgba(18,32,27,.1)}
.nav__mobile .btn{margin-top:18px;border-bottom:0}

/* ── Motion primitives ─────────────────────────────────── */
.js [data-app]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js [data-app].vu{opacity:1;transform:none}
.js [data-mots]{visibility:hidden}
.js [data-mots].pret{visibility:visible}
.mot{display:inline-block;overflow:hidden;vertical-align:top}
.mot>i{
  display:inline-block;font-style:normal;transform:translateY(106%) rotate(3deg);opacity:0;
  transition:transform 1s var(--ease),opacity .7s var(--ease);transition-delay:var(--d,0ms);
}
[data-mots].vu .mot>i{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-app],.mot>i{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-mots]{visibility:visible}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── Section rhythm ────────────────────────────────────── */
.bloc{padding-block:var(--gap-section);position:relative}
.bloc--papier{background:var(--papier)}
.bloc--papier-fonce{background:var(--papier-fonce)}
.bloc--vert{background:var(--vert);color:var(--papier)}
.bloc--vert h1,.bloc--vert h2,.bloc--vert h3{color:var(--papier)}
.bloc--serre{padding-block:var(--s64)}

.etiquette{font-family:var(--mono);font-size:var(--t-caption);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:var(--s16)}
.bloc--papier .etiquette,.bloc--papier-fonce .etiquette{color:var(--gris)}
.tete{max-width:760px;margin-bottom:var(--s48)}
/* the gold rule from the shop sign, reused as a section marker */
.tete--filet{position:relative;padding-bottom:var(--s24)}
.tete--filet::after{
  content:"";position:absolute;left:0;bottom:0;width:120px;height:1px;
  background:var(--or);opacity:.75;
}
.h-xl{font-size:clamp(34px,5.2vw,var(--t-display));letter-spacing:-.03em}
.h-lg{font-size:clamp(28px,4.2vw,var(--t-h2-lg));letter-spacing:-.025em}
.chapo{font-size:var(--t-body-lg);line-height:1.6;color:var(--gris);max-width:62ch;margin-top:var(--s16)}
.bloc--vert .chapo{color:rgba(231,229,220,.72)}

/* ── Enseigne (home hero) ──────────────────────────────── */
.enseigne{background:var(--vert);color:var(--papier);padding-block:var(--s64) var(--s96);position:relative;overflow:hidden}
.enseigne__lueur{
  position:absolute;left:50%;top:-40%;width:900px;height:900px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 62%);
  animation:lueur 10s var(--ease-doux) infinite alternate;
}
@keyframes lueur{from{transform:translateX(-50%) scale(.9);opacity:.7}to{transform:translateX(-46%) scale(1.1);opacity:1}}
.enseigne__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}

.fascia{
  border:1px solid rgba(201,162,39,.55);border-radius:var(--r);
  padding:var(--s24) var(--s40);margin-bottom:var(--s40);
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--s12);
  background:rgba(0,0,0,.14);
  transition:border-color .4s,transform .6s var(--ease);
}
.fascia:hover{border-color:var(--or);transform:translateY(-2px)}
.fascia__nom{font-family:var(--titre);font-weight:800;font-size:clamp(30px,5vw,44px);letter-spacing:.2em;text-transform:uppercase;color:var(--or);line-height:1}
.fascia .filet{width:100%;min-width:200px}
.fascia__sous{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(231,229,220,.75)}

.enseigne h1{font-size:clamp(36px,7vw,var(--t-display-xl));letter-spacing:-.035em;line-height:1.02;max-width:16ch}
.enseigne h1 em{font-style:normal;color:var(--or)}
.enseigne__chapo{margin-top:var(--s24);font-size:var(--t-sub);line-height:1.55;color:rgba(231,229,220,.78);max-width:60ch}
.enseigne__btns{margin-top:var(--s32);display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.rassure{margin-top:var(--s32);display:flex;gap:var(--s24);flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.14em;text-transform:uppercase;color:rgba(231,229,220,.6)}
.rassure span{display:inline-flex;align-items:center;gap:8px}
.rassure span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or)}

/* ── Photo→film device ─────────────────────────────────── */
.scene-wrap{position:relative;margin-top:var(--s64);perspective:1500px}
.cadre{
  border:1px solid rgba(201,162,39,.4);border-radius:var(--r);overflow:hidden;
  background:var(--vert-clair);box-shadow:var(--ombre-forte);transform-style:preserve-3d;
}
.cadre__barre{
  height:34px;background:rgba(0,0,0,.28);border-bottom:1px solid rgba(201,162,39,.3);
  display:flex;align-items:center;gap:7px;padding:0 14px;
}
.pastille{width:8px;height:8px;border-radius:50%;background:rgba(231,229,220,.3)}
.pastille--or{background:var(--or)}
.cadre__url{margin-inline:auto;font-family:var(--mono);font-size:11px;color:rgba(231,229,220,.6);letter-spacing:.05em}
.cadre__corps{background:var(--vert);padding:0}

/* film strip: photos turning into frames */
.bande{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(201,162,39,.25);padding:2px}
.bande__vue{position:relative;overflow:hidden;background:var(--vert-clair)}
.bande__vue svg{width:100%;height:auto;transition:transform 1.1s var(--ease)}
.bande__vue::after{
  content:"";position:absolute;inset:0;background:rgba(14,42,34,.55);opacity:0;transition:opacity .45s;
}
.cadre:hover .bande__vue svg{transform:scale(1.06)}
.bande__vue:hover::after{opacity:1}
.bande__num{
  position:absolute;left:8px;top:8px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--or);background:rgba(14,42,34,.7);padding:2px 6px;border-radius:var(--r-sm);
}
.bande__pied{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(0,0,0,.24);font-family:var(--mono);font-size:11px;color:rgba(231,229,220,.6)}
.piste{flex:1;height:3px;background:rgba(231,229,220,.16);overflow:hidden;border-radius:2px}
.piste__fill{display:block;height:100%;width:0;background:var(--or)}
.cadre.joue .piste__fill{animation:defile 9s linear infinite}
@keyframes defile{from{width:0}to{width:100%}}
.lecture{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;border:1px solid rgba(201,162,39,.7);cursor:pointer;
  background:rgba(14,42,34,.55);backdrop-filter:blur(4px);color:var(--or);display:grid;place-items:center;z-index:3;
  transition:background-color .35s,transform .45s var(--ease),color .3s;
}
.lecture::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(201,162,39,.55);animation:halo 2.8s var(--ease) infinite}
@keyframes halo{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.lecture:hover{background:var(--or);color:var(--vert);transform:translate(-50%,-50%) scale(1.07)}

.plaque{
  position:absolute;display:flex;flex-direction:column;gap:2px;padding:13px 17px;z-index:4;
  background:var(--papier);border:1px solid var(--or);border-radius:var(--r-sm);box-shadow:var(--ombre-forte);
}
.plaque__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.plaque__v{font-family:var(--titre);font-weight:800;font-size:var(--t-h3);line-height:1.1;color:var(--vert);display:flex;align-items:baseline;gap:3px}
.plaque__v i{font-style:normal;font-size:12px;font-family:var(--mono);color:var(--gris)}
.plaque--a{left:-10px;top:56px}
.plaque--b{right:-10px;bottom:48px}

/* ── Marquee ───────────────────────────────────────────── */
.defilant{padding-block:var(--s40);border-block:1px solid rgba(18,32,27,.12);background:var(--papier-fonce);overflow:hidden}
.defilant__titre{text-align:center;font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:var(--s24)}
.piste-defile{display:flex;gap:44px;width:max-content;animation:glisse 32s linear infinite}
.piste-defile:hover{animation-play-state:paused}
.piste-defile__lot{display:flex;gap:44px;align-items:center}
.piste-defile__lot span{
  font-family:var(--titre);font-weight:600;font-size:var(--t-h3);letter-spacing:-.02em;
  color:rgba(18,32,27,.35);white-space:nowrap;transition:color .3s,transform .4s var(--ease);
}
.piste-defile__lot span:hover{color:var(--vert);transform:translateY(-3px)}
@keyframes glisse{to{transform:translateX(calc(-50% - 22px))}}

/* ── Cards ─────────────────────────────────────────────── */
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24)}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s24)}
.carte{
  position:relative;padding:var(--s32) var(--s24);border:1px solid rgba(18,32,27,.16);border-radius:var(--r);
  background:var(--blanc);display:flex;flex-direction:column;gap:14px;overflow:hidden;
  transition:border-color .35s,box-shadow .5s var(--ease),transform .5s var(--ease);
}
.carte::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.16),transparent 46%);
}
.carte::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--or);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);
}
.carte:hover{border-color:rgba(201,162,39,.7);box-shadow:var(--ombre)}
.carte:hover::before{opacity:1}
.carte:hover::after{transform:scaleX(1)}
.bloc--vert .carte{background:var(--vert-clair);border-color:rgba(201,162,39,.3);color:var(--papier)}
.bloc--vert .carte:hover{border-color:var(--or)}
.carte h3{font-size:var(--t-sub)}
.carte p{font-size:15px;color:var(--gris);line-height:1.65}
.bloc--vert .carte p{color:rgba(231,229,220,.72)}
.carte__num{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.16em;color:var(--or)}
.carte__icone{
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:rgba(201,162,39,.16);color:var(--vert);border:1px solid rgba(201,162,39,.4);
  transition:background-color .35s,color .35s,transform .5s var(--ease);
}
.carte:hover .carte__icone{background:var(--or);color:var(--vert);transform:rotate(-7deg) scale(1.06)}
.bloc--vert .carte__icone{color:var(--or)}
.bloc--vert .carte:hover .carte__icone{color:var(--vert)}

/* dark card on a light band — lets a light section carry the enseigne
   colours instead of reading as a pale gap between two green sections */
.carte--sombre{background:var(--vert);border-color:var(--vert);color:var(--papier)}
.carte--sombre h3{color:var(--papier)}
.carte--sombre p{color:rgba(231,229,220,.72)}
.carte--sombre .coches li{color:rgba(231,229,220,.88)}
.carte--sombre::before{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.22),transparent 46%)}
.carte--sombre:hover{border-color:var(--or);box-shadow:var(--ombre-forte)}
.carte--sombre .carte__icone{background:rgba(201,162,39,.16);border-color:rgba(201,162,39,.45);color:var(--or)}
.carte--sombre:hover .carte__icone{background:var(--or);color:var(--vert)}
.carte--sombre .carte__lien{border-top-color:rgba(201,162,39,.3);color:var(--or)}

/* bigger, squarer badge for the two lead cards */
.carte__icone--large{width:52px;height:52px;border-radius:var(--r)}
.carte__icone--large svg{width:24px;height:24px}

.coches{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.coches li{position:relative;padding-left:24px;font-size:15px}
.coches li::before{
  content:"";position:absolute;left:0;top:8px;width:12px;height:7px;
  border-left:1.8px solid var(--or);border-bottom:1.8px solid var(--or);transform:rotate(-45deg);
}
.carte__lien{margin-top:auto;padding-top:15px;border-top:1px solid rgba(18,32,27,.12);font-weight:700;font-size:15px;color:var(--vert);display:inline-flex;align-items:center;gap:7px}
.bloc--vert .carte__lien{border-top-color:rgba(201,162,39,.3);color:var(--or)}
.carte:hover .carte__lien .fleche{transform:translateX(5px)}

/* ── Split ─────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s48);align-items:center}
.duo--inv .duo__texte{order:2}
.duo--inv .duo__visuel{order:1}
.duo__visuel{position:relative}
.duo__texte .btn{margin-top:var(--s32)}

.liste-fleche li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:var(--s16) 0;border-bottom:1px solid rgba(18,32,27,.14);
  font-size:var(--t-body-lg);cursor:pointer;transition:padding-left .35s var(--ease),color .3s;
}
.bloc--vert .liste-fleche li{border-bottom-color:rgba(201,162,39,.25)}
.liste-fleche li .fleche{color:var(--gris);transition:transform .35s var(--ease),color .3s}
.bloc--vert .liste-fleche li .fleche{color:rgba(231,229,220,.5)}
.liste-fleche li:hover{padding-left:10px}
.liste-fleche li:hover .fleche{transform:translateX(5px);color:var(--or)}

/* ── Stats ─────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s32)}
.stat b{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(34px,4.4vw,var(--t-display));line-height:1;letter-spacing:-.03em;color:var(--or)}
.stat span{display:block;margin-top:12px;font-size:15px;color:var(--gris);line-height:1.5;max-width:26ch}
.bloc--vert .stat span{color:rgba(231,229,220,.7)}

/* ── Steps ─────────────────────────────────────────────── */
.etapes{position:relative;padding-left:72px}
.etapes__ligne{position:absolute;left:25px;top:10px;bottom:10px;width:1px;background:rgba(201,162,39,.3)}
.etapes__fill{display:block;width:100%;height:0;background:var(--or);transition:height .25s linear}
.etape{position:relative;display:flex;gap:24px;padding-block:var(--s32);opacity:.42;transition:opacity .5s var(--ease)}
.etape.active{opacity:1}
.etape__num{
  position:absolute;left:-72px;top:var(--s32);width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;background:var(--papier);border:1px solid rgba(201,162,39,.5);
  font-family:var(--mono);font-size:13px;color:var(--gris);
  transition:background-color .4s,border-color .4s,color .4s,transform .5s var(--ease);
}
.bloc--vert .etape__num{background:var(--vert)}
.etape.active .etape__num{background:var(--or);border-color:var(--or);color:var(--vert);transform:scale(1.06)}
.etape h3{font-size:var(--t-h3)}
.etape p{margin-top:10px;color:var(--gris);font-size:var(--t-body-lg);max-width:62ch}
.bloc--vert .etape p{color:rgba(231,229,220,.72)}
.etape__meta{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);border:1px solid rgba(201,162,39,.45);border-radius:var(--r-sm);padding:4px 9px}

/* ── Currency switch + pricing ─────────────────────────── */

.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24);align-items:start}
/* four tiers side by side — tighter padding so the columns stay readable */
.formules--4{grid-template-columns:repeat(4,1fr);gap:var(--s16)}
.formules--4 .formule{padding:var(--s32) var(--s16) var(--s24)}
.formules--4 .formule__drapeau{left:var(--s16)}
.formules--4 .formule__pour{min-height:60px;font-size:13px}
.formules--4 .coches li{font-size:14px;padding-left:22px}
.formule{
  position:relative;padding:var(--s40) var(--s24) var(--s32);border:1px solid rgba(18,32,27,.16);
  border-radius:var(--r);background:var(--blanc);display:flex;flex-direction:column;gap:14px;
  transition:border-color .35s,box-shadow .5s var(--ease),transform .5s var(--ease);
}
.formule:hover{border-color:rgba(201,162,39,.7);box-shadow:var(--ombre)}
.formule--phare{background:var(--vert);color:var(--papier);border-color:var(--or)}
.formule--phare h3{color:var(--papier)}
.formule--phare .formule__pour,.formule--phare .coches li{color:rgba(231,229,220,.78)}
.formule--phare:hover{box-shadow:var(--ombre-forte)}
.formule__drapeau{
  position:absolute;top:-11px;left:var(--s24);background:var(--or);color:var(--vert);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-sm);
}
.formule h3{font-size:var(--t-h3)}
.formule__pour{font-size:14px;color:var(--gris);min-height:42px}
.formule__prix{font-family:var(--titre);font-weight:800;font-size:var(--t-h2-lg);line-height:1;letter-spacing:-.03em;display:flex;align-items:baseline;gap:6px}
.formule--phare .formule__prix{color:var(--or)}
.formule__prix .des{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.formule--phare .formule__prix .des{color:rgba(231,229,220,.6)}
.formule__prix .par{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--gris)}
.formule .btn{margin-top:var(--s16)}
.formule__stripe{display:block;text-align:center;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gris)}
.formule__stripe:hover{color:var(--vert)}
.formule--phare .formule__stripe{color:rgba(231,229,220,.6)}
.formule--phare .formule__stripe:hover{color:var(--or)}
.formule--phare .btn--vide{color:var(--papier);border-color:rgba(231,229,220,.4)}

.options{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);margin-top:var(--s32)}
.option{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:var(--s16) var(--s24);border:1px solid rgba(18,32,27,.16);border-radius:var(--r);background:var(--blanc);
  transition:border-color .3s,transform .4s var(--ease);
}
.option:hover{border-color:var(--or);transform:translateY(-2px)}
.option b{font-family:var(--titre);font-weight:800;font-size:var(--t-sub);color:var(--vert)}
/* on a green band the row must not keep the pale card background, or its
   text inherits the section's light colour and disappears */
.bloc--vert .option{background:rgba(0,0,0,.2);border-color:rgba(201,162,39,.3);color:var(--papier)}
.bloc--vert .option b{color:var(--or)}
.bloc--vert .option:hover{border-color:var(--or)}
.mention{margin-top:var(--s32);font-size:14px;color:var(--gris);max-width:70ch}
.mention strong{color:var(--encre)}

/* ── Work / rail ───────────────────────────────────────── */
.rail-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:var(--s40)}
.rail-btns{display:flex;gap:8px}
.rail-btn{
  width:46px;height:46px;border-radius:var(--r-sm);border:1px solid rgba(18,32,27,.2);background:var(--blanc);
  display:grid;place-items:center;cursor:pointer;
  transition:background-color .3s,border-color .3s,color .3s,transform .35s var(--ease);
}
.rail-btn:hover{background:var(--vert);border-color:var(--vert);color:var(--or);transform:translateY(-2px)}
.rail{display:flex;gap:var(--s24);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px 32px;scrollbar-width:none;max-width:calc(var(--max) + 48px);margin-inline:auto;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.tire{cursor:grabbing;scroll-snap-type:none}
.projet{flex:0 0 clamp(280px,42vw,460px);scroll-snap-align:center;transform-style:preserve-3d}
.projet__media{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid rgba(18,32,27,.16);aspect-ratio:400/260;transition:box-shadow .5s var(--ease),border-color .35s}
.projet:hover .projet__media{box-shadow:var(--ombre);border-color:rgba(201,162,39,.7)}
.projet__media svg{transition:transform 1.1s var(--ease)}
.projet:hover svg{transform:scale(1.06)}
.projet__survol{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-40%) scale(.92);
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  background:var(--or);color:var(--vert);border-radius:var(--r-sm);
  font-weight:700;font-size:15px;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .5s var(--ease);
}
.projet:hover .projet__survol{opacity:1;transform:translate(-50%,-50%) scale(1)}
.projet__meta{padding-top:var(--s16)}
.projet__meta h3{font-size:var(--t-sub)}
.projet__meta p{font-size:14px;color:var(--gris);margin-top:5px}
.jetons{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.jetons i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);border:1px solid rgba(18,32,27,.2);border-radius:var(--r-sm);padding:4px 8px;transition:border-color .3s,color .3s}
.projet:hover .jetons i{border-color:var(--or);color:var(--vert)}

/* Real client vs fictional demo, readable at a glance without a click —
   same honesty the ribbon on each demo site already states up front. */
.projet__badge{
  position:absolute;top:14px;left:14px;z-index:4;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-sm);
}
.projet__badge--reel{background:var(--or);color:var(--vert)}
.projet__badge--demo{background:var(--vert);color:var(--or)}
.projet__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.projet:hover .projet__media img{transform:scale(1.06)}

/* ── Quotes ────────────────────────────────────────────── */
.citation{
  margin:0;padding:var(--s24);border:1px solid rgba(201,162,39,.35);border-radius:var(--r);
  background:var(--vert-clair);display:flex;flex-direction:column;gap:18px;
  transition:border-color .3s,box-shadow .5s var(--ease)}
.citation:hover{border-color:var(--or);box-shadow:var(--ombre-forte)}
.citation blockquote{margin:0;font-family:var(--titre);font-weight:600;font-size:var(--t-sub);line-height:1.35}
.citation blockquote::before{content:"“";display:block;font-family:var(--titre);font-size:44px;line-height:.6;color:var(--or);margin-bottom:12px}
.citation figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:14px}
.citation figcaption b{font-weight:700}
.citation figcaption span{color:rgba(231,229,220,.62);font-family:var(--mono);font-size:11px;letter-spacing:.08em}

/* ── FAQ ───────────────────────────────────────────────── */
.faq__item{border-bottom:1px solid rgba(18,32,27,.14)}
.bloc--vert .faq__item{border-bottom-color:rgba(201,162,39,.25)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:var(--s24) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--titre);font-size:var(--t-sub);font-weight:600;transition:color .3s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover,.faq__item[open] summary{color:var(--or)}
.faq__icone{position:relative;flex:none;width:18px;height:18px}
.faq__icone::before,.faq__icone::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.faq__icone::before{left:0;right:0;top:8px;height:1.6px}
.faq__icone::after{top:0;bottom:0;left:8px;width:1.6px}
.faq__item[open] .faq__icone::after{transform:rotate(90deg);opacity:0}
.faq__corps{overflow:hidden;animation:ouvre .45s var(--ease)}
.faq__corps p{padding-bottom:var(--s24);color:var(--gris);max-width:64ch}
.bloc--vert .faq__corps p{color:rgba(231,229,220,.72)}
@keyframes ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Forms ─────────────────────────────────────────────── */
.formulaire{display:flex;flex-direction:column;gap:var(--s16)}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.champ input,.champ textarea,.champ select{
  padding:14px 16px;border-radius:var(--r-sm);border:1px solid rgba(201,162,39,.35);
  background:rgba(0,0,0,.18);color:var(--papier);
  transition:border-color .3s,background-color .3s,box-shadow .3s;
}
.champ textarea{resize:vertical;min-height:120px}
/* the dropdown list is drawn by the OS — set it explicitly or it can
   render dark text on a dark ground */
.champ select option{background:var(--vert);color:var(--papier)}
.champ select optgroup{background:var(--vert);color:var(--or);font-style:normal}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(231,229,220,.4)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--or);background:rgba(0,0,0,.3);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.formulaire.envoye .champ input,.formulaire.envoye .champ textarea{border-color:var(--or-clair)}
.contact-duo{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s48);align-items:start}
.direct{display:flex;flex-direction:column;gap:var(--s24)}
.direct__item{padding:var(--s24);border:1px solid rgba(201,162,39,.35);border-radius:var(--r);background:rgba(0,0,0,.16);transition:border-color .3s,transform .4s var(--ease)}
.direct__item:hover{border-color:var(--or);transform:translateY(-2px)}
.direct__item b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:8px}
.direct__item a{font-family:var(--titre);font-size:var(--t-sub);font-weight:600}
.direct__item a:hover{color:var(--or)}

/* ── CTA band ──────────────────────────────────────────── */
.appel{position:relative;background:var(--vert);color:var(--papier);padding-block:var(--s96);overflow:hidden;text-align:center}
.appel__in{position:relative;display:flex;flex-direction:column;align-items:center}
.appel h2{font-size:clamp(30px,5vw,var(--t-display));letter-spacing:-.03em;max-width:18ch}
.appel p{margin-top:var(--s24);color:rgba(231,229,220,.72);font-size:var(--t-sub);max-width:56ch}
.appel .btn{margin-top:var(--s32)}

/* ── Footer ────────────────────────────────────────────── */
.pied{background:var(--encre);color:rgba(231,229,220,.62);padding-top:var(--s64)}
.pied__in{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s32);padding-bottom:var(--s48)}
.pied .marque__nom{color:var(--papier)}
.pied__brand p{margin-top:var(--s16);font-size:14px;max-width:36ch;line-height:1.65}
.pied__col h4{color:var(--papier);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s16)}
.pied__col a{display:block;padding:6px 0;font-size:14px;width:fit-content;transition:color .3s,transform .35s var(--ease)}
.pied__col a:hover{color:var(--or);transform:translateX(4px)}
.pied__bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:var(--s24);border-top:1px solid rgba(231,229,220,.12);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.pied__bas a:hover{color:var(--or)}

/* ── Cookie ────────────────────────────────────────────── */
.cookie{
  position:fixed;left:20px;bottom:20px;z-index:110;max-width:380px;
  background:var(--papier);border:1px solid var(--or);border-radius:var(--r);
  padding:var(--s16);box-shadow:var(--ombre-forte);display:flex;flex-direction:column;gap:12px;font-size:13px;
  transform:translateY(24px);opacity:0;transition:transform .6s var(--ease),opacity .5s;
}
.cookie.vu{transform:none;opacity:1}
.cookie__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookie .btn{padding:11px 14px;font-size:14px}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:1200px){
  .formules--4{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  .nav__liens{display:none}
  .burger{display:block}
  .nav__mobile{display:flex}
  .nav__mobile[hidden]{display:none}
  .grille-3,.formules,.formules--4{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:var(--s40)}
  .duo,.contact-duo{grid-template-columns:1fr;gap:var(--s40)}
  .duo--inv .duo__texte{order:1}
  .duo--inv .duo__visuel{order:2}
  .pied__in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--gap-section:56px}
  .barre__in{flex-direction:column;gap:6px;text-align:center;font-size:11px}
  .grille-3,.grille-2,.formules,.formules--4,.stats,.pied__in,.options{grid-template-columns:1fr}
  .bande{grid-template-columns:1fr 1fr}
  .plaque--a{left:-4px;top:-18px}
  .plaque--b{right:-4px;bottom:-18px}
  .scene-wrap{margin-top:var(--s48)}
  .etapes{padding-left:50px}
  .etapes__ligne{left:17px}
  .etape__num{left:-50px;width:36px;height:36px;font-size:11px}
  .rail-tete{flex-direction:column;align-items:flex-start}
  .cookie{left:12px;right:12px;bottom:12px;max-width:none}
  .curseur{display:none}
  /* pull the hero together so the call to action stays above the fold
     on a 375x812 phone */
  .enseigne{padding-block:var(--s32) var(--s64)}
  .fascia{padding:var(--s16) var(--s24);margin-bottom:var(--s24)}
  .fascia__nom{font-size:28px;letter-spacing:.16em}
  .fascia__sous{font-size:10px}
  .enseigne__chapo{margin-top:var(--s16);font-size:17px}
  .enseigne__btns{margin-top:var(--s24)}
  .enseigne__btns .btn{width:100%}
  .rassure{margin-top:var(--s24);gap:var(--s12);flex-direction:column;align-items:center}
}


/* =========================================================
   "Let's start" — one continuous brief: who you are, what
   you need (selectable plan cards), then the details.
   No wizard, so nothing is asked twice.
   ========================================================= */

.brief{display:grid;grid-template-columns:1.32fr .68fr;gap:var(--s48);align-items:start}
/* grid and flex items default to min-width:auto and refuse to shrink below
   their content — without this the fields overflow their column */
.brief>*,.brief .champ{min-width:0}
.champ input,.champ textarea,.champ select{width:100%;max-width:100%}

/* numbered section inside the brief */
.volet{border:0;margin:0 0 var(--s48);padding:0;min-width:0}
.volet:last-of-type{margin-bottom:0}
.volet legend{
  padding:0;display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s8);
  font-family:var(--titre);font-size:var(--t-h3);font-weight:600;color:var(--papier);
}
.volet legend i{
  font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--or);
}
.volet__note{font-size:14px;color:rgba(231,229,220,.6);margin-bottom:var(--s24);max-width:62ch}

.famille{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or);margin:var(--s32) 0 var(--s12);display:flex;align-items:center;gap:12px;
}
.famille::after{content:"";flex:1;height:1px;background:rgba(201,162,39,.25)}
.famille:first-of-type{margin-top:0}

/* selectable cards */
.choix-grille{display:grid;gap:var(--s12)}
.choix-grille--2{grid-template-columns:1fr 1fr}
.choix-grille--3{grid-template-columns:repeat(3,1fr)}
.choix{
  position:relative;display:block;cursor:pointer;
  padding:var(--s16) var(--s16) var(--s16) 46px;
  border:1px solid rgba(201,162,39,.3);border-radius:var(--r);background:rgba(0,0,0,.16);
  transition:border-color .3s,background-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease);
}
.choix:hover{border-color:var(--or);transform:translateY(-2px)}
.choix input{position:absolute;opacity:0;width:0;height:0}
.choix__puce{
  position:absolute;left:16px;top:18px;width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(201,162,39,.6);transition:border-color .3s,background-color .3s;
}
.choix__puce--carre{border-radius:var(--r-sm)}
.choix__puce::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--vert);
  transform:scale(0);transition:transform .3s var(--ease);
}
.choix__puce--carre::after{border-radius:1px}
.choix.est-choisi{border-color:var(--or);background:rgba(201,162,39,.12);box-shadow:0 0 0 1px var(--or)}
.choix.est-choisi .choix__puce{background:var(--or);border-color:var(--or)}
.choix.est-choisi .choix__puce::after{transform:scale(1)}
.choix input:focus-visible ~ .choix__puce{box-shadow:0 0 0 3px rgba(201,162,39,.35)}
.choix__titre{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--titre);font-size:var(--t-body-lg);font-weight:600;color:var(--papier);
}
.choix__prix{font-family:var(--mono);font-size:13px;color:var(--or);white-space:nowrap}
.choix__desc{margin-top:5px;font-size:14px;line-height:1.5;color:rgba(231,229,220,.62)}
.choix__liste{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px}
.choix__liste li{position:relative;padding-left:15px;font-size:13px;color:rgba(231,229,220,.55)}
.choix__liste li::before{
  content:"";position:absolute;left:0;top:7px;width:8px;height:5px;
  border-left:1.4px solid var(--or);border-bottom:1.4px solid var(--or);transform:rotate(-45deg);
}
.choix__fanion{
  position:absolute;top:-9px;right:14px;background:var(--or);color:var(--vert);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-sm);
}

/* the "not sure yet" option, full width and quieter */
.choix--ouvert{background:transparent;border-style:dashed}
.choix--ouvert.est-choisi{background:rgba(201,162,39,.1);border-style:solid}

.erreur-form{
  margin-top:var(--s16);padding:12px 16px;border-radius:var(--r-sm);
  border:1px solid var(--or-clair);background:rgba(227,199,102,.14);
  font-size:14px;color:var(--papier);
}
.erreur-form[hidden]{display:none}
.envoi{margin-top:var(--s32);display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* live summary */
.recap{
  position:sticky;top:96px;padding:var(--s24);
  border:1px solid rgba(201,162,39,.4);border-radius:var(--r);background:rgba(0,0,0,.22);
}
.recap h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:var(--s16)}
.recap__ligne{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(201,162,39,.18);font-size:14px}
.recap__ligne:last-of-type{border-bottom:0}
.recap__ligne b{font-weight:700;color:var(--papier)}
.recap__ligne span{color:rgba(231,229,220,.6)}
.recap__prix{font-family:var(--mono);font-size:13px;color:var(--or);white-space:nowrap}
.recap__total{margin-top:var(--s16);padding-top:var(--s16);border-top:1px solid rgba(201,162,39,.4);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.recap__total span{font-size:13px;color:rgba(231,229,220,.6)}
.recap__total b{font-family:var(--titre);font-size:var(--t-h3);font-weight:800;color:var(--or);line-height:1.1}
.recap__vide{font-size:14px;color:rgba(231,229,220,.5);line-height:1.6}
.recap__mention{margin-top:var(--s16);font-size:12px;line-height:1.5;color:rgba(231,229,220,.45)}

/* confirmation after send.php redirects back */
.confirme{
  padding:var(--s40) var(--s32);border:1px solid var(--or);border-radius:var(--r);
  background:rgba(201,162,39,.1);text-align:center;
}
.confirme[hidden]{display:none}
.confirme h2{font-size:var(--t-h2);color:var(--papier);margin-bottom:var(--s16)}
.confirme p{color:rgba(231,229,220,.72);max-width:52ch;margin-inline:auto}
.confirme .btn{margin-top:var(--s24)}

@media (max-width:1040px){
  .brief{grid-template-columns:1fr}
  .recap{position:static}
  .choix-grille--3{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .choix-grille--2,.choix-grille--3{grid-template-columns:1fr}
  .envoi .btn{width:100%}
  .volet legend{font-size:var(--t-sub)}
}

/* =========================================================
   Legal pages — one readable column, no decoration
   ========================================================= */
.legal{max-width:70ch}
.legal h2{
  font-size:var(--t-h3);margin-top:var(--s48);margin-bottom:var(--s12);
  padding-top:var(--s24);border-top:1px solid rgba(201,162,39,.4);
}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-bottom:var(--s16);line-height:1.7}
.legal p + h2{margin-top:var(--s40)}
.legal ul{margin-bottom:var(--s16)}
.legal .coches li{padding-left:24px;margin-bottom:2px}
.legal a{color:var(--vert);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.legal a:hover{color:var(--or)}
.legal__maj{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin-bottom:var(--s40)!important;
}
.legal__note{
  margin-top:var(--s48);padding:var(--s24);border:1px solid rgba(18,32,27,.16);
  border-left:3px solid var(--or);border-radius:var(--r);background:var(--blanc);
  font-size:15px;color:var(--gris);
}

/* ── Real work showcase (homepage) ─────────────────────────
   Wraps a .cadre in a real <a> to a live client site. Distinct
   from every other mockup on the site: this one is a faithful
   redraw of an actual page, not a generic illustration, and it
   actually goes somewhere when you click it. */
.vitrine{display:block;position:relative}
.vitrine__badge{
  position:absolute;top:-11px;left:20px;z-index:4;background:var(--or);color:var(--vert);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-sm);
}
.vitrine .cadre__corps{overflow:hidden}
.vitrine .cadre__corps svg{transition:transform 1.1s var(--ease)}
.vitrine:hover .cadre__corps svg{transform:scale(1.045)}
.vitrine:hover .cadre{box-shadow:var(--ombre-forte)}
.vitrine__survol{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-40%) scale(.92);
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  background:var(--or);color:var(--vert);border-radius:var(--r-sm);
  font-weight:700;font-size:15px;opacity:0;pointer-events:none;z-index:3;
  transition:opacity .35s,transform .5s var(--ease);
}
.vitrine:hover .vitrine__survol{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ── Examples rail: reserved slots for work not built yet ──
   Same honesty as the "coming soon" pattern used on client
   sites: a dashed frame and a static label, never a fake
   preview dressed up as a real one. */
.projet--bientot .projet__media{
  border-style:dashed;border-color:rgba(18,32,27,.3);background:var(--papier-fonce);
}
.projet--bientot .projet__media svg{opacity:.45}
.projet--bientot:hover .projet__media{box-shadow:none;border-color:var(--or)}
.projet--bientot:hover svg{transform:none}
.projet__reserve{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);background:rgba(251,250,246,.92);padding:8px 16px;border-radius:var(--r-sm);
  border:1px solid rgba(18,32,27,.16);white-space:nowrap;
}