/* =====================================================================
   MASCOTTES SUR MESURE — css/site.css
   Charte : bleu #25225F · turquoise #1DA592 · jaune #F7C716 · orange #E04612
   Une seule feuille pour tout le site. Les jetons en tête, les composants
   ensuite, les sections par page en fin de fichier.
   ===================================================================== */

/* ---------- polices auto-hébergées (aucun appel à Google) ---------- */
@font-face{
  font-family:"Fredoka";
  src:url("../assets/fonts/fredoka-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- jetons ---------- */
:root{
  --bleu:#25225F;
  --bleu-nuit:#191636;
  --bleu-clair:#3B3789;
  --turquoise:#1DA592;
  --turquoise-texte:#0E6B60;   /* turquoise lisible sur crème (5,6:1) */
  --jaune:#F7C716;
  --jaune-doux:#FBE7A0;
  --jaune-pale:#FBE28E;   /* le jaune qui porte du texte : moins saturé, plus lisible */
  --orange:#E04612;
  --orange-profond:#C43C0C;    /* aplats portant du texte blanc (5,25:1) */
  --turquoise-profond:#17796C; /* aplats portant du texte blanc (5,27:1) */
  --orange-texte:#B93A0E;      /* orange lisible sur crème (5,3:1) */
  --creme:#FDFBF6;
  --creme-2:#F4F0E5;
  --creme-3:#EAE5D6;
  --encre:#26234A;
  --plume:#565380;             /* texte secondaire — 6:1 sur crème */
  --blanc:#FFFFFF;

  --display:"Fredoka",system-ui,sans-serif;
  --texte:"Montserrat",system-ui,sans-serif;

  --zone:1180px;
  --marge:clamp(20px,5vw,64px);
  --galet:44px 10px;           /* haut-gauche/bas-droite ronds, les deux autres presque vifs */
  --galet-petit:26px 8px;
  --doux:18px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-doux:cubic-bezier(.4,0,.2,1);

  --z-fil:70;--z-nav:60;--z-menu:65;--z-modal:90;

  /* le trait d'encre et l'ombre dure : la signature cartoon */
  --trait:3px;
  --encre-trait:#25225F;
  --dur:6px 6px 0 var(--encre-trait);
  --dur-clair:6px 6px 0 rgba(255,255,255,.9);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--texte);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4{text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
::selection{background:var(--jaune);color:var(--bleu)}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:-9999px;top:8px;background:var(--jaune);color:var(--bleu);padding:10px 16px;border-radius:8px;font-weight:600;z-index:100}
.evitement:focus{left:12px}

.zone{max-width:var(--zone);margin:0 auto;padding-inline:var(--marge)}

/* ---------- typographie ---------- */
.titre{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.022em;margin:0;color:var(--bleu)}
.t1{font-size:clamp(40px,6.4vw,82px)}
.t2{font-size:clamp(32px,4.6vw,58px);line-height:1.04}
.t3{font-size:clamp(21px,2.3vw,27px);line-height:1.2}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--plume);max-width:56ch}
.mesure{max-width:66ch}
.sur-indigo,.sur-indigo .titre,.sur-indigo h2,.sur-indigo h3{color:var(--blanc)}
.sur-indigo .lede,.sur-indigo p{color:rgba(255,255,255,.82)}

/* ---------- pastille ---------- */
.pastille{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 18px 6px 14px;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:.005em;
  background:rgba(37,34,95,.08);color:var(--bleu);
}
.pastille::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.pastille-claire{background:rgba(255,255,255,.14);color:#fff}
.pastille-claire::before{background:var(--jaune)}
.pastilles{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- boutons : le galet ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 32px;text-decoration:none;overflow:hidden;
  border:0;cursor:pointer;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:.005em;
  border-radius:999px;background:var(--bleu);color:#fff;
  box-shadow:0 5px 0 var(--btn-ombre,#15123B);
  transition:transform .18s var(--ease-doux),box-shadow .18s var(--ease-doux);
}
.btn>*{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--orange);
  transform:translateY(102%);transition:transform .38s var(--ease-doux);
}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--btn-ombre,#15123B)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-ombre,#15123B)}
.btn-jaune{background:var(--jaune);color:var(--bleu);--btn-ombre:#C79E00}
.btn-jaune::before{background:#fff}
.btn-blanc{background:#fff;color:var(--bleu);--btn-ombre:#D3CFC0}
.btn-blanc::before{background:var(--jaune)}
.btn-vide{background:none;color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.6)}
.btn-vide::before{background:#fff}
.btn-vide:hover,.btn-vide:focus-visible{color:var(--bleu)}
.btn-vide:hover,.btn-vide:active{box-shadow:inset 0 0 0 2.5px #fff}
.btn-vide-bleu{background:none;color:var(--bleu);box-shadow:inset 0 0 0 2.5px rgba(37,34,95,.4)}
.btn-vide-bleu::before{background:var(--bleu)}
.btn-vide-bleu:hover,.btn-vide-bleu:focus-visible{color:#fff}
.btn-vide-bleu:hover,.btn-vide-bleu:active{box-shadow:inset 0 0 0 2.5px var(--bleu)}
.btn svg{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* lien texte souligné à la main */
.lien{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--bleu);
  text-decoration:none;position:relative;padding-bottom:3px;
}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--jaune);border-radius:2px;transform-origin:left;transition:transform .35s var(--ease)}
.lien:hover::after{transform:scaleX(.5)}
.lien svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.lien:hover svg{transform:translateX(4px)}
.sur-indigo .lien{color:#fff}

/* ---------- fil de progression (jaune, en haut) ---------- */
.fil-scroll{position:fixed;top:0;left:0;z-index:var(--z-fil);height:3px;width:100%;background:var(--jaune);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){
  .fil-scroll{animation:tirage linear both;animation-timeline:scroll(root block)}
}
@keyframes tirage{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:var(--z-nav);padding:14px 0;--encre-nav:var(--bleu)}
.nav .zone{max-width:1340px;position:relative;z-index:1}
.nav-sombre{--encre-nav:#fff;margin-bottom:-112px}
.page-accueil .scene-in{padding-block-start:calc(112px + clamp(26px,3.4vw,52px))}
.nav-in{
  display:flex;align-items:center;gap:16px;min-height:84px;padding:4px 8px 4px 4px;position:relative;
  border-radius:999px;
}
.nav-in::before{
  content:"";position:absolute;inset:-6px 0;border-radius:999px;background:var(--creme);
  opacity:0;transition:opacity .3s;box-shadow:0 10px 26px -18px rgba(37,34,95,.4);
}
.nav.ombre{--encre-nav:var(--bleu)}
.nav.ombre .nav-in::before{opacity:1}
.nav-in>*{position:relative;z-index:1}

.marque{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1;flex:none}
.marque img{height:clamp(54px,5.6vw,76px);width:auto;display:block;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.16));transition:transform .4s cubic-bezier(.34,1.6,.5,1)}
.marque:hover img{transform:rotate(-2deg) scale(1.03)}
.marque small{display:none}
.marque-pied img{height:clamp(96px,10vw,124px)}
.pied .marque{margin-bottom:16px}
.liens{display:flex;gap:2px;margin-left:auto;font-size:15px;font-weight:500}
.liens a{position:relative;text-decoration:none;color:var(--encre-nav);padding:8px 11px;white-space:nowrap;transition:color .3s}
.liens a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .25s}
.liens a:hover::after{opacity:.55}
.liens a[aria-current="page"]::after{opacity:1;height:3px;background:var(--jaune)}
.nav .btn{margin-left:14px;padding:11px 22px;font-size:14.5px;white-space:nowrap}

.burger{display:none;margin-left:auto;background:var(--jaune);border:0;border-radius:14px;width:46px;height:46px;cursor:pointer;padding:0;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2.5px;background:var(--bleu);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.nav.ouvert .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.ouvert .burger i:nth-child(2){opacity:0}
.nav.ouvert .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1240px){
  .liens{display:none}
  .burger{display:block}
  .nav-in{position:relative}
  .nav-in>.btn{display:none}
  .nav.ouvert .liens{
    display:flex;position:absolute;left:0;right:0;top:calc(100% + 14px);flex-direction:column;gap:2px;
    background:var(--creme);padding:16px;border-radius:24px;
    box-shadow:0 24px 50px -20px rgba(37,34,95,.42);
  }
  .nav.ouvert .liens a{padding:12px 12px;font-size:17px;color:var(--bleu)}
  .nav.ouvert .liens a::after{left:12px;right:auto;width:26px}
  .nav.ouvert .liens .btn-menu{display:inline-flex;margin:12px 0 0;align-self:flex-start}
}
.liens .btn-menu{display:none}

/* ---------- sections & vagues ---------- */
.section{padding:clamp(60px,8vw,112px) 0;position:relative}
.section[id],[id].references{scroll-margin-top:130px}
.section-serree{padding:clamp(40px,5vw,72px) 0}
.section-indigo{background:var(--bleu);color:#fff}
.section-creme2{background:var(--creme-2)}
.vague{position:absolute;left:0;width:100%;height:clamp(46px,6vw,92px);display:block;pointer-events:none}
.vague path{fill:var(--creme)}
.vague.haut{top:-1px}
.vague.bas{bottom:-1px;transform:rotate(180deg)}
.section-vagues{padding-top:clamp(100px,12vw,170px);padding-bottom:clamp(110px,13vw,180px)}
.section-vagues>.zone{position:relative;z-index:2}

.entete{max-width:680px;margin:0 auto clamp(34px,5vw,60px);text-align:center}
.entete .pastille{margin-bottom:18px}
.entete h2{margin:0 0 16px}
.entete p{color:var(--plume);margin:0}
.entete-gauche{margin-left:0;text-align:left}
.section-indigo .entete p{color:rgba(255,255,255,.78)}

/* ---------- couture : le fil qui coud le site ---------- */
.couture{height:2px;width:100%;background:repeating-linear-gradient(90deg,var(--bleu) 0 10px,transparent 10px 18px);opacity:.28;border-radius:2px}
.section-indigo .couture{background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 18px);opacity:.35}

/* ---------- apparition : le contenu est visible par défaut ---------- */
.rv.in{animation:remonte .9s var(--ease) both}
.rv-g.in{animation:glisse-g .9s var(--ease) both}
.rv-d.in{animation:glisse-d .9s var(--ease) both}
@keyframes remonte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes glisse-g{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes glisse-d{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.rv-groupe.in>*{animation:remonte .8s var(--ease) both}
.rv-groupe.in>*:nth-child(2){animation-delay:.09s}
.rv-groupe.in>*:nth-child(3){animation-delay:.18s}
.rv-groupe.in>*:nth-child(4){animation-delay:.27s}
.rv-groupe.in>*:nth-child(5){animation-delay:.36s}
.rv-groupe.in>*:nth-child(6){animation-delay:.45s}

/* =====================================================================
   LA SCÈNE — un collage, pas une colonne.
   Quatre photos occupent quatre emplacements de tailles très différentes ;
   à chaque rotation elles changent de place. Elles dérivent en continu et
   suivent le curseur. Le titre passe devant les petites, jamais devant la
   grande : la lisibilité prime sur la mise en scène.
   ===================================================================== */
.scene{position:relative;background:var(--bleu);color:#fff;overflow:clip;--teinte:#3B3789;isolation:isolate}
.scene-lumiere{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 66% at 74% 34%,rgba(59,55,137,.62),transparent 72%),
    radial-gradient(46% 54% at 8% 88%,rgba(247,199,22,.14),transparent 72%);
  transition:background 1.2s var(--ease-doux);
}
.scene-lumiere::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 92% at 50% 104%,transparent,rgba(25,22,54,.6))}

.scene-in{position:relative;z-index:2;padding-block:clamp(26px,3.4vw,52px) clamp(96px,10vw,140px)}

/* le plateau : tout est positionné par rapport à lui */
.plateau{position:relative;width:100%;aspect-ratio:100/72;min-height:600px}

/* ---- le titre ---- */
.scene-texte{position:absolute;left:0;top:5%;width:47%;z-index:6}
.scene-texte::before{
  content:"";position:absolute;left:-14%;top:-18%;width:135%;height:140%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 54% at 38% 46%,rgba(20,18,58,.72),transparent 72%);
}
.scene h1{color:#fff;margin:18px 0 16px;font-size:clamp(34px,4vw,58px);max-width:14ch}
.scene h1 .l2{display:block}
.scene .lede{color:rgba(255,255,255,.86);max-width:34ch;margin-bottom:24px;font-size:clamp(16px,1.1vw,17.5px)}

/* ---- les tuiles ---- */
.tuile{
  position:absolute;left:0;top:0;width:34%;aspect-ratio:4/3;
  border:0;padding:0;background:none;transform-origin:0 0;
  transform:translate(var(--tx),var(--ty)) scale(var(--sc)) rotate(var(--rot));
  z-index:var(--z,1);
}
.tuile-par{display:block;width:100%;height:100%}
.tuile-in{
  display:block;width:100%;height:100%;border-radius:var(--galet);overflow:hidden;background:var(--bleu-nuit);
  box-shadow:0 32px 64px -26px rgba(8,6,26,.82),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:box-shadow .5s,filter .8s;
}
.tuile img,.tuile video{width:100%;height:100%;object-fit:cover;display:block}
.tuile::after{content:"";position:absolute;inset:0;border-radius:var(--galet);pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(20,18,58,.62));opacity:0;transition:opacity .7s}

/* emplacements — bureau */
.tuile.s0{--tx:132%;--ty:12%;--sc:1.86;--rot:-2.2deg;--z:4}
.tuile.s1{--tx:242%;--ty:-2%;--sc:.62;--rot:6.5deg;--z:5}
.tuile.s2{--tx:12%;--ty:214%;--sc:.72;--rot:-8deg;--z:3}
.tuile.s3{--tx:172%;--ty:178%;--sc:.92;--rot:5deg;--z:3;--duree:8.2s;--retard:-3.6s}
.tuile.s0::after{opacity:1}
.tuile:not(.s0) .tuile-in{filter:brightness(.74) saturate(.92)}

/* le cartel, seulement sur la grande */
.collage .cartel{
  position:absolute;left:44.9%;top:4.2%;width:63.2%;height:65.8%;z-index:7;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;padding:22px 24px;
  transform:rotate(-2.2deg);
}
/* cartel des pages intérieures : posé au bas du visuel */
.bandeau-visuel .cartel,.duo-img .cartel{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:#fff;
}
@keyframes cartel-entre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cartel b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,22px);line-height:1.15;color:#fff}
.cartel span{display:block;font-size:13px;color:rgba(255,255,255,.82)}
.cartel .annee{font-family:var(--display);font-weight:600;font-size:15px;background:var(--jaune);color:var(--bleu);padding:5px 12px;border-radius:999px;flex:none}
.legende-video{position:absolute;left:47%;top:7%;z-index:7;font-size:12px;font-weight:600;background:rgba(20,18,58,.62);color:#fff;padding:5px 11px;border-radius:999px;display:none;align-items:center;gap:6px}
.legende-video.visible{display:inline-flex}
.legende-video i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:block}

/* la bulle, accrochée à l'emplacement de la grande tuile */
.bulle{
  position:absolute;left:41%;top:-4%;z-index:8;
  background:#fff;color:var(--bleu);font-family:var(--display);font-weight:600;
  font-size:clamp(14px,1.1vw,17px);line-height:1.2;padding:11px 18px;border-radius:22px 22px 22px 6px;
  box-shadow:0 16px 34px -14px rgba(8,6,26,.8);transform:rotate(-3deg);max-width:min(30%,290px);
}
.bulle::after{content:"";position:absolute;left:16px;bottom:-9px;width:16px;height:16px;background:#fff;border-radius:0 0 0 5px;transform:rotate(45deg) skew(-6deg,-6deg)}
.bulle.change{animation:bulle-pop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bulle-pop{0%{opacity:0;transform:rotate(-11deg) scale(.66)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}

/* le mot qui tourne */
.slot{position:relative;display:inline-block;white-space:nowrap}
.slot-mot{display:inline-block;position:relative;z-index:1}
.slot-mot.sort{animation:mot-sort .42s var(--ease-doux) both}
.slot-mot.entre{animation:mot-entre .72s cubic-bezier(.34,1.56,.64,1) both}
@keyframes mot-sort{to{opacity:0;transform:translateY(-.4em) rotate(-3deg)}}
@keyframes mot-entre{from{opacity:0;transform:translateY(.5em) rotate(3deg)}to{opacity:1;transform:none}}
.slot-trait{position:absolute;left:-2%;width:104%;max-width:none;bottom:-.02em;height:.28em;z-index:0;pointer-events:none;overflow:visible}
.slot-trait path{fill:none;stroke:var(--jaune);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:98;stroke-dashoffset:0;opacity:.95}
.slot-trait.redessine path{animation:trait-dessin .9s var(--ease) both}
@keyframes trait-dessin{from{stroke-dashoffset:98}to{stroke-dashoffset:0}}

/* le sélecteur d'univers */
.univers{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;align-items:center}
.univers-titre{font-size:13px;color:rgba(255,255,255,.62);margin-right:4px;font-weight:500}
.univers button{
  border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  padding:7px 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.univers button:hover{border-color:#fff;transform:translateY(-2px) rotate(-1.5deg)}
.univers button[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune);color:var(--bleu);transform:rotate(-1.5deg)}

/* les commandes, posées en bas du plateau */
.pile-cmd{position:absolute;right:0;bottom:-4px;z-index:7;display:flex;align-items:center;gap:12px}
.pile-cmd .puces{display:flex;gap:6px}
.pile-cmd .puces button{width:26px;height:6px;border-radius:3px;border:0;background:rgba(255,255,255,.26);cursor:pointer;padding:0;transition:background .3s,width .35s var(--ease)}
.pile-cmd .puces button[aria-current="true"]{background:var(--jaune);width:40px}
.pile-cmd .fleche,.pile-cmd .pause{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  display:grid;place-items:center;cursor:pointer;position:relative;transition:background .25s,border-color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pile-cmd .fleche:hover,.pile-cmd .pause:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:scale(1.08)}
.pile-cmd svg{width:18px;height:18px}
.pause .anneau{position:absolute;inset:-1px;width:auto;height:auto;transform:rotate(-90deg)}
.pause .anneau circle{fill:none;stroke:var(--jaune);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pause.joue .anneau circle{animation:anneau var(--duree-cycle,5.6s) linear both}
@keyframes anneau{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pause .ico-pause,.pause .ico-lecture{position:absolute}
.pause .ico-lecture{display:none}
.pause[aria-pressed="true"] .ico-pause{display:none}
.pause[aria-pressed="true"] .ico-lecture{display:block}

.scene-forme{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(60px,8vw,120px);z-index:3}
.scene-forme path{fill:var(--creme)}

/* ---- tablette ---- */
@media (max-width:1100px){
  .scene-texte{width:48%}
  .tuile{width:38%}
  .tuile.s0{--tx:126%;--ty:14%;--sc:1.66}
  .tuile.s1{--tx:214%;--ty:0%;--sc:.56}
  .tuile.s2{--tx:8%;--ty:212%;--sc:.66}
  .tuile.s3{--tx:158%;--ty:202%;--sc:.84}
  .collage .cartel{left:47.9%;top:4%;width:63.1%;height:64.4%}
  .legende-video{left:50%;top:8%}
}

/* ---- mobile : le collage descend sous le titre, en carré ---- */
@media (max-width:860px){
  .plateau{aspect-ratio:auto;min-height:0;display:block}
  .scene-texte{position:static;width:auto;margin-bottom:clamp(24px,6vw,40px)}
  .scene-texte::before{display:none}
  .scene h1 .l2{padding-left:0}
  .collage{position:relative;width:100%;aspect-ratio:1/1.02}
  .tuile{width:46%}
  .tuile{width:56%}
  .tuile.s0{--tx:18%;--ty:22%;--sc:1.66;--rot:-2deg}
  .tuile.s1{--tx:0%;--ty:-6%;--sc:.46;--rot:6deg}
  .tuile.s2{--tx:2%;--ty:198%;--sc:.48;--rot:-6deg}
  .tuile.s3{--tx:104%;--ty:206%;--sc:.56;--rot:5deg}
  .collage .cartel{left:10.1%;top:9%;width:93%;height:63%;padding:16px}
  .legende-video{left:14%;top:12%}
  .bulle{left:30%;top:-3%;max-width:66%}
  .pile-cmd{position:static;margin-top:22px;flex-wrap:wrap}

}
@media (min-width:861px){.collage{position:absolute;inset:0}}

@media (prefers-reduced-motion:reduce){
  .tuile-in{animation:none}
  .tuile-par{transform:none}
  .slot-mot.sort,.slot-mot.entre{animation:none}
  .slot-trait.redessine path{animation:none}
  .pause.joue .anneau circle{animation:none;stroke-dashoffset:0}
  .bulle.change{animation:none}
  .liens a.nouveau::after{animation:none}
}

/* =====================================================================
   MANIFESTE — la phrase du site
   ===================================================================== */
.manifeste{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:start}
.manifeste .titre{max-width:16ch}
.manifeste-texte p{color:var(--plume);font-size:clamp(16.5px,1.25vw,18.5px)}
.reperes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,5vw,64px);padding-top:28px;position:relative}
.reperes::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--bleu) 0 10px,transparent 10px 18px);opacity:.28}
.repere b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,40px);color:var(--bleu);line-height:1}
.repere span{display:block;font-size:14.5px;color:var(--plume);margin-top:6px}
@media (max-width:860px){.manifeste{grid-template-columns:1fr}.reperes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.reperes{grid-template-columns:1fr;gap:22px}}

