@import url('/css/fonts.css');
/* ===========================================================================
   BASE PARTAGÉE SOS — feuille principale
   Les COULEURS ne sont pas ici : elles viennent de /css/brand.css, généré depuis
   le brand.json de chaque site (jetons --mc-*). Les valeurs ci-dessous ne sont
   que des replis neutres. Changer de charte = changer brand.json, rien d'autre.
   Structure : contenu 1130 px · rayons 9 / 16 / 20 px.
   =========================================================================== */

:root{
  /* — Couleurs de la référence — */
  --mc-primary:#C2479E;
  --mc-primary-dark:#9B2F7B;
  --mc-primary-soft:#C2479E22;
  --mc-ink:#3A1F33;
  --mc-body:#4A3346;
  --mc-muted:#8A7080;
  --mc-line:#F2DCE9;
  --mc-surface:#FCEFF7;
  --mc-bg:#FFF7FB;
  --mc-accent-soft:#FFD6E8;
  --mc-accent:#9D7BFF;
  --mc-pop:#FFB3D9;
  --mc-warn:#E8477A;

  /* — Jetons de composants — */
  --radius-sm:9px;
  --radius-md:16px;
  --radius-lg:20px;
  --shadow:0 8px 28px rgba(29,29,29,.07);
  --shadow-hover:0 8px 32px rgba(0,0,0,.08);
  --shell:1130px;

  --font-display:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mc-warn-bg:#FFF0F4;
  --mc-warn-line:#F8C8D6;
  --mc-success:#2E9E7E;
  --mc-success-bg:#EAF7F2;
  --mc-success-line:#BEE3D6;
  --mc-on-primary:#FFFFFF;
  --mc-on-primary-muted:#FBE4F1;
  --mc-degrade:linear-gradient(135deg,#C2479E 0%,#9D7BFF 100%)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mc-bg);color:var(--mc-body);
  font:16px/1.6 var(--font-body);
}
::selection{background:var(--mc-primary-soft);color:var(--mc-ink)}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--mc-ink);font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(34px,5vw,50px);line-height:1.14;margin:0 0 18px}
h2{font-size:clamp(28px,4vw,40px);line-height:1.18;margin:0 0 16px}
h3{font-size:clamp(20px,2.4vw,26px);line-height:1.28;margin:0 0 10px}
h4{font-size:19px;line-height:1.3;margin:0 0 8px}
p{margin:0 0 14px}
a{color:var(--mc-primary)}
strong{color:var(--mc-ink)}
/* Aucun jeton long ne doit élargir la page : à 390 px, l'adresse
   support@sosmenaupose.online faisait déborder /contact de 6 px (constaté au
   contrôle du 21/09/2026). On autorise la coupure des seules adresses/URL. */
a[href^="mailto"],a[href^="tel"],a[href^="http"],code,kbd,samp{overflow-wrap:anywhere;word-break:break-word}
ul,ol{padding-left:20px}
li{margin:6px 0}
hr{border:0;border-top:1px solid var(--mc-line);margin:34px 0}

.section-shell{width:min(var(--shell),calc(100% - 42px));margin-inline:auto}
.section{padding:72px 0}
.soft{
  background:
    radial-gradient(70% 90% at 88% 4%, color-mix(in srgb, var(--mc-accent) 20%, transparent) 0%, transparent 62%),
    var(--mc-surface);
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mc-primary);margin:0 0 14px;
}
.lede{font-size:18px;line-height:1.65;color:var(--mc-muted);max-width:740px}
.muted{color:var(--mc-muted)}
.notice{font-size:12.5px;line-height:1.55;color:var(--mc-muted)}

/* ---------- Écran de chargement (la marque au chargement du site) ----------
   Deux retraits INDÉPENDANTS, comme sur MCS :
     ① l'animation CSS `sos-splash-out` — garantie même si le JavaScript échoue ;
     ② le JS retire l'élément du DOM après le chargement (site.js).
   Affiché UNE FOIS PAR SESSION (sessionStorage) : sur un site multi-pages,
   le revoir à chaque navigation serait pénible. */
