/* =========================================================================
   Groupe Agel. Feuille du site (septembre 2026).

   L'idée : l'astroïde de la marque est une courbe dessinée uniquement avec
   des droites. Des traits épars qui, ensemble, font une forme nette. C'est
   le métier du groupe, et c'est la seule chose qui bouge d'elle-même, dans
   le héros de l'accueil.

   Fond noir par défaut (obsidian), texte bone, secondaire stone. Champagne
   pour les traits de l'astroïde, les schémas et les boutons ; oxblood pour
   le seul aplat plein de la page. Les pages Agel Studio et produit gardent
   la charte claire d'Agel Partners (voir body:has(...) plus bas).

   Titres en Bricolage Grotesque, texte en Instrument Sans. Titres en casse
   de phrase, pas de surtitre en capitales, pas de police monospace pour
   décorer.

   Le rayon dit le rang : 28 px pour les grands panneaux et les captures,
   16 px pour les blocs, 12 px pour les champs, pilule pour les boutons.
   Pas d'ombre par défaut : la profondeur vient des aplats.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Instrument+Sans:wght@400;500;600&display=swap");

:root{
  /* Palette de la charte */
  --obsidian:#0B0B0D;
  --onyx:#141417;
  --graphite:#26262A;
  --stone:#8C887F;
  --bone:#EDE9E1;
  --alabaster:#F7F4EE;
  --oxblood:#631D2A;
  --oxblood-lift:#7A2534;
  --oxblood-press:#4E1620;
  --champagne:#C6B08A;
  --champagne-pale:#E6DCCB;
  --ink:#0E1315;
  --slate:#6B6862;
  --line-dark:#2A2A2F;
  --line-light:#D9D3C7;

  /* Rôles, fond noir par défaut */
  --ground:var(--obsidian);
  --surface:var(--onyx);
  --text:var(--bone);
  --text-p:#CFC9BC;
  --text-2:var(--stone);
  --line:var(--line-dark);
  --accent:var(--champagne);
  --alerte:#E59AA6;
  /* Bouton plein : champagne sur fond noir */
  --btn-fond:var(--champagne);
  --btn-texte:var(--obsidian);
  --btn-survol:var(--bone);
  --btn-presse:var(--champagne-pale);

  /* Polices */
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-text:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --f-data:"Instrument Sans",system-ui,sans-serif;   /* plus de monospace décoratif */

  /* Échelle typographique */
  --t-xs:14px; --t-s:16px; --t-m:18px; --t-l:21px; --t-xl:28px; --t-2xl:44px; --t-3xl:72px;
  --s-display:96px; --s-headline:64px; --s-title:44px; --s-subtitle:28px;
  --s-heading:22px; --s-lead:21px; --s-body:18px; --s-small:15px; --s-caption:14px; --s-label:14px;

  /* Espacement (multiples de 7 px, inchangé) */
  --u1:7px; --u2:14px; --u3:21px; --u4:28px; --u6:42px; --u8:56px;
  --u12:84px; --u16:112px; --u24:168px; --u32:224px;
  --page:1240px; --column:720px;

  /* Rayons : le rayon dit le rang */
  --r-panneau:28px; --r-bloc:16px; --r-champ:12px; --r-pilule:999px;
  --rayon-s:var(--r-champ); --rayon:var(--r-bloc); --rayon-l:var(--r-panneau); --rayon-pilule:var(--r-pilule);

  /* Mouvement */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-hover:160ms; --t-state:220ms;
}

/* Pages Agel Studio et produit : charte claire d'Agel Partners.
   Elles posent leur propre fond ; les rôles repassent au clair pour elles. */
body:has(.pg-studio,.pg-cpa,.pg-antoine,.produit-page){
  --ground:var(--alabaster);
  --surface:var(--bone);
  --text:var(--ink);
  --text-p:var(--slate);
  --text-2:var(--slate);
  --line:var(--line-light);
  --accent:var(--oxblood);
  --alerte:var(--oxblood);
  --btn-fond:var(--oxblood);
  --btn-texte:var(--bone);
  --btn-survol:var(--oxblood-lift);
  --btn-presse:var(--oxblood-press);
}
/* Zone sombre explicite : le pied et les blocs marqués */
.sombre,[data-ground="dark"]{
  --ground:var(--obsidian);
  --surface:var(--onyx);
  --text:var(--bone);
  --text-p:#CFC9BC;
  --text-2:var(--stone);
  --line:var(--line-dark);
  --accent:var(--champagne);
}
[data-ground="bone"]{--ground:var(--onyx)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--ground);color:var(--text);
  font-family:var(--f-text);font-size:var(--t-m);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--u4)}