/* =====================================================================
   DÉPART — « Vous avez… ? »
   ===================================================================== */
.departs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end}
.depart{
  position:relative;border-radius:var(--galet);padding:28px 26px 26px;
  box-shadow:0 20px 44px -26px rgba(37,34,95,.45);
  transform:rotate(var(--r,0deg));
  transition:transform .45s var(--ease),box-shadow .45s;
}
.depart:hover,.depart:focus-within{transform:rotate(calc(var(--r,0deg) * -1.6)) translateY(-8px) scale(1.02);box-shadow:0 30px 60px -26px rgba(37,34,95,.5)}
.depart:nth-child(1){--r:-2deg;background:var(--jaune);color:var(--bleu)}
.depart:nth-child(2){--r:1.6deg;margin-bottom:26px;background:#fff;color:var(--bleu)}
.depart:nth-child(2) p{color:var(--plume)}
.depart:nth-child(3){--r:-1.4deg;background:var(--orange-profond);color:#fff}
.depart:nth-child(4){--r:2.2deg;margin-bottom:38px;background:var(--bleu);color:#fff}
.depart svg{width:60px;height:60px;margin-bottom:16px}
.depart h3{font-family:var(--display);font-weight:600;font-size:23px;margin:0 0 6px;color:inherit}
.depart p{margin:0;color:inherit;font-size:15px;opacity:.92}
@media (max-width:980px){.departs{grid-template-columns:1fr 1fr}.depart:nth-child(2),.depart:nth-child(4){margin-bottom:0}}
@media (max-width:520px){.departs{grid-template-columns:1fr}}

/* =====================================================================
   LE CHEMIN — étapes cousues sur un fil
   ===================================================================== */
.chemin{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:60px 0 0;margin:0;list-style:none}
.chemin-fil{position:absolute;top:0;left:0;width:100%;height:88px;pointer-events:none;overflow:visible}
.chemin-fil path{fill:none;stroke:var(--bleu);stroke-width:3;stroke-linecap:round;stroke-dasharray:11 9;opacity:.28;vector-effect:non-scaling-stroke}
.chemin-fil .avance{stroke:var(--orange);opacity:1}
.etape{position:relative}
.etape:nth-of-type(even){margin-top:36px}
.etape .num{
  position:absolute;top:-56px;left:50%;margin-left:-22px;
  width:44px;height:44px;border-radius:50%;background:var(--jaune);color:var(--bleu);
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;
  box-shadow:0 0 0 6px var(--creme),0 8px 18px -8px rgba(37,34,95,.6);
  transform:rotate(var(--r,-4deg));transition:transform .4s var(--ease-magnet,cubic-bezier(.34,1.56,.64,1));
}
.etape:nth-of-type(even) .num{--r:5deg;background:var(--orange-profond);color:#fff}
.etape:nth-of-type(3n) .num{background:var(--bleu);color:#fff}
.etape:hover .num{transform:rotate(0deg) scale(1.14)}
.etape h3{font-family:var(--display);font-weight:600;font-size:20px;margin:14px 0 8px;color:var(--bleu);text-align:center}
.etape p{margin:0;color:var(--plume);font-size:14.5px;text-align:center}
.etape .duree{display:block;text-align:center;font-family:var(--display);font-weight:500;color:var(--orange-texte);font-size:15px;margin-bottom:2px}
@media (max-width:980px){
  .chemin{grid-template-columns:1fr;gap:34px;padding:0 0 0 64px}
  .chemin-fil{display:none}
  .etape:nth-of-type(even){margin-top:0}
  .etape .num{top:-2px;left:-64px;margin-left:0;transform:rotate(-4deg)}
  .etape h3,.etape p,.etape .duree{text-align:left}
  .etape h3{margin-top:0}
}

/* =====================================================================
   RÉALISATIONS — un collage, pas une grille.
   Les cadres se chevauchent, changent de forme et de taille, et les
   légendes sortent du cadre. Rien n'est aligné sur rien.
   ===================================================================== */
.etal{position:relative;width:100%;aspect-ratio:100/92;min-height:760px}
.oeuvre{
  position:absolute;text-decoration:none;color:inherit;display:block;
  left:var(--x);top:var(--y);width:var(--w);
  transform:rotate(var(--r,0deg));transition:transform .6s var(--ease),filter .6s;
  z-index:var(--z,1);
}
.oeuvre .cadre{
  display:block;position:relative;overflow:hidden;background:var(--bleu-nuit);
  aspect-ratio:var(--ratio,4/3);border-radius:var(--forme,var(--galet));
  box-shadow:0 34px 66px -28px rgba(8,6,26,.85);
  transition:border-radius 1.2s var(--ease),box-shadow .6s;
}
.oeuvre:hover{transform:rotate(0deg) translateY(-10px) scale(1.015);z-index:9}
.oeuvre:hover .cadre{box-shadow:0 46px 84px -30px rgba(8,6,26,.9)}
.oeuvre .voile{position:absolute;inset:0;background:linear-gradient(175deg,transparent 52%,rgba(20,18,54,.72));pointer-events:none}
.oeuvre .secteur{
  position:absolute;top:var(--sy,16px);left:var(--sx,18px);background:var(--jaune);color:var(--bleu);
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;transform:rotate(-3deg);
}
/* la légende sort du cadre et se pose de travers */
.oeuvre .mention{
  position:absolute;left:var(--mx,4%);bottom:var(--mb,-6%);z-index:3;
  background:var(--creme);color:var(--bleu);border-radius:24px 6px 24px 6px;
  padding:18px 26px;max-width:80%;transform:rotate(var(--mr,1.6deg));
  box-shadow:0 18px 40px -22px rgba(8,6,26,.8);
  transition:transform .6s var(--ease);
}
.oeuvre:hover .mention{transform:rotate(0deg) translateY(4px)}
.oeuvre .mention b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,27px);line-height:1.1;color:var(--bleu)}
.oeuvre .mention span{display:block;font-size:12.5px;color:var(--plume);margin-top:3px}
.oeuvre .defi{
  position:absolute;left:6%;bottom:14%;z-index:1;margin:0;max-width:62%;
  color:rgba(255,255,255,.9);font-size:14.5px;
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .5s var(--ease);
}
.oeuvre:hover .defi{opacity:1;transform:none}

/* quatre formes, quatre tailles, quatre inclinaisons */
.oeuvre.o1{--x:-4%;--y:1%;--w:57%;--r:-2.4deg;--z:2;--ratio:5/4;--forme:44px 10px 44px 10px}
.oeuvre.o2{--x:57%;--y:-2%;--w:39%;--r:3.6deg;--z:6;--ratio:3/4;--forme:999px 999px 26px 26px;--mx:-8%;--mb:-9%;--mr:-2.4deg;--sy:14%;--sx:26%}
.oeuvre.o3{--x:16%;--y:47%;--w:50%;--r:2deg;--z:4;--ratio:4/3;--forme:56% 44% 58% 42%/48% 56% 44% 52%;--mx:2%;--mb:-8%;--mr:-2deg;--sy:11%;--sx:26%}
.oeuvre.o4{--x:68%;--y:41%;--w:38%;--r:-3.2deg;--z:5;--ratio:4/5;--forme:10px 44px 10px 44px;--mx:-6%;--mb:-8%;--mr:2.8deg}
/* la goutte respire */
@keyframes goutte{
  0%,100%{border-radius:56% 44% 58% 42%/48% 56% 44% 52%}
  33%{border-radius:44% 56% 42% 58%/56% 44% 56% 44%}
  66%{border-radius:52% 48% 50% 50%/42% 58% 42% 58%}
}
.oeuvre img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .etal{aspect-ratio:auto;min-height:0;display:grid;gap:clamp(46px,10vw,72px);grid-template-columns:1fr}
  .oeuvre{position:relative;left:auto;top:auto;width:auto;--r:0deg}
  .oeuvre.o1{width:88%}
  .oeuvre.o2{width:78%;margin-left:auto;--ratio:4/5}
  .oeuvre.o3{width:92%;--ratio:4/3}
  .oeuvre.o4{width:76%;margin-left:auto;--ratio:4/5}
  .oeuvre .mention{position:relative;left:auto;bottom:auto;margin:-28px 0 0 6%;display:inline-block;max-width:88%;transform:rotate(-1.6deg)}
  .oeuvre .defi{position:relative;left:auto;bottom:auto;opacity:1;transform:none;max-width:none;margin-top:12px;color:rgba(255,255,255,.82)}
}

/* =====================================================================
   LE DÉFILÉ — une bande de photos qui glisse avec le défilement.
   Elle relie deux sections au lieu de les séparer par un trait.
   ===================================================================== */
.defile{position:relative;overflow:hidden;padding:clamp(18px,3vw,34px) 0;--glisse:0px}
.defile-piste{display:flex;gap:clamp(14px,2vw,26px);width:max-content;transform:translate3d(var(--glisse),0,0);will-change:transform}
.defile-piste>span{
  flex:none;width:clamp(240px,28vw,420px);aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--forme,var(--galet));transform:rotate(var(--r,0deg));
  box-shadow:0 22px 46px -26px rgba(8,6,26,.7);
}
.defile-piste>span:nth-child(4n+1){--r:-2.4deg;--forme:44px 10px 44px 10px}
.defile-piste>span:nth-child(4n+2){--r:2deg;--forme:999px 999px 22px 22px;aspect-ratio:3/4;align-self:flex-end}
.defile-piste>span:nth-child(4n+3){--r:-1.4deg;--forme:54% 46% 58% 42%/48% 56% 44% 52%}
.defile-piste>span:nth-child(4n+4){--r:3deg;--forme:10px 44px 10px 44px;aspect-ratio:1/1}
.defile-piste img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){
  .defile-piste{transform:none}
  .oeuvre.o3 .cadre{animation:none}
  .oeuvre:hover{transform:rotate(var(--r,0deg))}
  .oeuvre .defi{opacity:1;transform:none}
}

/* =====================================================================
   DEUX FAÇONS DE FABRIQUER
   ===================================================================== */
.deux-voies{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.voie{padding:6px 0}
.voie .etiquette{display:inline-block;font-family:var(--display);font-weight:500;font-size:15px;color:var(--orange-texte);margin-bottom:12px}
.voie h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,32px);color:var(--bleu);margin:0 0 14px;line-height:1.1}
.voie p{color:var(--plume)}
.voie ul{list-style:none;padding:0;margin:18px 0 22px}
.voie li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--encre);font-size:15.5px}
.voie li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:3px;background:var(--orange);border-radius:2px}
.voie-france{position:relative;background:var(--bleu);color:#fff;border-radius:var(--galet);padding:clamp(26px,3vw,40px)}
.voie-france .etiquette{color:var(--jaune)}
.voie-france h3{color:#fff}
.voie-france p{color:rgba(255,255,255,.82)}
.voie-france li{color:#fff}
.voie-france li::before{background:var(--jaune)}
.fil-vertical{width:2px;background:repeating-linear-gradient(180deg,var(--bleu) 0 10px,transparent 10px 18px);opacity:.28;align-self:stretch}
.badge-vendee{
  position:absolute;top:-22px;right:26px;width:92px;height:92px;border-radius:50%;background:var(--jaune);color:var(--bleu);
  display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:600;font-size:13px;line-height:1.1;
  transform:rotate(8deg);box-shadow:0 12px 30px -12px rgba(15,13,40,.5);
}
.badge-vendee svg{width:26px;height:26px;margin-bottom:2px}
.voie-france:hover .badge-vendee{transform:rotate(-6deg) scale(1.06)}
.badge-vendee{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
@media (max-width:900px){.deux-voies{grid-template-columns:1fr}.fil-vertical{display:none}.badge-vendee{top:-18px;right:18px;width:80px;height:80px;font-size:12px}}

/* =====================================================================
   FICHE TECHNIQUE — l'étiquette cousue
   ===================================================================== */
.fiche-tech{
  position:relative;border:2px dashed rgba(37,34,95,.32);border-radius:var(--galet);padding:clamp(26px,3vw,42px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px);background:#fff;
  transform:rotate(-.7deg);box-shadow:0 22px 50px -30px rgba(37,34,95,.45);
}
.fiche-tech::before{
  content:"";position:absolute;top:-16px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:var(--jaune);box-shadow:inset 0 -3px 0 rgba(37,34,95,.18);
}
.fiche-tech div{padding:16px 0;border-bottom:1px solid rgba(37,34,95,.12)}
.fiche-tech dt{font-size:13.5px;color:var(--plume);margin:0 0 4px;font-weight:500}
.fiche-tech dd{margin:0;font-family:var(--display);font-weight:600;font-size:19px;color:var(--bleu);line-height:1.25}
.fiche-tech dd small{display:block;font-family:var(--texte);font-weight:500;font-size:13px;color:var(--plume);margin-top:2px}
@media (max-width:860px){.fiche-tech{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fiche-tech{grid-template-columns:1fr}}

/* =====================================================================
   VIDÉOS — rail vertical
   ===================================================================== */
.tk-rail{display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;scrollbar-width:none;padding:38px 4px 44px;scroll-snap-type:x mandatory}
.tk-rail::-webkit-scrollbar{display:none}
@media (min-width:900px){.tk-rail{justify-content:center;overflow:visible}}
.tk{
  position:relative;flex:0 0 min(70vw,310px);aspect-ratio:9/16;scroll-snap-align:center;
  border:0;padding:0;background:var(--bleu-nuit);cursor:pointer;overflow:hidden;border-radius:var(--forme,var(--galet));
  transform:translateY(var(--dy,0)) rotate(var(--rot,0deg));
  transition:transform .8s var(--ease),box-shadow .4s;box-shadow:0 20px 44px -18px rgba(15,13,40,.55);
}
.tk:nth-child(4n+1){--dy:22px;--rot:-2.2deg;--duree:7.6s;--forme:44px 10px 44px 10px}
.tk:nth-child(4n+2){--dy:-14px;--rot:1.6deg;--duree:6.2s;--retard:-1.4s;--forme:999px 999px 26px 26px}
.tk:nth-child(4n+3){--dy:10px;--rot:-1.2deg;--duree:8.4s;--retard:-2.8s;--forme:56% 44% 58% 42%/40% 60% 40% 60%}
.tk:nth-child(4n+4){--dy:28px;--rot:2deg;--duree:6.8s;--retard:-4.1s;--forme:10px 44px 10px 44px}
.tk:hover,.tk:focus-visible{transform:translateY(calc(var(--dy,0) - 10px));box-shadow:0 30px 60px -20px rgba(15,13,40,.65)}
.tk img{width:100%;height:100%;object-fit:cover;transform:scale(1.07)}
.tk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,8,30,.65))}
.tk-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:58px;height:58px;border-radius:50%;background:var(--jaune);color:var(--bleu);display:grid;place-items:center;transition:transform .3s var(--ease)}
.tk:hover .tk-play{transform:translate(-50%,-50%) scale(1.12)}
.tk-titre{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;color:#fff;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.25;text-align:left}
.tk iframe,.tk video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;object-fit:cover}
.tiktok-pied{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.tiktok-note{width:100%;text-align:center;font-size:13px;color:var(--plume);margin:12px 0 0}
@media (prefers-reduced-motion:reduce){.tk{transform:none}.tk>img{animation:none;transform:none}}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:start}
.faq{max-width:680px;margin-left:auto}
.faq details{border-bottom:1px solid rgba(37,34,95,.22)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-weight:500;font-size:19.5px;color:var(--bleu);line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:26px;width:12px;height:12px;
  border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(45deg);transition:transform .35s var(--ease)
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq p{color:var(--plume);margin:0 0 22px;font-size:15.5px;max-width:60ch}
@media (max-width:900px){.faq-grille{grid-template-columns:1fr}.faq{margin-left:0}}

/* =====================================================================
   APPEL FINAL & PIED
   ===================================================================== */
.final{position:relative;text-align:center;padding:clamp(60px,8vw,100px) 0 clamp(30px,4vw,40px)}
.final h2{margin:18px auto 14px;max-width:18ch}
.final p{color:var(--plume);max-width:50ch;margin:0 auto 28px}
.final .actions{justify-content:center}

.pied{position:relative;color:#fff;margin-top:50px}
.pied-forme{position:absolute;inset:0;width:100%;height:100%}
.pied-forme path{fill:var(--bleu)}
.pied-in{position:relative;z-index:1;padding:clamp(100px,13vw,160px) 0 34px}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:32px}
.pied h4{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 14px;color:#fff}
.pied a{display:block;text-decoration:none;color:rgba(255,255,255,.8);padding:4px 0;font-size:15px}
.pied a:hover{color:var(--jaune)}
.pied p{color:rgba(255,255,255,.8);font-size:15px}
.pied .marque{display:flex;color:#fff;margin-bottom:14px;padding:0}
.pied .marque small{color:rgba(255,255,255,.65)}
.pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);font-size:13.5px;color:rgba(255,255,255,.62)}
.pied-bas a{display:inline;padding:0;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.pied-grille{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pied-grille{grid-template-columns:1fr}}

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */
.bandeau{position:relative;padding:clamp(44px,6vw,84px) 0 clamp(36px,5vw,64px)}
.bandeau-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:end}
.bandeau h1{margin:18px 0 18px;font-size:clamp(36px,4.9vw,66px)}
.bandeau .lede{margin:0}
.bandeau-visuel{position:relative;aspect-ratio:5/4;border-radius:46% 46% 30px 30px/32% 32% 30px 30px;overflow:hidden;background:var(--bleu-nuit);transform:rotate(1.6deg);box-shadow:0 28px 56px -30px rgba(37,34,95,.6);transition:transform .5s var(--ease)}
.bandeau-visuel:hover{transform:rotate(0)}
.bandeau-visuel img{width:100%;height:100%;object-fit:cover}
.bandeau-visuel .cartel{opacity:1;transform:none;color:#fff}
.bandeau-visuel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(25,22,54,.55));z-index:1}
.bandeau-visuel .cartel{z-index:2}
.bandeau-simple{max-width:760px}
.bandeau-simple .lede{max-width:none}
@media (max-width:900px){.bandeau-in{grid-template-columns:1fr}}

/* duo texte / visuel */
.duo{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(60px,8vw,110px)}
.duo-inv{grid-template-columns:1.14fr .86fr}
.duo:last-child{margin-bottom:0}
.duo-inv .duo-img{order:-1}
.duo-img{position:relative;transform:rotate(-1.4deg);transition:transform .5s var(--ease)}
.duo-inv .duo-img{transform:rotate(1.4deg)}
.duo-img:hover{transform:rotate(0)}
.duo-img img{box-shadow:0 30px 58px -30px rgba(37,34,95,.6)}
.duo-img{border-radius:44px 10px 44px 10px;overflow:hidden}
.duo-img img{border-radius:inherit}
.duo-inv .duo-img{border-radius:10px 44px 10px 44px}
.duo-img::after{border-radius:inherit}
.duo-img img{width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:var(--galet)}
.duo-img .cartel{opacity:1;transform:none;color:#fff;left:18px;right:18px;bottom:18px;position:absolute}
.duo-img::after{content:"";position:absolute;inset:0;border-radius:var(--galet);background:linear-gradient(180deg,transparent 60%,rgba(25,22,54,.55));pointer-events:none}
.duo-img .cartel{z-index:1}
.duo h2,.duo h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,38px);margin:14px 0 14px;color:var(--bleu);line-height:1.1}
.duo p{color:var(--plume)}
.duo ul{list-style:none;padding:0;margin:18px 0 0}
.duo li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--encre);font-size:15.5px}
.duo li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:3px;background:var(--orange);border-radius:2px}
@media (max-width:860px){.duo{grid-template-columns:1fr}.duo-inv .duo-img{order:0}}