.sos-splash{
  position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;
  gap:16px;background:var(--mc-bg);animation:sos-splash-out .45s ease .85s forwards;
}
.sos-splash-mark{
  width:92px;height:92px;display:block;border-radius:26px;
  animation:sos-splash-pop .6s cubic-bezier(.2,.9,.3,1.2) both;
}
.sos-splash-nom{margin:0;font-family:var(--font-display);font-size:20px;color:var(--mc-ink)}
.sos-splash-barre{
  display:block;width:148px;height:5px;border-radius:999px;
  background:var(--mc-surface);overflow:hidden;
}
.sos-splash-barre i{
  display:block;height:100%;width:0;border-radius:999px;
  background-image:var(--mc-degrade);animation:sos-splash-fill .9s ease-out forwards;
}
@keyframes sos-splash-fill{to{width:100%}}
@keyframes sos-splash-pop{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@keyframes sos-splash-out{to{opacity:0;visibility:hidden}}
.sos-splash.sos-splash-out{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
/* Déjà vu dans cette session : masqué AVANT le premier rendu (script en ligne placé
   juste après <body>, avant l'élément) — sinon on verrait un scintillement à chaque
   changement de page sur un site multi-pages. */
html.sos-splash-deja .sos-splash{display:none!important}
/* Respect de « mouvement réduit » : on raccourcit tout, on ne supprime pas le
   repère de chargement (il informe, ce n'est pas un effet). */
@media(prefers-reduced-motion:reduce){
  .sos-splash{animation-duration:.01s;animation-delay:.25s}
  .sos-splash-mark{animation:none}
  .sos-splash-barre i{animation-duration:.25s}
}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:20;min-height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px max(22px,calc((100vw - var(--shell))/2));
  background:color-mix(in srgb, var(--mc-bg) 94%, transparent);border-bottom:1px solid var(--mc-line);
  backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--mc-ink)}
/* Le logo est un SVG en ligne : il suit donc la charte du site (--mc-primary,
   --mc-pop) sans qu'aucun fichier ne soit à regénérer. `overflow:visible` empêche
   toute troncature silencieuse du nom ou de la baseline. */
.brand-svg{height:44px;width:auto;display:block;overflow:visible;flex:none}
/* Logo officiel en image (brand.json → logoImage) : même hauteur que le lockup SVG. */
.brand-img{height:44px;width:auto;max-width:100%;object-fit:contain;display:block;flex:none}
.brand-name{font-family:var(--font-display);font-size:21px;fill:var(--mc-ink)}
.brand-baseline{font-family:var(--font-body);font-size:10px;letter-spacing:1.4px;fill:var(--mc-primary-dark);text-transform:uppercase}
.site-header nav{display:flex;align-items:center;gap:22px}
.site-header nav a{color:var(--mc-ink);text-decoration:none;font-size:14px;font-weight:500}
.site-header nav a:hover{color:var(--mc-primary)}
.nav-cta{
  display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;
  background-color:var(--mc-primary);background-image:var(--mc-degrade);
  color:var(--mc-on-primary)!important;font-weight:600!important;font-size:13.5px!important;
}
.nav-cta:hover{filter:brightness(.93)}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--mc-line);border-radius:12px;background:#fff;color:var(--mc-primary);font-size:20px;cursor:pointer}
/* Le menu mobile n'existe que sous 768 px : sans cette règle, les deux menus
   s'affichent en même temps sur grand écran (défaut constaté au contrôle visuel). */
.site-header nav.nav-mobile{display:none}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;
  background-color:var(--mc-primary);background-image:var(--mc-degrade);
  color:var(--mc-on-primary);font:600 15px var(--font-body);text-decoration:none;
  transition:filter .2s,transform .2s;
}
.btn:hover{filter:brightness(.93);transform:translateY(-1px)}
.btn.ghost{background:var(--mc-bg);background-image:none;color:var(--mc-primary);border:1px solid var(--mc-primary)}
.btn.ghost:hover{background:var(--mc-primary-soft);color:var(--mc-primary-dark);filter:none}
.btn.quiet{background:var(--mc-surface);color:var(--mc-ink)}
.btn.quiet:hover{background:#ECEEEE}
.btn.coral{background:var(--mc-accent)}
.btn.coral:hover{background:var(--mc-warn)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Hero ---------- */
/* Halo doux derrière le hero : la couleur vient de --mc-accent-soft, donc il suit
   la charte du site (rose dragée ici, autre teinte ailleurs). */
.hero{
  padding:64px 0 58px;
  background:
    radial-gradient(58% 62% at 12% 8%, var(--mc-accent-soft) 0%, transparent 68%),
    radial-gradient(42% 52% at 92% 22%, color-mix(in srgb, var(--mc-accent) 26%, transparent) 0%, transparent 70%);
}
/* Colonne de texte elargie : un titre de hero doit tenir sur UNE ligne (mesure au navigateur) */
.hero .hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.hero h1{max-width:none}
/* 981-1130px : la colonne de titre est trop etroite pour un titre long -> on empile
   (sinon le titre casse en deux lignes, ce qui est precisement ce qu'on veut eviter) */
@media (min-width:981px) and (max-width:1130px){.hero .hero-grid{grid-template-columns:1fr;gap:30px}}
/* Accroche de hero : la ligne courte sous le titre, qui dit EN QUOI le site est different */
.hero .accroche{font-size:21px;line-height:1.45;font-weight:600;color:var(--mc-ink);max-width:46ch;margin:0 0 14px}
.hero .intro{font-size:19px;line-height:1.6;color:var(--mc-muted);max-width:56ch;margin:0 0 24px}
.hero-card{
  background:var(--mc-surface);border-radius:var(--radius-lg);padding:26px;
  border:1px solid var(--mc-line);
}
.hero-card h3{font-size:20px;margin-bottom:8px}
.hero-card ul{list-style:none;padding:0;margin:0}
.hero-card li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--mc-body);margin:9px 0}
.hero-card li b{color:var(--mc-primary);flex:none}

