/* ============================================================================
   ExpertMalin — Charte du pôle Accompagnement
   ----------------------------------------------------------------------------
   Sous-marque du centre de formation ExpertMalin. Reprend la grille, la typo et
   le sceau de la maison ; s'en distingue par UNE couleur d'accent qui n'est
   utilisée nulle part ailleurs sur le site.

   Répartition des accents sur expertmalin.com :
     orange   #E4610F  → le centre de formation + le parcours Créateur (RS7004)
     bleu     #3D4BB4  → le parcours Augmenté / IA (RS7311)
     émeraude #0B7A63  → LE COACHING          (ce fichier)
     violet   #6A3FBF  → LES FORMALITÉS       (ce fichier, section .pole-form)

   Cette séparation n'est pas décorative : ExpertMalin est certifié Qualiopi au
   titre des ACTIONS DE FORMATION. Le coaching n'en est pas une. L'œil doit
   pouvoir distinguer les deux offres sans lire, sous peine d'exposer
   l'indicateur 1 (information claire, exhaustive, non trompeuse) en audit.

   Pas de police distante (Google Fonts & co) : transfert de données hors UE
   pour un organisme qui publie une politique de confidentialité, et une
   dépendance réseau de plus. L'identité passe par la couleur, le rythme et le
   motif — pas par une fonte tierce.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root{
  /* socle repris à l'identique du site principal */
  --orange:#E4610F; --orange-deep:#B44A08; --orange-tint:#FBF4EE;
  --blue:#3D4BB4;   --blue-deep:#2E3A96;   --blue-tint:#F0F1FA;
  --navy:#101B30;   --navy-2:#1B2437;
  --ground:#F6F8FB; --surface:#FFFFFF;     --surface-2:#F3F5FA;
  --ink:#101B30;    --ink-soft:#4C5872;    --ink-2:#31405E; --ink-faint:#8792A8;
  --line:#E3E8F0;   --line-soft:#ECEFF5;
  --ok:#1E7A46;     --warn:#B45309;        --danger:#B0281F;

  /* accent propre au pôle */
  --coach:#0B7A63; --coach-deep:#075A48; --coach-tint:#EAF6F2; --coach-line:#BFE3D8;
  --form:#6A3FBF;  --form-deep:#4E2C92;   --form-tint:#F1ECFC;  --form-line:#DACFF5;

  --shadow-sm:0 14px 34px -22px rgba(16,27,48,.25);
  --shadow:0 30px 60px -34px rgba(16,27,48,.4);
  --glow-c:0 16px 36px -16px rgba(11,122,99,.45);
  --glow-o:0 16px 36px -16px rgba(228,97,15,.5);

  --maxw:1160px;
  --f-disp:-apple-system,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --f-body:-apple-system,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --orange:#F5813E; --orange-deep:#FF9455; --orange-tint:#2A1C10;
  --blue:#8A93E8;   --blue-deep:#A7AEEF;   --blue-tint:#191D38;
  --navy:#E8EEF6;   --navy-2:#DCE4EF;
  --ground:#0B1220; --surface:#111C2F;     --surface-2:#16223A;
  --ink:#E9EFF7;    --ink-soft:#A6B3C6;    --ink-2:#B9C4D4; --ink-faint:#74839A;
  --line:#24324B;   --line-soft:#1C2740;
  --ok:#4ECB8A;     --warn:#E0A33C;        --danger:#F0796C;
  --coach:#35CBA8;  --coach-deep:#5EE0C2;  --coach-tint:#0D2B24; --coach-line:#1E4C41;
  --form:#A98CF0;   --form-deep:#C2ACF7;   --form-tint:#1D1633;  --form-line:#3A2C63;
  --shadow-sm:0 14px 34px -22px rgba(0,0,0,.6);
  --shadow:0 30px 60px -34px rgba(0,0,0,.75);
  --glow-c:0 16px 36px -16px rgba(53,203,168,.38);
  --glow-o:0 16px 36px -16px rgba(245,129,62,.42);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --orange:#F5813E; --orange-deep:#FF9455; --orange-tint:#2A1C10;
    --blue:#8A93E8;   --blue-deep:#A7AEEF;   --blue-tint:#191D38;
    --navy:#E8EEF6;   --navy-2:#DCE4EF;
    --ground:#0B1220; --surface:#111C2F;     --surface-2:#16223A;
    --ink:#E9EFF7;    --ink-soft:#A6B3C6;    --ink-2:#B9C4D4; --ink-faint:#74839A;
    --line:#24324B;   --line-soft:#1C2740;
    --ok:#4ECB8A;     --warn:#E0A33C;        --danger:#F0796C;
    --coach:#35CBA8;  --coach-deep:#5EE0C2;  --coach-tint:#0D2B24; --coach-line:#1E4C41;
    --form:#A98CF0;   --form-deep:#C2ACF7;   --form-tint:#1D1633;  --form-line:#3A2C63;
    --shadow-sm:0 14px 34px -22px rgba(0,0,0,.6);
    --shadow:0 30px 60px -34px rgba(0,0,0,.75);
    --glow-c:0 16px 36px -16px rgba(53,203,168,.38);
    --glow-o:0 16px 36px -16px rgba(245,129,62,.42);
  }
}
/* La page Formalités bascule l'accent du pôle sans toucher au reste. */
.pole-form{ --coach:var(--form); --coach-deep:var(--form-deep); --coach-tint:var(--form-tint); --coach-line:var(--form-line); --glow-c:0 16px 36px -16px rgba(106,63,191,.42); }

