/* La Grinta, charte V2 rouge : feuille autonome du site lagrintaperformance.fr.
   Assemblée depuis la maquette validée (public/mockups/la-grinta/assets), dans l'ordre
   de la cascade des pages : grinta.css, les feuilles de page, puis css/v2.css.
   Les règles sont celles de la maquette, à l'identique : le rendu du site doit rester
   celui que le client a validé. Seules les chartes jaune, menthe et lime et le sélecteur
   de chartes, sans objet ici, sont retirés. Chargée seule (skip_cms_stylesheets). */

/* ---- grinta.css ---- */
/* ==========================================================================
   LA GRINTA · système de design commun aux quatre chartes
   La grammaire est celle de la page d'accueil actuelle : une mosaïque de
   tuiles arrondies, des photos passées en bichromie dans la couleur de la
   marque, des titres Poppins extra-gras en italique capitale.
   Chaque charte ne change que des tokens : html[data-charte][data-theme].
   ========================================================================== */

:root{
  /* type */
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-hero:clamp(2.1rem,4.6vw,4.1rem);
  --fs-display:clamp(1.95rem,4vw,3.5rem);
  --fs-h3:clamp(1.25rem,1.8vw,1.6rem);
  --fs-tile:clamp(1.25rem,1.9vw,1.85rem);
  --fs-lead:clamp(1.08rem,1.35vw,1.28rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-xs:.8125rem;
  --lh-tight:.98;
  --lh-body:1.65;

  /* space and form */
  --container:1200px;
  --gap:14px;
  --row:124px;
  --pad:clamp(1.1rem,2vw,1.75rem);
  --sec:clamp(4rem,8vw,7rem);
  --r:14px;
  --r-lg:22px;
  --ease:cubic-bezier(.2,.75,.25,1);
  --dur:.55s;
  --header-h:88px;
}

/* ---------- Charte 1 · Rose & Noir (socle de la V2) ---------- */
[data-charte="rose"],[data-charte="v2"]{
  --plate-2:#FFFFFF; --on-a-btn:#222221;
  --acad:#FF0056;
  --hero-bolt:#222221; --bolt-b:#FF0056;
  color-scheme:light;
  --bg:#FFFFFF; --bg-rgb:255 255 255; --bg-2:#F4F3F1; --surface:#FFFFFF;
  --ink:#222221; --ink-rgb:34 34 33; --soft:#5C5B57; --line:#E4E2DD;
  --a:#FF0056; --a-rgb:255 0 86; --on-a:#FFFFFF; --on-a-2:#141413;
  --b:#222221; --on-b:#FFFFFF; --acc-b:#FF0056;
  --c:#EDECE9; --on-c:#222221;
  --plate:#EDECE9; --on-plate:#222221;
  --duo-hi:#FF0056; --duo-hi-rgb:255 0 86; --duo-lo:#222221;
  --accent:#FF0056; --accent-ink:#D6004B;
  --btn:#FF0056; --on-btn:#141413; --btn-2:#222221; --on-btn-2:#FFFFFF;
  --logo:#FF0056; --bolt:#222221; --glow:#FF0056; --glow-rgb:255 0 86;
  --foot:#141413; --on-foot:#F5F4F2; --foot-soft:#A8A7A2; --foot-logo:#FF0056; --foot-line:#2E2E2B;
}
[data-charte="rose"][data-theme="dark"],[data-charte="v2"][data-theme="dark"]{
  --plate-2:#EDECE9; --on-a-btn:#141413;
  --hero-bolt:#141413;
  color-scheme:dark;
  --bg:#141413; --bg-rgb:20 20 19; --bg-2:#1C1C1B; --surface:#222221;
  --ink:#F5F4F2; --ink-rgb:245 244 242; --soft:#A8A7A2; --line:#33332F;
  --b:#F5F4F2; --on-b:#141413; --acc-b:#D6004B;
  --c:#2B2B29; --on-c:#F5F4F2;
  --duo-lo:#141413;
  --accent-ink:#FF3377;
  --btn-2:#F5F4F2; --on-btn-2:#141413;
  --bolt:#FF0056;
  --foot:#0B0B0A; --foot-line:#262624;
}

/* ---------- V2 · Rose, Gris & Jaune : les retours du client sur Rose & Noir ----------
   Même rose, mêmes photos. Les cartes noires passent en gris anthracite, texte
   jaune fluo (le jaune reste lisible : 8:1 sur ce gris) ; les éclairs noirs
   passent en jaune. Le jaune signale ce qui parle de performance. */
[data-charte="v2"]{
  --hero-bolt:#FFFF00; --bolt-b:#FF0056;
  --b:#4A4946; --b-rgb:74 73 70; --on-b:#FFFF00; --on-b-2:#F5F4F2; --acc-b:#FFFF00;
  --perf:#FFFF00;
}
[data-charte="v2"][data-theme="dark"]{
  --hero-bolt:#FFFF00;
  --b:#3D3C3A; --b-rgb:61 60 58; --on-b:#FFFF00; --on-b-2:#F5F4F2; --acc-b:#FFFF00;
}

/* ---------- V2 en rouge d'origine ----------
   La même V2, dans le rouge du logo et du site actuel (#FF0035) au lieu du rose néon.
   Seule change la famille du rouge ; le texte rouge foncé garde 5:1 sur blanc. */
[data-charte="v2"][data-variante="rouge"]{
  --acad:#FF0035; --bolt-b:#FF0035;
  --a:#FF0035; --a-rgb:255 0 53;
  --duo-hi:#FF0035; --duo-hi-rgb:255 0 53;
  --accent:#FF0035; --accent-ink:#D6002D;
  --btn:#FF0035; --logo:#FF0035; --glow:#FF0035; --glow-rgb:255 0 53; --foot-logo:#FF0035;
}
[data-charte="v2"][data-variante="rouge"][data-theme="dark"]{
  --accent-ink:#FF4D63; --bolt:#FF0035;
}

/* ---------- Charte 2 · Jaune, Bleu & Gris ---------- */



/* ---------- Charte 3 · Menthe & Violet ---------- */



/* ---------- Charte 4 · Lime, Orange & Violet ---------- */



/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .3s,color .3s}
/* La découpe de la tuile GO! (.go-tile .cut, right:-10%) dépasse de l’écran entre
   700 et 1080 px : main la rogne. Sur main, car sur body la règle passerait à la
   fenêtre ; clip et non hidden, pour que les éléments collants de main (offres,
   contact, diagnostic) le restent. Safari < 16 l’ignore : le débord y demeure. */
main{overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:var(--lh-tight);letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px;border-radius:6px}
::selection{background:var(--a);color:var(--on-a)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--btn);color:var(--on-btn);padding:.7rem 1rem;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   Typographie
   ========================================================================== */
.display,.hero-title,.tile__title,.eq,.stat__num,.kicker,.btn,.nav a,.go{font-style:italic;text-transform:uppercase}
.display{font-size:var(--fs-display);font-weight:800;letter-spacing:-.015em;line-height:.98;text-wrap:balance}
.display em{font-style:italic;color:var(--accent)}
.hero-title{font-size:var(--fs-hero);font-weight:800;line-height:.94;letter-spacing:-.02em;text-wrap:balance}
.kicker{display:inline-flex;align-items:center;gap:.5em;margin:0 0 1rem;font-size:var(--fs-small);font-weight:800;letter-spacing:.04em;color:var(--accent-ink)}
.kicker .ic{width:.8em;height:1.4em;fill:currentColor;stroke:none}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink);max-width:62ch}
.muted{color:var(--soft)}
.h3{font-size:var(--fs-h3);font-weight:800;font-style:italic;text-transform:uppercase;line-height:1.05}
.prose{max-width:66ch}
.prose p{color:var(--soft)}
.prose strong{color:var(--ink);font-weight:700}
.nb{white-space:nowrap}

.m0{margin:0}
.kicker--on-a{color:var(--on-a-2)}
.kicker--on-b{color:var(--on-b)}
.kicker--acc-b{color:var(--acc-b)}
.kicker--inherit{color:inherit}
.text-strong{font-weight:600}
.on-a-2{color:var(--on-a-2)}
.text-body{font-size:var(--fs-body);font-weight:500}

/* ==========================================================================
   Mise en page
   ========================================================================== */
.wrap{width:min(var(--container),100% - 2*clamp(16px,4vw,40px));margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec)*.6)}
.sec--flush{padding-top:0}
.sec--alt{background:var(--bg-2)}
.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:820px}
.sec-head--row{max-width:none;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end;column-gap:3rem}
.sec-head .lead{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}

/* La mosaïque */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(var(--row),auto);gap:var(--gap)}
.s-2{grid-column:span 2}.s-3{grid-column:span 3}.s-4{grid-column:span 4}.s-5{grid-column:span 5}.s-6{grid-column:span 6}.s-7{grid-column:span 7}.s-8{grid-column:span 8}.s-9{grid-column:span 9}.s-12{grid-column:1/-1}
.r-2{grid-row:span 2}.r-3{grid-row:span 3}.r-4{grid-row:span 4}

/* ==========================================================================
   Tuiles
   ========================================================================== */
.tile{container-type:inline-size;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;min-width:0;padding:var(--pad);border-radius:var(--r);overflow:hidden;background:var(--plate);color:var(--on-plate);text-decoration:none;isolation:isolate}
.tile--center{justify-content:center;align-items:center;text-align:center}
.tile--top{justify-content:flex-start}
.tile--between{justify-content:space-between}
.tile--a{background:var(--a);color:var(--on-a)}
.tile--b{background:var(--b);color:var(--on-b)}
.tile--c{background:var(--c);color:var(--on-c)}
.tile--ink{background:var(--ink);color:var(--bg)}
.tile--plate{background:var(--plate);color:var(--on-plate)}
.tile--line{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.tile--alt{background:var(--bg-2);color:var(--ink)}
.tile__title{font-size:clamp(1.05rem,9.5cqi,var(--fs-tile));font-weight:800;line-height:.98;letter-spacing:-.01em;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
.tile__title--xl{font-size:clamp(1.35rem,8cqi,2.6rem)}
.tile__text{margin:0;font-size:var(--fs-small);line-height:1.55}
.tile__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tile__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:.6rem}
.tile--center .tile__body{align-items:center}

/* Bichromie : photo en niveaux de gris multipliée sur la couleur de la marque,
   ombres relevées dans la couleur sombre de la charte. */
.tile--duo{background:var(--duo-hi);color:var(--on-a)}
.tile--duo>img,.duo>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3) brightness(1.08);mix-blend-mode:multiply;transition:transform .8s var(--ease)}
.tile--duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--duo-lo);mix-blend-mode:lighten;pointer-events:none}
.tile--duo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(var(--duo-hi-rgb)/.78) 0%,rgb(var(--duo-hi-rgb)/.18) 42%,transparent 62%);pointer-events:none}
.tile--duo.tile--center::after{background:radial-gradient(closest-side,rgb(var(--duo-hi-rgb)/.62),rgb(var(--duo-hi-rgb)/.12) 85%,transparent)}
.tile--duo .tile__title{color:var(--on-a)}
.duo{position:relative;overflow:hidden;background:var(--duo-hi);isolation:isolate}
.duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--duo-lo);mix-blend-mode:lighten;pointer-events:none}

/* Photo en couleur (portraits) */
.tile--photo{padding:0;background:var(--bg-2)}
.tile--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile--photo .tile__body{margin-top:auto;padding:var(--pad)}
.tile--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(0 0 0/.82),rgb(0 0 0/.35) 26%,transparent 46%);pointer-events:none}
.tile--photo .tile__body{color:rgb(255 255 255)}
.caption{margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255/.92)}
.caption b{display:block;font-size:var(--fs-small);font-style:italic;font-weight:800;color:rgb(255 255 255)}

/* Plaque logo : les logos partenaires sont prévus pour un fond clair */
.tile--logo{align-items:center;justify-content:center;background:var(--plate)}
.tile--logo,.tile--plate,.logos figure{box-shadow:inset 0 0 0 1px rgb(0 0 0/.06)}
.sec--alt .tile--logo,.sec--alt .tile--plate,.sec--alt .logos figure{background:var(--plate-2)}
.tile--logo img{width:auto;max-width:78%;max-height:64%;object-fit:contain;mix-blend-mode:multiply}
.tile--logo .tile__meta{position:absolute;left:var(--pad);right:var(--pad);bottom:.9rem;justify-content:center;color:var(--on-plate);opacity:.72}

/* Chiffre clé */
.stat__num{display:block;font-size:clamp(2.2rem,30cqi,4.4rem);font-weight:900;line-height:.9;letter-spacing:-.03em;color:var(--accent)}
.tile--a .stat__num,.tile--duo .stat__num{color:var(--on-a)}
.tile--b .stat__num{color:var(--acc-b)}
.stat__label{margin:0;font-size:var(--fs-small);font-weight:700;line-height:1.3}

/* Découpe qui sort de la tuile (le sauteur, la sauteuse) */
.tile--cut{overflow:visible}
.tile--cut .cut{position:absolute;z-index:3;bottom:0;right:4%;height:122%;width:auto;max-width:none;filter:grayscale(1) contrast(1.08) drop-shadow(0 18px 24px rgb(0 0 0/.28));pointer-events:none}

/* Éclair géant en fond de tuile */
.tile__bolt{position:absolute;z-index:0;right:-6%;top:-8%;height:122%;width:auto;fill:var(--bolt);opacity:.95;pointer-events:none}
.tile--a .tile__bolt,.tile--duo .tile__bolt{fill:var(--hero-bolt)}
.tile--b .tile__bolt{fill:var(--bolt-b)}

/* Tuile cliquable : seule une tuile-lien réagit au survol */
a.tile{cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.tile:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--glow),0 22px 44px -18px rgb(var(--glow-rgb)/.6)}
a.tile:hover>img{transform:scale(1.045)}
.tile__go{position:absolute;z-index:3;top:var(--pad);right:var(--pad);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgb(var(--bg-rgb)/.94);color:var(--ink);transition:transform .35s var(--ease)}
.tile__go .ic{width:1.1rem;height:1.1rem}
a.tile:hover .tile__go{transform:translate(3px,-3px) rotate(-12deg)}
.tile--b .tile__go{background:var(--on-b);color:var(--b)}
.tile--a .tile__go,.tile--duo .tile__go{background:var(--on-a);color:var(--a)}