/* ---------- Bandeau de chiffres ---------- */
.stats{background-color:var(--mc-primary);background-image:var(--mc-degrade);color:#fff;padding:44px 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.stats b{display:block;font-family:var(--font-display);font-size:clamp(30px,4vw,44px);line-height:1;color:#fff;margin-bottom:12px}
.stats p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mc-on-primary-muted)}
.stats .live-counter{grid-column:1/-1;margin:0}

/* ---------- Grilles de cartes ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.card,.grid article{
  background:#fff;border:1px solid var(--mc-line);border-radius:var(--radius-md);
  padding:24px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
}
.card:hover,.grid article:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.grid article > b:first-child{
  display:inline-block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mc-primary);
}
.grid article p{margin:0;font-size:14.5px;color:var(--mc-muted)}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}

/* ---------- Liste de liens en cartes ---------- */
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.link-card{
  display:flex;flex-direction:column;gap:6px;padding:20px;text-decoration:none;
  background:#fff;border:1px solid var(--mc-line);border-radius:var(--radius-md);
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.link-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--mc-primary)}
.link-card b{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--mc-ink)}
.link-card span{font-size:13.5px;color:var(--mc-muted);line-height:1.5}

/* ---------- Pictogrammes (famille SOS — sprite partagé) ----------
   Un seul fichier pour toute la famille : /images/pictos.svg (des <symbol>).
   Ils n'ont AUCUNE couleur écrite : ils prennent celle de la page par
   `currentColor`, donc la charte du site les teinte sans régénérer de fichier.
   Usage : <svg class="picto" aria-hidden="true"><use href="/images/pictos.svg#picto-sommeil"></use></svg>
   ------------------------------------------------------------------ */
.picto{
  display:block;flex:none;width:32px;height:32px;fill:none;
  stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.picto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.picto-card{
  display:flex;align-items:center;gap:15px;padding:16px 18px;text-decoration:none;
  background:#fff;border:1px solid var(--mc-line);border-radius:var(--radius-md);
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.picto-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--mc-accent)}
.picto-card > div{min-width:0}
.picto-card .picto{
  width:34px;height:34px;padding:9px;box-sizing:content-box;
  color:var(--mc-primary);background:var(--mc-primary-soft);border-radius:13px;
}
.picto-card b{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:400;color:var(--mc-ink)}
.picto-card span{display:block;font-size:14px;color:var(--mc-muted);line-height:1.45;margin-top:2px}
.picto-card:hover b{color:var(--mc-primary-dark)}
/* Picto posé en tête d'une carte de lien existante */
.link-card > .picto{width:30px;height:30px;padding:8px;box-sizing:content-box;color:var(--mc-primary);background:var(--mc-primary-soft);border-radius:12px;margin-bottom:2px}

/* ---------- Encadrés ---------- */
.callout{
  border-left:4px solid var(--mc-primary);background:var(--mc-surface);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 20px;margin:24px 0;
}
.callout p:last-child{margin-bottom:0}
.callout.warn{border-left-color:var(--mc-accent);background:var(--mc-warn-bg)}
.callout.info{border-left-color:var(--mc-accent);background:var(--mc-surface)}
/* Présence du violet clair (2e couleur de la charte) : réservée aux SURFACES et aux
   contours, jamais au texte — #9D7BFF sur blanc ne passe pas le contraste minimum. */
.chips li{border-color:color-mix(in srgb, var(--mc-accent) 34%, var(--mc-line))}
.link-card:hover,.module-links a:hover{border-color:var(--mc-accent)}
.family{border-color:color-mix(in srgb, var(--mc-accent) 22%, var(--mc-line))}
/* Le libellé de l'encadré est le PREMIER enfant direct. La règle ne doit JAMAIS
   viser tous les <b> : un <b> en cours de phrase (ex. « le <b>15</b> ou le
   <b>112</b> ») se retrouverait en bloc et casserait la phrase — défaut constaté
   au contrôle visuel du 21/09/2026 sur /poser-une-question. */
