/* PHASE 10 — le mode sombre a ete retire : il ne couvrait que 11 pages sur 135
et faisait passer le visiteur du blanc au noir entre l'accueil et cet univers,
sans qu'il ait rien demande. Voir le rapport de phase pour la mesure. */
/* ============================================================================
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 inovforma.com :
orange #E4610F → le centre de formation + le parcours Créateur (RS7004)
bleu #3D4BB4 → le parcours Augmenté / IA (RS7311)
émeraude var(--em-marque,#E76709) → LE COACHING (ce fichier)
violet var(--em-marque,#E76709) → 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:var(--em-marque,#E76709); --orange-deep:var(--em-marque-fonce,#B44A08); --orange-tint:var(--em-marque-voile,#FDF2E8);
--blue:#3D4BB4; --blue-deep:#2E3A96; --blue-tint:#F0F1FA;
--navy:#101B30; --navy-2:#1B2437;
--ground:var(--em-fond,#F6F7F9); --surface:var(--em-surface,#FFFFFF); --surface-2:#F3F5FA;
--ink:#101B30; --ink-soft:#4C5872; --ink-2:#31405E; --ink-faint:#8792A8;
--line:var(--em-trait,#DEE3EB); --line-soft:#ECEFF5;
--ok:#1E7A46; --warn:#B45309; --danger:#B0281F;
/* accent propre au pôle */
--coach:var(--em-marque,#E76709); --coach-deep:var(--em-marque-fonce,#B44A08); --coach-tint:var(--em-marque-voile,#FDF2E8); --coach-line:var(--em-marque-ligne,#F0DFC8);
--form:var(--em-marque,#E76709); --form-deep:var(--em-marque-fonce,#B44A08); --form-tint:var(--em-marque-voile,#FDF2E8); --form-line:var(--em-marque-ligne,#F0DFC8);
--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(231,103,9,.42);
--glow-o:0 16px 36px -16px rgba(228,97,15,.5);
--maxw:1160px;
--f-disp:var(--em-f-titre);
--f-body:var(--em-f-texte);
--f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
/* 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)}
.btn-c:hover{transform:translateY(-2px)}
.btn-o{background:var(--orange);color:#fff;box-shadow:var(--glow-o)}
.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}
/* ---------- 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}
.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 , chaque enfant devient un élément de grille :
un item « Titre 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 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}
.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}
.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}
/* ---------- 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}
/* ---------- 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}
/* 44 px de haut au minimum : c'est la taille d'une pastille de doigt. En
dessous, on vise et on rate. Mesure au test : le bouton d'appel de la barre
collante tombait a 37 px sur un ecran de 390 px — et c'est le seul bouton
visible en permanence. Les references convergent sur ce seuil (WCAG 2.5.5,
Apple 44 pt, Material 48 dp). */
.nav-cta .btn-sm{padding:11px 13px;font-size:12.5px;min-height:44px}
}
@media (max-width:620px){
.nav-cta .btn-sm{min-height:44px}
}
/* 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}
/* ---------- 25. Barre d'action fixe, mobile uniquement ---------- */
/* Motivée par une mesure, pas par une mode : sur un écran de 390 px la page du
pôle fait quinze écrans de haut, avec jusqu'à 3,6 écrans sans le moindre
bouton. Quelqu'un de convaincu au milieu de la page devait remonter ou
descendre longtemps pour agir.
Trois garde-fous pour que ce ne soit pas une gêne :
- elle n'existe pas au-delà de 880 px (sur grand écran, le problème n'existe pas) ;
- elle n'apparaît qu'après le premier écran, jamais d'emblée ;
- elle s'efface quand le formulaire de contact est à l'écran — proposer de
nous parler par-dessus le formulaire pour nous parler n'a aucun sens. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;
background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);
border-top:1px solid var(--line);box-shadow:0 -10px 30px -22px rgba(16,27,48,.5);
padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
transform:translateY(115%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.stickycta.on{transform:none}
.stickycta .sc-in{display:flex;align-items:center;gap:14px;max-width:640px;margin:0 auto}
.stickycta .sc-tx{flex:1;min-width:0;line-height:1.25}
.stickycta .sc-tx b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.stickycta .sc-tx span{display:block;font-size:12px;color:var(--ink-faint);font-weight:600;margin-top:2px}
.stickycta .btn{flex:none;min-height:44px;white-space:nowrap}
@media (min-width:881px){.stickycta{display:none}}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}
/* Le pied de page doit pouvoir être lu en entier malgré la barre. */
body.has-sticky{padding-bottom:76px}
@media (min-width:881px){body.has-sticky{padding-bottom:0}}
@media print{.stickycta{display:none!important}body.has-sticky{padding-bottom:0}}
/* ---------- 26. Bandeau de rappel en milieu de page ---------- */
.relance{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
background:var(--coach-tint);border:1px solid var(--coach-line);border-radius:16px;padding:24px 28px;margin-top:38px}
.relance h3{font-size:clamp(17px,2.4vw,21px);max-width:34ch}
.relance p{font-size:13.6px;color:var(--ink-soft);margin-top:7px;max-width:52ch}
.relance .cta-row{margin-top:0}
@media(max-width:700px){.relance{padding:22px 20px}.relance .cta-row{width:100%}.relance .cta-row .btn{flex:1}}
/* ---------- 27. « Recevez votre plan par e-mail » ---------- */
/* Les résultats des diagnostics vivent en mémoire de session : fermer l'onglet
les efface. Le seul moyen de les garder était de remplir le formulaire de
contact, c'est-à-dire de demander un rendez-vous — un engagement bien plus
lourd que « je veux garder mon résultat ». Ce bloc ne demande qu'une adresse. */
.planmail{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
background:var(--coach-tint);border:1px solid var(--coach-line);border-radius:16px;padding:24px 26px;margin-top:34px}
@media(max-width:820px){.planmail{grid-template-columns:1fr;gap:18px}}
.planmail .pm-tx b{display:block;font-family:var(--f-disp);font-size:18px;font-weight:800;color:var(--ink);line-height:1.25}
.planmail .pm-tx span{display:block;font-size:13.8px;color:var(--ink-soft);margin-top:7px;line-height:1.55;max-width:46ch}
.planmail form{min-width:290px}
.pm-row{display:flex;gap:9px}
@media(max-width:460px){.pm-row{flex-direction:column}}
.pm-row input{flex:1;min-width:0;font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);
border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;min-height:46px}
.pm-row input:focus{outline:none;border-color:var(--coach)}
.pm-row .btn{white-space:nowrap;min-height:46px}
.planmail .consent{margin-top:11px;font-size:12.2px}
.planmail .formmsg{margin-top:11px}
@media print{.planmail{display:none}}
/* ---------- 28. Vignettes des outils ---------- */
/* Un pictogramme au trait dit « outil » ; il ne dit pas CE QU'ON OBTIENT. Ces
vignettes montrent l'écran de résultat — un score, une liste priorisée, une
grille d'indicateurs — pour qu'on sache avant de cliquer qu'on va simuler ou
se diagnostiquer, et non lire une page de plus. */
.tool .vig{width:104px;flex:none;border-radius:9px;overflow:hidden;border:1px solid var(--line);
background:var(--surface-2);line-height:0}
.tool .vig img{width:100%;height:auto;display:block}
@media(max-width:520px){.tool .vig{width:82px}}