/* ==========================================================
   CAPSANE — feuille de style commune
   Deux entrées, une seule identité.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500&display=swap');

:root {
  --papier: #F5F7F6;
  --chaud: #F7F4EF;
  --surface: #FFFFFF;
  --encre: #16211E;
  --gris: #6B7A76;
  --trait: #DDE4E1;
  --cap: #2F6F5E;
  --cap-clair: #E4EDE9;
  --bande: #C3D7CF;

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

body.patient { background: var(--chaud); }

a { color: var(--cap); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--cap); outline-offset: 3px; }

.contenu { max-width: 940px; margin: 0 auto; padding: 0 26px; }
.contenu--etroit { max-width: 720px; }

/* ---------- Marque ---------- */
.marque { display: flex; align-items: center; gap: 10px; }
.marque__nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: var(--encre);
}
.marque__mention {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--gris);
  align-self: center;
  margin-left: 2px;
}

/* ---------- En-tête ---------- */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}
body.patient .entete { background: transparent; border-bottom: none; }
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav a { font-size: 14px; color: var(--gris); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--encre); text-decoration: none; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid var(--cap);
  background: var(--cap);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover { background: #275C4E; border-color: #275C4E; text-decoration: none; }
.bouton--fantome { background: transparent; color: var(--encre); border-color: var(--trait); }
.bouton--fantome:hover { background: var(--surface); border-color: var(--gris); }
.bouton--clair { background: #fff; color: var(--encre); border-color: #fff; }
.bouton--petit { font-size: 13.5px; padding: 9px 16px; }

/* ---------- Titres ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: 38px; line-height: 1.18; }
h2 { font-size: 25px; line-height: 1.25; }
h3 { font-size: 18px; line-height: 1.35; }
@media (max-width: 620px) { h1 { font-size: 29px; } h2 { font-size: 21px; } }

.surtitre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.chapeau { font-size: 17px; color: var(--gris); max-width: 54ch; }

/* ---------- Sections ---------- */
.section { padding: 58px 0; }
.section--serre { padding: 40px 0; }
.section--blanche { background: var(--surface); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.section--encre { background: var(--encre); color: #fff; }
.section--encre h2, .section--encre h3 { color: #fff; }
.section--encre p { color: #A9BDB7; }

/* ---------- Grilles ---------- */
.grille { display: grid; gap: 22px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Cartes ---------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: 22px;
}
.carte p { color: var(--gris); font-size: 14.5px; margin: 8px 0 0; }

/* Carte fiche conseil, avec illustration */
.fiche {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fiche__illustration {
  aspect-ratio: 16 / 9;
  background: var(--cap-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cap);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.fiche__illustration img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche__corps { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.fiche__corps p { color: var(--gris); font-size: 14.5px; margin: 8px 0 14px; flex: 1; }
.fiche__lien { font-size: 14px; font-weight: 500; }

/* ---------- Module e-learning ---------- */
.module {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--trait);
}
.module:last-child { border-bottom: 1px solid var(--trait); }
.module__numero { font-family: var(--mono); font-size: 12px; color: var(--cap); padding-top: 4px; min-width: 26px; }
.module__corps { flex: 1; min-width: 220px; }
.module__corps p { color: var(--gris); font-size: 14.5px; margin: 7px 0 0; }
.module__duree { font-family: var(--mono); font-size: 12px; color: var(--gris); white-space: nowrap; padding-top: 4px; }

/* ---------- Saisie du code ---------- */
.code { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.code input {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.1em;
  padding: 14px 18px;
  border-radius: 4px;
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre);
  width: 210px;
}
.code input::placeholder { color: #A8B5B1; }

.garanties { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.garanties span { font-size: 12.5px; color: var(--gris); }

/* ---------- Bande de mesure ---------- */
.mesure { position: relative; height: 54px; max-width: 300px; margin-top: 8px; }
.mesure__regle { position: absolute; top: 24px; left: 0; right: 0; height: 10px; background: var(--papier); border: 1px solid var(--trait); border-radius: 2px; }
.mesure__intervalle { position: absolute; top: 24px; left: 29%; width: 22%; height: 10px; background: var(--bande); border-radius: 2px; }
.mesure__point { position: absolute; left: 40%; top: 16px; width: 2px; height: 26px; background: var(--cap); }
.mesure__valeur { position: absolute; left: 40%; top: -4px; transform: translateX(-50%); font-family: var(--mono); font-size: 17px; }
.mesure__borne { position: absolute; top: 38px; font-family: var(--mono); font-size: 10px; color: var(--gris); }

/* ---------- Pied de page ---------- */
.pied {
  padding: 30px 0 50px;
  font-size: 12.5px;
  color: var(--gris);
}
.pied__liens { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.pied__liens a { color: var(--gris); }
.pied__urgence {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--cap);
  border-radius: 4px;
  padding: 22px 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  max-width: 640px;
}
.pied__urgence strong {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================
   Logo agrandi
   ========================================================== */
.marque svg { width: 40px; height: 40px; }
.marque__nom { font-size: 24px; letter-spacing: 0.04em; }
.marque__mention { font-size: 11px; }
@media (max-width: 620px) {
  .marque svg { width: 32px; height: 32px; }
  .marque__nom { font-size: 20px; }
}

/* ==========================================================
   Règle de lecture dans la marge gauche
   ========================================================== */
.regle {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 76px;
  pointer-events: none;
  z-index: 4;
  border-right: 1px solid var(--trait);
  background:
    repeating-linear-gradient(to bottom, var(--trait) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to bottom, var(--bande) 0 1px, transparent 1px 80px);
  background-size: 14px 100%, 30px 100%;
  background-position: right top, right top;
  background-repeat: repeat-y, repeat-y;
}
.regle__curseur {
  position: absolute;
  right: 0;
  width: 44px;
  height: 2px;
  background: var(--cap);
  transition: top .08s linear;
}
.regle__curseur::after {
  content: attr(data-valeur);
  position: absolute;
  right: 50px;
  top: -9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cap);
}
.regle__intervalle {
  position: absolute;
  right: 0;
  width: 12px;
  background: var(--bande);
  opacity: .8;
  transition: top .08s linear;
}
@media (max-width: 1100px) { .regle { display: none; } }

/* La trame fixe des marges devient inutile à gauche */
body::before { display: none; }
body::after { opacity: .65; }
@media (max-width: 1100px) { body::after { display: none; } }

.formulaire { margin-top: 26px; max-width: 460px; }
.formulaire label { display:block; font-size:14px; font-weight:600; margin:18px 0 6px; }
.formulaire input[type="email"], .formulaire input[type="password"], .formulaire input[type="text"] {
  width:100%; font-family:var(--sans); font-size:17px; padding:13px 15px;
  border:1px solid var(--trait); border-radius:4px; background:var(--surface); color:var(--encre); }
.formulaire .bouton { margin-top:24px; }
.aide { font-size:13.5px; color:var(--gris); margin:8px 0 0; }
.case { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:400; margin:20px 0 0; line-height:1.5; }
.case input { margin-top:4px; width:18px; height:18px; flex-shrink:0; }
.alerte { background:#F6E7E4; border-left:4px solid #9E3B2C; border-radius:3px; padding:14px 16px; font-size:15px; margin-bottom:24px; }
.liste { font-size:14.5px; color:var(--gris); line-height:1.8; padding-left:18px; }

/* Le texte des boutons ne doit jamais hériter d'une couleur de paragraphe */
a.bouton, button.bouton { color: #FFFFFF !important; }
a.bouton--fantome, button.bouton--fantome { color: var(--encre) !important; }
a.bouton--clair, button.bouton--clair { color: var(--encre) !important; }
a.bouton:hover, button.bouton:hover { color: #FFFFFF !important; text-decoration: none; }
a.bouton--fantome:hover, a.bouton--clair:hover { color: var(--encre) !important; }

/* ---------- Lisibilite : gris renforce et texte agrandi ---------- */
:root{ --gris:#4E5C58; }
body{ font-size:18px; }
p, li, td{ font-size:17px; line-height:1.65; }
.chapeau{ font-size:18.5px; }
.carte p{ font-size:16px; }
.aide{ font-size:14.5px; }
.surtitre{ font-size:12px; color:#5E6D69; }
.liste{ font-size:16px; }
table{ font-size:16px; }

/* ---------- Lisibilite renforcee (prioritaire) ---------- */
body{ font-size:18px !important; }
p, li, td{ font-size:17px !important; line-height:1.65 !important; }
.chapeau{ font-size:18.5px !important; }
.carte p{ font-size:16.5px !important; }
.surtitre{ font-size:12.5px !important; letter-spacing:.1em !important; color:#4E5C58 !important; }
table td{ font-size:16.5px !important; }
[style*="var(--gris)"]{ color:#3F4C48 !important; }
[style*="font-size:14px"], [style*="font-size:13.5px"], [style*="font-size:13px"]{
  font-size:15.5px !important;
}
[style*="font-size:14.5px"], [style*="font-size:15px"]{ font-size:16.5px !important; }

/* ---------- Listes deroulantes ---------- */
select, .formulaire select{
  width:100% !important;
  font-family:var(--sans) !important;
  font-size:17px !important;
  line-height:1.4 !important;
  padding:14px 44px 14px 15px !important;
  border:1px solid var(--trait) !important;
  border-radius:4px !important;
  background:var(--surface) !important;
  color:var(--encre) !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234E5C58' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
}
select:focus-visible{ outline:2px solid var(--cap) !important; outline-offset:2px !important; }
optgroup{ font-weight:600; color:var(--encre); font-size:15px; }
option{ font-weight:400; font-size:16px; padding:6px 0; }

/* ---------- Menu repliable, sans script ---------- */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--trait); border-radius: 5px;
  background: var(--surface); font-size: 16px; font-weight: 500;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--cap); }
.menu > summary:focus-visible { outline: 3px solid var(--cap); outline-offset: 2px; }
.menu__trait {
  width: 18px; height: 12px; flex-shrink: 0;
  border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  position: relative;
}
.menu__trait::after {
  content: ""; position: absolute; top: 4px; left: 0; right: 0;
  border-top: 2px solid var(--encre);
}
.menu[open] > summary { border-color: var(--cap); background: var(--cap-clair); }

.menu__panneau {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 240px; padding: 8px;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 6px; box-shadow: 0 8px 28px rgba(22,33,30,.14);
  display: flex; flex-direction: column;
}
.menu__panneau a, .menu__deconnexion {
  display: block; width: 100%; text-align: left;
  padding: 13px 16px; border-radius: 4px;
  font-size: 16.5px; color: var(--encre) !important; text-decoration: none;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans);
}
.menu__panneau a:hover, .menu__deconnexion:hover { background: var(--cap-clair); }
.menu__deconnexion {
  border-top: 1px solid var(--trait); border-radius: 0 0 4px 4px;
  margin-top: 6px; padding-top: 15px; color: var(--gris) !important;
}
@media (max-width: 620px) {
  .menu__texte { display: none; }
  .menu > summary { padding: 12px 14px; }
  .menu__panneau { min-width: 220px; }
}

/* ---------- Filtres des fiches, repliables ---------- */
.filtres > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--trait); border-radius: 5px;
  background: var(--surface); font-size: 15.5px;
}
.filtres > summary::-webkit-details-marker { display: none; }
.filtres[open] > summary { border-color: var(--cap); }
.filtres__liste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Menu : regles prioritaires ---------- */
nav .menu { position: relative !important; display: inline-block !important; }
nav .menu > summary {
  list-style: none !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  padding: 11px 16px !important; border: 1px solid var(--trait) !important;
  border-radius: 5px !important; background: #FFFFFF !important;
  font-size: 16px !important; font-weight: 500 !important;
}
nav .menu > summary::marker,
nav .menu > summary::-webkit-details-marker { display: none !important; content: "" !important; }
nav .menu__trait {
  display: block !important; width: 20px !important; height: 14px !important;
  flex-shrink: 0 !important; position: relative !important;
  border-top: 2px solid var(--encre) !important;
  border-bottom: 2px solid var(--encre) !important;
  background: transparent !important;
}
nav .menu__trait::after {
  content: "" !important; position: absolute !important;
  top: 5px !important; left: 0 !important; right: 0 !important;
  border-top: 2px solid var(--encre) !important;
}
nav .menu[open] > summary { border-color: var(--cap) !important; background: var(--cap-clair) !important; }

nav .menu__panneau {
  position: absolute !important; right: 0 !important; top: calc(100% + 8px) !important;
  z-index: 60 !important; min-width: 250px !important; padding: 8px !important;
  background: #FFFFFF !important; border: 1px solid var(--trait) !important;
  border-radius: 6px !important; box-shadow: 0 10px 30px rgba(22,33,30,.16) !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
nav .menu__panneau a, nav .menu__deconnexion {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 13px 16px !important; margin: 0 !important; border-radius: 4px !important;
  font-size: 16.5px !important; line-height: 1.4 !important;
  color: var(--encre) !important; text-decoration: none !important;
  border: 0 !important; background: transparent !important; cursor: pointer !important;
  font-family: var(--sans) !important; white-space: nowrap !important;
}
nav .menu__panneau a:hover, nav .menu__deconnexion:hover { background: var(--cap-clair) !important; }
nav .menu__deconnexion {
  border-top: 1px solid var(--trait) !important; border-radius: 0 !important;
  margin-top: 6px !important; padding-top: 15px !important; color: var(--gris) !important;
}
nav .menu__panneau form { margin: 0 !important; display: block !important; }
@media (max-width: 620px) { nav .menu__texte { display: none !important; } }

/* ---------- Impression ---------- */
@media print {
  .entete, .pied, footer, .nav, .menu, .pas-a-imprimer { display: none !important; }
  body { background: #fff !important; font-size: 11pt; }
  .section, .contenu { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  h1 { font-size: 18pt; }
  h2 { font-size: 13pt; margin-top: 18pt !important; }
  a { text-decoration: none; color: #000 !important; }
}

/* ---------- BANDEAU_PATIENT : bandeau, onglets, champ telephone ---------- */
.formulaire input[type="tel"] {
  width:100%; font-family:var(--sans); font-size:17px; padding:13px 15px;
  border:1px solid var(--trait); border-radius:4px; background:var(--surface); color:var(--encre); }
.bandeau-patient { background:var(--surface); border:1px solid var(--trait);
  border-left:4px solid var(--cap); border-radius:4px; padding:16px 20px 0; margin-bottom:26px; }
.bandeau-patient__nom { font-family:var(--serif); font-size:24px; font-weight:500; line-height:1.3; }
.bandeau-patient__infos { font-size:16px; color:#3F4C48; margin-top:2px; }
.onglets { display:flex; flex-wrap:wrap; gap:0 24px; margin-top:10px; }
.onglets a { padding:10px 0 12px; font-size:16px; color:#3F4C48; text-decoration:none;
  border-bottom:3px solid transparent; }
.onglets a:hover { color:var(--encre); text-decoration:none; }
.onglets a.actif { color:var(--cap); font-weight:600; border-bottom-color:var(--cap); }