.callout > b:first-child{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mc-primary);margin-bottom:6px;
}
.callout.warn > b:first-child{color:var(--mc-warn)}
.callout.notice-legal{border-left-color:var(--mc-muted);background:#FAFAFA;font-size:13px;color:var(--mc-muted)}

/* ---------- Symptômes ---------- */
.family{border:1px solid var(--mc-line);border-radius:var(--radius-md);padding:22px;background:#fff;box-shadow:var(--shadow);margin-bottom:18px}
.family b.tag{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--mc-primary-soft);color:var(--mc-primary-dark);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0 0}
.chips li{
  margin:0;padding:8px 13px;border:1px solid var(--mc-line);border-radius:999px;
  background:var(--mc-surface);font-size:13.5px;color:var(--mc-body);
}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--mc-line);border-radius:var(--radius-sm);background:#fff;margin-bottom:10px;padding:0 18px}
.faq summary{
  cursor:pointer;padding:16px 0;font-family:var(--font-display);font-size:17px;color:var(--mc-ink);
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--mc-primary);font-family:var(--font-body);font-size:20px;flex:none}
.faq details[open] summary span{transform:rotate(45deg);display:inline-block}
.faq details p{color:var(--mc-muted);font-size:14.5px;padding-bottom:6px}

/* ---------- Tarifs ---------- */
.pricing{padding:72px 0;background:var(--mc-surface)}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.price-card{
  display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--mc-line);
  border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);
}
.price-card.featured{border-color:var(--mc-primary);box-shadow:0 0 0 2px var(--mc-primary-soft),var(--shadow)}
.price-card p{margin:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mc-primary)}
.price-card strong{font-family:var(--font-display);font-size:32px;font-weight:400;color:var(--mc-ink);line-height:1}
.price-card strong small{font-family:var(--font-body);font-size:13px;color:var(--mc-muted);font-weight:400}
.price-card > span{font-size:13.5px;color:var(--mc-muted);line-height:1.5;min-height:40px}
.price-card .btn{width:100%;margin-top:6px}