/* publics : grille de six */
.publics-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.public{
  position:relative;background:#fff;border-radius:var(--galet-petit);padding:26px 24px 22px;
  border:1px solid rgba(37,34,95,.1);overflow:hidden;
  transform:rotate(var(--r,0deg));box-shadow:0 18px 40px -28px rgba(37,34,95,.5);
  transition:transform .45s var(--ease);
}
.public::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--jaune)}
.public:nth-child(3n+2)::before{background:var(--bleu)}
.public:nth-child(3n)::before{background:var(--orange)}
.public:nth-child(odd){--r:-1.2deg}.public:nth-child(even){--r:1.2deg}
.public:hover{transform:rotate(0) translateY(-5px)}
.public svg{width:40px;height:40px;margin-bottom:14px}
.public h3{font-family:var(--display);font-weight:600;font-size:20px;color:var(--bleu);margin:0 0 6px}
.public p{margin:0;color:var(--plume);font-size:15px}
@media (max-width:900px){.publics-grille{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.publics-grille{grid-template-columns:1fr}}

/* chemin vertical détaillé (fabrication) */
.chemin-v{position:relative;max-width:820px;margin:0 auto;padding-left:0}
.chemin-v .etape-v:not(:last-child)::before{content:"";position:absolute;left:29px;top:60px;bottom:0;width:3px;background:repeating-linear-gradient(180deg,var(--bleu) 0 10px,transparent 10px 18px);opacity:.28;border-radius:2px}
.chemin-v .etape-v{position:relative;display:grid;grid-template-columns:60px 1fr;gap:clamp(18px,3vw,36px);padding:0 0 clamp(36px,5vw,56px)}
.chemin-v .etape-v:last-child{padding-bottom:0}
.etape-v .num{width:60px;height:60px;border-radius:50%;background:var(--jaune);color:var(--bleu);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:21px;box-shadow:0 0 0 8px var(--creme),0 10px 22px -10px rgba(37,34,95,.6);position:relative;z-index:1;
  transform:rotate(-5deg);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.etape-v:nth-of-type(even) .num{background:var(--orange-profond);color:#fff;transform:rotate(5deg)}
.etape-v:nth-of-type(3n) .num{background:var(--bleu);color:#fff}
.etape-v:hover .num{transform:rotate(0) scale(1.1)}
.etape-v h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,28px);color:var(--bleu);margin:12px 0 8px;line-height:1.15}
.etape-v .duree{font-family:var(--display);font-weight:500;color:var(--orange-texte);font-size:15.5px}
.etape-v p{color:var(--plume);max-width:60ch}
.etape-v ul{list-style:none;padding:0;margin:12px 0 0}
.etape-v li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--encre);font-size:15.5px}
.etape-v li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:3px;background:var(--orange);border-radius:2px}

/* matières : nuancier */
.matieres{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.matiere{border-radius:var(--galet-petit);overflow:hidden;background:#fff;border:1px solid rgba(37,34,95,.1);
  transform:rotate(var(--r,0deg));transition:transform .45s var(--ease),box-shadow .45s;box-shadow:0 14px 32px -24px rgba(37,34,95,.5)}
.matiere:nth-child(odd){--r:-1.6deg}.matiere:nth-child(even){--r:1.6deg}
.matiere:hover{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:0 26px 46px -24px rgba(37,34,95,.5)}
.matiere .echantillon{height:110px;position:relative}
.matiere b{display:block;font-family:var(--display);font-weight:600;font-size:17px;color:var(--bleu);padding:14px 16px 4px}
.matiere span{display:block;font-size:13.5px;color:var(--plume);padding:0 16px 16px}
@media (max-width:1000px){.matieres{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.matieres{grid-template-columns:1fr 1fr}}
/* textures dessinées en CSS */
.ech-lycra{background:linear-gradient(135deg,#1DA592,#25225F);}
.ech-lycra::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 7px)}
.ech-peluche{background:radial-gradient(circle at 30% 30%,#FBE7A0,#F7C716 60%,#E0AE0F)}
.ech-peluche::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.5px) 0 0/9px 9px}
.ech-polaire{background:#E04612}
.ech-polaire::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 3px,transparent 3px 10px)}
.ech-fourrure{background:linear-gradient(180deg,#6b5a45,#3d3225)}
.ech-fourrure::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.14) 0 1px,transparent 1px 4px),repeating-linear-gradient(80deg,rgba(0,0,0,.2) 0 1px,transparent 1px 6px)}
.ech-cuir{background:linear-gradient(160deg,#3B3789,#25225F)}
.ech-cuir::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.6px) 0 0/6px 6px}
.ech-plastique{background:linear-gradient(135deg,#fff 0%,#EAE5D6 40%,#fff 100%)}
.ech-plastique::after{content:"";position:absolute;left:12%;top:16%;width:40%;height:18%;background:rgba(255,255,255,.9);border-radius:50%;filter:blur(6px)}

/* tableau comparatif (confection en France) */
.comparatif{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--galet);overflow:hidden;border:1px solid rgba(37,34,95,.12)}
.comparatif th,.comparatif td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(37,34,95,.1);font-size:15.5px}
.comparatif thead th{font-family:var(--display);font-weight:600;font-size:18px;color:var(--bleu);background:var(--creme-2)}
.comparatif thead th:nth-child(3){background:var(--bleu);color:#fff;position:relative}
.comparatif thead th:nth-child(3)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--jaune)}
.comparatif tbody th{font-weight:600;color:var(--bleu);width:26%}
.comparatif td{color:var(--encre)}
.comparatif td:nth-child(3){background:rgba(37,34,95,.04);font-weight:500}
.comparatif tr:last-child th,.comparatif tr:last-child td{border-bottom:0}
@media (max-width:700px){
  .comparatif thead{display:none}
  .comparatif tr{display:block;padding:14px 0;border-bottom:1px solid rgba(37,34,95,.1)}
  .comparatif th,.comparatif td{display:block;border:0;padding:6px 18px;width:auto}
  .comparatif tbody th{font-size:13.5px;color:var(--plume)}
  .comparatif td::before{display:block;font-size:12.5px;color:var(--plume);font-weight:600;margin-bottom:2px}
  .comparatif td:nth-child(2)::before{content:"Fabrication partenaire"}
  .comparatif td:nth-child(3)::before{content:"Confection en France";color:var(--bleu)}
  .comparatif td:nth-child(3){background:none;border-radius:8px}
}

