@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}}

/* ---------------------------------------------------------------------------
   Player vidéo de consultation de l'experte (module js/consultation.js)
   Vignette portrait cliquable + fenêtre de lecture. Un site sans vidéo ne
   déclare pas [data-consultation] : ces règles ne s'appliquent jamais.
   --------------------------------------------------------------------------- */
.consult-vignette{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;width:100%;
  padding:16px;text-align:left;cursor:pointer;background:var(--mc-surface,#FCEFF7);border:1px solid var(--mc-line,#F2DCE9);
  border-radius:18px;font:inherit;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.consult-vignette:hover{transform:translateY(-2px);border-color:var(--mc-primary,#C2479E);
  box-shadow:0 14px 34px rgba(194,71,158,.16)}
.consult-vignette:focus-visible{outline:3px solid var(--mc-primary,#C2479E);outline-offset:3px}
.consult-vignette.est-indisponible{cursor:not-allowed;opacity:.72}
.consult-visuel{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:#000}
.consult-visuel img{display:block;width:100%;height:100%;object-fit:cover}
/* Le bouton play est posé en BAS à gauche : centré, il masquait le visage du portrait. */
.consult-play{position:absolute;left:8px;bottom:8px;display:flex}
.consult-play span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--mc-primary-dark,#9B2F7B);font-size:15px;padding-left:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.consult-duree{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.62);
  color:#fff;font-size:11.5px;font-weight:600}
.consult-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.consult-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mc-primary,#C2479E)}
.consult-nom{font-size:17px;color:var(--mc-ink,#3A1F33)}
.consult-qualite{font-size:13.5px;color:var(--mc-body,#4A3346)}
.consult-sous-titre{font-size:13.5px;color:var(--mc-muted,#8A7080)}
.consult-cta{margin-top:6px;font-size:14px;font-weight:700;color:var(--mc-primary-dark,#9B2F7B)}
@media (max-width:520px){.consult-vignette{grid-template-columns:104px 1fr;gap:12px;padding:12px}
  .consult-nom{font-size:16px}.consult-cta{min-height:44px;display:flex;align-items:center}}
/* Fenêtre de lecture */
.consult-modale{border:0;padding:0;background:transparent;max-width:min(94vw,560px);width:100%}
.consult-modale::backdrop{background:rgba(24,8,20,.62);backdrop-filter:blur(2px)}
.consult-cadre{position:relative;background:#fff;border-radius:20px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.consult-fermer{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid var(--mc-line,#F2DCE9);
  background:#fff;color:var(--mc-ink,#3A1F33);font-size:16px;cursor:pointer}
.consult-fermer:hover{background:var(--mc-surface,#FCEFF7)}
.consult-entete{display:flex;flex-direction:column;padding-right:50px;margin-bottom:10px}
.consult-entete strong{font-size:17px;color:var(--mc-ink,#3A1F33)}
.consult-entete span{font-size:13px;color:var(--mc-muted,#8A7080)}
.consult-lecteur{background:#000;border-radius:14px;overflow:hidden;display:flex;justify-content:center}
.consult-video{display:block;width:auto;max-width:100%;height:auto;max-height:70vh;object-fit:contain;background:#000}
.consult-mention{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--mc-muted,#8A7080)}
.consult-transcription{margin-top:8px;font-size:13px;color:var(--mc-body,#4A3346)}
.consult-transcription summary{cursor:pointer;font-weight:700;color:var(--mc-primary-dark,#9B2F7B);min-height:44px;display:flex;align-items:center}
.consult-transcription p{margin:6px 0 0;line-height:1.55}
@media (prefers-reduced-motion:reduce){.consult-vignette{transition:none}}

/* Le bandeau de consentement est FIXE en bas de l'écran : tant qu'il est affiché,
   on réserve sa hauteur, sinon il recouvre le bas du contenu (défaut mesuré à
   390 px le 22/09/2026). La classe est posée par le script du gabarit de page. */
body.bandeau-visible{padding-bottom:148px}
@media (max-width:560px){body.bandeau-visible{padding-bottom:196px}}

/* ---------------------------------------------------------------------------
   Application de conversation (fonctionnement type ChatGPT) — module
   js/conversation.js. Panneau latéral (nouvelle conversation + historique) et
   fil de messages. Un site sans [data-conversation] n'affiche rien de tout ça.
   --------------------------------------------------------------------------- */
/* Hauteur CALÉE sur la fenêtre : le fil défile à l'intérieur et la barre de saisie
   reste visible en bas du bloc — sinon elle passe sous le bandeau de consentement
   (défaut mesuré le 22/09/2026 en desktop). */
.app-conv{display:grid;grid-template-columns:var(--conv-panneau,320px) 6px minmax(0,1fr);height:auto;border:1px solid var(--mc-line);border-radius:20px;overflow:hidden;background:#fff}
/* En conversation : hauteur callee sur la fenetre pour que le fil defile et que la
   barre de saisie reste visible. Hors conversation : hauteur naturelle. */
.app-conv.en-conversation{height:min(70vh,640px)}
.conv-panneau{background:var(--mc-surface);border-right:1px solid var(--mc-line);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.conv-nouvelle{width:100%;justify-content:center;min-height:44px}
.conv-hist-titre{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-muted)}
.conv-liste{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:46vh}
.conv-item{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 32px 10px 12px;border:1px solid transparent;border-radius:12px;cursor:pointer}
.conv-item:hover{background:#fff;border-color:var(--mc-line)}
.conv-item.est-actif{background:#fff;border-color:var(--mc-primary)}
.conv-item-titre{border:0;background:none;padding:0;text-align:left;font:inherit;font-weight:600;color:var(--mc-ink);cursor:pointer}
.conv-item-date{font-size:11.5px;color:var(--mc-muted)}
.conv-item-suppr{position:absolute;top:6px;right:4px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--mc-muted);cursor:pointer;font-size:14px}
.conv-item-suppr:hover{background:var(--mc-warn-bg);color:var(--mc-warn)}
.conv-hint,.conv-vide p{font-size:13px;color:var(--mc-muted);line-height:1.5;margin:0 0 6px}
.conv-fil{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.conv-msg{max-width:88%;padding:12px 14px;border-radius:16px;border:1px solid var(--mc-line);background:#fff}
.conv-msg.est-vous{margin-left:auto;background-image:var(--mc-degrade);background-color:var(--mc-primary);border-color:var(--mc-primary);color:var(--mc-on-primary)}
.conv-msg.est-vous .conv-qui{color:var(--mc-on-primary-muted)}
.conv-qui{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mc-muted)}
.conv-texte{font-size:15px;line-height:1.55;word-wrap:break-word}
.conv-sources{margin-top:10px;font-size:13px}
.conv-sources summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.conv-sources ul{margin:6px 0 0;padding-left:18px}
.conv-sources a{color:var(--mc-primary-dark)}
.conv-accueil{padding:16px 18px;border-bottom:1px solid var(--mc-line)}
.conv-saisie{border-top:1px solid var(--mc-line);padding:14px;display:flex;gap:10px;align-items:flex-end;background:var(--mc-bg);flex-wrap:wrap}
.conv-saisie textarea{flex:1;min-width:220px;min-height:56px;max-height:200px;resize:vertical;padding:12px 14px;font-size:15px;line-height:1.5}
.conv-saisie .btn{min-height:44px}
.conv-conversation{display:flex;flex-direction:column;min-width:0;height:100%;min-height:0}
.conv-etat{margin:0;padding:0 14px 10px;font-size:13px;min-height:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.conv-etat.avertir{color:var(--mc-warn)}
/* Poignee de redimensionnement du panneau (la colonne de gauche s'elargit ou se
   retrecit, comme sur la reference). Bornes 220-480 px, largeur memorisee. */
.conv-resize{position:relative;cursor:col-resize;background:transparent;touch-action:none}
.conv-resize::after{content:"";position:absolute;left:2px;top:0;bottom:0;width:2px;
  background:var(--mc-line);opacity:.7}
.conv-resize:hover::after,.conv-resize:focus-visible::after{background:var(--mc-primary);opacity:1;width:3px;left:1px}
.conv-resize:focus-visible{outline:2px solid var(--mc-primary);outline-offset:-2px}
/* Barre de commande du fil : ouvre/ferme le panneau latera (comportement attendu
   d'une conversation). Le bouton est visible sur TOUS les ecrans. */
.conv-barre{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--mc-line)}
.conv-barre .btn{min-height:40px}
.conv-masquer{display:inline-flex;align-items:center;gap:8px}
/* ⚠️ UNE SEULE colonne quand le panneau est ferme : avec deux colonnes, la zone
   de conversation tombait dans la colonne de 290 px et le texte s'empilait mot a
   mot (defaut constate le 22/09/2026). `0` sans unite est invalide en CSS. */
.app-conv.panneau-masque{grid-template-columns:minmax(0,1fr)}
.app-conv.panneau-masque .conv-panneau,.app-conv.panneau-masque .conv-resize{display:none}
@media (max-width:900px){
  .app-conv{grid-template-columns:1fr;min-height:0;height:auto}
  .conv-resize{display:none}
  .conv-panneau{border-right:0;border-bottom:1px solid var(--mc-line)}
  .conv-fil{max-height:none}
}

/* La barre de saisie reste COLLÉE en bas du fil (comportement attendu d'une
   conversation type ChatGPT) et se décale au-dessus du bandeau de consentement
   quand celui-ci est affiché — sinon elle passe dessous (défaut mesuré le
   22/09/2026 : la saisie sortait du viewport en desktop). */
.conv-saisie{position:sticky;bottom:0;z-index:5}
body.bandeau-visible .conv-saisie{bottom:148px}
@media (max-width:560px){body.bandeau-visible .conv-saisie{bottom:196px}}

/* ---------------------------------------------------------------------------
   Etat « conversation vide » : le bloc titre + champ + suggestions est CENTRE
   verticalement, comme sur les references (MedGPT, ChatGPT). Des que la
   conversation commence, l'etat vide disparait et la saisie reprend sa place en
   bas du fil. Defaut releve le 22/09/2026 : la saisie restait collee en bas,
   ce qui donnait une « page web » et non une application de conversation.
   --------------------------------------------------------------------------- */
.conv-conversation.est-vide{justify-content:center}
.conv-conversation.est-vide .conv-accueil{border-bottom:0;text-align:center;padding:26px 20px 10px}
.conv-accueil h2{font-size:clamp(24px,3.4vw,36px);margin:0 0 10px;color:var(--mc-ink);line-height:1.2}
.conv-accueil .conv-sous-titre{margin:0 auto 24px;max-width:58ch;font-size:15.5px;line-height:1.6;color:var(--mc-body)}
.conv-suggestions-titre{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-muted);margin:0 0 10px}
.conv-conversation.est-vide .link-grid{justify-content:center}
.conv-conversation.est-vide .conv-saisie{border-top:0;background:transparent;padding:20px 20px 10px;border-radius:0}
.conv-conversation:not(.est-vide) .conv-accueil{display:none}
/* Mention légale sous le champ (emplacement de la référence) */
.conv-mention{margin:12px auto 0;max-width:72ch;font-size:13px;line-height:1.6;color:var(--mc-muted);text-align:center;padding:0 8px}
.conv-mention a{color:var(--mc-primary-dark)}
/* Recherche dans l'historique */
.conv-recherche{width:100%;min-height:38px;margin:0 0 4px;padding:8px 12px;border:1px solid var(--mc-line);
  border-radius:10px;background:#fff;font:inherit;font-size:14px;color:var(--mc-ink)}
.conv-recherche:focus-visible{outline:2px solid var(--mc-primary);outline-offset:1px}

/* Contenu reserve aux lecteurs d'ecran (titre de page, libelles) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* En conversation, les suggestions disparaissent (l'accueil a rempli son role) */
.conv-conversation:not(.est-vide) .conv-suggestions{display:none}
.conv-conversation:not(.est-vide) .conv-mention{text-align:left;margin-top:6px}

/* ---------------------------------------------------------------------------
   Selecteur de NIVEAU de reponse (faible · moyen · eleve · tres fort), dans la
   fenetre de saisie — comme le selecteur de modele de ChatGPT / MedGPT.
   ⚠️ Le PRIX par niveau vient du socle (/credits/costs) : le navigateur n'invente
   jamais un montant. Tant que le socle n'expose pas la grille, le selecteur est
   INACTIF et le dit (aucun faux choix, aucun debit surprise).
   --------------------------------------------------------------------------- */
.conv-niveau{position:relative;display:inline-flex}
.conv-niveau-bouton{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid var(--mc-line);border-radius:10px;background:#fff;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--mc-ink);cursor:pointer;white-space:nowrap}
.conv-niveau-bouton:hover{border-color:var(--mc-primary)}
.conv-niveau-bouton[disabled]{cursor:not-allowed;color:var(--mc-muted);background:var(--mc-surface)}
.conv-niveau-bouton .curseur{font-size:11px;color:var(--mc-muted)}
.conv-niveau-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;min-width:270px;
  background:#fff;border:1px solid var(--mc-line);border-radius:14px;padding:8px;
  box-shadow:0 18px 40px rgba(10,31,68,.16)}
.conv-niveau-menu[hidden]{display:none}
.conv-niveau-menu p{margin:6px 8px 8px;font-size:12px;color:var(--mc-muted);line-height:1.45}
.conv-niveau-option{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;font:inherit;
  font-size:14px;color:var(--mc-ink);cursor:pointer;text-align:left}
.conv-niveau-option:hover{background:var(--mc-surface)}
.conv-niveau-option[aria-checked="true"]{background:var(--mc-surface);font-weight:700}
.conv-niveau-option .cout{font-size:12.5px;color:var(--mc-muted);white-space:nowrap}
.conv-niveau-option[aria-checked="true"] .cout{color:var(--mc-primary)}
.conv-niveau-option small{display:block;font-size:11.5px;color:var(--mc-muted);font-weight:400}
@media (max-width:560px){
  .conv-niveau-menu{min-width:min(300px,86vw);left:auto;right:0}
}

.conv-conversation.est-vide .conv-suggestions{padding:0 20px 22px}

/* ---------------------------------------------------------------------------
   Bouton de musique de fond (module js/musique.js). Discret, en bas a gauche,
   jamais en lecture automatique. Se decale au-dessus du bandeau de consentement.
   --------------------------------------------------------------------------- */
.musique-bouton{position:fixed;left:16px;bottom:16px;z-index:1100;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 14px;border:1px solid var(--mc-line);border-radius:999px;background:#fff;
  color:var(--mc-ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 26px rgba(10,31,68,.14);max-width:calc(100vw - 32px)}
.musique-bouton:hover{border-color:var(--mc-primary)}
.musique-bouton:focus-visible{outline:2px solid var(--mc-primary);outline-offset:2px}
.musique-bouton.est-active{background:var(--mc-primary);border-color:var(--mc-primary);color:var(--mc-on-primary)}
.musique-bouton .musique-note{font-size:16px;line-height:1}
.musique-bouton .musique-texte{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.musique-bouton.est-active .musique-note{animation:musique-pulse 1.6s ease-in-out infinite}
@keyframes musique-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.musique-bouton.est-active .musique-note{animation:none}}
body.bandeau-visible .musique-bouton{bottom:164px}
@media (max-width:560px){
  .musique-bouton{left:12px;bottom:12px;font-size:13px}
  body.bandeau-visible .musique-bouton{bottom:206px}
}

/* ---------------------------------------------------------------------------
   Barre de saisie « type ChatGPT » : bouton + a gauche, champ au centre,
   micro + selecteur de niveau + bouton d'envoi rond a droite, mention dessous.
   --------------------------------------------------------------------------- */
.conv-saisie{gap:8px;align-items:flex-end}
.conv-champ{flex:1;min-width:0;display:flex;align-items:flex-end;gap:8px;padding:6px 8px;
  border:1px solid var(--mc-line);border-radius:24px;background:#fff}
.conv-champ:focus-within{border-color:var(--mc-primary);box-shadow:0 0 0 3px var(--mc-primary-soft)}
.conv-champ textarea{flex:1;min-width:0;border:0;background:transparent;padding:10px 4px;
  min-height:44px;max-height:200px;resize:none;font-size:15px;line-height:1.5}
.conv-champ textarea:focus{outline:none}
.conv-rond{width:40px;height:40px;min-height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:var(--mc-muted);font-size:18px;cursor:pointer}
.conv-rond:hover{background:var(--mc-surface);color:var(--mc-ink)}
.conv-rond:focus-visible{outline:2px solid var(--mc-primary);outline-offset:2px}
.conv-rond[disabled]{opacity:.45;cursor:not-allowed}
.conv-envoyer{background:var(--mc-primary);color:var(--mc-on-primary);font-size:17px}
.conv-envoyer:hover{background:var(--mc-primary-dark);color:var(--mc-on-primary)}
.conv-envoyer[disabled]{background:var(--mc-surface);color:var(--mc-muted);opacity:1}
.conv-micro.est-actif{background:var(--mc-warn-bg);color:var(--mc-warn);animation:musique-pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.conv-micro.est-actif{animation:none}}
.conv-sous-barre{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;
  margin:8px 0 0;padding:0 6px;font-size:12.5px;line-height:1.5;color:var(--mc-muted)}
.conv-consentement{display:flex;gap:8px;align-items:flex-start;max-width:62ch}
.conv-consentement input{margin-top:3px;flex:none}
.conv-saisie .conv-niveau-bouton{border-radius:20px}

/* Menu du bouton + (joindre une photo ou une video) */
.conv-plus{position:relative;display:inline-flex}
.conv-plus-menu{position:absolute;bottom:calc(100% + 10px);left:0;z-index:30;min-width:230px;
  background:#fff;border:1px solid var(--mc-line);border-radius:14px;padding:8px;
  box-shadow:0 18px 40px rgba(10,31,68,.16)}
.conv-plus-menu[hidden]{display:none}
.conv-plus-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;
  border:0;border-radius:10px;background:transparent;font:inherit;font-size:14px;color:var(--mc-ink);
  cursor:pointer;text-align:left}
.conv-plus-menu button:hover{background:var(--mc-surface)}
.conv-plus-menu small{display:block;font-size:11.5px;color:var(--mc-muted);font-weight:400}

/* Sur mobile, la barre de saisie reste accessible en bas de l'ecran (comportement
   attendu d'une application de conversation) : sans cela, le champ se retrouvait
   loin sous le panneau (constate le 22/09/2026). */
@media (max-width:900px){
  .conv-saisie{position:sticky;bottom:0;z-index:6;background:var(--mc-bg);padding-bottom:12px}
  .conv-conversation.est-vide .conv-saisie{position:static;background:transparent}
  .conv-sous-barre{padding-bottom:4px}
}