/* ==========================================================================
   Boutons et liens d'action
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3.1rem;padding:.85em 1.45em;border:0;border-radius:12px;background:var(--btn);color:var(--on-btn);font-size:.98rem;font-weight:800;letter-spacing:.03em;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn .ic{width:1.15em;height:1.15em;stroke-width:2.4;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgb(var(--glow-rgb)/.75)}
.btn:hover .ic{transform:translateX(4px)}
.btn--2{background:var(--btn-2);color:var(--on-btn-2)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px currentColor}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px currentColor,0 12px 26px -12px rgb(var(--glow-rgb)/.6)}
.btn--on-a{background:var(--on-a);color:var(--on-a-btn)}
.btn--on-b{background:var(--on-b);color:var(--b)}
.btn--lg{min-height:3.6rem;font-size:1.08rem;padding:1em 1.7em}
.btn--block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.go{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-small);font-weight:800;letter-spacing:.04em;text-decoration:none;color:var(--accent-ink)}
.go .ic{stroke-width:2.4;transition:transform .25s var(--ease)}
.go:hover .ic{transform:translateX(4px)}
.go:hover{text-decoration:underline}
.go.kicker--on-a{color:var(--on-a-2)}.go.kicker--on-b{color:var(--on-b)}.go.kicker--acc-b{color:var(--acc-b)}.go.kicker--inherit{color:inherit}

/* ==========================================================================
   En-tête
   ========================================================================== */
.head{position:sticky;top:0;z-index:50;background:rgb(var(--bg-rgb)/.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s,background-color .3s}
.head.is-scrolled{box-shadow:0 1px 0 var(--line)}
.head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;min-height:var(--header-h);padding-block:.7rem}
.head__social{display:flex;gap:.2rem}
.head__social a,.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;color:var(--ink);transition:background-color .2s,color .2s}
.head__social a:hover,.icon-btn:hover{background:var(--bg-2);color:var(--accent-ink)}
.head__social .ic{width:18px;height:18px}
.head__center{display:grid;justify-items:center;gap:.45rem}
.logo{display:block;color:var(--logo);line-height:0}
.logo svg{height:30px;width:auto;fill:currentColor}
.nav ul{display:flex;gap:.2rem 1.35rem;list-style:none}
.nav a{position:relative;display:inline-block;padding:.2rem 0;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-decoration:none;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.head__end{display:flex;justify-content:flex-end;align-items:center;gap:.5rem}
.head__end .btn{min-height:2.75rem;padding:.7em 1.15em;font-size:.84rem}
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;background:var(--bg-2);border:0;color:var(--ink);cursor:pointer;padding:0;transition:background-color .2s,color .2s}
.theme-toggle:hover{color:var(--accent-ink)}
.theme-toggle .ic{width:18px;height:18px}
:root[data-theme="dark"] .ic-moon{display:none}
:root[data-theme="light"] .ic-sun{display:none}
.burger{display:none}

/* Menu mobile */
.menu{position:fixed;inset:0;z-index:60;display:grid;align-content:start;gap:1.4rem;padding:calc(var(--header-h) + 1rem) clamp(16px,5vw,40px) 2rem;background:var(--bg);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .3s var(--ease),visibility 0s .3s}
.menu.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .3s var(--ease)}
.menu__close{position:absolute;top:1.1rem;right:clamp(16px,5vw,40px)}
.menu ul{display:grid;gap:.4rem;list-style:none}
.menu ul a{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;border-radius:var(--r);background:var(--bg-2);font-size:1.5rem;font-weight:800;font-style:italic;text-transform:uppercase;text-decoration:none;letter-spacing:-.01em}
.menu ul a[aria-current="page"]{background:var(--a);color:var(--on-a)}
.menu__social{display:flex;gap:.5rem}
.menu__social a{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--bg-2)}
body.menu-open{overflow:hidden}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.foot{background:var(--foot);color:var(--on-foot);padding-block:clamp(3.5rem,7vw,5.5rem) 6.5rem}
.foot a{text-decoration:none}
.foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:start}
.foot__logo{display:block;color:var(--foot-logo);max-width:430px}
.foot__logo svg{width:100%;height:auto;fill:currentColor}
.foot__line{margin:1.4rem 0 0;font-size:var(--fs-small);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--foot-soft)}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.foot h2{margin:0 0 .9rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--foot-soft)}
.foot ul{list-style:none;display:grid;gap:.5rem}
.foot__cols a:hover{color:var(--foot-logo)}
.foot__contact a{display:inline-flex;align-items:center;gap:.6rem;font-weight:600}
.foot__certs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.6rem}
.foot__certs span{display:grid;place-items:center;height:64px;padding:.6rem 1rem;border-radius:12px;background:var(--plate)}
.foot__certs img{height:44px;width:auto;max-width:none;mix-blend-mode:multiply}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--foot-line);font-size:var(--fs-xs);color:var(--foot-soft)}
.foot__social{display:flex;gap:.4rem;margin-top:1.2rem}
.foot__social a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--foot-line);color:var(--on-foot);transition:background-color .2s,color .2s}
.foot__social a:hover{background:var(--foot-logo);color:var(--foot)}
.foot__social .ic{width:18px;height:18px}

/* ==========================================================================
   Composants de contenu partagés
   ========================================================================== */
/* L'équation des valeurs */
.eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:.05em .25em;margin:0;font-size:clamp(2rem,6.4vw,5.6rem);font-weight:900;line-height:.92;letter-spacing:-.03em}
.eq b{font-weight:900;color:var(--accent)}
.eq .eq__res{color:var(--accent)}

/* Listes cochées : case et coche prennent les couleurs du fond qui les porte */
.checks{--ck-bg:var(--a);--ck-fg:var(--on-a);list-style:none;display:grid;gap:.55rem}
.tile--a .checks,.tile--duo .checks,.band .checks{--ck-bg:var(--on-a);--ck-fg:var(--a)}
.tile--b .checks{--ck-bg:var(--on-b);--ck-fg:var(--b)}
.tile--c .checks{--ck-bg:var(--on-c);--ck-fg:var(--c)}
.tile--ink .checks{--ck-bg:var(--bg);--ck-fg:var(--ink)}
.checks li{position:relative;padding-left:2rem;line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:.1em;width:1.3rem;height:1.3rem;border-radius:6px;background:var(--ck-bg)}
.checks li::after{content:"";position:absolute;left:.47rem;top:calc(.1em + .22rem);width:.36rem;height:.68rem;border:solid var(--ck-fg);border-width:0 .18rem .18rem 0;transform:rotate(45deg)}

/* Puces éclair */
.bolts{list-style:none;display:grid;gap:.6rem}
.bolts>li{display:grid;grid-template-columns:.9rem 1fr;gap:.7rem;align-items:start;line-height:1.45}
.bolts .ic{width:.75rem;height:1.25rem;margin-top:.12em;fill:var(--accent);stroke:none}
.tile--a .bolts .ic,.tile--duo .bolts .ic,.band .bolts .ic{fill:var(--on-a)}
.tile--b .bolts .ic{fill:var(--acc-b)}
.tile--c .bolts .ic{fill:var(--on-c)}

/* Pastilles de filtre / de choix */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.6rem;padding:.5rem 1rem;border:0;border-radius:999px;background:var(--bg-2);color:var(--ink);font-size:var(--fs-small);font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.chip:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);color:var(--bg)}

/* Formulaires */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem;min-width:0}
.lab{font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.lab small{font-weight:500;color:var(--soft)}
.input{width:100%;min-height:3.1rem;padding:.8rem 1rem;border:0;border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);font-size:1rem;transition:box-shadow .2s}
.input::placeholder{color:var(--soft);opacity:1}
.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--glow),0 0 0 4px rgb(var(--glow-rgb)/.2)}
textarea.input{min-height:8.5rem;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.3rem) 55%,calc(100% - .95rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.5rem}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:var(--fs-small);line-height:1.5;color:var(--soft);cursor:pointer}
.consent input{width:1.3rem;height:1.3rem;margin:.1rem 0 0;accent-color:var(--a);cursor:pointer}
.consent a{color:var(--ink);font-weight:600}
.err{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--accent-ink)}
.form-note{margin:0;font-size:var(--fs-xs);color:var(--soft)}

/* Bandeau d'appel final */
.band{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(2rem,5vw,4.5rem);background:var(--a);color:var(--on-a);isolation:isolate}
.band .display{color:var(--on-a);max-width:18ch}
.band .lead{color:var(--on-a-2);font-weight:500}
.tile--a .tile__text,.tile--a .tile__meta,.tile--a .stat__label{color:var(--on-a-2)}
.band__bolt{position:absolute;z-index:-1;right:4%;top:50%;height:150%;width:auto;transform:translateY(-50%) rotate(8deg);fill:var(--hero-bolt)}

/* Logos clients */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap)}
.logos li{list-style:none}
.logos figure{display:grid;grid-template-rows:96px auto;gap:.6rem;height:100%;margin:0;padding:1rem 1rem .9rem;border-radius:var(--r);background:var(--plate);color:var(--on-plate)}
.logos img{align-self:center;justify-self:center;max-height:74px;max-width:88%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.logos figcaption{display:grid;gap:.1rem;font-size:var(--fs-xs);line-height:1.3;text-align:center}
.logos figcaption b{font-size:var(--fs-small);font-weight:800}

/* ==========================================================================
   Accueil : la mosaïque d'ouverture
   ========================================================================== */
.hero{padding-block:clamp(1rem,2.5vw,2rem) clamp(2.5rem,5vw,4rem)}
.hero-bento{grid-template-areas:
  "por por por h1  h1  h1  h1  h1  dmc dmc dmc dmc"
  "por por por h1  h1  h1  h1  h1  dia dia dia dia"
  "por por por h1  h1  h1  h1  h1  dia dia dia dia"
  "por por por pre pre tgt tgt ana ana ana sta sta"
  "org org org org aca aca aca aca qua qua dis dis";
  grid-auto-rows:minmax(118px,auto)}
.hb-por{grid-area:por}.hb-h1{grid-area:h1}.hb-dmc{grid-area:dmc}.hb-dia{grid-area:dia}.hb-pre{grid-area:pre}.hb-tgt{grid-area:tgt}.hb-ana{grid-area:ana}.hb-sta{grid-area:sta}.hb-org{grid-area:org}.hb-aca{grid-area:aca}.hb-qua{grid-area:qua}.hb-dis{grid-area:dis}
.hb-h1{padding:clamp(1.4rem,3vw,2.5rem)}
.hb-h1 .hero-title{color:var(--on-a)}
.hb-h1 .hero-title span{display:block;color:var(--acc-h1,var(--on-a))}
.hb-h1 .tile__body{gap:1.2rem}
.hb-h1 .tile__bolt{right:3%;top:6%;height:88%;fill:var(--hero-bolt);z-index:1}
.hb-dia{background:var(--b);color:var(--on-b)}
.hb-dia .tile__title{color:var(--on-b)}
.hb-dia .kicker{padding-right:2.8rem}
.hb-dia .tile__meta{color:var(--on-b)}
.hb-dia .tile__meta span+span::before{content:"";display:inline-block;width:.35rem;height:.35rem;margin:0 .6rem .12rem 0;border-radius:50%;background:currentColor;vertical-align:middle}
.acad{display:inline-flex;align-items:center;gap:.3em;color:var(--logo);line-height:0}
.acad svg{height:1.9em;width:auto;fill:currentColor}
.acad__box{display:inline-block;padding:.34em .6em .3em;border-radius:.3em;background:currentColor;font-size:1.3em;font-weight:900;font-style:italic;letter-spacing:-.01em;line-height:1;text-transform:uppercase;transform:skewX(-12deg)}
.acad__box span{display:inline-block;transform:skewX(12deg);color:var(--bg)}
/* Sur une plaque claire (claire dans les deux thèmes), le logo garde une couleur lisible */
.tile--plate .acad,.tile--logo .acad,.plate .acad{color:var(--acad)}
.tile--plate .acad__box span,.tile--logo .acad__box span,.plate .acad__box span{color:var(--plate)}
.hb-aca{gap:.9rem}
.hb-aca .tile__text{font-weight:700;font-size:var(--fs-small)}
.hb-aca .acad{font-size:clamp(.95rem,1.35vw,1.2rem)}

/* Équipe : les trois piliers */
.pillars{grid-auto-rows:minmax(210px,auto)}
.pillar__n{position:absolute;z-index:0;right:.6rem;bottom:-.35em;font-size:clamp(7rem,12vw,10.5rem);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.28;pointer-events:none}
.pillar .tile__body{max-width:80%}
.go-tile{background:var(--c);color:var(--on-c)}
.go-tile .cut{right:-10%;height:112%}
.go-tile .tile__body{position:relative;z-index:4}
.go-tile .go-word{font-size:clamp(3.6rem,6.6vw,6.2rem);font-weight:900;font-style:italic;line-height:.8;letter-spacing:-.05em}

/* ==========================================================================
   Apparition au défilement
   ========================================================================== */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.06s}.js .rv-d2{transition-delay:.12s}.js .rv-d3{transition-delay:.18s}.js .rv-d4{transition-delay:.24s}
@keyframes charge{0%,18%,24%,40%{opacity:.15}20%,32%,100%{opacity:1}}
.js .charge{animation:charge 1.3s .35s both steps(1,end)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .charge{animation:none}
  a.tile,a.tile>img,.btn,.go .ic{transition:none}
}

/* ==========================================================================
   Adaptation tablette
   ========================================================================== */