/* arguments (confection en France) */
.arguments{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px) clamp(28px,5vw,64px)}
.argument{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
.argument .rond{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.argument .rond svg{width:26px;height:26px}
.argument h3{font-family:var(--display);font-weight:600;font-size:21px;margin:0 0 6px}
.argument p{margin:0;font-size:15.5px}
@media (max-width:760px){.arguments{grid-template-columns:1fr}}

/* atelier : bande photo grand format avec repères */
.atelier-bande{position:relative;border-radius:var(--galet);overflow:hidden;background:var(--bleu);color:#fff;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.atelier-bande h2{color:#fff}
.atelier-bande p{color:rgba(255,255,255,.82)}
.carte-france{position:relative;aspect-ratio:1;max-width:420px;margin:0 auto}
.carte-france svg{width:100%;height:100%}
@media (max-width:860px){.atelier-bande{grid-template-columns:1fr}}

/* filtres + grille de réalisations (page) */
.filtres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.filtre{padding:9px 20px;border-radius:999px;border:1px solid rgba(37,34,95,.22);background:none;color:var(--bleu);cursor:pointer;font-size:14.5px;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.filtre:hover{border-color:var(--bleu)}
.filtre[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.travaux{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(46px,6vw,88px) clamp(30px,4vw,58px)}
.travail{display:block;text-decoration:none;color:inherit}
.travail[hidden]{display:none}
.travail{transform:rotate(var(--r,0deg));transition:transform .55s var(--ease)}
.travail:nth-child(4n+1){--r:-2.2deg;--forme:44px 10px 44px 10px;--ratio:5/4}
.travail:nth-child(4n+2){--r:2.4deg;--forme:999px 999px 26px 26px;--ratio:3/4}
.travail:nth-child(4n+3){--r:1.6deg;--forme:56% 44% 58% 42%/48% 56% 44% 52%;--ratio:4/3}
.travail:nth-child(4n+4){--r:-2.8deg;--forme:10px 44px 10px 44px;--ratio:4/5}
.travail:hover{transform:rotate(0deg) translateY(-8px)}
.travail .cadre{display:block;position:relative;overflow:hidden;border-radius:var(--forme,var(--galet));aspect-ratio:var(--ratio,4/3);background:var(--bleu-nuit);box-shadow:0 26px 54px -26px rgba(37,34,95,.55);transition:border-radius 1.2s var(--ease)}
.travail .mention{
  position:relative;left:auto;bottom:auto;display:block;margin:-26px 0 0 clamp(12px,3vw,34px);
  max-width:82%;padding:16px 24px 17px;border-radius:24px 8px 24px 8px;
  background:var(--creme);box-shadow:5px 6px 0 var(--encre-trait);
  transform:rotate(var(--rm,-1.6deg));transition:transform .45s var(--ease);z-index:2;
}
.travail:nth-child(even) .mention{--rm:1.6deg;border-radius:8px 24px 8px 24px;margin-left:auto;margin-right:clamp(12px,3vw,34px)}
.travail:hover .mention{transform:rotate(0) translateY(-3px)}
.travail .mention b{display:block;color:var(--bleu);font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.9vw,25px);line-height:1.08;letter-spacing:-.02em;margin-bottom:3px}
.travail .mention span{display:block;font-size:14px;color:var(--plume)}
.travail .defi{margin:16px clamp(12px,3vw,34px) 0;color:var(--plume);font-size:15.5px;max-width:44ch}
.travail:nth-child(even) .defi{margin-left:auto;text-align:right}
.travail .secteur{top:16px;left:18px;transform:rotate(-3deg)}
.travail:nth-child(even) .secteur{left:auto;right:18px;transform:rotate(3deg)}
.travail img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.travail:hover img{transform:scale(1.05)}
.travail .secteur{position:absolute;top:16px;left:16px;background:rgba(253,251,246,.92);color:var(--bleu);font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px}
.travail .mention{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:14px}
.travail .mention b{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,25px);color:var(--bleu);line-height:1.15}
.travail .mention span{font-size:13.5px;color:var(--plume);white-space:nowrap}
.travail .defi{margin:6px 0 0;color:var(--plume);font-size:15.5px;max-width:48ch}
.travail:nth-child(even){margin-top:clamp(0px,7vw,104px)}
@media (max-width:760px){.travaux{grid-template-columns:1fr}.travail:nth-child(even){margin-top:0}}
.a-venir{margin-top:clamp(40px,6vw,72px);padding:clamp(24px,3vw,36px);border:2px dashed rgba(37,34,95,.28);border-radius:var(--galet);display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between}
.a-venir p{margin:0;color:var(--plume);max-width:56ch}
.a-venir b{font-family:var(--display);font-weight:600;color:var(--bleu);font-size:20px;display:block;margin-bottom:4px}

/* visionneuse */
.visionneuse{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%;color:#fff}
.visionneuse::backdrop{background:rgba(20,18,58,.9);backdrop-filter:blur(6px)}
.visionneuse-in{position:relative;border-radius:var(--galet);overflow:hidden;background:var(--bleu-nuit)}
.visionneuse img{width:100%;max-height:78vh;object-fit:contain;background:var(--bleu-nuit)}
.visionneuse .cartel{position:static;opacity:1;transform:none;padding:18px 22px;background:var(--bleu)}
.visionneuse .fermer{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--jaune);color:var(--bleu);cursor:pointer;display:grid;place-items:center}
.visionneuse .fermer svg{width:18px;height:18px}

/* formulaire */
.form-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,64px);align-items:start}
.champ{display:flex;flex-direction:column;margin-bottom:18px}
.champ label{font-size:13.5px;font-weight:600;color:var(--bleu);margin-bottom:7px}
.champ label small{font-weight:500;color:var(--plume)}
.champ input,.champ select,.champ textarea{
  font-family:var(--texte);font-size:15.5px;padding:14px 16px;color:var(--encre);
  border:1px solid rgba(37,34,95,.22);border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .2s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(37,34,95,.1)}
.champ input::placeholder,.champ textarea::placeholder{color:#6F6C94}
.champ textarea{min-height:150px;resize:vertical}
.champ .aide{font-size:13px;color:var(--plume);margin-top:6px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.option-france{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:var(--jaune-doux);border-radius:var(--galet-petit);padding:16px 18px;margin:6px 0 22px;cursor:pointer;
}
.option-france input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--bleu);cursor:pointer}
.option-france b{display:block;font-family:var(--display);font-weight:600;font-size:17px;color:var(--bleu)}
.option-france span{font-size:14px;color:var(--encre)}
.fiche{background:var(--bleu);color:#fff;border-radius:var(--galet);padding:clamp(24px,3vw,34px)}
.fiche h3{font-family:var(--display);font-weight:600;font-size:22px;margin:0 0 16px;color:#fff}
.fiche p{color:rgba(255,255,255,.84);font-size:15.5px}
.fiche a{color:var(--jaune);font-weight:600;text-decoration:none}
.fiche strong{color:#fff}
.form-etat{margin-top:14px;font-size:14.5px;color:var(--orange-texte);font-weight:600;display:none}
.form-etat.visible{display:block}
@media (max-width:900px){.form-grille{grid-template-columns:1fr}}
@media (max-width:560px){.deux{grid-template-columns:1fr}}

/* textes légaux */
.texte{max-width:72ch;margin:0 auto}
.texte h2{font-family:var(--display);font-weight:600;font-size:26px;color:var(--bleu);margin:40px 0 12px}
.texte h2:first-of-type{margin-top:0}
.texte p,.texte li{color:var(--plume)}
.avis{background:var(--jaune-doux);border-radius:var(--galet-petit);padding:18px 22px;margin:0 0 34px;color:var(--encre)}
.avis p{margin:0;font-size:15px;color:var(--encre)}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv.in,.rv-g.in,.rv-d.in,.rv-groupe.in>*{animation:none}
  .btn::before,.lien::after,.oeuvre img,.travail img{transition:none}
  .depart:hover{transform:none}
}

/* =====================================================================
   LE CARNET — ce qui est dessiné à la main dans les marges.
   Un cerne autour d'un mot, une flèche vers un bouton, quelques étoiles.
   Ces éléments sont décoratifs : aucun ne porte d'information.
   ===================================================================== */
.gribouillis{position:absolute;pointer-events:none;z-index:1;overflow:visible;max-width:none}
.gribouillis path,.gribouillis line,.gribouillis circle{
  fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.gr-orange{color:var(--orange)}
.gr-turquoise{color:var(--turquoise)}
.gr-jaune{color:var(--jaune)}
.gr-blanc{color:rgba(255,255,255,.75)}
@media (max-width:760px){.gr-cache-mobile{display:none}}

/* un mot cerné à la main */
.cerne{position:relative;display:inline-block;white-space:nowrap}
.cerne svg{position:absolute;left:-6%;top:-8%;width:112%;max-width:none;height:120%;pointer-events:none;overflow:visible}
.cerne svg path{fill:none;stroke:var(--orange);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.cerne.in svg path,.in .cerne svg path{stroke-dashoffset:0}

/* la bulle : ce que la mascotte de devant a l'air de dire */
.bulle{
  position:absolute;top:clamp(-18px,-1.4vw,-10px);left:clamp(-14px,-1.2vw,-8px);z-index:6;
  background:#fff;color:var(--bleu);font-family:var(--display);font-weight:600;
  font-size:clamp(14px,1.15vw,17px);line-height:1.2;padding:11px 18px;border-radius:20px 20px 20px 6px;
  box-shadow:0 14px 30px -14px rgba(10,8,30,.7);transform:rotate(-3deg);
  max-width:min(62%,300px);
}
.bulle::after{content:"";position:absolute;left:14px;bottom:-9px;width:16px;height:16px;background:#fff;
  border-radius:0 0 0 5px;transform:rotate(45deg) skew(-6deg,-6deg)}
.bulle.change{animation:bulle-pop .55s var(--ease-magnet,cubic-bezier(.34,1.56,.64,1)) both}
@keyframes bulle-pop{0%{opacity:0;transform:rotate(-9deg) scale(.7)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}

/* bandes de couleur pleines */
/* la bande jaune : la couleur d'accent de la charte, en grand */
.section-jaune{background:var(--jaune);color:var(--bleu)}
.section-jaune .titre,.section-jaune h2,.section-jaune h3{color:var(--bleu)}
.section-jaune p,.section-jaune .lede{color:var(--bleu);opacity:.84}
.section-jaune .pastille{background:rgba(37,34,95,.13);color:var(--bleu)}
.section-jaune .pastille::before{background:var(--orange-profond)}
.section-jaune .vague path{fill:var(--creme)}
.section-jaune .btn{background:var(--bleu);color:#fff}
.section-jaune .btn::before{background:var(--orange)}
.section-jaune .tk-play{background:var(--bleu);color:#fff}
.section-jaune .tk{box-shadow:0 24px 48px -20px rgba(80,58,0,.45)}
.section-jaune .tiktok-note{color:var(--bleu);opacity:.75}

/* le mur d'atelier : fond légèrement quadrillé, comme un papier de patron */
.mur{
  position:relative;
  background-image:
    linear-gradient(rgba(37,34,95,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,34,95,.055) 1px,transparent 1px);
  background-size:34px 34px;
}
.mur>*{position:relative;z-index:1}

/* les repères deviennent des vignettes punaisées */
.repere{
  position:relative;background:#fff;border-radius:var(--galet-petit);padding:22px 22px 20px;
  transform:rotate(var(--r,0deg));box-shadow:0 18px 40px -28px rgba(37,34,95,.55);
  transition:transform .45s var(--ease);
}
.repere:nth-child(1){--r:-1.8deg}.repere:nth-child(2){--r:1.4deg;margin-top:14px}.repere:nth-child(3){--r:-1deg}
.repere:hover{transform:rotate(0) translateY(-5px)}
.repere::before{content:"";position:absolute;top:-9px;left:24px;width:20px;height:20px;border-radius:50%;
  background:var(--orange);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.repere:nth-child(2)::before{background:var(--bleu)}
.repere:nth-child(3)::before{background:var(--jaune)}
.reperes{gap:22px}
.reperes::before{display:none}

/* le titre du manifeste : une ligne peut porter une autre couleur */
.mot-turquoise{color:var(--orange-texte)}
.mot-orange{color:var(--orange-texte)}

@media (prefers-reduced-motion:reduce){
  .depart:hover,.oeuvre:hover,.travail:hover,.matiere:hover,.repere:hover,.etape:hover .num,.btn:hover{transform:none}
  .cerne svg path{stroke-dashoffset:0;transition:none}
  .bulle.change{animation:none}
  .publics{transform:none;scale:1}
}

/* =====================================================================
   LES CADRES VIVANTS — l'image dérive dans son cadre pendant le
   défilement, et le cadre arrive de biais. Le cadre ne bouge pas :
   c'est l'image à l'intérieur qui respire.
   ===================================================================== */
[data-parallaxe]{overflow:hidden}
[data-parallaxe]>img,[data-parallaxe]>picture>img{
  transform:scale(1.16) translate3d(0,var(--sy,0px),0);
  transition:transform .1s linear;will-change:transform;
}
.oeuvre .cadre:hover>img,.travail .cadre:hover>img{transform:scale(1.22) translate3d(0,var(--sy,0px),0)}

/* arrivée de biais des cadres */
.pivote{opacity:0}
.pivote.in{animation:pivot .95s var(--ease) both}
@keyframes pivot{
  from{opacity:0;transform:translateY(46px) rotate(var(--pivot-de,-6deg)) scale(.94)}
  to{opacity:1;transform:none}
}
.pivote:nth-child(even){--pivot-de:6deg}

@media (prefers-reduced-motion:reduce){
  [data-parallaxe]>img,[data-parallaxe]>picture>img{transform:none}
  .pivote{opacity:1}
  .pivote.in{animation:none}
  .oeuvre .cadre:hover>img,.travail .cadre:hover>img{transform:none}
}

/* =====================================================================
   LA BANDE PLEINE — une image qui prend toute la largeur de l'écran
   et grandit encore pendant qu'on la traverse.
   ===================================================================== */
.pleine{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:clip}
.pleine-cadre{
  position:relative;overflow:hidden;background:var(--bleu-nuit);
  width:calc(64% + var(--ouvre,0) * 36%);
  margin:0 auto;
  border-radius:calc(120px - var(--ouvre,0) * 96px);
  aspect-ratio:var(--ratio,21/9);
  transition:none;
}
.pleine-cadre img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.24 - var(--ouvre,0) * .1)) translate3d(0,var(--sy,0px),0)}
.pleine-legende{
  position:absolute;left:0;right:0;bottom:8%;z-index:2;text-align:center;color:#fff;pointer-events:none;
  padding-inline:var(--marge);
}
.pleine-legende h2{color:#fff;text-shadow:0 8px 40px rgba(10,8,30,.7)}
.pleine-legende p{color:rgba(255,255,255,.9);max-width:52ch;margin:14px auto 0;text-shadow:0 4px 20px rgba(10,8,30,.8)}
.pleine::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(16,14,44,.6))}
@media (max-width:760px){.pleine-cadre{--ratio:4/3;width:calc(84% + var(--ouvre,0) * 16%)}}

/* si une photo existe dans assets/atelier/, elle remplace le motif */
.planche-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity 1s var(--ease-doux),transform 8s var(--ease)}
.planche.a-photo .planche-photo{opacity:1;transform:none}
.planche.a-photo>svg{display:none}
.planche.a-photo{background:var(--bleu-nuit);color:#fff}
.planche.a-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,rgba(16,14,44,.5) 0%,transparent 34%,transparent 52%,rgba(16,14,44,.82) 100%)}
.planche.a-photo .num,.planche.a-photo .mot{z-index:2}
.planche.a-photo .num{opacity:.85;text-shadow:0 6px 24px rgba(10,8,30,.7)}
.planche.a-photo .mot{text-shadow:0 6px 24px rgba(10,8,30,.8)}

.planche-1{background:var(--jaune);color:var(--bleu)}
.planche-2{background:var(--bleu);color:#fff}
.planche-3{background:var(--orange-profond);color:#fff}
.planche-4{background:var(--creme-3);color:var(--bleu)}
.planche-5{background:var(--bleu-clair);color:#fff}

.pas{padding:clamp(24px,5vh,56px) 0;min-height:52vh;display:flex;flex-direction:column;justify-content:center}
.pas:first-child{padding-top:0}
.pas:last-child{padding-bottom:0;min-height:auto}
.pas .rang{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px}
.pas .rang i{width:34px;height:34px;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:15px;font-style:normal;transform:rotate(-5deg);
  transition:background .5s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.pas.actif .rang i{background:var(--orange);transform:rotate(6deg) scale(1.12)}
.pas .rang span{font-size:14px;font-weight:600;color:var(--orange-texte)}
.pas h3{font-family:var(--display);font-weight:600;font-size:clamp(25px,2.6vw,36px);color:var(--bleu);margin:0 0 12px;line-height:1.05}
.pas p{color:var(--plume);margin:0;max-width:38ch;font-size:clamp(15.5px,1.1vw,17px)}
.pas{opacity:.42;transition:opacity .6s}
.pas.actif{opacity:1}
@media (max-width:1060px){
  .sequence{grid-template-columns:1fr;gap:0}
  .sequence-visuel{position:relative;top:auto;aspect-ratio:4/3;margin-bottom:36px}
  .pas{min-height:0;padding:0 0 clamp(34px,7vw,52px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .planche{transition:opacity .3s}
  .pas{opacity:1}
  .pleine-cadre{width:100%;border-radius:0}
  .pleine-cadre img{transform:none}
}

/* si une photo existe dans assets/atelier/, elle remplace le motif */
.planche-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity 1s var(--ease-doux),transform 8s var(--ease)}
.planche.a-photo .planche-photo{opacity:1;transform:none}
.planche.a-photo>svg{display:none}
.planche.a-photo{background:var(--bleu-nuit);color:#fff}
.planche.a-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,rgba(16,14,44,.5) 0%,transparent 34%,transparent 52%,rgba(16,14,44,.82) 100%)}
.planche.a-photo .num,.planche.a-photo .mot{z-index:2}
.planche.a-photo .num{opacity:.85;text-shadow:0 6px 24px rgba(10,8,30,.7)}
.planche.a-photo .mot{text-shadow:0 6px 24px rgba(10,8,30,.8)}

.planche-1{background:var(--jaune);color:var(--bleu)}
.planche-2{background:var(--bleu);color:#fff}
.planche-3{background:var(--orange-profond);color:#fff}
.planche-4{background:var(--creme-3);color:var(--bleu)}
.planche-5{background:var(--bleu-clair);color:#fff}

.pas{padding:clamp(24px,5vh,56px) 0;min-height:52vh;display:flex;flex-direction:column;justify-content:center}
.pas:first-child{padding-top:0}
.pas:last-child{padding-bottom:0;min-height:auto}
.pas .rang{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px}
.pas .rang i{width:34px;height:34px;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:15px;font-style:normal;transform:rotate(-5deg);
  transition:background .5s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.pas.actif .rang i{background:var(--orange);transform:rotate(6deg) scale(1.12)}
.pas .rang span{font-size:14px;font-weight:600;color:var(--orange-texte)}
.pas h3{font-family:var(--display);font-weight:600;font-size:clamp(25px,2.6vw,36px);color:var(--bleu);margin:0 0 12px;line-height:1.05}
.pas p{color:var(--plume);margin:0;max-width:38ch;font-size:clamp(15.5px,1.1vw,17px)}
.pas{opacity:.42;transition:opacity .6s}
.pas.actif{opacity:1}
@media (max-width:1060px){
  .sequence{grid-template-columns:1fr;gap:0}
  .sequence-visuel{position:relative;top:auto;aspect-ratio:4/3;margin-bottom:36px}
  .pas{min-height:0;padding:0 0 clamp(34px,7vw,52px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .planche{transition:opacity .3s}
  .pas{opacity:1}
  .pleine-cadre{width:100%;border-radius:0}
  .pleine-cadre img{transform:none}
}

/* =====================================================================
   LE NUANCIER — six grandes lames qui s'ouvrent au survol
   ===================================================================== */
.lames{display:flex;gap:10px;height:clamp(340px,42vw,480px)}
.lame{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:default;
  border-radius:36px 10px 36px 10px;
  transition:flex-grow .7s var(--ease);
  transform:rotate(var(--r,0deg));
}
.lame:nth-child(odd){--r:-.8deg}.lame:nth-child(even){--r:.8deg}
.lame:hover,.lame:focus-within{flex-grow:2.6}
.lame .echantillon{position:absolute;inset:0}
.lame .texte{position:absolute;left:0;right:0;bottom:0;padding:22px 20px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(20,18,54,.82));color:#fff}
.lame .texte b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.7vw,24px);line-height:1.1}
.lame .texte span{display:block;font-size:14px;color:rgba(255,255,255,.86);margin-top:6px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .5s,max-height .6s var(--ease)}
.lame:hover .texte span,.lame:focus-within .texte span{opacity:1;max-height:120px}
@media (max-width:900px){
  .lames{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:14px}
  .lame{aspect-ratio:3/4}
  .lame .texte span{opacity:1;max-height:none}
}

/* l'étiquette géante : le fil se coud pendant qu'on la traverse */
.pleine-etiquette{background:var(--bleu)}
.sceau-geant{width:100%;height:100%;display:block}
.sceau-geant .couture-fil{stroke-dashoffset:calc(600px - var(--ouvre,0) * 600px)}
.pleine-sceau::after{background:none}
.pleine-sceau .pleine-legende{color:rgba(255,255,255,.72);bottom:5%}

/* =====================================================================
   POURQUOI NOUS — des arguments chiffrés, sans carte ni cadre
   ===================================================================== */
.raisons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px) clamp(30px,4vw,64px)}
.raison{position:relative;padding-top:26px}
.raison::before{content:"";position:absolute;top:0;left:0;width:56px;height:5px;border-radius:3px;background:var(--jaune)}
.raison:nth-child(3n+2)::before{background:var(--orange)}
.raison:nth-child(3n)::before{background:var(--bleu)}
.raison b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(21px,2vw,26px);color:var(--bleu);margin-bottom:8px;line-height:1.1}
.raison p{margin:0;color:var(--plume);font-size:15.5px}
.section-indigo .raison b{color:#fff}
.section-indigo .raison p{color:rgba(255,255,255,.8)}
.section-indigo .raison:nth-child(3n)::before{background:#fff}
@media (max-width:900px){.raisons{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.raisons{grid-template-columns:1fr}}

/* =====================================================================
   LE BLOG — des projets racontés en entier
   ===================================================================== */
.journal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.billet{display:block;text-decoration:none;color:inherit}
.billet:nth-child(even){margin-top:clamp(0px,6vw,80px)}
.billet .cadre{display:block;position:relative;overflow:hidden;background:var(--bleu-nuit);
  aspect-ratio:var(--ratio,4/3);border-radius:var(--forme,44px 12px 44px 12px);
  box-shadow:0 26px 54px -28px rgba(37,34,95,.5);transition:border-radius 1s var(--ease)}
.billet:nth-child(4n+2){--forme:12px 44px 12px 44px;--ratio:4/3.4}
.billet:nth-child(4n+3){--forme:12px 44px 12px 44px;--ratio:4/3.4}
.billet img{width:100%;height:100%;object-fit:cover}
.billet .etiq{position:absolute;top:16px;left:18px;background:var(--jaune);color:var(--bleu);font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px}
.billet h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.1vw,29px);color:var(--bleu);margin:18px 0 8px;line-height:1.1}
.billet .meta{font-size:13.5px;color:var(--plume);display:block;margin-bottom:10px}
.billet p{margin:0;color:var(--plume);font-size:15.5px;max-width:46ch}
.billet .lien{margin-top:14px}
.billet:hover .cadre{border-radius:12px 44px 12px 44px}
@media (max-width:760px){.journal{grid-template-columns:1fr}.billet:nth-child(even){margin-top:0}}

/* l'article */
.article{max-width:760px;margin:0 auto}
.article h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,38px);color:var(--bleu);margin:0 0 14px;line-height:1.08}
.article p{color:var(--plume);font-size:clamp(16.5px,1.2vw,18px)}
.article ul{list-style:none;padding:0;margin:18px 0}
.article li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--encre);font-size:16px}
.article li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:3px;background:var(--orange);border-radius:2px}
.chapitre{margin:0 0 clamp(48px,7vw,86px)}
.chapitre:last-child{margin-bottom:0}
.chapitre .rang{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px}
.chapitre .rang i{width:34px;height:34px;border-radius:50%;background:var(--jaune);color:var(--bleu);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:15px;font-style:normal}
.chapitre .rang span{font-size:13.5px;font-weight:600;color:var(--orange-texte)}
.fiche-projet{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,3vw,44px);
  border:2px dashed rgba(37,34,95,.3);border-radius:var(--galet);padding:clamp(22px,3vw,32px);background:#fff;margin:0 0 clamp(40px,6vw,64px)}
.fiche-projet div{padding:14px 0;border-bottom:1px solid rgba(37,34,95,.12)}
.fiche-projet dt{font-size:13px;color:var(--plume);margin:0 0 4px;font-weight:500}
.fiche-projet dd{margin:0;font-family:var(--display);font-weight:600;font-size:18px;color:var(--bleu)}
@media (max-width:560px){.fiche-projet{grid-template-columns:1fr}}

/* le lecteur vidéo du rendu final */
.rendu{position:relative;border-radius:44px 12px 44px 12px;overflow:hidden;background:var(--bleu-nuit);aspect-ratio:16/9}
.rendu img{width:100%;height:100%;object-fit:cover}
.rendu::after{content:"";position:absolute;inset:0;background:rgba(16,14,44,.34)}
.rendu button{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.rendu .rond-lecture{width:86px;height:86px;border-radius:50%;background:var(--jaune);color:var(--bleu);display:grid;place-items:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.rendu button:hover .rond-lecture{transform:scale(1.1)}
.rendu .rond-lecture svg{width:26px;height:30px}
.rendu video,.rendu iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;object-fit:cover}
.rendu-absent{position:absolute;left:0;right:0;bottom:18px;z-index:2;text-align:center;color:rgba(255,255,255,.82);font-size:13.5px;margin:0}

/* =====================================================================
   FAQ EN PAGE — questions groupées par thème
   ===================================================================== */
.faq-theme{margin-bottom:clamp(40px,6vw,70px)}
.faq-theme:last-child{margin-bottom:0}
.faq-theme h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.4vw,31px);color:var(--bleu);margin:0 0 8px}
.faq-theme>p{color:var(--plume);margin:0 0 18px}


/* =====================================================================
   LA PHRASE — une affirmation seule, en très grand
   ===================================================================== */
.phrase{background:var(--bleu);color:#fff;position:relative;overflow:clip;text-align:center;
  padding:clamp(64px,9vw,120px) 0}
.phrase p{font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(28px,4.4vw,62px);line-height:1.06;max-width:20ch;margin:0 auto;letter-spacing:-.015em}
.phrase .marque-mot{color:var(--jaune)}
.phrase .suite{font-family:var(--texte);font-weight:500;font-size:clamp(16px,1.3vw,19px);
  color:rgba(255,255,255,.78);max-width:52ch;margin:26px auto 0;line-height:1.6}

/* =====================================================================
   À QUOI SERT UNE MASCOTTE — quatre effets, en colonnes hautes
   ===================================================================== */
.effets{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,40px)}
.effet{position:relative;padding-top:30px}
.effet::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;border-radius:3px;background:var(--creme-3)}
.effet::after{content:"";position:absolute;top:0;left:0;width:44%;height:5px;border-radius:3px;background:var(--jaune)}
.effet:nth-child(2)::after{background:var(--orange);width:58%}
.effet:nth-child(3)::after{background:var(--bleu);width:36%}
.effet:nth-child(4)::after{background:var(--turquoise);width:66%}
.effet b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.9vw,25px);color:var(--bleu);margin-bottom:10px;line-height:1.1}
.effet p{margin:0;color:var(--plume);font-size:15.5px}
@media (max-width:900px){.effets{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.effets{grid-template-columns:1fr}}

/* =====================================================================
   LES USAGES — une porte par contexte, vers les pages internes
   ===================================================================== */
.usages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.usage{
  position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  border-radius:var(--forme,36px 10px 36px 10px);background:var(--bleu);min-height:210px;
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .45s var(--ease),border-radius .8s var(--ease);
}
.usage:nth-child(3n+2){--forme:10px 36px 10px 36px;background:var(--orange-profond)}
.usage:nth-child(3n){background:var(--bleu-clair)}
.usage:nth-child(4){background:var(--jaune);color:var(--bleu)}
.usage:nth-child(5){background:var(--bleu-clair)}
.usage:nth-child(6){--forme:10px 36px 10px 36px;background:var(--orange-profond)}
.usage b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.1;color:#fff;position:relative;z-index:1}
.usage:nth-child(4) b{color:var(--bleu)}
.usage span{display:block;font-size:14.5px;margin-top:8px;color:rgba(255,255,255,.82);position:relative;z-index:1}
.usage:nth-child(4) span{color:var(--bleu);opacity:.85}
.usage .fleche{position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.16);display:grid;place-items:center;z-index:1;transition:transform .4s var(--ease),background .3s}
.usage:nth-child(4) .fleche{background:rgba(37,34,95,.14)}
.usage .fleche svg{width:16px;height:16px}
.usage:hover{transform:translateY(-6px);border-radius:10px 36px 10px 36px}
.usage:hover .fleche{transform:translateX(4px);background:rgba(255,255,255,.3)}
@media (max-width:900px){.usages{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.usages{grid-template-columns:1fr}}

/* =====================================================================
   LE DÉLAI — l'atelier est souvent complet
   ===================================================================== */
.alerte-delai{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--jaune-doux);border-radius:26px 8px 26px 8px;padding:20px 24px;
  margin:0 0 clamp(24px,3vw,34px);
}
.alerte-delai svg{width:30px;height:30px;flex:none;margin-top:2px}
.alerte-delai b{display:block;font-family:var(--display);font-weight:600;font-size:18px;color:var(--bleu);margin-bottom:4px}
.alerte-delai p{margin:0;font-size:15px;color:var(--encre)}
.sur-indigo .alerte-delai{background:rgba(255,255,255,.1)}
.sur-indigo .alerte-delai b{color:var(--jaune)}
.sur-indigo .alerte-delai p{color:rgba(255,255,255,.86)}