/* ---------- 2. Socle ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{font-family:var(--f-body);background:var(--ground);color:var(--ink-2);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink);text-wrap:balance}
*:focus-visible{outline:2.5px solid var(--coach);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:84px}

/* ---------- 3. Signature typographique du pôle ---------- */
/* Le surtitre du pôle est émeraude et précédé d'un trait — l'écho du site
   principal, dont le surtitre est orange. Même geste, autre couleur. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--coach);text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--coach);flex:none}
.eyebrow.o{color:var(--orange)} .eyebrow.o::before{background:var(--orange)}
.lede{font-size:clamp(15.5px,1.8vw,18px);color:var(--ink-soft);max-width:62ch}

/* ---------- 4. Boutons ---------- */
.btn{font-family:var(--f-body);font-size:15px;font-weight:800;cursor:pointer;padding:13px 22px;border-radius:10px;border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .16s,box-shadow .22s,background .18s,border-color .18s,color .18s;text-align:center}
.btn-c{background:var(--coach);color:#fff;box-shadow:var(--glow-c)}
:root[data-theme="dark"] .btn-c{color:#07231C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-c{color:#07231C}}
.btn-c:hover{transform:translateY(-2px)}
.btn-o{background:var(--orange);color:#fff;box-shadow:var(--glow-o)}
:root[data-theme="dark"] .btn-o{color:#2A1206}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-o{color:#2A1206}}
.btn-o:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:var(--ground)}
.btn-navy:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--coach);color:var(--coach)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 5. Sceau & logo ---------- */
/* Le sceau reste celui de la maison (losange orange). Ce qui change, c'est la
   puce accolée : c'est elle qui nomme le pôle. On reconnaît ExpertMalin d'abord,
   le pôle ensuite — l'ordre voulu. */
.logo{display:flex;align-items:center;gap:12px;min-width:0}
.seal{position:relative;width:38px;height:38px;flex:0 0 38px}
.seal i{position:absolute;inset:0;background:var(--orange);border-radius:11px}
.seal i:last-of-type{transform:rotate(45deg)}
.seal svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.logo-tx .name{font-family:var(--f-disp);font-weight:800;font-size:19px;color:var(--ink);display:block;line-height:1;letter-spacing:-.02em}
.logo-tx .name b{color:var(--orange)}
.logo-tx .sub{font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px;display:block}
.pole-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;background:var(--coach);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
:root[data-theme="dark"] .pole-chip{color:#07231C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pole-chip{color:#07231C}}

/* ---------- 6. Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.nav-links{display:flex;gap:22px}
.nav-links a{color:var(--ink-soft);font-size:14.5px;font-weight:600;transition:color .18s}
.nav-links a:hover{color:var(--coach)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media (max-width:1000px){.nav-links{display:none}}
@media (max-width:560px){.nav-cta .hide-xs{display:none}.logo-tx .sub{display:none}}

/* Le lien de retour au centre de formation est TOUJOURS présent, en orange, en
   première position. C'est la garantie que le pôle ne prend jamais la place de
   la maison mère dans la tête du visiteur. */
.backhome{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--orange);padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);transition:border-color .18s,transform .16s}
.backhome:hover{border-color:var(--orange);transform:translateY(-1px)}

/* ---------- 7. Fil d'Ariane ---------- */
.crumb{font-size:12.5px;color:var(--ink-faint);font-weight:600;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--coach)}
.crumb span{opacity:.55}

