/* Le site de BeMyIA (bemyia.fr), v5 (13/11/2026, nuit, notes 16 à 19 de Tom). Écrit à la main, copié tel quel par outils/site.py.
   Clair seulement. Fond blanc ; une ambiance de couleur en haut de chaque page (ciel, sauge, ardoise, sable, pêche), qui fond vite dans le blanc ;
   le gris pour le contexte ; la carte blanche pour l'essentiel ; la fin et le pied en noir. Les titres toujours en noir.
   Interdits : contours, lueurs, pastilles « point + texte coloré », couleurs décoratives, objets enfantins. */

@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url("/assets/polices/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url("/assets/polices/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --encre:#1D1D1F; --texte2:#424245; --doux:#68686D; --pale:#A1A1A6;
  --gris:#F3F3F3; --gris2:#ECECEC; --gris3:#E2E2E2; --noir:#0B0B0C; --rouge:#D9483F;
  --ciel-1:#CFE2F4; --ciel-2:#E4EEF8; --sauge-1:#D2E7DB; --sauge-2:#E7F2EC; --ardoise-1:#D3DAE4; --ardoise-2:#E8ECF2;
  --sable-1:#EBDFC8; --sable-2:#F5EFE3; --peche-1:#F1D1BA; --peche-2:#F8E7DA;
  /* note 29 : une seule ombre pour toutes les cartes blanches (celle de « Notre objectif », que Tom préfère) ; les essais : /__accueil/ombres.html */
  --ombre:0 1px 2px rgba(0,0,0,.05),0 -3px 12px -6px rgba(0,0,0,.07),0 22px 46px -20px rgba(0,0,0,.22);
  --ombre-survol:0 1px 2px rgba(0,0,0,.05),0 -3px 12px -6px rgba(0,0,0,.07),0 30px 60px -24px rgba(0,0,0,.28);
  --ombre-forte:0 2px 6px rgba(0,0,0,.05),0 40px 80px -30px rgba(0,0,0,.28);
  --r-panneau:32px; --r-carte:22px; --r:16px; --large:1120px; --cote:clamp(18px,4vw,32px); --marge:8px;
  --ease:cubic-bezier(.2,.75,.15,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff;color:var(--encre);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5;font-size:16px}
h1,h2,h3,h4,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button,summary,[role="tab"]{cursor:pointer}
.ico{width:18px;height:18px;flex:none}
[id]{scroll-margin-top:100px}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:6px}
.saut{position:absolute;left:12px;top:-60px;z-index:99;background:var(--encre);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600}
.saut:focus{top:12px}
.mw{width:100%;max-width:calc(var(--large) + 2 * var(--cote));margin:0 auto;padding-left:var(--cote);padding-right:var(--cote)}
.mw-etroit{width:100%;max-width:calc(780px + 2 * var(--cote));margin:0 auto;padding-left:var(--cote);padding-right:var(--cote)}
.centre{text-align:center}

