@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');:root{--ink:#292a25;--muted:#6c6e67;--paper:#f8f7f2;--line:#dcded5;--green:#237259;--dark:#193b30}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 'DM Sans',sans-serif}.section-shell{width:min(1060px,calc(100% - 42px));margin:auto}.site-header{height:64px;border-bottom:1px solid var(--line);padding:0 max(22px,calc((100vw - 1060px)/2));display:flex;align-items:center;justify-content:space-between;background:#f8f7f2e8;position:sticky;top:0;z-index:2;backdrop-filter:blur(12px)}.brand{font:20px/1 'Playfair Display';color:var(--ink);text-decoration:none}.brand small{display:block;margin-top:6px;font:600 9px 'DM Sans';letter-spacing:.16em;color:var(--green)}nav{display:flex;gap:29px}nav a{color:var(--ink);text-decoration:none;font-size:14px}.hero{padding:85px 0 95px;max-width:850px;text-align:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--green);margin:0 0 18px}.hero h1,h2{font:500 clamp(39px,5vw,66px)/1.06 'Playfair Display';letter-spacing:-.04em;margin:0}.intro{font-size:19px;color:#555850;max-width:610px;margin:22px auto 32px}.symptom-form{background:#fff;border:1px solid #dfe3df;border-radius:27px;box-shadow:0 10px 28px #1e35260f;padding:21px 25px 13px;text-align:left}.symptom-form textarea{width:100%;resize:none;border:0;outline:0;font:18px 'DM Sans';color:var(--ink);background:transparent}.composer-actions{display:flex;align-items:center;gap:12px}.composer-actions span{font-size:11px;color:#8b8d87}.add,.send{border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}.add{width:39px;height:39px;background:#eff1ee;font-size:28px}.send{width:37px;height:37px;margin-left:auto;background:var(--green);color:#fff;font-size:20px}.notice{font-size:11px;color:var(--muted);text-align:left;margin:11px 18px 20px}.quick-prompts{display:grid;gap:8px;text-align:left;margin:0 20px}.quick-prompts button{background:none;border:0;text-align:left;color:#646760;font-size:14px;cursor:pointer}.quick-prompts button:hover{color:var(--green)}.section{padding:88px 0}.section h2{font-size:clamp(34px,4vw,52px)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}.grid article{border-top:1px solid var(--ink);padding-top:15px}.grid b{font-size:12px;color:var(--green)}.grid h3{margin:14px 0 7px;font-size:17px}.grid p{margin:0;color:var(--muted);font-size:14px}.soft{background:#ecebe4}.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:38px}.scenario-grid button{border:1px solid var(--line);padding:20px;background:transparent;text-align:left;display:flex;justify-content:space-between;font:15px 'DM Sans';cursor:pointer}.scenario-grid button:hover{color:var(--green);border-color:var(--green)}.pricing{background:var(--dark);color:#fff}.pricing .eyebrow{color:#9cd4b3}.price-card{margin-top:38px;background:#f4f6f0;color:var(--ink);padding:30px;display:flex;gap:23px;align-items:center}.price-card p{font-size:11px;font-weight:700;letter-spacing:.12em}.price-card strong{font:48px 'Playfair Display'}.price-card small{font:16px 'DM Sans'}.price-card span{color:var(--muted);flex:1}.price-card button,.button-quiet{border:0;background:var(--green);color:#fff;padding:12px 17px;font-weight:600;cursor:pointer}.faq{max-width:800px}.faq details{border-top:1px solid var(--line);padding:20px 0}.faq summary{font-weight:600;cursor:pointer;display:flex;justify-content:space-between}.faq p{color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);padding:22px 5%;display:flex;gap:20px;color:#777a73;font-size:11px}footer a{color:inherit}.entry-modal{border:0;border-radius:16px;padding:31px;width:min(440px,calc(100% - 30px))}.modal-close{float:right;border:0;background:none;font-size:24px}.entry-modal h2{font-size:35px}.entry-modal::backdrop{background:#18382b88}@media(max-width:680px){nav{display:none}.hero{padding:62px 0}.hero h1{font-size:42px}.grid,.scenario-grid{grid-template-columns:1fr}.price-card{align-items:flex-start;flex-direction:column;gap:9px}.section{padding:65px 0}.composer-actions span{display:none}footer{flex-wrap:wrap}}
/* ---------------------------------------------------------------------------
   Fenêtre de saisie — caméra complètement à gauche (demande Rodgers, 18/09/2026)
   Mesure avant : à 1440 px la caméra était à x=594 alors que le cadre va de 314
   à 1112 (elle apparaissait au centre). On la remet en premier élément.
   Spécificité + !important obligatoires : les styles sont injectés ensuite par
   /js/site.js et l'emporteraient sinon. Ne s'applique qu'au desktop (>=701 px).
   ------------------------------------------------------------------------- */