@media (max-width:1080px){
  :root{--header-h:72px}
  .head__in{grid-template-columns:auto 1fr auto}
  .head__social,.nav{display:none}
  .head__center{justify-items:start}
  .logo svg{height:26px}
  .burger{display:inline-grid}
  .head__end .btn{display:none}
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s-2{grid-column:span 2}.s-3,.s-4{grid-column:span 3}.s-5,.s-6,.s-7,.s-8,.s-9{grid-column:span 6}
  .t-3{grid-column:span 3}.t-2{grid-column:span 2}.t-4{grid-column:span 4}
  .hero-bento{grid-template-areas:
    "h1  h1  h1  h1  h1  h1"
    "h1  h1  h1  h1  h1  h1"
    "por por dmc dmc dmc dmc"
    "por por dia dia dia dia"
    "pre pre tgt tgt sta sta"
    "ana ana ana org org org"
    "aca aca aca aca qua dis"}
  .sec-head--row{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
}

/* ==========================================================================
   Adaptation mobile
   ========================================================================== */
@media (max-width:640px){
  :root{--gap:10px;--row:112px;--pad:1.05rem;--r:12px;--fs-body:1rem;--fs-small:.9375rem;--fs-xs:.8125rem;--header-h:64px}
  .head__in{gap:.5rem;padding-block:.5rem}
  .logo svg{height:22px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-2,.s-3,.s-4,.t-2,.t-3{grid-column:span 1}
  .s-5,.s-6,.s-7,.s-8,.s-9,.t-4,.m-2{grid-column:1/-1}
  .r-2,.r-3,.r-4{grid-row:span 1}
  .m-r-2{grid-row:span 2}
  .m-1{grid-column:span 1}
  .hero-bento{grid-template-areas:
    "h1 h1" "h1 h1"
    "por dmc" "por pre"
    "dia dia"
    "ana ana"
    "tgt sta"
    "org org"
    "aca aca"
    "qua dis";
    grid-auto-rows:minmax(118px,auto)}
  .hb-dia .tile__meta{display:none}
  .tile__title{font-size:1.2rem}
  .tile__title--xl{font-size:1.55rem}
  .tile__go{width:2rem;height:2rem;top:.7rem;right:.7rem}
  .tile--cut .cut{height:108%;right:2%}
  .go-tile .cut{right:0;height:104%}
  .pillars{grid-auto-rows:minmax(170px,auto)}
  .pillar .tile__body{max-width:none}
  .btn{width:100%}
  .cta-row .go{width:100%;justify-content:center}
  .head__end .btn{width:auto}
  .foot__cols{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .foot__certs span{height:54px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos figure{grid-template-rows:76px auto}
  
  
  .eq{font-size:clamp(1.9rem,11vw,3rem)}
  .band{padding:1.6rem 1.25rem 1.8rem}
  .band__bolt{height:120%;right:-18%;opacity:.35}
}

/* ---- css/offres.css ---- */
/* ==========================================================================
   LA GRINTA · page Offres
   Trois leviers dans la grammaire de l'accueil : mosaïque, bichromie,
   découpes qui sortent du cadre, éclair et capitales italiques.
   Uniquement des tokens de grinta.css (qui fait foi).
   ========================================================================== */

/* ---------- 1. Ouverture : le titre au centre, les trois leviers autour ---------- */
.of-hero{padding-block:clamp(2rem,4.8vw,4.5rem) clamp(1rem,2vw,1.6rem)}
.of-hero__bento{grid-template-areas:
  "pre pre pre pre h1  h1  h1  h1  h1  org org org"
  "pre pre pre pre h1  h1  h1  h1  h1  org org org"
  "pre pre pre pre h1  h1  h1  h1  h1  org org org"
  "pre pre pre pre ana ana ana ana ana org org org"
  "pre pre pre pre ana ana ana ana ana org org org";
  grid-auto-rows:minmax(118px,auto)}
.of-h1{grid-area:h1}
.of-lever--pre{grid-area:pre}
.of-lever--ana{grid-area:ana}
.of-lever--org{grid-area:org}

/* Le titre : typographie seule, sur la couleur secondaire */
.of-h1{justify-content:space-between;gap:1.5rem;padding:clamp(1.4rem,3vw,2.5rem)}
.of-h1 .tile__body{gap:1.1rem}
.of-h1 .kicker .ic{color:var(--acc-b)}
.of-h1 .hero-title{font-size:clamp(2.9rem,21cqi,6.6rem);line-height:.84;letter-spacing:-.035em;color:var(--on-b)}
.of-h1 .hero-title span{display:block;color:var(--acc-b)}
.of-h1__lead{margin:0;max-width:46ch;font-size:var(--fs-small);font-weight:500;line-height:1.55;color:var(--on-b)}

/* Les leviers : tuiles-liens vers les chapitres */
.of-lever .tile__body{gap:.45rem;padding-right:2.9rem}
.of-lever__n,.of-tag{font-size:var(--fs-xs);font-weight:900;font-style:italic;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.of-hook{font-size:var(--fs-small);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;text-wrap:balance}
.of-lever.tile--a .of-lever__n,.of-lever.tile--a .of-hook,
.of-lever.tile--duo .of-lever__n,.of-lever.tile--duo .of-hook{color:var(--on-a-2)}
.of-lever.tile--plate .tile__title{color:var(--on-plate)}
.of-lever .tile__go{top:auto;bottom:var(--pad)}
.of-lever .tile__go .ic{transform:rotate(90deg)}
a.of-lever:hover .tile__go{transform:translateY(3px)}
.of-lever.tile--plate .tile__go{background:var(--on-plate);color:var(--plate)}

/* Les découpes jaillissent par le haut de leur tuile */
.of-lever .cut{bottom:auto;right:0;left:0;margin-inline:auto;width:auto;transform-origin:50% 100%;transition:transform .8s var(--ease)}
.of-lever--pre .cut{top:-7%;left:-5%;right:auto;margin:0;height:82%}
.of-lever--org .cut{top:-8%;height:72%}
a.of-lever:hover>.cut{transform:scale(1.04)}

/* Éclair de la tuile Prépa, rogné à la tuile alors que la découpe en sort */
.of-clip{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.of-lever--pre .tile__bolt{right:-16%;top:5%;height:72%}

/* ---------- Pastilles de chapitres, collées sous l'en-tête ---------- */
.of-nav{position:sticky;top:calc(var(--header-h) + .55rem);z-index:30;display:flex;justify-content:center;padding-inline:clamp(16px,4vw,40px);pointer-events:none}
.of-nav__list{display:flex;gap:.25rem;margin:0;padding:.3rem;list-style:none;border-radius:999px;background:rgb(var(--bg-rgb)/.9);box-shadow:0 0 0 1px var(--line),0 14px 32px -20px rgb(var(--ink-rgb)/.55);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);pointer-events:auto}
.of-nav__a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.4rem .95rem;border-radius:999px;font-size:.8125rem;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background-color .2s,color .2s,box-shadow .2s}
.of-nav__a:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.of-nav__n{font-weight:900;color:var(--accent-ink)}
.of-nav__a[aria-current="true"]{background:var(--btn);color:var(--on-btn)}
.of-nav__a[aria-current="true"] .of-nav__n{color:inherit}

/* ---------- Têtes de chapitre ---------- */
.of-chap{scroll-margin-top:3.5rem}
.of-head{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:1rem clamp(1.2rem,3vw,2.75rem);margin-bottom:clamp(2rem,4vw,3.25rem)}
.of-head__n{font-size:clamp(4.6rem,10vw,9rem);font-weight:900;font-style:italic;line-height:.74;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--accent);padding-right:.06em}
.of-head .kicker{margin-bottom:.8rem}
.of-head .lead{margin:0}
.of-sub{margin:clamp(3.5rem,7vw,6rem) 0 clamp(1.4rem,3vw,2.2rem);font-size:clamp(1.6rem,3.2vw,2.6rem)}

/* ---------- 2. Prépa. mentale ---------- */
.of-coach{gap:1.6rem;padding:clamp(1.4rem,3vw,2.5rem)}
.of-coach__big{margin:0;font-size:clamp(1.55rem,6.4cqi,3rem);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.of-coach__big em{color:var(--accent)}
.of-coach .tile__text{max-width:54ch;font-size:var(--fs-body)}
.of-target{gap:1rem;padding:clamp(1.4rem,3vw,2.2rem)}
.of-target img{width:min(100%,19rem);margin-bottom:.5rem;mix-blend-mode:multiply}
.of-target .tile__text{color:var(--on-plate)}

/* L'énoncé : les boucles du détour, la ligne droite vers l'action */
.of-act{padding:clamp(1.6rem,4.5vw,3.6rem)}
.of-act__txt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem clamp(.8rem,2.4vw,2rem);margin:0}
.of-act__pre{grid-column:1/-1;font-size:clamp(1.25rem,3vw,2.5rem);font-weight:800;font-style:italic;text-transform:uppercase;line-height:1;letter-spacing:-.01em;color:var(--on-b)}
.of-act__word{padding-right:.08em;font-size:clamp(3.2rem,9vw,8.4rem);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.82;letter-spacing:-.05em;color:var(--acc-b)}
.of-act__svg{width:100%;height:auto;overflow:visible}
.of-act__coil,.of-act__coil-head{fill:none;stroke:var(--on-b);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.of-act__line,.of-act__head{fill:none;stroke:var(--acc-b);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.of-act__dot{fill:var(--acc-b)}
.js .of-act.rv .of-act__coil,.js .of-act.rv .of-act__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .25s}
.js .of-act.rv .of-act__line{transition-duration:.9s;transition-delay:.7s}
.js .of-act.rv .of-act__coil-head,.js .of-act.rv .of-act__head{opacity:0;transition:opacity .3s 1.5s}
.js .of-act.rv.in .of-act__coil,.js .of-act.rv.in .of-act__line{stroke-dashoffset:0}
.js .of-act.rv.in .of-act__head{opacity:1}
.js .of-act.rv.in .of-act__coil-head{opacity:.5}

/* Deux outils majeurs : texte et schéma en quinconce */
.of-tools{grid-template-areas:
  "mpm mpm mpm mpm mpm mpm mpm s1  s1  s1  s1  s1"
  "s2  s2  s2  s2  s2  dpm dpm dpm dpm dpm dpm dpm"}
.of-tool--mpm{grid-area:mpm}
.of-schema--mpm{grid-area:s1}
.of-tool--dpm{grid-area:dpm}
.of-schema--dpm{grid-area:s2}
.of-tool{gap:1rem;padding:clamp(1.4rem,3vw,2.5rem)}
.of-tool__t{display:grid;gap:.7rem;font-size:var(--fs-h3);font-style:italic;text-transform:uppercase;line-height:1.02;color:var(--on-c)}
.of-tool__acr{font-size:clamp(3.2rem,15cqi,6.2rem);font-weight:900;line-height:.8;letter-spacing:-.045em}
.of-tool__acr sup{font-size:.3em;line-height:0;vertical-align:1.9em}
.of-tool__tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none}
.of-tool__tags li{padding:.35rem .75rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:var(--fs-xs);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.of-tool .tile__text{max-width:62ch;font-size:var(--fs-body)}
.of-tool__em{margin:0;font-size:var(--fs-lead);font-weight:700;line-height:1.35}
.of-schema{margin:0;padding:clamp(1rem,2.5vw,2rem)}
.of-schema img{width:auto;max-width:100%;max-height:26rem;object-fit:contain;mix-blend-mode:multiply}

/* Les deux formules */
.of-plan{gap:1.1rem;padding:clamp(1.4rem,3vw,2.5rem)}
.of-plan__ic{position:absolute;top:clamp(1rem,2.5vw,1.9rem);right:clamp(1rem,2.5vw,1.9rem);width:clamp(3rem,6.5vw,5.2rem);height:clamp(3rem,6.5vw,5.2rem);stroke-width:1.3}
.of-plan__t{padding-right:4.5rem;font-size:clamp(1.5rem,6cqi,2.6rem);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.95;letter-spacing:-.02em}
.of-plan__list{display:block;columns:2;column-gap:1.5rem;margin-top:.4rem;font-size:var(--fs-body);font-weight:500}
.of-plan__list li{break-inside:avoid;margin-bottom:.75rem}
.of-plan.tile--a .of-plan__list{color:var(--on-a-2)}
.of-plan.tile--a .of-plan__ic{color:var(--on-a)}
.of-plan.tile--b .of-plan__ic{color:var(--acc-b)}
.of-cta{justify-content:center;margin-top:clamp(1.6rem,3vw,2.4rem)}

/* ---------- 3. Analyse comportementale ---------- */
.of-disc{grid-template-areas:
  "gains gains gains gains gains gains quad  quad  quad  quad  quad  quad"
  "gains gains gains gains gains gains quad  quad  quad  quad  quad  quad"
  "gains gains gains gains gains gains quad  quad  quad  quad  quad  quad"
  "gains gains gains gains gains gains quad  quad  quad  quad  quad  quad"
  "wheel wheel wheel wheel wheel wheel wheel wheel seal  seal  seal  seal"
  "wheel wheel wheel wheel wheel wheel wheel wheel seal  seal  seal  seal"
  "wheel wheel wheel wheel wheel wheel wheel wheel seal  seal  seal  seal"
  "wheel wheel wheel wheel wheel wheel wheel wheel seal  seal  seal  seal"}
.of-gains{grid-area:gains;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gap);list-style:none}
.of-quad{grid-area:quad}
.of-wheel{grid-area:wheel}
.of-seal{grid-area:seal}

.of-gain{gap:1.2rem}
.of-gain__ic{width:2.1rem;height:2.1rem;stroke-width:1.6}
.of-gain p{margin:0;font-size:var(--fs-small);font-weight:500;line-height:1.5}
.of-gain strong{display:block;margin:.3rem 0 .45rem;font-size:clamp(1.3rem,10.5cqi,2.1rem);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.96;letter-spacing:-.015em;text-wrap:balance}
.of-gain.tile--a p{color:var(--on-a-2)}
.of-gain.tile--a strong,.of-gain.tile--a .of-gain__ic{color:var(--on-a)}
.of-gain.tile--b strong,.of-gain.tile--b .of-gain__ic{color:var(--acc-b)}
.of-gain.tile--line strong,.of-gain.tile--line .of-gain__ic{color:var(--accent)}
.of-gain.tile--c{box-shadow:inset 0 0 0 1.5px var(--line)}

/* La roue DISC : fond noir fondu dans la couleur sombre de la charte */
.of-wheel{align-items:center;justify-content:center;gap:.4rem;padding:clamp(.6rem,1.6vw,1.2rem);background:var(--duo-lo);box-shadow:inset 0 0 0 1.5px rgb(var(--ink-rgb)/.08)}
.of-wheel>img{width:100%;mix-blend-mode:screen;transition:transform .8s var(--ease)}
.of-wheel__zoom{position:relative;z-index:2;align-self:flex-end;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:999px;background:var(--plate);color:var(--on-plate);font-size:var(--fs-xs);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.06em;line-height:1}
.of-wheel__zoom .ic{width:1rem;height:1rem;stroke-width:2.4;transition:transform .25s var(--ease)}
a.of-wheel:hover .of-wheel__zoom .ic{transform:rotate(90deg)}
.of-seal{margin:0;gap:1rem}
.of-seal img{width:min(88%,20rem);mix-blend-mode:multiply}
.of-seal .tile__meta{justify-content:center;text-align:center;color:var(--on-plate)}

/* ---------- 4. Organisme de formation ---------- */
.of-acad{grid-template-areas:
  "main main main main main main main ph  ph  ph  ph  ph"
  "main main main main main main main ph  ph  ph  ph  ph"
  "main main main main main main main cat cat cat cat cat"
  "p2   p2   p2   p2   p2   p2   p2   cat cat cat cat cat"
  "p2   p2   p2   p2   p2   p2   p2   cat cat cat cat cat"}
.of-acad__main{grid-area:main;gap:1.8rem;padding:clamp(1.4rem,3vw,2.5rem)}
.of-acad__ph{grid-area:ph}
.of-cat{grid-area:cat}
.of-acad__p2{grid-area:p2;gap:1.4rem;padding:clamp(1.4rem,3vw,2.5rem)}
.of-acad__logo{align-self:flex-start;font-size:clamp(.9rem,4.3cqi,2.05rem)}
.of-acad__txt{display:grid;gap:1.6rem}

/* Le parcours des formules, de l'obligatoire au sur-mesure */
.of-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;list-style:none}
.of-track li{position:relative;display:flex;flex-direction:column;gap:.35rem;padding-top:2rem;font-size:var(--fs-small);line-height:1.35;color:var(--soft)}
.of-track li::before{content:"";position:absolute;z-index:1;left:0;top:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--surface)}
.of-track li::after{content:"";position:absolute;left:0;right:-1.2rem;top:.7rem;height:2px;background:var(--line)}
.of-track li:last-child::before{top:0;width:1.5rem;height:1.5rem}
.of-track li:last-child::after{display:none}
.of-track b{font-size:clamp(1.15rem,4.2cqi,1.75rem);font-weight:800;font-style:italic;text-transform:uppercase;line-height:1;letter-spacing:-.01em;color:var(--ink)}

/* Catalogue : la tuile d'appel, les commerciaux passent les haies */
.of-cat{justify-content:flex-start;min-height:0}
.of-cat .tile__body{padding-right:3rem}
.of-cat .of-tag{color:var(--on-a-2)}
.of-cat .cut{top:auto;bottom:0;left:0;right:0;margin-inline:auto;width:92%;height:auto;transform-origin:50% 100%;transition:transform .8s var(--ease)}
a.of-cat:hover>.cut{transform:scale(1.03)}

/* ---------- 5. Clôture ---------- */
.of-band .kicker,.of-band .go{color:var(--on-a-2)}
.of-band .display{max-width:17ch}
.of-band .band__bolt{right:1%;height:118%}
.of-facts{display:flex;flex-wrap:wrap;gap:1rem clamp(1.4rem,3.5vw,3rem);margin:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.8rem,3.5vw,2.6rem);list-style:none;font-size:var(--fs-small);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;color:var(--on-a-2)}
.of-facts li{display:grid;gap:.35rem}
.of-facts b{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;line-height:.85;letter-spacing:-.03em;color:var(--on-a)}