::selection{background:var(--champagne);color:var(--obsidian)}

/* ── Titres ────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--f-display);font-weight:600;color:var(--text);
         font-variation-settings:"wdth" 96;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,88px);line-height:1;letter-spacing:-.03em;font-weight:500}
h2{font-size:clamp(30px,4.2vw,var(--s-title));line-height:1.05;letter-spacing:-.025em}
h3{font-size:var(--s-heading);line-height:1.25;letter-spacing:-.01em;font-weight:600}
p{max-width:64ch;color:var(--text-p)}
.lead{font-size:clamp(19px,1.6vw,var(--s-lead));line-height:1.5;max-width:52ch;color:var(--text)}
strong{font-weight:600;color:var(--text)}
.muted{color:var(--text-2)}
/* Petite mention utile (date, catégorie) : casse normale, pas de capitales */
.label{font-family:var(--f-text);font-size:var(--t-xs);line-height:1.5;color:var(--text-2);
       letter-spacing:0;text-transform:none}

/* ── Boutons : pilules, le texte dit ce qui se passe ───────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
     font-family:var(--f-text);font-size:var(--t-s);font-weight:500;letter-spacing:0;text-transform:none;
     padding:12px 24px;border-radius:var(--r-pilule);cursor:pointer;
     background:var(--btn-fond);color:var(--btn-texte);border:1.5px solid var(--btn-fond);
     transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.btn:hover{background:var(--btn-survol);border-color:var(--btn-survol)}
.btn:active{background:var(--btn-presse)}
.btn:focus-visible{outline:2px solid var(--btn-fond);outline-offset:3px}
.btn.quiet{background:transparent;color:var(--text);border-color:currentColor}
.btn.quiet:hover{background:var(--text);color:var(--ground);border-color:var(--text)}
.sombre .btn{background:var(--champagne);border-color:var(--champagne);color:var(--obsidian)}
.sombre .btn:hover{background:var(--bone);border-color:var(--bone)}
.sombre .btn.quiet{background:transparent;color:var(--bone);border-color:rgba(237,233,225,.45)}
.sombre .btn.quiet:hover{border-color:var(--bone);background:rgba(237,233,225,.08)}
.sombre .btn:focus-visible{outline-color:var(--champagne)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Lien de texte */
.lien{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);
      text-underline-offset:4px;text-decoration-thickness:1.5px}
.lien:hover{color:var(--accent)}

/* ── En-tête : sombre, collant, discret, sur toutes les pages ─────────── */
header{position:sticky;top:0;left:0;right:0;z-index:40;
       background:rgba(11,11,13,.94);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
       border-bottom:1px solid transparent;transition:border-color var(--t-state) var(--ease);
       --btn-fond:var(--champagne);--btn-texte:var(--obsidian);--btn-survol:var(--bone);--btn-presse:var(--champagne-pale)}
header.defile{border-bottom-color:var(--line-dark)}
.bar{max-width:var(--page);margin:0 auto;padding:14px var(--u4);display:flex;align-items:center;gap:var(--u6)}
.bar .logo img{height:24px}

.bar nav{display:flex;gap:26px;margin-left:auto}
.bar nav a{font-family:var(--f-text);font-size:var(--t-s);font-weight:500;color:#B5B0A6;
      letter-spacing:0;text-transform:none;transition:color var(--t-hover) var(--ease)}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--bone)}
.bar .btn{min-height:42px;padding:9px 20px}
.bar .menu{display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line-dark);
           border-radius:50%;background:transparent;color:var(--bone);cursor:pointer}
