/* ==========================================================================
   model.css · la structure validée le 03/09/2026 (maquette _maquette-home.html)
   Le modèle de mise en page validé. Chargé après site.css par les pages qui
   l'adoptent : index.html (body.home) et les pages intérieures (body.pg).
   ========================================================================== */
body.home, body.pg{ --pad:128px; --r:8px; }
/* Le rythme vertical ne vaut que pour la home, dont les sections ont été
   écrites pour lui. Sur les pages intérieures, chaque section garde son
   espacement d'origine : l'imposer y créait de grands vides. */
body.home main section, body.pg main section{padding:var(--pad) 0;}
body.home main .wrap, body.pg main .wrap{max-width:1240px;padding-left:44px;padding-right:44px;}

/* Sur-titre numéroté */
body.home main .eyebrow, body.pg main .eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--clay-600);margin-bottom:22px;}
body.home main .eyebrow .no, body.pg main .eyebrow .no{font-family:var(--serif);font-size:15px;letter-spacing:0;}
body.home main .eyebrow .bar, body.pg main .eyebrow .bar{flex:none;width:44px;height:1px;background:var(--clay-200);}
body.home main .center .eyebrow, body.pg main .center .eyebrow,body.home .eyebrow.mid{justify-content:center;}

/* En-tête de section */
body.home main .shead, body.pg main .shead{max-width:720px;margin-bottom:64px;}
body.home main .shead.mid, body.pg main .shead.mid{margin-inline:auto;text-align:center;}
body.home main .shead h2, body.pg main .shead h2{font-size:clamp(34px,4.2vw,54px);letter-spacing:-1.4px;line-height:1.1;}
body.home main .shead p, body.pg main .shead p{margin-top:20px;font-size:17px;color:var(--graphite);line-height:1.72;}

/* Deux colonnes en vis-à-vis */
body.home main .duo, body.pg main .duo{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center;}
body.home main .duo.top, body.pg main .duo.top{align-items:start;}
body.home main .duo.rev > :first-child, body.pg main .duo.rev > :first-child{order:2;}
body.home main .duo h2, body.pg main .duo h2{font-size:clamp(30px,3.8vw,48px);letter-spacing:-1.3px;line-height:1.12;}
body.home main .duo .lead, body.pg main .duo .lead{font-size:19px;color:var(--graphite);line-height:1.72;}

/* Bandes */
body.home main .band-soft, body.pg main .band-soft{background:var(--bone);}
body.home main .band-dark, body.pg main .band-dark{background:var(--ink);color:#fff;position:relative;}
body.home main .band-dark .eyebrow, body.pg main .band-dark .eyebrow{color:var(--clay-200);}
body.home main .band-dark .eyebrow .bar, body.pg main .band-dark .eyebrow .bar{background:rgba(255,255,255,.28);}
body.home main .band-dark h2, body.pg main .band-dark h2{color:#fff;}
body.home main .band-dark h2 em, body.pg main .band-dark h2 em{color:var(--clay-200);}
body.home main .band-dark p, body.pg main .band-dark p,body.home .band-dark .lead{color:rgba(255,255,255,.68);}

/* Colonnes ouvertes (bénéfices) */
body.home main .cols, body.pg main .cols{display:grid;gap:56px;}
body.home main .cols.c4, body.pg main .cols.c4{grid-template-columns:repeat(4,1fr);}
body.home main .col .num, body.pg main .col .num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--r);background:var(--clay-600);color:#fff;font-family:var(--sans);
  font-size:17px;font-weight:700;letter-spacing:-.5px;margin-bottom:24px;}
body.home main .col h3, body.pg main .col h3{font-family:var(--sans);font-size:21px;font-weight:600;letter-spacing:-.4px;
  margin:0 0 12px;line-height:1.28;}
body.home main .col p, body.pg main .col p{font-size:15.5px;color:var(--ink);line-height:1.6;font-weight:500;margin:0;}
body.home main .col .ex, body.pg main .col .ex{font-size:14px;color:var(--graphite);margin-top:18px;padding-top:18px;
  border-top:1px solid var(--mist);line-height:1.6;}
body.home main .col .ex b, body.pg main .col .ex b{color:var(--clay-700);font-weight:600;}

/* Liste ouverte à filets (réalisations) */
body.home main .rows, body.pg main .rows{border-top:1px solid var(--mist);}
body.home main .row, body.pg main .row{display:grid;grid-template-columns:78px 1fr 340px;gap:40px;align-items:baseline;
  padding:36px 0;border-bottom:1px solid var(--mist);transition:background .2s;}