@media (prefers-reduced-motion:reduce){
  .js .of-act.rv .of-act__coil,.js .of-act.rv .of-act__line{stroke-dashoffset:0;transition:none}
  .js .of-act.rv .of-act__head{opacity:1;transition:none}
  .js .of-act.rv .of-act__coil-head{opacity:.5;transition:none}
  .of-lever .cut,.of-cat .cut,.of-wheel>img,.of-nav__a{transition:none}
}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width:1080px){
  .of-hero__bento{grid-template-areas:
    "h1  h1  h1  h1  h1  h1"
    "pre pre pre org org org"
    "ana ana ana ana ana ana";
    grid-auto-rows:auto}
  .of-lever--pre,.of-lever--org{min-height:30rem}
  .of-lever--ana{min-height:15rem}
  .of-lever--pre .cut,.of-lever--org .cut{top:3%;left:0;right:0;margin-inline:auto;height:62%}

  .of-head{grid-template-columns:auto minmax(0,1fr)}
  .of-head .lead{grid-column:2}

  .of-tools{grid-template-areas:"mpm mpm mpm s1 s1 s1" "s2 s2 s2 dpm dpm dpm"}
  .of-disc{grid-template-areas:
    "gains gains gains gains gains gains"
    "quad  quad  quad  quad  seal  seal"
    "wheel wheel wheel wheel wheel wheel"}
  .of-quad{min-height:24rem}
  .of-acad{grid-template-areas:
    "main main main main main main"
    "ph   ph   ph   cat  cat  cat"
    "p2   p2   p2   p2   p2   p2"}
  .of-cat{min-height:22rem}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width:640px){
  .of-hero__bento{grid-template-areas:"h1 h1" "pre org" "ana ana"}
  .of-lever--pre,.of-lever--org{min-height:23rem}
  .of-lever--ana{min-height:13rem}
  .of-lever--pre .cut,.of-lever--org .cut{height:56%}
  .of-lever .tile__body{padding-right:0;padding-bottom:2.6rem}
  .of-lever .tile__go{bottom:.7rem;right:.7rem}
  .of-h1__lead{font-size:var(--fs-small)}

  .of-nav__a{gap:0;min-height:2.4rem;padding:.4rem .62rem;font-size:.75rem}
  .of-nav__n,.of-nav__more{display:none}

  .of-head{column-gap:.9rem}
  .of-head__n{font-size:3.6rem;-webkit-text-stroke-width:1.5px}
  .of-head .lead{grid-column:1/-1}

  .of-act__txt{grid-template-columns:minmax(0,1fr)}
  .of-act__svg{max-width:26rem}

  .of-tools{grid-template-areas:"mpm mpm" "s1 s1" "dpm dpm" "s2 s2"}
  .of-schema img{max-height:18rem}
  .of-plan__t{padding-right:3.6rem}
  .of-plan__list{columns:1}

  .of-disc{grid-template-areas:"gains gains" "quad quad" "wheel wheel" "seal seal"}
  .of-gains{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .of-quad{min-height:0;aspect-ratio:725/618}
  .of-seal{padding-block:1.6rem}
  .of-seal img{width:min(70%,14rem)}

  .of-acad{grid-template-areas:"main main" "cat cat" "ph ph" "p2 p2"}
  .of-acad__ph{min-height:12rem}
  .of-cat{min-height:17rem}
  .of-track{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .of-track li{padding:0 0 0 2.2rem}
  .of-track li::before{top:.1rem}
  .of-track li::after{left:.5rem;right:auto;top:1.3rem;bottom:-1.1rem;width:2px;height:auto}
  .of-track li:last-child::before{left:-.2rem}

  .of-facts{gap:1rem 1.6rem}
  .of-band .go{text-align:center}
  .of-facts li{min-width:40%}
}

/* ---- css/formations.css ---- */
/* ==========================================================================
   FORMATIONS · le catalogue de la GRINTAcadémie
   Mosaïque d'ouverture, filtres par thème, cartes-liens en bichromie, fiche
   complète dans une boîte de dialogue native. Sans JavaScript, les fiches
   restent lisibles en fin de page (les cartes y mènent par leur ancre).
   Couleurs : tokens du socle uniquement.
   ========================================================================== */

/* ---------- 1. Ouverture en mosaïque ---------- */
.fx-hero-bento{grid-template-areas:
  "h1  h1  h1  h1  h1  h1  h1  pho pho pho pho pho"
  "h1  h1  h1  h1  h1  h1  h1  pho pho pho pho pho"
  "int int int int int int int sta sta qua qua qua"
  "int int int int int int int cta cta cta cta cta";
  grid-auto-rows:minmax(118px,auto)}
.fx-h1{grid-area:h1;padding:clamp(1.4rem,3vw,2.5rem)}
.fx-pho{grid-area:pho}
.fx-int{grid-area:int;justify-content:center;gap:1rem}
.fx-sta{grid-area:sta}
.fx-qua{grid-area:qua}
.fx-cta{grid-area:cta}

.fx-h1 .tile__body{gap:1.1rem}
.fx-h1 .hero-title{font-size:clamp(2.5rem,6.2vw,5.4rem);line-height:.9}
.fx-h1 .tile__bolt{right:2.5%;top:10%;height:80%;z-index:0}
.fx-int .acad{font-size:clamp(1rem,1.45vw,1.25rem)}
.fx-int__lead{margin:0;max-width:60ch;font-size:var(--fs-lead);font-weight:500;line-height:1.5}
.fx-int .tile__text{max-width:64ch}
.fx-sta .stat__num{font-size:clamp(2.6rem,50cqi,5rem)}
.fx-sta .tile__go .ic{transform:rotate(90deg)}
.fx-cta .tile__title,.fx-cta .kicker{padding-right:2.6rem}

/* ---------- 2. Filtres par thème ---------- */
.fx-cat__head{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.fx-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.fx-filters__lab{margin:0;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.fx-filters .chip{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.fx-filters .chip:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.fx-filters .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.fx-n{display:inline-grid;place-items:center;min-width:1.55rem;height:1.55rem;padding:0 .4rem;border-radius:999px;background:var(--bg-2);color:var(--ink);font-size:var(--fs-xs);font-weight:800;line-height:1}
.fx-filters .chip[aria-pressed="true"] .fx-n{background:var(--bg);color:var(--ink)}
:root:not(.js) .fx-filters{display:none}

/* ---------- 3. Cartes-liens ---------- */
.fx-grid{list-style:none;grid-auto-rows:auto}
.fx-item{display:flex;min-width:0}
.fx-item[hidden]{display:none}
.fcard{flex:1;padding:0;gap:0;justify-content:flex-start}
.fcard:focus-visible{border-radius:var(--r)}
.fcard__media{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;padding:var(--pad);color:var(--on-a)}
.fcard__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(var(--duo-hi-rgb)/.86) 0%,rgb(var(--duo-hi-rgb)/.32) 46%,transparent 74%);pointer-events:none}
a.fcard:hover .fcard__media>img{transform:scale(1.045)}
.fcard__tag,.fiche__tag{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .75rem;border-radius:999px;background:rgb(var(--bg-rgb)/.94);color:var(--ink);font-size:var(--fs-xs);font-weight:800;font-style:italic;letter-spacing:.06em;line-height:1.1;text-transform:uppercase}
.fcard__tag{position:absolute;z-index:3;top:var(--pad);left:var(--pad)}
.fcard__title{position:relative;z-index:2;margin:0;padding-right:.25rem;color:var(--on-a);font-size:clamp(1.2rem,6.4cqi,1.6rem);font-weight:800;font-style:italic;line-height:1;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.fcard__sub{display:block;margin-top:.35rem;font-size:max(1.2rem,.74em);line-height:1.05}
.fcard__body{display:flex;flex:1;flex-direction:column;gap:.95rem;padding:var(--pad);color:var(--ink)}
.fcard__hook{margin:0;font-size:var(--fs-small);font-weight:600;line-height:1.45}
.fcard__meta{list-style:none;display:grid;gap:.5rem;margin:0;font-size:var(--fs-small);line-height:1.35;color:var(--soft)}
.fcard__meta li{display:grid;grid-template-columns:1.15rem minmax(0,1fr);gap:.6rem;align-items:start}
.fcard__meta .ic{width:1.1rem;height:1.1rem;margin-top:.05rem;color:var(--accent-ink)}
.fcard__go{margin-top:auto}

/* ---------- 4. Les fiches ---------- */
/* Sans JavaScript : empilées en fin de page. Avec : rangées, ouvertes dans la boîte de dialogue. */
.fiches{padding-top:var(--sec)}
.js .fiches{display:none}
.fx-nodlg .fiches{display:block}
.fiches .fiche{margin-bottom:clamp(2rem,4vw,3rem);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.fiche__back{margin:0}
.js .fiche__back{display:none}
.fx-nodlg .fiche__back{display:block}
.fiche__back .ic{width:1rem;height:1rem}

/* Boîte de dialogue : la page dessous est figée, la fiche défile dedans. */
.fdlg{width:min(1060px,100% - 2.5rem);max-width:none;max-height:calc(100dvh - 2.5rem);margin:auto;padding:0;border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.fdlg[open]{display:flex;flex-direction:column}
.fdlg::backdrop{background:rgb(var(--ink-rgb)/.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-theme="dark"] .fdlg::backdrop{background:rgb(var(--bg-rgb)/.82)}
.fdlg__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.fdlg__bar{position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;height:0}
.fdlg .fdlg__close{width:auto;min-height:2.75rem;margin:.9rem .9rem 0 0;padding:.6em 1.05em;font-size:.84rem;box-shadow:0 0 0 3px rgb(var(--bg-rgb)/.55)}
.fx-lock{overflow:hidden}

/* En-tête de fiche : photo en bichromie, thème, titre */
.fiche{color:var(--ink)}
.fiche__head{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(230px,36vh,330px);padding:clamp(1.25rem,3.5vw,2.75rem);color:var(--on-a)}
.fiche__head::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(var(--duo-hi-rgb)/.88) 0%,rgb(var(--duo-hi-rgb)/.3) 55%,transparent 82%);pointer-events:none}
.fiche__headin{position:relative;z-index:2;display:grid;justify-items:start;gap:.9rem}
.fiche__tag{margin:0}
.fiche__tag .ic{width:.6rem;height:1rem;fill:var(--accent-ink);stroke:none}
.fiche__title{max-width:24ch;margin:0;color:var(--on-a);font-size:clamp(1.8rem,3.8vw,3.1rem);font-weight:800;font-style:italic;line-height:.95;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.fiche__sub{display:block;margin-top:.45rem;font-size:max(1.2rem,.5em);line-height:1.05}

.fiche__main{display:grid;gap:clamp(1.6rem,3vw,2.4rem);padding:clamp(1.25rem,3.5vw,2.75rem)}
.fiche__hook{margin:0;font-weight:600}
.fiche__intro{max-width:74ch}
.fiche__intro p{margin:0 0 .8em;color:var(--soft)}
.fiche__intro p:last-child{margin-bottom:0}
.fiche__intro strong{color:var(--ink);font-weight:700}
.fiche__k{margin:0 0 .7rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}

/* Repères : durée, effectif, lieu, tarif */
.fx-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--gap);margin:0}
.fx-key{display:grid;align-content:start;gap:.55rem;min-width:0;padding:1rem 1.1rem 1.1rem;border-radius:var(--r);background:var(--bg-2);color:var(--ink)}
.fx-key dt{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.fx-key dt .ic{width:1.15rem;height:1.15rem;color:var(--accent-ink)}
.fx-key dd{margin:0;font-size:var(--fs-small);font-weight:600;line-height:1.45}
.fx-key--b{background:var(--b);color:var(--on-b)}
.fx-key--b dt,.fx-key--b dt .ic{color:var(--on-b)}
.fx-key--b dd strong{display:block;margin-bottom:.2rem;font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.02em;color:var(--acc-b)}

/* Public, prérequis et informations complémentaires */
.fx-who,.fx-infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin:0}
.fx-info{position:relative;display:grid;align-content:start;gap:.25rem;min-width:0;padding:1rem 1.1rem 1.05rem 4rem;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.fx-info .fx-ico{position:absolute;top:1rem;left:1rem}
.fx-info dt{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.fx-info dd{margin:0;font-size:var(--fs-small);font-weight:500;line-height:1.5;overflow-wrap:anywhere}
.fx-info--lg dd{font-size:var(--fs-body);font-weight:600}
.fx-info a{color:var(--accent-ink);font-weight:600}
.fx-ico{display:inline-grid;flex:none;place-items:center;width:2.3rem;height:2.3rem;border-radius:10px;background:var(--bg-2);color:var(--accent-ink)}
.fx-ico .ic{width:1.1rem;height:1.1rem}

/* Rubriques */
.fiche__sec{display:grid;gap:1.15rem;padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1.5px solid var(--line)}
.fiche__h{display:flex;align-items:center;gap:.6rem;margin:0;font-size:var(--fs-h3);font-weight:800;font-style:italic;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase}
.fiche__h .ic{width:.72em;height:1.15em;fill:var(--accent);stroke:none}
.fx-checks{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:.8rem 2.2rem}

/* Programme : jours, demi-journées, modules, étapes */
.fx-days{list-style:none;display:grid;gap:var(--gap);margin:0;padding:0}
.fx-day{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.5vw,1.75rem);padding:clamp(1.1rem,2.4vw,1.6rem);border-radius:var(--r);background:var(--bg-2)}
.fx-day__n{display:grid;align-content:start;justify-items:center;gap:.25rem;min-width:3.4rem;margin:0;color:var(--accent);font-size:clamp(2.8rem,5vw,3.8rem);font-weight:900;font-style:italic;line-height:.85;letter-spacing:-.04em}
.fx-day__n span{color:var(--soft);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.fx-day__t{margin:0 0 1rem;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:800;font-style:italic;line-height:1.05;text-transform:uppercase}
.fx-sujets{display:block;columns:2 17rem;column-gap:2rem}
.fx-sujets--1{columns:1}
.fx-sujets>li{break-inside:avoid;margin-bottom:.8rem}
.fx-sujets>li:last-child{margin-bottom:0}
.fx-sujet{margin:0;font-weight:700;line-height:1.4}
.fx-sub{list-style:none;display:grid;gap:.3rem;margin:.35rem 0 0;padding:0;color:var(--soft);font-size:var(--fs-small)}
.fx-sub li{position:relative;display:block;padding-left:1rem;line-height:1.5}
.fx-sub li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:2px;border-radius:2px;background:var(--accent)}

.fx-grp{display:grid;gap:1rem}
.fx-grp__t{display:flex;align-items:center;gap:.6rem;margin:0;font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:800;font-style:italic;line-height:1.15;text-transform:uppercase}
.fx-grp__t .ic,.fx-part__t .ic{color:var(--accent-ink)}
.fx-parts,.fx-ateliers,.fx-steps{list-style:none;display:grid;gap:var(--gap);margin:0;padding:0}
.fx-parts{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.fx-part{display:grid;align-content:start;gap:.95rem;padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r);background:var(--bg-2)}
.fx-part__t{display:flex;align-items:center;gap:.55rem;margin:0;font-size:1.05rem;font-weight:800;font-style:italic;line-height:1.15;text-transform:uppercase}
.fx-part .fx-sujets{columns:1}
.fx-ateliers{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fx-atelier{display:grid;align-content:start;gap:.6rem;padding:1.2rem 1.25rem 1.3rem;border-radius:var(--r);background:var(--c);color:var(--on-c)}
.fx-atelier p{margin:0;font-size:var(--fs-small);line-height:1.55}
.fx-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))}
.fx-steps li{display:grid;align-content:start;gap:.65rem;padding:1.15rem 1.2rem 1.25rem;border-radius:var(--r);background:var(--bg-2);font-weight:600;line-height:1.4}
.fx-step__n{color:var(--accent);font-size:clamp(2.2rem,4vw,3rem);font-weight:900;font-style:italic;line-height:.85;letter-spacing:-.04em}
.fx-list{display:block;columns:2 19rem;column-gap:2.2rem}
.fx-list>li{break-inside:avoid;margin-bottom:.7rem}

/* Modalités et évaluation : les émojis du site deviennent les icônes du sprite */
.fx-icons{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:.75rem 1.5rem;margin:0;padding:0}
.fx-icons li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:center;font-size:var(--fs-small);line-height:1.45}
.fx-note{display:grid;gap:.8rem;padding:1.1rem 1.25rem;border-radius:var(--r);background:var(--bg-2)}
.fx-methods{margin:0;font-size:var(--fs-small)}
.fx-methods strong{font-weight:800}
.fx-points{font-size:var(--fs-small)}

/* Inscription */
.fiche__cta{padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r-lg)}
.fiche__cta .tile__bolt{right:-3%;top:-24%;height:150%;opacity:.45}
.fiche__cta .tile__body{gap:1rem;max-width:46rem}
.fiche__cta-t{margin:0;font-size:var(--fs-lead);font-weight:700;line-height:1.4}
.fiche__cta .btn--ghost{color:var(--on-b)}

/* ---------- 5. Clôture ---------- */
/* Petit texte sur --a : --on-a-2, comme le veut le socle. */
.fx-band .lead{max-width:52ch;margin:1.4rem 0 2rem;color:var(--on-a-2)}
.fx-band .go{color:var(--on-a-2)}

@media (prefers-reduced-motion:reduce){
  .fcard__media>img{transition:none}
}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width:1080px){
  .fx-hero-bento{grid-template-areas:
    "h1  h1  h1  h1  pho pho"
    "h1  h1  h1  h1  pho pho"
    "int int int int int int"
    "sta sta qua qua cta cta"}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width:640px){
  .fx-hero-bento{grid-template-areas:"h1 h1" "h1 h1" "pho pho" "int int" "sta qua" "cta cta"}
  .fx-h1 .hero-title{font-size:clamp(2.3rem,12vw,3.2rem)}
  .fx-h1 .tile__bolt{right:-4%;opacity:.55}

  .fdlg{width:100%;height:100%;max-height:none;border-radius:0}
  .fdlg .fdlg__close{margin:.7rem .7rem 0 0}
  .fiche__head{min-height:210px;padding-top:4.2rem}
  .fx-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-key--duree,.fx-key--b{grid-column:1/-1}
  .fx-who,.fx-infos{grid-template-columns:minmax(0,1fr)}
  .fx-day{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .fx-day__n{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:.5rem;font-size:2.4rem}
  .fx-sujets,.fx-list{columns:1}
}

/* ---- css/diagnostic.css ---- */
/* ==========================================================================
   Diagnostic Performance 220V
   L'accroche reprend la mosaïque de l'accueil ; l'outil est un seul bloc qui
   change d'écran (identification, cinq dimensions, résultat). Toutes les
   couleurs viennent des tokens de grinta.css : aucune n'est écrite ici.
   ========================================================================== */

.dg [hidden]{display:none!important}

/* ==========================================================================
   1. Accroche
   ========================================================================== */
.dg-hero__grid{grid-template-areas:
  "h1  h1  h1  h1  h1  h1  h1  por por por por por"
  "h1  h1  h1  h1  h1  h1  h1  por por por por por"
  "h1  h1  h1  h1  h1  h1  h1  quo quo quo quo quo"
  "h1  h1  h1  h1  h1  h1  h1  quo quo quo quo quo"
  "sts sts sts sts sts sts sts sts sts sts sts sts"
  "rev rev rev rev rev rev rev mde mde mde mde mde";
  grid-auto-rows:minmax(118px,auto)}
.dg-h1{grid-area:h1}.dg-por{grid-area:por}.dg-quote{grid-area:quo}.dg-facts{grid-area:sts}.dg-rev{grid-area:rev}.dg-mde{grid-area:mde}

/* Le titre sur la photo en bichromie : seuls du grand texte gras et le bouton s'y posent */
.dg-h1{gap:1.6rem;padding:clamp(1.4rem,3vw,2.5rem)}
.dg-h1 .tile__bolt{right:3%;top:5%;height:62%;z-index:1}
.dg-h1__promise{position:relative;z-index:2;max-width:23ch;margin:0;font-size:clamp(1.2rem,1.75vw,1.5rem);font-weight:800;font-style:italic;line-height:1.18;color:var(--on-a);text-wrap:balance}
.dg-h1 .tile__body{gap:1.15rem}
.dg-h1 .hero-title{color:var(--on-a)}
.dg-h1 .hero-title span{display:block;font-size:1.55em;line-height:.88}
.dg-h1__sub{margin:0;max-width:36ch;font-size:clamp(1.19rem,1.5vw,1.4rem);font-weight:700;line-height:1.35;color:var(--on-a);text-wrap:pretty}

/* Portrait sans légende : pas de voile */
.dg-por::after{content:none}

/* La citation de Yan Reynes */
.dg-quote{margin:0;gap:1.25rem}
.dg-quote__q{margin:0}
.dg-quote__q::before{content:"«";content:"«" / "";display:block;margin-bottom:.12em;font-size:3.4rem;font-weight:900;font-style:italic;line-height:.55;color:var(--acc-b)}
.dg-quote__q p{margin:0;font-size:clamp(1.15rem,5.6cqi,1.65rem);font-weight:800;font-style:italic;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.dg-quote__by{display:grid;gap:.15rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;line-height:1.35;text-transform:uppercase}
.dg-quote__by b{font-size:var(--fs-small);font-weight:800;font-style:italic}

/* Les quatre repères : une rangée qui tombe juste sur la grille de 12 */
.dg-facts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(var(--row),auto);gap:var(--gap)}
.dg-facts .tile{gap:.3rem}

.dg-rev{gap:1.2rem}
@container (min-width:44rem){.dg-rev .bolts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.2rem}}
.dg-mde{gap:1rem}