.bar .menu span,.bar .menu span::before,.bar .menu span::after{display:block;width:18px;height:2px;border-radius:2px;
           background:currentColor;transition:transform var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.bar .menu span{position:relative}
.bar .menu span::before,.bar .menu span::after{content:"";position:absolute;left:0}
.bar .menu span::before{top:-6px}
.bar .menu span::after{top:6px}
header.ouvert .menu span{background:transparent}
header.ouvert .menu span::before{transform:translateY(6px) rotate(45deg)}
header.ouvert .menu span::after{transform:translateY(-6px) rotate(-45deg)}

/* ── Héros de l'accueil : le seul moment qui bouge seul ───────────────── */
.hero{background:var(--obsidian);color:var(--bone);
      overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--u6);
            align-items:center;min-height:min(78vh,760px);padding-top:var(--u12);padding-bottom:var(--u12)}
.hero h1{color:var(--bone);max-width:11ch}
.hero .lead{color:#CFC9BC;margin-top:var(--u4)}
.hero .actions{display:flex;gap:12px;margin-top:var(--u6);flex-wrap:wrap}
.hero .lieu{margin-top:var(--u6);font-size:var(--t-xs);color:var(--stone)}
.astre{width:100%;max-width:560px;justify-self:end;aspect-ratio:1;overflow:visible}
.astre line{stroke:var(--champagne);stroke-width:.55;stroke-linecap:round;
            stroke-dasharray:1;stroke-dashoffset:1;
            animation:trait .9s var(--ease) forwards;animation-delay:calc(var(--i) * 22ms + 200ms)}
.astre .corps{transform-origin:50% 50%;animation:respire 14s ease-in-out 2.4s infinite}
.astre .axe{stroke:rgba(198,176,138,.28);stroke-width:.35;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
@keyframes trait{to{stroke-dashoffset:0}}
@keyframes respire{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(7deg) scale(1.035)}}

/* ── Sections ──────────────────────────────────────────────────────────── */
section{padding:var(--u16) 0;background:var(--ground);color:var(--text)}
.tete{max-width:760px;margin-bottom:var(--u8)}
.tete p{margin-top:var(--u3)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--u12);align-items:start}
.split-l{position:sticky;top:110px}
.split-l p{margin-top:var(--u3)}

/* Panneau : un aplat, pas une carte */
.panneau{background:var(--surface);border-radius:var(--r-panneau);padding:var(--u6) var(--u6)}

/* Métiers : rangées dans un panneau */
.metiers .row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--u4);align-items:center;
              padding:var(--u4) 0;border-top:1px solid var(--line)}
.metiers .row:first-child{border-top:0;padding-top:0}
.metiers .row:last-child{padding-bottom:0}
.metiers .row p{color:var(--text-p);max-width:none}
.metiers .row p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);
                  text-underline-offset:4px;text-decoration-thickness:1.5px}
.metiers .row p a:hover{color:var(--accent)}
.k.marque img{height:30px;width:auto;max-width:180px;object-fit:contain}
.k.marque img[src*="engineering"]{height:36px}
.aussi{margin-top:var(--u4);font-size:var(--t-s)}

/* Méthode : une vraie séquence, le trait se dessine quand on l'atteint */
.etapes{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--u4);position:relative;counter-reset:etape}
.etapes::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:var(--champagne);
                transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.vu .etapes::before{transform:scaleX(1)}
.etape{position:relative}
.etape .n{width:46px;height:46px;border-radius:50%;background:var(--ground);border:2px solid var(--champagne);
          display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--text);
          position:relative;z-index:1}
.etape h3{margin:var(--u3) 0 var(--u1)}
.etape p{font-size:var(--t-s)}

/* Souveraineté : l'aplat oxblood, un seul par page */
.fort{padding:var(--u6) 0}
.fort .bloc{background:var(--oxblood);color:var(--bone);border-radius:var(--r-panneau);
            padding:clamp(36px,6vw,84px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--u6);align-items:end}