body.home main .row:hover, body.pg main .row:hover{background:rgba(248,236,228,.34);}
body.home main .row .idx, body.pg main .row .idx{font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;
  background:var(--clay-600);width:40px;height:40px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;}
body.home main .row .kind, body.pg main .row .kind{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--clay-600);margin-bottom:9px;}
body.home main .row h3, body.pg main .row h3{font-family:var(--sans);font-size:19.5px;font-weight:600;letter-spacing:0;
  line-height:1.35;margin:0;}
body.home main .row p, body.pg main .row p{font-size:15px;color:var(--graphite);line-height:1.68;margin:0;}

/* Lien fléché */
body.home main .lnk, body.pg main .lnk{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--clay-700);text-decoration:none;}
body.home main .lnk svg, body.pg main .lnk svg{transition:transform .18s;}
body.home main .lnk:hover svg, body.pg main .lnk:hover svg{transform:translateX(4px);}
body.home main .band-dark .lnk, body.pg main .band-dark .lnk{color:var(--clay-200);}

/* Citation */
body.home main .quote, body.pg main .quote{max-width:920px;margin:0 auto;text-align:center;}
body.home main .quote blockquote, body.pg main .quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);
  line-height:1.28;letter-spacing:-1.2px;color:#fff;}
body.home main .quote blockquote em, body.pg main .quote blockquote em{font-style:italic;color:var(--clay-200);}
body.home main .quote .by, body.pg main .quote .by{margin-top:32px;font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:rgba(255,255,255,.48);}

/* Articles avec couverture */
body.home main .posts, body.pg main .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 46px;}
body.home main .post, body.pg main .post{display:flex;flex-direction:column;}
body.home main .post a.cover, body.pg main .post a.cover{display:block;overflow:hidden;border-radius:var(--r);margin-bottom:22px;background:var(--bone);}
body.home main .post a.cover img, body.pg main .post a.cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s cubic-bezier(.19,1,.22,1);}
body.home main .post a.cover:hover img, body.pg main .post a.cover:hover img{transform:scale(1.04);}
body.home main .post .cat, body.pg main .post .cat{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--clay-600);margin-bottom:12px;}
body.home main .post h3, body.pg main .post h3{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.3px;
  line-height:1.32;margin:0 0 10px;}
body.home main .post p, body.pg main .post p{font-size:14.5px;color:var(--graphite);line-height:1.62;margin:0 0 18px;}
body.home main .post .lnk, body.pg main .post .lnk{margin-top:auto;}

/* Étiquettes en ligne */
body.home main .inline-list, body.pg main .inline-list{margin-top:30px;font-size:15px;color:var(--graphite);line-height:2.1;}
body.home main .inline-list span:not(:last-child)::after, body.pg main .inline-list span:not(:last-child)::after{content:"·";margin:0 11px;color:var(--clay-200);}

body.home main .foot-note, body.pg main .foot-note{margin-top:34px;font-size:15px;color:var(--graphite);}
body.home main .foot-note a, body.pg main .foot-note a{color:var(--clay-700);font-weight:600;}
body.home main .band-dark .foot-note, body.pg main .band-dark .foot-note{color:rgba(255,255,255,.62);}
body.home main .band-dark .foot-note a, body.pg main .band-dark .foot-note a{color:var(--clay-200);}

@media(max-width:980px){
  body.home{--pad:80px;}
  body.home .wrap{padding-left:24px;padding-right:24px;}
  body.home .duo,body.home .cols.c4,body.home .posts{grid-template-columns:1fr;gap:40px;}
  body.home .duo.rev > :first-child{order:0;}
  body.home .row{grid-template-columns:52px 1fr;gap:20px;}
  body.home .row > :last-child{grid-column:2;}
}
/* Le sur-titre numéroté ne doit pas laisser de blanc quand il est seul. */
body.home main .shead:has(> .eyebrow:only-child), body.pg main .shead:has(> .eyebrow:only-child){margin-bottom:34px;}

/* ==========================================================================
   HERO ENCRE DES PAGES INTÉRIEURES
   Deux fonds au choix, sans dépendre d'une photo :
     .hero-dark.photo  → le portrait fondu (page À propos)
     .hero-dark.motif     → le symbole Ampliris en filigrane (autres pages)
   ========================================================================== */
