/* ============================================================
   Health Protocols — pages guides
   Mêmes jetons visuels que la page de vente : teal profond,
   terracotta, crème, Lora (éditorial) + Montserrat (interface).
   ============================================================ */
:root{
  --ink:#22302F;      --body:#2E3B3A;    --teal:#0E5A57;
  --teal-dk:#0A4240;  --teal-lt:#E3EDEA; --terra:#B9643A;
  --terra-dk:#8F4A28; --cream:#FBF8F2;   --sand:#F3EADA;
  --sage:#EAF0E7;     --muted:#7C8B8A;   --rule:#D9D2C4;
  --white:#fff;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1080px; --wrap-narrow:720px;
  --r:4px; --r-lg:8px;
  --shadow:0 18px 40px -20px rgba(10,66,64,.35);
}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; background:var(--cream); color:var(--body);
  font-family:var(--serif); font-size:17.5px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
h1,h2,h3{font-family:var(--sans); color:var(--teal-dk); line-height:1.2; margin:0;}
h1{font-size:clamp(1.75rem,4vw,2.7rem); font-weight:700; letter-spacing:-.02em;}
h2{font-size:clamp(1.28rem,2.5vw,1.75rem); font-weight:700; letter-spacing:-.015em; margin-top:2.1em;}
h3{font-size:1.1rem; font-weight:600; margin-top:1.6em;}
p{margin:0 0 1.05em;}
a{color:var(--teal);}
strong{color:var(--ink); font-weight:700;}
ul{padding-left:1.15em;}
li{margin-bottom:.45em;}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:22px;}

/* ---------- en-tête ---------- */
.entete{background:var(--teal-dk); color:#DCE8E5; padding:14px 0;}
.entete .wrap{display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px;}
.entete a{color:#fff; text-decoration:none; font-family:var(--sans);
  font-weight:600; font-size:.88rem; letter-spacing:.02em;}
.entete .marque{display:flex; align-items:baseline; gap:9px; font-size:1rem;}
.entete .marque span{font-weight:400; opacity:.72; font-size:.78rem;}
.entete nav a{margin-left:18px; opacity:.85;}
.entete nav a:hover{opacity:1; text-decoration:underline;}

/* ---------- article ---------- */
article{max-width:var(--wrap-narrow); margin-inline:auto; padding:clamp(38px,6vw,64px) 22px 0;}
.eyebrow{font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--terra);
  margin:0 0 14px;}
.chapeau{font-size:clamp(1.03rem,1.7vw,1.16rem); color:var(--body);}
.meta{font-family:var(--sans); font-size:.78rem; color:var(--muted);
  border-top:1px solid var(--rule); margin-top:26px; padding-top:12px;}
hr{border:0; border-top:1px solid var(--rule); margin:2.4em 0;}

/* ---------- encadrés ---------- */
.protocole{background:var(--sage); border-left:3px solid var(--teal-dk);
  padding:22px 24px; margin:30px 0; border-radius:0 var(--r-lg) var(--r-lg) 0;}
.protocole h3{margin:0 0 4px; font-size:.94rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--teal-dk);}
.protocole .sous{font-family:var(--sans); font-size:.78rem; color:var(--muted);
  margin:0 0 14px;}
.protocole ol,.protocole ul{margin:0; padding-left:1.2em;}
.protocole li{margin-bottom:.5em;}

.precaution{background:var(--sand); border-left:3px solid var(--terra);
  padding:18px 22px; margin:26px 0; border-radius:0 var(--r-lg) var(--r-lg) 0;
  font-size:.97rem;}
.precaution h3{margin:0 0 6px; font-size:.9rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--terra-dk);}
.precaution p:last-child{margin-bottom:0;}

.mecanisme{background:var(--white); border:1px solid var(--rule);
  padding:20px 24px; margin:28px 0; border-radius:var(--r-lg);}
.mecanisme h3{margin:0 0 8px; font-size:.9rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--teal);}

/* ---------- appel ---------- */
.appel{background:radial-gradient(120% 100% at 76% 10%, #125F5B 0%, var(--teal-dk) 48%, #062E2C 100%);
  color:#DCE8E5; padding:34px 30px; border-radius:var(--r-lg); margin:44px 0 10px;}
.appel h2{color:#fff; margin:0 0 10px; font-size:clamp(1.2rem,2.3vw,1.6rem);}
.appel p{color:#C6D8D4; margin-bottom:20px;}
.btn{display:inline-block; background:var(--terra); color:#fff; text-decoration:none;
  font-family:var(--sans); font-weight:700; font-size:1rem; padding:15px 32px;
  border-radius:var(--r); box-shadow:0 12px 26px -12px rgba(143,74,40,.75);
  transition:background .16s ease, transform .16s ease;}
.btn:hover{background:var(--terra-dk); transform:translateY(-2px);}
.btn-note{font-family:var(--sans); font-size:.8rem; color:#A9C2BE;
  margin:12px 0 0;}

/* ---------- liens internes ---------- */
.lire{background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:22px 24px; margin:40px 0 0;}
.lire h2{margin:0 0 12px; font-size:.92rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);}
.lire ul{list-style:none; margin:0; padding:0;}
.lire li{border-top:1px solid var(--rule); padding:11px 0;}
.lire li:first-child{border-top:0;}
.lire a{font-family:var(--sans); font-weight:600; font-size:.94rem;
  text-decoration:none;}
.lire a:hover{text-decoration:underline;}
.lire span{display:block; font-size:.86rem; color:var(--muted);
  font-family:var(--sans); font-weight:400;}

/* ---------- pied ---------- */
footer{background:var(--teal-dk); color:#9FBAB6; margin-top:64px;
  padding:32px 0 40px; font-family:var(--sans); font-size:.82rem;}
footer .wrap{max-width:var(--wrap-narrow);}
footer a{color:#DCE8E5;}
footer p{margin:0 0 .7em; line-height:1.65;}
footer nav{margin-top:14px;}
footer nav a{margin-right:16px;}
avertissement{display:block;}

/* ---------- hub ---------- */
.hub-liste{list-style:none; margin:34px 0 0; padding:0; display:grid;
  gap:18px; grid-template-columns:1fr;}
.carte{background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:24px 26px;}
.carte h2{margin:0 0 8px; font-size:1.15rem;}
.carte h2 a{text-decoration:none;}
.carte h2 a:hover{text-decoration:underline;}
.carte p{margin:0 0 8px; font-size:.98rem;}
.carte .tag{font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terra);}