.fort h2{color:var(--bone);max-width:14ch}
.fort p{color:#EAD7DB;margin-top:var(--u3);max-width:52ch}
.fort .btn{background:var(--bone);border-color:var(--bone);color:var(--oxblood)}
.fort .btn:hover{background:var(--champagne-pale);border-color:var(--champagne-pale)}
.fort .btn:focus-visible{outline-color:var(--bone)}

/* Clients : trois colonnes à filet */
.publics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--u6)}
.public{border-top:2px solid var(--champagne);padding-top:var(--u3)}
.public .qui{font-size:var(--t-xs);color:var(--text-2);margin-bottom:var(--u1)}
.public h3{margin-bottom:var(--u2)}
.public p{font-size:var(--t-s)}

/* ── Articles (bloc généré par build_articles.py) ──────────────────────── */
#articles .split-r{min-width:0}
.posts{display:grid;border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--u4);padding:var(--u4) 0;
      border-bottom:1px solid var(--line)}
.post .meta{font-size:var(--t-xs);line-height:1.5;color:var(--text-2)}
.post h3{font-size:21px;margin-bottom:var(--u1);transition:color var(--t-hover) var(--ease)}
.post p{font-size:var(--t-s);max-width:none}
.post .more{display:inline-block;margin-top:var(--u2);font-size:var(--t-s);font-weight:500;color:var(--accent);
            text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.post:hover h3{color:var(--accent)}
.post:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-bloc)}

/* ── Formulaire ────────────────────────────────────────────────────────── */
.formcard{background:var(--surface);border-radius:var(--r-panneau);padding:clamp(24px,4vw,48px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--u3)}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1 / -1}
.f label{font-family:var(--f-text);font-size:var(--t-s);font-weight:500;color:var(--text);letter-spacing:0;text-transform:none}
.f input,.f textarea,.f select{
  font-family:var(--f-text);font-size:var(--t-s);color:var(--text);background:var(--ground);
  border:1.5px solid var(--line);border-radius:var(--r-champ);padding:13px 16px;width:100%;
  transition:border-color var(--t-hover) var(--ease)}
.f textarea{min-height:140px;resize:vertical;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:#8C887F}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--champagne)}
.f .err{font-size:var(--t-xs);color:var(--alerte);display:none}
.f.ko input,.f.ko textarea{border-color:var(--alerte)}
.f.ko .err{display:block}
.f.cases[hidden]{display:none}
.cases-titre{font-size:var(--t-s);font-weight:500;color:var(--text)}
.cases-liste{display:flex;flex-direction:column;gap:10px}
.f .case{display:flex;align-items:center;gap:12px;font-weight:400;cursor:pointer}
.f .case input{width:18px;height:18px;padding:0;flex:none;accent-color:var(--champagne);color-scheme:dark;cursor:pointer}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formfoot{display:flex;align-items:center;gap:var(--u4);margin-top:var(--u4);flex-wrap:wrap}
.formfoot small{color:var(--text-2);font-size:var(--t-xs);line-height:1.5;max-width:46ch}
.note{margin-top:var(--u3);padding:14px 18px;font-size:var(--t-s);display:none;border-radius:var(--r-bloc)}
.note.ok{display:block;background:var(--ground);color:var(--text)}
.note.ko{display:block;background:#2A1519;color:var(--alerte)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle}

/* ── Pages de lecture : articles, mesure d'audience, 404 ───────────────── */
.article{padding:var(--u12) 0 var(--u6)}
.article .col,.body .col{max-width:var(--column)}
.article h1{font-size:clamp(34px,5vw,var(--s-headline));margin:var(--u2) 0 var(--u4);line-height:1.02}
.article .label{margin-top:var(--u2)}
.body{padding:var(--u4) 0 var(--u16)}
.body h2{font-size:clamp(24px,2.6vw,30px);margin:var(--u8) 0 var(--u3)}
.body h3{font-size:20px;margin:0 0 var(--u1);color:var(--text)}
.body p{margin-bottom:var(--u3);color:var(--text-p);max-width:none}
.body p a,.body li a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);
                     text-underline-offset:4px;text-decoration-thickness:1.5px;overflow-wrap:anywhere}