.hero-dark{position:relative;isolation:isolate;background:var(--ink);color:#fff;
  padding:114px 0 108px;margin:0;overflow:hidden;text-align:left;max-width:none;}
.hero-dark > .wrap{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 44px;}
.hero-dark::before{content:"";position:absolute;z-index:0;inset:0;
  background:radial-gradient(58% 70% at 12% 46%, rgba(192,90,56,.17), rgba(192,90,56,0) 68%);}
.hero-dark::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:170px;
  background:linear-gradient(180deg,rgba(28,26,23,0),rgba(28,26,23,.9));pointer-events:none;}

/* Fond photo : le portrait, fondu vers l'encre */
.hero-dark.photo .bgmedia{position:absolute;z-index:0;inset:0 0 0 auto;width:min(52vw,860px);
  background-image:linear-gradient(90deg,#1C1A17 0%,#1C1A17 22%,rgba(28,26,23,.86) 44%,rgba(28,26,23,.46) 74%,rgba(28,26,23,.26) 100%),
                   var(--bg,none);
  background-size:cover,cover;background-position:center,58% 20%;background-repeat:no-repeat;}
/* Fond motif : le symbole en très grand, à droite */
.hero-dark.motif .bgmedia{position:absolute;z-index:0;right:-90px;top:50%;transform:translateY(-50%);
  width:640px;height:640px;opacity:.10;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='48' fill='none' stroke='%23E08B66' stroke-width='2'/%3E%3Cg fill='none' stroke='%23E08B66' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='34,87 60,74 86,87' opacity='0.45'/%3E%3Cpolyline points='39,73 60,60 81,73' opacity='0.75'/%3E%3Cpolyline points='44,59 60,46 76,59'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
.hero-dark.motif::before{background:radial-gradient(52% 64% at 70% 48%, rgba(192,90,56,.20), rgba(192,90,56,0) 70%);}

.hero-dark .kick{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:11px;
  font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:#E0A184;margin-bottom:28px;}
.hero-dark .kick .bar{flex:none;width:46px;height:1px;background:rgba(224,161,132,.55);}
.hero-dark h1{font-family:var(--serif);font-weight:600;margin:0;
  font-size:clamp(44px,6.2vw,86px);line-height:1.02;letter-spacing:-2.6px;max-width:17ch;color:#fff;}
.hero-dark h1 em{font-style:italic;color:var(--clay-600);}
.hero-dark h1 .punch{display:block;font-family:var(--sans);font-weight:700;text-transform:uppercase;
  letter-spacing:-3px;line-height:1.02;
  background:linear-gradient(100deg,#C05A38 0%,#E08B66 26%,#F6C9AE 50%,#E08B66 74%,#C05A38 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:sheen 6s linear infinite;}
@keyframes sheen{to{background-position:-220% center}}
.hero-dark .lead{color:rgba(255,255,255,.74) !important;font-size:19.5px;line-height:1.72;
  max-width:600px;margin:32px 0 38px;}
.hero-dark .cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:flex-start;}
.hero-dark .btn-ghost,.hero-dark .btn-onink{border:1px solid rgba(255,255,255,.32) !important;
  color:#fff !important;background:transparent !important;}
.hero-dark .btn-ghost:hover{border-color:#fff !important;background:rgba(255,255,255,.08) !important;color:#fff !important;}
.hero-dark .trust{color:rgba(255,255,255,.68) !important;background:none !important;border:none !important;
  padding:0 !important;margin-top:42px;justify-content:flex-start !important;}
.hero-dark .trust b{color:#fff !important;}
.hero-dark .avatars img{border-color:var(--ink) !important;}

@media(max-width:980px){
  .hero-dark{padding:72px 0 68px;}
  .hero-dark > .wrap{padding:0 24px;}
  .hero-dark h1{max-width:none;}
  .hero-dark.photo .bgmedia{width:100%;opacity:.5;
    background-image:linear-gradient(180deg,rgba(28,26,23,.68) 0%,#1C1A17 62%),var(--bg,none);}
  .hero-dark.motif .bgmedia{right:-160px;width:420px;height:420px;opacity:.07;}
}
@media(prefers-reduced-motion:reduce){.hero-dark h1 .punch{animation:none;}}

/* Cadrage du portrait dans le hero : moins frontal, décalé à droite. */
.hero-dark.photo .bgmedia{background-position:center,66% 16%;}
.hero-dark .trust{gap:14px;}
.hero-dark .trust .stars{margin-right:4px;}

/* La garantie, sous le hero encre */
.hero-dark .hero-guar{margin-top:34px;padding:15px 20px;border-radius:var(--r,8px);
  border:1px solid rgba(224,161,132,.4);background:rgba(192,90,56,.12);
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86);max-width:620px;}
.hero-dark .hero-guar strong{color:#E0A184;font-weight:600;}

/* Un peu d'air sur les pages intérieures, sans le rythme large de la home. */
body.pg main > section{padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(56px,6vw,80px);}
/* Plus de carte : du texte posé, séparé par du vide. */
body.home main .tcard,body.pg main .tcard{
  background:none !important;border:none !important;border-radius:0 !important;
  box-shadow:none !important;padding:30px 0 26px !important;
  flex:0 0 400px !important;margin-right:64px !important;}
body.home main .tcard .q,body.pg main .tcard .q{
  font-size:15.5px;line-height:1.7;color:var(--ink);}
body.home main .tcard .who-row,body.pg main .tcard .who-row{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--mist);}

/* Le bouton « Afficher tout » de l'archive du blog */
.arch-more{display:flex;justify-content:center;margin-top:44px;}
.arch-more .btn{padding:15px 30px;}

/* ==========================================================================
   DÉ-ENCADREMENT · l'objectif de départ
   Les composants ci-dessous étaient des boîtes (cadre + fond). Ils deviennent
   du contenu posé sur la page. On garde délibérément : les boutons, les champs
   de formulaire, et les filets qui SÉPARENT (colonnes de chiffres, lignes de
   liste, questions de la FAQ) : ceux-là structurent au lieu d'encadrer.
   ========================================================================== */
body.home main :is(.card,.dossier-card,.feat-card,.blindoc-card,.bd-demo,
  .blog-sim,.sim,.note,.news-band,.offer,.build,.pain,.it,.ck,.frame,.vicon,
  .uc,.method,.usecases,.test-teaser,.quiz-teaser,.tt-main),
body.pg main :is(.card,.dossier-card,.feat-card,.blindoc-card,.bd-demo,
  .blog-sim,.sim,.note,.news-band,.offer,.build,.pain,.it,.ck,.frame,.vicon,
  .uc,.method,.usecases,.test-teaser,.quiz-teaser,.tt-main){
  border:none !important;background:none !important;box-shadow:none !important;
  backdrop-filter:none !important;}

/* Les pastilles d'étiquette redeviennent du texte. */
body.home main :is(.chip,.tag,.uc-tag,.dk,.stack span,.tags span,.blog-filter .chip),
body.pg main :is(.chip,.tag,.uc-tag,.dk,.stack span,.tags span,.blog-filter .chip){
  background:none !important;border:none !important;padding:0 !important;
  border-radius:0 !important;}
body.home main .blog-filter,body.pg main .blog-filter{gap:6px 22px;}
body.home main .blog-filter .chip,body.pg main .blog-filter .chip{
  font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;
  color:var(--graphite) !important;cursor:pointer;}
body.home main .blog-filter .chip.active,body.pg main .blog-filter .chip.active{
  color:var(--clay-700) !important;}
body.home main .blog-filter .chip .c,body.pg main .blog-filter .chip .c{opacity:.55;font-weight:500;}

/* Le rond de la FAQ : juste le signe, sans cerceau. */
body.home main .qa summary .ic,body.pg main .qa summary .ic{
  border:none !important;background:none !important;}

/* Les blocs qui gardent un fond le font en teinte pleine, sans cadre. */
body.home main :is(.news-band,.blindoc-card),body.pg main :is(.news-band,.blindoc-card){
  padding-left:0 !important;padding-right:0 !important;}

/* ==========================================================================
   LES NUMÉROS · posés, pas encadrés
   La pastille pleine restait une boîte. Le numéro devient un repère
   typographique : chiffre net en terracotta, surmonté d'un filet court.
   ========================================================================== */
body.home main :is(.col .num,.row .idx),body.pg main :is(.col .num,.row .idx){
  display:block !important;width:auto !important;height:auto !important;
  background:none !important;border:none !important;border-radius:0 !important;
  color:var(--clay-600) !important;font-family:var(--sans) !important;
  font-weight:700 !important;font-size:13px !important;letter-spacing:2.2px !important;
  padding:0 0 12px !important;position:relative;}
body.home main :is(.col .num,.row .idx)::after,
body.pg main :is(.col .num,.row .idx)::after{
  content:"";position:absolute;left:0;bottom:4px;width:22px;height:2px;background:var(--clay-600);}
body.home main .col .num,body.pg main .col .num{margin-bottom:20px !important;}

/* La conviction, en bande pleine largeur comme sur la home. */
body.pg main .conviction{border-radius:0 !important;
  margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;
  width:100vw !important;max-width:100vw !important;
  padding-left:clamp(24px,5vw,64px) !important;padding-right:clamp(24px,5vw,64px) !important;}

/* ==========================================================================
   HERO ENCRE SUR LES PAGES EXISTANTES (auditdaeg, lead magnets)
   Ces pages ont un hero .hero-c qui contient des éléments fonctionnels
   (#top, #startBtn) : on ne touche PAS à leur HTML. Tout est fait ici.
   On n'utilise aucun pseudo-élément : ::before y sert déjà au halo.
   ========================================================================== */
body.pg main > .hero-c{
  position:relative;isolation:isolate;text-align:left;color:#fff;
  max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  /* Même gouttière que `.hero-dark > .wrap` : 1240 px de large, 44 px de
     marge intérieure. Sans le « + 44px » le texte des guides démarrait 20 px
     plus à gauche que celui de /programme. */
  padding:114px max(44px, calc((100vw - 1240px) / 2 + 44px)) 108px;
  background-color:var(--ink);
  /* Le fond est celui de .hero-dark.motif, à l'identique : les deux halos
     chauds et le grain de points. Le grand symbole en filigrane qu'on posait
     ici a été retiré des heros du site (.hero-dark.motif .bgmedia est masqué),
     il n'avait plus de raison de rester sur les guides.
     Tout passe par background-image plutôt que par un pseudo-élément :
     chaque page pose déjà un `#top::before`, dont l'ID battrait n'importe
     quelle règle de cette feuille. */
  background-image:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(72% 92% at 76% 24%, rgba(192,90,56,.30), rgba(192,90,56,0) 62%),
    radial-gradient(52% 72% at 6% 92%, rgba(224,139,102,.14), rgba(224,139,102,0) 60%);
  background-repeat:repeat,no-repeat,no-repeat;
  background-position:0 0,center,center;
  background-size:4px 4px,cover,cover;}
/* Le halo clair d'origine n'a plus lieu d'être sur fond encre. */
body.pg main > .hero-c::before{display:none !important;}
/* Le contenu du hero est recentré dans la largeur de lecture. */
body.pg main > .hero-c > *{position:relative;z-index:2;margin-left:0;margin-right:0;}
body.pg main > .hero-c > h1{max-width:17ch;}
body.pg main > .hero-c > .lead{max-width:600px;}

body.pg main > .hero-c .badge{background:none !important;border:none !important;padding:0 !important;
  color:#E0A184 !important;font-size:11px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:0;letter-spacing:3px;margin-bottom:28px;}
body.pg main > .hero-c .badge .bdot{background:#E0A184 !important;}
/* Le titre reprend exactement le traitement de .hero-dark (voir /programme
   et /a-propos) : Jost gras, bas de casse, deuxième ligne terracotta. Le
   serif de site.css montait à 88 px, soit un titre deux fois plus haut que
   celui des autres pages intérieures. */
body.pg main > .hero-c h1{font-family:var(--sans);font-weight:700;font-style:normal;
  font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-2.3px;
  max-width:20ch;color:#fff;}
body.pg main > .hero-c h1 .static,
body.pg main > .hero-c h1 .punch{display:block;font-family:var(--sans);font-weight:700;
  font-style:normal;text-transform:none;font-size:inherit;line-height:1.02;
  letter-spacing:-2.3px;margin-top:0;max-width:20ch;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;animation:none;}
body.pg main > .hero-c h1 .static{color:#fff;-webkit-text-fill-color:#fff;}
body.pg main > .hero-c h1 .punch{color:#E8A184;-webkit-text-fill-color:#E8A184;}
body.pg main > .hero-c h1 em{font-style:normal;color:#E8A184;-webkit-text-fill-color:#E8A184;}
body.pg main > .hero-c .lead{color:rgba(255,255,255,.74) !important;margin:32px 0 38px !important;
  font-size:19.5px;line-height:1.72;}
body.pg main > .hero-c .lead strong{color:#fff;}
body.pg main > .hero-c .cta{justify-content:flex-start !important;}
body.pg main > .hero-c .btn-ghost{border-color:rgba(255,255,255,.32) !important;color:#fff !important;background:transparent !important;}
body.pg main > .hero-c .btn-ghost:hover{border-color:#fff !important;background:rgba(255,255,255,.08) !important;}
body.pg main > .hero-c .trust{color:rgba(255,255,255,.68) !important;background:none !important;
  border:none !important;padding:0 !important;justify-content:flex-start !important;}
body.pg main > .hero-c .trust b{color:#fff !important;}
body.pg main > .hero-c .avatars img{border-color:var(--ink) !important;}
/* La ligne d'accroche du hero des lead magnets reste éclatante. */
body.pg main > .hero-c h1 .static{color:rgba(255,255,255,.94) !important;}

@media(max-width:980px){
  body.pg main > .hero-c{padding:70px 24px 66px;background-position:center,right -160px top 62%;background-size:cover,280px 280px;}
}

/* Variante pour les pages dont le hero est .page-hero (profil-ia).
   Ces heros portent des styles en ligne (text-align, max-width) : il faut
   donc forcer, sans quoi l'attribut style l'emporterait. */
body.pg main > .page-hero{
  position:relative;isolation:isolate;text-align:left !important;color:#fff;
  max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:106px max(clamp(24px,4vw,44px), calc((100vw - 1240px) / 2)) 100px;
  background-color:var(--ink);
  background-image:
    radial-gradient(52% 64% at 72% 46%, rgba(192,90,56,.20), rgba(192,90,56,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='48' fill='none' stroke='%23E08B66' stroke-width='2'/%3E%3Cg fill='none' stroke='%23E08B66' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='34,87 60,74 86,87' opacity='0.45'/%3E%3Cpolyline points='39,73 60,60 81,73' opacity='0.75'/%3E%3Cpolyline points='44,59 60,46 76,59'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:center,right -130px center;
  background-size:cover,460px 460px;}
body.pg main > .page-hero::before{display:none !important;}
body.pg main > .page-hero > *,body.pg main > .page-hero > * > *{
  max-width:none !important;margin-left:0 !important;margin-right:0 !important;
  text-align:left !important;position:relative;z-index:2;}
body.pg main > .page-hero .eyebrow{justify-content:flex-start !important;color:#E0A184 !important;
  font-size:11px;letter-spacing:2.8px;font-weight:600;}
body.pg main > .page-hero .badge{background:none !important;border:none !important;padding:0 !important;
  color:#E0A184 !important;font-size:11px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;}
body.pg main > .page-hero h1{color:#fff;letter-spacing:-2.4px;max-width:17ch;}
body.pg main > .page-hero h1 em{color:var(--clay-600);}
body.pg main > .page-hero p,body.pg main > .page-hero .lead{color:rgba(255,255,255,.74) !important;max-width:60ch;}
body.pg main > .page-hero .cta{justify-content:flex-start !important;}
body.pg main > .page-hero .btn-ghost{border-color:rgba(255,255,255,.32) !important;color:#fff !important;background:transparent !important;}
@media(max-width:980px){
  body.pg main > .page-hero{padding:68px 24px 64px;background-position:center,right -160px top 62%;background-size:cover,280px 280px;}
}

/* ==========================================================================
   PAGES LÉGALES ET 404
   Leur en-tête est hors de <main> (.legal-head) ou dedans (.e404) : on traite
   les deux. Bande encre pleine largeur, texte de lecture inchangé.
   ========================================================================== */
body.pg .legal-head,
body.pg main > .e404{
  position:relative;isolation:isolate;text-align:left !important;color:#fff;
  max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:92px max(clamp(24px,4vw,44px), calc((100vw - 1240px) / 2)) 86px;
  background-color:var(--ink);
  background-image:
    radial-gradient(52% 64% at 74% 46%, rgba(192,90,56,.18), rgba(192,90,56,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='48' fill='none' stroke='%23E08B66' stroke-width='2'/%3E%3Cg fill='none' stroke='%23E08B66' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='34,87 60,74 86,87' opacity='0.45'/%3E%3Cpolyline points='39,73 60,60 81,73' opacity='0.75'/%3E%3Cpolyline points='44,59 60,46 76,59'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:center,right -140px center;
  background-size:cover,420px 420px;}
body.pg .legal-head > *,body.pg main > .e404 > *{position:relative;z-index:2;text-align:left !important;}
body.pg .legal-head .eyebrow,body.pg main > .e404 .eyebrow{
  justify-content:flex-start !important;color:#E0A184 !important;
  font-size:11px !important;letter-spacing:2.8px !important;font-weight:600 !important;margin-bottom:18px !important;}
body.pg .legal-head h1,body.pg main > .e404 h1{color:#fff;letter-spacing:-2px;max-width:20ch;}
body.pg .legal-head h1 em,body.pg main > .e404 h1 em{color:var(--clay-600) !important;}
body.pg main > .e404 p{color:rgba(255,255,255,.74) !important;max-width:58ch;}
body.pg main > .e404 .big{color:rgba(224,161,132,.18) !important;}
body.pg main > .e404 .cta{justify-content:flex-start !important;}
body.pg main > .e404 .btn-ghost{border-color:rgba(255,255,255,.32) !important;color:#fff !important;background:transparent !important;}
/* Le corps du texte légal reste sur fond clair, avec un peu d'air en haut. */
body.pg main.legal{padding-top:54px !important;}
body.pg main.legal .note{background:var(--bone) !important;border:none !important;
  border-left:2px solid var(--clay-600) !important;border-radius:0 !important;}
body.pg main.legal .ph{background:none !important;border:none !important;padding:0 !important;
  color:var(--clay-700) !important;}

@media(max-width:980px){
  body.pg .legal-head,body.pg main > .e404{
    padding:62px 24px 58px;background-position:center,right -170px top 60%;background-size:cover,260px 260px;}
}

/* Le 404 porte ses styles dans la page même : il faut donc être plus précis.
   Le grand « 404 » est un texte en dégradé découpé ; on ne le recolore pas,
   on le réduit et on l'espace pour qu'il ne chevauche plus le titre. */
body.pg main > .e404 .big{font-size:clamp(84px,12vw,150px) !important;
  line-height:1 !important;margin-bottom:12px !important;opacity:.9;}
body.pg main > .e404 h1{margin:6px 0 0 !important;}
body.pg main > .e404 p{margin:18px 0 30px !important;}
body.pg main > .e404 .cta{gap:13px;}

/* ==========================================================================
   REFONTE COPY · 7 septembre 2026
   Les colonnes .col arrivent maintenant sur fond encre (les trois intensités
   de l'accueil). La règle .col p fixait la couleur d'encre et l'emportait sur
   .band-dark p : on la rend au fond sombre ici.
   ========================================================================== */
body.home main .band-dark .col p, body.pg main .band-dark .col p{color:rgba(255,255,255,.72);}
body.home main .band-dark .col h3, body.pg main .band-dark .col h3{color:#fff;}
body.home main .band-dark .col .num, body.pg main .band-dark .col .num{color:var(--clay-200);}
body.home main .band-dark .col .num::after, body.pg main .band-dark .col .num::after{background:var(--clay-200);}
body.home main .band-dark .btn-light, body.pg main .band-dark .btn-light{background:#fff;color:var(--ink);}
body.home main .band-dark .btn-light:hover, body.pg main .band-dark .btn-light:hover{background:var(--clay-50);color:var(--ink);}
body.home main .band-dark .btn-ghost, body.pg main .band-dark .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff;background:transparent;}
body.home main .band-dark .btn-ghost:hover, body.pg main .band-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;}
/* Les mêmes colonnes sur le dégradé terracotta de la page programme. */
body.pg main .band-clay .col p{color:rgba(255,255,255,.86);}
body.pg main .band-clay .col h3{color:#fff;}

/* ---------- Blocs de comparaison à deux colonnes ----------
   Deux cas mis côte à côte n'ont jamais exactement la même longueur de texte.
   Sans cadre, l'écart se lit comme un défaut de mise en page. La carte tient
   les deux blocs à la même hauteur et l'écart redevient invisible. */
body.home main .cols.c2.encadre, body.pg main .cols.c2.encadre{gap:28px;align-items:stretch;}
body.home main .cols.c2.encadre .col, body.pg main .cols.c2.encadre .col{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--mist);
  border-radius:22px;padding:36px 34px 34px;box-shadow:0 18px 40px -34px rgba(28,26,23,.5);}
body.home main .cols.c2.encadre .col .num, body.pg main .cols.c2.encadre .col .num{margin-bottom:16px !important;}
@media (max-width:760px){
  body.home main .cols.c2.encadre .col, body.pg main .cols.c2.encadre .col{padding:28px 24px;}
}

/* ============================================================================
   HERO · traitement unique des pages principales
   Aligne accueil, Programme, A propos et Blog sur le hero valide de
   /niveau-ia. Quatre differences a corriger par rapport a l'existant :
   la deuxieme ligne etait en capitales, la premiere ligne en gros serif au
   lieu d'une amorce legere, le surtitre portait un tiret, et le motif posait
   un chevron rogne hors cadre.
   ========================================================================= */
.hero-dark::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.045;height:auto;
  background-image:radial-gradient(#fff 1px,transparent 1px);background-size:4px 4px;}
.hero-dark.motif .bgmedia{display:none;}
.hero-dark.motif::before{
  background:
    radial-gradient(72% 92% at 76% 24%, rgba(192,90,56,.30), rgba(192,90,56,0) 62%),
    radial-gradient(52% 72% at 6% 92%, rgba(224,139,102,.14), rgba(224,139,102,0) 60%);}
.hero-dark .kick .bar{display:none;}
.hero-dark .kick{gap:0;letter-spacing:3px;}
/* Deuxieme ligne : Jost gras, en bas de casse. */
.hero-dark h1 .punch,.hero-dark h1 .l2{
  display:block;font-family:var(--sans);font-weight:700;font-style:normal;text-transform:none;
  font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-2.3px;
  margin-top:0;max-width:20ch;
  /* Neutralise le degrade anime, banni sur tout le site. */
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;animation:none;}
.hero-dark h1 .punch em,.hero-dark h1 .l2 em{font-style:normal;color:#E8A184;-webkit-text-fill-color:#E8A184;}

/* ============================================================================
   ACCUEIL · rythme de lecture
   Douze sections au meme traitement et au meme poids : rien n'indiquait ce
   qui compte, et une section de 47 mots occupait autant qu'une de 650.
   Trois corrections, sans toucher un mot du texte.
   ========================================================================= */

/* 1 · Le surtitre. Le filet et la numerotation imposaient un ordre de
      lecture sur une page qu'on parcourt en diagonale. Le libelle passe en
      capitales plus serrees, lisible au lieu d'etre etale. */
/* Les surtitres orange repetaient le titre juste en dessous et diluaient
   l'impact. 'En 2 minutes' au-dessus de 'Ma demarche, en 2 minutes',
   'La methode' au-dessus de 'DAEG, quatre lettres'. Ils sont retires de
   l'accueil. Le markup reste, seule leur affichage saute. */
body.home main > section .eyebrow{display:none;}
/* Les quatre temoignages portaient chacun un badge numerote alors que le
   texte juste au-dessus annonce deja 'quatre phrases'. Charge visuelle
   sans information. */
body.home main .cols.c4 .col .num{display:none !important;}
body.home main .cols.c4 .col h3{margin-top:0;}

/* 2 · Le rythme. Les temps forts respirent, les sections d'appoint se
      resserrent. La hierarchie se voit avant d'etre lue. */
body.home main > section{padding-top:clamp(72px,7vw,104px);padding-bottom:clamp(72px,7vw,104px);}
body.home main > section.sec-fort{padding-top:clamp(96px,9vw,140px);padding-bottom:clamp(96px,9vw,140px);}
body.home main > section.sec-mince{padding-top:clamp(44px,4vw,64px);padding-bottom:clamp(44px,4vw,64px);}

/* 3 · La section video. Trois mots de texte reclamaient la moitie de la
      largeur pendant que la video etait a l'etroit. On inverse le rapport. */
body.home main > section.sec-video .duo{grid-template-columns:.62fr 1.38fr;gap:56px;align-items:center;}
body.home main > section.sec-video .shead,
body.home main > section.sec-video h2{margin-bottom:0;}
@media (max-width:900px){
  body.home main > section.sec-video .duo{grid-template-columns:1fr;gap:28px;}
}

/* ============================================================================
   SURTITRES · direction artistique generalisee
   L'accueil etait un cas particulier, ses surtitres repetaient le titre juste
   en dessous et sont masques. Ailleurs ils completent le titre et servent de
   reperes, on les garde. Ce qui se generalise, c'est leur traitement : plus
   de filet, un espacement lisible au lieu d'etale, et le chiffre en Jost.
   ========================================================================= */
body.pg main .eyebrow .bar,body.pg main .kick .bar{display:none;}
body.pg main .eyebrow{gap:0;font-size:11.5px;letter-spacing:1.6px;font-weight:600;}
body.pg main .eyebrow .no{font-family:var(--sans) !important;font-weight:700;
  font-size:12px;letter-spacing:1.6px;margin-right:10px;
  font-variant-numeric:lining-nums tabular-nums;}