/* ============================================================
   Ce que la landing et la page ateliers ont en commun.
   Extrait de LANDING-alternance.html le 12/09/2026 : les deux pages
   partageaient quarante lignes de roles de bande copiees a la main,
   et la premiere retouche sur l'une aurait fait diverger l'autre.
   Aucune couleur en dur ici non plus, tout vient de dwd-tokens.css.
   ============================================================ */

/* ================================================================
   L'ALTERNANCE, prise sur la carte de visite.
   David a imprime DEUX cartes miroir : A recto sombre verso clair,
   B l'inverse. Donc le mode clair joue la carte A, le mode sombre
   joue la carte B. Les roles s'INVERSENT, ils ne s'ecrasent pas.
   Sans ca, en sombre, les deux bandes tombaient sur deux noirs
   quasi identiques (8,6,3 contre 18,20,25) et le rythme mourait.
   ================================================================ */
:root{
  --c-creme:#F1ECE1;  --c-charbon:#121419;
  --card-creme:#FDFCF8; --card-charbon:#1B1E24;   /* valeurs DESIGN.md, la carte est toujours plus claire */
  --ink-creme:#15130E; --ink-charbon:#F1ECE1;
  --amb-creme:#B24A16; --amb-charbon:#EE7A3C;     /* l'ambre s'assombrit sur creme */
  --mut-creme:#6F6A5E; --mut-charbon:#9A948A;
  --lin-creme:rgba(21,19,14,.16);  --lin-charbon:rgba(241,236,225,.16);
  --lis-creme:rgba(21,19,14,.28);  --lis-charbon:rgba(241,236,225,.28);

  /* CARTE A : bande 1 sombre, bande 2 claire */
  --b1-bg:var(--c-charbon); --b1-ink:var(--ink-charbon); --b1-amb:var(--amb-charbon);
  --b1-mut:var(--mut-charbon); --b1-lin:var(--lin-charbon); --b1-lis:var(--lis-charbon);
  --b1-card:var(--card-charbon);
  --b2-bg:var(--c-creme);   --b2-ink:var(--ink-creme);   --b2-amb:var(--amb-creme);
  --b2-mut:var(--mut-creme);  --b2-lin:var(--lin-creme);  --b2-lis:var(--lis-creme);
  --b2-card:var(--card-creme);
}
/* CARTE B : tout s'inverse. Le hero devient creme, les offres deviennent charbon. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --b1-bg:var(--c-creme);   --b1-ink:var(--ink-creme);   --b1-amb:var(--amb-creme);
  --b1-mut:var(--mut-creme);  --b1-lin:var(--lin-creme);  --b1-lis:var(--lis-creme);
  --b1-card:var(--card-creme);
  --b2-bg:var(--c-charbon); --b2-ink:var(--ink-charbon); --b2-amb:var(--amb-charbon);
  --b2-mut:var(--mut-charbon); --b2-lin:var(--lin-charbon); --b2-lis:var(--lis-charbon);
  --b2-card:var(--card-charbon);
}}
:root[data-theme="dark"]{
  --b1-bg:var(--c-creme);   --b1-ink:var(--ink-creme);   --b1-amb:var(--amb-creme);
  --b1-mut:var(--mut-creme);  --b1-lin:var(--lin-creme);  --b1-lis:var(--lis-creme);
  --b1-card:var(--card-creme);
  --b2-bg:var(--c-charbon); --b2-ink:var(--ink-charbon); --b2-amb:var(--amb-charbon);
  --b2-mut:var(--mut-charbon); --b2-lin:var(--lin-charbon); --b2-lis:var(--lis-charbon);
  --b2-card:var(--card-charbon);
}

.band{ padding-block:clamp(64px,11vw,140px); position:relative }
[id]{scroll-margin-top:68px}              /* barre de 64 px, plus 4 de respiration */
@media (min-width:861px){ [id]{scroll-margin-top:51px} }   /* barre de 47 px */
/* Chaque bande redefinit son encre, son ambre et ses filets : tout ce qui est
   dedans suit automatiquement, sans une seule couleur ecrite en dur. */
.band--a, .top, .drawer{
  background:var(--b1-bg); color:var(--b1-ink);
  --amber:var(--b1-amb); --muted:var(--b1-mut); --line:var(--b1-lin); --line-strong:var(--b1-lis);
  --card:var(--b1-card); --bg:var(--b1-bg); --fg:var(--b1-ink);
}
.band--b{
  background:var(--b2-bg); color:var(--b2-ink);
  --amber:var(--b2-amb); --muted:var(--b2-mut); --line:var(--b2-lin); --line-strong:var(--b2-lis);
  --card:var(--b2-card); --bg:var(--b2-bg); --fg:var(--b2-ink);
}
body{background:var(--b1-bg)}