/* les vidéos remontent en haut : la section a besoin de respirer moins */
.videos-haut{padding-top:clamp(40px,5vw,68px)}

/* =====================================================================
   LE SCEAU — la frimousse jaune et ses étoiles, au-dessus des titres.
   Reprend le repère de l'univers Peluches sur Mesure.
   ===================================================================== */
.sceau-titre{display:block;width:96px;height:64px;margin:0 auto 16px;position:relative}
.entete-gauche .sceau-titre{margin-left:0}
.sceau-titre svg{width:100%;height:100%;overflow:visible}
.sceau-titre .frimousse{transform-origin:50% 62%}
.in .sceau-titre .frimousse,.sceau-titre.in .frimousse{animation:sceau-pop .7s cubic-bezier(.34,1.7,.5,1) both}
.in .sceau-titre .etoile,.sceau-titre.in .etoile{animation:etoile-pop .5s cubic-bezier(.34,1.7,.5,1) both}
.in .sceau-titre .etoile:nth-of-type(2),.sceau-titre.in .etoile:nth-of-type(2){animation-delay:.12s}
.in .sceau-titre .etoile:nth-of-type(3),.sceau-titre.in .etoile:nth-of-type(3){animation-delay:.22s}
@keyframes sceau-pop{from{opacity:0;transform:scale(.3) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes etoile-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}

/* le surlignage jaune : peint ligne par ligne, il suit les retours à la ligne */
.surligne{
  display:inline;padding:.04em .16em;border-radius:.1em;
  background-image:linear-gradient(var(--jaune),var(--jaune));
  background-repeat:no-repeat;background-position:0 58%;background-size:0% 82%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s var(--ease),color .4s .15s;
}
.in .surligne,.surligne.in{background-size:100% 82%}
/* sur fond sombre le mot passe en bleu : blanc sur jaune serait illisible */
.diapo .surligne.in,.sur-indigo .surligne.in,.phrase .surligne.in,.in .surligne{color:var(--bleu)}

/* =====================================================================
   LE SLIDER — une diapositive à la fois, dont les éléments entrent en
   cascade. Rien ne bouge « en même temps » : tout est chorégraphié.
   ===================================================================== */
.scene{position:relative;background:var(--bleu);color:#fff;overflow:clip;--teinte:#3B3789;isolation:isolate}
.diapos{position:relative;min-height:min(80vh,720px)}
.diapo{
  position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(20px,3vw,48px);align-items:center;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .5s var(--ease-doux),visibility 0s .5s;
}
.diapo.actif{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .5s var(--ease-doux)}
.diapo.sort{opacity:0;transition:opacity .4s var(--ease-doux)}
.diapo-texte{position:relative;z-index:5}
.diapo-texte>*{opacity:0}
.diapo.actif .diapo-texte>*{animation:entre-bas .8s cubic-bezier(.2,.9,.25,1) both}
.diapo.actif .diapo-texte>*:nth-child(1){animation-delay:.06s}
.diapo.actif .diapo-texte>*:nth-child(2){animation-delay:.12s;opacity:1;animation:none}
.diapo.actif .diapo-texte>*:nth-child(3){animation-delay:.62s}
.diapo.actif .diapo-texte>*:nth-child(4){animation-delay:.74s}
@keyframes entre-bas{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* un mot = un masque. Ils montent l'un après l'autre. */
.mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.mot>i{display:inline-block;font-style:normal;transform:translateY(115%)}
.diapo.actif .mot>i{animation:mot-monte .8s cubic-bezier(.2,.95,.25,1) both;animation-delay:calc(.16s + var(--i,0) * .06s)}
@keyframes mot-monte{from{transform:translateY(115%) rotate(4deg)}to{transform:none}}

.diapo h2,.diapo .h-slide{
  font-family:var(--display);font-weight:700;color:#fff;margin:14px 0 16px;
  font-size:clamp(34px,4.2vw,62px);line-height:1.02;letter-spacing:-.022em;max-width:14ch;
}
.diapo .lede{color:rgba(255,255,255,.88);max-width:38ch;margin-bottom:26px;font-size:clamp(16px,1.15vw,18px)}

/* la photo : un galet géant, qui entre en zoomant puis respire lentement */
.diapo-photo{position:relative;justify-self:start;width:120%;max-width:none}
.diapo-cadre{
  position:relative;overflow:hidden;aspect-ratio:5/4.7;
  border-radius:56% 44% 52% 48%/48% 52% 48% 52%;
  opacity:0;
}
.diapo.actif .diapo-cadre{animation:cadre-entre 1.05s cubic-bezier(.2,.92,.25,1) .04s both}
@keyframes cadre-entre{
  from{opacity:0;transform:scale(.8) rotate(-6deg) translateX(6%)}
  to{opacity:1;transform:none}
}
.diapo-cadre img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.diapo.actif .diapo-cadre img{animation:respire 9s ease-out .5s both}
@keyframes respire{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.26) translate(-1.5%,-1.5%)}}

/* l'étiquette du personnage, qui claque à la fin de la cascade */
.diapo-etiquette{
  position:absolute;left:-4%;bottom:11%;z-index:3;
  background:var(--creme);color:var(--bleu);border-radius:999px;padding:12px 22px;
  font-family:var(--display);font-weight:600;font-size:clamp(14px,1.15vw,17px);line-height:1.15;
  box-shadow:0 5px 0 #D3CFC0,0 22px 40px -18px rgba(8,6,26,.8);
  opacity:0;
}
.diapo-etiquette small{display:block;font-family:var(--texte);font-weight:500;font-size:12.5px;color:var(--plume);margin-top:2px}
.diapo.actif .diapo-etiquette{animation:etiq-pop .6s cubic-bezier(.34,1.7,.5,1) .62s both}
@keyframes etiq-pop{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:rotate(-3deg)}}

/* les étincelles autour de la photo */
.diapo-tache{
  position:absolute;inset:1% -9% -9% -7%;z-index:0;border-radius:52% 48% 46% 54%/48% 52% 48% 52%;
  background:var(--teinte-vive,var(--jaune));opacity:1;border:var(--trait) solid var(--encre-trait);
  transform:scale(.5);
}
.diapo.actif .diapo-tache{animation:tache 1.1s cubic-bezier(.2,.9,.25,1) both}
@keyframes tache{from{transform:scale(.55) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}

/* la pastille qui tourne en arrivant */
.diapo-macaron{
  position:absolute;top:2%;left:-2%;z-index:4;width:clamp(96px,9vw,132px);height:clamp(96px,9vw,132px);
  border-radius:50%;background:var(--jaune);color:var(--bleu);display:grid;place-items:center;text-align:center;
  font-family:var(--display);font-weight:700;font-size:clamp(13px,1.05vw,15px);line-height:1.1;
  box-shadow:0 6px 0 #C79E00,0 22px 40px -18px rgba(8,6,26,.7);opacity:0;padding:8px;
}
.diapo.actif .diapo-macaron{animation:macaron .8s cubic-bezier(.34,1.6,.5,1) .78s both}
@keyframes macaron{from{opacity:0;transform:scale(.2) rotate(-160deg)}to{opacity:1;transform:scale(1) rotate(-9deg)}}

.diapo-etincelles{position:absolute;inset:-6% -4%;z-index:2;pointer-events:none;overflow:visible}
.diapo-etincelles path{fill:var(--jaune);opacity:0}
.diapo.actif .diapo-etincelles path{animation:etoile-pop .55s cubic-bezier(.34,1.7,.5,1) both}
.diapo.actif .diapo-etincelles path:nth-child(1){animation-delay:.5s}
.diapo.actif .diapo-etincelles path:nth-child(2){animation-delay:.62s}
.diapo.actif .diapo-etincelles path:nth-child(3){animation-delay:.74s}
.diapo.actif .diapo-etincelles path:nth-child(4){animation-delay:.86s}

.scene-in{position:relative;z-index:2;padding-block:clamp(26px,3.4vw,52px) clamp(96px,10vw,140px)}
.page-accueil .scene-in{padding-block-start:calc(112px + clamp(26px,3.4vw,52px))}

/* les commandes */
.diapo-cmd{position:relative;z-index:6;display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3vw,34px)}
.diapo-cmd .puces{display:flex;gap:8px;margin-right:auto}
.diapo-cmd .puces button{
  width:34px;height:7px;border-radius:4px;border:0;background:rgba(255,255,255,.26);cursor:pointer;padding:0;
  transition:background .3s,width .4s var(--ease);
}
.diapo-cmd .puces button[aria-current="true"]{background:var(--jaune);width:52px}
.diapo-cmd .fleche,.diapo-cmd .pause{
  width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;color:#fff;
  display:grid;place-items:center;cursor:pointer;position:relative;
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.34,1.7,.5,1);
}
.diapo-cmd .fleche:hover,.diapo-cmd .pause:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:scale(1.1)}
.diapo-cmd svg{width:19px;height:19px}
.pause .anneau{position:absolute;inset:-2px;width:auto;height:auto;transform:rotate(-90deg)}
.pause .anneau circle{fill:none;stroke:var(--jaune);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pause.joue .anneau circle{animation:anneau var(--duree-cycle,7s) linear both}
@keyframes anneau{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pause .ico-pause,.pause .ico-lecture{position:absolute}
.pause .ico-lecture{display:none}
.pause[aria-pressed="true"] .ico-pause{display:none}
.pause[aria-pressed="true"] .ico-lecture{display:block}

.scene-forme{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(60px,8vw,120px);z-index:3}
.scene-forme path{fill:var(--creme)}

@media (max-width:960px){
  .diapos{min-height:0}
  .diapo{position:relative;inset:auto;grid-template-columns:1fr;gap:32px;display:none}
  .diapo.actif{display:grid}
  .diapo-photo{justify-self:stretch;width:100%;order:-1}
  .diapo-cadre{aspect-ratio:4/3.1}
  .diapo-macaron{top:-4%;left:2%;width:88px;height:88px;font-size:12.5px}
  .diapo-etiquette{left:8px;bottom:-16px}
  .diapo h2,.diapo .h-slide{max-width:none;font-size:clamp(31px,7vw,44px)}
}

@media (prefers-reduced-motion:reduce){
  .mot>i{transform:none}
  .diapo-macaron,.diapo-tache,.diapo-etiquette,.diapo-cadre{opacity:1}
  .diapo.actif .mot>i,.diapo.actif .diapo-tache,.diapo.actif .diapo-macaron,
  .diapo.actif .diapo-texte>*,.diapo.actif .diapo-cadre,.diapo.actif .diapo-cadre img,
  .diapo.actif .diapo-etiquette,.diapo.actif .diapo-etincelles path{animation:none;opacity:1;transform:none}
  .pause.joue .anneau circle{animation:none;stroke-dashoffset:0}
  .sceau-titre .frimousse,.sceau-titre .etoile{animation:none!important}
  .surligne{background-size:100% 82%;transition:none}
}

/* =====================================================================
   LES RÉFÉRENCES — fond neutre, une ligne, les logos posés à même le
   fond. Pas de cadre autour : ce sont les logos qui doivent porter.
   ===================================================================== */
.references{
  position:relative;background:var(--creme);color:var(--bleu);overflow:hidden;
  padding:clamp(20px,2.2vw,30px) 0 clamp(22px,2.4vw,32px);
  border-top:2px solid var(--creme-3);border-bottom:2px solid var(--creme-3);
}
.references-entete{text-align:center;margin-bottom:clamp(10px,1.3vw,16px)}
.references-titre{
  display:inline-block;margin:0;color:var(--bleu);
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.35vw,19px);line-height:1.2;
  max-width:min(92vw,56ch);
}
.references-titre small{
  display:block;font-family:var(--texte);font-weight:700;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange-texte);margin-bottom:5px;
}
.references-note{margin:clamp(8px,1.1vw,13px) 0 0;text-align:center;font-size:11px;color:var(--plume)}

.ruban{position:relative;overflow:hidden;padding:10px 0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ruban-piste{display:flex;align-items:center;gap:clamp(34px,4.4vw,68px);width:max-content;
  animation:ruban 46s linear infinite}
.references:hover .ruban-piste{animation-play-state:paused}
@keyframes ruban{to{transform:translateX(-50%)}}

.reference{
  position:relative;display:flex;align-items:center;justify-content:center;flex:none;
  opacity:.78;transition:opacity .3s;
  animation:ondule 4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.3s);
}
@keyframes ondule{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.reference:hover{opacity:1}
.reference img{height:clamp(44px,4.2vw,58px);width:auto;max-width:none;display:block}
.reference span{font-family:var(--display);font-weight:700;font-size:16px;color:var(--bleu);white-space:nowrap}
.reference.a-logo span{display:none}
/* un petit point de couture entre chaque logo */
.reference::after{
  content:"";position:absolute;right:calc(-1 * clamp(17px,2.2vw,34px));top:50%;margin-top:-4px;
  width:8px;height:8px;border-radius:50%;background:var(--jaune);
  box-shadow:0 0 0 2px var(--encre-trait);
}
.reference:nth-child(3n)::after{background:var(--orange)}
.reference:nth-child(3n+2)::after{background:var(--turquoise)}

@media (prefers-reduced-motion:reduce){
  .ruban-piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:22px}
  .ruban-piste .double{display:none}
  .reference{animation:none}
  .reference::after{display:none}
}

/* =====================================================================
   PLUS DE RESSORT DANS LES APPARITIONS DE PAGE
   ===================================================================== */