.body p a:hover,.body li a:hover{color:var(--accent)}
.body ul,.body ol{margin:0 0 var(--u3) 22px;color:var(--text-p)}
.body li{margin-bottom:8px;padding-left:4px}
.body ul li::marker{color:var(--accent)}
.body ol li::marker{font-weight:600;color:var(--accent)}
.body img,.article img{border-radius:var(--r-panneau)}
.crumbs{display:block;margin:0 0 var(--u2);font-size:var(--t-xs);color:var(--text-2);letter-spacing:0;text-transform:none}
.crumbs a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.crumbs a:hover{color:var(--text)}
.faq{padding:0;background:none}
.faq .qa{background:var(--surface);border-radius:var(--r-bloc);padding:var(--u3) var(--u4) 4px;margin-bottom:12px}
.sources{padding:0;margin-top:var(--u3)}
.sources ol{font-size:var(--t-s);line-height:1.6}
.sources li{margin-bottom:10px}
nav.related{display:block;margin:var(--u8) 0 0;padding:0}
nav.related .label{font-weight:600;color:var(--text);font-size:var(--t-s);margin-bottom:var(--u2)}
.related ul{list-style:none;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.related li{margin:0;padding:0}
.body .related a,.related a{display:block;padding:18px 0;color:var(--text);font-family:var(--f-display);font-weight:600;
           font-size:19px;line-height:1.3;text-decoration:none;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.body .related a:hover,.related a:hover{color:var(--accent)}
.related a span,.body .related a span{display:block;margin-bottom:4px;font-family:var(--f-text);font-weight:400;font-size:var(--t-xs);
                color:var(--text-2);letter-spacing:0;text-transform:none}
.back{display:inline-block;margin-top:var(--u8);font-size:var(--t-s);font-weight:500;color:var(--text);
      text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.back:hover{color:var(--accent)}
.mono{font-family:var(--f-text);font-style:italic}

/* ── Pied : onyx, arrondi en haut, se détache du fond noir ─────────────── */
footer{margin-top:var(--u8);padding:var(--u12) 0 var(--u8);background:var(--onyx);color:var(--bone);
       border-radius:var(--r-panneau) var(--r-panneau) 0 0}
.foot{display:flex;justify-content:space-between;gap:var(--u6);flex-wrap:wrap;align-items:flex-start}
.foot img{height:24px}
.foot nav{display:flex;flex-direction:column;gap:10px;margin:0}
.foot nav a{color:#CFC9BC}
.foot nav a:hover{color:var(--bone)}
.foot .label,.foot small{color:var(--stone);font-size:var(--t-xs)}
.foot small a{color:#CFC9BC;text-decoration:underline;text-underline-offset:3px}
.foot .logo img{height:24px;margin-bottom:10px;filter:none}
.endorse{font-size:var(--t-xs);color:var(--stone);border-top:1px solid var(--line-dark);
         padding-top:var(--u3);margin-top:var(--u8)}


/* ── Petits écrans ─────────────────────────────────────────────────────── */
@media (max-width:980px){
  /* Menu replié : le bouton est posé par assets/site.js, sans lui les liens restent ceux du pied. */
  .bar nav{display:none}
  .bar{gap:var(--u2);flex-wrap:wrap}
  .bar .btn{margin-left:auto}
  .bar .menu{display:grid}
  /* En-tête plein sur téléphone : translucide, le texte de la page se lisait au travers. */
  header,header.ouvert{background:var(--obsidian)}
  header.ouvert .bar nav{display:flex;flex-direction:column;gap:0;order:5;width:100%;margin:10px 0 0;
                         border-top:1px solid var(--line-dark)}
  header.ouvert .bar nav a{padding:14px 0;font-size:var(--t-m);border-bottom:1px solid var(--line-dark)}
  header.ouvert .bar nav a:last-child{border-bottom:0}
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:var(--u6);padding-bottom:var(--u8);gap:var(--u4)}
  /* Sous le texte, l'astroïde tombait sous le pli : on la remonte au-dessus du titre. */
  .astre{order:-1;width:min(62vw,300px);justify-self:center}
  section{padding:var(--u12) 0}
  .split{grid-template-columns:1fr;gap:var(--u4)}
  .split-l{position:static}
  .metiers .row{grid-template-columns:1fr;gap:12px}
  .etapes{grid-template-columns:1fr;gap:var(--u4)}
  .etapes::before{left:22px;right:auto;top:22px;bottom:22px;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
  .vu .etapes::before{transform:scaleY(1)}
  .etape{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:var(--u3)}
  .etape h3{margin-top:10px}
  .etape p{grid-column:2}
  .fort .bloc{grid-template-columns:1fr}
  .publics{grid-template-columns:1fr;gap:var(--u4)}
  .post{grid-template-columns:1fr;gap:6px}
  .fields{grid-template-columns:1fr}
  .panneau{padding:var(--u4)}
}
@media (max-width:480px){
  .wrap{padding:0 20px}
  section{padding:var(--u8) 0}
  .bar{padding:12px 20px}
  .bar .btn{min-height:40px;padding:8px 16px;font-size:15px}
  .foot{flex-direction:column;gap:var(--u4)}
  .bar .logo img{height:20px}
  .astre{width:min(56vw,220px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:0s !important}
  .astre line{stroke-dashoffset:0}
  .etapes::before{transform:none}
}

/* =========================================================================
   Couche vivante (toutes les pages).
   Apparitions au défilement, survols qui soulèvent, captures qui zooment,
   flèche des boutons qui avance, soulignés qui glissent, formes pâles qui
   flottent en fond de section, parallaxe douce de l'astroïde du héros.
   Sans JavaScript tout est visible : .vv n'est posée que par assets/site.js.
   prefers-reduced-motion coupe tout.
   ========================================================================= */
:root{
  --vv-ease:cubic-bezier(.22,.61,.36,1);
  --vv-halo:0 0 0 1px rgba(198,176,138,.22),0 22px 48px -24px rgba(198,176,138,.28);
  --vv-halo-clair:0 0 0 1px rgba(99,29,42,.10),0 22px 44px -26px rgba(99,29,42,.30);
}

/* ── Apparition au défilement ──────────────────────────────────────────── */
/* 28/09 : plus rien n'est masqué en attendant le défilement (blocs restés invisibles sur la page Studio). */
.vv{opacity:1;transform:none}
.vv.vv-vu{opacity:1;transform:none}

/* ── Survols : ce qui se soulève ───────────────────────────────────────── */
.metiers .row,.public,.post,.formcard,.st-produit,.pg-antoine .famille,.pg-antoine .fichier,
.pg-antoine .etat,.pg-cpa .capture,.pg-antoine .capture-reelle img,.related a,.faq .qa{
  transition:transform .35s var(--vv-ease),box-shadow .35s var(--vv-ease),background-color .35s var(--vv-ease)}
.metiers .row{border-radius:var(--r-bloc);margin-inline:calc(var(--u2) * -1);padding-inline:var(--u2)}
.metiers .row:hover{background:rgba(237,233,225,.04);transform:translateX(6px)}
.public:hover,.post:hover,.related a:hover,.faq .qa:hover{transform:translateY(-3px)}
.formcard:hover{box-shadow:var(--vv-halo)}
.st-produit:hover{transform:translateY(-4px)}
.pg-antoine .famille:hover,.pg-antoine .fichier:hover,.pg-antoine .etat:hover{transform:translateY(-3px);box-shadow:var(--vv-halo-clair)}
.pg-cpa .capture:hover,.pg-antoine .capture-reelle img:hover{transform:translateY(-4px);box-shadow:var(--vv-halo-clair)}

/* ── Captures et vignettes qui zooment (propriété scale, qui se compose
      avec le recadrage posé en transform dans la page) ─────────────────── */
.st-visu img,.pg-cpa .capture img,.st-ecrans img{transition:scale .7s var(--vv-ease)}
.st-produit:hover .st-visu img{scale:1.06}
.pg-cpa .capture:hover img{scale:1.03}
.st-ecrans figure,.st-ecrans .capture{overflow:hidden}
.st-ecrans figure:hover img,.st-ecrans .capture:hover img{scale:1.03}

/* ── Flèche des boutons qui avance (chevron dessiné, pas un caractère) ─── */
main .btn::after,footer .btn::after,.formcard button::after{
  content:"";width:.5em;height:.5em;margin-left:2px;flex:none;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--vv-ease)}
main .btn:hover::after,footer .btn:hover::after,.formcard button:hover::after{transform:translateX(4px) rotate(45deg)}

/* ── Soulignés qui glissent : un trait court au repos, qui s'étire au survol ── */
.post .more,.pg-studio .st-produit .aller,.produit-page .retour,.pg-antoine .retour,.back{
  text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0% 1.5px no-repeat;
  padding-bottom:3px;transition:background-size .4s var(--vv-ease),color .3s var(--vv-ease)}
.post .more,.pg-studio .st-produit .aller{background-size:28% 1.5px}
.post:hover .more,.pg-studio .st-produit:hover .aller,.pg-studio .st-produit .aller:hover,
.produit-page .retour:hover,.pg-antoine .retour:hover,.back:hover{background-size:100% 1.5px}

/* ── Formes pâles qui flottent en fond de section ──────────────────────── */
#haut > section,.article,.pg-studio section,.pg-antoine section,.pg-cpa section{
  position:relative;isolation:isolate;overflow:clip}
#haut > section::before,.article::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;width:520px;height:520px;
  top:-140px;right:-160px;opacity:.055;
  background:url("astroid-tile-bone.svg") center/contain no-repeat;
  animation:vv-tourne 90s linear infinite}
#haut > section::after,.article::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;width:260px;height:260px;
  bottom:40px;left:-90px;opacity:.035;
  background:url("astroid-tile-bone.svg") center/contain no-repeat;
  animation:vv-flotte 28s ease-in-out infinite}
#haut > section:nth-of-type(even)::before{right:auto;left:-180px;top:-100px;animation-direction:reverse}
#haut > section:nth-of-type(even)::after{left:auto;right:-120px}
.pg-studio section::before,.pg-antoine section::before,.pg-cpa section::before,
.pg-studio section::after,.pg-antoine section::after,.pg-cpa section::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.035}
.pg-studio section::before,.pg-antoine section::before,.pg-cpa section::before{
  width:560px;height:560px;top:-220px;right:-180px;animation:vv-flotte 26s ease-in-out infinite}
.pg-studio section::after,.pg-antoine section::after,.pg-cpa section::after{
  width:300px;height:300px;bottom:-140px;left:-90px;opacity:.025;animation:vv-flotte 32s ease-in-out infinite reverse}
.pg-studio section:nth-of-type(even)::before,.pg-antoine section:nth-of-type(even)::before,
.pg-cpa section:nth-of-type(even)::before{right:auto;left:-220px;top:-160px}
.pg-studio section:nth-of-type(even)::after,.pg-antoine section:nth-of-type(even)::after,
.pg-cpa section:nth-of-type(even)::after{left:auto;right:-80px}
@keyframes vv-flotte{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,18px)}}
@keyframes vv-tourne{to{transform:rotate(360deg)}}