/* Le grain : de la matiere, pas un effet. */
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.045;
  background-image: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'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- en-tete ---- */
/* Collee, pas flottante. En position fixe elle recouvrait le haut de ce qu'on
   etait en train de lire des qu'elle apparaissait. En sticky elle occupe sa
   place dans le flux : elle se pose AU-DESSUS du contenu, jamais par-dessus. */
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:var(--sp-3);padding:12px var(--pad);max-width:var(--maxw);margin-inline:auto;flex-wrap:wrap}
.mark{font-family:var(--disp);font-size:13px;letter-spacing:-.01em;text-decoration:none;color:inherit}
.mark i{font-style:normal;color:var(--amber)}   /* LE point ambre du logotype */
.nav{display:flex;gap:var(--sp-5);margin-left:auto}
.nav a{color:inherit;text-decoration:none;font-size:14px;opacity:.82}
.nav a:hover{opacity:1}
.top .themetoggle{color:inherit;border-color:var(--line-strong)}
.top .themetoggle:hover{background:var(--card)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  color:inherit;font:inherit;font-size:13px;padding:8px 12px;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;padding:var(--sp-6) var(--pad)}
/* Les liens etaient des ancres EN LIGNE : ils se collaient bout a bout sur une
   seule ligne et debordaient hors de l'ecran. Vu en vrai sur iPhone le 13/09. */
.drawer nav{display:flex;flex-direction:column;margin-top:var(--sp-5)}
.drawer a{display:block;color:inherit;text-decoration:none;font-family:var(--disp);
  font-size:clamp(22px,6.6vw,30px);line-height:1.15;letter-spacing:-.015em;
  padding:16px 0;border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}
.drawer__x{align-self:flex-end;background:none;border:1px solid var(--line-strong);
  color:inherit;font-size:20px;width:44px;height:44px;cursor:pointer}
@media (max-width:860px){ .nav{display:none} .burger{display:block} }
/* Sous 420 px la barre d'en-tete ne rentre plus : on ne garde que le mot utile
   du bouton de theme, le verbe est evident au contexte. */
@media (max-width:420px){
  .top .themetoggle{font-size:0;padding:8px 10px}
  .top .themetoggle [data-themelabel]{font-size:13px}
  .burger{padding:8px 10px}
}