/* ---------- Compteur en direct ---------- */
.live-counter{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;
  padding:11px 18px;border:1px solid var(--mc-line);border-radius:999px;background:#fff;
  box-shadow:var(--shadow);font:400 14px/1.4 var(--font-body);color:var(--mc-muted);
}
.stats .live-counter{border-color:#ffffff40;background:#ffffff14;color:var(--mc-on-primary-muted);box-shadow:none}
.stats .live-counter .lc-num{color:#fff}
.live-counter .lc-dot{width:9px;height:9px;border-radius:50%;background:var(--mc-primary);box-shadow:0 0 0 4px var(--mc-primary-soft);flex:none}
.stats .live-counter .lc-dot{background:var(--mc-pop);box-shadow:0 0 0 4px rgba(216,226,103,.25)}
.live-counter[data-mode="live"] .lc-dot{animation:lc-pulse 2.4s ease-in-out infinite}
@keyframes lc-pulse{0%,100%{box-shadow:0 0 0 4px var(--mc-primary-soft)}50%{box-shadow:0 0 0 9px rgba(0,88,75,.06)}}
.live-counter .lc-num{font:700 18px/1 var(--font-body);color:var(--mc-ink);font-variant-numeric:tabular-nums}
.live-counter .lc-state{color:var(--mc-primary);font-weight:600}
.live-counter[data-mode="repli"] .lc-state{color:var(--mc-muted);font-weight:400}
/* Accueil : la pastille « Faire le point » et le compteur vivant restent CÔTE À
   CÔTE tant que la place le permet (Rodgers, 21/09/2026). La règle tactile
   générale met chaque bouton en pleine largeur sous 700 px — on la neutralise
   ICI seulement, sinon le compteur est repoussé à la ligne dès 700 px alors
   qu'il y a la place. Sous ~560 px, la place manque vraiment : le compteur
   passe à la ligne (seul comportement lisible, sans descendre sous 14 px). */
.symptom-form .btn-row{flex-wrap:wrap;align-items:center}
@media (max-width:700px){
  .symptom-form .btn-row > .btn{width:auto}
}

/* ---------- Pied de page ---------- */
footer.site,body > footer{
  background:var(--mc-surface);border-top:1px solid var(--mc-line);margin-top:0;
  padding:54px max(5%,calc((100vw - var(--shell))/2)) 26px;
}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.footer-cols > div{display:flex;flex-direction:column;gap:7px;min-width:0}
.footer-cols b{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mc-primary);margin-bottom:4px}
.footer-cols a{font-size:13.5px;color:var(--mc-muted);text-decoration:none;overflow-wrap:anywhere}
.footer-cols a:hover{color:var(--mc-primary)}
.footer-cols .legal-title{margin-top:14px}
.footer-brand p{max-width:270px;font-size:12.5px;line-height:1.55;color:var(--mc-muted);margin:10px 0 0}
.footer-brand .brand-svg{height:38px}
.footer-brand .brand-img{height:38px}
.footer-note{
  grid-column:1/-1;border-top:1px solid var(--mc-line);margin-top:8px;padding-top:16px;
  font-size:12.5px;color:var(--mc-muted);
}

/* ---------- Pages internes / compte ---------- */
.compte-shell{width:min(760px,calc(100% - 40px));margin:44px auto 70px}
.compte-shell.wide{width:min(var(--shell),calc(100% - 42px))}
.lede + .card,.lede + form{margin-top:26px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label,.row label{font:600 13.5px var(--font-body);color:var(--mc-ink)}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--mc-line);border-radius:var(--radius-sm);
  background:#fff;color:var(--mc-ink);font:15px var(--font-body);outline:none;
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
input:focus,textarea:focus,select:focus{border-color:var(--mc-primary);box-shadow:0 0 0 3px var(--mc-primary-soft)}
.hint{font-size:12.5px;color:var(--mc-muted);line-height:1.5;margin:8px 0}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--mc-body);line-height:1.5}
.check input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--mc-primary)}
.message{margin:16px 0;padding:13px 16px;border-radius:var(--radius-sm);font-size:14px;background:var(--mc-surface);border:1px solid var(--mc-line)}
.message.ok{background:var(--mc-success-bg);border-color:var(--mc-success-line);color:var(--mc-primary-dark)}
.message.err{background:var(--mc-warn-bg);border-color:var(--mc-warn-line);color:#A8452A}
.module-links{display:flex;flex-direction:column;gap:8px;padding:0;list-style:none}
.module-links li{margin:0}
.module-links a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--mc-line);border-radius:var(--radius-sm);background:#fff;text-decoration:none;color:var(--mc-ink);font-weight:500}
.module-links a:hover{border-color:var(--mc-primary);background:var(--mc-surface)}
.disclaimer{font-size:13px;line-height:1.6;color:var(--mc-muted);border-top:1px solid var(--mc-line);padding-top:16px;margin-top:28px}
.reponse{white-space:pre-wrap;font-size:15.5px;line-height:1.7}
.delai{display:inline-block;margin-bottom:14px;padding:8px 14px;border-radius:999px;background:var(--mc-primary-soft);color:var(--mc-primary-dark);font-size:13px;font-weight:600}
.sources{padding-left:20px;font-size:13.5px;color:var(--mc-muted)}
.sources li{margin:8px 0}
.ia-mention{margin-top:18px;font-size:12.5px;color:var(--mc-muted);font-style:italic}
.audio-reponse{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.cout-bloc{margin:18px 0;padding:13px 16px;border-radius:var(--radius-sm);background:var(--mc-surface);border:1px solid var(--mc-line);font-size:14px}
.cout-bloc b{color:var(--mc-primary-dark)}

/* ---------- Progression du bilan ---------- */
.quiz-progress{height:7px;border-radius:999px;background:var(--mc-surface);overflow:hidden;margin:22px 0 8px}
.quiz-progress i{display:block;height:100%;background:var(--mc-primary);width:0;transition:width .25s}
.quiz-step{display:block;font-size:12.5px;color:var(--mc-muted);margin-bottom:20px}
.quiz-question{border:1px solid var(--mc-line);border-radius:var(--radius-md);padding:24px;background:#fff;box-shadow:var(--shadow)}
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.scale button{
  min-height:56px;border:1px solid var(--mc-line);border-radius:var(--radius-sm);background:#fff;
  color:var(--mc-body);font:600 13.5px var(--font-body);cursor:pointer;padding:8px;
}
.scale button:hover{border-color:var(--mc-primary)}
.scale button.on{background:var(--mc-primary);border-color:var(--mc-primary);color:#fff}
.choices{display:grid;gap:9px;margin-top:14px}
.choices button{
  min-height:52px;text-align:left;border:1px solid var(--mc-line);border-radius:var(--radius-sm);
  background:#fff;color:var(--mc-body);font:500 15px var(--font-body);cursor:pointer;padding:12px 16px;
}
.choices button:hover{border-color:var(--mc-primary)}
.choices button.on{background:var(--mc-primary-soft);border-color:var(--mc-primary);color:var(--mc-primary-dark);font-weight:600}
.score-row{display:flex;align-items:center;gap:14px;margin:12px 0}
.score-row span{flex:0 0 190px;font-size:14px;color:var(--mc-body)}
.score-bar{flex:1;height:10px;border-radius:999px;background:var(--mc-surface);overflow:hidden}
.score-bar i{display:block;height:100%;background:var(--mc-primary)}
.score-row b{flex:0 0 44px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Bandeau d'alerte ---------- */
.alert-strip{background:var(--mc-ink);color:#fff;padding:11px 0;font-size:13px}
.alert-strip .section-shell{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.alert-strip a{color:var(--mc-pop)}

/* ---------------------------------------------------------------------------
   TOUCHE DE LA MAISON — « CARD GLOW »
   L'effet personnalise de la maison (MCS / NDSA), decline sur la charte de
   CHAQUE site : au repos une ombre douce teintee de la couleur principale, au
   survol un halo qui s'allume (lisere + lueur + lueur large) et la carte se
   souleve d'un cran. La couleur ne touche que l'ombre et le lisere — jamais le
   texte (violet sur blanc interdit par la charte).
   • `.card-glow` : la classe a poser sur TOUTE carte / CTA cliquable des
     nouvelles conceptions (regle maison, Rodgers 21/09/2026).
   • les cartes deja ecrites de la base en heritent par la liste ci-dessous.
   --------------------------------------------------------------------------- */
.card-glow,
.card,.grid article,.link-card,.picto-card,.family,.price-card,.faq details{
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.card-glow,
.card,.grid article,.link-card,.picto-card,.family,.price-card{
  box-shadow:0 10px 30px color-mix(in srgb, var(--mc-primary) 12%, transparent);
}
.card-glow:hover,.card-glow:focus-within,
.card:hover,.card:focus-within,
.grid article:hover,.grid article:focus-within,
.link-card:hover,.link-card:focus-within,
.picto-card:hover,.picto-card:focus-within,
.family:hover,.family:focus-within,
.price-card:hover,.price-card:focus-within,
.faq details:hover,.faq details:focus-within{
  box-shadow:
    0 0 0 1px var(--mc-primary),
    0 0 18px color-mix(in srgb, var(--mc-primary) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--mc-primary) 28%, transparent),
    0 14px 34px color-mix(in srgb, var(--mc-primary) 22%, transparent);
  transform:translateY(-3px);
}
@media(prefers-reduced-motion:reduce){
  .card-glow,.card,.grid article,.link-card,.picto-card,.family,.price-card,.faq details{transition:none!important}
  .card-glow:hover,.card:hover,.grid article:hover,.link-card:hover,.picto-card:hover,
  .family:hover,.price-card:hover,.faq details:hover{transform:none}
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero .hero-grid{grid-template-columns:1fr;gap:30px}
  .stats-grid{grid-template-columns:1fr;gap:24px}
  .grid,.grid.four,.link-grid{grid-template-columns:repeat(2,1fr)}
  .picto-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:1fr 1fr;gap:26px 20px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:768px){
  .site-header nav.nav-desktop{display:none}
  .nav-burger{display:grid;place-items:center}
  .site-header nav.nav-mobile{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-bottom:1px solid var(--mc-line);padding:8px 16px 14px;
  }
  .site-header nav.nav-mobile.open{display:flex}
  .site-header nav.nav-mobile a{padding:13px 0;border-bottom:1px solid var(--mc-line);font-size:15px}
  .site-header nav.nav-mobile a:last-child{border-bottom:0}
}
@media(max-width:700px){
  /* Zones tactiles : tout lien autonome (pied de page, listes, navigation) fait
     au moins 44 px de haut. Les liens en cours de phrase restent en ligne —
     les étirer casserait la lecture du texte (exemption WCAG pour l'inline). */
  .footer-cols a,.module-links a,.nav-mobile a,.card a.btn,.link-card,
  .legal-toc a,.faq summary,.credit-tuile .btn{display:inline-flex;align-items:center;min-height:44px}
  .footer-cols a,.module-links a,.legal-toc a{width:100%}
  .grid,.grid.two,.grid.four,.link-grid,.price-grid{grid-template-columns:1fr}
  .picto-grid{grid-template-columns:1fr}
  .picto-card{min-height:64px}
  .footer-cols{grid-template-columns:1fr}
  .section{padding:52px 0}
  .hero{padding:42px 0 40px}
  .scale{grid-template-columns:repeat(2,1fr)}
  .score-row span{flex-basis:120px;font-size:13px}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .compte-shell{width:calc(100% - 32px);margin:26px auto 54px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------------------------
   BARRE DE SAISIE DE LA FAMILLE SOS — une seule barre, sur toutes les pages
   Memes fonctions sur tous les sites SOS, couleurs prises dans les jetons du
   site (--mc-*). barre-media-famille
   Disposition imposee (Rodgers, 21/09/2026) : le champ ecrit, puis UNE ligne
      [photo] [video] ................ [audio] [envoyer]
   « ENVOI + AUDIO a droite, CAMERA PHOTO + VIDEO a gauche », et rien ne passe
   a la ligne : les pastilles se compactent au lieu de s'empiler.
   --------------------------------------------------------------------------- */
.barre-saisie{margin:20px 0 0;padding:6px 8px 8px;border:1px solid var(--mc-line);border-radius:24px;
  background:#fff;box-shadow:0 4px 18px color-mix(in srgb, var(--mc-primary) 10%, transparent)}
.barre-saisie > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.barre-saisie textarea{display:block;width:100%;min-height:120px;padding:12px 10px;border:0;
  background:transparent;box-shadow:none;resize:vertical;font:16px/1.55 var(--font-body);color:var(--mc-body)}
.barre-saisie textarea:focus{outline:none}
.barre-pied{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:2px 2px 0}
.barre-pied p{margin:0}
.barre-media{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;flex-wrap:nowrap;margin:0}
.barre-boutons{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.btn.rond{width:48px;min-width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}
.btn.rond svg{flex:none}
.btn.rond.rec{background:var(--mc-warn);color:#fff}
/* Les QUATRE pastilles de media restent sur UNE ligne : elles se compactent
   (jamais width:100%, jamais de passage a la ligne). Jamais sous 14 px (charte).
   Sous 680 px le libelle s'efface — l'icone (48 px, zone tactile >= 44 px) reste,
   le sens est porte par aria-label/title. */
.barre-media .btn{flex:0 1 auto;width:auto;min-width:0;padding:0 14px;font-size:14px;white-space:nowrap}
.barre-media .btn .libelle{display:inline}
@media (max-width:700px){
  .barre-media .btn{padding:0 10px}
}
@media (max-width:680px){
  .barre-media .btn{width:48px;min-width:48px;padding:0;justify-content:center}
  .barre-media .btn .libelle{display:none}
}
.video-bloc{margin:18px 0;padding:15px 16px;border-radius:var(--radius-sm);
  background:var(--mc-surface);border:1px solid var(--mc-line)}
.video-bloc .video-titre{margin:0 0 10px;font-size:14px;color:var(--mc-body)}
.video-bloc .hint{font-size:12.5px;color:var(--mc-muted);margin:8px 0 0;line-height:1.5}
.video-bloc .btn-row{margin:0;flex-wrap:nowrap}
.video-bloc .btn-row .btn{flex:0 1 auto;width:auto;min-width:0;padding:0 14px;font-size:14px;white-space:nowrap}
#media-apercu{margin:12px 0 0}
#media-apercu img,#media-apercu video{max-width:100%;max-height:320px;border-radius:var(--radius-sm);
  border:1px solid var(--mc-line);display:block}
#media-retirer{margin-top:10px}
.studio-photo{margin:12px 0 0;padding:12px;border-radius:var(--radius-sm);
  background:var(--mc-bg);border:1px solid var(--mc-line)}
.studio-photo video{width:100%;max-height:340px;border-radius:var(--radius-sm);
  background:#000;display:block}
.studio-photo .btn-row{margin:10px 0 0}
label.btn{cursor:pointer}
@media (max-width:520px){
  .video-bloc .btn-row{gap:6px}
}

/* ---------------------------------------------------------------------------
   ONGLET LANGUE (famille SOS) — discret, dans l'en-tete, a cote du menu.
   Chaque lien mene a LA MEME PAGE dans l'autre langue. Une langue sans
   traduction est grisee et non cliquable : on ne promet pas une page absente.
   --------------------------------------------------------------------------- */
.nav-langues{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto}
.nav-langues a{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;padding:0 7px;border-radius:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;text-decoration:none;
  color:var(--mc-muted);border:1px solid transparent;transition:background .15s,color .15s}
.nav-langues a:hover{background:var(--mc-surface);color:var(--mc-ink)}
.nav-langues a:focus-visible{outline:2px solid var(--mc-primary);outline-offset:2px}
.nav-langues a.langue-active{background:var(--mc-primary);color:#fff;border-color:var(--mc-primary)}
.nav-langues a.langue-absente{opacity:.45;cursor:not-allowed;text-decoration:line-through}
/* ⚠️ Sans ces regles, l'onglet langue DEBORDAIT sur mobile : « ES » sortait de
   l'ecran (defaut constate le 21/09 a 430 px). Le logo doit pouvoir se reduire. */
.site-header{flex-wrap:nowrap}
.brand{min-width:0;flex-shrink:1}
.brand-svg{max-width:100%;height:auto}
@media (max-width:560px){
  .nav-langues{gap:1px}
  .nav-langues a{min-width:28px;min-height:30px;padding:0 4px;font-size:11px;letter-spacing:0}
  .brand-name{font-size:19px}
  .brand-img{height:34px}
}
@media (max-width:420px){
  .nav-langues a{min-width:25px;min-height:28px;padding:0 3px;font-size:10.5px}
}

/* Avis de traduction — sur toute page servie dans une autre langue que le francais. */
.note-traduction{margin:0 0 22px;padding:11px 14px;border-radius:12px;
  background:var(--mc-surface);border:1px solid var(--mc-line);
  font-size:13.5px;line-height:1.5;color:var(--mc-muted)}


/* ---------------------------------------------------------------------------
   PRESENTATION D'ACCUEIL (portrait + presentation audio, puis video HeyGen)
   Composant de la famille : piloté par `presentation` dans brand.json.
   Charte : surfaces et contours de la maison, la couleur ne touche jamais le texte.
   --------------------------------------------------------------------------- */
.presentation-modal{
  border:0;padding:0;margin:auto;width:calc(100% - 32px);max-width:620px;max-height:88vh;overflow:auto;
  border-radius:var(--radius-lg);background:var(--mc-surface);color:var(--mc-body);
  box-shadow:0 26px 64px rgba(59,31,58,.30);
}
.presentation-modal::backdrop{background:rgba(59,31,58,.55)}
.presentation-modal .modal-close{
  position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--mc-line);background:var(--mc-bg);color:var(--mc-ink);
  font-size:22px;line-height:1;cursor:pointer;
}
.presentation-modal .modal-close:hover{border-color:var(--mc-primary);color:var(--mc-primary-dark)}
.presentation-grid{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:24px;align-items:start}
.presentation-visuel{position:relative}
.presentation-portrait,.presentation-media{
  display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--mc-line);
}
.presentation-corps h2{font-size:20px;line-height:1.32;margin:0 0 14px;color:var(--mc-ink)}
.presentation-corps .eyebrow{margin-bottom:6px}
.pres-play{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 20px;
  border:0;border-radius:999px;background:var(--mc-primary);color:var(--mc-on-primary);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.pres-play:hover{background:var(--mc-primary-dark)}
.pres-play[disabled]{opacity:.6;cursor:not-allowed}
.pres-play-icone{font-size:13px;line-height:1}
.pres-ligne{display:flex;align-items:center;gap:10px;margin-top:12px}
.pres-curseur{flex:1;accent-color:var(--mc-primary);min-width:0;height:22px}
.pres-temps{font-size:13px;color:var(--mc-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.presentation-transcription{margin:14px 0 0}
.presentation-transcription summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--mc-primary-dark);padding:4px 0}
.presentation-transcription p{font-size:14.5px;line-height:1.55;margin:8px 0 0;color:var(--mc-body)}
.presentation-mention{font-size:12.5px;line-height:1.5;color:var(--mc-muted);margin:14px 0}
.presentation-modal .btn-row{margin:0}
.pres-play:focus-visible,.pres-curseur:focus-visible,
.presentation-modal .modal-close:focus-visible,summary:focus-visible{
  outline:2px solid var(--mc-primary-dark);outline-offset:2px;
}
@media (max-width:600px){
  .presentation-grid{grid-template-columns:1fr;gap:16px;padding:20px 18px}
  .presentation-portrait,.presentation-media{max-width:150px;margin:0 auto}
  .presentation-corps h2{font-size:18px}
  .presentation-modal .modal-close{top:6px;right:6px}
}
@media (prefers-reduced-motion:reduce){
  .presentation-modal{transition:none}
}

/* Lecteur video du hero : le visuel anime prend la place de l'illustration.
   Aucun chargement lourd avant lecture (preload=metadata + affiche). */
.hero-video{display:block;width:100%;height:auto;max-height:62vh;background:var(--mc-surface);
  object-fit:contain;border-radius:0}
@media (max-width:980px){.hero-video{max-height:none}}

/* Lien d'évitement clavier (WCAG 2.4.1 / EAA) : premier élément focusable de la page,
   invisible pour les autres visiteurs. Le repère <main id="contenu"> sert de cible. */
.lien-evitement{position:absolute;left:-9999px;top:0;z-index:1000;
  padding:12px 18px;background:var(--mc-primary);color:#fff;font-size:15px;font-weight:600;
  text-decoration:none;border-radius:0 0 12px 0}
.lien-evitement:focus{left:0;outline:3px solid var(--mc-ink);outline-offset:2px}
main#contenu:focus{outline:none}

/* ---------- Les autres sites du réseau (espace personnel) ----------
   Cartes cliquables quand le site est en ligne ; annoncées « Bientôt » sans lien
   tant qu'il ne l'est pas (fail-closed : on ne promet jamais un site absent). */
.reseau{margin:24px 0}
.reseau h2{margin-bottom:6px}
.reseau-texte{color:var(--mc-body);margin-bottom:16px}
.reseau-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.reseau-carte{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#fff;
  border:1px solid var(--mc-line);border-radius:16px;text-decoration:none;color:inherit}
.reseau-nom{font-size:17px;line-height:1.25;color:var(--mc-ink)}
.reseau-badge{align-self:flex-start;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 9px;border-radius:999px;background:var(--mc-surface);color:var(--mc-primary-dark)}
.reseau-badge.ici{background:var(--mc-primary);color:#fff}
.reseau-badge.bientot{background:#EFEFEF;color:#5D5D5D}
.reseau-sujet{font-size:14px;line-height:1.45;color:var(--mc-body)}
.reseau-indispo{opacity:.7;background:var(--mc-bg)}

/* Bandeau de mesure d'audience (CNIL : refus aussi simple que l'acceptation) */
.bandeau-consentement{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--surface,#fff);border-top:1px solid var(--bord,#eee);box-shadow:0 -6px 24px rgba(0,0,0,.08)}
.bandeau-consentement p{margin:0;font-size:15px;line-height:1.45;max-width:70ch}
.bandeau-consentement[hidden]{display:none}
.bandeau-actions{display:flex;gap:10px;flex-shrink:0}
@media (max-width:520px){.bandeau-actions{width:100%}.bandeau-actions .btn{flex:1}}