/* ==========================================================================
   2. L'outil
   ========================================================================== */
.dg-nojs{max-width:780px;margin-inline:auto;gap:.9rem}
.dg-nojs>*{margin:0}
.dg-nojs .btn{text-transform:none}

/* Étapes et jauge de progression */
.dg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1rem,2vw,1.4rem)}
.dg-steps{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.dg-steps li{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-xs);font-weight:800;font-style:italic;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.dg-steps li+li::before{content:"";width:1.4rem;height:2px;margin-right:.1rem;border-radius:2px;background:var(--line)}
.dg-steps__n{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-style:normal}
.dg-steps li.is-done .dg-steps__n{background:var(--ink);color:var(--bg);box-shadow:none}
.dg-steps li[aria-current="step"]{color:var(--ink)}
.dg-steps li[aria-current="step"] .dg-steps__n{background:var(--btn);color:var(--on-btn);box-shadow:none}

.dg-meter{display:flex;align-items:center;gap:.9rem;flex:0 1 25rem}
.dg-meter__cells{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}
.dg-meter__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem;padding-bottom:.35rem;border-bottom:2px solid transparent;transition:border-color .25s}
.dg-meter__g.is-cur{border-bottom-color:var(--ink)}
.dg-meter i,.dg-gauge__meter i,.dg-dots i{display:block;border-radius:3px;background:rgb(var(--ink-rgb)/.13);transform:skewX(-14deg);transition:background-color .25s}
.dg-meter i{height:1.1rem}
.dg-meter i.is-on,.dg-gauge__meter i.is-on,.dg-dots i.is-on{background:var(--accent)}
.dg-meter__count{margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--soft)}
.dg-meter__count b{font-size:1.15rem;font-weight:800;font-style:italic;color:var(--ink)}

/* Écrans : carte pour l'identification et les dimensions, mosaïque libre pour le résultat */
.dg-card{padding:clamp(1.25rem,3.2vw,2.75rem);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
@keyframes dg-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.dg-screen{animation:dg-in .5s var(--ease) both}}
.dg-head .kicker{margin-bottom:.7rem}
.dg-title{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:800;font-style:italic;line-height:1;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.dg-title:focus-visible,.dg-score__title:focus-visible{outline-offset:8px}

/* Identification */
.dg-id{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-areas:"head aside" "form aside";gap:1.6rem clamp(1.5rem,4vw,3.5rem);align-items:start}
.dg-id>.dg-head{grid-area:head}
.dg-id__form{grid-area:form;min-width:0}
.dg-id__aside{grid-area:aside;display:grid;gap:1rem;padding:clamp(1.1rem,2.2vw,1.6rem);border-radius:var(--r);background:var(--bg-2);font-size:var(--fs-small);line-height:1.55}
.dg-id__aside .kicker{margin:0}
.consent input[aria-invalid="true"]{outline:2px solid var(--accent-ink);outline-offset:2px}

/* Échelle de réponse, rappelée en légende */
.dg-legend{list-style:none;display:grid;gap:.4rem}
.dg-legend li{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.7rem;font-size:var(--fs-small);font-weight:600;line-height:1.3}
.dg-legend b{display:grid;place-items:center;height:2rem;border-radius:9px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:800;font-style:italic}

/* Une dimension par écran : l'intitulé reste en vue pendant qu'on répond */
.dg-dim{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.75fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.dg-dim__head{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.1rem}
.dg-dim__text{margin:0;font-size:var(--fs-lead);line-height:1.5;color:var(--soft)}
.dg-dim .dg-legend{padding-top:1.1rem;border-top:1.5px solid var(--line)}
.dg-dim .dg-legend b{background:var(--bg-2);box-shadow:none}
.dg-qs{display:grid;gap:.85rem}

/* Une affirmation = un fieldset et sa légende ; les choix sont des radios */
.dg-q{min-width:0;margin:0;padding:clamp(1rem,2vw,1.4rem);border:0;border-radius:var(--r);background:var(--bg-2);transition:box-shadow .25s}
.dg-q__legend{float:left;width:100%;margin:0 0 1rem;padding:0}
.dg-q__legend+*{clear:both}
.dg-q__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start}
.dg-q__n{display:grid;place-items:center;min-width:2.2rem;height:2.2rem;padding-inline:.35rem;border-radius:10px;background:var(--ink);color:var(--bg);font-size:.95rem;font-weight:800;font-style:italic}
.dg-q__t{padding-top:.2rem;font-weight:600;line-height:1.45;color:var(--ink)}
.dg-q.is-missing{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.dg-q__err{margin-top:.7rem}

.dg-answer{container-type:inline-size}
.dg-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}
.dg-opt{position:relative;display:block;min-width:0;cursor:pointer}
.dg-opt__in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dg-opt__box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;height:100%;min-height:3.6rem;padding:.6rem .35rem;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);text-align:center;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.dg-opt__n{font-size:1.35rem;font-weight:800;font-style:italic;line-height:1}
.dg-opt__t{font-size:var(--fs-xs);font-weight:600;line-height:1.2;color:var(--soft)}
.dg-opt:hover .dg-opt__box{box-shadow:inset 0 0 0 2px var(--accent)}
.dg-opt__in:checked+.dg-opt__box{background:var(--btn);color:var(--on-btn);box-shadow:0 10px 22px -12px rgb(var(--glow-rgb)/.85);transform:translateY(-2px)}
.dg-opt__in:checked+.dg-opt__box .dg-opt__t{color:var(--on-btn)}
.dg-opt__in:focus-visible+.dg-opt__box{outline:3px solid var(--glow);outline-offset:3px}
.dg-ends{display:none;justify-content:space-between;gap:1rem;margin:.55rem .15rem 0;font-size:var(--fs-xs);font-weight:600;color:var(--soft)}
/* Trop étroit pour les libellés : on garde les chiffres, les libellés restent lus par les lecteurs d'écran */
@container (max-width:34rem){
  .dg-opt__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dg-opt__box{min-height:3.35rem}
  .dg-opt__n{font-size:1.45rem}
  .dg-ends{display:flex}
}

/* Navigation entre les écrans */
.dg-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.4rem}
.dg-id .dg-nav{margin-top:.4rem}
.dg-nav [data-dg-next]{margin-left:auto}
.dg-nav [data-dg-prev]:hover .ic{transform:translateX(-4px)}
.dg-nav .btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.dg-nav .btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.dg-nav .btn[aria-disabled="true"]:hover .ic{transform:none}

/* ==========================================================================
   3. Résultat
   ========================================================================== */
.dg-res__grid{grid-auto-rows:auto}