/* ---------- 8. Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--ground))}
/* Motif propre au pôle : des lignes qui montent. Le site principal a des blobs
   et une orbite ; ici c'est une trajectoire. Le vocabulaire visuel dit déjà
   « progression », avant le premier mot lu. */
.hero-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(56deg,transparent 0 38px,color-mix(in srgb,var(--coach) 22%,transparent) 38px 39px);
  mask-image:radial-gradient(70% 80% at 78% 22%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(70% 80% at 78% 22%,#000,transparent 72%)}
.hero-in{position:relative;z-index:1;padding:44px 0 46px}
.hero h1{font-size:clamp(32px,5vw,52px);margin-top:18px;max-width:19ch}
.hero h1 .u{color:var(--coach)}
.hero .lede{margin-top:18px}
.cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:13px;color:var(--ink-faint);font-weight:600}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- 9. Sections & titres ---------- */
section.blk{padding:64px 0}
section.blk.tight{padding:44px 0}
section.blk.alt{background:var(--surface);border-block:1px solid var(--line)}
.blk h2{font-size:clamp(24px,3.4vw,34px);margin-top:12px}
.blk .lede{margin-top:14px}
.head-c{text-align:center;max-width:720px;margin:0 auto}
.head-c .lede{margin-left:auto;margin-right:auto}

/* ---------- 10. Cartes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.card.hov{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .2s}
.card.hov:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--coach-line)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- 11. Pastilles & étiquettes ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.04em}
.tag.free{background:var(--coach-tint);color:var(--coach-deep);border:1px solid var(--coach-line)}
.tag.paid{background:var(--coach);color:#fff}
:root[data-theme="dark"] .tag.paid{color:#07231C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.paid{color:#07231C}}
.tag.cert{background:var(--orange-tint);color:var(--orange-deep);border:1px solid color-mix(in srgb,var(--orange) 35%,transparent)}
.tag.neutral{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}

/* ---------- 12. Liste à coches ---------- */
.checks{display:grid;gap:10px;margin-top:16px}
/* La pastille est posée en position absolue, PAS comme colonne de grille.
   Avec `display:grid` sur le <li>, chaque enfant devient un élément de grille :
   un item « <b>Titre</b> puis du texte » se scinde en deux, et la suite du
   texte atterrit dans la colonne de 18 px — soit un mot par ligne. Constaté
   en test sur la page Qualiopi. Hors flux, le <li> redevient un bloc normal
   et son contenu se comporte comme du texte ordinaire. */
.checks li{list-style:none;position:relative;padding-left:30px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--coach-tint);border:1px solid var(--coach-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A63' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.checks.x li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0281F' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");background-color:transparent;border-color:var(--line)}

/* ---------- 13. Encadré d'appartenance ---------- */
/* Le bloc qui rappelle, sur CHAQUE page du pôle, à quoi appartient ce qu'on lit
   et ce qui est — ou n'est pas — une action de formation. */
.belong{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--orange-tint);border:1px solid color-mix(in srgb,var(--orange) 30%,transparent);border-radius:14px;padding:18px 20px}
:root[data-theme="dark"] .belong{background:var(--orange-tint)}
.belong .ic{width:38px;height:38px;border-radius:10px;background:var(--orange);display:grid;place-items:center;flex:none}
.belong .ic svg{width:20px;height:20px;stroke:#fff}
.belong h3{font-size:15.5px;margin-bottom:4px}
.belong p{font-size:13.8px;color:var(--ink-2);line-height:1.55}
.belong a{color:var(--orange-deep);font-weight:800;text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.belong{grid-template-columns:1fr}}

/* ---------- 14. Tarifs ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;align-items:stretch}
@media (max-width:940px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .24s,box-shadow .24s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.star{border-color:var(--coach);border-width:1.5px;box-shadow:var(--glow-c)}
.plan .rib{position:absolute;top:0;right:0;background:var(--coach);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-bottom-left-radius:12px;border-top-right-radius:17px}
:root[data-theme="dark"] .plan .rib{color:#07231C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plan .rib{color:#07231C}}
.plan .pname{font-family:var(--f-disp);font-weight:800;font-size:20px;color:var(--ink)}
.plan .pfor{font-size:13px;color:var(--ink-faint);font-weight:700;margin-top:5px;min-height:2.6em}
.plan .price{font-family:var(--f-disp);font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:16px;line-height:1;font-variant-numeric:tabular-nums}
.plan .price small{font-size:15px;font-weight:700;color:var(--ink-soft);letter-spacing:0}
.plan .pnote{font-size:12.5px;color:var(--ink-faint);margin-top:7px;font-weight:600}
.plan .checks{margin-top:20px;flex:1}
.plan .btn{margin-top:22px;width:100%}

/* ---------- 15. Étapes numérotées ---------- */
.steps{counter-reset:s;display:grid;gap:18px;margin-top:30px}
.step{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.step::before{content:"0" counter(s);font-family:var(--f-disp);font-weight:800;font-size:19px;color:var(--coach);letter-spacing:-.03em}
.step h3{font-size:16.5px}
.step p{font-size:14.3px;color:var(--ink-soft);margin-top:6px}
@media (max-width:560px){.step{grid-template-columns:1fr;gap:6px}}

/* ---------- 16. Passerelle vers le centre de formation ---------- */
/* Bloc orange volontairement : à ce moment de la page, on ne parle plus du
   pôle, on renvoie à la maison. */
.bridge{position:relative;overflow:hidden;background:var(--navy);border-radius:22px;padding:40px 42px;color:var(--ground)}
.bridge::after{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:repeating-linear-gradient(56deg,transparent 0 34px,rgba(228,97,15,.34) 34px 35px);
  mask-image:radial-gradient(60% 100% at 100% 50%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(60% 100% at 100% 50%,#000,transparent 70%)}
.bridge>*{position:relative;z-index:1}
.bridge h2{color:var(--ground);font-size:clamp(23px,3.2vw,31px)}
.bridge p{color:color-mix(in srgb,var(--ground) 78%,transparent);margin-top:14px;font-size:15.5px;max-width:58ch}
.bridge .eyebrow{color:var(--orange)} .bridge .eyebrow::before{background:var(--orange)}
@media (max-width:640px){.bridge{padding:30px 24px}}

/* ---------- 17. Outils ---------- */
.tool{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 19px;transition:transform .2s,border-color .2s,box-shadow .2s}
.tool:hover{transform:translateY(-3px);border-color:var(--coach-line);box-shadow:var(--shadow-sm)}
.tool .ic{width:42px;height:42px;border-radius:11px;background:var(--coach-tint);border:1px solid var(--coach-line);display:grid;place-items:center;flex:none}
.tool .ic svg{width:21px;height:21px;stroke:var(--coach);fill:none;stroke-width:1.9}
.tool .tt{font-weight:800;font-size:15px;color:var(--ink);line-height:1.25}
.tool .ts{font-size:13px;color:var(--ink-soft);margin-top:4px}
.tool .arrow{margin-left:auto;color:var(--coach);font-weight:800;flex:none;align-self:center}

/* ---------- 18. FAQ ---------- */
.faq{margin-top:28px;display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:0 20px;transition:border-color .2s}
.faq details[open]{border-color:var(--coach-line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:800;font-size:15.2px;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:21px;font-weight:800;color:var(--coach);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 18px;font-size:14.4px;color:var(--ink-soft);line-height:1.62;max-width:74ch}
.faq .ans strong{color:var(--ink-2)}

/* ---------- 19. Formulaire ---------- */
.form{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coach)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.8px;color:var(--ink-soft);line-height:1.5}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--coach);flex:none}
.formmsg{font-size:14px;font-weight:700;padding:12px 14px;border-radius:10px;display:none}
.formmsg.ok{display:block;background:var(--coach-tint);color:var(--coach-deep);border:1px solid var(--coach-line)}
.formmsg.ko{display:block;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)}

/* ---------- 20. Pied de page ---------- */
.foot{background:var(--navy);color:color-mix(in srgb,var(--ground) 72%,transparent);padding:48px 0 26px;margin-top:0}
.foot h4{color:var(--ground);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.foot a{color:color-mix(in srgb,var(--ground) 72%,transparent);font-size:14px;display:block;padding:3px 0}
.foot a:hover{color:var(--orange)}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}
.foot .about{font-size:13.6px;line-height:1.6;max-width:38ch}
.foot .bar{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
:root[data-theme="dark"] .foot{background:var(--surface-2);border-top:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{background:var(--surface-2);border-top:1px solid var(--line)}}

/* ---------- 21. Bascule de thème ---------- */
.themetog{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink-soft);transition:border-color .18s,color .18s}
.themetog:hover{border-color:var(--coach);color:var(--coach)}
.themetog svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.themetog .moon{display:none}
:root[data-theme="dark"] .themetog .sun{display:none} :root[data-theme="dark"] .themetog .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .themetog .sun{display:none} :root:not([data-theme="light"]) .themetog .moon{display:block}}

/* ---------- 22. Impression (les diagnostics doivent sortir sur papier) ---------- */
@media print{
  .nav,.foot,.noprint,.themetog{display:none!important}
  body{background:#fff;color:#000;font-size:11.5pt}
  .card,.plan{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  section.blk{padding:14px 0}
  a{color:#000;text-decoration:none}
  .printonly{display:block!important}
}
.printonly{display:none}

/* ---------- 23. Barre de navigation d'étape (outils) ---------- */
/* Utilisée par la Boussole et l'autodiagnostic Qualiopi : « précédent /
   continuer », plus le rappel des réponses manquantes. */
.navrow{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap;align-items:center}
.hint{font-size:13.5px;color:var(--warn);font-weight:700;display:none;line-height:1.5;max-width:80ch}
.hint.on{display:block}

/* ---------- 24. Barre de navigation sur petit écran ---------- */
/* Constat au test, 375 px : le libellé du bouton passait sur deux lignes, la
   puce du pôle se faisait rogner et la barre doublait de hauteur. Trois
   arbitrages, dans cet ordre de priorité :
     - la puce du pôle RESTE (c'est l'identité, et le visiteur doit savoir où
       il est) ;
     - le bouton d'appel RESTE, sur une seule ligne, avec un libellé court ;
     - la bascule de thème DISPARAÎT sous 620 px : la préférence du système
       continue de s'appliquer toute seule, on ne perd donc rien. */
.nav-cta .btn{white-space:nowrap}
.lbl-xs{display:none}
@media (max-width:620px){
  .nav-cta .themetog{display:none}
  .lbl-lg{display:none} .lbl-xs{display:inline}
  .seal{width:33px;height:33px;flex:0 0 33px}
  .logo-tx .name{font-size:16.5px}
  .logo{gap:9px}
  .pole-chip{font-size:9.5px;padding:3px 8px;letter-spacing:.08em}
  .nav-cta .btn-sm{padding:9px 13px;font-size:12.5px}
  .nav-in{gap:10px}
}
@media (max-width:390px){
  .logo-tx .name{font-size:15px}
  .nav-cta .btn-sm{padding:8px 11px;font-size:12px}
}

/* Un libelle de navigation qui se casse en deux fait grandir la barre collante
   et decale toutes les ancres de la page. */
.nav-links a{white-space:nowrap}