.rv.in{animation:pop-haut .8s cubic-bezier(.2,.9,.25,1) both}
.rv-g.in{animation:pop-gauche .8s cubic-bezier(.2,.9,.25,1) both}
.rv-d.in{animation:pop-droite .8s cubic-bezier(.2,.9,.25,1) both}
.rv-groupe.in>*{animation:pop-haut .75s cubic-bezier(.34,1.5,.5,1) both}
@keyframes pop-haut{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pop-gauche{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes pop-droite{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

/* les cartes rebondissent au survol */
.usage:hover{transform:translateY(-8px) scale(1.02);border-radius:10px 36px 10px 36px}
.usage{box-shadow:0 6px 0 rgba(0,0,0,.16)}
.billet .cadre{box-shadow:0 8px 0 rgba(37,34,95,.12),0 26px 54px -28px rgba(37,34,95,.5)}
.effet b,.raison b{letter-spacing:-.01em}

/* =====================================================================
   ON DÉCALE — les colonnes ne démarrent plus toutes à la même hauteur.
   ===================================================================== */
.effets .effet:nth-child(2){margin-top:clamp(18px,3vw,46px)}
.effets .effet:nth-child(3){margin-top:clamp(34px,5vw,84px)}
.effets .effet:nth-child(4){margin-top:clamp(10px,2vw,30px)}
.raisons .raison:nth-child(2){margin-top:clamp(14px,2.4vw,38px)}
.raisons .raison:nth-child(3){margin-top:clamp(28px,4vw,64px)}
.raisons .raison:nth-child(5){margin-top:clamp(14px,2.4vw,38px)}
.raisons .raison:nth-child(6){margin-top:clamp(28px,4vw,64px)}
@media (max-width:900px){
  .effets .effet,.raisons .raison{margin-top:0!important}
}

/* les vignettes vidéo : hauteurs et inclinaisons franchement différentes */
.tk:nth-child(4n+1){--dy:34px;--rot:-3.4deg}
.tk:nth-child(4n+2){--dy:-22px;--rot:2.6deg}
.tk:nth-child(4n+3){--dy:16px;--rot:-2deg}
.tk:nth-child(4n+4){--dy:44px;--rot:3.2deg}
.tk{box-shadow:0 8px 0 rgba(20,18,54,.18),0 20px 44px -18px rgba(15,13,40,.55)}

/* un titre de section peut se décaler du centre */
.entete-decale{max-width:760px;margin-left:0;text-align:left}
.entete-decale .sceau-titre{margin-left:0}
.entete-droite{max-width:700px;margin-right:0;margin-left:auto;text-align:right}
.entete-droite .sceau-titre{margin-left:auto;margin-right:0}

/* =====================================================================
   LA COUPE EN BIAIS — la transition franche du site Peluches sur Mesure
   ===================================================================== */
.biais{position:relative}
.biais::before,.biais::after{content:"";position:absolute;left:0;width:100%;height:clamp(44px,5.5vw,86px);background:inherit;z-index:1}
.biais::before{top:0;transform:translateY(-99%);clip-path:polygon(0 100%,100% 0,100% 100%)}
.biais::after{bottom:0;transform:translateY(99%);clip-path:polygon(0 0,100% 0,0 100%)}
.biais>*{position:relative;z-index:2}

/* un liseré jaune qui traverse en biais, comme sur le site peluches */
.eclat-jaune{position:absolute;left:0;width:min(38%,460px);height:clamp(34px,4vw,64px);background:var(--jaune);z-index:3;pointer-events:none}
.eclat-jaune.haut{top:0;transform:translateY(-58%) rotate(-2.4deg) translateX(-6%)}
.eclat-jaune.bas{bottom:0;transform:translateY(58%) rotate(-2.4deg) translateX(-6%)}

/* =====================================================================
   LES CHIFFRES — trois repères en très gros, décalés
   ===================================================================== */
.compteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);align-items:end}
.compteur{position:relative}
.compteur:nth-child(2){padding-top:clamp(20px,3vw,48px)}
.compteur:nth-child(3){padding-top:clamp(8px,1.6vw,24px)}
.compteur b{display:block;font-family:var(--display);font-weight:700;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(52px,8vw,110px);color:var(--jaune)}
.compteur span{display:block;margin-top:12px;font-size:15.5px;color:rgba(255,255,255,.82);max-width:26ch}
.compteur:nth-child(2) b{color:var(--orange)}
.compteur:nth-child(3) b{color:#fff}
@media (max-width:760px){.compteurs{grid-template-columns:1fr;gap:34px}.compteur{padding-top:0!important}}

/* =====================================================================
   LE TRAIT D'ENCRE — cadres cernés et ombres dures, sans flou.
   C'est ce qui fait basculer une page « propre » vers le dessin animé.
   ===================================================================== */
.diapo-cadre{
  border:var(--trait) solid var(--encre-trait);
  box-shadow:10px 12px 0 rgba(20,18,54,.45);
}
.diapo-etiquette{border:var(--trait) solid var(--encre-trait);box-shadow:5px 6px 0 var(--encre-trait)}
.diapo-macaron{border:var(--trait) solid var(--encre-trait);box-shadow:5px 6px 0 var(--encre-trait)}
.pastille{border:2px solid rgba(37,34,95,.22)}
.pastille-claire{border-color:rgba(255,255,255,.28)}

/* les cartes deviennent des vignettes cernées */
.effet{
  padding:26px 24px 24px;background:#fff;border:var(--trait) solid var(--encre-trait);
  border-radius:26px 8px 26px 8px;box-shadow:var(--dur);
  transform:rotate(var(--r,0deg));transition:transform .35s var(--ease),box-shadow .35s;
}
.effet::before,.effet::after{display:none}
.effet:nth-child(1){--r:-1.4deg}.effet:nth-child(2){--r:1.2deg;border-radius:8px 26px 8px 26px}
.effet:nth-child(3){--r:-1deg}.effet:nth-child(4){--r:1.6deg;border-radius:8px 26px 8px 26px}
.effet:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:9px 9px 0 var(--encre-trait)}
.effet b{position:relative;padding-left:0;font-size:clamp(20px,1.9vw,25px)}
.effet b::before{
  content:"";display:block;width:44px;height:8px;border-radius:4px;margin-bottom:12px;
  background:var(--jaune);border:2px solid var(--encre-trait);
}
.effet:nth-child(2) b::before{background:var(--orange)}
.effet:nth-child(3) b::before{background:var(--bleu)}
.effet:nth-child(4) b::before{background:var(--turquoise)}

.raison{
  padding:24px 22px 22px;background:#fff;border:var(--trait) solid var(--encre-trait);
  border-radius:24px 8px 24px 8px;box-shadow:var(--dur);
  transform:rotate(var(--r,0deg));transition:transform .35s var(--ease),box-shadow .35s;
}
.raison::before{width:40px;height:8px;top:24px;left:22px;border:2px solid var(--encre-trait);border-radius:4px}
.raison b{margin-top:26px;color:var(--bleu)}
.raison p{color:var(--plume)}
.raison:nth-child(odd){--r:-1.2deg}.raison:nth-child(even){--r:1.2deg;border-radius:8px 24px 8px 24px}
.raison:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:9px 9px 0 var(--encre-trait)}
.section-indigo .raison{background:var(--creme)}
.section-indigo .raison b{color:var(--bleu)}
.section-indigo .raison p{color:var(--plume)}
.section-indigo .raison:nth-child(3n)::before{background:var(--bleu)}
.section-indigo .raison{box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.raisons{gap:clamp(20px,2.6vw,32px)}

.usage{border:var(--trait) solid var(--encre-trait);box-shadow:var(--dur)}
.usage:hover{box-shadow:9px 9px 0 var(--encre-trait)}
.compteur b{-webkit-text-stroke:3px var(--encre-trait);paint-order:stroke fill}

/* photos cernées */
.oeuvre .cadre,.travail .cadre,.billet .cadre,.duo-img,.bandeau-visuel,.tk,.pleine-cadre,.vue,.defile-piste>span{
  border:var(--trait) solid var(--encre-trait);
}
.oeuvre .cadre{box-shadow:10px 12px 0 rgba(20,18,54,.5)}
.travail .cadre,.billet .cadre{box-shadow:8px 9px 0 rgba(37,34,95,.22)}
.tk{box-shadow:6px 7px 0 rgba(20,18,54,.5)}
.duo-img{box-shadow:9px 10px 0 rgba(37,34,95,.2)}
.oeuvre .mention,.travail .mention,.alerte-delai,.fiche-tech,.fiche-projet,.lame,.matiere,.public,.repere{
  border:var(--trait) solid var(--encre-trait);
}
.oeuvre .mention,.alerte-delai,.fiche-tech,.fiche-projet,.lame,.matiere,.public,.repere{
  box-shadow:5px 6px 0 rgba(37,34,95,.22);
}
.oeuvre .secteur,.travail .secteur,.billet .etiq{border:2.5px solid var(--encre-trait);box-shadow:3px 3px 0 var(--encre-trait)}
.etape .num,.etape-v .num,.chapitre .rang i,.pas .rang i{border:2.5px solid var(--encre-trait);box-shadow:3px 4px 0 var(--encre-trait)}
.sceau-titre{width:110px;height:74px}

/* le fond crème reçoit un semis de pois, comme un papier à motifs */
.section-creme2,.mur{
  background-image:radial-gradient(circle,rgba(37,34,95,.09) 2px,transparent 2.4px);
  background-size:26px 26px;background-color:var(--creme-2);
}
.mur{background-color:transparent}

/* =====================================================================
   LE FESTON — une découpe en arcs, plus enfantine que la vague
   ===================================================================== */
.feston{position:absolute;left:0;width:100%;height:clamp(34px,4.4vw,66px);display:block;pointer-events:none;z-index:2}
.feston path{fill:var(--creme)}
.feston.haut{top:-1px}
.feston.bas{bottom:-1px;transform:rotate(180deg)}

/* l'étiquette de section : la pastille devient un autocollant penché */
.entete .pastille{
  transform:rotate(-2deg);background:var(--jaune);color:var(--bleu);border:2.5px solid var(--encre-trait);
  box-shadow:3px 4px 0 var(--encre-trait);font-weight:700;padding:8px 20px 8px 16px;
}
.entete .pastille::before{background:var(--orange)}
.sur-indigo .entete .pastille,.section-indigo .entete .pastille{background:var(--jaune);color:var(--bleu);border-color:var(--encre-trait)}

@media (max-width:900px){
  .effet,.raison{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .effet:hover,.raison:hover{transform:rotate(var(--r,0deg))}
}

/* =====================================================================
   L'ARGUMENTAIRE — un seul bloc à la place de « la phrase », « à quoi
   ça sert » et « pourquoi nous ». Chaque argument arrive d'un côté,
   avec son numéro géant en contour.
   ===================================================================== */
.argu-titre{
  font-family:var(--display);font-weight:700;color:#fff;text-align:center;
  font-size:clamp(30px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;
  max-width:19ch;margin:0 auto clamp(14px,1.8vw,22px);
}
.argu-chapo{text-align:center;color:rgba(255,255,255,.8);max-width:56ch;margin:0 auto clamp(34px,4.4vw,56px);font-size:clamp(15.5px,1.2vw,17.5px)}

.argus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);align-items:start;position:relative}
.argu{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,44px);
  align-items:center;background:var(--creme);color:var(--bleu);
  border:var(--trait) solid var(--encre-trait);border-radius:34px 10px 34px 10px;
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px);
  box-shadow:7px 8px 0 rgba(0,0,0,.42);
  transform:rotate(var(--r,0deg)) translateY(var(--dy,0));
  transition:transform .4s var(--ease),box-shadow .4s;
  opacity:0;
}
.argu:nth-child(odd){--r:-2.2deg}
.argu:nth-child(even){--r:2deg;border-radius:10px 34px 10px 34px;background:var(--jaune-pale)}
.argu:nth-child(2){--dy:34px}
.argu:nth-child(3){--dy:-14px}
.argu:nth-child(4){--dy:22px}
.argu:nth-child(5){--dy:-8px}
.argu:nth-child(6){--dy:28px}
.argu:nth-child(4n+3){background:var(--orange-profond);color:#fff}
.argu:nth-child(4n+3) .argu-num{-webkit-text-stroke-color:#fff;color:transparent}
.argu:nth-child(4n+3) p{color:#fff;opacity:.92}
.argus.in .argu{animation:argu-entre .8s cubic-bezier(.2,.95,.3,1) both}
.argus.in .argu:nth-child(1){animation-delay:.05s}
.argus.in .argu:nth-child(2){animation-delay:.16s}
.argus.in .argu:nth-child(3){animation-delay:.27s}
.argus.in .argu:nth-child(4){animation-delay:.38s}
.argus.in .argu:nth-child(5){animation-delay:.49s}
.argus.in .argu:nth-child(6){animation-delay:.60s}
@keyframes argu-entre{
  from{opacity:0;transform:translateX(var(--de,-56px)) rotate(var(--r,0deg)) scale(.93)}
  to{opacity:1;transform:rotate(var(--r,0deg)) translateY(var(--dy,0))}
}
.argu:nth-child(even){--de:56px}
.argu:hover{transform:rotate(0) translateY(calc(var(--dy,0px) - 4px));box-shadow:11px 12px 0 rgba(0,0,0,.42)}
.argu-num{
  font-family:var(--display);font-weight:700;font-size:clamp(38px,4vw,58px);line-height:.82;
  color:transparent;-webkit-text-stroke:3px var(--encre-trait);letter-spacing:-.04em;
}
.argu b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,25px);line-height:1.06;margin-bottom:7px;letter-spacing:-.02em}
.argu p{margin:0;font-size:clamp(14.5px,1.1vw,16.5px);color:var(--bleu);opacity:.86;max-width:46ch;line-height:1.5}
@media (max-width:820px){
  .argus{grid-template-columns:1fr}
  .argu{--dy:0px!important;--r:0deg!important}
}
@media (max-width:560px){
  .argu{grid-template-columns:1fr;gap:4px}
  .argu-num{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  .argu{opacity:1}
  .argus.in .argu{animation:none}
  .argu:hover{transform:rotate(var(--r,0deg))}
}

/* la ligne de chiffres, intégrée en fin d'argumentaire */
.argu-chiffres{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,64px);margin-top:clamp(44px,6vw,78px)}
.argu-chiffre{text-align:center}
.argu-chiffre b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(44px,6vw,78px);line-height:.9;color:var(--jaune);-webkit-text-stroke:3px var(--encre-trait);paint-order:stroke fill}
.argu-chiffre:nth-child(2) b{color:var(--orange)}
.argu-chiffre:nth-child(3) b{color:#fff}
.argu-chiffre span{display:block;margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.8);max-width:22ch}

/* =====================================================================
   LES TÉMOIGNAGES — des bulles de bande dessinée, penchées
   ===================================================================== */
.temoins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.temoin{
  position:relative;background:#fff;border:var(--trait) solid var(--encre-trait);
  border-radius:30px 30px 30px 8px;padding:clamp(24px,2.6vw,32px);
  box-shadow:var(--dur);transform:rotate(var(--r,0deg));
  transition:transform .4s var(--ease),box-shadow .4s;
}
.temoin::after{
  content:"";position:absolute;left:34px;bottom:-19px;width:26px;height:26px;background:#fff;
  border-right:var(--trait) solid var(--encre-trait);border-bottom:var(--trait) solid var(--encre-trait);
  transform:rotate(45deg) skew(-8deg,-8deg);
}
.temoin:nth-child(1){--r:-1.6deg}
.temoin:nth-child(2){--r:1.2deg;margin-top:clamp(14px,2.4vw,36px)}
.temoin:nth-child(3){--r:-1deg}
.temoin:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:9px 9px 0 var(--encre-trait)}
.temoin-etoiles{display:flex;gap:4px;margin-bottom:16px}
.temoin-etoiles svg{width:20px;height:20px;fill:var(--jaune);stroke:var(--encre-trait);stroke-width:1.6}
.temoin blockquote{margin:0 0 20px;font-family:var(--display);font-weight:500;
  font-size:clamp(17px,1.5vw,20px);line-height:1.35;color:var(--bleu)}
.temoin-qui{display:block;font-size:14px;color:var(--plume)}
.temoin-qui b{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--bleu)}
.temoin-note{margin:clamp(30px,4vw,48px) 0 0;text-align:center;font-size:13.5px;color:var(--plume)}
@media (max-width:900px){.temoins{grid-template-columns:1fr}.temoin{margin-top:0!important}}
@media (prefers-reduced-motion:reduce){.temoin:hover{transform:rotate(var(--r,0deg))}}

/* =====================================================================
   LES DEUX ATELIERS — plus visible : deux panneaux cernés, des emblèmes,
   et une entrée en cascade.
   ===================================================================== */
.deux-voies{grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);align-items:stretch}
.voie{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3vw,38px) clamp(30px,3.4vw,42px);
  background:var(--creme);border:var(--trait) solid var(--encre-trait);
  border-radius:38px 12px 38px 12px;box-shadow:var(--dur);
  transform:rotate(var(--r,-.8deg));transition:transform .4s var(--ease),box-shadow .4s;
}
.voie ul{margin:20px 0 24px;flex:1}
.voie>a:last-child,.voie>.btn:last-child{align-self:flex-start;margin-top:auto}
.voie .lien{align-self:flex-start;margin-top:auto}
.voie:hover{transform:rotate(0) translate(-4px,-4px);box-shadow:10px 10px 0 var(--encre-trait)}
.voie-france{--r:.8deg;border-radius:12px 38px 12px 38px;background:var(--bleu);color:#fff}
.voie .emblemes{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;max-width:calc(100% - 96px)}
.embleme{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;
  background:#fff;border:2.5px solid var(--encre-trait);border-radius:999px;
  box-shadow:3px 4px 0 var(--encre-trait);
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--bleu);white-space:nowrap;
  transform:rotate(var(--er,0deg));
}
.embleme:nth-child(2){--er:2deg}
.embleme:nth-child(3){--er:-2deg}
.embleme svg{width:26px;height:26px;flex:none}
.drapeau{width:30px;height:20px;border-radius:3px;overflow:hidden;border:1.5px solid var(--encre-trait);display:flex;flex:none}
.drapeau i{flex:1}
.drapeau i:nth-child(1){background:#0B3D91}.drapeau i:nth-child(2){background:#fff}.drapeau i:nth-child(3){background:#C8102E}
.fil-vertical{display:none}
.voie .etiquette{font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.voie h3{font-size:clamp(24px,2.7vw,34px);letter-spacing:-.015em}
.voie li::before{height:4px;border-radius:2px}
.badge-vendee{
  top:-26px;right:-14px;width:108px;height:108px;font-size:13.5px;
  border:var(--trait) solid var(--encre-trait);box-shadow:5px 6px 0 var(--encre-trait);
  transform:rotate(9deg);
}
.badge-vendee .coeur{width:30px;height:30px;margin-bottom:3px}
.deux-voies .voie{opacity:0}
.deux-voies.in .voie{animation:voie-entre .85s cubic-bezier(.2,.95,.3,1) both}
.deux-voies.in .voie:nth-child(2){animation-delay:.16s}
@keyframes voie-entre{from{opacity:0;transform:translateY(46px) rotate(var(--r,-.8deg)) scale(.95)}to{opacity:1;transform:rotate(var(--r,-.8deg))}}
@media (max-width:900px){.deux-voies{grid-template-columns:1fr}.badge-vendee{top:-26px;right:16px;width:88px;height:88px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.deux-voies .voie{opacity:1}.deux-voies.in .voie{animation:none}.voie:hover{transform:rotate(var(--r,-.8deg))}}

/* =====================================================================
   ILS TRAVAILLENT DÉJÀ POUR EUX — la photo et la réplique du client
   dans une bulle de bande dessinée, sous chaque personnage.
   ===================================================================== */
.duos-bd{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(34px,5vw,74px) clamp(28px,4vw,56px)}
.duo-bd{position:relative}
.duo-bd:nth-child(even){margin-top:clamp(20px,5vw,74px)}
.duo-bd .photo{
  position:relative;display:block;overflow:hidden;background:var(--bleu-nuit);
  aspect-ratio:var(--ratio,4/3.4);border-radius:var(--forme,40px 12px 40px 12px);
  border:var(--trait) solid var(--encre-trait);box-shadow:10px 11px 0 rgba(37,34,95,.22);
  transform:rotate(var(--r,-1.2deg));transition:transform .45s var(--ease)
}
.duo-bd:nth-child(4n+2) .photo{--forme:12px 40px 12px 40px;--r:1.4deg;--ratio:4/4.2}
.duo-bd:nth-child(4n+3) .photo{--forme:999px 999px 26px 26px;--r:1deg;--ratio:4/4.2}
.duo-bd:nth-child(4n+4) .photo{--forme:52% 48% 46% 54%/48% 52% 48% 52%;--r:-1.6deg}
.duo-bd:hover .photo{transform:rotate(0) translateY(-5px)}
.duo-bd .photo img{width:100%;height:100%;object-fit:cover}
.duo-bd .secteur{position:absolute;top:16px;left:18px;z-index:2;background:var(--jaune);color:var(--bleu);
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;border:2.5px solid var(--encre-trait);
  box-shadow:3px 3px 0 var(--encre-trait);transform:rotate(-3deg)}
.duo-bd .nom{display:block;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,25px);
  color:var(--bleu);margin:22px 0 2px;line-height:1.1}
.duo-bd .client{display:block;font-size:14px;color:var(--plume);margin-bottom:16px}
.bulle-bd{
  position:relative;background:#fff;border:var(--trait) solid var(--encre-trait);
  border-radius:26px 26px 26px 8px;padding:20px 22px;box-shadow:var(--dur);
  transform:rotate(var(--br,.8deg));transition:transform .4s var(--ease)
}
.duo-bd:nth-child(even) .bulle-bd{--br:-.8deg;border-radius:26px 26px 8px 26px}
.duo-bd:hover .bulle-bd{transform:rotate(0)}
.bulle-bd::after{content:"";position:absolute;left:32px;top:-15px;width:24px;height:24px;background:#fff;
  border-left:var(--trait) solid var(--encre-trait);border-top:var(--trait) solid var(--encre-trait);
  transform:rotate(45deg) skew(-8deg,-8deg)}
.duo-bd:nth-child(even) .bulle-bd::after{left:auto;right:32px}
.bulle-bd p{margin:0 0 14px;font-family:var(--display);font-weight:500;font-size:clamp(16px,1.4vw,19px);
  line-height:1.34;color:var(--bleu)}
.bulle-bd .qui{display:block;font-size:13.5px;color:var(--plume)}
.bulle-bd .qui b{font-family:var(--display);font-weight:600;color:var(--bleu);font-size:15px;display:block}
.bd-note{text-align:center;margin:clamp(34px,4.4vw,52px) 0 0;font-size:13px;color:var(--plume)}
@media (max-width:820px){.duos-bd{grid-template-columns:1fr}.duo-bd:nth-child(even){margin-top:0}}
@media (prefers-reduced-motion:reduce){.duo-bd:hover .photo,.duo-bd:hover .bulle-bd{transform:rotate(var(--r,0deg))}}

/* =====================================================================
   POURQUOI NOUS — des vignettes désalignées, penchées, avec leurs
   étiquettes et leurs étoiles. Peu de texte, beaucoup d'aplomb.
   ===================================================================== */
.atouts{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,30px);align-items:start}
.atout{
  position:relative;overflow:visible;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:var(--haut,280px);
  transform:rotate(var(--r,0deg)) translateY(var(--dy,0));
  transition:transform .42s var(--ease);
}
.atout-fond{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  border:var(--trait) solid var(--encre-trait);box-shadow:var(--dur);
  border-radius:var(--forme,34px 10px 34px 10px);background:var(--bleu);
  transition:box-shadow .42s;
}
.atout-fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atout-fond::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(16,14,44,.22) 0%,rgba(16,14,44,.04) 28%,rgba(16,14,44,.8) 66%,rgba(13,11,36,.95) 100%)}
.atout:hover{transform:rotate(0) translateY(calc(var(--dy,0px) - 6px))}
.atout:hover .atout-fond{box-shadow:11px 11px 0 var(--encre-trait)}
.atout-texte{position:relative;z-index:2;padding:clamp(20px,2.2vw,30px);color:#fff}
.atout b{display:block;font-family:var(--display);font-weight:700;
  font-size:var(--taille,clamp(23px,2.4vw,31px));line-height:1.02;margin-bottom:10px;
  letter-spacing:-.025em;max-width:16ch}
.atout p{margin:0;font-size:14.5px;color:rgba(255,255,255,.84);max-width:34ch;line-height:1.45}
.atout .cle{
  position:absolute;top:-16px;left:20px;z-index:3;background:var(--jaune);color:var(--bleu);
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.01em;
  padding:9px 20px;border-radius:999px;
  border:var(--trait) solid var(--encre-trait);box-shadow:4px 5px 0 var(--encre-trait);
  transform:rotate(var(--rc,-4deg));
}
.atout .etoile-deco{position:absolute;z-index:3;width:44px;height:44px;pointer-events:none}
.atout .etoile-deco path{fill:var(--jaune);stroke:var(--encre-trait);stroke-width:2.4;stroke-linejoin:round}

/* la vignette sans photo : le choix de l'atelier */
.atout-uni .atout-fond{background:var(--jaune-pale)}
.atout-uni .atout-fond::after{display:none}
.atout-uni .atout-texte{color:var(--bleu);padding-top:clamp(46px,4.4vw,58px)}
.atout-uni p{color:var(--bleu);opacity:.86}
.atout-uni .lieux{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;padding:0;list-style:none}
.atout-uni .lieux li{
  display:flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--encre-trait);
  border-radius:999px;padding:9px 18px;box-shadow:3px 4px 0 var(--encre-trait);
  font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--bleu);
  transform:rotate(var(--rl,0deg));
}
.atout-uni .lieux li:nth-child(1){--rl:-1.2deg}
.atout-uni .lieux li:nth-child(2){--rl:.9deg}
.atout-uni .lieux li:nth-child(3){--rl:-.6deg}
.atout-uni .lieux .drapeau{width:26px;height:17px}
.atout-uni .lieux .rond{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--encre-trait);flex:none}
.atout-uni .lieux .rond-asie{background:var(--orange)}
.atout-uni .lieux .rond-europe{background:var(--turquoise)}