/* Le score et son voltmètre */
.dg-score{justify-content:flex-start;gap:.4rem}
.dg-score .kicker{margin:0 0 .4rem}
.dg-score__title{display:grid;gap:.25rem}
.dg-score__lead{font-size:var(--fs-h3);font-weight:800;font-style:italic;line-height:1;text-transform:uppercase}
.dg-score__val{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .45rem;line-height:.82}
.dg-score__num{font-size:clamp(4.6rem,30cqi,7.5rem);font-weight:900;font-style:italic;letter-spacing:-.04em;color:var(--accent)}
.dg-score__max{font-size:clamp(1.6rem,8cqi,2.4rem);font-weight:800;font-style:italic;color:var(--soft)}
.dg-dial{width:100%;max-width:21rem;margin:.9rem auto 0}
.dg-dial svg{width:100%;height:auto;overflow:visible}
.dg-dial__zone{fill:none;stroke:var(--accent);stroke-width:15;opacity:.2}
.dg-dial__lit{fill:none;stroke:var(--accent);stroke-width:15}
.dg-dial__tick{fill:var(--soft);font-family:var(--font);font-size:12px;font-weight:700}
.dg-dial__needle{transform-box:view-box;transform-origin:120px 118px;transform:rotate(var(--dg-angle,0deg));transition:transform 1.3s cubic-bezier(.3,1.25,.45,1)}
.dg-dial__needle line{stroke:var(--ink);stroke-width:4.5;stroke-linecap:round}
.dg-dial__hub{fill:var(--ink)}
.dg-dial__pin{fill:var(--surface)}
.dg-score__level{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.2rem .7rem;margin:.5rem 0 0;text-align:center}
.dg-score__level b{font-size:var(--fs-h3);font-weight:800;font-style:italic;line-height:1.1;text-transform:uppercase}
.dg-score__level span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}

/* Le niveau de performance : les quatre paliers, le sien allumé */
.dg-level{gap:1rem}
.dg-level>*{margin:0}
.dg-levels{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.dg-levels li{display:grid;align-content:start;gap:.25rem;padding:.65rem .75rem;border-radius:10px;background:var(--bg-2);font-size:var(--fs-xs);font-weight:600;line-height:1.25;color:var(--soft)}
.dg-levels b{font-size:.875rem;font-weight:800;font-style:italic;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.dg-levels li[aria-current="true"]{background:var(--btn);color:var(--on-btn)}
.dg-levels li[aria-current="true"] b{color:var(--on-btn)}
.dg-level__text{font-size:var(--fs-body);font-weight:500;line-height:1.55}
.dg-move{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:var(--r);background:var(--bg-2);box-shadow:inset 4px 0 0 var(--accent)}
.dg-move__k{display:inline-flex;align-items:center;gap:.45rem;margin:0;font-size:var(--fs-xs);font-weight:800;font-style:italic;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.dg-move__k .ic{width:.7em;height:1.2em;fill:currentColor;stroke:none}
.dg-move__t{margin:0;font-weight:600;line-height:1.5}

/* Le point de friction : l'éclair reste hors du texte */
.dg-friction{justify-content:flex-start;gap:.9rem;padding:clamp(1.4rem,3vw,2.4rem)}
.dg-friction .tile__bolt{right:5%;top:50%;width:20%;height:auto;transform:translateY(-50%) rotate(8deg)}
.dg-friction>:not(.tile__bolt){position:relative;z-index:2;max-width:70%}
.dg-friction__title{display:grid;gap:.55rem}
.dg-friction__lead{font-size:var(--fs-lead);font-weight:600;line-height:1.35}
.dg-friction__name{font-size:clamp(1.45rem,4.6cqi,3.4rem);font-weight:800;font-style:italic;line-height:.98;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.dg-friction__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;margin:0;font-size:var(--fs-small);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dg-friction__meta b{font-size:1.6rem;font-weight:900;font-style:italic;letter-spacing:0}
.dg-friction__text{margin:0;font-size:var(--fs-body);line-height:1.5}

/* Les cinq jauges : 20 cellules, groupées selon les quatre zones de lecture */
.dg-gauges{gap:1.3rem}
.dg-gauges__head{display:grid;gap:.6rem}
.dg-gauges__head>*{margin:0}
.dg-zones{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:.3rem}
.dg-zones li{display:inline-flex;align-items:baseline;gap:.4rem;padding:.35rem .75rem;border-radius:999px;background:var(--bg-2);font-size:var(--fs-xs);font-weight:600;color:var(--soft)}
.dg-zones b{font-weight:800;color:var(--ink)}
.dg-gauges__list{list-style:none;display:grid}
.dg-gauge{container-type:inline-size;padding:1.15rem 0;border-top:1.5px solid var(--line)}
.dg-gauge:last-child{padding-bottom:0}
.dg-gauge__row{display:grid;grid-template-columns:2.2rem minmax(0,1fr);grid-template-areas:"n id" "n meter" "n score";gap:.7rem 1rem;align-items:center}
@container (min-width:52rem){
  .dg-gauge__row{grid-template-columns:2.2rem minmax(0,1.1fr) minmax(0,1fr) 9.5rem;grid-template-areas:"n id meter score"}
  .dg-gauge__score{display:grid;justify-items:end;gap:.2rem;text-align:right}
}
.dg-gauge__n{grid-area:n;align-self:start;display:grid;place-items:center;height:2.2rem;border-radius:10px;background:var(--bg-2);font-weight:800;font-style:italic}
.dg-gauge__id{grid-area:id;display:grid;gap:.25rem;min-width:0}
.dg-gauge__name{font-size:1.05rem;font-weight:800;font-style:italic;line-height:1.1;text-transform:uppercase;hyphens:auto;overflow-wrap:break-word}
.dg-gauge__text{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--soft)}
.dg-gauge__flag{display:inline-flex;align-items:center;justify-self:start;gap:.35rem;margin:.25rem 0 0;padding:.25rem .65rem;border-radius:999px;background:var(--b);color:var(--on-b);font-size:var(--fs-xs);font-weight:800;font-style:italic;letter-spacing:.04em;text-transform:uppercase}
.dg-gauge__flag .ic{width:.65em;height:1.1em;fill:var(--acc-b);stroke:none}
.dg-gauge.is-friction .dg-gauge__n{background:var(--b);color:var(--on-b)}
.dg-gauge__meter{grid-area:meter;display:grid;grid-template-columns:9fr 4fr 3fr 4fr;gap:.4rem;min-width:0}
.dg-gauge__z{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.15rem}
.dg-gauge__meter i{height:1.35rem}
.dg-gauge__score{grid-area:score;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:0}
.dg-gauge__pts{font-size:1.55rem;font-weight:900;font-style:italic;line-height:1;white-space:nowrap}
.dg-gauge__pts small{font-size:.6em;font-weight:800;color:var(--soft)}
.dg-gauge__lvl{font-size:var(--fs-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}

/* Les trois priorités */
.dg-prio-head{gap:.8rem}
.dg-prio-head>*{margin:0}
.dg-prios{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--gap)}
.dg-prio{gap:.75rem;min-height:15rem;padding-bottom:calc(var(--pad) + 2.6rem)}
.dg-prio>:not(.dg-prio__n){position:relative;z-index:1}
.dg-prio .kicker{margin:0}
.dg-prio__n{position:absolute;z-index:0;right:.5rem;bottom:-.3em;font-size:clamp(4.6rem,6vw,5.6rem);font-weight:900;font-style:italic;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--accent);opacity:.3;pointer-events:none}
.dg-prio__text{margin:0;font-weight:600;line-height:1.45}
.dg-prio__meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
.dg-prio__ans{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:auto 0 0;font-size:var(--fs-small);font-weight:600}
.dg-dots{display:inline-flex;gap:.2rem}
.dg-dots i{width:.75rem;height:.75rem}

/* « Le score n'est pas un verdict » */
.dg-verdict{padding:clamp(1.6rem,4vw,3rem)}
.dg-verdict__t{margin:0;max-width:56ch;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:600;line-height:1.4}
.dg-verdict__t span{display:block;margin-bottom:.35em;font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:800;font-style:italic;line-height:.98;letter-spacing:-.015em;text-transform:uppercase}

/* Restitution : la trame en 30 minutes */
.dg-debrief{gap:.9rem}
.dg-debrief>*{margin:0}
.dg-debrief__k{margin-top:.5rem;font-size:var(--fs-xs);font-weight:800;font-style:italic;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.dg-timeline{display:flex;gap:.25rem}
.dg-timeline span{display:grid;place-items:center;min-height:2.3rem;border-radius:7px;background:var(--btn);color:var(--on-btn);font-size:var(--fs-xs);font-weight:800;font-style:italic}
.dg-timeline span:nth-child(even){background:var(--ink);color:var(--bg)}
.dg-timeline [data-min="3"]{flex:3}.dg-timeline [data-min="5"]{flex:5}.dg-timeline [data-min="6"]{flex:6}.dg-timeline [data-min="8"]{flex:8}
.dg-trame{list-style:none;display:grid}
.dg-trame li{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-top:1.5px solid var(--line);font-size:var(--fs-small);line-height:1.45}
.dg-trame b{font-weight:800;font-style:italic;letter-spacing:.02em;text-transform:uppercase}
.dg-trame abbr{text-decoration:underline dotted;text-underline-offset:.2em;cursor:help}

/* L'appel unique */
.dg-cta{gap:1.6rem;padding:clamp(1.5rem,3vw,2.4rem)}
.dg-cta .tile__body{gap:.9rem}
.dg-cta__title{margin:0;max-width:18ch;font-size:clamp(1.45rem,7.5cqi,2.1rem);font-weight:800;font-style:italic;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--on-a)}
.dg-cta__text{margin:0;font-size:var(--fs-small);font-weight:500;line-height:1.5;color:var(--on-a-2)}
.dg-cta__note{margin:0;font-size:var(--fs-xs);font-weight:500;line-height:1.45;color:var(--on-a-2)}
.dg-cta .btn{text-align:center}
/* Repli sans messagerie : copier le récapitulatif, ou le sélectionner si le navigateur refuse */
.dg-copy{display:grid;justify-items:start}
.dg-copy__btn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem 0;border:0;background:none;color:var(--on-a-2);font-size:var(--fs-small);font-weight:700;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.22em;cursor:pointer}
.dg-copy__btn:hover{text-decoration-thickness:.16em}
.dg-copy__btn .ic{width:1.05em;height:1.05em}
.dg-copy .dg-cta__note:not(:empty){margin-top:.3rem}
.dg-copy__text{margin-top:.7rem;font-size:var(--fs-xs)}

.dg-restart{margin:1.6rem 0 0;text-align:center}
.dg-restart__btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border:0;border-radius:10px;background:none;color:var(--soft);font-size:var(--fs-small);font-weight:700;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.22em;cursor:pointer}
.dg-restart__btn:hover{color:var(--ink)}
.dg-restart__btn .ic{width:1em;height:1em}

/* ==========================================================================
   4. Pied de l'outil : avertissement et données
   ========================================================================== */
.dg-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1.5rem clamp(2rem,5vw,4.5rem);margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1.5px solid var(--line);font-size:var(--fs-small);line-height:1.6;color:var(--soft)}
.dg-foot .kicker{margin:0 0 .6rem}
.dg-foot__warn .kicker .ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor}
.dg-foot__data .h3{margin:0 0 .8rem;color:var(--ink)}
.dg-foot__data p{margin:0 0 .8rem}
.dg-foot__data p>a:not(.go){color:var(--ink);font-weight:600}
.dg-foot__data .dg-foot__back{margin:1.1rem 0 0}

