/* Feuille de style de la vitrine publique.
   Extraite de accueil.html le 18/09/2026 : les pages de contenu
   (rendez-vous, informations, suggestions, offre, a propos) doivent
   etre visuellement identiques a l'accueil. La recopier dans chaque
   page aurait fige cinq copies divergentes au premier changement. */
:root{
  --navy:#0B2545; --terra:#C8786C; --terra-l:#E8C4BC;
  --paper:#FAF7F4; --white:#FFFFFF; --gtext:#4A5A72; --glabel:#5F6B7D; --glabel-chaud:#5C4A44;
  --hair:#E7E0D9;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Manrope',Arial,sans-serif; background:var(--paper); color:var(--gtext);
  font-size:17px; line-height:1.65; }
.serif{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }
a{ color:inherit; }
img{ max-width:100%; }
h1,h2,h3{ color:var(--navy); font-weight:800; letter-spacing:-0.02em; line-height:1.12; }

.btn{ display:inline-block; font-weight:700; font-size:16px; border-radius:999px;
  padding:15px 30px; text-decoration:none; transition:transform .15s ease, background .15s ease; }
.btn:focus-visible{ outline:3px solid var(--terra); outline-offset:3px; }
.btn:hover{ transform:translateY(-1px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:#123058; }
.btn-line{ border:2px solid var(--navy); color:var(--navy); padding:13px 28px; }
.btn-line:hover{ background:#fff; }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(250,247,244,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); }
.nav-in{ display:flex; align-items:center; gap:36px; height:76px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand img{ height:40px; width:auto; }
.brand b{ font-size:23px; font-weight:800; color:var(--navy); letter-spacing:-0.02em; }
.brand b span{ color:var(--terra); }
.nav a.link{ text-decoration:none; font-weight:600; font-size:15.5px; color:var(--gtext); }
.nav a.link:hover{ color:var(--navy); }
.nav .btn{ padding:11px 22px; font-size:15px; }
@media(max-width:820px){ .nav a.link{ display:none; } }

/* ---------- HERO ---------- */
.hero{ padding:84px 0 96px; overflow:hidden; }
.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(38px,4.6vw,58px); margin:18px 0 22px; }
.hero h1 em{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  color:var(--terra); letter-spacing:0; }
.hero p.lead{ font-size:19px; max-width:34em; margin-bottom:34px; }
.hero .ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero .note{ margin-top:22px; font-size:14.5px; color:var(--glabel); }
.kicker{ display:inline-flex; align-items:center; gap:10px; background:var(--terra-l);
  color:var(--navy); font-weight:700; font-size:14px; border-radius:999px; padding:7px 16px; }
.kicker i{ width:8px; height:8px; border-radius:50%; background:var(--terra); }
@media(max-width:900px){ .hero-in{ grid-template-columns:1fr; } .hero{ padding:56px 0 70px; } }

/* ---------- PHONE / CHAT ---------- */
/* Le chassis du telephone.
   La conversation ne flottait pas dans le vide par hasard, mais un cadre
   d'appareil dit en une image ce qu'une phrase explique mal : cela se
   passe sur le telephone du patient, pas dans un logiciel.
   Tout l'habillage (barre d'etat, ilot, adresse) est decoratif et porte
   aria-hidden : un lecteur d'ecran n'a que faire d'une icone de reseau. */
.phone{ width:340px; max-width:100%; margin:0 auto; padding:11px;
  background:linear-gradient(160deg,#2b3340,#11151c 42%,#232b36);
  border-radius:52px;
  box-shadow:0 34px 70px -28px rgba(11,37,69,.55),
             0 0 0 1.5px rgba(255,255,255,.10) inset; }
.phone-screen{ position:relative; background:#fff; border-radius:42px;
  overflow:hidden; display:flex; flex-direction:column; }

.phone-status{ position:relative; display:flex; align-items:center;
  justify-content:space-between; height:46px; padding:0 22px 4px;
  background:var(--paper); color:var(--navy); font-size:13.5px; font-weight:700;
  font-variant-numeric:tabular-nums; }
.phone-island{ position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:86px; height:26px; border-radius:999px; background:#05070b; }
.phone-signs{ display:flex; align-items:center; gap:5px; }

.phone-foot{ position:relative; display:flex; align-items:center;
  justify-content:center; height:44px; padding-bottom:9px;
  background:var(--paper); border-top:1px solid var(--hair); }
.phone-url{ display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--glabel); }
.phone-home{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:118px; height:5px; border-radius:999px; background:var(--navy); opacity:.28; }

@media(max-width:400px){
  .phone{ padding:8px; border-radius:44px; }
  .phone-screen{ border-radius:36px; }
}
.chat-head{ background:var(--navy); color:#fff; display:flex; align-items:center; gap:11px; padding:16px 16px 14px; }
.chat-head img{ width:38px; height:38px; background:#fff; border-radius:50%; padding:5px; }
.chat-head .who b{ display:block; font-size:15px; }
.chat-head .who span{ font-size:12px; color:#9fd3a8; }
.chat{ background:linear-gradient(#F4EFE9,#EFE9E1); padding:16px 12px 18px; flex:1; display:flex; flex-direction:column; gap:9px; min-height:392px; }
.msg{ max-width:82%; padding:9px 13px; border-radius:14px; font-size:13.8px; line-height:1.45;
  box-shadow:0 1px 1px rgba(11,37,69,.08); opacity:0; transform:translateY(8px);
  animation:pop .45s ease forwards; }
.msg.in{ background:#fff; align-self:flex-start; border-bottom-left-radius:4px; color:#33415c; }
.msg.out{ background:var(--terra-l); align-self:flex-end; border-bottom-right-radius:4px; color:#3c2f2b; }
.msg.out .t{ color:var(--glabel-chaud); }
.msg .t{ display:block; font-size:11px; color:var(--glabel); text-align:right; margin-top:3px; }
.msg.card{ background:#fff; border-left:4px solid var(--terra); }
.msg.card b{ color:var(--navy); }
@keyframes pop{ to{ opacity:1; transform:none; } }
.msg:nth-child(1){ animation-delay:.3s } .msg:nth-child(2){ animation-delay:1.0s }
.msg:nth-child(3){ animation-delay:1.7s } .msg:nth-child(4){ animation-delay:2.4s }
.msg:nth-child(5){ animation-delay:3.1s } .msg:nth-child(6){ animation-delay:3.8s }
@media(prefers-reduced-motion:reduce){ .msg{ animation:none; opacity:1; transform:none; } }

/* ---------- STRIP ---------- */
.strip{ background:#fff; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.strip-in{ display:flex; gap:20px 48px; align-items:center; justify-content:space-between;
  padding:26px 0; flex-wrap:wrap; font-size:15.5px; }
.strip b{ color:var(--navy); }

/* ---------- SECTIONS ---------- */
section.block{ padding:96px 0; }
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(30px,3.4vw,42px); margin-bottom:14px; }
.sec-head h2 em{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--terra); }
.sec-head p{ font-size:18px; }

/* Modules — liste typographique */
.modules{ border-top:1px solid var(--hair); }
.module{ display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:28px; align-items:baseline;
  padding:30px 0; border-bottom:1px solid var(--hair); }
.module .name{ font-size:clamp(24px,2.6vw,32px); font-weight:800; color:var(--navy); letter-spacing:-0.02em; }
.module .name .suffix{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--terra); margin-left:6px; }
.module p{ font-size:16.5px; max-width:46em; }
@media(max-width:760px){ .module{ grid-template-columns:1fr; gap:6px; } }

/* Étapes */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; counter-reset:step; }
.step{ position:relative; padding-top:18px; counter-increment:step; }
.step::before{ content:counter(step); position:absolute; top:-14px; left:0;
  font-family:'Instrument Serif',serif; font-style:italic; font-size:64px; color:var(--terra-l); line-height:1; z-index:0; }
.step h3{ position:relative; font-size:20px; margin-bottom:10px; }
.step p{ position:relative; font-size:16px; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr; gap:44px; } }

/* Établissement — panneau navy */
.for-hosp{ background:var(--navy); color:#c9d3e2; }
.for-hosp .sec-head h2{ color:#fff; }
.for-hosp .sec-head p{ color:#c9d3e2; }
.hosp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:18px; overflow:hidden; }
.hosp-cell{ background:var(--navy); padding:30px 32px; }
.hosp-cell h3{ color:#fff; font-size:18.5px; margin-bottom:8px; }
.hosp-cell p{ font-size:15.5px; }
.hosp-cell .tick{ color:var(--terra-l); font-weight:800; margin-right:8px; }
@media(max-width:760px){ .hosp-grid{ grid-template-columns:1fr; } }

/* CTA finale */
.final{ text-align:center; }
.final h2{ font-size:clamp(30px,3.6vw,44px); margin-bottom:16px; }
.final p{ max-width:34em; margin:0 auto 34px; font-size:18px; }
.final .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Footer */
footer{ background:var(--navy); color:#8fa0b8; padding:56px 0 40px; }
.foot-top{ display:flex; gap:40px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand img{ height:44px; width:auto; }
.foot-brand b{ font-size:24px; color:#fff; font-weight:800; }
.foot-brand b span{ color:var(--terra); }
.foot-brand .tag{ display:block; font-family:'Instrument Serif',serif; font-style:italic; color:var(--terra-l); font-size:16px; }
.foot-col{ font-size:15px; line-height:2; }
.foot-col b{ color:#fff; display:block; margin-bottom:4px; font-size:15px; }
.foot-col a{ text-decoration:none; }
.foot-col a:hover{ color:#fff; }
.foot-base{ border-top:1px solid rgba(255,255,255,.14); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; }

/* ---------- PAGES DE CONTENU ---------- */
/* L'accueil est une page de vente : grands blocs, peu de texte suivi.
   Les pages ci-dessous se lisent, elles. Elles ont donc besoin d'une
   colonne de lecture etroite et d'une hierarchie de titres, que
   l'accueil n'utilisait pas. */

.page-head{ padding:68px 0 48px; border-bottom:1px solid var(--hair); }
.page-head .kicker{ margin-bottom:18px; }
.page-head h1{ font-size:clamp(32px,4vw,50px); margin-bottom:20px; }
.page-head h1 em{ font-family:'Instrument Serif',serif; font-style:italic;
  font-weight:400; color:var(--terra); letter-spacing:0; }
.page-head p.lead{ font-size:19px; max-width:36em; }
@media(max-width:760px){ .page-head{ padding:44px 0 34px; } }

.prose{ max-width:38em; padding:64px 0; display:flex; flex-direction:column; gap:22px; }
.prose h2{ font-size:clamp(24px,2.6vw,32px); margin-top:26px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19.5px; color:var(--navy); margin-top:14px; }
.prose p{ font-size:16.5px; }
.prose ul{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.prose li::marker{ color:var(--terra); }
.prose strong{ color:var(--navy); font-weight:700; }

.pull{ border-left:4px solid var(--terra); background:#fff; padding:20px 24px;
  font-size:17px; color:var(--navy); }

.qa{ border-top:1px solid var(--hair); padding:22px 0; }
.qa:last-of-type{ border-bottom:1px solid var(--hair); }
.qa h3{ margin-bottom:8px; }
.qa p{ max-width:40em; }

.crumb{ padding:18px 0 0; font-size:14px; color:var(--glabel); }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--terra); }

.next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;
  padding-bottom:80px; }
.next a{ display:block; background:#fff; border:1px solid var(--hair); border-radius:14px;
  padding:20px 22px; text-decoration:none; transition:border-color .15s ease; }
.next a:hover{ border-color:var(--terra); }
.next b{ display:block; color:var(--navy); font-size:17px; margin-bottom:5px; }
.next span{ font-size:14.5px; color:var(--gtext); }

/* Signature d'article : date de publication et auteur, sous le chapeau.
   Un texte qui parle d'un dispositif officiel doit porter sa date, sinon
   le lecteur ne peut pas savoir s'il est encore a jour. */
.signature{ margin-top:18px; font-size:14.5px; color:var(--glabel); }
.signature time{ color:var(--navy); font-weight:600; }
.next time{ display:inline-block; margin-top:6px; color:var(--glabel); font-size:13.5px; }