/* ── Astroïde du héros : parallaxe douce au mouvement de la souris ─────── */
.astre{translate:var(--px,0px) var(--py,0px);transition:translate .9s var(--vv-ease)}

@media (max-width:760px){
  #haut > section::before,.article::before{width:320px;height:320px;right:-140px}
  /* Les grands disques, plus larges que l'écran, étaient coupés au carré par le bord de la section :
     plus petits et posés à l'intérieur, seul le bord de l'écran les rogne. */
  .pg-studio section::before,.pg-antoine section::before,.pg-cpa section::before{
    width:220px;height:220px;top:36px;right:-90px}
  .pg-studio section:nth-of-type(even)::before,.pg-antoine section:nth-of-type(even)::before,
  .pg-cpa section:nth-of-type(even)::before{top:36px;left:-100px;right:auto}
  .pg-studio section::after,.pg-antoine section::after,.pg-cpa section::after{display:none}
  .metiers .row{margin-inline:0;padding-inline:0}
  .metiers .row:hover{transform:none}
}
@media (hover:none){
  .st-produit:hover,.public:hover,.post:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .vv{opacity:1;transform:none}
  #haut > section::before,#haut > section::after,.article::before,.article::after,
  .pg-studio section::before,.pg-antoine section::before,.pg-cpa section::before,
  .pg-studio section::after,.pg-antoine section::after,.pg-cpa section::after{animation:none}
  .astre{translate:none}
  .st-produit:hover .st-visu img,.pg-cpa .capture:hover img{scale:1}
}