@media (prefers-reduced-motion:reduce){
  .dg-dial__needle,.dg-opt__box,.dg-meter i,.dg-meter__g{transition:none}
}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width:1080px){
  .dg-hero__grid{grid-template-areas:
    "h1  h1  h1  h1  h1  h1"
    "h1  h1  h1  h1  h1  h1"
    "h1  h1  h1  h1  h1  h1"
    "sts sts sts sts sts sts"
    "por por por quo quo quo"
    "por por por quo quo quo"
    "rev rev rev rev rev rev"
    "mde mde mde mde mde mde"}
  .dg-id,.dg-dim{grid-template-columns:minmax(0,1fr)}
  .dg-id{grid-template-areas:"head" "aside" "form"}
  .dg-dim__head{position:static}
  .dg-legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
  .dg-legend li{display:inline-flex;gap:.45rem;font-size:var(--fs-xs)}
  .dg-legend b{width:1.7rem;height:1.7rem;border-radius:7px}
  .dg-prio-head,.dg-prios{grid-column:1/-1}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width:640px){
  .dg-hero__grid{grid-template-areas:"h1 h1" "h1 h1" "h1 h1" "sts sts" "por por" "por por" "quo quo" "rev rev" "mde mde"}
  .dg-h1 .tile__bolt{right:-6%;top:2%;height:44%;opacity:.55}
  .dg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-steps li:not([aria-current]) .dg-steps__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dg-meter{flex-basis:100%}
  .dg-card{padding:1.25rem 1rem}
  .dg-q{padding:1rem .85rem}
  .dg-scale{gap:.4rem}
  .dg-nav .btn--ghost{flex:0 0 auto;width:auto}
  .dg-nav [data-dg-next]{flex:1 1 auto;width:auto}
  .dg-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-friction .tile__bolt{display:none}
  .dg-friction>:not(.tile__bolt){max-width:none}
  .dg-trame li{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .dg-foot{grid-template-columns:minmax(0,1fr)}
}

/* ---- css/a-propos.css ---- */
/* ==========================================================================
   À propos : la page d'un homme et d'un état d'esprit.
   Uniquement des jetons de charte (var(--…)) : aucune couleur écrite en dur.
   ========================================================================== */

/* ---------- 1. Ouverture en mosaïque ---------- */
.ap-hero{grid-template-areas:
  "word word word word word word word word word word word word"
  "word word word word word word word word word word word word"
  "pho  pho  pho  pho  pho  pho  pho  def  def  def  def  def"
  "pho  pho  pho  pho  pho  pho  pho  def  def  def  def  def"
  "pho  pho  pho  pho  pho  pho  pho  pre  pre  pre  pre  pre";
  grid-auto-rows:minmax(118px,auto)}
.ap-word{grid-area:word}
.ap-pho{grid-area:pho}
.ap-def{grid-area:def}
.ap-pre{grid-area:pre}

/* Le mot : le logotype à pleine largeur, l'astérisque qui renvoie à la définition */
.ap-word{justify-content:space-between;gap:clamp(1.2rem,3vw,2.4rem);padding:clamp(1.3rem,3.2vw,2.8rem)}
.ap-word__h1{display:flex;align-items:flex-start;gap:.04em;margin:0;font-size:clamp(2rem,12cqi,9.5rem);line-height:1;color:var(--on-a)}
.ap-word__logo{flex:1 1 0;min-width:0;height:auto;fill:currentColor}
.ap-word__star{flex:none;margin-top:-.1em;font-weight:900;font-style:italic;line-height:.8;color:var(--b)}

/* La définition, comme une entrée de dictionnaire */
.ap-def{justify-content:space-between;gap:1.6rem}
.ap-def .tile__body{gap:.7rem}
.ap-def__word{font-size:clamp(2.2rem,12cqi,3.6rem);font-weight:900;font-style:italic;line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.ap-def__word span{color:var(--acc-b)}
.ap-def__word dfn{font-style:inherit}
.ap-def__list{gap:.3rem}
.ap-def__list li{grid-template-columns:.62em 1fr;gap:.5em;font-size:var(--fs-h3);font-weight:800;font-style:italic;line-height:1.1;text-transform:uppercase}
.ap-def__list .ic{width:.62em;height:1em;margin-top:.02em}
.ap-def__punch{font-size:var(--fs-lead);font-weight:700;line-height:1.35}

/* La phrase de présentation */
.ap-pre{justify-content:space-between;gap:1.2rem}
.ap-pre__text{font-size:var(--fs-lead);line-height:1.5}
.ap-pre__text strong{font-weight:800}

/* ---------- 2. Yan Reynes ---------- */
.ap-yan{grid-template-areas:
  "por por por por por txt txt txt txt txt txt txt"
  "por por por por por txt txt txt txt txt txt txt"
  "por por por por por txt txt txt txt txt txt txt"
  "k25 k25 k25 k25 k18 k18 k18 k18 exp exp exp exp"}
.ap-yan__por{grid-area:por;min-height:420px}
.ap-yan__txt{grid-area:txt}
.ap-yan__k25{grid-area:k25}
.ap-yan__k18{grid-area:k18}
.ap-yan__exp{grid-area:exp}

.ap-yan__txt{justify-content:flex-start;gap:clamp(1.5rem,3vw,2.4rem);padding:clamp(1.4rem,3.2vw,2.8rem)}
.ap-yan__txt .kicker{margin-bottom:.8rem}
.ap-yan__role{margin:.7rem 0 0;font-size:var(--fs-small);font-weight:800;font-style:italic;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}

/* La citation, en grand : l'accroche en capitales, la suite en texte courant */
.ap-quote{display:grid;gap:1.1rem;margin:0}
.ap-quote p{margin:0}
.ap-quote__hook{font-size:clamp(1.45rem,5.4cqi,2.6rem);font-weight:800;font-style:italic;line-height:1;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.ap-quote__hook em{font-style:inherit;color:var(--accent)}
.ap-quote__hook .ap-quote__mark{color:var(--accent)}
.ap-quote__body{font-size:var(--fs-lead);line-height:1.6}
.ap-quote__end{font-size:var(--fs-lead);font-weight:700;line-height:1.5}
.ap-quote__end .ap-quote__mark{color:var(--accent-ink)}

/* Les repères tirés de la citation */
.ap-stat{justify-content:space-between}
.ap-stat .stat__num span{font-size:.5em;letter-spacing:0}
.ap-stat .stat__label{max-width:24ch}
.ap-exp{gap:.45rem}
.ap-exp li{font-weight:700}

/* ---------- 3. Les valeurs, posées en équation ---------- */
.ap-values{grid-auto-rows:minmax(150px,auto)}
.ap-val{gap:1.8rem;min-height:270px}
.ap-val__t{font-size:clamp(1.6rem,10cqi,2.5rem);line-height:.95}
.ap-val__op{margin-right:.2em}
.tile--b .ap-val__op{color:var(--acc-b)}
/* Le résultat : la tuile claire dont jaillit la sauteuse, comme l'équation de l'accueil */
.ap-res{min-height:clamp(150px,17vw,230px);margin-top:clamp(1.5rem,4vw,3.5rem);padding-right:clamp(8rem,18%,15rem)}
.ap-res .cut{right:5%;height:128%}
.ap-res__t{position:relative;z-index:2;font-size:clamp(2rem,11cqi,8.5rem);font-weight:900;font-style:italic;line-height:.9;letter-spacing:-.03em;text-transform:uppercase;color:var(--accent)}
.ap-res__t .ap-val__op{color:var(--ink)}

/* ---------- 4. Les certifications : trois plaques-liens ---------- */
.ap-certs{grid-auto-rows:minmax(210px,auto)}
.ap-cert{padding-bottom:3.6rem}
.ap-cert__label{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:var(--pad);font-size:var(--fs-small);font-weight:800;font-style:italic;letter-spacing:.03em;line-height:1.2;text-transform:uppercase;color:var(--on-plate)}
.ap-cert:hover .ap-cert__label{text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.2em}
.ap-cert--target img{max-width:84%;max-height:56%}
.ap-cert--disc img{max-height:72%}
.ap-cert--qualiopi img{max-width:64%;max-height:62%}

/* ---------- 5. Clôture ---------- */
.ap-band__lead{max-width:46ch;margin:1.3rem 0 2rem;font-size:max(1.1875rem,var(--fs-lead));font-weight:700;line-height:1.45}
.ap-band .ap-band__go{font-size:1.1875rem;color:var(--on-a)}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width:1080px){
  .ap-hero{grid-template-areas:
    "word word word word word word"
    "word word word word word word"
    "pho  pho  pho  pho  pho  pho"
    "pho  pho  pho  pho  pho  pho"
    "pho  pho  pho  pho  pho  pho"
    "def  def  def  pre  pre  pre"
    "def  def  def  pre  pre  pre"}
  .ap-yan{grid-template-areas:
    "por por txt txt txt txt"
    "por por txt txt txt txt"
    "por por txt txt txt txt"
    "k25 k25 k18 k18 exp exp"}
  .ap-yan__por{min-height:0}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width:640px){
  .ap-hero{grid-template-areas:
    "word word"
    "pho  pho"
    "pho  pho"
    "def  def"
    "pre  pre";
    grid-auto-rows:minmax(112px,auto)}
  .ap-word{gap:1.4rem}
  .ap-def__list li{font-size:1.25rem}
  .ap-yan{grid-template-areas:
    "por por"
    "por por"
    "por por"
    "txt txt"
    "k25 k18"
    "exp exp"}
  .ap-quote__hook{font-size:1.45rem}
  .ap-stat .stat__num{font-size:2.4rem}
  .ap-stat .stat__label{font-size:var(--fs-xs)}
  .ap-val{min-height:0}
  .ap-res{min-height:170px;margin-top:3.5rem;padding-right:var(--pad)}
  .ap-res .cut{top:-28%;bottom:auto;height:100%}
  .ap-res__t{font-size:clamp(1.9rem,11cqi,2.4rem)}
  .ap-certs{grid-auto-rows:minmax(170px,auto)}
  .ap-cert__label{font-size:var(--fs-xs)}
}

/* ---- css/contact.css ---- */
/* ==========================================================================
   Contact : la page qui fait décrocher.
   Uniquement des jetons de charte (var(--…)) : aucune couleur écrite en dur.
   ========================================================================== */

/* ---------- 1. Ouverture en mosaïque ---------- */
.ct-hero{grid-template-areas:
  "h1  h1  h1  h1  h1  h1  h1  pho pho pho pho pho"
  "h1  h1  h1  h1  h1  h1  h1  pho pho pho pho pho"
  "h1  h1  h1  h1  h1  h1  h1  sta sta mai mai mai"
  "tel tel tel tel tel tel tel tel tel tel tel tel"
  "tel tel tel tel tel tel tel tel tel tel tel tel";
  grid-auto-rows:minmax(118px,auto)}
.ct-h1{grid-area:h1}
.ct-pho{grid-area:pho}
.ct-sta{grid-area:sta}
.ct-mailt{grid-area:mai}
.ct-tel{grid-area:tel}

/* La grande tuile titre : l'éclair à droite, le texte à gauche */
.ct-h1{padding:clamp(1.4rem,3vw,2.5rem)}
.ct-h1 .tile__body{gap:1rem;max-width:60%}
.ct-h1 .tile__bolt{right:-10%}
.ct-h1__sub{margin:0;font-size:var(--fs-h3);font-weight:800;font-style:italic;line-height:1.08;text-transform:uppercase;text-wrap:balance}
.ct-h1__text{margin:0;max-width:46ch;font-size:var(--fs-body);line-height:1.55}

/* Le numéro en géant : toute la tuile appelle */
.ct-tel{gap:1.4rem;padding:clamp(1.3rem,3vw,2.6rem)}
.ct-tel__num{font-size:clamp(2rem,14.6cqi,10.5rem);font-weight:900;font-style:italic;line-height:.86;letter-spacing:-.025em;white-space:nowrap}
.ct-tel .tile__go{width:clamp(2.6rem,5cqi,3.6rem);height:clamp(2.6rem,5cqi,3.6rem)}
.ct-tel .tile__go .ic{width:45%;height:45%}

/* Chiffre clé et raccourci vers l'e-mail */
.ct-sta{justify-content:flex-end}
.ct-mailt .tile__body{gap:.45rem}
.ct-mailt__addr{letter-spacing:.01em;text-transform:none;overflow-wrap:anywhere}

/* ---------- 2. Écrivez-nous ---------- */
.ct-write{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.ct-write__intro{position:sticky;top:calc(var(--header-h) + 2rem)}
.ct-write__intro .lead{margin:1.4rem 0 2rem}
.ct-mail{display:inline-flex;align-items:center;gap:.85rem;max-width:100%;font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:800;line-height:1.2;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.ct-mail__ic{display:grid;place-items:center;flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--a);color:var(--on-a);transition:transform .25s var(--ease)}
.ct-mail__ic .ic{width:1.3rem;height:1.3rem}
.ct-mail:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.ct-mail:hover .ct-mail__ic{transform:rotate(-8deg) scale(1.06)}

/* Le formulaire, posé sur une carte */
.ct-card{padding:clamp(1.3rem,3vw,2.5rem);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.ct-form{gap:1.25rem}
.ct-form .err:empty{display:none}
.ct-needs{margin:0;padding:0;border:0;min-inline-size:0}
.ct-needs legend{padding:0;margin-bottom:.6rem}

/* Pastilles de besoin : de vraies cases à cocher, transmises même sans JavaScript */
.ct-chip{position:relative}
.ct-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:inherit;opacity:0;cursor:pointer}
.ct-chip .ic{width:1rem;height:1rem;stroke-width:2.4}
.ct-chip__on{display:none}
.ct-chip:has(:checked),.ct-chip.is-on{background:var(--ink);color:var(--bg)}
.ct-chip:has(:checked) .ct-chip__on,.ct-chip.is-on .ct-chip__on{display:block}
.ct-chip:has(:checked) .ct-chip__off,.ct-chip.is-on .ct-chip__off{display:none}
.ct-chip:has(:focus-visible){outline:3px solid var(--glow);outline-offset:3px}

.ct-submit{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:.3rem}
.ct-submit .form-note{flex:1 1 14rem}
.ct-status{margin:0}
.ct-status:not(:empty){padding:.9rem 1.1rem;border-radius:12px;background:var(--bg-2);font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--ink)}
.ct-status a{font-weight:800;color:var(--accent-ink)}

/* ---------- 3. Tuiles d'appoint ---------- */
.ct-more__title{font-size:clamp(1.6rem,3vw,2.4rem)}
.ct-more{grid-template-areas:
  "dia dia dia dia dia yan yan yan yan soc soc soc"
  "dia dia dia dia dia yan yan yan yan soc soc soc"
  "dia dia dia dia dia yan yan yan yan soc soc soc"}
.ct-dia{grid-area:dia}
.ct-yan{grid-area:yan}
.ct-soc{grid-area:soc}

.ct-dia .tile__body{gap:.6rem}
.ct-dia .tile__go+.tile__body{padding-right:2.8rem}
.ct-dia .tile__meta{color:var(--on-b)}
.ct-dia .tile__meta span+span::before{content:"";display:inline-block;width:.35rem;height:.35rem;margin:0 .6rem .12rem 0;border-radius:50%;background:currentColor;vertical-align:middle}

/* Les réseaux : trois liens, la tuile elle-même ne réagit pas */
.ct-soc{gap:1.4rem}
.ct-soc__list{display:grid;gap:.4rem;list-style:none}
.ct-soc__link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.3rem 0;color:var(--on-a);text-decoration:none}
.ct-soc__ic{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--on-a);color:var(--a);transition:transform .25s var(--ease)}
.ct-soc__ic .ic{width:1.1rem;height:1.1rem}
.ct-soc__txt{display:grid;min-width:0;line-height:1.15}
.ct-soc__txt b{font-size:1.1875rem;font-weight:800;font-style:italic;text-transform:uppercase}
.ct-soc__txt small{overflow-wrap:anywhere;font-size:var(--fs-xs);font-weight:600;color:var(--on-a-2)}
.ct-soc__ext{width:1.1rem;height:1.1rem;transition:transform .25s var(--ease)}
.ct-soc__link:hover b{text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.18em}
.ct-soc__link:hover .ct-soc__ic{transform:rotate(-8deg) scale(1.06)}
.ct-soc__link:hover .ct-soc__ext{transform:translate(2px,-2px)}

@media (prefers-reduced-motion:reduce){
  .ct-mail__ic,.ct-soc__ic,.ct-soc__ext{transition:none}
}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width:1080px){
  .ct-hero{grid-template-areas:
    "h1  h1  h1  h1  h1  h1"
    "h1  h1  h1  h1  h1  h1"
    "tel tel tel tel tel tel"
    "tel tel tel tel tel tel"
    "pho pho sta sta mai mai"}
  .ct-write{grid-template-columns:1fr}
  .ct-write__intro{position:static}
  .ct-more{grid-template-areas:
    "dia dia dia dia dia dia"
    "dia dia dia dia dia dia"
    "yan yan yan soc soc soc"
    "yan yan yan soc soc soc"}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width:640px){
  .ct-hero{grid-template-areas:
    "h1  h1"
    "tel tel"
    "pho sta"
    "pho mai";
    grid-auto-rows:minmax(112px,auto)}
  .ct-h1 .tile__body{max-width:none}
  .ct-h1 .tile__bolt{top:-6%;right:-7%;height:46%}
  .ct-h1__text{font-size:var(--fs-small)}
  .ct-tel{gap:1rem}
  .ct-mailt__addr{display:none}
  .ct-more{grid-template-areas:
    "dia dia"
    "yan yan"
    "yan yan"
    "soc soc"}
  .ct-submit .btn{width:100%}
}

/* ---- css/v2.css ---- */
/* ==========================================================================
   LA GRINTA · V2 : les retours du client sur Rose & Noir
   Chargée sur les seules pages de la charte v2 (le build l'ajoute après la
   feuille de la page). Les couleurs viennent des tokens v2 de grinta.css.
   ========================================================================== */

/* ---------- Accueil : la mosaïque ----------
   Target sort, la performance prend la place de l'analyse comportementale,
   l'équation remplace « Du mental au comportemental ». */
.hero-bento{grid-template-areas:
  "por por por h1  h1  h1  h1  h1  eq  eq  eq  eq"
  "por por por h1  h1  h1  h1  h1  dia dia dia dia"
  "por por por h1  h1  h1  h1  h1  dia dia dia dia"
  "por por por rpe rpe rpe rpe rpe pre pre sta sta"
  "org org org org aca aca aca aca qua qua dis dis"}