/* rien n'est aligné sur rien */
.atout:nth-child(1){grid-column:span 5;--haut:320px;--r:-3.2deg;--dy:4px;--taille:clamp(25px,2.6vw,33px)}
.atout:nth-child(2){grid-column:span 4;--haut:280px;--r:3deg;--dy:60px;--forme:10px 34px 10px 34px;--rc:7deg}
.atout:nth-child(3){grid-column:span 3;--haut:262px;--r:-3.6deg;--dy:-18px}
.atout:nth-child(4){grid-column:span 4;--haut:262px;--r:2.6deg;--dy:44px;--forme:10px 34px 10px 34px;--rc:6deg}
.atout:nth-child(5){grid-column:span 5;--haut:290px;--r:-2.2deg;--dy:-6px}
.atout:nth-child(6){grid-column:span 3;--haut:250px;--r:2.4deg;--dy:34px;--forme:10px 34px 10px 34px;--rc:-6deg}

/* les vignettes sans photo : un aplat de couleur et un grand pictogramme */
.atout-dessin .atout-fond::after{display:none}
.atout-dessin{min-height:300px}
.atout-dessin .atout-motif{
  position:absolute;top:6%;left:50%;transform:translateX(-50%) rotate(-4deg);width:58%;height:auto;z-index:0;opacity:.17;
}
.atout-dessin .atout-texte{padding-top:0}
.atout-dessin .atout-motif path,.atout-dessin .atout-motif circle,.atout-dessin .atout-motif rect{
  fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
}
.atout-jaune .atout-fond{background:var(--jaune-pale)}
.atout-jaune,.atout-jaune .atout-texte{color:var(--bleu)}
.atout-jaune p{color:var(--bleu);opacity:.84}
.atout-bleu .atout-fond{background:var(--bleu)}
.atout-orange .atout-fond{background:var(--orange-profond)}
.atout-turquoise .atout-fond{background:var(--turquoise)}
.atout-turquoise,.atout-turquoise .atout-texte{color:var(--bleu)}
.atout-turquoise p{color:var(--bleu);opacity:.84}