/* ------------------------------------------------------------------ les mots (les titres toujours en noir) */
h1,h2,h3,h4,.t1,.t2,.t3{color:var(--encre)}
.t1{font-size:clamp(38px,5vw,62px);line-height:1.03;letter-spacing:-.047em;font-weight:700;text-wrap:balance}
.t2{font-size:clamp(28px,3.4vw,42px);line-height:1.07;letter-spacing:-.042em;font-weight:700;text-wrap:balance}
.t3{font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:-.03em;font-weight:700}
.chapo{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.55;color:var(--texte2);letter-spacing:-.01em;max-width:36em;text-wrap:pretty}
.texte{font-size:16px;line-height:1.6;color:var(--texte2)}
.petit{font-size:14px;line-height:1.5;color:var(--doux)}
.source{font-size:12.5px;line-height:1.5;color:var(--doux)}
.k{display:block;font-size:13px;font-weight:600;color:var(--doux)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;background:var(--gris2);color:var(--encre);font-size:13.5px;font-weight:600;white-space:nowrap}
.chip.verre{background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px rgba(0,0,0,.06)}
.panneau .chip{background:#fff}

/* ------------------------------------------------------------------ les boutons et les liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:99px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;text-align:center;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.btn .ico{width:16px;height:16px}
.btn:hover{transform:translateY(-1px)}
.btn.noir{background:var(--encre);color:#fff}
.btn.noir:hover{background:#000;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.btn.blanc{background:#fff;color:var(--encre);box-shadow:0 1px 2px rgba(0,0,0,.07),0 10px 24px rgba(0,0,0,.07)}
.btn.gris{background:var(--gris2);color:var(--encre)}
.btn.gris:hover{background:var(--gris3)}
.panneau .btn.gris{background:#fff}
.btn.sombre{background:rgba(255,255,255,.12);color:#fff}
.btn.sombre:hover{background:rgba(255,255,255,.2)}
.btn.lien{background:none;padding-left:8px;padding-right:8px;color:var(--encre)}
.btn.lien:hover{opacity:.65;transform:none}
.btn.sm{min-height:40px;padding:8px 16px;font-size:14px}
.boutons{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.centre .boutons,.haut-c .boutons{justify-content:center}
.lien{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--encre)}
.lien .ico{width:15px;height:15px;transition:transform .2s var(--ease)}
a:hover .lien .ico,.lien:hover .ico{transform:translateX(3px)}
.renvoi{margin-top:28px}
.centre .renvoi{text-align:center}
.notes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.notes span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.85);font-size:13px;font-weight:500;color:var(--encre)}
.notes .ico{width:15px;height:15px}

/* ------------------------------------------------------------------ la barre et ses menus */
.barre{position:fixed;z-index:50;top:20px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 24px))}
.barre-in{display:flex;align-items:center;height:60px;padding:0 9px 0 22px;border-radius:99px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.07)}
.barre .logo{display:flex;align-items:center;color:var(--encre);margin-right:auto}
.barre .logo svg{height:23px;width:auto}
.liens{display:flex;align-items:center;gap:2px;margin-right:12px}
.nv{display:flex;align-items:center;border-radius:99px;transition:background .15s}
.nv:hover,.nv.ouvert{background:rgba(0,0,0,.045)}
.nv a{padding:9px 2px 9px 13px;font-size:14.5px;font-weight:500;color:var(--encre)}
.nv.actif a,.nv a[aria-current="page"]{font-weight:700}
.nv-b{display:grid;place-items:center;width:26px;height:36px;padding-right:6px;color:var(--doux)}
.nv-b .chev{width:15px;height:15px;transition:transform .2s var(--ease)}
.nv.ouvert .chev{transform:rotate(180deg)}
.mms{position:relative}
.mm{position:absolute;left:0;right:0;top:8px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;padding:12px;border-radius:26px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 26px 60px rgba(0,0,0,.14)}
.mm[hidden]{display:none}
.mm-g{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;color:var(--encre)}
.mm-g .obj{width:52px}
.mm-g p{font-size:14.5px;line-height:1.5;color:var(--encre);font-weight:500}
.mm-lien{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.mm-lien .ico{width:14px;height:14px}
.mm ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;align-content:start}
.mm li a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:14px;transition:background .15s}
.mm li a:hover,.mm li a.ici{background:var(--gris)}
.mm li a.ici .pic{background:#fff}
.mm .pic{width:36px;height:36px;border-radius:11px;background:var(--gris);display:grid;place-items:center;flex:none;color:var(--encre)}
.mm li a:hover .pic{background:#fff}
.mm .pic .ico{width:18px;height:18px}
.mm .tx b{display:block;font-size:14.5px;font-weight:700;color:var(--encre);letter-spacing:-.01em}
.mm .tx span{display:block;font-size:13px;color:var(--doux);line-height:1.4;margin-top:2px}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--encre);transition:transform .25s var(--ease),top .25s var(--ease)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.barre .menu{display:none}
@media (max-width:1020px){
  .liens,.barre-cta,.mms{display:none!important}
  .menu-btn{display:block}
  .barre-in{padding:0 6px 0 18px}
  .barre .menu.ouvert{display:block;margin-top:8px;max-height:calc(100vh - 108px);max-height:calc(100svh - 108px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:10px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 48px rgba(0,0,0,.14)}
  .menu details{border-radius:14px}
  .menu summary{display:flex;justify-content:space-between;align-items:center;padding:14px;font-size:17px;font-weight:700;letter-spacing:-.02em;list-style:none;color:var(--encre)}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary .chev{width:16px;height:16px;color:var(--doux);transition:transform .2s}
  .menu details[open] summary .chev{transform:rotate(180deg)}
  .menu details[open]{background:var(--gris)}
  .menu .voir{display:flex;align-items:center;gap:6px;padding:4px 14px 10px;font-size:14px;font-weight:700}
  .menu .voir .ico{width:14px;height:14px}
  .menu ul{padding:0 6px 8px}
  .menu ul a{display:flex;align-items:center;gap:10px;padding:10px 8px;font-size:15px;font-weight:600;color:var(--encre)}
  .menu ul .ico{width:17px;height:17px;color:var(--doux)}
  .menu ul a.ici{background:#fff;border-radius:12px}
  .menu .boutons{margin:10px 4px 4px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .menu .boutons .large{grid-column:1/-1}
}

/* ------------------------------------------------------------------ le haut de page : le titre au milieu, l'ambiance de la catégorie */
.amb-ciel{background:linear-gradient(180deg,var(--ciel-1) 0%,var(--ciel-2) 40%,#fff 92%)}
.amb-sauge{background:linear-gradient(180deg,var(--sauge-1) 0%,var(--sauge-2) 40%,#fff 92%)}
.amb-ardoise{background:linear-gradient(180deg,var(--ardoise-1) 0%,var(--ardoise-2) 40%,#fff 92%)}
.amb-sable{background:linear-gradient(180deg,var(--sable-1) 0%,var(--sable-2) 40%,#fff 92%)}
.amb-peche{background:linear-gradient(180deg,var(--peche-1) 0%,var(--peche-2) 40%,#fff 92%)}
.haut{position:relative;margin:var(--marge) var(--marge) 0;border-radius:var(--r-panneau);overflow:hidden}
.haut-in{position:relative;z-index:1;padding-top:clamp(128px,13vw,160px);padding-bottom:clamp(60px,7vw,92px)}
.haut.petit .haut-in{padding-bottom:clamp(40px,5vw,60px)}
.haut-c{display:flex;flex-direction:column;align-items:center;text-align:center}
.haut-c .t1{margin-top:20px;max-width:14.5em}
.haut-c .chapo{margin:20px auto 0}
.haut .cote{position:absolute;z-index:0;pointer-events:none}
.haut .cote .obj{filter:drop-shadow(0 16px 20px rgba(0,0,0,.14))}
.haut .cote.gauche{left:clamp(16px,9vw,150px);top:clamp(150px,17vw,200px)}
.haut .cote.droite{right:clamp(16px,9vw,150px);top:clamp(190px,21vw,250px)}
.haut .cote .max{width:clamp(110px,12vw,160px)}
.haut .cote .obj:not(.max){width:clamp(52px,6vw,74px)}
@media (max-width:900px){.haut .cote{display:none}}
.parcours{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:26px}
.parcours a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.88);font-size:13.5px;font-weight:600;color:var(--encre)}
.parcours a:hover{background:#fff}
.parcours .ico{width:15px;height:15px}
.parcours .sep{width:14px;height:2px;border-radius:2px;background:rgba(0,0,0,.14)}

/* ------------------------------------------------------------------ les sections */
.sec{padding:clamp(72px,9vw,116px) 0}
.sec.serre{padding-top:clamp(36px,5vw,56px)}
.panneau{margin:0 var(--marge);border-radius:var(--r-panneau);background:var(--gris)}
.entete{margin-bottom:clamp(30px,4vw,48px)}
.entete .t2{margin-top:16px}
.entete .chapo{margin-top:14px}
.entete.centre{display:flex;flex-direction:column;align-items:center;text-align:center}
.entete.centre .chapo{margin-left:auto;margin-right:auto}
.obj{width:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.12))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split.inverse .split-t{order:2}
.split-t .t2,.split-v > .chip + .t2{margin-top:16px}   /* note 25 : aussi quand le texte est dans la colonne de droite (Pourquoi nous) */
.split-t .chapo{margin-top:14px}
.split-v{min-width:0}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split.inverse .split-t{order:0}}
.coches{display:grid;gap:12px;margin-top:22px}
.coches li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;font-weight:500;color:var(--encre)}
.coches .ico{width:20px;height:20px}
.fenetre{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--ombre-forte)}
.fenetre-barre{display:flex;align-items:center;justify-content:center;height:34px;background:var(--gris);font-size:12px;color:var(--doux);font-weight:500}
.fenetre img{width:100%}
.legende{margin-top:12px;font-size:13px;color:var(--doux);text-align:center}

/* les cartes */
.cartes{display:grid;gap:14px}
.cartes.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartes.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cartes.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.carte-i{display:flex;flex-direction:column;padding:26px;border-radius:var(--r-carte);background:var(--gris);color:var(--encre);transition:transform .25s var(--ease),box-shadow .25s}
.panneau .carte-i{background:#fff}
a.carte-i:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.carte-i .obj{width:52px;margin-bottom:18px}
.carte-i .pic{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;margin-bottom:16px}
.panneau .carte-i .pic{background:var(--gris)}
.carte-i .k{margin-bottom:4px}
.carte-i h3{font-size:19px;line-height:1.25;letter-spacing:-.025em}
.carte-i > p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--texte2)}
.carte-i .ex{margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff;font-size:14px;line-height:1.5;color:var(--encre)}
.panneau .carte-i .ex{background:var(--gris)}
.carte-i .lien{margin-top:auto;padding-top:16px;font-size:14px}
.carte-i.noire{background:var(--noir);color:#fff}
.carte-i.noire h3{color:#fff}
.carte-i.noire .k,.carte-i.noire > p{color:#C9C9D1}
.carte-i.noire .ex{background:rgba(255,255,255,.08);color:#E6E6E6}
.carte-i.noire .lien{color:#fff}
@media (max-width:960px){.cartes.c3,.cartes.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cartes.c2,.cartes.c3,.cartes.c4{grid-template-columns:minmax(0,1fr)}}

/* les tuiles */
.tuiles{display:grid;gap:10px}
.tuiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tuiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tuiles li{display:flex}
.tuiles a{flex:1;position:relative;display:flex;gap:12px;align-items:center;padding:14px 34px 14px 14px;border-radius:var(--r);background:var(--gris);transition:background .2s,transform .2s var(--ease)}
.panneau .tuiles a{background:#fff}
.tuiles a:hover{transform:translateY(-1px);background:var(--gris2)}
.tuiles .obj{width:42px;flex:none}
.tuiles b{display:block;font-size:15px;letter-spacing:-.015em;color:var(--encre)}
.tuiles .tx span{display:block;font-size:13px;color:var(--doux);line-height:1.4;margin-top:2px}
.tuiles .f{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--pale)}
@media (max-width:860px){.tuiles.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tuiles.c3,.tuiles.c2{grid-template-columns:minmax(0,1fr)}}

/* la frise (les étapes) */
.avant{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;background:var(--gris);font-size:14px;font-weight:500;color:var(--encre)}
.panneau .avant{background:#fff}
.avant .ico{width:16px;height:16px}
.frise{position:relative;display:grid;gap:18px;margin-top:30px;text-align:left}
.frise.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.frise.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.frise.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.frise.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.frise::before{content:"";position:absolute;left:4%;right:4%;top:92px;height:2px;background:var(--gris3)}
.frise li{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.frise .obj{width:62px;height:62px;object-fit:contain}
.frise .nn{position:relative;margin-top:14px;width:28px;height:28px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;box-shadow:0 0 0 6px #fff}
.panneau .frise .nn{box-shadow:0 0 0 6px var(--gris)}
.frise h3{margin-top:12px;font-size:18px;letter-spacing:-.025em}
.frise h3 a:hover{opacity:.7}
.frise p{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--texte2)}
@media (max-width:900px){.frise.c4,.frise.c5,.frise.c6,.frise.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.frise::before{display:none}}
@media (max-width:520px){.frise.c4,.frise.c5,.frise.c6,.frise.c3{grid-template-columns:minmax(0,1fr)}}

/* aujourd'hui / avec l'IA : gris, puis noir (note 22 et 24 : plus de rouge) */
.barres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.barre-ex{padding:20px 22px;border-radius:var(--r-carte);background:var(--gris)}
.panneau .barre-ex{background:#fff}
.be-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.be-h b{font-size:16px;letter-spacing:-.02em;color:var(--encre)}
.be-h span{font-size:12.5px;font-weight:600;color:var(--doux)}
.be-l{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:8px}
.be-l small{font-size:12px;color:var(--doux);font-weight:600}
.piste{height:10px;border-radius:99px;background:rgba(0,0,0,.06);overflow:hidden}
.piste i{display:block;height:100%;width:var(--p);border-radius:99px}
.be-l.avant .piste i{background:#BDBDBD}
.be-l.apres .piste i{background:var(--encre)}
.be-l .v{font-size:13.5px;font-weight:700;color:var(--encre);white-space:nowrap}
.be-l.avant .v{color:var(--doux)}
.barres-note{margin-top:14px;font-size:13px;color:var(--doux);text-align:center}
@media (max-width:760px){.barres{grid-template-columns:minmax(0,1fr)}}

/* les chiffres en petites cartes */
.stats{display:grid;gap:12px}
.stats.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:20px;border-radius:var(--r);background:var(--gris);display:flex;flex-direction:column;gap:6px}
.panneau .stat{background:#fff}
.stat .obj{width:38px;margin-bottom:4px}
.stat b{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.05em;line-height:1;color:var(--encre)}
.stat span{font-size:13.5px;line-height:1.4;color:var(--texte2)}
@media (max-width:760px){.stats.c3,.stats.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* les projets */
.pjs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pj{position:relative;display:block;overflow:hidden;border-radius:var(--r-carte);aspect-ratio:4/5;background:var(--noir);color:#fff;isolation:isolate}
.pj .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.pj::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.92))}
.pj:hover .fond{transform:scale(1.04)}
.pj .tx{position:absolute;left:0;right:0;bottom:0;padding:18px}
.pj b{display:block;font-size:18px;letter-spacing:-.03em;color:#fff}
.pj .tx > span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:#D9D9D9}
.pj .tx > .voir{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;font-weight:600;color:#fff}
.pj .voir .ico{width:13px;height:13px}
@media (max-width:760px){.pjs{grid-template-columns:minmax(0,1fr)}.pj{aspect-ratio:16/11}}

/* les questions */
.faq{display:grid;gap:8px;max-width:820px;margin:0 auto}
.faq.deux{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;align-items:start}
.faq details{border-radius:var(--r);background:var(--gris)}
.panneau .faq details{background:#fff}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--encre);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:18px;height:18px;color:var(--doux);transition:transform .25s var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;font-size:15px;line-height:1.6;color:var(--texte2)}
.faq details p a{text-decoration:underline;text-underline-offset:3px;color:var(--encre)}
@media (max-width:760px){.faq.deux{grid-template-columns:minmax(0,1fr)}}

/* la bande (une phrase forte, une citation) */
.bande{max-width:860px;margin:0 auto;text-align:center}
.bande blockquote{font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-.03em;font-weight:600;color:var(--encre);text-wrap:balance}
.bande figcaption{display:inline-flex;align-items:center;gap:12px;margin-top:22px;text-align:left;font-size:14px;color:var(--doux)}
.bande figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 14%;background:var(--noir)}
.bande figcaption b{display:block;color:var(--encre);font-size:15px}

/* à lire aussi */
.a-lire{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(24px,4vw,40px)}
.a-lire .t3{margin-bottom:18px}
.als{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.al{position:relative;display:flex;gap:14px;align-items:center;padding:16px 40px 16px 16px;border-radius:var(--r);background:var(--gris);transition:background .2s,transform .2s var(--ease)}
.al:hover{background:var(--gris2);transform:translateY(-1px)}
.al .obj{width:44px;flex:none}
.al b{display:block;font-size:15.5px;letter-spacing:-.015em;color:var(--encre)}
.al .tx span{display:block;font-size:13.5px;color:var(--doux);line-height:1.4;margin-top:2px}
.al .f{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--pale)}
@media (max-width:860px){.als{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ la fin de page (noire) et le pied */
.fin{margin:clamp(24px,4vw,40px) var(--marge) 0;border-radius:var(--r-panneau);color:#fff;text-align:center;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,#2A2D35 0%,#111216 55%,#0B0B0C 100%)}
.fin .mw{padding-top:clamp(60px,8vw,100px);padding-bottom:clamp(60px,8vw,96px);display:flex;flex-direction:column;align-items:center}
.fin .max{width:clamp(92px,8vw,116px);filter:drop-shadow(0 18px 28px #000);margin-bottom:10px}
.fin .chip{background:rgba(255,255,255,.1);color:#E6E6E6}
.fin .t2{margin-top:16px;color:#fff;max-width:16em}
.fin .chapo{margin:16px auto 0;color:#C9C9D1;max-width:32em}
.fin .boutons{justify-content:center;margin-top:30px}
.fin-mail{margin-top:22px;font-size:14px;color:#A1A1A6}
.fin-mail a{color:#E6E6E6;font-weight:600}
.fin-mail a:hover{color:#fff}
.pied{margin:var(--marge);border-radius:var(--r-panneau);background:var(--noir);color:#A1A1A6;padding:clamp(48px,6vw,80px) 0 26px}
.pied-haut{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.pied .marque{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.pied .marque .logo{display:inline-flex;color:#fff}
.pied .marque .logo svg{height:28px;width:auto}
.pied .marque p{flex:1;min-width:260px;max-width:34em;font-size:15px;line-height:1.55;color:#C9C9D1}
.pied .marque .pied-ph{flex:0 1 auto;min-width:0;text-align:right}   /* note 26 : une phrase claire plutôt qu'une liste (elle peut rétrécir : sinon, elle élargissait la page sur téléphone) */
.pied-ph b{display:block;font-size:17px;letter-spacing:-.025em;color:#fff}
.pied-ph span{display:block;margin-top:4px;font-size:14.5px;color:#A1A1A6}
@media (max-width:700px){.pied .marque .pied-ph{flex:1 1 100%;text-align:left}}
.pied .marque .boutons{margin-top:0}
.pied .cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
.pied h3{font-size:13px;font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:.01em}
.pied ul{display:grid;gap:9px;font-size:14px}
.pied a{color:#C9C9D1;transition:color .2s}
.pied a:hover{color:#fff}
.pied .btn.blanc{color:var(--encre)}
.pied .btn.sombre{color:#fff}
.pied .bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.pied .bas nav{display:flex;gap:18px}
@media (max-width:1000px){.pied .cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.pied .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------------------ accueil : le constat, les métiers, les gains, les preuves, l'analyse */
.constat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:920px;margin:0 auto}
.cst{position:relative;padding:30px 30px 28px;border-radius:var(--r-carte);overflow:hidden;text-align:left}
.cst.a{background:var(--gris)}
.cst.b{background:linear-gradient(160deg,var(--ciel-1),var(--ciel-2) 60%,#F5F9FD)}
.cst .obj{position:absolute;right:22px;top:22px;width:56px}
.cst b{display:block;font-size:clamp(54px,6.4vw,80px);line-height:1;letter-spacing:-.06em;color:var(--encre)}
.cst p{margin-top:12px;font-size:17px;line-height:1.45;color:var(--encre);font-weight:500;max-width:17em}
.constat-fin{margin-top:22px;text-align:center}
.constat-fin .fort{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--encre)}
.constat-fin .source{margin-top:8px}
@media (max-width:700px){.constat{grid-template-columns:minmax(0,1fr)}}
.metiers-a{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);align-items:center}
.metiers-a .t2{margin-top:16px}
.metiers-a .chapo{margin-top:14px}
@media (max-width:960px){.metiers-a{grid-template-columns:minmax(0,1fr)}}
.gains-a{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;align-items:start}
.gains-a .cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gains-a .carte-i{padding:20px}
.gains-a .carte-i .obj{width:42px;margin-bottom:12px}
.gains-a .carte-i h3{font-size:16px}
.gains-a .carte-i > p{font-size:14px;margin-top:6px}
.gains-a .barres{grid-template-columns:minmax(0,1fr);gap:10px}
.gains-a .barre-ex{padding:16px 20px}
@media (max-width:960px){.gains-a{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.gains-a .cartes{grid-template-columns:minmax(0,1fr)}}
.preuves-a{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:center}
.preuves-a .t2{margin-top:16px}
.preuves-a .stats{margin-top:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.preuves-a .stat{padding:16px}
.preuves-a .stat b{font-size:26px}
.preuves-a .boutons{margin-top:24px}
@media (max-width:960px){.preuves-a{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.preuves-a .stats{grid-template-columns:minmax(0,1fr)}}
.tom{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:14px;color:var(--texte2)}
.tom img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 14%;background:var(--noir)}
.tom b{color:var(--encre)}
.doc-img{display:block;border-radius:20px;overflow:hidden;box-shadow:var(--ombre-forte);background:#fff}
.doc-img img{width:100%}
.etapes3{display:grid;gap:12px;margin-top:22px;counter-reset:n}
.etapes3 li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:15.5px;line-height:1.5;color:var(--encre)}
.etapes3 li::before{counter-increment:n;content:counter(n);width:28px;height:28px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.diff{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--gris);font-size:14.5px;line-height:1.5;color:var(--texte2)}
.panneau .diff{background:#fff}
.diff b{color:var(--encre)}
.espace-a .capture{max-width:880px;margin:0 auto}
.espace-a .cartes{margin-top:22px}

/* ------------------------------------------------------------------ les quinze familles (on clique) */
.agit{display:grid;grid-template-columns:290px minmax(0,1fr);gap:10px;padding:10px;border-radius:28px;background:var(--gris)}
.agit-liste{padding:12px 6px 12px 10px}
.agit-g + .agit-g{margin-top:10px}
.agit-g > p{font-size:12px;font-weight:700;color:var(--doux);padding:0 10px 4px}
.agit-liste button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 10px;border-radius:11px;font-size:14px;font-weight:600;color:var(--encre);transition:background .15s}
.agit-liste button:hover{background:rgba(255,255,255,.65)}
.agit-liste button[aria-selected="true"]{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.06)}
.agit-liste button img{width:22px;height:22px;object-fit:contain}
.agit-p{background:#fff;border-radius:22px;padding:clamp(22px,3vw,34px);box-shadow:var(--ombre)}
.js .agit-p:not(.on){display:none}
.agit-p + .agit-p{margin-top:10px}
.js .agit-p + .agit-p{margin-top:0}
.agit-h{display:flex;align-items:center;gap:16px}
.agit-h .obj{width:54px}
.agit-h h3{font-size:23px;letter-spacing:-.035em;line-height:1.15}
.agit-p ul{display:grid;gap:10px;margin-top:20px}
.agit-p li{padding:15px 18px;border-radius:16px;background:var(--gris);font-size:15px;line-height:1.55;color:var(--encre)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tags span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--texte2);background:#fff;padding:4px 9px;border-radius:8px}
.tags .ico{width:13px;height:13px;color:var(--encre)}
.agit-p .plus{margin-top:16px;font-size:14px;color:var(--doux)}
@media (max-width:860px){
  .agit{grid-template-columns:minmax(0,1fr)}
  .agit-liste{display:flex;gap:6px;overflow-x:auto;padding:4px 4px 6px;scrollbar-width:none}
  .agit-liste::-webkit-scrollbar{display:none}
  .agit-g{display:contents}
  .agit-g > p{display:none}
  .agit-liste button{width:auto;white-space:nowrap;flex:none;background:rgba(255,255,255,.6)}
  .agit-liste button img{display:none}
}

/* ------------------------------------------------------------------ le zigzag (les étapes de la méthode) */
.zz{display:grid;gap:clamp(48px,7vw,88px)}
.zz-e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.zz-e:nth-child(even) .zz-t{order:2}
.zz-v{position:relative;display:grid;place-items:center;min-height:300px;border-radius:28px;overflow:hidden}
.zz-v .obj{width:clamp(120px,14vw,170px)}
.zz-v .nn{position:absolute;left:22px;top:22px;width:34px;height:34px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.zz-t .t2{margin-top:14px;font-size:clamp(26px,3vw,36px)}
.zz-t .chapo{margin-top:12px}
.zz-t .recu{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--gris);font-size:14.5px;line-height:1.5;color:var(--encre)}
.zz-t .recu b{display:block;font-size:13px;color:var(--encre);margin-bottom:4px}
@media (max-width:860px){.zz-e{grid-template-columns:minmax(0,1fr)}.zz-e:nth-child(even) .zz-t{order:0}.zz-v{min-height:200px}}

/* ------------------------------------------------------------------ le profil, les logos, les garanties */
.profil{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,3.4vw,40px);padding:clamp(24px,3vw,36px);border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);align-items:start}
.profil .photo{border-radius:20px;overflow:hidden;background:var(--noir);aspect-ratio:1}
.profil .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.profil h3{font-size:26px;letter-spacing:-.035em}
.profil .roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.profil .roles span{font-size:13px;font-weight:600;padding:5px 11px;border-radius:99px;background:var(--gris)}
.profil .texte{margin-top:16px;max-width:42em}
.profil .liens-p{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
@media (max-width:700px){.profil{grid-template-columns:minmax(0,1fr)}.profil .photo{max-width:180px}}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.logos a{display:flex;align-items:center;justify-content:center;height:58px;padding:0 18px;border-radius:14px;background:var(--gris);transition:background .2s}
.logos a:hover{background:var(--gris2)}
.logos img{max-height:26px;width:auto}
.logos img.carre{max-height:38px;border-radius:9px}
.logos .mot{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--encre)}
.garanties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;padding:clamp(22px,3vw,32px);border-radius:var(--r-carte);background:#fff}
.garantie{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 0}
.garantie .ico{width:20px;height:20px}
.garantie b{display:block;font-size:15.5px;letter-spacing:-.015em;color:var(--encre)}
.garantie span{display:block;font-size:14.5px;line-height:1.5;color:var(--texte2);margin-top:2px}
.garanties .note{grid-column:1/-1;font-size:13px;color:var(--doux);padding-top:8px}
@media (max-width:760px){.garanties{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ les réalisations */
.sommaire{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.sommaire a{padding:8px 15px;border-radius:99px;background:rgba(255,255,255,.88);font-size:14px;font-weight:600;color:var(--encre)}
.sommaire a:hover{background:#fff}
.projet{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,64px);align-items:center;padding:clamp(40px,5vw,64px) 0}
.projet + .projet{border-top:1px solid var(--gris2)}
.projet.inverse .projet-tx{order:2}
.projet .logo-p{height:30px;display:flex;align-items:center;margin-bottom:18px}
.projet .logo-p img{max-height:30px;width:auto}
.projet .logo-p img.carre{max-height:44px;border-radius:12px}
.projet h2{margin-top:8px;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.04em;line-height:1.1}
.projet .texte{margin-top:14px}
.projet .stats-p{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.projet .stats-p span{padding:10px 14px;border-radius:14px;background:var(--gris);font-size:13.5px;color:var(--texte2)}
.projet .stats-p b{display:block;font-size:19px;color:var(--encre);letter-spacing:-.03em}
.projet .prouve{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--gris);font-size:14.5px;line-height:1.55;color:var(--texte2)}
.projet .prouve b{color:var(--encre)}
.projet-media{position:relative;border-radius:var(--r-carte);overflow:hidden;background:var(--gris);aspect-ratio:16/11;display:grid;place-items:center}
.projet-media.sombre{background:var(--noir)}
.projet-media .couv,.projet-media video{width:100%;height:100%;object-fit:cover}
.projet-media .tels{display:flex;gap:12px;justify-content:center;align-items:center;padding:24px;height:100%}
.projet-media .tels img{width:30%;max-width:170px;border-radius:20px;box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}
.projet-media .tels img:nth-child(2){transform:translateY(-12px)}
@media (max-width:860px){.projet{grid-template-columns:minmax(0,1fr)}.projet.inverse .projet-tx{order:0}}

/* ------------------------------------------------------------------ un document posé dans la page (l'analyse, le rapport) */
.doc-page{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.doc-som{position:sticky;top:100px;padding:16px;border-radius:var(--r);background:var(--gris)}
.doc-som p{font-size:12px;font-weight:700;color:var(--doux);margin-bottom:8px}
.doc-som a{display:block;padding:6px 8px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--encre);line-height:1.35}
.doc-som a:hover{background:#fff}
.doc-corps{min-width:0;border-radius:24px;overflow:hidden;box-shadow:var(--ombre)}
@media (max-width:900px){.doc-page{grid-template-columns:minmax(0,1fr)}.doc-som{position:static}}

/* ------------------------------------------------------------------ réserver un appel : trois créneaux */
.rdv{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:start}
.creneaux{padding:clamp(22px,3vw,32px);border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre)}
.creneaux h2{font-size:20px;letter-spacing:-.025em}
.creneaux .petit{margin-top:4px}
.cr-liste{display:grid;gap:10px;margin-top:18px}
.cr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:16px;background:var(--gris);transition:background .2s,transform .2s var(--ease)}
.cr:hover{background:var(--gris2);transform:translateY(-1px)}
.cr b{display:block;font-size:16px;letter-spacing:-.015em;color:var(--encre)}
.cr span{display:block;font-size:14px;color:var(--texte2);margin-top:2px}
.cr .go{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;background:var(--encre);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;margin:0}
.cr .go .ico{width:14px;height:14px}
.cr-attente{padding:18px;border-radius:16px;background:var(--gris);font-size:14.5px;color:var(--texte2)}
.cr-tous{margin-top:14px}
.cal-zone{margin-top:16px;border-radius:18px;overflow:hidden;background:#fff}
.cal-zone[hidden]{display:none}
#cal-inline{min-height:600px}
.rdv-cote{display:grid;gap:12px}
.rdv-cote .bloc-g{padding:22px;border-radius:var(--r-carte);background:var(--gris)}
.rdv-cote h2{font-size:17px;letter-spacing:-.02em;margin-bottom:12px}
.qui{display:flex;gap:12px;align-items:center}
.qui img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 14%;background:var(--noir)}
.qui b{display:block;font-size:15px}
.qui span{font-size:13px;color:var(--doux)}
@media (max-width:900px){.rdv{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ le blog */
.articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:940px;margin-left:auto;margin-right:auto}
.article-c{display:flex;flex-direction:column;padding:24px;border-radius:var(--r-carte);background:var(--gris);transition:transform .2s var(--ease),box-shadow .2s}
.article-c:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.article-c .obj{width:50px;margin-bottom:16px}
.article-c .k{margin-bottom:6px}
.article-c h3{font-size:19px;line-height:1.25;letter-spacing:-.025em}
.article-c p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--texte2)}
.article-c .lien{margin-top:auto;padding-top:16px;font-size:14px}
@media (max-width:900px){.articles{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ les pages de texte (articles, vos données, mentions légales) */
.prose{max-width:740px;margin:0 auto}
.prose h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em;margin:46px 0 14px;color:var(--encre)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;letter-spacing:-.02em;margin:26px 0 8px;color:var(--encre)}
.prose p,.prose li{font-size:16.5px;line-height:1.7;color:var(--texte2)}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{display:grid;gap:8px;margin:14px 0}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--encre)}
.prose ol{counter-reset:o}
.prose ol li{counter-increment:o;position:relative;padding-left:32px}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:.25em;width:22px;height:22px;border-radius:50%;background:var(--encre);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.prose a{color:var(--encre);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose b,.prose strong{color:var(--encre)}
.prose .encadre{margin:18px 0;padding:18px 20px;border-radius:var(--r);background:var(--gris)}
.prose .encadre p{font-size:15.5px}
.a-confirmer{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:4px 9px;border-radius:7px;background:#E8912D;color:#fff;vertical-align:middle;margin-left:6px}
.bloc-confirmer{margin:16px 0;padding:18px 20px;border-radius:var(--r);background:var(--gris)}
.bloc-confirmer .a-confirmer{margin:0 0 8px}
.prose .resume{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0}
.prose .resume div{padding:16px;border-radius:var(--r);background:var(--gris)}
.prose .resume b{display:block;font-size:15px;color:var(--encre);margin-bottom:4px}
.prose .resume span{font-size:14px;color:var(--texte2);line-height:1.45}
@media (max-width:640px){.prose .resume{grid-template-columns:minmax(0,1fr)}}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:18px;font-size:14px;color:var(--doux)}
.p404 .haut-in{min-height:min(70vh,720px);display:flex;align-items:center;justify-content:center}

/* ------------------------------------------------------------------ apparition douce (seulement si le JS tourne) */
.js [data-r]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-r].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-r]{opacity:1;transform:none;transition:none}}
.sec .mw > .entete.centre ~ .renvoi,.sec .mw > .entete.centre ~ * .renvoi{text-align:center}
/* les lignes « Aujourd'hui » des barres ne prennent pas le style de la pastille « avant » de la frise */
.be-l.avant,.panneau .be-l.avant{display:grid;gap:10px;padding:0;background:none;border-radius:0;font-size:inherit;font-weight:inherit;margin:8px 0 0}

/* ===================== retouches après la relecture visuelle (14/11) ===================== */
/* le haut : MAX et l'objet à des tailles proches, à la même hauteur */
.haut .cote.gauche,.haut .cote.droite{top:clamp(176px,17vw,214px);bottom:auto}
.haut .cote .max{width:clamp(88px,8.4vw,118px)}
.haut .cote .obj:not(.max){width:clamp(60px,6vw,82px)}
.haut-c .chapo{text-wrap:balance}
/* pas de couleur d'ambiance au milieu des pages : les visuels du zigzag sur un gris uni */
.zz-v,.zz-v[class*="amb-"]{background:var(--gris)!important;min-height:240px}
.zz-v .obj{width:clamp(96px,10vw,124px)!important}
/* la fin noire et le pied se suivent sans couture */
.fin .max{margin-bottom:20px}
main:has(> .fin:last-child) + .pied{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
main > .fin:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}
main > .fin:last-child + * {margin-top:0}
.pied .marque{padding-top:8px}
/* les barres : la piste a toujours la même longueur, la valeur a sa colonne */
.be-l{grid-template-columns:82px minmax(0,1fr) 112px}
.be-l .v{text-align:right;white-space:normal;line-height:1.25}
@media (max-width:560px){.be-l{grid-template-columns:62px minmax(0,1fr) 88px}.be-l .v{font-size:12.5px}.be-l small{font-size:12px}}
/* les grands chiffres gardent leurs espaces */
.stat b,.cst b{letter-spacing:-.025em}
/* deux sections blanches qui se suivent : moins de vide entre elles */
.sec:not(.panneau):not(.a-lire) + .sec:not(.panneau):not(.a-lire){padding-top:clamp(20px,3vw,36px)}
/* l'accueil : les cartes des gains à la hauteur des barres, le titre des métiers plus court */
.gains-a{align-items:stretch}
.gains-a .cartes{grid-auto-rows:1fr}
.metiers-a .t2{font-size:clamp(28px,3vw,38px)}
/* les exemples posés dans la page : repliés, « Lire tout l'exemple » les déplie (pas de défilement intérieur) */
.doc-corps.replie{max-height:1500px;overflow:hidden;position:relative}
.doc-corps.replie::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%)}
.doc-lire{display:flex;justify-content:center;margin-top:-28px;position:relative;z-index:2}
.doc-lire[hidden]{display:none}
.doc-som summary{display:none;list-style:none;font-size:14px;font-weight:700;cursor:pointer}
.doc-som summary::-webkit-details-marker{display:none}
@media (max-width:900px){.doc-som summary{display:block}.doc-corps.replie{max-height:1100px}}
/* la 404, le menu du téléphone */
.p404 .obj{width:110px;margin-bottom:16px}
.menu .boutons .btn{font-size:14px;padding:10px 12px}

/* ------------------------------------------------------------------ 14/11 (note 20 de Tom) */
/* le logo à la place du mot dans une phrase (« Pourquoi bemyia ») */
.lg-mot{display:inline-block;height:1.12em;width:auto;vertical-align:-.27em;color:inherit}
/* la grille des métiers et les quinze familles : quand un lien du menu y mène, le haut reste sous la barre */
[data-agit]{scroll-margin-top:110px}
/* les étoiles de Malt : toujours en jaune */
.etoiles,.stat .etoiles,.lien .etoiles{color:#F5B301;letter-spacing:.04em}

/* ------------------------------------------------------------------ 14/11 (note 21) : les hauts de page en version A
   Toute la hauteur de l'écran, le titre au milieu, la couleur de la catégorie en haut qui descend vers le gris ;
   l'accueil : du gris en haut vers le blanc. MAX dans son rôle à gauche, un objet plus grand à droite, posés en bas. */
.haut{min-height:calc(100svh - var(--marge));display:flex;flex-direction:column}
.haut.petit{min-height:0}
.haut-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(120px,12vw,150px);padding-bottom:clamp(80px,9vw,120px)}
.haut.petit .haut-in{flex:none}
.haut-c .t1{margin-top:22px;font-size:clamp(40px,5.6vw,78px);line-height:1.01;letter-spacing:-.05em;max-width:13em}
.haut.petit .haut-c .t1{font-size:clamp(34px,4.4vw,58px)}
.haut-c .chapo{margin-top:22px;font-size:clamp(17px,1.5vw,20.5px);line-height:1.5;max-width:38em}
.haut-c .boutons{margin-top:32px}
.amb-ciel{background:linear-gradient(180deg,var(--ciel-2) 0%,var(--gris) 58%)}
.amb-sauge{background:linear-gradient(180deg,var(--sauge-2) 0%,var(--gris) 58%)}
.amb-ardoise{background:linear-gradient(180deg,var(--ardoise-2) 0%,var(--gris) 58%)}
.amb-sable{background:linear-gradient(180deg,var(--sable-2) 0%,var(--gris) 58%)}
.amb-peche{background:linear-gradient(180deg,var(--peche-2) 0%,var(--gris) 58%)}
.amb-gris{background:linear-gradient(180deg,#EBEBEB 0%,var(--gris) 35%,#fff 100%)}
.haut .notes span,.haut .parcours a{background:#fff}
.haut .cote.gauche,.haut .cote.droite{top:auto}
.haut .cote.gauche{left:clamp(16px,5vw,90px);bottom:0}
.haut .cote.droite{right:clamp(16px,5vw,90px);bottom:clamp(40px,5vw,84px)}
.haut .cote .max{width:clamp(150px,16vw,240px);height:auto}
.haut .cote .obj:not(.max){width:clamp(100px,11vw,170px);height:auto}
.haut .cote.droite .max{width:clamp(140px,15vw,220px)}
.haut .cote.droite:has(.max){bottom:0}
@media (max-width:900px){
  .haut .cote.droite{display:none}
  .haut .cote.gauche{display:block;left:50%;transform:translateX(-50%)}
  .haut .cote .max{width:150px}
  .haut:has(.cote.gauche) .haut-in{padding-bottom:190px}
}

/* ------------------------------------------------------------------ 14/11 (note 22) */
/* la petite mention d'une carte devient une pastille en haut à droite quand la carte a un objet ; sinon, une pastille au-dessus du titre */
.carte-i{position:relative}
.carte-i > .k{align-self:flex-start;margin:0 0 10px;padding:5px 11px;border-radius:99px;background:#fff;font-size:12px;font-weight:600;line-height:1.3;color:var(--encre)}
.panneau .carte-i > .k{background:var(--gris)}
.carte-i:has(> .obj) > .k{position:absolute;top:22px;right:22px;margin:0;max-width:55%;text-align:right}
.carte-i.noire > .k{background:rgba(255,255,255,.12);color:#fff}

/* ------------------------------------------------------------------ L'accueil (note 21) : « Notre objectif », la fin « Le travail change » */
.ob-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
.ob-c{padding:24px 22px 22px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--encre);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ob-c:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte)}
.ob-o{height:68px;display:flex;align-items:flex-end;margin-bottom:8px}
.ob-o .obj{width:auto;height:64px;max-width:76px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 10px 14px rgba(0,0,0,.12))}
.ob-c h3{font-size:21px;letter-spacing:-.03em;line-height:1.15}
.ob-c p{font-size:14.5px;line-height:1.45;color:var(--texte2)}
.ob-c .ob-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.ob-tags span{padding:5px 10px;border-radius:9px;background:var(--gris);font-size:12.5px;font-weight:600;color:var(--encre)}
.ob-c .lien{margin-top:10px;font-size:14px}
.ob-sr{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;font-size:15px;color:var(--texte2);text-align:left}
.ob-sr .ico{width:20px;height:20px;flex:none;color:var(--encre)}
.ob-sr b{color:var(--encre)}
@media (max-width:1000px){.ob-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ob-4{grid-template-columns:minmax(0,1fr)}.ob-sr{align-items:flex-start;justify-content:flex-start}}

/* la fin de l'accueil : la carte noire « Le travail change » */
.fin.tc .t2{max-width:13em;font-size:clamp(32px,4.4vw,56px);line-height:1.03;letter-spacing:-.05em;color:#fff}
.tc-mots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;max-width:900px}
.tc-mots span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.08);font-size:16px;font-weight:600;color:#fff}
.tc-mots .ico{width:18px;height:18px}
.fin.tc .chapo{margin-top:26px;color:rgba(255,255,255,.72);max-width:36em;text-wrap:balance;text-align:center}
@media (max-width:560px){.tc-mots{gap:8px}.tc-mots span{padding:9px 12px;font-size:14.5px}}
/* « Notre objectif » (note 22 : le haut des cartes trop fade) : l'objet posé sur une tuile grise */
.ob-o{width:76px;height:76px;border-radius:20px;background:var(--gris);display:grid;place-items:center;margin-bottom:12px}
.ob-o .obj{height:56px;max-width:60px;object-position:center}

/* ------------------------------------------------------------------ le haut de l'accueil (notes 21 et 22) : toute la hauteur, le titre plus haut,
   le petit MAX qui parle à gauche, MAX au travail à droite, la bande des preuves visible dès l'arrivée */
.ha{position:relative;margin:var(--marge) var(--marge) 0;border-radius:var(--r-panneau);overflow:hidden;min-height:calc(100svh - var(--marge));display:flex;flex-direction:column;background:linear-gradient(180deg,#E8E8E8 0%,#F1F1F1 40%,#fff 92%)}
.ha-c{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(116px,14vh,150px)}
.ha .t1{margin-top:20px;font-size:clamp(40px,5.6vw,80px);line-height:1.01;letter-spacing:-.05em;max-width:12.5em;text-wrap:balance}
.ha .chapo{margin-top:20px;font-size:clamp(17px,1.5vw,20.5px);line-height:1.5;max-width:36em;text-wrap:balance}
.ha .boutons{margin-top:30px;justify-content:center}
.ha .notes{margin-top:22px}
.ha .notes span{background:#fff}
.ha-max{position:absolute;height:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.18));pointer-events:none}
.ha-max{z-index:0}
.ha-c{z-index:1}
.ha-max.g{left:clamp(16px,4vw,90px);top:clamp(230px,30vh,320px);width:clamp(110px,10.5vw,190px)}
.ha-max.d{right:clamp(16px,4vw,90px);top:clamp(170px,22vh,250px);width:clamp(140px,13vw,230px)}
.ha-pv{margin-top:auto;padding:clamp(20px,4vh,44px) 0 clamp(14px,2vh,24px)}
.ha-pv-t{text-align:center;font-size:13px;font-weight:700;color:var(--doux)}
.ha-defile{overflow:hidden;padding:16px 0 22px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.ha-rail{display:flex;gap:14px;width:max-content;padding:0 7px;animation:ha-def 70s linear infinite}
.ha-dbl{display:contents}
.ha-defile:hover .ha-rail{animation-play-state:paused}
@keyframes ha-def{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ha-rail{animation:none}.ha-defile{overflow-x:auto}}
.pv-k{flex:none;width:248px;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;color:var(--encre);transition:transform .2s var(--ease)}
.pv-k:hover{transform:translateY(-3px)}
.pv-k b{font-size:27px;letter-spacing:-.045em;line-height:1}
.pv-k span{font-size:13.5px;line-height:1.4}
/* les photos : la photo en haut, le chiffre dessous, sur une carte blanche */
.pv-k.photo{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 36px -18px rgba(0,0,0,.22)}
.pv-k .k-img{position:relative;display:block;height:118px;overflow:hidden;background:#111}
.pv-k .k-img img{width:100%;height:100%;object-fit:cover;display:block}
.pv-k .k-img .k-logo{position:absolute;left:12px;bottom:10px;height:20px;display:flex;align-items:center}
.pv-k .k-img .k-logo img{width:auto;height:auto;max-height:18px;max-width:84px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.pv-k .k-img .k-logo img.carre{max-height:26px;border-radius:7px}
.pv-k .k-tx{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px}
.pv-k.photo .k-tx span{color:var(--texte2)}
/* noires : le logo en blanc */
.pv-k.noir{padding:18px;min-height:150px;gap:6px;background:linear-gradient(180deg,#1C1D21,#0B0B0C);box-shadow:0 16px 36px -18px rgba(0,0,0,.45)}
.pv-k.noir .k-logo{height:22px;display:flex;align-items:center;margin-bottom:auto}
.pv-k.noir .k-logo img{max-height:20px;width:auto;max-width:90px;object-fit:contain}
.pv-k.noir .k-logo img.carre{max-height:28px;border-radius:7px}
.pv-k.noir b{margin-top:18px;color:#fff}
.pv-k.noir span{color:rgba(255,255,255,.68)}
/* le logo seul, sur une carte blanche */
.pv-k.logo{padding:18px;min-height:150px;gap:6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 36px -18px rgba(0,0,0,.22)}
.pv-k.logo .k-logo{height:22px;display:flex;align-items:center;margin-bottom:auto}
.pv-k.logo .k-logo img{max-height:18px;width:auto;max-width:84px;object-fit:contain}
.pv-k.logo .k-logo img.carre{max-height:28px;border-radius:7px}
.pv-k.logo b{margin-top:18px}
.pv-k.logo span{color:var(--texte2)}
/* le haut en noir (test) */
@media (max-width:900px){
  .ha-max{display:none}
  .ha-c{padding-top:112px}
  .ha .boutons{flex-direction:column;align-items:center;width:100%;max-width:420px}
  .ha .boutons .btn.noir,.ha .boutons .btn.blanc{width:100%;justify-content:center}
  .ha-rail{animation:none}
  .ha-defile{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding:12px var(--cote) 22px;scrollbar-width:none}
  .ha-defile::-webkit-scrollbar{display:none}
  .ha-dbl{display:none}
  .pv-k{width:236px;scroll-snap-align:start}
}

/* ------------------------------------------------------------------ la méthode en quatre cartes, dans un conteneur gris (note 22) */
.me4-avant{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px auto 0;font-size:14.5px;font-weight:600;color:var(--encre)}
.me4-avant .ico{width:17px;height:17px}
.me4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.me4-c{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);color:var(--encre);transition:transform .2s var(--ease)}
.me4-c:hover{transform:translateY(-2px)}
.me4-n{position:absolute;top:20px;right:20px;width:28px;height:28px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.me4-c .obj{width:auto;height:60px;max-width:70px;object-fit:contain;object-position:left bottom;margin-bottom:8px}
.me4-c h3{font-size:20px;letter-spacing:-.03em}
.me4-c p{font-size:14.5px;line-height:1.45;color:var(--texte2)}
.me4-c .lien{margin-top:auto;padding-top:8px;font-size:14px}
@media (max-width:900px){.me4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.me4{grid-template-columns:minmax(0,1fr)}}
/* pourquoi nous : quatre chiffres, puis les deux boutons au centre */
#preuves .stats{margin-top:34px}
#preuves .stat .obj{width:auto;height:44px;max-width:56px;object-fit:contain;object-position:left center}
.centre-b{justify-content:center}

@media (max-width:600px){.ha .notes{flex-direction:column;align-items:center;gap:6px}}   /* note 26 : plus en escalier sur tablette */

/* ------------------------------------------------------------------ L'accueil v6 (note 24 de Tom, 14/11 nuit)
   Le haut au bleu ciel très doux (celui de la v5 du 13/11), la bande des logos et des chiffres qui défile ; « L'IA prépare » en noir avec
   un visuel concret (trois versions) ; les gains en colonnes ou en grands chiffres ; « Pourquoi nous » et d'autres cartes derrière ;
   un aperçu net de l'analyse. Dans les scènes en noir : le sombre pour ce qui entre et ce qui tourne, le blanc pour les documents prêts ;
   la couleur seulement pour un sens (vert : fait, ambre : prévu ou à valider, bleu : en cours). */

/* le haut */
.ha.ha-ciel{background:linear-gradient(180deg,#D4E5F6 0%,#E7F0F9 42%,#fff 94%)}
.ha.ha-ciel .notes span{background:rgba(255,255,255,.85)}

/* la bande des preuves : logos et chiffres, qui défilent seuls */
.bl{position:relative;z-index:1;margin-top:auto;padding:clamp(20px,4vh,40px) 0 clamp(18px,2.6vh,28px)}
.bl-t{text-align:center;font-size:13.5px;font-weight:600;color:var(--texte2)}
.bl-defile{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.bl-rail{display:flex;width:max-content;animation:bl-def 64s linear infinite}
.bl-rail ul{display:flex;flex:none}
.bl-defile:hover .bl-rail,.bl-defile:focus-within .bl-rail{animation-play-state:paused}
@keyframes bl-def{to{transform:translateX(-50%)}}
.bl li a{display:flex;align-items:center;gap:16px;padding:6px 36px;color:var(--encre);border-left:1px solid rgba(0,0,0,.08);transition:opacity .2s}
.bl li a:hover{opacity:.7}
.bl-logo{display:flex;align-items:center;justify-content:center;width:84px;height:46px;flex:none}
.bl-logo img{max-height:26px;width:auto;max-width:92px;object-fit:contain}
.bl-logo img.carre{max-height:44px;max-width:44px;border-radius:11px}
.bl-tx{display:flex;flex-direction:column;line-height:1.25}
.bl-tx b{font-size:24px;letter-spacing:-.045em;font-weight:700}
.bl-tx span{margin-top:2px;font-size:13.5px;color:var(--texte2);white-space:nowrap}
.bl-logo img[src*="logo-resto"]{max-height:44px;max-width:92px}
.bl-tx small{margin-top:3px;font-size:12px;font-weight:600;color:var(--doux)}
@media (prefers-reduced-motion:reduce){.bl-rail{animation:none}.bl-defile{overflow-x:auto}.bl-rail ul[inert]{display:none}}
@media (max-width:900px){
  .bl-rail{animation-duration:44s}
  .bl li a{padding:4px 22px;gap:12px}
  .bl-tx b{font-size:21px}
}

/* « L'IA prépare » en noir : les cases */
.sec-noire{background:radial-gradient(90% 60% at 50% 0%,#24262C 0%,#121317 55%,#0B0B0C 100%);color:#fff;margin-left:var(--marge);margin-right:var(--marge);border-radius:var(--r-panneau)}
.sec-noire .chip{background:rgba(255,255,255,.12);color:#fff}
.sec-noire .t2,.sec-noire h3{color:#fff}
.sec-noire .entete .chapo{color:#C9C9D1}
.sec-noire .renvoi .btn.gris{background:rgba(255,255,255,.12);color:#fff}
.sec-noire .renvoi .btn.gris:hover{background:rgba(255,255,255,.2)}
.sec-noire .renvoi{text-align:center}
.bt,.b6,.bf-g,.bf-f{position:relative;border-radius:24px;background:linear-gradient(180deg,#232429 0%,#1A1B1F 100%);color:#fff;overflow:hidden}
a.bt,a.b6,a.bf-f{transition:transform .3s var(--ease),background .3s}
a.bt:hover,a.b6:hover,a.bf-f:hover{transform:translateY(-3px);background:linear-gradient(180deg,#292A30 0%,#1E1F23 100%)}
.bt-k{font-size:13px;font-weight:600;color:#A1A1A6}
.bt-h{display:flex;align-items:center;gap:10px}
.bt-heure{padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.1);font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

/* version 1 : une journée */
.bento-j{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b b" "c d e" "f f e";gap:14px;margin-top:clamp(32px,4vw,52px)}
.bt{display:flex;flex-direction:column;gap:12px;padding:22px}
.bt-a{grid-area:a}.bt-b{grid-area:b}.bt-c{grid-area:c}.bt-d{grid-area:d}.bt-e{grid-area:e}.bt-f{grid-area:f}
.bt h3{font-size:19px;line-height:1.25;letter-spacing:-.025em;max-width:21em;text-wrap:balance}
.bt .sc{margin-top:6px}
.bt-obj{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 0}
.bt-obj .obj{width:132px;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.bt-e .sc{margin-top:0}

/* version 2 : six cartes */
.bento-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,52px)}
.b6{display:flex;flex-direction:column;gap:6px;padding:22px}
.b6 h3{margin-top:4px;font-size:19px;line-height:1.25;letter-spacing:-.025em}
.b6 > p{font-size:14.5px;line-height:1.45;color:#A1A1A6}
.b6 .sc{margin-top:12px}
.b6 .sc-devis{grid-template-columns:minmax(0,1fr)}
.b6 .sc-devis .sc-mail{display:none}
.b6 .sc-devis .sc-cmd{justify-self:start}

/* version 3 : les skills par service, et les trois façons */
.bento-f{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-top:clamp(32px,4vw,52px)}
.bf-g{padding:24px}
.bf-t{font-size:13px;font-weight:600;color:#A1A1A6}
.bf-g ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.bf-g li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:18px;background:rgba(255,255,255,.05)}
.bf-g li .obj{width:48px;height:48px;object-fit:contain;margin-bottom:4px}
.bf-g li b{font-size:15.5px;letter-spacing:-.02em}
.bf-g li span{font-size:13px;line-height:1.35;color:#C9C9D1}
.bf-g li span::before{content:"/";margin-right:5px;color:#6E6E73;font-weight:700}
.bf-d{display:flex;flex-direction:column;gap:14px}
.bf-f{flex:1;display:flex;align-items:center;gap:16px;padding:22px}
.bf-f .pic{width:46px;height:46px;border-radius:14px;background:#fff;color:var(--encre);display:grid;place-items:center;flex:none}
.bf-f .pic .ico{width:20px;height:20px}
.bf-f .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bf-f .tx b{font-size:17.5px;letter-spacing:-.025em}
.bf-f .tx > span:last-child{font-size:14px;color:#A1A1A6}
.bf-f .f{width:16px;height:16px;color:#6E6E73;flex:none}

/* les scènes */
.sc-h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#C9C9D1}
.sc-h .ico{width:15px;height:15px}
.sc-devis{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.sc-mail{padding:14px;border-radius:16px;background:rgba(255,255,255,.07)}
.sc-mail p{margin-top:8px;font-size:14px;line-height:1.45;color:#E6E6E6}
.sc-cmd{display:inline-flex;align-items:center;gap:6px;justify-self:center;padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:700}
.sc-cmd .ico{width:14px;height:14px}
.sc-doc{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:16px;background:#fff;color:var(--encre);box-shadow:0 24px 40px -24px rgba(0,0,0,.7)}
.sc-doc .sc-h{color:var(--encre);margin-bottom:3px}
.sc-doc i{display:block;height:7px;border-radius:4px;background:#ECECEC}
.sc-doc i.c{width:58%}
.sc-ok,.sc-v{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#1E8E4E}
.sc-ok{margin-top:5px}
.sc-ok .ico,.sc-v .ico{width:14px;height:14px}
.sc-semaine{display:flex;flex-direction:column;gap:6px}
.sc-semaine li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q et" "b et";align-items:center;column-gap:12px;row-gap:1px;padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.06)}
.sc-semaine .q{grid-area:q;font-size:12px;font-weight:600;color:#A1A1A6;font-variant-numeric:tabular-nums}
.sc-semaine b{grid-area:b;font-size:14px;line-height:1.3;font-weight:600;color:#fff}
.sc-semaine .et{grid-area:et;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#7ED8A0}
.sc-semaine .prevu .et{color:#F2C26B}
.sc-semaine .et .ico{width:14px;height:14px}
.sc-agent{padding:16px;border-radius:16px;background:rgba(255,255,255,.06)}
.sc-prog{display:block;height:6px;margin:12px 0 14px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.sc-prog i{display:block;height:100%;width:78%;border-radius:3px;background:linear-gradient(90deg,#7FB2F0,#7ED8A0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.js .bt:not(.vu) .sc-prog i,.js .b6:not(.vu) .sc-prog i{transform:scaleX(0)}
.sc-agent ol{display:flex;flex-direction:column;gap:9px}
.sc-agent li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#E6E6E6}
.sc-agent li .ico{width:16px;height:16px;color:#7ED8A0}
.sc-agent li.attente{margin-top:3px;padding:9px 12px;border-radius:12px;background:#fff;color:var(--encre);font-weight:600}
.sc-agent li.attente .ico{color:#C27C0E}
.sc-relies{display:flex;align-items:center;gap:6px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06)}
.sc-relies .obj{width:54px;height:54px;object-fit:contain;flex:none}
.sc-fil{position:relative;flex:1;height:2px;border-radius:1px;background:rgba(255,255,255,.14)}
.sc-fil i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#7FB2F0;animation:sc-fil 2.6s var(--ease) infinite}
.sc-fil:nth-of-type(2) i{animation-delay:1.3s}
@keyframes sc-fil{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.sc-process{padding:14px;border-radius:16px;background:#fff;color:var(--encre);box-shadow:0 24px 40px -24px rgba(0,0,0,.7)}
.sc-process .sc-h{color:var(--encre)}
.sc-process ol{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.sc-process li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.35;color:var(--texte2)}
.sc-process li span{width:20px;height:20px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.sc-valide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sc-valide li{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;background:#fff;color:var(--encre)}
.sc-valide .tx b{display:block;font-size:14px;line-height:1.3;letter-spacing:-.01em}
.sc-valide .tx span{display:block;margin-top:2px;font-size:12.5px;color:var(--doux)}
.sc-mesure{display:flex;justify-content:center;padding:6px 0}
.sc-mesure .obj{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,0,0,.55))}
.bo-pied{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;font-size:14.5px;color:#C9C9D1;text-align:center}
.bo-pied b{color:#fff}
.bo-claude{width:22px;height:22px;flex:none;color:#D97757}
.sec-noire .bo-pied + .renvoi{margin-top:18px}

/* les gains en colonnes */
.gc{max-width:1000px;margin:clamp(32px,4vw,52px) auto 0;padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px) clamp(22px,2.6vw,30px);border-radius:var(--r-panneau);background:#fff;box-shadow:var(--ombre)}
.gc-leg{display:flex;justify-content:flex-end;gap:18px;font-size:13px;font-weight:600;color:var(--texte2)}
.gc-leg span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:3px;vertical-align:-1px;background:#DCDCDC}
.gc-leg .ap::before{background:var(--encre)}
.gc ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin-top:12px}
.gc-cols{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-top:28px;border-bottom:1px solid #E8E8E8}
.gc-c{position:relative;width:min(46px,38%);height:var(--h);border-radius:10px 10px 3px 3px;background:#DCDCDC;transform-origin:bottom;transition:transform 1.1s var(--ease)}
.gc-c.ap{background:var(--encre);transition-delay:.25s}
.js .gc:not(.vu) .gc-c{transform:scaleY(0)}
.gc-c em{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);width:max-content;max-width:7.5em;font-style:normal;font-size:13px;line-height:1.2;font-weight:700;text-align:center;color:var(--doux);transition:opacity .4s .9s}
.gc-c.ap em{color:var(--encre)}
.js .gc:not(.vu) .gc-c em{opacity:0}
.gc-tx{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;text-align:center}
.gc-tx b{font-size:15.5px;letter-spacing:-.02em}
.gc-tx span{font-size:13.5px;line-height:1.35;color:var(--texte2)}
.gc-tx small{margin-top:4px;font-size:12px;font-weight:600;color:var(--doux)}
.gc figcaption{margin-top:22px;text-align:center;font-size:13px;color:var(--doux)}
.g-autres{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.g-autres span{padding:8px 14px;border-radius:99px;background:var(--gris);font-size:14px;font-weight:600;color:var(--encre)}
.panneau .g-autres span{background:#fff}
.g-autres.g{justify-content:flex-start;margin-top:22px}
#gains > .mw > .renvoi{text-align:center}

/* les gains en grands chiffres */
.gn{display:flex;flex-direction:column;gap:10px}
.gn li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:16px;padding:18px 22px;border-radius:20px;background:#fff;box-shadow:var(--ombre)}
.gn-q{font-size:14.5px;line-height:1.35;color:var(--texte2)}
.gn-q b{color:var(--encre)}
.gn-q small{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--doux)}
.gn-av{font-size:17px;font-weight:600;color:#9A9A9F;text-decoration:line-through;text-decoration-thickness:2px;white-space:nowrap}
.gn-f .ico{width:16px;height:16px;color:var(--pale)}
.gn-ap{min-width:4.6em;text-align:right;font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.045em;color:var(--encre);white-space:nowrap}
.gn-note{margin-top:14px;font-size:13px;color:var(--doux)}

/* pourquoi nous : la carte de l'expert, d'autres derrière */
.pq-pile{position:relative;padding-bottom:36px;max-width:560px}
.pq-pile .pq-carte{position:relative;z-index:2}
.pq-dos{position:absolute;left:50%;height:60%;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);transform:translateX(-50%)}
.pq-dos.d1{z-index:1;bottom:18px;width:93%;opacity:.9}
.pq-dos.d2{z-index:0;bottom:0;width:85%;opacity:.65}
.pq-carte{display:flex;gap:22px;align-items:center;padding:24px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre-forte)}
.pq-ph{width:150px;height:150px;border-radius:20px;overflow:hidden;background:var(--noir);flex:none}
.pq-ph img{width:100%;height:100%;object-fit:cover}
.pq-carte b{display:block;font-size:22px;letter-spacing:-.03em;color:var(--encre)}
.pq-carte > div > span{display:block;margin-top:4px;font-size:14px;color:var(--doux)}
.pq-carte .lg-mot{color:var(--encre)}
.pq-carte p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--texte2)}
#preuves .split .stats{margin-top:22px}

/* « Notre objectif » en deux colonnes, la méthode en liste (repris de la note 23) */
.ob2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ob2-t{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre)}
.ob2-t b{display:block;font-size:18px;letter-spacing:-.025em;color:var(--encre)}
.ob2-t span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--texte2)}
.ob2-t .ob-o{width:64px;height:64px;margin:0}
.ob2-t .ob-o .obj{height:46px}
.ob-sr.g{justify-content:flex-start;margin-top:20px}
.me2{display:flex;flex-direction:column;gap:10px}
.me2 a{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:#fff;box-shadow:var(--ombre);color:var(--encre);transition:transform .25s var(--ease)}
.me2 a:hover{transform:translateX(3px)}
.me2-n{width:28px;height:28px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.me2 .obj{width:46px;height:46px;object-fit:contain;flex:none}
.me2 .tx{flex:1;min-width:0}
.me2 .tx b{display:block;font-size:16.5px;letter-spacing:-.02em}
.me2 .tx span{display:block;font-size:14px;color:var(--texte2)}
.me2 .f{width:16px;height:16px;flex:none;color:var(--doux)}

/* l'aperçu de l'analyse : un document net, le ciel en haut (le ciel est réservé aux documents) */
.an-doc{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:0 auto;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-carte);background:linear-gradient(180deg,#EAF2FA 0,#fff 150px);box-shadow:var(--ombre-forte);color:var(--encre);transition:transform .3s var(--ease),box-shadow .3s}
.an-doc:hover{transform:translateY(-3px)}
.an-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.an-l{font-size:22px;color:var(--encre)}
.an-e{padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.85);font-size:12px;font-weight:600;color:var(--doux)}
.an-t{margin-top:10px;font-size:clamp(26px,2.6vw,32px);font-weight:700;letter-spacing:-.045em}
.an-c{font-size:14.5px;line-height:1.5;color:var(--texte2)}
.an-pl{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--doux)}
.an-doc ul{display:flex;flex-direction:column;gap:8px}
.an-doc li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--gris)}
.an-doc li .obj{width:40px;height:40px;object-fit:contain;flex:none}
.an-doc li .tx{min-width:0}
.an-doc li b{display:block;font-size:14.5px;line-height:1.3;letter-spacing:-.015em}
.an-doc li .tx span{display:block;margin-top:1px;font-size:12.5px;color:var(--doux)}
.an-p{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid #EFEFEF;font-size:13px;color:var(--texte2)}
.an-p .lien{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--encre);white-space:nowrap}
.an-p .lien .ico{width:15px;height:15px}

/* le téléphone et la tablette */
@media (max-width:1020px){
  .bento-j{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a c" "b b" "d e" "f f"}
  .bt-obj{display:none}
  .bento-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-f{grid-template-columns:minmax(0,1fr)}
  .gc ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,30%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .gc ul::-webkit-scrollbar{display:none}
  .gc ul li{scroll-snap-align:start}
}
@media (max-width:700px){
  .bento-j,.bento-6{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .bento-j > *{grid-area:auto}
  .bt,.b6{min-height:0}
  .sc-devis{grid-template-columns:minmax(0,1fr)}
  .sc-devis .sc-cmd{justify-self:start}
  .sc-valide{grid-template-columns:minmax(0,1fr)}
  .bf-g ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc ul{grid-auto-columns:minmax(132px,41%)}
  .gn li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .gn-q{grid-column:1 / -1}
  .gn-f{display:none}
  .gn-ap{text-align:left;min-width:0}
  .pq-carte{flex-direction:column;align-items:flex-start}
  .ob2{grid-template-columns:minmax(0,1fr)}
  .an-p{flex-wrap:wrap}
  .an-p .lien{margin-left:0}
}

/* le téléphone (note 24) : MAX présent dans le haut, les objectifs en lignes compactes, la case de l'agent sans la grande puce */
@media (max-width:900px){
  .ha-ciel .ha-max.g{display:block;position:static;order:-1;width:96px;margin:92px auto -82px;transform:none;filter:drop-shadow(0 14px 18px rgba(0,0,0,.16))}
}
@media (max-width:700px){
  .ob2-t{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .ob2-t .ob-o{width:52px;height:52px;flex:none}
  .ob2-t .ob-o .obj{height:40px}
  .ob2-t b{font-size:16.5px}
  .ob2-t span{font-size:13.5px}
  .bt-obj{display:none}
  .an-e{display:none}
}

/* la page de revue de Tom (/__accueil/, jamais publiée) */
.rv-haut{padding-top:clamp(130px,14vw,170px)}
.rv-haut .t1{margin-top:16px;max-width:14em}
.rv-haut .chapo{margin-top:16px}
.rv-vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3vw,40px)}
.rv-v{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);color:var(--encre);transition:transform .25s var(--ease)}
.rv-v:hover{transform:translateY(-3px)}
.rv-n{width:34px;height:34px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-weight:700}
.rv-v b{font-size:20px;letter-spacing:-.03em}
.rv-r{font-size:14.5px;line-height:1.45;color:var(--texte2)}
.rv-v ol{display:flex;flex-direction:column;gap:4px;margin:8px 0;padding:12px 14px;border-radius:14px;background:var(--gris);counter-reset:rv}
.rv-v ol li{font-size:13px;color:var(--texte2);counter-increment:rv}
.rv-v ol li::before{content:counter(rv) ". ";font-weight:700;color:var(--encre)}
.rv-v .lien{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.rv-v .lien .ico{width:15px;height:15px}
.rv-l{display:grid;gap:10px;max-width:860px;margin:clamp(24px,3vw,36px) auto 0}
.rv-l li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:16px 20px;border-radius:16px;background:#fff;font-size:15px;line-height:1.5;color:var(--texte2)}
.rv-l li b{color:var(--encre)}
.rv-txt{display:block;padding:22px 26px;border-radius:var(--r-carte);background:#fff}
.rv-txt p{font-size:15.5px;line-height:1.6;color:var(--texte2)}
.rv-txt p + p{margin-top:12px}
.rv-txt b{color:var(--encre)}
.rv-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:980px;margin:clamp(24px,3vw,36px) auto 0}
.rv-g a{display:flex;align-items:center;gap:14px;height:100%;padding:18px 20px;border-radius:18px;background:var(--gris);color:var(--encre);transition:background .2s}
.rv-g a:hover{background:var(--gris2)}
.rv-g b{display:block;font-size:16px;margin-bottom:3px}
.rv-g .tx{flex:1;min-width:0}
.rv-g .tx > span{display:block;font-size:14px;line-height:1.45;color:var(--texte2)}
.rv-g .f{width:16px;height:16px;flex:none;color:var(--doux)}
@media (max-width:900px){.rv-vs,.rv-g{grid-template-columns:minmax(0,1fr)}.rv-l li{grid-template-columns:minmax(0,1fr);gap:4px}}
/* « Pourquoi nous » sur téléphone : le titre d'abord, la carte ensuite */
@media (max-width:900px){#preuves .split > .split-v{order:-1}#preuves .split > .split-t .pq-pile{margin-top:8px}}

/* ------------------------------------------------------------------ L'accueil v7 (note 25)
   « L'IA prépare » : la mise en page de la version 3, deux cases au même langage ; les gains en cartes qui se chevauchent ;
   « Pourquoi nous » avec les logos ; l'analyse avec une image nette ; le panneau bleu ciel (version B). */
.b7{max-width:1060px;margin-left:auto;margin-right:auto;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.b7 .bf-g li{display:block;padding:0;background:none}
.b7 .bf-g li a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;height:100%;padding:18px;border-radius:18px;background:rgba(255,255,255,.05);color:#fff;transition:background .25s}
.b7 .bf-g li a:hover{background:rgba(255,255,255,.1)}
.b7 .bf-g li .obj{width:56px;height:56px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.b7 .bf-g li b{font-size:16px;letter-spacing:-.02em}
.b7 .bf-g li span{font-size:13.5px;line-height:1.4;color:#A1A1A6}
.b7 .bf-g li span::before{content:none}
.b7 .bf-d{padding:24px;border-radius:24px;background:linear-gradient(180deg,#232429 0%,#1A1B1F 100%);gap:10px}
.b7 .bf-d .bf-t{margin-bottom:6px}
.b7 .bf-f{flex:1;gap:14px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05)}
.b7 a.bf-f:hover{transform:none;background:rgba(255,255,255,.1)}
.b7 .bf-f .pic{width:40px;height:40px;border-radius:12px}
.b7 .bf-f .pic .ico{width:18px;height:18px}
.b7 .bf-f .tx{gap:4px}
.b7 .bf-f .tx b{font-size:15px;line-height:1.4;letter-spacing:-.015em;font-weight:600}
.b7 .bf-f .bt-k{font-size:12.5px}

/* la méthode en frise calme (version B) : des numéros et une ligne, sans objets */
.frise.sans-obj::before{top:13px}
.frise.sans-obj .nn{margin-top:0}

/* les gains : quatre essais (note 25) */
.gk-note{margin-top:clamp(40px,4.5vw,56px);text-align:center;font-size:13px;color:var(--doux)}
/* 1 · les onglets : les tâches à gauche, qui avancent seules ; la tâche choisie à droite, dans une scène */
.g5{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1060px;margin:clamp(40px,5vw,60px) auto 0}
.g5-tabs{display:flex;flex-direction:column}
.g5-tabs button{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 0 22px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--encre)}
.g5-tabs button + button{border-top:1px solid #EDEDED}
.g5-tabs b{font-size:19px;letter-spacing:-.025em;color:#A1A1A6;transition:color .3s}
.g5-tabs span{font-size:14.5px;line-height:1.45;color:#B4B4B9;transition:color .3s}
.g5-tabs .on b{color:var(--encre)}
.g5-tabs .on span{color:var(--texte2)}
.g5-tabs button:hover b{color:var(--encre)}
.g5-fil{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.g5-fil i{display:block;height:100%;width:0;background:var(--encre)}
.g5-tabs .on .g5-fil i{width:100%}
.js .g5:not(.manuel) .g5-tabs .on .g5-fil i{width:0;animation:g5-fil 5.5s linear forwards}
.js .g5:not(.vu) .g5-tabs .on .g5-fil i{animation-play-state:paused}
.g5:hover .g5-fil i,.g5:focus-within .g5-fil i{animation-play-state:paused!important}
@keyframes g5-fil{to{width:100%}}
.g5-scene{position:relative;display:grid;min-height:420px;border-radius:var(--r-panneau);overflow:hidden}
.g5-pan{grid-area:1 / 1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(32px,4vw,56px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.g5-pan.on{opacity:1;visibility:visible}
.g5-pan p{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.g5-pan p > span{font-size:13.5px;font-weight:600}
.g5-av s{font-size:26px;font-weight:600;letter-spacing:-.03em;text-decoration-thickness:2px}
.g5-ap b{font-size:clamp(64px,7.6vw,108px);line-height:.95;font-weight:700;letter-spacing:-.06em;transform:translateY(8px);transition:transform .7s var(--ease)}
.g5-pan.on .g5-ap b{transform:none}
.g5-ap em,.g5-c em{font-style:normal;font-size:16px}
.g5-obj{position:absolute;height:auto;transition:transform .9s var(--ease),opacity .6s}
/* la scène sur noir (1 a) */
.s-noir .g5-scene{background:radial-gradient(90% 80% at 75% 20%,#2A2D35 0%,#141518 55%,#0B0B0C 100%)}
.s-noir .g5-pan p > span{color:#A1A1A6}
.s-noir .g5-av s{color:#86868B;text-decoration-color:rgba(134,134,139,.8)}
.s-noir .g5-ap b{background:linear-gradient(180deg,#fff 40%,#C9DCF0);-webkit-background-clip:text;background-clip:text;color:transparent}
.s-noir .g5-ap em{color:#A1A1A6}
.s-noir .g5-obj{right:clamp(20px,4vw,56px);top:50%;width:clamp(140px,16vw,210px);filter:drop-shadow(0 30px 34px rgba(0,0,0,.65));transform:translateY(-44%) rotate(-5deg) scale(.94);opacity:.4}
.s-noir .g5-pan.on .g5-obj{transform:translateY(-50%) rotate(-5deg);opacity:1}
/* l'objet au centre, deux cartes autour (1 b) */
.s-objet .g5-scene{background:linear-gradient(180deg,#F5F5F7 0%,#EDEDF0 100%)}
.s-objet .g5-pan{align-items:center;justify-content:center}
.s-objet .g5-obj{position:relative;width:clamp(170px,19vw,230px);filter:drop-shadow(0 34px 40px rgba(0,0,0,.18));transform:translateY(10px) scale(.95)}
.s-objet .g5-pan.on .g5-obj{transform:none}
.g5-pan .g5-c{position:absolute;z-index:2;padding:16px 20px;border-radius:20px}
.g5-c.av{left:clamp(18px,3vw,40px);top:clamp(22px,3.4vw,44px);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:rotate(-3deg)}
.g5-c.av span{color:var(--doux)}
.g5-c.av s{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#9A9AA0;text-decoration-thickness:2px}
.g5-c.ap{right:clamp(18px,3vw,40px);bottom:clamp(22px,3.4vw,44px);padding:18px 24px;background:#fff;box-shadow:var(--ombre-forte);transform:rotate(2deg)}
.g5-c.ap span{color:var(--doux)}
.g5-c.ap b{font-size:clamp(40px,4.4vw,56px);line-height:1;font-weight:700;letter-spacing:-.055em;color:var(--encre)}
.g5-c.ap em{font-size:14px;color:var(--texte2)}
/* la scène bleu ciel (1 c, le premier essai) */
.s-ciel .g5-scene{background:linear-gradient(160deg,#D4E5F6 0%,#E4EEF8 45%,#F3F7FC 100%)}
.s-ciel .g5-pan p > span{color:#5E6B7A}
.s-ciel .g5-av s{color:#8C98A6}
.s-ciel .g5-ap b{color:var(--encre)}
.s-ciel .g5-ap em{color:#5E6B7A}
.s-ciel .g5-obj{right:clamp(20px,4vw,52px);bottom:clamp(20px,3vw,40px);width:clamp(110px,13vw,170px);filter:drop-shadow(0 26px 30px rgba(40,60,90,.22));transform:rotate(-4deg)}
/* 2 · sur noir, avec les objets 3D */
.g6{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;margin:clamp(40px,5vw,64px) auto 0}
.g6 li{position:relative;display:flex;flex-direction:column;gap:6px;padding:4px clamp(16px,2.4vw,30px)}
.g6 li + li{border-left:1px solid rgba(255,255,255,.12)}
.g6-o{width:84px;height:84px;object-fit:contain;margin-bottom:18px;filter:drop-shadow(0 22px 26px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.g6 li:hover .g6-o{transform:translateY(-4px) rotate(-3deg)}
.g6-n{font-size:14px;font-weight:600;color:#A1A1A6}
.g6-ap{margin-top:10px;font-size:clamp(40px,4.4vw,60px);line-height:1;font-weight:700;letter-spacing:-.055em;background:linear-gradient(180deg,#fff 35%,#C9DCF0);-webkit-background-clip:text;background-clip:text;color:transparent}
.g6-av{font-size:14px;color:#86868B}
.g6 p{margin-top:14px;font-size:14px;line-height:1.5;color:#C9C9D1}
.g6.g6-t{gap:14px}
.g6.g6-t li{justify-content:flex-start;padding:124px 24px 26px;border-radius:24px;background:linear-gradient(180deg,#232429 0%,#1A1B1F 100%)}
.g6.g6-t li + li{border-left:0}
.g6.g6-t .g6-o{position:absolute;top:22px;left:20px;width:88px;height:88px;margin:0}
.sec-noire .gk-note{color:#86868B}
@media (prefers-reduced-motion:reduce){.js .g5 .g5-tabs .on .g5-fil i{animation:none;width:100%}.g5-pan,.g5-ap b,.g5-obj{transition:none}}
@media (max-width:1020px){.g6{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.g6 li:nth-child(3){border-left:0}}
@media (max-width:820px){.g5{grid-template-columns:minmax(0,1fr)}.g5-scene{order:-1;min-height:340px}.g5-tabs b{font-size:17px}}
@media (max-width:560px){
  .g6{grid-template-columns:minmax(0,1fr)}.g6 li + li{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}.g6 li{padding-bottom:20px}
  .g6.g6-t li + li{border-top:0}
  .g6.g6-t{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g6.g6-t li{padding:92px 16px 18px;border-radius:20px}
  .g6.g6-t .g6-o{top:16px;left:14px;width:64px;height:64px}
  .g6.g6-t .g6-ap{font-size:34px}
  .g6.g6-t .g6-n,.g6.g6-t .g6-av{font-size:12.5px}
  .g6.g6-t p{margin-top:10px;font-size:13px}
  .s-noir .g5-obj{width:110px;top:auto;bottom:18px;transform:rotate(-5deg)!important}.s-noir .g5-pan{justify-content:flex-start}
  .g5-c.ap b{font-size:36px}.s-objet .g5-obj{width:150px}
}
/* la page des essais */
.rv-gains{display:flex;align-items:center;gap:16px;margin-top:14px;padding:20px 24px;border-radius:var(--r-carte);background:var(--encre);color:#fff}
.rv-gains .tx{flex:1;min-width:0}.rv-gains b{display:block;font-size:17px}.rv-gains .tx > span{display:block;margin-top:3px;font-size:14.5px;color:#C9C9D1}
.rv-gains .f{width:18px;height:18px;flex:none}
.rv-essai{margin:clamp(30px,4vw,48px) var(--marge) 0;padding:16px 0;border-radius:18px;background:var(--encre);color:#fff}
.rv-essai .mw{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rv-essai .rv-n{width:30px;height:30px;background:#fff;color:var(--encre);font-size:14px}
.rv-essai b{font-size:17px}
.rv-essai span:last-child{font-size:14.5px;color:#C9C9D1}

/* « Pourquoi nous » : la carte de l'expert, les logos de ses projets en bas */
.pq-carte.pq7{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center}
.pq7 .pq-tx > span{display:block;margin-top:4px;font-size:14px;color:var(--doux)}
.pq-logos{grid-column:1 / -1;display:flex;align-items:center;gap:18px;padding-top:16px;border-top:1px solid #EFEFEF}
.pq-logos small{font-size:12px;font-weight:600;color:var(--doux);white-space:nowrap}
.pq-logos div{display:flex;align-items:center;gap:20px;margin-left:auto}
.pq-logos img{height:19px;width:auto;max-width:76px;object-fit:contain}
.pq-logos img.carre{height:28px;border-radius:7px}
.pq-logos img[src*="logo-resto"]{height:30px}

/* l'analyse : une image nette de l'exemple (la lettre et le premier avis) */
/* (note 25 : sans la barre du navigateur ; le bas s'efface et « Voir tout l'exemple » se pose dessus, comme sur la page Analyse) */
.an-ex{position:relative;max-width:540px;margin:0 auto}
.an-img{position:relative;display:block;border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--ombre)}
.an-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.82) 58%,#fff 94%)}
.an-img img{display:block;width:100%;height:auto}
.an-lire{display:flex;justify-content:center;margin-top:-28px;position:relative;z-index:2}

/* le panneau bleu ciel (version B) : le bleu du haut, pour l'appel à l'action */
.panneau.p-ciel{background:linear-gradient(180deg,#D7E7F7 0%,#E9F1FA 60%,#F3F7FC 100%)}
.panneau.p-ciel .chip,.panneau.p-ciel .btn.gris{background:rgba(255,255,255,.85)}

@media (max-width:1020px){.b7{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .b7 .bf-g ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b7 .bf-g,.b7 .bf-d{padding:16px}
  .pq-carte.pq7{grid-template-columns:minmax(0,1fr)}
  .pq-logos{flex-wrap:wrap;gap:10px}
  .pq-logos div{margin-left:0;gap:16px;flex-wrap:wrap}
}
/* note 26 : un seul MAX dans le haut de l'accueil, à gauche, plus grand, centré sur le texte (en hauteur) et plus près de lui ;
   un peu plus d'air entre les boutons et les trois cases ; le titre de la bande en noir */
.ha-max.g{top:calc(var(--marge) + var(--haut-pad) + 215px);left:max(40px,calc(50% - 660px));width:clamp(150px,15vw,230px);transform:translateY(-50%)}
.ha .notes{margin-top:34px}
.bl-t{color:var(--encre)}

/* ------------------------------------------------------------------ note 26 */
/* « Notre objectif » : des cartes qui se détachent du fond blanc (une ombre douce tout autour, le haut compris) */
.ob-c{box-shadow:var(--ombre)}
.ob-c:hover{box-shadow:var(--ombre-survol)}
/* la méthode : deux boutons au lieu de « Avant tout… » */
.me-b{margin-top:clamp(28px,3.4vw,40px)}
/* l'analyse : l'expert qui la relit, et le lien vers « Pourquoi nous » */
.tom-l{display:inline-flex;align-items:center;gap:5px;margin-left:4px;font-weight:600;color:var(--encre);white-space:nowrap}
.tom-l .ico{width:14px;height:14px;transition:transform .2s var(--ease)}
.tom-l:hover .ico{transform:translateX(2px)}
/* les gains : un exemple par objectif, deux cercles (dehors en rouge : avant ; dedans en bleu : avec l'IA) autour de l'objet */
.g8-leg{display:flex;justify-content:center;gap:22px;margin-top:26px;font-size:13.5px;font-weight:600;color:#C9C9D1}
.g8-leg span,.g8-v span{display:inline-flex;align-items:center;gap:8px}
.g8-leg i,.g8-v i{width:9px;height:9px;border-radius:50%;flex:none}
.g8-leg .av i,.g8-v.av i{background:linear-gradient(135deg,#F6A193,#E5584B)}
.g8-leg .ap i,.g8-v.ap i{background:linear-gradient(135deg,#8CC0FF,#3F84F5)}
.g8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:1080px;margin:clamp(30px,4vw,44px) auto 0}
.g8 li{display:flex;flex-direction:column;align-items:center;text-align:center}
.g8-c{position:relative;width:168px;height:168px;display:grid;place-items:center}
.g8-c svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.g8-c .t{fill:none;stroke:rgba(255,255,255,.07);stroke-width:9}
.g8-c .a{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--p) 100;transition:stroke-dasharray 1.5s var(--ease) .25s}
.g8-c .a.ap{transition-delay:.7s}
.js .g8 li:not(.vu) .a{stroke-dasharray:0 100}
.g8-o{position:relative;width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6))}
.g8-k{margin-top:22px;font-size:13px;font-weight:600;color:#A1A1A6}
.g8-t{margin-top:4px;font-size:17px;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.g8-v{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;max-width:220px;padding:10px 0;font-size:13px;color:#A1A1A6}
.g8-v.av{margin-top:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.g8-v.ap b{font-size:26px;line-height:1;font-weight:700;letter-spacing:-.045em;color:#fff;white-space:nowrap}
.g8-v.av b{font-size:13.5px;font-weight:600;color:#C9C9D1;text-align:right}
.g8-x{margin-top:10px;max-width:220px;font-size:13.5px;line-height:1.5;color:#A1A1A6}
@media (prefers-reduced-motion:reduce){.g8-c .a{transition:none}}
@media (max-width:1020px){.g8{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}
@media (max-width:560px){   /* sur téléphone : le cercle à gauche, le texte à droite, un exemple par ligne */
  .g8{grid-template-columns:minmax(0,1fr);gap:30px}
  .g8 li{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:18px;align-items:start;text-align:left}
  .g8 li > *:not(.g8-c){grid-column:2}
  .g8-c{grid-column:1;grid-row:1 / span 5;width:104px;height:104px}.g8-o{width:44px;height:44px}
  .g8-k{margin-top:2px}.g8-t{font-size:16px}
  .g8-v{max-width:none;padding:8px 0}.g8-v.av{margin-top:8px}.g8-v.ap b{font-size:22px}
  .g8-x{max-width:none;font-size:13px}
}
@media (min-width:561px) and (max-width:1100px){.g8-t{min-height:2.6em}}   /* les lignes « avant / avec l'IA » restent alignées d'une colonne à l'autre */

/* note 27 : les métiers de l'accueil en cartes blanches, avec la même ombre que « Notre objectif » */
#metiers .tuiles a{background:#fff;box-shadow:var(--ombre)}
#metiers .tuiles a:hover{background:#fff;box-shadow:var(--ombre-survol)}

/* ------------------------------------------------------------------ les gains, note 27 : trois propositions, sans cercles */
/* A · « Aujourd'hui / Avec l'IA » : deux colonnes face à face (sur noir : le sombre pour aujourd'hui, le blanc pour ce que l'IA apporte) */
.ga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;max-width:980px;margin:clamp(36px,4.5vw,56px) auto 0}
.ga-c{padding:20px 28px;text-align:left}
.ga-c.av{background:rgba(255,255,255,.05);color:#C9C9D1}
.ga-c.ap{background:#fff;color:var(--encre)}
.ga-c.av + .ga-c.ap,.ga-c.ap + .ga-c.av{}
.ga-c:not(.ga-h).av{border-top:1px solid rgba(255,255,255,.06)}
.ga-c:not(.ga-h).ap{border-top:1px solid #EFEFEF}
.ga-h{padding-top:24px;padding-bottom:16px}
.ga-h.av{border-radius:24px 24px 0 0}
.ga-h.ap{border-radius:24px 24px 0 0}
.ga-h span{display:inline-flex;padding:6px 12px;border-radius:99px;font-size:13px;font-weight:700}
.ga-h.av span{background:rgba(255,255,255,.08);color:#C9C9D1}
.ga-h.ap span{background:var(--encre);color:#fff}
.ga-c.der{padding-bottom:26px;border-radius:0 0 24px 24px}
.ga-k{display:block;font-size:12.5px;font-weight:600;color:#86868B}
.ga-c.ap .ga-k{color:var(--doux)}
.ga-c p{display:flex;align-items:flex-start;gap:12px;margin-top:6px;font-size:16px;line-height:1.45}
.ga-c.ap p{font-weight:600;letter-spacing:-.01em}
.ga-m{flex:none;width:14px;height:2px;margin-top:11px;border-radius:1px;background:#E5776A}
.ga-ok{flex:none;width:18px;height:18px;margin-top:2px;color:#3F84F5}
.ga-q{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){   /* sur téléphone : chaque objectif en paire, aujourd'hui puis avec l'IA */
  .ga{grid-template-columns:minmax(0,1fr)}
  .ga-h{display:none}
  .ga-c{padding:16px 18px}
  .ga-c:not(.ga-h).av{border-top:0;border-radius:20px 20px 0 0;margin-top:12px}
  .ga-c:not(.ga-h).ap{border-top:0;border-radius:0 0 20px 20px}
  .ga-c.ap .ga-k{display:none}
  .ga-q{position:static;width:auto;height:auto;clip:auto;font-weight:700;margin-right:2px}
  .ga-c.av .ga-q{color:#fff}
  .ga-c p{font-size:15px}
}
/* B · quatre résultats : des cartes blanches, le résultat en grand */
.gb7{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1080px;margin:clamp(36px,4.5vw,56px) auto 0}
.gb7 li{display:flex;flex-direction:column;padding:24px 22px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre)}
.gb7-k{font-size:13px;font-weight:600;color:var(--doux)}
.gb7 b{margin-top:22px;font-size:clamp(32px,3.2vw,42px);line-height:1;font-weight:700;letter-spacing:-.05em;color:var(--encre)}
.gb7-a{margin-top:8px;font-size:14px;color:var(--texte2)}
.gb7 p{margin-top:auto;padding-top:22px;font-size:14px;line-height:1.45;color:var(--texte2)}
@media (max-width:1020px){.gb7{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.gb7{grid-template-columns:minmax(0,1fr)}}
/* C · une tâche de bout en bout : les étapes d'aujourd'hui, puis avec l'IA, et le temps rendu */
.gt{display:flex;flex-direction:column;gap:14px;max-width:980px;margin:clamp(36px,4.5vw,56px) auto 0}
.gt-l{padding:22px 24px;border-radius:24px}
.gt-l.av{background:rgba(255,255,255,.05)}
.gt-l.ap{background:#fff}
.gt-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gt-h b{font-size:15px}
.gt-l.av .gt-h b{color:#fff}.gt-l.av .gt-h span{color:#A1A1A6}
.gt-l.ap .gt-h b{color:var(--encre)}.gt-l.ap .gt-h span{color:var(--doux)}
.gt-h span{font-size:14px}
.gt ol{display:flex;gap:8px;margin-top:14px}
.gt li{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;padding:10px 14px;border-radius:14px;font-size:14.5px;font-weight:600;text-align:center}
.gt-l.av li{background:rgba(255,255,255,.07);color:#E6E6E6}
.gt-l.ap li{flex:0 0 auto;background:var(--gris);color:var(--encre)}
.gt-l.ap li.cmd{background:var(--encre);color:#fff}
.gt-l.ap li.cmd .ico{width:15px;height:15px}
.gt-l.ap li.libre{flex:1;background:linear-gradient(90deg,#EAF2FB,#F5F8FC);color:#2F5E93;font-weight:600}
.gt-et{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:980px;margin:14px auto 0}
.gt-et li{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);font-size:14px;line-height:1.45;color:#C9C9D1}
.gt-et b{font-size:12.5px;color:#86868B}
@media (max-width:700px){
  .gt ol{flex-wrap:wrap}.gt-l.av li{flex:1 1 calc(50% - 4px)}.gt-l.ap li{flex:1 1 auto}.gt-l.ap li.libre{flex:1 1 100%}
  .gt-et{grid-template-columns:minmax(0,1fr)}
}

/* ===== les gains, note 28 : les chiffres d'abord, aujourd'hui contre avec l'IA, sur plusieurs tâches ===== */
/* 1 · quatre colonnes (l'idée de Tom) : le temps d'aujourd'hui en gris, derrière ; devant, le temps avec l'IA (noir sur blanc, blanc sur noir) */
.gq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);max-width:1120px;margin:clamp(36px,4.5vw,56px) auto 0}
.gq > li{display:flex;flex-direction:column;padding:10px 10px 22px;border-radius:26px;background:#fff;box-shadow:var(--ombre)}
.gq-v{position:relative;height:clamp(210px,19vw,250px);border-radius:18px;background:#F1F1F3;overflow:hidden}
.gq-av{position:absolute;left:16px;top:14px;right:80px;display:flex;flex-direction:column;gap:3px}
.gq-o{position:absolute;right:12px;top:12px;width:clamp(48px,4.4vw,60px);height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.12))}
.sec-noire .gq-o{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
.gq-av small,.gq-apl small{font-size:12px;font-weight:600;letter-spacing:0}
.gq-av small{color:#8E8E93}
.gq-av b{font-size:20px;line-height:1.1;font-weight:600;letter-spacing:-.03em;color:#8E8E93}
.gq-ap{position:absolute;left:0;right:0;bottom:0;height:max(var(--h),8px);background:var(--encre);border-radius:4px 4px 18px 18px;transition:height 1.2s var(--ease) .3s}
.gq-apl{position:absolute;left:16px;right:12px;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:3px;transition:opacity .5s ease .7s}
.gq-apl small{color:var(--texte2)}
.gq-apl b{font-size:clamp(30px,2.9vw,40px);line-height:1;font-weight:700;letter-spacing:-.045em;color:var(--encre)}
.js .gq > li:not(.vu) .gq-ap{height:0}
.js .gq > li:not(.vu) .gq-apl{opacity:0}
.gq-tx{display:flex;flex-direction:column;flex:1;padding:18px 10px 0}
.gq-k{font-size:13px;font-weight:600;color:var(--doux)}
.gq h3{margin-top:12px;font-size:19px;line-height:1.2;letter-spacing:-.025em;color:var(--encre)}
.gq-x{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--doux)}
.gq-voir{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding-top:16px;font-size:14.5px;font-weight:600;color:var(--encre)}
.gq-voir .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.gq-voir:hover .ico{transform:translateX(3px)}
/* sur la section noire de l'accueil (1 a) : des cases sombres, le gris derrière, le blanc devant */
.sec-noire .gq > li{background:linear-gradient(180deg,#1B1C20 0%,#141518 100%);box-shadow:none}
.sec-noire .gq-v{background:rgba(255,255,255,.085)}
.sec-noire .gq-av small,.sec-noire .gq-av b{color:#8E8E93}
.sec-noire .gq-ap{background:#fff}
.sec-noire .gq-apl small{color:#C9C9D1}
.sec-noire .gq-apl b,.sec-noire .gq h3,.sec-noire .gq-voir{color:#fff}
.sec-noire .gq-k,.sec-noire .gq-x{color:#A1A1A6}
@media (prefers-reduced-motion:reduce){.gq-ap,.gq-apl{transition:none}}
@media (max-width:1020px){.gq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .gq{gap:10px}
  .gq > li{padding:7px 7px 18px;border-radius:22px}
  .gq-v{height:176px;border-radius:15px}
  .gq-av{left:12px;top:11px}
  .gq-av b{font-size:16px}
  .gq-apl{left:12px;bottom:calc(100% + 8px)}
  .gq-apl b{font-size:26px}
  .gq-tx{padding:14px 6px 0}
  .gq-k{font-size:12px}
  .gq-o{width:40px;right:9px;top:9px}
  .gq-av{right:52px}
  .gq h3{margin-top:9px;font-size:16.5px}
  .gq-x{font-size:13.5px}
  .gq-voir{font-size:14px;padding-top:12px}
}

/* 2 · une ligne par tâche, de gauche à droite : une seule barre (le gris derrière, le noir devant), la durée avec l'IA en grand à droite */
.gl{max-width:1000px;margin:clamp(36px,4.5vw,56px) auto 0;padding:clamp(14px,1.8vw,22px) clamp(20px,2.6vw,34px) clamp(10px,1.4vw,16px);border-radius:var(--r-panneau);background:#fff;box-shadow:var(--ombre)}
.gl-h,.gl li{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.15fr) 112px 36px;align-items:center;column-gap:clamp(14px,2vw,24px)}
.gl-h{padding:4px 0 6px;font-size:12.5px;font-weight:600;color:var(--doux)}
.gl-h span:nth-child(3){text-align:right}
.gl-h span:nth-child(4){text-align:left}
.gl li{padding:16px 0}
.gl-o{width:48px;height:auto}
.gl-t h3{font-size:17.5px;line-height:1.25;letter-spacing:-.02em}
.gl-t h3 a{color:var(--encre)}
.gl-t p{margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--doux)}
.gl-b{position:relative;height:30px;border-radius:15px;background:#EEEEF1}
.gl-av{position:absolute;right:13px;top:50%;transform:translateY(-50%)}
.gl-av em{font-style:normal;font-size:13px;font-weight:600;color:#8E8E93;white-space:nowrap}
.gl-ap{position:absolute;left:0;top:0;bottom:0;width:max(var(--p),30px);border-radius:15px;background:var(--encre);transform-origin:left;transition:transform 1s var(--ease) .25s}
.js .gl li:not(.vu) .gl-ap{transform:scaleX(0)}
.gl-n b{display:block;font-size:clamp(24px,2.4vw,30px);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--encre);white-space:nowrap}
.gl-voir{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gris);color:var(--encre);transition:background .2s}
.gl-voir:hover{background:var(--gris2)}
.gl-voir .ico{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.gl-ap{transition:none}}
@media (max-width:760px){
  .gl{padding:8px 18px 6px}
  .gl-h{display:none}
  .gl li{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"o t n" "b b b";row-gap:12px;padding:16px 0}
  .gl-o{grid-area:o;width:40px}
  .gl-t{grid-area:t}
  .gl-b{grid-area:b;height:26px}
  .gl-n{grid-area:n;text-align:right}
  .gl-n b{font-size:24px}
  .gl-n::after{content:"avec l'IA";display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--doux)}
  .gl-voir{display:none}
}

/* 3 · les cas qui défilent (les onglets de la note 25) ; à droite, une carte blanche : deux barres et les deux durées en grand */
.g9 .g5-tabs span{font-size:13.5px}
.g9-scene{min-height:0;background:#fff;box-shadow:var(--ombre);overflow:visible}
.g9-pan{justify-content:flex-start;gap:0;padding:clamp(30px,4vw,48px)}
.g9-o{position:absolute;right:clamp(22px,3vw,40px);top:clamp(20px,2.6vw,30px);width:clamp(66px,6.4vw,84px);transform:translateY(6px);transition:transform .8s var(--ease)}
.g9-pan.on .g9-o{transform:none}
.g5-pan .g9-k{font-size:13.5px;font-weight:600;color:var(--doux)}
.g9-t{margin-top:6px;max-width:calc(100% - 130px);font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.035em}
.g9-l{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:16px;row-gap:10px;margin-top:22px}
.g9-l.av{margin-top:clamp(36px,4vw,50px)}
.g9-b{grid-column:1 / -1}
.g9-q{font-size:13.5px;font-weight:600;color:var(--doux)}
.g9-b{height:16px;border-radius:8px;background:#F0F0F3;overflow:hidden}
.g9-b i{display:block;height:100%;width:max(var(--p),16px);border-radius:8px;background:#C7C7CC;transform-origin:left;transition:transform 1s var(--ease) .15s}
.g9-l.ap .g9-b i{background:var(--encre);transition-delay:.45s}
.g9-pan:not(.on) .g9-b i,.js .g9:not(.vu) .g9-b i{transform:scaleX(0)}
.g9-l b{font-size:clamp(30px,3.2vw,44px);line-height:1;font-weight:700;letter-spacing:-.045em;text-align:right;color:var(--encre);white-space:nowrap}
.g9-l.av b{font-size:clamp(22px,2.2vw,28px);font-weight:600;color:#A1A1A6}
.g5-pan .g9-x{margin-top:28px;font-size:16px;line-height:1.5;color:var(--texte2)}
.g9-pan .gq-voir{margin-top:12px;padding-top:0}
@media (max-width:820px){.g9-scene{min-height:0}.g9-pan{padding:26px 22px 28px}.g9-o{width:72px}.g9-t{max-width:calc(100% - 84px);font-size:24px}
  .g9-l b{font-size:30px}.g9-l.av b{font-size:21px}}

/* les essais d'ombres (note 28) : la même carte, une ombre par section */
.om .ob-c,.om .tuiles a{background:#fff;box-shadow:var(--om)!important}
.om .ob-c:hover,.om .tuiles a:hover{background:#fff;box-shadow:var(--om)!important;transform:translateY(-3px)}
.om-m{max-width:880px;margin:clamp(28px,3vw,40px) auto 0}
.om{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(48px,6vw,80px)}

/* note 29 : la 1 a un peu plus claire (la durée d'aujourd'hui plus lisible, la colonne grise plus nette) ; la 2 sur noir */
.gq-av b{font-size:clamp(20px,1.9vw,24px)}
.sec-noire .gq-av small{color:#A1A1A6}
.sec-noire .gq-av b{color:#C2C2C8}
.sec-noire .gq-v{background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.075) 100%)}
.sec-noire .gl{background:linear-gradient(180deg,#1B1C20 0%,#141518 100%);box-shadow:none}
.sec-noire .gl-h{color:#8E8E93}
.sec-noire .gl-t h3 a,.sec-noire .gl-n b{color:#fff}
.sec-noire .gl-t p{color:#A1A1A6}
.sec-noire .gl-b{background:rgba(255,255,255,.1)}
.sec-noire .gl-av em{color:#A1A1A6}
.sec-noire .gl-ap{background:#fff}
.sec-noire .gl-o{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.sec-noire .gl-voir{background:rgba(255,255,255,.1);color:#fff}
.sec-noire .gl-voir:hover{background:rgba(255,255,255,.18)}
@media (max-width:560px){.gq-av b{font-size:16px}}
@media (max-width:760px){.sec-noire .gl-n::after{color:#A1A1A6}}
.gq-av b.long{font-size:clamp(17px,1.5vw,20px);white-space:nowrap}
@media (max-width:560px){.gq-av b.long{font-size:14px;white-space:normal}}

/* ===== note 30 : le haut qui rassure ===== */
/* les étoiles dans le surtitre, qui mènent au profil de l'expert */
a.ha-avis{gap:7px;transition:transform .2s var(--ease),box-shadow .2s}
a.ha-avis:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 26px rgba(0,0,0,.09)}
.ha-avis .etoiles{font-size:13px;letter-spacing:.06em}
.ha-avis b{font-weight:700}
.ha-avis-p{color:var(--pale)}
.ha-avis > span:last-child{font-weight:500;color:var(--texte2)}
@media (max-width:480px){.ha-avis-p,.ha-avis > span:last-child{display:none}}
/* la fin du haut : les projets en petites cartes discrètes */
.bl-discret .bl-defile{margin-top:0}
.bl-discret ul{gap:10px;padding-right:10px}
.bl-discret li a{display:flex;align-items:center;gap:12px;width:300px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bl-discret .bd-logo{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff}
.bl-discret .bd-logo img,.bl-discret .bd-logo svg{max-width:34px;max-height:24px;width:auto;height:auto}
.bl-discret .bd-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-discret .bd-tx b{font-size:13.5px;line-height:1.3;font-weight:600;color:var(--encre)}
.bl-discret .bd-tx small{font-size:12px;color:var(--doux)}
/* la fin du haut : les outils en petites pastilles */
.bl-outils ul{gap:8px;padding-right:8px}
.bl-outils .sf-outil{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}
/* la fin du haut : trois repères sur l'expert, immobiles */
.bl-chiffres{display:flex;justify-content:center}
.bl-ch{display:inline-flex;align-items:center;gap:clamp(14px,2.4vw,30px);padding:14px 16px 14px 22px;border-radius:22px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);color:var(--encre);transition:background .2s}
.bl-ch:hover{background:rgba(255,255,255,.85)}
.bl-ch-t{font-size:13px;font-weight:600;color:var(--doux)}
.bl-ch ul{display:flex;gap:clamp(16px,2.6vw,34px)}
.bl-ch li{display:flex;flex-direction:column;gap:1px}
.bl-ch li b{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.bl-ch li span{font-size:12.5px;color:var(--texte2)}
.bl-ch-f{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff}
.bl-ch-f .ico{width:15px;height:15px}
@media (max-width:700px){.bl-ch{flex-direction:column;align-items:stretch;gap:10px;width:100%;padding:16px 18px}.bl-ch ul{justify-content:space-between;gap:10px}.bl-ch-f{display:none}.bl-ch li b{font-size:17px}}

/* ===== note 30 : le bento « Ce que nos experts savent faire », à la place des gains ===== */
.bx{margin-top:clamp(36px,4.5vw,56px)}
.bx .sf-c{box-shadow:var(--ombre)}
/* 1 · la grille revue */
.bx1 .bx-jeu,.bx1 .bx-app{grid-column:span 6}
.bx-plus{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0}
/* le jeu : un bel écran, en petit, et trois éléments créés avec l'IA */
.bx-jeu-v{position:relative;margin:auto 28px 28px;padding-top:6px}
.bx-ecran{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:16px;box-shadow:0 18px 34px -16px rgba(0,0,0,.35)}
.bx-els{display:flex;justify-content:flex-end;align-items:flex-end;gap:2px;margin:-46px -8px 0 0;position:relative}
.bx-el{height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.22))}
.bx-el.perso{width:56px}.bx-el.plat{width:72px}.bx-el.decor{width:84px}
/* l'app : trois écrans entiers */
.bx-tels{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin-top:auto;padding:4px 24px 28px}
.bx-tel{width:min(118px,28%);height:auto;border-radius:16px;box-shadow:0 16px 30px -14px rgba(0,0,0,.4)}
.bx-tel.t1{width:min(132px,31%);transform:translateY(-10px)}
/* « Et aussi », avec un petit visuel par ligne */
.bx-liste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px;margin-top:6px}
.bx-liste li{display:flex;align-items:center;gap:12px}
.bx-ic{flex:none;width:48px;height:48px;object-fit:contain;border-radius:12px}
.bx-liste span{font-size:14.5px;line-height:1.4;color:var(--texte2)}
.bx-liste b{color:var(--encre);font-weight:600}
/* 2 · par domaine : six cases */
.bx2 .sf-video{grid-column:span 8}.bx2 .sf-agents{grid-column:span 4}
.bx2 .bx-jeu{grid-column:span 5}.bx2 .bx-app{grid-column:span 4}.bx2 .bx-max{grid-column:span 3}
.bx-max{justify-content:flex-end;background:linear-gradient(180deg,#F4F6F9 0%,#fff 70%)}
.bx-max-i{width:min(170px,70%);height:auto;margin:26px auto 0;filter:drop-shadow(0 18px 22px rgba(0,0,0,.2))}
/* 3 · en images d'abord : une mosaïque */
.bx3{margin-top:clamp(36px,4.5vw,56px)}
.bx-mos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,200px);gap:12px}
.bx-m{position:relative;margin:0;border-radius:var(--r-carte);overflow:hidden;background:#fff;box-shadow:var(--ombre)}
.bx-m img{width:100%;height:100%;object-fit:cover}
.bx-m figcaption{position:absolute;left:10px;bottom:10px;right:10px;display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:max-content;max-width:calc(100% - 20px)}
.bx-m figcaption span{font-size:12px;font-weight:600;color:var(--doux)}
.bx-m figcaption b{font-size:14.5px;line-height:1.25;color:var(--encre)}
.m-a{grid-column:span 2;grid-row:span 2}.m-b{grid-column:span 2}.m-c{grid-row:span 2}.m-c img{object-position:top}
.m-d img{object-fit:contain;padding:18px 18px 64px;background:linear-gradient(180deg,#F4F6F9,#fff)}
.m-e img{object-fit:contain;background:#FBE3CF}
.m-f img{object-position:top}
.bx-chiffre{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:20px;background:var(--noir)}
.bx-chiffre b{font-size:clamp(40px,4.4vw,58px);font-weight:700;letter-spacing:-.05em;line-height:.95;color:#fff}
.bx-chiffre span{font-size:14px;color:rgba(255,255,255,.75)}
.bx3 .sf{margin-top:12px}
@media (max-width:900px){
  .bx1 .bx-jeu,.bx1 .bx-app,.bx2 .bx-jeu,.bx2 .bx-app,.bx2 .bx-max,.bx2 .sf-video,.bx2 .sf-agents{grid-column:span 12}
  .bx-plus{grid-template-columns:minmax(0,1fr)}
  .bx-mos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
  .m-a{grid-column:span 2}.m-b{grid-column:span 2}
}
@media (max-width:560px){.bx-liste{grid-template-columns:minmax(0,1fr)}.bx-jeu-v{margin:auto 20px 22px}.bx-tels{padding:4px 18px 22px}.bx-els{margin-top:-36px}.bx-el.perso{width:46px}.bx-el.plat{width:58px}.bx-el.decor{width:68px}}
.bx-tel{width:min(150px,30%)}.bx-tel.t1{width:min(172px,34%)}
.bx-max .sf-t h3{font-size:clamp(20px,1.8vw,24px)}
@media (max-width:560px){.bx-tel{width:30%}.bx-tel.t1{width:34%}}
@media (max-width:560px){.bx .sf-agents .sf-points{height:110px;width:auto;align-self:flex-start}}

/* ===== note 31 : le haut à la hauteur de l'écran, chaque espace réglé ===== */
/* la barre finit à 80 px ; le contenu se centre entre elle et le défilé ; le défilé finit à une marge fixe du bas de l'écran */
.ha.ha-plein{min-height:calc(100svh - var(--marge));display:flex;flex-direction:column}
.ha-plein .ha-c{flex:1 0 auto;justify-content:center;padding-top:calc(80px + clamp(32px,5.5vh,64px));padding-bottom:clamp(28px,4.5vh,56px)}
.ha-plein .ha-max.g{top:40%}
.ha-plein .bl{margin-top:0;padding:0 0 clamp(22px,3.4vh,36px)}
.ha-plein .bl-t{margin-bottom:12px}
.ha-plein .bl-discret .bl-defile{margin-top:0}
@media (max-height:760px) and (min-width:901px){.ha-plein .ha .t1,.ha-plein .t1{font-size:clamp(40px,5vw,68px)}.ha-plein .ha-c{padding-top:calc(80px + 24px)}}
/* tablette et téléphone : MAX au-dessus du surtitre ; l'espace libre se partage entre le haut (sous la barre) et le défilé */
@media (max-width:900px){.ha.ha-plein{padding-top:84px}.ha-plein .ha-max.g{margin-top:auto}.ha-plein .ha-c{flex:0 0 auto;padding-top:116px;padding-bottom:0}.ha-plein .bl{margin-top:auto;padding-top:clamp(32px,5vh,56px)}}

/* ===== note 31 : le bento « Par domaine », revu ===== */
.bx-puce{background:linear-gradient(180deg,#EEF3F9 0%,#fff 72%)}
.bx-puce .bx-max-i{width:min(190px,74%);margin-top:30px}
/* « Et aussi » : quatre cartes, chacune avec son visuel */
.bx-carte{grid-column:span 3}
.bx-carte-v{display:grid;place-items:center;height:148px;margin:10px 10px 0;border-radius:16px;background:linear-gradient(180deg,#F1F4F8 0%,#F8F9FB 100%)}
.bx-carte-i{width:96px;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.16))}
.bx-carte-i.app{width:84px;border-radius:20px}
.bx-carte .sf-t{padding:18px 20px 22px;gap:6px}
.bx-carte .sf-t h3{font-size:clamp(18px,1.5vw,20px);line-height:1.2;letter-spacing:-.025em}
.bx-carte .sf-t p{font-size:14.5px}
/* les outils, qui défilent */
.bx-outils{grid-column:span 12;display:flex;align-items:center;gap:18px;padding:14px 0 14px 24px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);overflow:hidden}
.bx-outils-t{flex:none;font-size:13px;font-weight:600;color:var(--doux)}
.bx-outils .bl-defile{flex:1;min-width:0;margin-top:0}
.bx-outils ul{gap:8px;padding-right:8px}
.bx-outils .sf-outil{white-space:nowrap}
@media (max-width:1020px){.bx-carte{grid-column:span 6}}
@media (max-width:900px){.bx4 .bx-puce{grid-column:span 12}}
@media (max-width:560px){.bx-carte{grid-column:span 12}.bx-carte-v{height:120px}.bx-outils{flex-direction:column;align-items:stretch;gap:10px;padding:14px 0 14px 18px}}
/* téléphone (note 31) : tout le haut tient dans l'écran (MAX plus petit, les pastilles sur deux lignes, des écarts resserrés) */
@media (max-width:600px){
  .ha.ha-plein{padding-top:80px}
  .ha-plein.ha-ciel .ha-max.g{width:76px;margin-bottom:-70px}
  .ha-plein .ha-c{padding-top:92px}
  .ha-plein .boutons{margin-top:24px}
  .ha-plein .notes{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:20px}
  .ha-plein .bl{padding-top:28px;padding-bottom:20px}
}
/* note 32 : le titre du défilé un peu plus détaché ; une seule ligne par carte */
.ha-plein .bl-discret .bl-t{margin-bottom:18px}
.bl-discret li a{width:auto;max-width:340px;padding:12px 18px 12px 12px}

/* ===== note 32 : « Notre objectif » en une ligne par carte ; « Au quotidien » en deux parties ===== */
.ob9 .ob9-c{position:relative;gap:6px;padding:24px 22px 26px}
.ob9-i{display:block;margin-bottom:14px;color:var(--encre)}
.ob9-i .ico{width:28px;height:28px}
.ob9-o{width:56px;height:56px;object-fit:contain;margin:0 0 12px -2px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.14))}
.ob9 .ob9-c h3{font-size:20px}
.ob9 .ob9-c p{font-size:15px}
.ob9 .ob-tags{padding-top:14px}
.ob9-f{position:absolute;top:22px;right:20px;color:var(--pale);transition:transform .25s var(--ease),color .25s}
.ob9-f .ico{width:16px;height:16px}
.ob9-c:hover .ob9-f{transform:translateX(3px);color:var(--encre)}
.o9{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1000px;margin:clamp(32px,4vw,52px) auto 0}
.o9-p{padding:26px 26px 14px;border-radius:24px;background:linear-gradient(180deg,#232429 0%,#1A1B1F 100%)}
.o9-t{font-size:13px;font-weight:600;color:#A1A1A6}
.o9 ul{margin-top:10px}
.o9 li{display:flex;align-items:center;gap:16px;padding:16px 0}
.o9 li + li{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.o9-i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff}
.o9-i .ico{width:20px;height:20px}
.o9-o{flex:none;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.o9-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.o9-tx b{font-size:17px;letter-spacing:-.02em;color:#fff}
.o9-tx span{font-size:14.5px;line-height:1.4;color:#C9C9D1}
@media (max-width:760px){.o9{grid-template-columns:minmax(0,1fr)}.o9-p{padding:22px 20px 10px}}

/* ===== la revue de la note 32 : le document ===== */
.rv-h{text-align:left;margin-bottom:22px}
.rv-p32{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.rv-p32{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rv-p32{grid-template-columns:minmax(0,1fr)}}
.rv-trouve{display:flex;flex-direction:column;gap:10px}
.rv-trouve li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--ombre)}
.rv-trouve p{font-size:15px;line-height:1.5;color:var(--texte2)}
.rv-trouve p b{display:block;color:var(--encre);margin-bottom:4px}
.rv-g{flex:none;padding:4px 10px;border-radius:8px;background:var(--gris);font-size:12px;font-weight:700;color:var(--encre)}
.rv-g.g-haute{background:var(--encre);color:#fff}
.rv-decider{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rv-decider li{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--ombre)}
.rv-decider li b{font-size:17px}
.rv-decider li p{font-size:15px;line-height:1.5;color:var(--texte2)}
.rv-decider .rv-reco{color:var(--encre);font-weight:600}
@media (max-width:760px){.rv-decider{grid-template-columns:minmax(0,1fr)}}
.rv-tab{width:100%;border-collapse:separate;border-spacing:0;margin-top:18px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--ombre);font-size:14.5px;line-height:1.45}
.rv-tab th,.rv-tab td{padding:14px 16px;text-align:left;vertical-align:top}
.rv-tab thead th{font-size:12.5px;font-weight:700;color:var(--doux);background:#FAFAFA}
.rv-tab tbody tr + tr th,.rv-tab tbody tr + tr td{box-shadow:inset 0 1px 0 #F0F0F2}
.rv-tab tbody th{width:150px;font-weight:700;color:var(--encre)}
.rv-tab td span{color:var(--doux)}
.rv-dims tbody th{width:130px}
.rv-regle{font-size:15.5px;line-height:1.55;color:var(--texte2);max-width:52em}
.rv-visuels{display:flex;flex-direction:column;gap:10px;margin:6px 0 18px}
.rv-visuels li{padding:14px 18px;border-radius:16px;background:#fff;font-size:15.5px;line-height:1.5;color:var(--texte2)}
.rv-visuels b{color:var(--encre)}
@media (max-width:760px){.rv-tab{display:block;overflow-x:auto}.rv-tab tbody th{width:auto}}

/* ===================== note 33 : la page A gardée, ses textes repris ; le haut dans un cadre ; les projets dessous ; la méthode en six étapes ===================== */
/* les titres longs, parfois, sur deux lignes ; sur téléphone, la coupe naturelle */
@media (max-width:600px){.t-br{display:none}}
/* le haut : un cadre qui finit sous les pastilles, comme sur les autres pages (le bleu ciel descend vers le gris) */
.ha.ha-cadre{min-height:calc(100svh - var(--marge) - var(--pj-h,134px));background:linear-gradient(180deg,#D4E5F6 0%,#E4EEF8 40%,var(--gris) 90%)}
.ha-cadre .ha-c{padding-bottom:clamp(52px,8vh,96px)}
.ha-cadre .notes span{background:#fff}
@media (max-width:900px){.ha.ha-cadre{min-height:0}.ha-cadre .ha-c{padding-bottom:52px}}
@media (max-width:600px){.ha-cadre .ha-c{padding-bottom:40px}}
/* « Les projets de nos experts », hors du cadre, en petites cartes grises (quatre variantes) */
.pj33{padding:clamp(28px,4.4vh,44px) 0 clamp(4px,1vh,12px)}
.pj33 .bl-t{text-align:center;font-size:13.5px;font-weight:600;color:var(--encre);margin-bottom:18px}
.pj33 .bl-defile{margin-top:0}
.pj33 .bl-rail ul{gap:10px;padding-right:10px}
.pj33 li a{display:flex;align-items:center;gap:12px;border-radius:16px;background:var(--gris);color:var(--encre);transition:background .2s}
.pj33 li a:hover{background:var(--gris2)}
.pj33 .pj-logo{display:flex;align-items:center}
.pj33 .pj-logo img,.pj33 .pj-logo svg{width:auto;height:auto}
.pj-vignettes li a{width:240px;padding:8px 14px 8px 8px}
.pj-vignettes .pj-img{flex:none;width:52px;height:52px;border-radius:12px;object-fit:cover;object-position:center 30%}
.pj-vignettes .pj-tx{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.3}
.pj-vignettes .pj-tx b{font-size:17px;letter-spacing:-.03em;font-weight:700}
.pj-vignettes .pj-tx span{font-size:12.5px;color:var(--texte2)}
.pj-chiffres li a,.pj-fixes li a{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px}
.pj-chiffres li a{width:190px}
.pj-chiffres .pj-logo,.pj-fixes .pj-logo{height:20px;margin-bottom:8px}
.pj-chiffres .pj-logo img,.pj-chiffres .pj-logo svg,.pj-fixes .pj-logo img,.pj-fixes .pj-logo svg{max-height:20px;max-width:64px}
.pj-chiffres b{font-size:22px;letter-spacing:-.04em;font-weight:700;line-height:1.1}
.pj-chiffres li a > span:last-child,.pj-fixes li a > span:last-child{font-size:12.5px;line-height:1.35;color:var(--texte2)}
.pj-pastilles li a{gap:10px;padding:6px 16px 6px 6px;border-radius:999px;white-space:nowrap}
.pj-pastilles .pj-logo{justify-content:center;min-width:32px;height:30px;padding:0 10px;border-radius:999px;background:#fff;flex:none}
.pj-pastilles .pj-logo img,.pj-pastilles .pj-logo svg{max-width:48px;max-height:15px}
.pj-pastilles .pj-tx{font-size:13.5px;color:var(--texte2)}
.pj-pastilles .pj-tx b{color:var(--encre);font-weight:700}
.pj-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:var(--large);margin:0 auto;padding:0 var(--cote)}
.pj-fixes li a{height:100%;padding:16px 18px}
.pj-fixes b{font-size:26px;letter-spacing:-.045em;font-weight:700;line-height:1.1}
@media (max-width:900px){.pj-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pj-vignettes li a{width:216px}.pj-chiffres li a{width:170px}.pj33 .bl-t{margin-bottom:14px}}
/* « Au quotidien » : les exemples, montrés comme ce qui arrive dans la journée (ce qui l'a préparé, quand, le résultat) */
.b7 .o33{gap:10px}
.o33-n{flex:1;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);color:#fff;transition:background .25s}
.o33-n:hover{background:rgba(255,255,255,.1)}
.o33-n .pic{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--encre);display:grid;place-items:center;flex:none}
.o33-n .pic .ico{width:18px;height:18px}
.o33-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.o33-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.o33-h b{font-size:12.5px;font-weight:600;color:#A1A1A6}
.o33-h small{font-size:12px;color:#7C7C82;white-space:nowrap}
.o33-tx > span:last-child{font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.015em}
/* la méthode en six étapes : l'analyse et l'appel compris ; « Vous êtes ici » et le bouton sous la première */
.me33{gap:16px}
/* note 35 : la première colonne n'est plus élargie (le bouton est parti en bas) */
.me33 .me-n{position:relative;display:flex;align-items:center;gap:8px;margin-top:14px}
.me33 .me-n .nn{margin-top:0;flex:none}
.me-ici,.me-g{font-size:11.5px;font-weight:700;line-height:1;padding:6px 9px;border-radius:999px;white-space:nowrap}
.me-ici{color:#fff;background:var(--encre)}
.me-g{color:var(--encre);background:var(--gris2)}
.me-bt{margin-top:14px}
.me-bt .btn{padding:10px 16px;font-size:14px}
@media (max-width:640px){
  .me33 li > .me-n{grid-column:2;margin:0 0 6px}
  .me33 li > h3{margin-top:0}
}
/* note 35 : sur téléphone, le conteneur du numéro gardait le rond noir de methode.css (un rond vide, sans chiffre) ;
   il redevient une simple ligne « numéro + étiquette », à toutes les tailles */
.me33 .me-n{width:auto;height:auto;border-radius:0;background:none;color:inherit;font-size:inherit}
@media (max-width:640px){.me33 .me-n .nn{position:static;display:grid;width:24px;height:24px;margin:0;font-size:12px;box-shadow:none}}
.me-boutons{justify-content:center}
/* la page de revue des projets (note 33) */
.rv-pj{padding:56px 0 64px;border-top:1px solid var(--gris2)}
.rv-pj .rv-pj-t{margin-bottom:18px;font-size:15px;color:var(--texte2)}
.rv-pj .rv-pj-t b{color:var(--encre);margin-right:6px}
.rv-pj .ha.ha-cadre{min-height:0}

/* ===================== note 34 : l'audit du mobile et des formulaires ===================== */
/* le focus du clavier visible sur les fonds sombres (sections noires, fin, pied) */
.sec-noire :focus-visible,.fin :focus-visible,.pied :focus-visible,.bf-g :focus-visible,.bf-d :focus-visible{outline-color:#fff}
/* la page ne défile plus derrière le menu ouvert du téléphone */
html.menu-ouvert,html.menu-ouvert body{overflow:hidden}
/* les petites étiquettes de la méthode : 12 px au moins */
.me-ici,.me-g{font-size:12px}
@media (max-width:1020px){
  #menu a{min-height:44px;display:flex;align-items:center}
  .mt-grille [role="tab"],.agit-liste [role="tab"]{min-height:44px}
}

/* ===================== note 35 ===================== */
/* MAX (l'aide) se cache quand le menu du téléphone est ouvert : il couvrait « Se connecter » */
html.menu-ouvert .as{visibility:hidden}
/* la page « Votre espace » refaite : la grande capture juste sous le haut, la phrase « à ne jamais envoyer » */
#apercu{padding-top:8px}
.es-grande{max-width:1120px;margin:0 auto}
.es-jamais{max-width:620px;margin:22px auto 0;font-size:14px;line-height:1.5;color:var(--texte2)}
.an-lire{gap:10px;flex-wrap:wrap}
@media (max-width:640px){.an-lire{flex-direction:column;align-items:center}}
.etapes3 .lien-t{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ------------------------------------------------------------------ À propos (outils/pages/apropos.py) : pourquoi, réalisations, espace, questions */
.ap-profil{max-width:940px;margin:0 auto}
.ap-profil .logos img[src*="logo-resto"]{max-height:42px}
.ap-stats .stat .obj{width:auto;height:40px;max-width:56px;object-fit:contain;object-position:left center}
.ap-gt{margin:clamp(40px,5vw,56px) 0 16px;text-align:center}
.ap-cap .capture{max-width:880px;margin:0 auto}
.ap-sous-cap{max-width:880px;margin:22px auto 0}
.ap-avant{margin:0 0 26px}
.ap-themes{display:grid;gap:clamp(40px,5vw,64px)}
.ap-theme{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ap-theme-t{position:sticky;top:100px}
.ap-theme-t .obj{width:48px;margin-bottom:14px}
.ap-theme-t .t3{margin-bottom:10px}
.ap-theme-t .lien{font-size:14px}
.ap-theme .faq{max-width:none;margin:0}
@media (max-width:820px){.ap-theme{grid-template-columns:minmax(0,1fr)}.ap-theme-t{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}.ap-theme-t .obj{margin:0;width:40px}.ap-theme-t .t3{margin:0}.ap-theme-t .lien{flex-basis:100%}}
@media (max-width:700px){.ap-profil .logos a{height:48px;padding:0 14px}.ap-profil .logos img{max-height:22px}.ap-profil .logos img[src*="logo-resto"]{max-height:34px}}

/* ------------------------------------------------------------------ 14/11 (note 20) : l'équipe en carrousel, ce que nos experts savent faire, les six verbes */
/* l'équipe : l'expert au centre, une place en retrait de chaque côté (d'autres experts pourront s'y ajouter) */
.ap-equipe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,940px) minmax(0,1fr);gap:18px;align-items:center;margin:0 calc(var(--cote) * -1)}
.ap-equipe .ap-profil{margin:0;position:relative;z-index:1}
.ap-place{height:78%;min-height:260px;border-radius:var(--r-carte);background:var(--gris);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px;opacity:.75}
.ap-place:first-child{border-top-left-radius:0;border-bottom-left-radius:0}
.ap-place:last-child{border-top-right-radius:0;border-bottom-right-radius:0}
.ap-silh{width:64px;height:64px;border-radius:18px;background:var(--gris2);display:grid;place-items:center;color:var(--gris3)}
.ap-silh .ico{width:32px;height:32px}
.ap-place i{display:block;height:10px;border-radius:6px;background:var(--gris2);width:70%}
.ap-place i + i{width:45%}
.ap-profil .roles .lg-mot{height:1.1em;vertical-align:-.3em}
.etoiles{font-size:.95em}
@media (max-width:1100px){.ap-equipe{grid-template-columns:40px minmax(0,1fr) 40px;gap:12px}.ap-place{padding:0;min-height:200px}.ap-place>*{display:none}}
@media (max-width:700px){.ap-equipe{grid-template-columns:14px minmax(0,1fr) 14px;gap:8px}.ap-place{min-height:160px;border-radius:12px}}

/* ce que nos experts savent faire : une grille de cartes de tailles différentes */
.sf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.sf-c{position:relative;border-radius:var(--r-carte);overflow:hidden;min-width:0;isolation:isolate;display:flex;flex-direction:column;background:#fff;box-shadow:var(--ombre)}
.sf-t{display:flex;flex-direction:column;gap:8px;padding:26px 28px 28px}
.sf-t .k{font-size:13px;font-weight:600;color:var(--doux)}
.sf-t h3{font-size:clamp(22px,2.3vw,29px);line-height:1.1;letter-spacing:-.035em;color:var(--encre)}
.sf-t p{font-size:15.5px;line-height:1.45;color:var(--texte2)}
.sf-video{grid-column:span 8;min-height:440px;background:#000;justify-content:flex-end}
.sf-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.sf-video::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.88) 100%)}
.sf-video h3,.sf-video p{color:#fff}.sf-video .k{color:rgba(255,255,255,.75)}
.sf-agents{grid-column:span 4;background:var(--noir);justify-content:space-between}
.sf-points{width:calc(100% - 56px);margin:28px 28px 0;height:auto}
.sf-big{font-size:clamp(52px,5.6vw,72px);font-weight:700;letter-spacing:-.05em;line-height:.95;color:#fff}
.sf-agents h3,.sf-agents p{color:#fff}.sf-agents p{color:rgba(255,255,255,.7)}
.sf-3d,.sf-proto{grid-column:span 6}
.sf-plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:14px 30px 28px;align-items:center;justify-items:center;margin-top:auto}
.sf-plats img{width:min(124px,100%);filter:drop-shadow(0 12px 16px rgba(0,0,0,.16))}
.sf-tels{position:relative;height:270px;margin-top:auto;overflow:hidden}
.sf-tels img{position:absolute;bottom:-90px;width:150px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))}
.sf-tels .t1{left:50%;transform:translateX(-50%);z-index:2;width:170px;bottom:-70px}
.sf-tels .t0{left:50%;transform:translateX(calc(-50% - 132px)) rotate(-7deg)}
.sf-tels .t2{left:50%;transform:translateX(calc(-50% + 132px)) rotate(7deg)}
.sf-plus{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.sf-plus ul{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.sf-plus li{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--encre)}
.sf-outils{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sf-outil{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;background:var(--gris);font-size:14px;font-weight:600;color:var(--encre)}
.sf-outil svg{width:17px;height:17px}
.sf-outil i{width:17px;height:17px;border-radius:5px;background:var(--encre);color:#fff;font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center}
@media (max-width:900px){.sf-video,.sf-agents,.sf-3d,.sf-proto{grid-column:span 12}.sf-video{min-height:380px}.sf-agents{flex-direction:row;align-items:center}.sf-points{width:40%;margin:24px 0 24px 24px;flex:none}.sf-plus{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sf-agents{flex-direction:column;align-items:stretch}.sf-points{width:calc(100% - 44px);margin:22px 22px 0}.sf-t{padding:22px}.sf-tels .t0{transform:translateX(calc(-50% - 104px)) rotate(-7deg)}.sf-tels .t2{transform:translateX(calc(-50% + 104px)) rotate(7deg)}}

/* les six verbes et les projets */
.ap-six .frise{margin-top:8px}
.ap-change{margin-top:18px;font-size:13px;font-weight:700;color:var(--encre)}
.ap-change + .stats-p{margin-top:8px}
.btn .lg-mot{height:1.15em;vertical-align:-.3em;margin-left:-1px}

/* l'équipe (note 24) : la carte de l'expert au centre, à l'horizontale ; une carte de chaque côté, à 70 % de sa taille,
   poussée contre le bord de l'écran et coupée par lui, comme dans un carrousel. La bande prend toute la largeur de l'écran. */
.ap-equipe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,940px) minmax(0,1fr);align-items:center;gap:36px;
  width:100vw;margin:clamp(10px,1.6vw,24px) 0 calc(-1 * clamp(30px,4vw,56px)) calc(50% - 50vw);padding:44px 0 clamp(70px,8vw,100px);overflow:hidden}
.ap-equipe .ap-profil{grid-column:2;margin:0;position:relative;z-index:1;box-shadow:var(--ombre-forte)}
.ap-place,.ap-place:first-child,.ap-place:last-child{width:658px;max-width:none;height:auto;min-height:0;aspect-ratio:auto;padding:26px;opacity:.55;transform:none;
  border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre);display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:start;align-self:center;height:72%;overflow:hidden}
.ap-place.g{grid-column:1;grid-row:1;justify-self:end}
.ap-place.d{grid-column:3;grid-row:1;justify-self:start}
.ap-place .ap-silh{width:100%;height:auto;aspect-ratio:1;border-radius:16px;background:var(--gris);display:grid;place-items:center}
.ap-place .ap-silh .ico{width:40%;height:40%;color:#D6D6D6}
.ap-lignes{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.ap-lignes i{display:block;height:12px;border-radius:6px;background:var(--gris)}
.ap-lignes i:nth-child(1){width:46%;height:18px;border-radius:8px}
.ap-lignes i:nth-child(2){width:62%}
.ap-lignes i:nth-child(3){width:94%;margin-top:8px}
.ap-lignes i:nth-child(4){width:88%}
.ap-lignes i:nth-child(5){width:70%}
@media (max-width:1100px){.ap-equipe{gap:20px}}
@media (max-width:1000px){.ap-equipe{grid-template-columns:minmax(0,1fr);width:auto;margin-left:0;overflow:visible;padding:0}.ap-place{display:none!important}}

/* note 25 : dans la carte de l'expert, les logos des projets passent en bas, en petit, sur toute la largeur (plus de grandes cases grises) */
.ap-profil .ap-bas{grid-column:1 / -1;display:flex;align-items:center;gap:24px;padding-top:20px;border-top:1px solid #EFEFEF}
.ap-bas-t{flex:none;font-size:12.5px;font-weight:600;color:var(--doux)}
.ap-profil .ap-bas .logos{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 22px;margin:0}
.ap-profil .ap-bas .logos a{height:40px;padding:0;background:none;opacity:.8;transition:opacity .2s}
.ap-profil .ap-bas .logos a:hover{background:none;opacity:1}
.ap-profil .ap-bas .logos img{max-height:19px;max-width:96px}
.ap-profil .ap-bas .logos img.carre{max-height:30px;border-radius:8px}
.ap-profil .ap-bas .logos img[src*="logo-resto"]{max-height:32px}
.ap-profil .ap-bas .logos .mot{font-size:14px}
@media (max-width:700px){
  .ap-profil .ap-bas{flex-direction:column;align-items:flex-start;gap:10px}
  .ap-profil .ap-bas .logos{display:flex;justify-content:flex-start;gap:4px 22px}
  .ap-profil .ap-bas .logos a{height:36px;padding:0}
}

/* ------------------------------------------------------------------ L'assistant, en bas à droite (notes 20 et 21) */
.as{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.as>*{pointer-events:auto}
.as-bt{position:relative;width:62px;height:62px;border-radius:50%;background:linear-gradient(180deg,#F7F7F7,#E9E9E9);box-shadow:0 2px 6px rgba(0,0,0,.08),0 16px 36px rgba(0,0,0,.18);display:grid;place-items:center;overflow:hidden;transition:transform .2s var(--ease)}
.as-bt:hover{transform:translateY(-2px)}
.as-bt .as-av-img{width:50px;height:50px;object-fit:contain;margin-top:10px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.as-bt-x{position:absolute;inset:0;display:none;place-items:center;background:var(--encre);color:#fff;font-size:28px;font-weight:300}
.as.ouvert .as-bt-x{display:grid}
.as-bulle{position:relative;max-width:260px;border-radius:18px 18px 6px 18px;background:#fff;box-shadow:var(--ombre-forte);animation:as-in .35s var(--ease) both}
.as-bulle[hidden]{display:none}
.as-bulle-t{display:block;padding:14px 38px 14px 16px;text-align:left;font-size:14px;line-height:1.4;color:var(--texte2)}
.as-bulle-t b{display:block;color:var(--encre);font-size:15px;margin-bottom:2px}
.as-bulle-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;font-size:18px;color:var(--doux)}
.as-bulle-x:hover{background:var(--gris)}
@keyframes as-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.as-bulle{animation:none}}
.as-p{width:380px;max-width:calc(100vw - 32px);height:min(560px,calc(100svh - 120px));border-radius:24px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06),0 30px 70px rgba(0,0,0,.22);overflow:hidden;display:flex;flex-direction:column;animation:as-in .25s var(--ease) both}
.as-p[hidden]{display:none}
.as-h{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--gris)}
.as-av{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.as-av .as-av-img{width:34px;height:34px;object-fit:contain;margin-top:6px}
.as-h b{display:block;font-size:15px;color:var(--encre)}
.as-h span{display:block;font-size:12.5px;line-height:1.35;color:var(--doux)}
.as-h .lg-mot{height:1.05em;vertical-align:-.28em;color:var(--encre)}
.as-x{margin-left:auto;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--doux);flex:none}
.as-x:hover{background:#fff}
.as-c{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px}
.as-m{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;color:var(--encre)}
.as-m.bot{background:var(--gris);border-bottom-left-radius:6px}
.as-m.moi{align-self:flex-end;background:var(--encre);color:#fff;border-bottom-right-radius:6px}
.as-m a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.as-m.rep{display:flex;flex-direction:column;gap:6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 22px -12px rgba(0,0,0,.2)}
.as-m.rep b{font-size:14.5px}
.as-m.rep span{font-size:14px;color:var(--texte2)}
.as-m.rep a,.as-cr .as-tous,.as-lien{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--encre)}
.as-m .ico,.as-cr .ico,.as-btn .ico{width:14px;height:14px}
.as-m.nu{background:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.as-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:99px;background:var(--encre);color:#fff!important;font-size:14.5px;font-weight:600;text-decoration:none!important}
.as-choix{display:flex;flex-direction:column;gap:8px}
.as-choix button,.as-cr a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--gris);font-size:14.5px;font-weight:600;color:var(--encre);text-align:left;transition:background .15s}
.as-choix button:hover,.as-cr a:hover{background:var(--gris2)}
.as-choix .ico{width:18px;height:18px;flex:none}
.as-choix.petit{flex-direction:row;flex-wrap:wrap}
.as-choix.petit button{padding:8px 12px;font-size:13px;font-weight:600;border-radius:12px}
.as-cr{display:flex;flex-direction:column;gap:8px}
.as-cr a{flex-direction:column;align-items:flex-start;gap:1px;font-weight:500;font-size:13.5px;color:var(--texte2)}
.as-cr a b{font-size:14.5px;color:var(--encre)}
.as-cr .as-tous{box-shadow:none;background:none;padding:4px 2px;flex-direction:row}
.as-i{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:6px 6px 6px 14px;border-radius:16px;background:var(--gris)}
.as-i input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--encre);outline:none;padding:6px 0}
.as-i input::placeholder{color:var(--doux)}
.as-i button{width:38px;height:38px;border-radius:12px;background:var(--encre);color:#fff;display:grid;place-items:center;flex:none}
.as-i .ico{width:16px;height:16px}
.as-i:focus-within{box-shadow:0 0 0 2px var(--encre)}
.as-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){
  .as{right:12px;bottom:max(12px,env(safe-area-inset-bottom));left:12px;align-items:flex-end}
  .as-p{width:100%;max-width:none;height:min(78svh,620px)}
  .as-bt{width:56px;height:56px}
}
/* l'avatar : les deux yeux de MAX sur un rond noir (note 22) */
.as-bt{background:#0B0B0C}
.as-bt .as-yeux{width:62px;height:62px}
.as-av{background:none}
.as-av .as-yeux{width:42px;height:42px}
@media (max-width:560px){.as-bt .as-yeux{width:56px;height:56px}}
/* note 24 : plus d'anneau blanc (un contour) ; les yeux blancs suffisent à le voir sur une section noire */
.as-bt{box-shadow:0 2px 6px rgba(0,0,0,.1),0 16px 36px rgba(0,0,0,.25)}
/* sur téléphone, pas de bulle « Besoin d'aide ? » : elle cachait le texte ; le rond reste */
@media (max-width:560px){.as-bulle{display:none!important}}

/* note 26 : sur tablette aussi, plus de bulle « Besoin d'aide ? » posée sur le contenu (le bouton reste) */
@media (max-width:1024px){.as-bulle{display:none!important}}

/* La barre se cache quand on descend et revient quand on remonte (note 21 : sur téléphone et tablette ; site.js) */
@media (max-width:1020px){
  .barre{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;will-change:transform}
  .barre.cachee{transform:translate(-50%,calc(-100% - 28px));opacity:0}
}

/* ------------------------------------------------------------------ le blog (outils/pages/blog.py) : l'index et les articles */
.p-blog .haut .boutons:empty{display:none}
.bl-article .prose{padding-bottom:clamp(8px,2vw,24px)}

/* ------------------------------------------------------------------ Les grands écrans (notes 23 à 25)
   Note 25 : le contenu reste centré et resserré, à sa largeur maximale (plus de zoom) ; les fonds (hauts de page, panneaux gris ou noirs,
   fin, pied) s'étirent sur toute la largeur, avec leurs 8 px de marge, comme avant : un fond arrêté à 1 600 px laissait des bandes blanches.
   Les visuels des côtés des hauts (MAX, les objets) gardent leur distance au texte : au-delà de 1 440 px, ils suivent le centre, pas le bord. */
/* note 26 : un peu moins d'espace entre le haut et le bas du haut de l'accueil, selon la taille de l'écran */
.ha{min-height:clamp(640px,calc(88svh - var(--marge)),880px)}
.barre{width:min(1180px,calc(100% - 24px))}
@media (min-width:1441px){
  .haut .cote.gauche{left:calc(50% - 648px)}
  .haut .cote.droite{right:calc(50% - 648px)}
}

/* ------------------------------------------------------------------ Gains : /gains (classes ga-)
   Un peu de pêche, seulement pour les chiffres ; le reste en blanc, gris et noir. */

/* du temps : la classe .avant (frise) déteint sur la ligne « aujourd'hui » des barres */
#temps .be-l.avant{padding:0;border-radius:0;background:none;font-size:inherit}

/* plus de capacité : ce qui avance pendant la nuit, puis l'ordre de grandeur */
.ga-nuit{width:100%;max-width:460px;margin:0 auto;padding:10px;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre-forte)}
.ga-nuit-h{display:flex;align-items:center;gap:14px;padding:12px 12px 14px}
.ga-nuit-h .obj{width:46px}
.ga-nuit-h b{display:block;font-size:17px;letter-spacing:-.02em;color:var(--encre)}
.ga-nuit ul{display:grid;gap:6px}
.ga-nuit li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--gris);font-size:14.5px;font-weight:500;line-height:1.35;color:var(--encre)}
.ga-nuit li .ico{width:16px;height:16px;flex:none}
.ga-nuit li span{flex:1;min-width:0}
.ga-nuit li small{font-size:12.5px;font-weight:600;color:var(--doux);white-space:nowrap}
.ga-nuit-c{margin-top:10px;padding:18px 18px 20px;border-radius:16px;background:linear-gradient(160deg,var(--peche-1),var(--peche-2) 70%)}
.ga-nuit-c b{display:block;font-size:clamp(28px,3vw,36px);letter-spacing:-.05em;line-height:1;color:var(--encre)}
.ga-nuit-c span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--texte2)}

/* ce que l'IA prépare, ce que vos équipes gardent */
.ga-partage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:520px;margin:0 auto}
.ga-col{padding:24px 22px;border-radius:var(--r-carte);background:#fff}
.ga-col.noire{background:var(--noir)}
.ga-col .k{margin-bottom:16px}
.ga-col.noire .k{color:#C9C9D1}
.ga-col ul{display:grid;gap:12px}
.ga-col li{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--encre)}
.ga-col.noire li{color:#fff}
.ga-col .ico{width:17px;height:17px;flex:none;color:var(--doux)}
.ga-col.noire .ico{color:#fff}
@media (max-width:420px){.ga-partage{grid-template-columns:minmax(0,1fr)}}

/* les trois cartes : les objets à la même hauteur */
.ga-trois .carte-i .obj{width:auto;height:52px;max-width:64px;object-fit:contain;object-position:left center}

/* pourquoi maintenant : les deux cartes de l'accueil, en pêche ; puis la vision */
.ga-constat .cst.b{background:linear-gradient(160deg,var(--peche-1),var(--peche-2) 60%,#FDF8F4)}
.ga-vision{max-width:660px;margin:28px auto 0;text-align:center}
.ga-vision .fort{font-size:clamp(19px,2vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--encre);text-wrap:balance}
.ga-vision p:not(.fort):not(.source){margin-top:10px;font-size:16px;line-height:1.55;color:var(--texte2);text-wrap:pretty}
.ga-vision .source{margin-top:12px}

/* le sommaire du haut : sur téléphone, la barre suffit */
@media (max-width:640px){.ga-sommaire{display:none}}

/* ------------------------------------------------------------------ Méthode (outils/pages/methode.py et etapes.py)
   Une carte « document » d'exemple (un devis, un guide, un bilan, un espace IA), l'étape suivante, les garanties posées sur blanc,
   une capture centrée. Sans contour ni lueur : la carte blanche et son ombre, le gris pour les lignes. */
.me-doc{padding:clamp(18px,2.4vw,26px);border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre-forte)}
.me-doc-h{display:flex;align-items:center;gap:14px;padding:2px 4px 16px}
.me-doc-h .obj{width:46px;flex:none}
.me-doc-h small{display:block;font-size:12.5px;font-weight:600;color:var(--doux)}
.me-doc-h b{display:block;margin-top:1px;font-size:18px;line-height:1.25;letter-spacing:-.025em;color:var(--encre)}
.me-doc ul{display:grid;gap:8px}
.me-doc li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border-radius:14px;background:var(--gris)}
.me-doc li > .ico{width:22px;height:22px;color:var(--encre)}
.me-doc li b{display:block;font-size:15px;line-height:1.3;letter-spacing:-.015em;color:var(--encre)}
.me-doc li .tx span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--doux)}
.me-doc li em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--doux);white-space:nowrap}
.me-doc li.non b{color:var(--texte2)}
.me-vide{display:block;width:22px;height:22px;border-radius:50%;background:#fff}
.me-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--encre);color:#fff;font-size:12px;font-weight:700;font-style:normal}
.me-doc li .tx .me-barre{display:block;height:6px;margin-top:9px;border-radius:6px;background:#fff;overflow:hidden}
.me-barre i{display:block;height:100%;width:var(--p);border-radius:6px;background:var(--encre)}
.me-doc .me-pied{margin-top:14px;padding:0 4px;font-size:13px;line-height:1.45;color:var(--doux)}
@media (max-width:520px){.me-doc li{grid-template-columns:24px minmax(0,1fr)}.me-doc li em{grid-column:2}}

/* l'étape suivante, en fin de page */
.me-suite{position:relative;display:flex;align-items:center;gap:16px;max-width:640px;margin:clamp(40px,5vw,56px) auto 0;padding:18px 52px 18px 18px;border-radius:var(--r-carte);background:var(--gris);text-align:left;transition:background .2s,transform .2s var(--ease)}
.panneau .me-suite{background:#fff}
.me-suite:hover{background:var(--gris2);transform:translateY(-1px)}
.panneau .me-suite:hover{background:#fff;box-shadow:var(--ombre)}
.me-suite .obj{width:56px;flex:none}
.me-suite small{display:block;font-size:12.5px;font-weight:600;color:var(--doux)}
.me-suite b{display:block;margin-top:1px;font-size:18px;letter-spacing:-.025em;color:var(--encre)}
.me-suite .tx > span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--texte2)}
.me-suite .f{position:absolute;right:20px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--encre)}

/* les garanties sur fond blanc (sur le gris, elles gardent leur carte blanche) ; une capture centrée ; trois coches en ligne */
.me-gar .garanties{box-shadow:var(--ombre)}
.me-cap{max-width:900px;margin:0 auto}
.me-trois{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;max-width:980px;margin:26px auto 0}
@media (max-width:760px){.me-trois{grid-template-columns:minmax(0,1fr)}}
.me-cartes .carte-i .obj{width:54px;height:54px;object-fit:contain;object-position:left bottom}
/* le parcours et le zigzag sur téléphone : pas de trait en bout de ligne ; le visuel (et son numéro) avant le texte, plus petit */
@media (max-width:600px){.me-parcours .sep{display:none}}
@media (max-width:860px){.me-zz .zz-v{order:-1;min-height:160px}.me-zz .zz-v .obj{width:104px}}

/* Suivre (note 21) : « L'IA change tous les mois. Vos outils suivent. », trois cartes avec un objet 3D */
.ev-l{display:flex;flex-direction:column;gap:10px}
.ev-l>div{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:18px;background:#fff;box-shadow:var(--ombre)}
.ev-l .obj{width:52px;height:52px;object-fit:contain;flex:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.12))}
.ev-l span{font-size:14.5px;line-height:1.45;color:var(--texte2)}
.ev-l b{display:block;font-size:16px;color:var(--encre);margin-bottom:2px}

/* Intégrer l'IA (note 24) : chaque étape montre ce qu'elle remet, en petit document blanc sur le gris ; l'objet 3D posé dans le coin */
.zz-v.zz-v2{display:flex;align-items:center;justify-content:center;min-height:0;padding:clamp(48px,5vw,64px) clamp(22px,3vw,40px) clamp(28px,3vw,40px);background:var(--gris)!important}
.zz-v2 > .obj{position:absolute;right:clamp(14px,2vw,26px);top:clamp(10px,1.4vw,18px);width:clamp(72px,7vw,96px)!important;z-index:2;filter:drop-shadow(0 16px 20px rgba(0,0,0,.16))}
.zz-doc{position:relative;z-index:1;width:min(100%,400px);padding:20px 20px 18px;border-radius:18px;background:#fff;box-shadow:var(--ombre-forte)}
.zd-h{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--encre)}
.zd-h .ico{width:17px;height:17px}
.zz-doc ul{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.zz-doc li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--gris)}
.zz-doc li .tx{flex:1;min-width:0}
.zz-doc li b{display:block;font-size:13.5px;line-height:1.3;color:var(--encre)}
.zz-doc li .tx span{display:block;font-size:12.5px;color:var(--doux)}
.zd-k{padding:4px 9px;border-radius:99px;background:var(--encre);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.zd-e{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#A06A0A;white-space:nowrap}
.zd-e.ok{color:#1E8E4E}
.zd-e .ico,.zd-c{width:15px;height:15px}
.zd-c{color:#1E8E4E;flex:none}
.zd-b{width:70px;height:6px;border-radius:3px;background:#E2E2E2;overflow:hidden;flex:none}
.zd-b i{display:block;height:100%;width:var(--p);border-radius:3px;background:var(--encre)}
.zd-r{margin-top:14px;padding-top:12px;border-top:1px solid #EFEFEF;font-size:13px;line-height:1.45;color:var(--texte2)}
.zd-r b{display:block;margin-bottom:2px;font-size:12px;color:var(--doux)}
@media (max-width:860px){.zz-v.zz-v2{padding:52px 16px 20px}}

/* l'analyse (note 24) : le suivi de la demande, dessiné avec les mots du site (à la place de l'ancienne capture) */
.suivi-a{max-width:560px;margin:0 auto}
.sa-carte{border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre-forte);overflow:hidden}
.sa-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 20px;background:linear-gradient(180deg,#EAF2FA 0,#fff 100%)}
.sa-h > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.sa-k{font-size:12.5px;font-weight:700;color:var(--doux)}
.sa-t{font-size:clamp(22px,2.2vw,26px);letter-spacing:-.035em;color:var(--encre)}
.sa-s{font-size:14px;line-height:1.45;color:var(--texte2)}
.sa-h .obj{width:96px;flex:none;filter:drop-shadow(0 16px 18px rgba(0,0,0,.18))}
.sa-pas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:18px 24px 22px;border-top:1px solid #F0F0F0}
.sa-pas li{position:relative;display:flex;flex-direction:column;gap:3px;padding-top:24px;padding-right:8px}
.sa-pas li::before{content:"";position:absolute;left:10px;right:-10px;top:8px;height:2px;background:#E6E6E6}
.sa-pas li:last-child::before{display:none}
.sa-pas li.fait::before{background:var(--encre)}
.sa-pas .pt{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #D6D6D6;display:grid;place-items:center;z-index:1}
.sa-pas .fait .pt{background:#1E8E4E;box-shadow:none;color:#fff}
.sa-pas .fait .pt .ico{width:11px;height:11px}
.sa-pas .en-cours .pt{background:#fff;box-shadow:inset 0 0 0 5px var(--encre)}
.sa-pas b{font-size:13.5px;line-height:1.25;letter-spacing:-.01em;color:var(--encre)}
.sa-pas span:not(.pt){font-size:12px;color:var(--doux)}
.sa-pas .en-cours span:not(.pt){font-weight:700;color:var(--encre)}
.sa-bas{margin-top:12px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--ombre)}
.sa-m{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4;color:var(--texte2)}
.sa-m b{display:block;color:var(--encre)}
.suivi-a .legende{margin-top:14px;text-align:center}
@media (max-width:560px){.sa-pas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}.sa-pas li:nth-child(2)::before{display:none}.sa-h .obj{width:72px}}

/* l'audit (note 24) : le sommaire du rapport, et le devis qui suit (le rapport entier est plus bas dans la page) */
.som{position:relative;max-width:500px;margin:0 auto;padding-bottom:84px}
.som-doc{position:relative;z-index:1;padding:22px;border-radius:var(--r-carte);background:linear-gradient(180deg,#EAF2FA 0,#fff 110px);box-shadow:var(--ombre-forte)}
.som-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--encre)}
.som-h .ico{width:17px;height:17px}
.som-h small{margin-left:auto;font-size:12px;font-weight:600;color:var(--doux)}
.som-doc ol{display:flex;flex-direction:column;gap:7px;margin-top:16px;counter-reset:som}
.som-doc li{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;background:var(--gris);counter-increment:som}
.som-doc li::before{content:counter(som);width:22px;height:22px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.som-doc li .tx{flex:1;min-width:0}
.som-doc li b{display:block;font-size:14px;line-height:1.3;color:var(--encre)}
.som-doc li .tx span{display:block;font-size:12.5px;color:var(--doux)}
.som-doc .p{font-size:12.5px;font-weight:600;color:var(--doux);font-variant-numeric:tabular-nums}
.som-devis{position:absolute;z-index:2;right:-18px;bottom:-6px;width:min(78%,330px);padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--ombre-forte);transform:rotate(1.2deg)}
.som-l{display:block;margin-top:8px}
.som-l b{display:block;font-size:14px;color:var(--encre)}
.som-l span{display:block;font-size:12.5px;color:var(--doux)}
@media (max-width:700px){.som{padding-bottom:0}.som-devis{position:relative;right:auto;width:auto;margin-top:10px;transform:none}}

/* note 26 : sur téléphone, le titre du document laisse la place à l'objet posé en haut à droite */
@media (max-width:700px){.zz-doc .zd-h{padding-right:64px}}

/* ------------------------------------------------------------------ Métiers : /metiers (classes mt-)
   Le choix du métier reprend la mécanique des quinze familles (data-agit) mais se montre autrement : une grille de neuf
   en haut, le panneau du métier dessous. Les quinze familles, plus bas, gardent leur liste à gauche. */
.mt-choix{display:block;padding:0;background:none;border-radius:0}
.mt-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;overflow:visible}
.mt-grille button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;background:transparent;text-align:left;white-space:normal;font-size:14px;font-weight:600;color:var(--encre);transition:background .15s,box-shadow .15s}
.mt-grille button:hover{background:rgba(255,255,255,.6)}
.mt-grille button img{display:block;width:40px;height:40px;object-fit:contain;flex:none}
.mt-grille .tx{min-width:0}
.mt-grille .tx b{display:block;font-size:15px;letter-spacing:-.015em;color:var(--encre)}
.mt-grille .tx span{display:block;margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--doux)}
.mt-choix > div:last-child{margin-top:12px}
@media (max-width:640px){
  .mt-grille{gap:6px}
  .mt-grille button{flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;text-align:center}
  .mt-grille button img{width:34px;height:34px}
  .mt-grille .tx b{font-size:13px}
  .mt-grille .tx span{display:none}
}

/* le panneau d'un métier */
.mt-p .agit-h h3{font-size:clamp(24px,2.4vw,28px)}
.mt-phrase{margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--texte2)}
.mt-t{margin:28px 0 12px;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--encre)}
.mt-g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0 28px}
.mt-g .barres{grid-template-columns:minmax(0,1fr);gap:8px}
.mt-p .barre-ex{background:var(--gris);padding:14px 18px}
.mt-p .be-h{margin-bottom:6px}
.mt-p .be-h span:empty{display:none}
.mt-p .be-l.avant{padding:0;border-radius:0;background:none;font-size:inherit}   /* la classe .avant (frise) déteint sur la ligne « aujourd'hui » */
.mt-p ul.mt-briques{display:grid;gap:6px;margin-top:0}
.mt-p .mt-briques li{padding:0;background:none;border-radius:0}
.mt-briques a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--gris);font-size:14px;font-weight:600;line-height:1.35;color:var(--encre);transition:background .15s}
.mt-briques a:hover{background:var(--gris2)}
.mt-briques .ico{width:17px;height:17px;flex:none}
.mt-p ul.mt-taches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
.mt-p .mt-taches li{padding:14px 16px;font-size:14.5px}
@media (max-width:900px){.mt-g{grid-template-columns:minmax(0,1fr)}.mt-p ul.mt-taches{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.mt-p .be-l{grid-template-columns:66px minmax(0,1fr) auto;gap:8px}.mt-p .barre-ex{padding:12px 14px}}

/* ------------------------------------------------------------------ Outils : /outils-ia, /agent-ia, /tache-planifiee (classes ou-)
   Les visuels sont de petites cartes blanches posées sur une ombre douce : une liste de commandes, ce qui attend la validation,
   une relance dans les brouillons, une facture qui passe d'un logiciel à l'autre, l'espace Claude Team. Ni contour, ni lueur. */

/* le métier d'un exemple (son objet en petit, son nom) */
.ou-qui{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--texte2)}
.ou-qui img{width:20px;height:20px;object-fit:contain;flex:none}

/* les boutons dessinés dans les visuels (ils ne se cliquent pas) */
.ou-b{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;background:#fff;font-size:13px;font-weight:600;color:var(--encre);white-space:nowrap}
.ou-b.noir{background:var(--encre);color:#fff}
.ou-b .ico{width:14px;height:14px}

/* les cartes-visuels : la même famille */
.ou-palette,.ou-file,.ou-mail,.ou-team{width:100%;max-width:450px;margin:0 auto;border-radius:var(--r-carte);background:#fff;box-shadow:var(--ombre-forte);overflow:hidden}
.ou-file,.ou-team{padding:10px}
.ou-file .tx b,.ou-team .tx b{display:block;font-size:15px;letter-spacing:-.015em;color:var(--encre)}
.ou-file .tx span,.ou-team .tx span{display:block;font-size:13px;line-height:1.4;color:var(--doux);margin-top:1px}

/* les commandes prêtes : une liste de commandes, la première choisie */
.ou-pal-h{display:flex;align-items:center;gap:10px;padding:15px 18px;background:var(--gris);font-size:16px;font-weight:600;color:var(--encre)}
.ou-pal-h .ico{width:18px;height:18px}
.ou-pal-h .q::before{content:"/";color:var(--pale);margin-right:1px}
.ou-pal-h .curseur{width:2px;height:19px;border-radius:2px;background:var(--encre);margin-left:-7px;animation:ou-clic 1.1s steps(2) infinite}
@keyframes ou-clic{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ou-pal-h .curseur{animation:none}}
.ou-palette ul{display:grid;gap:2px;padding:8px}
.ou-palette li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 38px 12px 12px;border-radius:14px}
.ou-palette li.on{background:var(--gris)}
.ou-palette .pic{width:36px;height:36px;border-radius:11px;background:var(--gris);display:grid;place-items:center;flex:none;color:var(--encre)}
.ou-palette li.on .pic{background:var(--encre);color:#fff}
.ou-palette .pic .ico{width:17px;height:17px}
.ou-palette .tx b{display:block;font-size:15px;letter-spacing:-.015em;color:var(--encre)}
.ou-palette .tx span{display:block;font-size:13.5px;line-height:1.4;color:var(--texte2);margin-top:2px}
.ou-palette .f{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--encre)}
.ou-pal-n{padding:6px 20px 18px;font-size:13px;color:var(--doux)}

/* ce que l'agent a préparé attend la validation d'une personne */
.ou-file-h,.ou-team-h{display:flex;align-items:center;gap:12px;padding:12px 12px 14px}
.ou-file-h .pic{width:42px;height:42px;border-radius:12px;background:var(--encre);color:#fff;display:grid;place-items:center;flex:none}
.ou-file ul{display:grid;gap:6px}
.ou-file li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-radius:14px;background:var(--gris)}
.ou-file li .tx{min-width:0}
.ou-file-n,.ou-team-n{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 12px 6px;font-size:13.5px;font-weight:600;color:var(--encre)}
.ou-file-n .ico,.ou-team-n .ico{width:15px;height:15px}

/* la relance préparée attend dans les brouillons */
.ou-mail-h{display:flex;align-items:center;gap:8px;padding:13px 18px;background:var(--gris);font-size:13px;font-weight:600;color:var(--texte2)}
.ou-mail-h .ico{width:15px;height:15px;color:var(--encre)}
.ou-mail-l{padding:6px 20px 0}
.ou-mail-l p{display:flex;gap:12px;padding:9px 0;font-size:14px;font-weight:500;color:var(--encre)}
.ou-mail-l p + p{box-shadow:0 -1px 0 var(--gris2)}
.ou-mail-l small{width:46px;flex:none;font-size:13px;color:var(--doux)}
.ou-mail-c{padding:16px 20px 4px;box-shadow:0 -1px 0 var(--gris2)}
.ou-mail-c p{font-size:14px;color:var(--encre)}
.ou-mail-c i{display:block;height:9px;border-radius:9px;background:var(--gris2);margin-top:12px}
.ou-mail-c i.court{width:58%}
.ou-mail-b{display:flex;gap:8px;padding:20px}
.ou-mail-b .ou-b{background:var(--gris)}
.ou-mail-b .ou-b.noir{background:var(--encre)}

/* vos logiciels reliés : une facture qui passe d'un logiciel à l'autre */
.ou-flux{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:30px}
.ou-flux::before{content:"";position:absolute;left:10%;right:10%;top:32px;height:2px;background:var(--gris3)}
.ou-flux li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
.ou-flux .pic{width:64px;height:64px;border-radius:20px;background:#fff;box-shadow:var(--ombre);display:grid;place-items:center;color:var(--encre)}
.ou-flux .pic .ico{width:24px;height:24px}
.ou-flux li.fin-f .pic{background:var(--encre);color:#fff}
.ou-flux b{margin-top:14px;font-size:15.5px;letter-spacing:-.015em;color:var(--encre)}
.ou-flux li > span:last-child{margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--doux)}
.ou-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:880px;margin:40px auto 0}
.ou-notes p{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:var(--gris);font-size:14.5px;line-height:1.5;color:var(--texte2)}
.ou-notes .ico{width:20px;height:20px;flex:none;color:var(--encre);margin-top:1px}
.ou-notes b{display:block;font-size:15px;letter-spacing:-.01em;color:var(--encre)}
@media (max-width:760px){
  .ou-flux{grid-template-columns:minmax(0,1fr);gap:14px;max-width:340px;margin-left:auto;margin-right:auto}
  .ou-flux::before{left:25px;right:auto;top:26px;bottom:26px;width:2px;height:auto}
  .ou-flux li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left;padding:0}
  .ou-flux .pic{grid-row:1/3;width:52px;height:52px;border-radius:16px}
  .ou-flux .pic .ico{width:20px;height:20px}
  .ou-flux b{margin-top:0;align-self:end}
  .ou-flux li > span:last-child{margin-top:2px;align-self:start}
  .ou-notes{grid-template-columns:minmax(0,1fr)}
}

/* votre espace IA : Claude Team, un espace par service */
.ou-team .logo-c{width:42px;height:42px;border-radius:12px;background:var(--gris);display:grid;place-items:center;flex:none;color:#D97757}
.ou-claude{width:24px;height:24px}
.ou-team-k{padding:2px 12px 8px;font-size:12px;font-weight:700;color:var(--doux)}
.ou-team ul{display:grid;gap:6px}
.ou-team li{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;border-radius:14px;background:var(--gris)}
.ou-team li img{width:30px;height:30px;object-fit:contain;flex:none}
.ou-team-n{font-size:13px;color:var(--texte2)}
.ou-team-n .ico{color:var(--encre)}
.ou-team-n span{width:8px}

/* le sur mesure : les six besoins */
.ou-besoins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ou-besoins li{display:flex;flex-direction:column;padding:18px 18px 20px;border-radius:var(--r-carte);background:#fff}
.ou-besoins .obj{width:auto;height:44px;max-width:56px;object-fit:contain;object-position:left center;margin-bottom:12px}
.ou-besoins b{font-size:15.5px;letter-spacing:-.015em;color:var(--encre)}
.ou-besoins span{margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--texte2)}
#sur-mesure .etapes3 b{color:var(--encre)}
@media (max-width:640px){.ou-besoins li{padding:14px}}
@media (max-width:340px){.ou-besoins{grid-template-columns:minmax(0,1fr)}}

/* les exemples d'une tâche planifiée, rangés par rythme */
.ou-agenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ou-jour{padding:clamp(20px,2.6vw,28px);border-radius:var(--r-carte);background:#fff}
.ou-jour-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ou-jour-h .obj{width:46px}
.ou-jour-h h3{font-size:21px;letter-spacing:-.03em}
.ou-jour ul{display:grid;gap:8px}
.ou-jour li{padding:14px 16px;border-radius:16px;background:var(--gris)}
.ou-jour li p{font-size:15px;line-height:1.5;color:var(--encre)}
.ou-jour .ou-qui{margin-top:8px}
@media (max-width:820px){.ou-agenda{grid-template-columns:minmax(0,1fr)}}

/* les cartes de ces pages (les objets à la même hauteur, pour que les titres s'alignent) */
.ou-duo .carte-i{padding:30px}
.ou-duo .carte-i .obj,.ou-aussi .carte-i .obj,.ou-ex .carte-i .obj,.ou-etapes .carte-i .obj{width:auto;height:52px;max-width:64px;object-fit:contain;object-position:left center}
.ou-ex .carte-i > p,.ou-etapes .carte-i > p{font-size:14.5px}
.ou-etapes .carte-i{padding:22px}
.ou-etapes .carte-i h3{font-size:18px}

/* le sommaire du haut : sur téléphone, la barre suffit */
@media (max-width:640px){.ou-sommaire{display:none}}

/* Les fonds de l'accueil (note 24) : dans les sections elles-mêmes (sec-noire, panneau), voir accueil2.css. Les variantes de test r-noir, r-gris,
   r-conteneurs (note 22) sont retirées le 14/11 nuit. */

/* ------------------------------------------------------------------ les hauts des autres pages (note 22 : le titre plus haut, bien proportionné à toutes les tailles)
   hs-1 : la hauteur suit l'écran sans tout le prendre, le contenu centré un peu haut, MAX et l'objet à côté du texte */
/* Note 25 : le même écart entre la barre et le surtitre sur toutes les pages (accueil compris) : le contenu part d'en haut, à une distance fixe,
   au lieu d'être centré dans la hauteur (l'écart allait de 54 à 262 px selon la longueur du texte). */
:root{--haut-pad:clamp(136px,15.5vh,168px)}
@media (min-width:901px){
  .hs-1 .haut:not(.petit){min-height:clamp(540px,74svh,800px)}
  .hs-1 .haut:not(.petit) .haut-in{justify-content:flex-start;padding-top:var(--haut-pad);padding-bottom:clamp(72px,9vh,104px)}
  .hs-1 .haut .cote.gauche,.hs-1 .haut .cote.droite{top:52%;bottom:auto;transform:translateY(-40%)}
  .hs-1 .haut .cote .max{width:clamp(150px,14vw,230px)}
  .hs-1 .haut .cote .obj:not(.max){width:clamp(104px,10vw,160px)}
}
@media (min-width:901px){
  .hs-1 .haut.petit .haut-in{padding-top:var(--haut-pad)}
  .ha-c{padding-top:var(--haut-pad)}
}

/* ------------------------------------------------------------------ Le téléphone et la tablette (note 21 : « reprendre les tailles, les alignements et l'intégration sur mobile »)
   Chargé en dernier (sorted() : « zz- » passe après tous les autres). Rien ici ne s'applique au-dessus de 960 px : l'ordinateur ne bouge pas.

   LA RÈGLE D'ALIGNEMENT (téléphone, et tablette dès qu'une mise en page passe sur une colonne)
   1. L'en-tête d'une section (l'étiquette, le titre, le chapeau) est centré. Toujours, y compris quand il est à gauche
      d'un visuel sur ordinateur (« split », métiers, preuves) : sur une colonne, le visuel passe dessous et l'en-tête
      redevient l'en-tête de la section. Seul « À lire aussi » suit aussi la règle.
   2. Le contenu est aligné à gauche : le texte courant, les listes, les cartes, les étapes, les questions, les projets,
      les blocs « étape » du zigzag et les thèmes des questions fréquentes (ce sont des contenus, pas des en-têtes).
   3. Les boutons d'une section sont sur toute la largeur (420 px au plus, centrés), empilés, le principal d'abord ;
      un bouton-lien (« Réserver un appel → ») se centre dessous. Sur tablette, ils gardent leur largeur et se centrent.
      Les liens dans les cartes (« En savoir plus → ») restent à gauche, avec la carte.
   4. Les petites notes isolées (une source, une légende) sont centrées ; une note avec une icône devient un conteneur
      gris, texte à gauche.
   5. Les chiffres et les cartes à icône passent en ligne : l'icône à gauche du titre, plus de grandes cases vides. */

/* les captures de la plateforme : sur téléphone, la version prise en largeur téléphone (composants.en_telephone) */
.fenetre picture{display:block}

/* ================================================================== tablette et téléphone (≤ 960 px) */
@media (max-width:960px){
  /* l'en-tête des blocs métiers et preuves de l'accueil, passés sur une colonne */
  .metiers-a > div:first-child,.preuves-a > div:first-child{display:flex;flex-direction:column;align-items:stretch}
  .metiers-a > div:first-child > .chip,.preuves-a > div:first-child > .chip{align-self:center}
  .metiers-a > div:first-child > .t2,.preuves-a > div:first-child > .t2,
  .metiers-a > div:first-child > .chapo,.preuves-a > div:first-child > .chapo{text-align:center;margin-left:auto;margin-right:auto}
  .preuves-a > div:first-child > .chapo{margin-top:14px}
  .metiers-a > div:first-child > .renvoi{text-align:center}
  .preuves-a > div:first-child > .boutons{justify-content:center}
  /* trois cartes sur deux colonnes : la dernière prend la largeur, plus de case vide */
  .cartes.c3 > :last-child:nth-child(odd){grid-column:1/-1}
  .gains-a .cartes > :last-child:nth-child(odd){grid-column:1/-1}
  /* l'équipe (pourquoi) : pas de places vides en bande au bord de l'écran */
  .ap-equipe{grid-template-columns:minmax(0,1fr);margin:0}
  .ap-place{display:none}
  /* deux panneaux gris qui se suivent (suivi-ia) : un écart, pas une encoche */
  .panneau + .panneau{margin-top:var(--marge)}
  /* des cibles d'au moins 44 px au doigt : le pied, le sommaire et les détails des exemples */
  .pied .bas nav a{display:inline-block;padding:12px 0}
  .pied .marque .logo{padding:8px 0}
  .doc-som a{padding:12px 10px}
  main .doc-corps details > summary{min-height:44px}
  .barre .logo{padding:10px 8px 10px 0;margin:-10px auto -10px 0}
}

/* ================================================================== dès que le « split » passe sur une colonne (≤ 900 px) */
@media (max-width:900px){
  .split-t{display:flex;flex-direction:column;align-items:stretch}
  .split-t > .chip{align-self:center}
  .split-t > .t2,.split-t > .chapo{text-align:center;margin-left:auto;margin-right:auto}
  .split-t > .boutons{justify-content:center}
  .split-t > .renvoi{text-align:center}
  .a-lire .t3{text-align:center}

  /* le haut de page : MAX posé dans le flux, centré sous le contenu (plus jamais sur les pastilles) */
  .haut .cote.gauche{position:relative;order:2;left:auto;right:auto;top:auto;bottom:auto;transform:none;align-self:center;margin-top:-6px}
  .haut .cote.gauche .obj,.haut .cote.gauche .max{width:auto;height:clamp(150px,22vw,196px);max-width:240px}
  .haut:has(.cote.gauche) .haut-in{padding-bottom:30px;flex:1}
}
/* la tablette debout : le haut ne s'étire pas sur toute la hauteur d'un grand écran (trop de vide entre le texte et MAX) */
@media (min-width:641px) and (max-width:900px){
  .haut{min-height:min(calc(100svh - var(--marge)),880px)}
}

/* ================================================================== le téléphone (≤ 640 px) */
@media (max-width:640px){
  :root{--cote:20px;--r-panneau:28px}
  .panneau > .mw{padding-left:14px;padding-right:14px}
  .sec{padding:64px 0}
  .sec.serre{padding-top:32px}
  .entete{margin-bottom:28px}

  /* ---- les titres et les textes */
  .t2{font-size:clamp(27px,7.4vw,31px);line-height:1.1}
  .chapo{font-size:16.5px}
  .haut-c .chapo{font-size:17px}
  .zz-t .t2{font-size:clamp(25px,6.8vw,28px)}
  .projet h2{font-size:clamp(25px,6.8vw,28px)}

  /* ---- la règle des boutons : toute la largeur, empilés, centrés */
  main .boutons{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
  main .boutons .btn{width:100%}
  main .renvoi{display:flex;justify-content:center}
  main .renvoi .btn{width:100%;max-width:420px}
  .cr-tous{display:flex}
  .cr-tous .btn{width:100%}
  .split-t > .boutons{margin-top:24px}

  /* ---- le haut de page */
  .haut-in{padding-top:118px}
  .haut .notes{flex-direction:column;align-items:center;gap:6px;margin-top:24px}
  .haut .parcours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:400px;margin-left:auto;margin-right:auto}
  .haut .parcours .sep{display:none}
  .haut .parcours a{justify-content:center;min-height:44px}
  .sommaire{gap:6px}
  .sommaire a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px}
  .p404 .haut-in{min-height:0}
  /* un haut sans visuel (les pages de texte) n'occupe pas tout l'écran pour un titre seul */
  .haut:not(:has(.cote.gauche)){min-height:0}
  .haut:not(:has(.cote.gauche)) .haut-in{padding-bottom:56px}

  /* ---- les notes : une note à icône devient un conteneur gris, texte à gauche */
  p.avant,span.avant{display:flex;align-items:flex-start;gap:10px;width:100%;padding:13px 16px;border-radius:16px;text-align:left;line-height:1.45}
  p.avant .ico,span.avant .ico{margin-top:1px;flex:none}
  .ap-avant,p.centre:has(> span.avant){text-align:left}
  .ob-sr{justify-content:flex-start;align-items:flex-start;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--gris)}
  .ob-sr .ico{margin-top:1px}

  /* ---- les cartes à icône : l'icône à gauche du titre */
  .cartes > .carte-i:has(> .obj,> .pic),.articles > .article-c:has(> .obj){display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:center;padding:22px}
  .cartes > .carte-i:has(> .obj,> .pic) > *,.articles > .article-c:has(> .obj) > *{grid-column:1/-1}
  .cartes > .carte-i > .obj,.cartes > .carte-i > .pic,.articles > .article-c > .obj{grid-column:1;grid-row:1/span 2;width:48px;height:48px;max-width:48px;object-fit:contain;object-position:center;margin:0;align-self:center}
  .cartes > .carte-i:has(> .obj,> .pic) > .k,.articles > .article-c:has(> .obj) > .k{grid-column:2;grid-row:1;align-self:end;margin:0 0 3px}
  .cartes > .carte-i:has(> .obj,> .pic) > h3,.articles > .article-c:has(> .obj) > h3{grid-column:2;grid-row:2;align-self:start}
  .cartes > .carte-i:has(> .obj,> .pic):not(:has(> .k)) > .obj,
  .cartes > .carte-i:has(> .obj,> .pic):not(:has(> .k)) > .pic,
  .articles > .article-c:has(> .obj):not(:has(> .k)) > .obj{grid-row:1}
  .cartes > .carte-i:has(> .obj,> .pic):not(:has(> .k)) > h3,
  .articles > .article-c:has(> .obj):not(:has(> .k)) > h3{grid-row:1;align-self:center}
  .cartes > .carte-i:has(> .obj,> .pic) > p,.articles > .article-c:has(> .obj) > p{margin-top:12px}
  .cartes > .carte-i:has(> .obj,> .pic) > .ex{margin-top:14px}
  .ou-duo .carte-i{padding:22px}
  .gains-a .cartes{grid-auto-rows:auto}

  /* « Notre objectif » : la même carte en ligne */
  .ob-4{gap:10px;margin-top:28px}
  .ob-c{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:20px}
  .ob-c > *{grid-column:1/-1}
  .ob-c > .ob-o{grid-column:1;grid-row:1/span 2;width:52px;height:52px;margin:0;border-radius:15px;align-self:center}   /* note 26 : la tuile restait large de 76 px et débordait sur le texte */
  .ob-o .obj{height:38px;max-width:40px;object-position:center}
  .ob-c > h3{grid-column:2;grid-row:1;align-self:end;font-size:20px}
  .ob-c > p:not(.ob-tags){grid-column:2;grid-row:2;align-self:start}
  .ob-c .ob-tags{padding-top:14px}

  /* ---- la frise (les étapes) : l'objet et son numéro à gauche, le texte à droite */
  .frise{gap:22px;margin-top:26px}
  .frise li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start}
  .frise li > .obj{grid-column:1;grid-row:1/span 2;width:52px;height:52px}
  .frise li > .nn{position:absolute;left:32px;top:32px;margin:0;width:24px;height:24px;font-size:12px;box-shadow:0 0 0 3px #fff}
  .panneau .frise li > .nn{box-shadow:0 0 0 3px var(--gris)}
  .frise li > h3{grid-column:2;margin-top:3px;font-size:17.5px}
  .frise li > p{grid-column:2;margin-top:4px}

  /* ---- les chiffres : la valeur à gauche, ce qu'elle dit à droite */
  .preuves-a .stats{grid-template-columns:minmax(0,1fr);gap:8px}
  .preuves-a .stat{flex-direction:row;align-items:center;gap:16px;padding:14px 18px}
  .preuves-a .stat b{flex:none;min-width:98px;font-size:24px}
  .projet .stats-p span{flex:1 1 auto}

  /* ---- les barres : le métier ne se coupe pas */
  .be-h span{white-space:nowrap}

  /* ---- le zigzag de la méthode : un visuel plus bas */
  .me-zz .zz-v,.zz-v{min-height:136px}
  .me-zz .zz-v .obj{width:92px!important}
  .zz{gap:52px}

  /* ---- les familles et les métiers : des cibles de 44 px */
  .agit-liste button{min-height:44px;padding:6px 14px}

  /* ---- l'équipe (pourquoi) : le profil moins large, les logos rangés deux par deux */
  .profil{padding:22px}
  .profil .photo{max-width:150px}
  .ap-profil .logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ap-profil .logos a{height:52px;padding:0 12px}
  .ap-profil .logos a:last-child:nth-child(odd){grid-column:1/-1}

  /* ---- l'espace Claude Team (outils) : une note par ligne */
  .ou-team-n span{flex-basis:100%;width:auto;height:0}

  /* ---- les exemples posés dans la page : un sommaire qui se touche */
  .doc-som summary{padding:12px 0}
  .doc-som{padding-top:6px;padding-bottom:6px}
  main .doc-x-rapport .run{flex-wrap:wrap;row-gap:4px}
  main .doc-x-rapport .run .rr span{white-space:nowrap}
  main .doc-x-rapport .page{padding-left:8px;padding-right:8px}
  main .doc-x-rapport .sheet{padding-left:20px;padding-right:20px}
  main .doc-x-rapport .mp{row-gap:0}
  main .doc-x-rapport .mp a{min-height:40px}

  /* ---- la fin noire */
  .fin .max{width:88px}
  .tc-mots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:420px}
  .tc-mots span{justify-content:center}
  .fin-mail{line-height:1.7}
  .fin-mail a{white-space:nowrap}

  /* ---- le pied : les liens en lignes, chaque groupe sous le précédent (moins long, toujours lisible) */
  .pied{padding-top:44px}
  .pied .marque{padding-bottom:28px}
  .pied-haut{gap:30px}
  .pied .cols{grid-template-columns:minmax(0,1fr);gap:22px}
  .pied h3{margin-bottom:4px;font-size:13.5px}
  .pied ul{display:flex;flex-wrap:wrap;gap:0 20px;font-size:15px}
  .pied ul a{display:inline-block;padding:8px 0}
  .pied .bas{flex-direction:column;gap:4px;margin-top:30px}

  /* ---- le menu du téléphone : « Voir la page » se touche facilement */
  .menu .voir{padding:12px 14px 14px}
}

/* ================================================================== les petits téléphones (≤ 380 px) */
@media (max-width:380px){
  .haut-c .t1{font-size:38px}
  .preuves-a .stat b{min-width:88px;font-size:22px}
  .be-l{grid-template-columns:58px minmax(0,1fr) 84px}
}

/* sur téléphone, les hauts des autres pages prennent la hauteur de leur contenu (plus de vide entre le texte et MAX) ;
   l'accueil garde tout l'écran */
@media (max-width:600px){
  body:not(.p-accueil) .haut{min-height:0}
  body:not(.p-accueil) .haut .haut-in{flex:none;justify-content:flex-start}
}