.hb-eq{grid-area:eq}.hb-rpe{grid-area:rpe}
.hb-qui{min-height:420px}

/* L'équation : le résultat en jaune, la couleur de la performance */
.hb-eq{gap:.3rem;text-align:center;text-decoration:none}
.hb-eq__ops{font-size:clamp(.75rem,1vw,.9rem);font-weight:800;font-style:italic;letter-spacing:.03em;line-height:1.25;text-transform:uppercase;color:var(--on-b-2)}
.hb-eq .hb-eq__res{font-size:clamp(.95rem,10cqi,2.6rem);line-height:.95;color:var(--perf)}

/* ---------- Les capsules de Yan ----------
   Chaque capsule se lit dans sa tuile ([data-capsule-tile], v2.js) : un clic sur la photo,
   ou sur une question quand la tuile en rassemble plusieurs, lance la vidéo avec le son sur
   la photo floutée. La vidéo, verticale et sous-titrée, tient entière dans la tuile ; une
   tuile trop basse grandit le temps de la lecture, à la mesure de sa largeur (v2.js). */
.cap-hit{position:absolute;inset:0;z-index:2;display:block;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer}
.cap-play{position:absolute;top:44%;left:50%;display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:50%;background:var(--perf);color:var(--b);transform:translate(-50%,-50%);box-shadow:0 12px 32px rgb(var(--ink-rgb)/.35);transition:transform .25s var(--ease)}
.cap-play .ic{width:1.7rem;height:1.7rem;margin-left:.22rem}
.cap-hit:hover .cap-play{transform:translate(-50%,-50%) scale(1.07)}
/* La tuile rogne ce qui dépasse : l'anneau de focus se dessine à l'intérieur de la photo */
.cap-hit:focus-visible{outline-offset:-6px}
.hb-vid .cap-play{top:62%}
/* La légende passe au-dessus de la photo cliquable sans capter le clic ; ses questions, si. */
[data-capsule-tile] .caption{position:relative;z-index:3;pointer-events:none}
[data-capsule-tile] .cap-list{pointer-events:auto}
.cap-len{display:block;margin-top:.45rem;color:var(--perf)}

[data-capsule-tile] video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;visibility:hidden}
[data-capsule-tile]>img{transition:filter .4s var(--ease),transform .4s var(--ease)}
[data-capsule-tile].is-playing{background:var(--b)}
[data-capsule-tile].is-playing>img{filter:blur(16px) brightness(.5);transform:scale(1.12)}
[data-capsule-tile].is-playing video{visibility:visible}
[data-capsule-tile].is-playing::before,[data-capsule-tile].is-playing::after{display:none}
[data-capsule-tile].is-playing>:not(img,video,.cap-close){visibility:hidden}
.cap-close{position:absolute;top:.7rem;right:.7rem;z-index:3;display:none;place-items:center;width:2.6rem;height:2.6rem;padding:0;border:0;border-radius:50%;background:var(--on-b-2);color:var(--b);cursor:pointer}
.cap-close .ic{width:1.1rem;height:1.1rem;stroke-width:2.4}
[data-capsule-tile].is-playing .cap-close{display:grid}
/* À la fin, le bouton du carton final devient un vrai lien vers le diagnostic */
.cap-cta{position:absolute;top:.7rem;left:.7rem;z-index:3;display:none;width:auto;max-width:calc(100% - 1.4rem);min-height:2.6rem;padding:.6em 1em;font-size:.84rem}
[data-capsule-tile].is-ended .cap-cta{display:inline-flex}
/* Tuile sans photo : le lien prend sa place dans le flux, sous les questions, sans couvrir le surtitre */
.of-coach .cap-cta{position:static;align-self:flex-start}
/* Le portrait du diagnostic porte désormais une légende : il reprend le voile des photos légendées */
.dg-por[data-capsule-tile]::after{content:""}

/* Plusieurs capsules dans une tuile : une ligne par question */
/* La liste remonte la légende : le voile de la photo monte avec elle */
.of-perf__ph::after{background:linear-gradient(to top,rgb(var(--b-rgb)/.94),rgb(var(--b-rgb)/.7) 42%,transparent 66%)}
.cap-list{display:grid;gap:.4rem;margin:.9rem 0 0;padding:0;list-style:none;letter-spacing:normal;text-transform:none}
.cap-q{display:flex;align-items:center;gap:.7rem;padding:.45rem .85rem .45rem .45rem;border-radius:12px;background:rgb(var(--b-rgb)/.85);color:var(--on-b-2);font-size:var(--fs-small);font-weight:700;line-height:1.25;text-decoration:none;transition:background-color .2s var(--ease)}
.cap-q .ic{width:2rem;height:2rem;padding:.55rem .45rem .55rem .62rem;border-radius:50%;background:var(--perf);color:var(--b)}
.cap-q span{flex:1}
.cap-q small{flex:none;font-size:var(--fs-xs);font-weight:700;color:var(--perf)}
.cap-q:hover{background:rgb(var(--b-rgb)/.97)}
.cap-list--line .cap-q{background:var(--bg-2);color:var(--ink)}
.cap-list--line .cap-q small{color:var(--soft)}
.cap-list--line .cap-q:hover{background:var(--line)}

/* ---------- Offres ---------- */
/* Chapitre 01 : les quatre leviers, Yan, puis la première étape */
.of-perf{grid-template-areas:
  "gains gains gains gains gains gains ph   ph   ph   ph   ph   ph"
  "gains gains gains gains gains gains ph   ph   ph   ph   ph   ph"
  "gains gains gains gains gains gains ph   ph   ph   ph   ph   ph"
  "gains gains gains gains gains gains ph   ph   ph   ph   ph   ph"
  "next  next  next  next  next  next  next next next next next next"}
.of-perf__ph{grid-area:ph;margin:0}
/* Peu d'air au-dessus de la tête : le cadrage part du haut, la liste des capsules couvre la chemise */
.of-perf__ph>img{object-position:50% 0}
.of-perf__next{grid-area:next;flex-direction:row;align-items:center;gap:var(--gap) 2rem}
.of-perf__next .tile__body{gap:.6rem}
.of-gain.tile--b p{color:var(--on-b-2)}
.of-perf__txt{max-width:62ch;margin:0;font-size:var(--fs-lead);font-weight:600;line-height:1.45;color:var(--on-b-2)}

/* Les deux outils de la prépa. mentale : de vraies illustrations sur fond clair, en volumes mats et
   en palette sobre (le rouge de la charte comme seul accent). Elles reprennent la composition et tous
   les textes des schémas d'origine ; les SVG viennent de _src/tools/schemas.py et prennent leurs
   couleurs des tokens. */
.of-tools{grid-template-areas:
  "mpm mpm mpm mpm mpm mpm s1  s1  s1  s1  s1  s1"
  "s2  s2  s2  s2  s2  s2  s2  dpm dpm dpm dpm dpm"}
.of-schema.tile--line{justify-content:center;gap:1.3rem;padding:clamp(1rem,2.5vw,2rem)}
.ill{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
.ill text{font-family:inherit}
.mpm-3d{position:relative;width:min(100%,32rem);margin:0 auto}
/* La règle des anciens schémas (.of-schema img : hauteur bornée, fusion multiply) ne s'applique pas au rendu */
.of-schema .mpm-3d__img{display:block;width:100%;max-height:none;height:auto;mix-blend-mode:normal}
.of-schema .mpm-3d__img--rouge,[data-variante="rouge"] .of-schema .mpm-3d__img--rose{display:none}
[data-variante="rouge"] .of-schema .mpm-3d__img--rouge{display:block}
.mpm-3d__txt{position:absolute;inset:0;width:100%;height:100%}
.dpm-svg{max-width:46rem}
/* Les annotations du DPM se détachent des rayons et des flèches qu'elles croisent : un liseré de la couleur du fond */
.dpm-note{paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.dpm-legend{display:none;gap:.6rem;width:min(100%,34rem);margin:0 auto;padding:0;list-style:none;font-size:var(--fs-small);line-height:1.45;color:var(--soft)}
.dpm-legend li{display:grid;grid-template-columns:.9rem minmax(0,1fr);gap:.7rem;align-items:start}
.dpm-legend i{width:.9rem;height:.9rem;margin-top:.28rem;border-radius:3px}
.dpm-legend p{margin:0}
.dpm-legend b{font-weight:800;color:var(--ink)}

/* Catalogue : la carte grise remplace l'aplat rose et la découpe */
.of-cat .of-tag{color:var(--on-b-2)}
.of-cat .tile__title{color:var(--on-b)}
.of-cat{justify-content:space-between;gap:1.6rem}
/* L'éclair tient le quart droit de la carte ; le contenu du catalogue reste à sa gauche */
.of-cat .tile__bolt{top:auto;right:-2%;bottom:-9%;width:27%;height:auto}
.of-cat__info{position:relative;z-index:1;gap:.9rem;max-width:min(70%,19rem)}
.of-cat__num{display:flex;align-items:baseline;gap:.55rem;font-size:var(--fs-small);font-weight:700;color:var(--on-b-2)}
.of-cat__num b{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:900;font-style:italic;line-height:.85;letter-spacing:-.03em;color:var(--perf)}
.of-cat__themes{display:flex;flex-wrap:wrap;gap:.4rem}
.of-cat__themes span{padding:.32rem .7rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--on-b-2);font-size:var(--fs-xs);font-weight:700;line-height:1.2;white-space:nowrap;color:var(--on-b-2)}

/* ---------- Contact et À propos : le numéro et le mot restent des titres, sans écraser la page ----------
   Leur carte tient sur une seule rangée de la mosaïque, plus sur deux ; le mot perd son astérisque. */
.ct-hero{grid-template-areas:
  "h1  h1  h1  h1  h1  h1  h1  pho pho pho pho pho"
  "h1  h1  h1  h1  h1  h1  h1  pho pho pho pho pho"
  "h1  h1  h1  h1  h1  h1  h1  sta sta mai mai mai"
  "tel tel tel tel tel tel tel tel tel tel tel tel"}
/* La photo du Contact n'a pas de légende : pas de voile, ses couleurs restent naturelles */
.ct-pho::after{content:none}
.ct-tel{gap:.8rem;padding:clamp(1.1rem,2.2vw,1.8rem)}
.ct-tel__num{font-size:clamp(1.6rem,4.4cqi,3.3rem)}
.ap-hero{grid-template-areas:
  "word word word word word word word word word word word word"
  "pho  pho  pho  pho  pho  pho  pho  def  def  def  def  def"
  "pho  pho  pho  pho  pho  pho  pho  def  def  def  def  def"
  "pho  pho  pho  pho  pho  pho  pho  pre  pre  pre  pre  pre"}
.ap-word{gap:.9rem;padding:clamp(1.1rem,2.2vw,1.8rem)}
.ap-word__h1{max-width:min(100%,30rem);font-size:clamp(1.6rem,6cqi,4.4rem)}
.ap-word__star{display:none}

/* ---------- Tablette ---------- */
@media (max-width:1080px){
  .hero-bento{grid-template-areas:
    "h1  h1  h1  h1  h1  h1"
    "h1  h1  h1  h1  h1  h1"
    "por por eq  eq  eq  eq"
    "por por dia dia dia dia"
    "rpe rpe rpe rpe pre pre"
    "sta sta org org org org"
    "aca aca aca aca qua dis"}
  .ct-hero{grid-template-areas:
    "h1  h1  h1  h1  h1  h1"
    "h1  h1  h1  h1  h1  h1"
    "tel tel tel tel tel tel"
    "pho pho sta sta mai mai"}
  .of-tools{grid-template-areas:"mpm mpm mpm mpm mpm mpm" "s1 s1 s1 s1 s1 s1" "dpm dpm dpm dpm dpm dpm" "s2 s2 s2 s2 s2 s2"}
  .ap-hero{grid-template-areas:
    "word word word word word word"
    "pho  pho  pho  pho  pho  pho"
    "pho  pho  pho  pho  pho  pho"
    "pho  pho  pho  pho  pho  pho"
    "def  def  def  pre  pre  pre"
    "def  def  def  pre  pre  pre"}
  .of-perf{grid-template-areas:"gains gains gains gains gains gains" "ph ph ph ph ph ph" "next next next next next next"}
  .of-perf__ph{min-height:36rem}
  .of-perf__next{flex-direction:column;align-items:flex-start}
  .of-nav__long{display:none}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .hero-bento{grid-template-areas:
    "h1 h1" "h1 h1"
    "por eq" "por pre"
    "dia dia"
    "rpe rpe"
    "org sta"
    "aca aca"
    "qua dis"}
  /* Tuile étroite : le bouton rejoint le coin, comme la flèche des tuiles-liens */
  .hb-vid .cap-play{top:.7rem;right:.7rem;left:auto;width:2.6rem;height:2.6rem;transform:none}
  .hb-vid .cap-hit:hover .cap-play{transform:scale(1.07)}
  .hb-vid .cap-play .ic{width:1.05rem;height:1.05rem;margin-left:.15rem}
  /* Tuiles basses ou étroites : en fin de lecture, le lien vers le diagnostic prend la place du bouton */
  [data-capsule-tile].is-ended .cap-play{display:none}
  /* Sur une colonne, le damier des gains se poursuit : la 3e carte passe après la 4e */
  .of-gain:nth-child(3){order:2}
  /* Les mosaïques de tablette, redéfinies plus haut, reviennent à leur version mobile */
  .ct-hero{grid-template-areas:"h1 h1" "tel tel" "pho sta" "pho mai"}
  .of-tools{grid-template-areas:"mpm mpm" "s1 s1" "dpm dpm" "s2 s2"}
  /* Les annotations du DPM deviennent trop petites : elles passent en légende sous le graphique */
  .dpm-note{display:none}
  .dpm-legend{display:grid}
  .ap-hero{grid-template-areas:"word word" "pho pho" "pho pho" "def def" "pre pre"}
  .of-perf{grid-template-areas:"gains gains" "ph ph" "next next"}
  .of-cat .tile__bolt{width:19%}
  .of-cat__info{max-width:78%}
  .of-perf__ph{min-height:31rem}
}

@media (prefers-reduced-motion:reduce){
  .cap-play,.cap-q,[data-capsule-tile]>img{transition:none}
}

/* ---- Pages du site sans équivalent dans la maquette : mentions légales et
   politique de confidentialité (_content_grinta_legal). La page introuvable
   reprend tel quel le bandeau d'appel de la page À propos. ---- */
.lg-legal{display:grid;gap:2.2rem;max-width:72ch}
.lg-legal .h3{margin:0 0 .8rem}
.lg-legal p{margin:0 0 .8rem}
.lg-legal p>a{color:var(--ink);font-weight:600}
/* Champ piège du formulaire de contact : hors écran, ignoré des lecteurs d'écran. */
.lg-pot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}