@media(min-width:701px){
  .symptom-form .composer-actions > .camera{order:-1!important;margin-right:0!important;margin-left:0!important}
}
/* ---------------------------------------------------------------------------
   Visuel « Historique de conversation simplifié » (support-grid, 1re carte)
   Constat mesuré le 18/09/2026 : l'image ne se voyait pas — le visuel était un
   carré quasi vide (image très claire : luminosité moyenne 223/255, 74,5 % de
   pixels quasi blancs) et le mélange « screen » la fondait dans le fond clair.
   Les deux visuels voisins, plus foncés, restaient visibles.
   Correctif : on rend l'image visible en permanence et on l'aligne sur ses
   voisins (même hauteur, mêmes coins, dégradé violet de la même famille).
   La double classe « .visual-slot.visual-slot » est volontaire : les styles de
   /js/site.js sont injectés APRÈS cette feuille et l'emporteraient à
   spécificité égale (leur règle est aussi !important).
   ------------------------------------------------------------------------- */
.support-grid article:nth-child(1) .visual-slot.visual-slot{
  background-image:url("/images/mcs/historique-conversation-simplifie.png")!important;
  background-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
  color:#6847db!important;
  border:0!important;
  min-height:190px!important;
}
.support-grid article:nth-child(1) .visual-slot.visual-slot strong{
  color:#6847db!important;
  text-shadow:0 1px 8px #fff,0 2px 12px #6847db88!important;
}
.support-grid article:nth-child(1) .visual-slot.visual-slot span{color:#6847db!important}
.support-grid article:nth-child(1) .visual-slot.visual-slot i{color:#55d8d0!important}

/* ---------------------------------------------------------------------------
   Barre de la fenetre « Un repère disponible à tout moment » : le logo officiel
   remplace le pictogramme + le texte « Mon Compagnon Santé » (demande Rodgers,
   18/09/2026). Double classe volontaire : la règle .anytime-bar de /js/site.js
   est injectée après cette feuille.
   ------------------------------------------------------------------------- */
.anytime-shell .anytime-bar.anytime-bar{height:auto!important;min-height:42px}
.anytime-shell .anytime-bar.anytime-bar .anytime-logo{height:40px!important;width:auto!important;display:block}
@media(max-width:680px){.anytime-shell .anytime-bar.anytime-bar .anytime-logo{height:34px!important}}

/* ---------------------------------------------------------------------------
   Memes maquettes : le logo officiel remplace le pictogramme + le texte
   « Mon Compagnon Santé » (demande Rodgers, 18/09/2026, apres la barre de la
   section « Un repère disponible à tout moment »).
   Double classe volontaire : les styles de /js/site.js sont injectés après.
   ------------------------------------------------------------------------- */
.mock-logo{display:block;width:auto!important}
.demo-top .mock-logo.mock-logo{height:34px!important}
.mobile-head .mock-logo.mock-logo,
.mobile-any-head .mock-logo.mock-logo{height:24px!important}
@media(max-width:680px){
  .demo-top .mock-logo.mock-logo{height:28px!important}
  .mobile-head .mock-logo.mock-logo,
  .mobile-any-head .mock-logo.mock-logo{height:22px!important}
}

/* ---------------------------------------------------------------------------
   Frise « Recherche > Sélection > Analyse > Synthèse > Référence associée »
   Mesure du 18/09/2026 a 390 px : la frise depassait de 45 px (aucune regle
   CSS ne la faisait passer a la ligne -> defilement horizontal du site).
   On autorise le retour a la ligne ; sur grand ecran le rendu est inchange.
   ------------------------------------------------------------------------- */
.proof-process{max-width:100%!important;overflow-wrap:anywhere}
@media(max-width:680px){
  .proof-process{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
}

/* ---------------------------------------------------------------------------
   Le visuel de la section « Vos données, votre contrôle » est maintenant DANS
   la fenêtre prévue (.visual-slot--data, qui affichait « VISUEL À VENIR ») et
   non plus en bandeau au-dessus du titre (demande Rodgers, 18/09/2026).
   Voile clair + image : même traitement que les visuels du bloc voisin.
   Double classe volontaire : les styles de /js/site.js sont injectés après.
   ------------------------------------------------------------------------- */
.data-section .visual-slot--data.visual-slot--data{
  background-image:url("/images/mcs/vos-donnees-votre-controle.png")!important;
  background-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
  color:#6847db!important;
  border:0!important;
  min-height:225px!important;
}
.data-section .visual-slot--data.visual-slot--data strong{
  color:#6847db!important;
  text-shadow:0 1px 8px #fff,0 2px 12px #6847db88!important;
}
.data-section .visual-slot--data.visual-slot--data i{color:#08b8b3!important}

/* ---------------------------------------------------------------------------
   VOILES RETIRÉS PARTOUT (demande Rodgers, 18/09/2026).
   Chaque visuel est affiché BRUT : plus de dégradé par-dessus, plus de filtre.
   Les règles neutralisées sont injectées par /js/site.js APRÈS ce fichier ;
   d'où la classe doublée (ou l'élément doublé) + !important pour les battre.
   ------------------------------------------------------------------------- */
.visual-slot--proof.visual-slot--proof{
  background-image:url("/images/mcs/references-methodologie.png")!important;
  background-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
  color:#6847db!important;
}
.support-grid article:nth-child(1) .visual-slot.visual-slot{
  background-image:url("/images/mcs/historique-conversation-simplifie.png")!important;
  background-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
}
.support-grid article:nth-child(2) .visual-slot.visual-slot{
  background-image:url("/images/mcs/explication-langage-clair.png")!important;
  background-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
}
.support-grid article:nth-child(3) .visual-slot.visual-slot{
  background-image:url("/images/mcs/repere-disponible-tout-moment.png")!important;
  background-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
}

/* Sans le voile, un libellé blanc devient invisible sur un visuel clair :
   on aligne la couleur des cartes 2 et 3 sur celle de la carte 1. */
.support-grid article:nth-child(2) .visual-slot.visual-slot strong,
.support-grid article:nth-child(3) .visual-slot.visual-slot strong{
  color:#6847db!important;
  text-shadow:0 1px 8px #fff,0 2px 12px #6847db88!important;
}
.support-grid article:nth-child(2) .visual-slot.visual-slot,
.support-grid article:nth-child(3) .visual-slot.visual-slot{
  color:#6847db!important;
}

/* ---------------------------------------------------------------------------
   Texte mauve retiré des visuels QUI PORTENT UNE IMAGE (demande Rodgers,
   18/09/2026) : l'image contient déjà son propre titre, la surimpression
   violette faisait doublon.
   ⚠️ Volontairement LIMITÉ aux 4 visuels à image : le 5e (maquette de
   téléphone, .visual-slot--phone, sans image) garde son titre, sinon le cadre
   reste vide. Triple classe / élément doublé : les styles de /js/site.js sont
   injectés après ce fichier.
   Le symbole décoratif « ✦ » n'est pas concerné (il n'est pas mauve).
   ------------------------------------------------------------------------- */
.support-grid article:nth-child(1) .visual-slot.visual-slot > strong,
.support-grid article:nth-child(2) .visual-slot.visual-slot > strong,
.support-grid article:nth-child(3) .visual-slot.visual-slot > strong,
.data-section .visual-slot--data.visual-slot--data > strong{
  display:none!important;
}

/* ---------------------------------------------------------------------------
   Cadre « Votre compagnon santé sur mobile » (.visual-slot--phone, section
   .final-cta) : il affichait « VISUEL À VENIR » ; il reçoit maintenant l'image
   fournie par Rodgers (18/09/2026) et son texte superposé est supprimé.
   Cadre mis au FORMAT DE L'IMAGE (Rodgers, 18/09/2026) : l'encart prend le
   rapport 941x1672 de l'image -> elle s'affiche entière, sans rognage.
   Spécificité renforcée par double classe : les styles de /js/site.js sont
   injectés après ce fichier.
   ------------------------------------------------------------------------- */
.final-cta .visual-slot--phone.visual-slot--phone{
  background-image:url("/images/mcs/compagnon-sante-mobile.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  aspect-ratio:941 / 1672!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
.final-cta .visual-slot--phone.visual-slot--phone > strong,
.final-cta .visual-slot--phone.visual-slot--phone > span,
.final-cta .visual-slot--phone.visual-slot--phone > b{
  display:none!important;
}