@media (max-width:900px){
  .atouts{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .atout{grid-column:auto!important;--haut:280px;--r:0deg!important;--dy:0px!important}
  .atout:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .atout:hover{transform:rotate(var(--r,0deg)) translateY(var(--dy,0))}
}

/* =====================================================================
   LES DÉCORS DE BANDE DESSINÉE — éclat, lignes de vitesse, trame de
   points, flèche. Purement décoratifs, ils entrent en pop au défilement.
   ===================================================================== */
.decors-bd{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.deco-bd{position:absolute;opacity:0}
.decors-bd.in .deco-bd{animation:deco-pop .7s cubic-bezier(.34,1.7,.5,1) both}
.decors-bd.in .deco-bd:nth-child(2){animation-delay:.12s}
.decors-bd.in .deco-bd:nth-child(3){animation-delay:.24s}
.decors-bd.in .deco-bd:nth-child(4){animation-delay:.36s}
.decors-bd.in .deco-bd:nth-child(5){animation-delay:.48s}
@keyframes deco-pop{
  from{opacity:0;transform:scale(.3) rotate(var(--dr0,-24deg))}
  to{opacity:1;transform:scale(1) rotate(var(--dr,0deg))}
}
.deco-eclat{width:clamp(128px,13vw,178px);height:auto}
.deco-eclat .fond{fill:var(--orange);stroke:var(--encre-trait);stroke-width:5;stroke-linejoin:round}
.deco-eclat text{font-family:"Fredoka",system-ui,sans-serif;font-weight:700;fill:#fff}
.decors-bd.in .deco-eclat{animation:deco-pop .7s cubic-bezier(.34,1.7,.5,1) both,palpite 2.8s ease-in-out .8s infinite}
@keyframes palpite{0%,100%{transform:scale(1) rotate(var(--dr,0deg))}50%{transform:scale(1.05) rotate(calc(var(--dr,0deg) + 1.5deg))}}
.deco-lignes{width:clamp(96px,9vw,132px);height:auto}
.deco-lignes path{stroke:var(--encre-trait);stroke-width:5;stroke-linecap:round;fill:none;opacity:.5}
.deco-trame{width:clamp(110px,11vw,150px);height:clamp(84px,8vw,112px);
  background:radial-gradient(circle,var(--bleu) 2.6px,transparent 3px) 0 0/15px 15px;opacity:.22}
.deco-fleche{width:clamp(96px,9.5vw,134px);height:auto}
.deco-fleche path{stroke:var(--orange);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.deco-etoile{width:clamp(38px,3.6vw,52px);height:auto}
.deco-etoile path{fill:var(--jaune);stroke:var(--encre-trait);stroke-width:2.6;stroke-linejoin:round}
@media (max-width:1100px){.decors-bd{display:none}}
@media (prefers-reduced-motion:reduce){
  .deco-bd{opacity:1;transform:rotate(var(--dr,0deg))}
  .decors-bd.in .deco-bd,.decors-bd.in .deco-eclat{animation:none}
}

/* décors de bande dessinée, version fond sombre */
.deco-lignes-clair path{stroke:#fff;opacity:.4}
.deco-eclat-jaune .fond{fill:var(--jaune)}
.deco-eclat-jaune text{fill:var(--bleu)}

/* =====================================================================
   L'ALERTE — une case de BD, format encart, penchée, avec son éclat
   qui tourne derrière et son chronomètre en autocollant.
   ===================================================================== */
.urgence{
  position:relative;width:min(100%,600px);margin:0 auto;
  background:transparent;color:var(--bleu);
  border:var(--trait) solid var(--encre-trait);
  border-radius:72px 26px 64px 28px;
  padding:clamp(30px,3.2vw,40px) clamp(26px,3vw,36px) clamp(26px,2.8vw,34px);
  box-shadow:8px 10px 0 var(--encre-trait);
  transform:rotate(-1.8deg);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.urgence::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--jaune)}
.urgence>*{position:relative;z-index:1}
.urgence-inv{transform:rotate(1.8deg);border-radius:26px 72px 28px 64px}
.urgence:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:12px 14px 0 var(--encre-trait)}
.urgence::after{
  content:"";position:absolute;left:60px;bottom:-19px;width:36px;height:36px;z-index:0;
  background:var(--jaune);border-right:var(--trait) solid var(--encre-trait);
  border-bottom:var(--trait) solid var(--encre-trait);
  transform:rotate(45deg) skew(-7deg,-7deg);
}
.urgence-inv::after{left:auto;right:54px}

/* l'éclat qui tourne derrière la case */
.urgence-eclat{
  position:absolute;inset:-6px;z-index:-1!important;border-radius:inherit;pointer-events:none;
  border:3px solid var(--bleu);opacity:0;
  animation:halo 2.8s cubic-bezier(.2,.7,.3,1) infinite;
}
.urgence-eclat::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;border:3px solid var(--bleu);
  animation:halo 2.8s cubic-bezier(.2,.7,.3,1) 1.4s infinite;
}
@keyframes halo{
  0%{transform:scale(.985);opacity:.75}
  70%{opacity:.12}
  100%{transform:scale(1.055);opacity:0}
}

/* le chronomètre, collé au coin */
.urgence-chrono{
  position:absolute;top:-26px;left:-22px;z-index:3;
  width:clamp(72px,6.6vw,88px);height:clamp(72px,6.6vw,88px);border-radius:50%;
  background:var(--orange-profond);border:var(--trait) solid var(--encre-trait);
  box-shadow:4px 5px 0 var(--encre-trait);display:grid;place-items:center;
  animation:sonne 5s ease-in-out infinite;
}
@keyframes sonne{
  0%,72%{transform:rotate(-8deg)}
  76%{transform:rotate(-20deg)}80%{transform:rotate(4deg)}
  84%{transform:rotate(-16deg)}88%{transform:rotate(0deg)}92%{transform:rotate(-11deg)}100%{transform:rotate(-8deg)}
}
.urgence-chrono svg{width:66%;height:66%;overflow:visible}
.urgence-chrono .cadran{fill:none;stroke:#fff;stroke-width:3.2;opacity:.34}
.urgence-chrono .jauge{fill:none;stroke:#fff;stroke-width:4.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:24px 26px;
  animation:chrono-vide 5s linear infinite}
@keyframes chrono-vide{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
.urgence-chrono .bouton{fill:none;stroke:#fff;stroke-width:3.6;stroke-linecap:round}
.urgence-chrono .aiguille{stroke:#fff;stroke-width:3.6;stroke-linecap:round;
  transform-origin:24px 26px;animation:chrono-tourne 5s steps(10) infinite}
@keyframes chrono-tourne{to{transform:rotate(360deg)}}

.urgence .creneaux{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 10px 46px;
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);
}
.urgence .creneaux i{width:10px;height:10px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(224,70,18,.75);animation:pulse 1.7s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(224,70,18,.75)}
  70%{box-shadow:0 0 0 13px rgba(224,70,18,0)}
  100%{box-shadow:0 0 0 0 rgba(224,70,18,0)}
}
.urgence b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(23px,2.4vw,31px);line-height:1.04;color:var(--bleu);letter-spacing:-.026em;margin-bottom:9px}
.urgence p{margin:0 0 22px;font-size:16px;color:var(--bleu);opacity:.84;max-width:44ch;line-height:1.5}
.urgence .btn{
  position:relative;overflow:hidden;white-space:nowrap;border-radius:999px;
  background:var(--bleu);color:#fff;--btn-ombre:#12102E;
  border:var(--trait) solid var(--encre-trait);
  font-size:clamp(16px,1.35vw,18px);padding:16px 34px;
  animation:respire-btn 2.6s ease-in-out infinite;
}
@keyframes respire-btn{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.urgence .btn:hover{animation:none}
.urgence .btn::after{
  content:"";position:absolute;top:-60%;left:-80%;width:46%;height:220%;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:rotate(18deg);animation:brille 3.4s ease-in-out infinite;
}
@keyframes brille{0%,58%{left:-80%}84%,100%{left:150%}}
/* les étoiles qui dépassent */
.urgence-etoile{position:absolute;z-index:3;width:38px;height:38px;pointer-events:none}
.urgence-etoile path{fill:var(--orange);stroke:var(--encre-trait);stroke-width:2.4;stroke-linejoin:round}
.urgence-etoile.e1{right:-14px;top:-16px;transform:rotate(12deg)}
.urgence-etoile.e2{right:26px;bottom:-20px;width:30px;transform:rotate(-16deg)}
/* deux flèches de chaque côté, qui poussent vers la bulle */
.urgence-doigt{position:absolute;top:50%;width:clamp(64px,6vw,92px);height:auto;z-index:3;pointer-events:none;margin-top:-30px}
.urgence-doigt path{fill:none;stroke:var(--orange-profond);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.urgence-doigt.g{left:calc(-1 * clamp(66px,6.4vw,96px));animation:pousse-d 1.5s ease-in-out infinite}
.urgence-doigt.d{right:calc(-1 * clamp(66px,6.4vw,96px));transform:scaleX(-1);animation:pousse-g 1.5s ease-in-out infinite}
@keyframes pousse-d{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes pousse-g{0%,100%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(12px)}}
@media (max-width:1080px){.urgence-doigt{display:none}}

@media (max-width:560px){
  .urgence{transform:none;padding-top:44px}
  .urgence-chrono{top:-24px;left:50%;margin-left:-38px}
  .urgence .creneaux{margin-left:0}
  .urgence:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .urgence-doigt,.urgence-eclat,.urgence-eclat::after,.urgence-chrono,.urgence-chrono .jauge,.urgence-chrono .aiguille,
  .urgence .creneaux i,.urgence .btn,.urgence .btn::after{animation:none}
  .urgence-chrono .jauge{stroke-dashoffset:.35}
  .urgence:hover{transform:rotate(-1.8deg)}
}

/* le rappel flottant */
.rappel{
  position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:80;
  width:min(340px,calc(100vw - 28px));
  background:var(--creme);border:var(--trait) solid var(--encre-trait);
  border-radius:30px 10px 30px 10px;padding:22px 24px 24px;
  box-shadow:7px 8px 0 var(--encre-trait);
  transform:translateY(140%) rotate(2deg);opacity:0;pointer-events:none;
  transition:transform .6s cubic-bezier(.34,1.5,.5,1),opacity .4s;
}
.rappel.visible{transform:translateY(0) rotate(-1.4deg);opacity:1;pointer-events:auto}
.rappel b{display:block;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.12;color:var(--bleu);margin:0 0 8px;max-width:15ch}
.rappel p{margin:0 0 16px;font-size:14.5px;color:var(--plume);line-height:1.45}
.rappel .btn{padding:12px 22px;font-size:15px}
.rappel-fermer{
  position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;
  background:var(--jaune);color:var(--bleu);border:var(--trait) solid var(--encre-trait);
  box-shadow:3px 3px 0 var(--encre-trait);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1);
}
.rappel-fermer:hover{transform:rotate(90deg)}
.rappel-fermer svg{width:15px;height:15px;stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}
.rappel .etoile-rappel{position:absolute;top:-18px;left:20px;width:34px;height:34px}
.rappel .etoile-rappel path{fill:var(--orange);stroke:var(--encre-trait);stroke-width:2.4;stroke-linejoin:round}
@media (max-width:560px){
  .rappel{left:12px;right:12px;width:auto;padding:18px 20px 20px}
  .rappel b{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .rappel{transition:opacity .3s}
  .rappel.visible{transform:rotate(-1.4deg)}
}
@media print{.rappel{display:none}}

/* =====================================================================
   LE PARCOURS EN TROIS TEMPS — un grand visuel par étape, un numéro
   énorme, deux phrases. On doit comprendre sans lire.
   ===================================================================== */
.temps{display:grid;gap:clamp(44px,6vw,88px);position:relative}
/* entre deux cases, une flèche tracée à la main plutôt qu'un trait rigide */
.temps-fleche{display:block;width:clamp(84px,8vw,118px);height:auto;margin:calc(-1 * clamp(18px,2.4vw,34px)) auto;
  opacity:0}
.temps-fleche path{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.temps-fleche.gauche{margin-left:14%;transform:scaleX(-1)}
.temps-fleche.droite{margin-right:14%;margin-left:auto}
.temps-fleche.in{animation:fleche-trace .8s cubic-bezier(.34,1.5,.5,1) both}
@keyframes fleche-trace{from{opacity:0;transform:scale(.5) rotate(-16deg)}to{opacity:1;transform:none}}
.temps-fleche.gauche.in{animation-name:fleche-trace-g}
@keyframes fleche-trace-g{from{opacity:0;transform:scaleX(-1) scale(.5) rotate(16deg)}to{opacity:1;transform:scaleX(-1)}}
@media (max-width:860px){.temps-fleche{margin:6px auto!important;transform:none!important;width:72px}
  .temps-fleche.gauche.in,.temps-fleche.in{animation-name:fleche-trace}}
.temps-bloc{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;position:relative;
}
.temps-bloc:nth-of-type(even) .temps-visuel{order:-1}
.temps-visuel{
  position:relative;border:var(--trait) solid var(--encre-trait);box-shadow:var(--dur);
  border-radius:44px 12px 44px 12px;overflow:hidden;background:var(--creme-2);
  aspect-ratio:5/3.7;transform:rotate(var(--r,-1.4deg));transition:transform .45s var(--ease)
}
.temps-bloc:nth-of-type(even) .temps-visuel{--r:1.4deg;border-radius:12px 44px 12px 44px}
.temps-bloc:hover .temps-visuel{transform:rotate(0)}
.temps-visuel>svg,.temps-visuel>img{width:100%;height:100%;display:block;object-fit:cover}
.temps-visuel .planche-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.temps-visuel.a-photo .planche-photo{opacity:1}
.temps-visuel.a-photo>svg{opacity:0}

.temps-num{
  display:grid;place-items:center;width:clamp(62px,6vw,82px);height:clamp(62px,6vw,82px);
  border-radius:50%;background:var(--jaune);color:var(--bleu);
  font-family:var(--display);font-weight:700;font-size:clamp(30px,3vw,40px);
  border:var(--trait) solid var(--encre-trait);box-shadow:4px 5px 0 var(--encre-trait);
  transform:rotate(-6deg);margin-bottom:20px;
}
.temps-bloc:nth-of-type(2) .temps-num{background:var(--orange);color:#fff;transform:rotate(6deg)}
.temps-bloc:nth-of-type(3) .temps-num{background:var(--bleu);color:#fff;transform:rotate(-4deg)}
.temps-bloc:nth-of-type(4) .temps-num{background:var(--turquoise);color:var(--bleu);transform:rotate(5deg)}
.temps-bloc:nth-of-type(5) .temps-num{background:var(--jaune);color:var(--bleu);transform:rotate(-7deg)}
.temps-texte{position:relative;z-index:1}
.temps-texte h3{font-family:var(--display);font-weight:700;color:var(--bleu);
  font-size:clamp(25px,2.9vw,38px);line-height:1.02;letter-spacing:-.025em;margin:0 0 14px;max-width:14ch}
.temps-texte p{color:var(--plume);font-size:clamp(16px,1.25vw,18px);max-width:46ch;margin:0 0 10px}
.temps-texte .qui{display:block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-texte);margin-bottom:6px}
.temps-texte ul{list-style:none;padding:0;margin:16px 0 0}
.temps-texte li{position:relative;padding-left:28px;margin-bottom:9px;color:var(--encre);font-size:15.5px}
.temps-texte li::before{content:"";position:absolute;left:0;top:9px;width:15px;height:4px;background:var(--orange);border-radius:2px}
@media (max-width:860px){
  .temps-bloc{grid-template-columns:1fr;gap:24px}
  .temps-bloc:nth-of-type(even) .temps-visuel{order:0}
  .temps-visuel{transform:none;aspect-ratio:5/3.6}
}

/* la bande des gestes d'atelier, entre le BAT et la vidéo */
.gestes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.geste{
  background:var(--creme);border:var(--trait) solid var(--encre-trait);
  border-radius:26px 8px 26px 8px;padding:24px 24px 22px;box-shadow:var(--dur);
  transform:rotate(var(--r,0deg));transition:transform .4s var(--ease)
}
.geste:nth-child(1){--r:-1.4deg}.geste:nth-child(2){--r:1.2deg;border-radius:8px 26px 8px 26px}.geste:nth-child(3){--r:-.8deg}
.geste:hover{transform:rotate(0) translateY(-4px)}
.geste svg{width:46px;height:46px;margin-bottom:14px;stroke:var(--bleu);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.geste b{display:block;font-family:var(--display);font-weight:700;font-size:20px;color:var(--bleu);margin-bottom:6px}
.geste p{margin:0;font-size:15px;color:var(--plume)}
@media (max-width:760px){.gestes{grid-template-columns:1fr}.geste{transform:none}}

/* les options : une bande de pastilles cernées */
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,1.8vw,22px)}
.option{
  background:#fff;border:var(--trait) solid var(--encre-trait);border-radius:22px 8px 22px 8px;
  padding:20px 20px 18px;box-shadow:var(--dur);transform:rotate(var(--r,0deg));
  transition:transform .4s var(--ease)
}
.option:nth-child(odd){--r:-1.4deg}.option:nth-child(even){--r:1.2deg;border-radius:8px 22px 8px 22px}
.option:hover{transform:rotate(0) translateY(-4px)}
.option svg{width:38px;height:38px;margin-bottom:12px;stroke:var(--orange);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.option b{display:block;font-family:var(--display);font-weight:700;font-size:18px;color:var(--bleu);margin-bottom:5px;line-height:1.1}
.option p{margin:0;font-size:14.5px;color:var(--plume)}
.option .lien{margin-top:12px;font-size:14.5px}
.option-suite{background:var(--jaune-pale)}
.option-suite svg{stroke:var(--bleu)}
.option-suite p{color:var(--bleu);opacity:.82}
@media (max-width:760px){.option{transform:none}}

/* =====================================================================
   LE BANDEAU FORT — l'ouverture d'une page intérieure quand elle doit
   frapper : fond indigo, grande photo, titre énorme.
   ===================================================================== */
.bandeau-fort{position:relative;background:var(--bleu);color:#fff;overflow:clip}
.bandeau-fort .scene-lumiere{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 64% at 76% 36%,rgba(59,55,137,.66),transparent 72%),
             radial-gradient(46% 54% at 6% 90%,rgba(247,199,22,.13),transparent 72%)}
.fort-in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.5vw,56px);align-items:center;
  padding-block:clamp(96px,11vw,150px) clamp(80px,9vw,120px);
}
.page-pourquoi .fort-in,.page-confection .fort-in{padding-block-start:calc(112px + clamp(40px,5vw,70px))}
.fort-texte{position:relative;z-index:5}
.fort-texte>*{opacity:0;animation:entre-bas .8s cubic-bezier(.2,.9,.25,1) both}
.fort-texte>*:nth-child(1){animation-delay:.06s}
.fort-texte>*:nth-child(2){animation-delay:.16s}
.fort-texte>*:nth-child(3){animation-delay:.3s}
.fort-texte>*:nth-child(4){animation-delay:.42s}
.bandeau-fort h1{color:#fff;font-size:clamp(34px,4.4vw,62px);line-height:1;letter-spacing:-.028em;margin:16px 0 16px}
.bandeau-fort .lede{color:rgba(255,255,255,.86);max-width:40ch;margin-bottom:26px}
.fort-photo{position:relative;justify-self:start;width:118%;max-width:none}
.fort-tache{
  position:absolute;inset:2% -8% -9% -6%;z-index:0;border-radius:52% 48% 46% 54%/48% 52% 48% 52%;
  background:var(--jaune);border:var(--trait) solid var(--encre-trait);
  animation:tache 1.1s cubic-bezier(.2,.9,.25,1) both;
}
.fort-cadre{
  position:relative;z-index:1;overflow:hidden;aspect-ratio:5/4.4;
  border-radius:54% 46% 50% 50%/48% 52% 48% 52%;
  border:var(--trait) solid var(--encre-trait);box-shadow:10px 12px 0 rgba(20,18,54,.45);
  animation:cadre-entre 1.05s cubic-bezier(.2,.92,.25,1) .04s both;
}
.fort-cadre img{width:100%;height:100%;object-fit:cover;animation:respire 12s ease-out .5s both}
.fort-macaron{
  position:absolute;top:0;left:-3%;flex-direction:column;z-index:4;width:clamp(98px,9.4vw,134px);height:clamp(98px,9.4vw,134px);
  border-radius:50%;background:var(--jaune);color:var(--bleu);display:grid;place-items:center;text-align:center;
  font-family:var(--display);font-weight:700;font-size:clamp(13px,1.1vw,15px);line-height:1.08;padding:10px;
  border:var(--trait) solid var(--encre-trait);box-shadow:5px 6px 0 var(--encre-trait);
  animation:macaron .8s cubic-bezier(.34,1.6,.5,1) .78s both;
}
.fort-etincelles{position:absolute;inset:-6% -5%;z-index:3;pointer-events:none;overflow:visible}
.fort-etincelles path{fill:var(--jaune);stroke:var(--encre-trait);stroke-width:2.4;stroke-linejoin:round;opacity:0;
  animation:etoile-pop .55s cubic-bezier(.34,1.7,.5,1) both}
.fort-etincelles path:nth-child(1){animation-delay:.5s}
.fort-etincelles path:nth-child(2){animation-delay:.64s}
.fort-etincelles path:nth-child(3){animation-delay:.78s}
.bandeau-fort .forme{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(50px,6vw,96px);z-index:3}
.bandeau-fort .forme path{fill:var(--creme)}
@media (max-width:900px){
  .fort-in{grid-template-columns:1fr;gap:30px}
  .fort-photo{order:-1;width:100%}
  .fort-cadre{aspect-ratio:4/3.2}
  .fort-macaron{width:86px;height:86px;font-size:12.5px;left:2%;top:-5%}
}
@media (prefers-reduced-motion:reduce){
  .fort-texte>*,.fort-tache,.fort-cadre,.fort-cadre img,.fort-macaron,.fort-etincelles path{animation:none;opacity:1;transform:none}
}

.fort-macaron .coeur{width:26px;height:26px;margin-bottom:2px}

/* =====================================================================
   LE BANDEAU ILLUSTRÉ — une ouverture de page intérieure sans photo,
   mais pas nue : sceau, titre surligné, décors de BD.
   ===================================================================== */
.bandeau-deco{position:relative;overflow:clip;background:var(--creme)}
.bandeau-deco .zone{position:relative;z-index:2}
.bandeau-deco .bandeau-simple{text-align:left;margin:0;max-width:min(100%,640px)}
.bandeau-deco h1{max-width:15ch}
.bandeau-deco .lede{max-width:46ch}
.bandeau-deco .decors-bd{z-index:1}
.bandeau-deco .sceau-titre{margin-left:0;margin-bottom:10px}

/* les thèmes de la FAQ deviennent des cartouches */
.faq-theme{margin-bottom:clamp(40px,6vw,70px);position:relative}
.faq-theme>h2{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 12px;
  background:var(--jaune);color:var(--bleu);border:var(--trait) solid var(--encre-trait);
  border-radius:999px;padding:10px 26px 11px;box-shadow:4px 5px 0 var(--encre-trait);
  font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,25px);
  transform:rotate(var(--r,-1.4deg));
}
.faq-theme:nth-child(even)>h2{--r:1.4deg;background:var(--turquoise)}
.faq-theme:nth-child(3n)>h2{background:var(--orange-profond);color:#fff}
.faq-theme>h2 i{width:28px;height:28px;border-radius:50%;background:rgba(37,34,95,.14);display:grid;place-items:center;
  font-style:normal;font-size:14px;font-weight:700}
.faq-theme:nth-child(3n)>h2 i{background:rgba(255,255,255,.22)}
.faq-theme>p{color:var(--plume);margin:0 0 20px;max-width:52ch}

/* la mention d'une réalisation : un cartouche penché, nom au-dessus du client */
.travail .mention{
  display:block!important;position:relative;left:auto;bottom:auto;
  margin:-26px 0 0 clamp(12px,3vw,34px);max-width:82%;
  padding:16px 24px 17px;border-radius:24px 8px 24px 8px;
  background:var(--creme);box-shadow:5px 6px 0 var(--encre-trait);
  transform:rotate(var(--rm,-1.6deg));transition:transform .45s var(--ease);z-index:2;
}
.travail:nth-child(even) .mention{--rm:1.6deg;border-radius:8px 24px 8px 24px;margin-left:auto;margin-right:clamp(12px,3vw,34px)}
.travail:hover .mention{transform:rotate(0) translateY(-3px)}
.travail .mention b{display:block;color:var(--bleu);font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.9vw,25px);line-height:1.08;letter-spacing:-.02em;margin-bottom:3px}
.travail .mention span{display:block;font-size:14px;color:var(--plume)}

/* =====================================================================
   AVANT / APRÈS — on fait glisser le séparateur pour passer du BAT
   à la mascotte livrée.
   ===================================================================== */
.avant-apres{
  position:relative;overflow:hidden;--p:50%;
  aspect-ratio:16/10;border-radius:48px 14px 48px 14px;
  border:var(--trait) solid var(--encre-trait);box-shadow:var(--dur);
  background:var(--creme-2);transform:rotate(-.8deg);
}
.aa-couche{position:absolute;inset:0}
.aa-couche img,.aa-couche svg{width:100%;height:100%;object-fit:cover;display:block}
.aa-avant{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.aa-barre{
  position:absolute;top:0;bottom:0;left:var(--p);width:5px;margin-left:-2.5px;z-index:3;
  background:var(--encre-trait);pointer-events:none;
}
.aa-poignee{
  position:absolute;top:50%;left:var(--p);z-index:4;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:var(--jaune);border:var(--trait) solid var(--encre-trait);
  box-shadow:4px 5px 0 var(--encre-trait);display:grid;place-items:center;pointer-events:none;
  transition:transform .25s cubic-bezier(.34,1.6,.5,1);
}
.avant-apres:hover .aa-poignee{transform:scale(1.08)}
.aa-poignee svg{width:26px;height:26px;stroke:var(--bleu);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.aa-curseur{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:none;
}
.aa-curseur:focus-visible ~ .aa-poignee{outline:3px solid var(--orange);outline-offset:4px}
.aa-etiq{
  position:absolute;bottom:18px;z-index:4;padding:8px 18px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:13.5px;
  border:2.5px solid var(--encre-trait);box-shadow:3px 3px 0 var(--encre-trait);pointer-events:none;
}
.aa-etiq-g{left:18px;background:var(--jaune);color:var(--bleu);transform:rotate(-3deg)}
.aa-etiq-d{right:18px;background:var(--bleu);color:#fff;transform:rotate(3deg)}
.aa-note{margin:16px 0 0;text-align:center;font-size:13px;color:var(--plume)}
@media (max-width:760px){.avant-apres{aspect-ratio:4/3;transform:none;border-radius:32px 12px 32px 12px}
  .aa-etiq{font-size:12px;padding:7px 14px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.avant-apres:hover .aa-poignee{transform:none}}

/* =====================================================================
   L'ATELIER VIVANT — la mascotte s'assemble pendant qu'on remplit le
   formulaire. Une pièce apparaît à chaque champ complété.
   ===================================================================== */
.atelier-vivant{
  position:sticky;top:124px;background:var(--bleu);color:#fff;
  border:var(--trait) solid var(--encre-trait);border-radius:52px 16px 52px 16px;
  box-shadow:var(--dur);padding:26px 26px 28px;margin-bottom:clamp(20px,2.4vw,30px);
  transform:rotate(-.9deg);
}
/* l'onde qui part du cadre chaque fois qu'une pièce se pose */
.atelier-vivant::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;pointer-events:none;
  border:3px solid var(--jaune);opacity:0;
}
.atelier-vivant.flash::after{animation:onde-piece .75s cubic-bezier(.2,.7,.3,1) both}
@keyframes onde-piece{
  0%{transform:scale(.985);opacity:.9}
  100%{transform:scale(1.07);opacity:0}
}
.atelier-vivant.flash{animation:secousse-piece .4s ease-in-out}
@keyframes secousse-piece{0%,100%{transform:rotate(-.9deg)}35%{transform:rotate(.8deg)}70%{transform:rotate(-2deg)}}
.atelier-vivant h3{font-family:var(--display);font-weight:700;color:#fff;font-size:19px;margin:0 0 4px;letter-spacing:-.015em}
.atelier-vivant .sous{display:block;font-size:13.5px;color:rgba(255,255,255,.7);margin-bottom:16px}

.scene-mascotte{position:relative;aspect-ratio:1/1.06;margin:0 auto 16px;max-width:330px}
/* un semis de pois derrière l'établi */
.scene-mascotte::before{content:"";position:absolute;inset:-6%;border-radius:34px;
  background:radial-gradient(circle,rgba(255,255,255,.09) 2px,transparent 2.4px) 0 0/22px 22px}
.scene-mascotte>svg{width:100%;height:100%;display:block;overflow:visible}
.piece{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3) rotate(-16deg)}
.piece.pose{animation:piece-pop .62s cubic-bezier(.34,1.65,.5,1) both}
@keyframes piece-pop{
  0%{opacity:0;transform:scale(.3) rotate(-16deg)}
  60%{opacity:1;transform:scale(1.12) rotate(4deg)}
  100%{opacity:1;transform:none}
}
/* l'établi : une silhouette fantôme tant que rien n'est posé */
.fantome path,.fantome circle,.fantome rect,.fantome ellipse{
  fill:none;stroke:rgba(255,255,255,.2);stroke-width:4;stroke-dasharray:9 9;
}
.complet .fantome{opacity:0;transition:opacity .5s}
/* quand tout est posé : elle salue */
.complet .bras-d{animation:salue 1.1s ease-in-out 3}
@keyframes salue{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg)}75%{transform:rotate(10deg)}}
.finito{
  position:absolute;top:-4%;right:-6%;width:46%;z-index:3;opacity:0;transform:scale(.3) rotate(-30deg);
}
.complet .finito{animation:piece-pop .7s cubic-bezier(.34,1.7,.5,1) .3s both,palpite 2.6s ease-in-out 1.1s infinite}
.complet .finito{animation:piece-pop .7s cubic-bezier(.34,1.7,.5,1) .3s both}
.finito .fond{fill:var(--orange);stroke:var(--encre-trait);stroke-width:5;stroke-linejoin:round}
.finito text{font-family:"Fredoka",system-ui,sans-serif;font-weight:700;fill:#fff}

/* la jauge de pièces */
.jauge-pieces{display:flex;align-items:center;gap:12px;margin-top:4px}
.jauge-pieces .rail{flex:1;height:12px;border-radius:8px;background:rgba(255,255,255,.16);
  border:2.5px solid var(--encre-trait);overflow:hidden}
.jauge-pieces .rail i{display:block;height:100%;width:calc(var(--n,0) / var(--total,8) * 100%);
  background:repeating-linear-gradient(45deg,var(--jaune) 0 9px,var(--orange) 9px 18px);
  transition:width .55s cubic-bezier(.34,1.5,.5,1)}
.jauge-pieces b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--bleu);white-space:nowrap;
  background:var(--jaune);border:2.5px solid var(--encre-trait);border-radius:999px;padding:5px 13px;
  box-shadow:2px 3px 0 var(--encre-trait);display:inline-block}
.atelier-vivant.flash .jauge-pieces b{animation:compte-pop .45s cubic-bezier(.34,1.8,.5,1)}
@keyframes compte-pop{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.22) rotate(-5deg)}}
.atelier-vivant .dernier{display:block;margin-top:12px;font-size:13.5px;color:var(--jaune);min-height:1.3em}
@media (max-width:900px){.atelier-vivant{position:relative;top:auto;transform:none;max-width:420px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){
  .atelier-vivant.flash,.atelier-vivant.flash::after,.atelier-vivant.flash .jauge-pieces b{animation:none}
  .piece{opacity:0;transform:none}
  .piece.pose{opacity:1;transform:none;animation:none}
  .complet .bras-d,.complet .finito{animation:none}
  .complet .finito{opacity:1;transform:rotate(-8deg)}
  .jauge-pieces .rail i{transition:none}
}

.colonne-devis{position:sticky;top:130px}
@media (max-width:900px){.colonne-devis{position:static}}