.kick{font-family:var(--hand);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--sp-5)}
.ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin:0}
.btn{display:inline-block;border:1px solid currentColor;padding:13px 22px;font-size:15px;
  text-decoration:none;color:inherit;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn--a{background:var(--fg);border-color:var(--fg);padding:15px 24px}
.btn--a span{color:var(--bg);font-weight:600}
.btn--a:hover{box-shadow:0 0 0 2px var(--amber);transform:translateY(-1px)}
.btn--a:active{transform:none}

.h2{font-size:clamp(26px,4.6vw,46px);line-height:1.05;letter-spacing:-.015em;margin:0 0 var(--sp-6);max-width:20ch}
.lede{max-width:56ch;color:var(--muted);margin:0 0 var(--sp-8)}

.faits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.faits b{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;color:currentColor;font-size:15px}
.price{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;position:relative}
.price b,.price b span{font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:24px;font-weight:600;color:var(--fg);white-space:nowrap}
.price b{flex:none}
.price>span{font-size:12px;color:var(--muted)}
.price>.circled{font-size:inherit;color:inherit}
.price b.hand{font-family:var(--hand);font-size:15px;font-weight:400}
.apd{font-family:var(--hand);text-transform:uppercase;letter-spacing:.05em;font-size:11px;align-self:center}
.seg{display:inline-flex;border:1px solid var(--line-strong);margin-top:var(--sp-2);align-self:flex-start}
.seg button{font:inherit;font-size:13px;background:none;border:0;color:var(--muted);padding:0 16px;
  min-height:44px;cursor:pointer;border-right:1px solid var(--line-strong);
  transition:background .18s var(--ease),color .18s var(--ease)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.seg button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.hand{font-family:var(--hand);text-transform:uppercase;letter-spacing:.04em;font-size:15px;font-weight:400}
.circled{position:relative;display:inline-block;line-height:1;margin-right:7px}
.circled b{display:inline-block;line-height:1}
.circled .doodle{position:absolute;left:-6px;right:-9px;top:calc(100% + 1px);height:13px;
  width:100%;overflow:visible;fill:var(--amber);stroke:none;
  transform:rotate(-.5deg);pointer-events:none}

/* ---- la bande d'affirmation, charbon, une seule phrase ---- */
.claim{text-align:center}
.claim p{font-family:var(--disp);font-size:clamp(26px,5.4vw,58px);line-height:1.05;
  letter-spacing:-.02em;margin:0;max-width:18ch;margin-inline:auto}

/* ---- contact ---- */
.form{display:grid;gap:var(--sp-4);max-width:520px}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-family:var(--hand);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{font:inherit;font-size:16px;padding:11px 12px;border-radius:0;
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink)}
details summary{cursor:pointer;font-size:14px;color:var(--muted);padding:8px 0}
.foot{font-size:13px;color:var(--muted);display:flex;gap:var(--sp-5);flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){ .btn,.top,.porte,.offer,.seg button{transition:none}
  .btn--a:hover{transform:none} }


/* ---- les doodles, la ou ils disent quelque chose ----
   Pas de decoration. La coche marque ce qui vient DEJA avec lui, par opposition
   a la liste d'a cote qui demande quelque chose au client. La fleche dit qu'un
   lien quitte la page. Poses en FOND CSS et non dans le contenu, sinon la
   bascule francais/anglais les effacerait avec le texte.
   Style marqueur : ce sont des contours remplis, donc fill et jamais stroke. */
ul.coche li{position:relative;padding-left:29px;list-style:none}
ul.coche li::before{content:"";position:absolute;left:0;top:.36em;width:18px;height:15px;
  transform:rotate(-3deg);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2074%2062%22%20fill%3D%22%23B24A16%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M9.5%2033.4%20L24.6%2051.9%20L33.3%2053.7%20L69.3%2010.5%20L71.4%204.7%20L69.4%203.3%20L64.5%206.6%20L28.9%2049.4%20L28.8%2047.3%20L11.3%2031.7%20Z%22%2F%3E%3C%2Fsvg%3E") no-repeat left center/contain}
.band--a ul.coche li::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2074%2062%22%20fill%3D%22%23EE7A3C%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M9.5%2033.4%20L24.6%2051.9%20L33.3%2053.7%20L69.3%2010.5%20L71.4%204.7%20L69.4%203.3%20L64.5%206.6%20L28.9%2049.4%20L28.8%2047.3%20L11.3%2031.7%20Z%22%2F%3E%3C%2Fsvg%3E")}
.enplus a{position:relative;padding-bottom:3px}
.enplus a::after{content:"";position:absolute;left:-4px;right:-6px;top:100%;height:11px;
  transform:rotate(-.6deg) scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20146%2026%22%20fill%3D%22%23B24A16%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5.2%2013.3%20L17.0%2015.6%20L27.9%2017.2%20L39.5%2017.4%20L50.1%2017.6%20L61.5%2018.1%20L72.4%2017.7%20L84.0%2017.8%20L95.0%2017.9%20L105.9%2017.7%20L117.5%2016.6%20L128.1%2015.7%20L139.2%2013.6%20L139.0%2011.6%20L127.8%2011.3%20L117.1%2011.4%20L105.6%2012.5%20L95.0%2012.7%20L84.1%2012.6%20L72.4%2012.5%20L61.5%2012.9%20L50.3%2012.4%20L39.6%2012.2%20L28.2%2012.0%20L17.4%2011.3%20L5.4%2011.3%20Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/100% 100%}
.band--a .enplus a::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20146%2026%22%20fill%3D%22%23EE7A3C%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5.2%2013.3%20L17.0%2015.6%20L27.9%2017.2%20L39.5%2017.4%20L50.1%2017.6%20L61.5%2018.1%20L72.4%2017.7%20L84.0%2017.8%20L95.0%2017.9%20L105.9%2017.7%20L117.5%2016.6%20L128.1%2015.7%20L139.2%2013.6%20L139.0%2011.6%20L127.8%2011.3%20L117.1%2011.4%20L105.6%2012.5%20L95.0%2012.7%20L84.1%2012.6%20L72.4%2012.5%20L61.5%2012.9%20L50.3%2012.4%20L39.6%2012.2%20L28.2%2012.0%20L17.4%2011.3%20L5.4%2011.3%20Z%22%2F%3E%3C%2Fsvg%3E")}
.enplus a:hover::after,.enplus a:focus-visible::after{transform:rotate(-.6deg) scaleX(1)}
@media (prefers-reduced-motion:reduce){ .enplus a::after{transition:none} }


/* ---- le scroll se cale, mais AU SEUL ENDROIT OU C'EST SUR ----
   Le hero fait exactement un ecran : on peut l'accrocher sans risque. Les
   autres bandes sont plus hautes qu'un ecran, et y poser un point d'ancrage
   enfermerait le lecteur au milieu d'un bloc qu'il est en train de lire.
   Donc deux points seulement : le haut du hero, et le haut de ce qui le suit.
   `always` force l'arret meme sur un geste rapide : c'est ce qui fait que la
   premiere bande se pose franchement au lieu de defiler a moitie.
   Coupe sous 600 px de haut, ou meme le hero deborde. */
@media (min-height:600px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  .card2,.tete{scroll-snap-align:start}
  .card2 + .band,.tete + .band{scroll-snap-align:start;scroll-snap-stop:normal}
}