/* asthme-plongee.com — charte « Encre & abysses » (2026)
   Déclinaison de « Chrome & encre » d'au-cabinet.fr : cases à contour d'encre, ombres franches sans flou,
   titres massifs, en couleurs d'océan et turquoise de l'inhalateur du logo.
   Règle : aucune information portée par la couleur seule (toujours un pictogramme ou un mot). */

@import url("fonts/polices.css");

:root {
  --encre: #0d2433;
  --abysse: #0a3a57;
  --nuit: #06202f;
  --lagon: #0e8f95;
  --lagon-fonce: #0a6b70;
  --ecume: #eef6f5;
  --papier: #f6faf9;
  --surface: #ffffff;
  --corail: #ff6b4a;
  --soleil: #ffd166;
  --lien: #0b5f8a;
  --ok: #2f6b4f;
  --ok-fond: #e3f1e9;
  --attention: #8a5200;
  --attention-fond: #fff1d6;
  --stop: #b3261e;
  --stop-fond: #fde7e4;
  --gris: #51606b;
  --trait: 3px;
  --ombre: 6px 6px 0 var(--encre);
  --ombre-lagon: 6px 6px 0 var(--lagon);
  --rayon: 4px;
  --large: 1180px;
  --f-texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-titre: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-cri: "Kanit", "Arial Black", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-texte); font-size: 1.0625rem; line-height: 1.6;
  color: var(--encre); background: var(--papier);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--lien); text-underline-offset: 0.18em; }
a:hover { color: var(--abysse); }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 1.25rem; }
p { margin: 0 0 0.9em; }
strong { font-weight: 700; }

/* ---------- Bandeau collant ---------- */
.bandeau {
  position: sticky; top: 0; z-index: 50; background: var(--nuit); color: #fff;
  border-bottom: var(--trait) solid var(--lagon);
}
.bandeau .enveloppe { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.marque {
  font-family: var(--f-cri); font-style: italic; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em;
  color: #fff; text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem;
}
.marque b { color: var(--soleil); font-weight: 800; }
.marque:hover { color: #fff; }
.marque .bulle-logo { width: 1.6rem; height: 1.6rem; }
.nav { display: flex; gap: 0.15rem; margin-left: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem;
  color: #d9eef0; text-decoration: none; padding: 0.35rem 0.6rem; border-radius: 3px; white-space: nowrap;
}
.nav a:hover, .nav a.actif { color: var(--nuit); background: var(--soleil); }

/* ---------- En-tête plein écran ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  background: var(--abysse) url("img/fond-plongee-1200.jpg") center 30% / cover no-repeat;
  min-height: min(92vh, 860px); display: flex; align-items: center;
}
@media (min-width: 1100px) { .hero { background-image: url("img/fond-plongee-2400.jpg"); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(4, 22, 34, 0.92) 0%, rgba(6, 32, 47, 0.78) 42%, rgba(6, 32, 47, 0.25) 100%);
}
.hero .enveloppe { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 2rem; align-items: center; padding-top: 3rem; padding-bottom: 4rem; }
.hero-logo { width: min(340px, 70vw); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); margin-bottom: 0.5rem; }
.surtitre {
  font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem;
  color: var(--soleil); margin: 0 0 0.6rem;
}
.hero h1 {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; line-height: 0.92; margin: 0 0 0.9rem;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem); letter-spacing: 0.005em;
}
.cri {
  font-family: var(--f-cri); font-style: italic; font-weight: 800; line-height: 1.05; margin: 0 0 1.1rem;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  background: linear-gradient(180deg, #ffffff 0%, #c9f3f1 48%, #63d3cf 50%, #2fb7b2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 var(--nuit));
}
.chapo { font-size: 1.15rem; max-width: 38rem; color: #e7f4f5; }
.chapo strong { color: #fff; }
.profils { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem;
  padding: 0.7rem 1.1rem; border: var(--trait) solid var(--encre); border-radius: var(--rayon);
  background: var(--surface); color: var(--encre); text-decoration: none; box-shadow: 5px 5px 0 var(--encre);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--encre); color: var(--encre); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--encre); }
.btn.fonce { background: var(--encre); color: #fff; box-shadow: 5px 5px 0 var(--lagon); }
.btn.fonce:hover { color: #fff; box-shadow: 7px 7px 0 var(--lagon); }
.hero .btn { box-shadow: 5px 5px 0 var(--lagon); }
.hero .btn:hover { box-shadow: 7px 7px 0 var(--soleil); }
.btn svg { width: 1.4em; height: 1.4em; flex: none; }

/* Carte « verdict » dans l'en-tête */
.verdict {
  background: rgba(255, 255, 255, 0.96); color: var(--encre); border: var(--trait) solid var(--encre);
  border-radius: var(--rayon); box-shadow: 8px 8px 0 var(--lagon); padding: 1.2rem 1.3rem 1rem;
}
.verdict h2 { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; margin: 0 0 0.6rem; line-height: 1; }
.verdict ul { list-style: none; margin: 0; padding: 0; }
.verdict li { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.4rem; padding: 0.4rem 0; border-top: 1px dashed #b9cfd2; font-size: 0.98rem; line-height: 1.4; }
.verdict li:first-child { border-top: 0; }
.verdict .pastille-ok { width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.verdict .pied { font-family: var(--f-mono); font-size: 0.72rem; color: var(--gris); margin-top: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Bulles qui montent */
.bulles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bulles span {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9), rgba(200, 240, 245, 0.35) 40%, rgba(255, 255, 255, 0.08) 70%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  animation: monte linear infinite;
}
@keyframes monte {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(14px, -50vh) scale(1); }
  100% { transform: translate(-10px, -105vh) scale(1.25); opacity: 0; }
}
.descendre {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); color: #fff; font-family: var(--f-mono);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center; opacity: 0.85;
}
.descendre::after { content: ""; display: block; width: 2px; height: 26px; margin: 0.4rem auto 0; background: #fff; animation: sonde 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes sonde { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0 3.5rem; position: relative; }
.section.teinte { background: var(--ecume); border-top: var(--trait) solid var(--encre); border-bottom: var(--trait) solid var(--encre); }
.section.nuit { background: var(--nuit); color: #e7f4f5; }
.section.nuit a { color: var(--soleil); }
.tete { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; }
.num {
  flex: none; width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  font-family: var(--f-cri); font-style: italic; font-weight: 800; font-size: 1.7rem; color: #fff;
  background: var(--lagon-fonce); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: 4px 4px 0 var(--encre);
}
.nuit .num { border-color: #fff; box-shadow: 4px 4px 0 var(--lagon); }
.tete h2 {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; line-height: 0.95; margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
}
.tete .sous { font-family: var(--f-cri); font-style: italic; font-weight: 800; color: var(--lagon-fonce); font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 0.2rem 0 0; line-height: 1.15; }
.nuit .tete .sous { color: #63d3cf; }
.intro { font-size: 1.12rem; max-width: 52rem; }

/* Cases */
.case {
  background: var(--surface); border: var(--trait) solid var(--encre); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 1.2rem 1.25rem;
}
.case h3 { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.45rem; line-height: 1.02; margin: 0 0 0.55rem; }
.case h3 .ico { display: inline-block; vertical-align: -0.12em; width: 1.15em; height: 1.15em; margin-right: 0.25rem; }
.grille { display: grid; gap: 1.4rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etiquette {
  display: inline-block; font-family: var(--f-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border: 2px solid var(--encre); border-radius: 3px; background: var(--soleil); color: var(--encre);
}
.etiquette.maj { background: var(--corail); color: #fff; border-color: var(--encre); }
.etiquette.lagon { background: var(--lagon-fonce); color: #fff; }

/* Chiffres qui comptent */
.chiffre { font-family: var(--f-cri); font-style: italic; font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--lagon-fonce); display: block; margin-bottom: 0.3rem; }
.chiffre small { font-size: 0.45em; }

/* L'essentiel : quatre cases */
.essentiel .case { position: relative; padding-top: 1.6rem; }
.essentiel .case .coin { position: absolute; top: -0.9rem; left: 1rem; }
.essentiel .case p:last-child { margin-bottom: 0; }

/* ---------- Puis-je plonger ? ---------- */
.test { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.6rem; align-items: start; }
.question { border-top: 2px dashed #9cb8bd; padding: 0.9rem 0; }
.question:first-of-type { border-top: 0; padding-top: 0; }
.question legend, .question .libelle { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.15rem; padding: 0; }
.question .aide { font-size: 0.92rem; color: var(--gris); margin: 0 0 0.5rem; }
.choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choix label {
  position: relative; cursor: pointer; font-family: var(--f-titre); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  border: var(--trait) solid var(--encre); border-radius: var(--rayon); padding: 0.4rem 0.95rem; background: var(--surface);
  box-shadow: 3px 3px 0 var(--encre); transition: transform 0.1s, box-shadow 0.1s, background 0.1s; user-select: none;
}
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); }
.choix input:checked + span::before { content: "✓ "; }
.choix label:has(input:checked) { background: var(--encre); color: #fff; box-shadow: 3px 3px 0 var(--lagon); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--corail); outline-offset: 3px; }
.question[hidden] { display: none; }
.resultat { position: sticky; top: 5rem; }
.resultat .case { box-shadow: var(--ombre-lagon); min-height: 14rem; }
.res-etat {
  display: flex; align-items: center; gap: 0.7rem; font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: 1.6rem; line-height: 1; margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; border: var(--trait) solid var(--encre); border-radius: var(--rayon);
}
.res-etat .sym { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--f-texte); font-size: 1.2rem; border: 2px solid var(--encre); }
.res-etat.attente { background: var(--ecume); }
.res-etat.attente .sym { background: var(--gris); }
.res-etat.vert { background: var(--ok-fond); }
.res-etat.vert .sym { background: var(--ok); }
.res-etat.orange { background: var(--attention-fond); }
.res-etat.orange .sym { background: var(--attention); }
.res-etat.rouge { background: var(--stop-fond); }
.res-etat.rouge .sym { background: var(--stop); }
.res-etat.pop { animation: tampon 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tampon { 0% { transform: scale(1.12) rotate(-1.5deg); } 100% { transform: none; } }
.res-raisons { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.res-raisons li { margin: 0.2rem 0; }
.res-note { font-size: 0.86rem; color: var(--gris); border-top: 1px dashed #9cb8bd; padding-top: 0.6rem; margin: 0.6rem 0 0; }

/* Parcours en étapes */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapes > li { counter-increment: etape; position: relative; }
.etapes > li .case { height: 100%; padding-top: 2.4rem; }
.etapes > li::before {
  content: counter(etape, decimal-leading-zero); position: absolute; top: -1rem; left: 1rem; z-index: 1;
  font-family: var(--f-cri); font-style: italic; font-weight: 800; font-size: 1.4rem; color: #fff; background: var(--corail);
  border: var(--trait) solid var(--encre); border-radius: var(--rayon); padding: 0.1rem 0.6rem; box-shadow: 3px 3px 0 var(--encre);
}
.etapes .qui { font-family: var(--f-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lagon-fonce); font-weight: 600; margin-bottom: 0.3rem; display: block; }
.etapes ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.etapes li li { margin: 0.2rem 0; }

/* Onglets de profil */
.onglets { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.4rem; }
.onglets button {
  cursor: pointer; font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.04em;
  padding: 0.55rem 1rem; border: var(--trait) solid var(--encre); border-radius: var(--rayon); background: var(--surface); color: var(--encre);
  box-shadow: 4px 4px 0 var(--encre); display: inline-flex; align-items: center; gap: 0.45rem;
}
.onglets button[aria-selected="true"] { background: var(--encre); color: #fff; box-shadow: 4px 4px 0 var(--corail); }
.onglets button svg { width: 1.3em; height: 1.3em; }
.panneau[hidden] { display: none; }
.panneau .actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* ---------- Pression : la jauge ---------- */
.pression { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1.6rem; align-items: stretch; }
.colonne-eau {
  position: relative; border: var(--trait) solid #fff; border-radius: var(--rayon); box-shadow: 6px 6px 0 var(--lagon);
  background: linear-gradient(180deg, #7fd3e0 0%, #1d8fb0 22%, #0b5c86 55%, #06304d 100%); min-height: 460px; overflow: hidden;
}
.colonne-eau .grad { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 255, 255, 0.35); }
.colonne-eau .grad span { position: absolute; left: 0.5rem; top: -0.75rem; font-family: var(--f-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.85); }
.plongeur { position: absolute; left: 50%; transform: translate(-50%, -50%); transition: top 0.25s ease-out; width: 170px; text-align: center; }
.plongeur svg { width: 170px; height: 110px; overflow: visible; }
.plongeur .poumon { transition: transform 0.25s ease-out; transform-origin: 75px 80px; }
.cadran { display: grid; gap: 1rem; }
.cadran input[type="range"] { width: 100%; accent-color: var(--soleil); height: 2rem; }
.lecture { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.lecture .mesure { background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: var(--rayon); padding: 0.7rem 0.8rem; }
.lecture .mesure b { display: block; font-family: var(--f-cri); font-style: italic; font-weight: 800; font-size: 2rem; color: #fff; line-height: 1.05; }
.lecture .mesure span { font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #a9dfe2; }
.lecture .mesure.chaud b { color: var(--soleil); }
.alerte-remontee { border: 2px solid var(--soleil); border-radius: var(--rayon); padding: 0.8rem 0.9rem; background: rgba(255, 209, 102, 0.08); }
.alerte-remontee b { color: var(--soleil); }

/* Effets physiologiques : accordéons en cases */
details.pli { background: var(--surface); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: 4px 4px 0 var(--encre); margin: 0 0 1rem; }
details.pli > summary {
  list-style: none; cursor: pointer; padding: 0.8rem 1rem; display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1;
}
details.pli > summary::-webkit-details-marker { display: none; }
details.pli > summary::after { content: "+"; margin-left: auto; font-family: var(--f-cri); font-size: 1.6rem; line-height: 1; transition: transform 0.2s; }
details.pli[open] > summary::after { transform: rotate(45deg); }
details.pli > summary .n { font-family: var(--f-cri); font-style: italic; color: var(--lagon-fonce); }
details.pli .corps { padding: 0 1.1rem 1rem; border-top: 2px dashed #9cb8bd; padding-top: 0.9rem; }
.nuit details.pli { color: var(--encre); }

/* Risques : cases à niveau */
.risque .niveau { display: flex; gap: 0.25rem; margin: 0.2rem 0 0.6rem; align-items: center; font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); }
.risque .niveau i { width: 1.1rem; height: 0.55rem; border: 2px solid var(--encre); border-radius: 2px; background: var(--surface); }
.risque .niveau i.plein { background: var(--corail); }
.risque .mecanisme { font-size: 0.95rem; color: #2c3d48; }

/* Frise des études */
.frise { position: relative; display: grid; gap: 1.2rem; margin-top: 1rem; }
.frise::before { content: ""; position: absolute; left: 4.6rem; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(180deg, var(--encre) 0 10px, transparent 10px 18px); }
.jalon { display: grid; grid-template-columns: 4rem 1fr; gap: 1.6rem; align-items: start; position: relative; }
.jalon .an { font-family: var(--f-cri); font-style: italic; font-weight: 800; font-size: 1.3rem; text-align: right; padding-top: 0.6rem; }
.jalon .case { padding: 0.9rem 1rem; box-shadow: 4px 4px 0 var(--encre); }
.jalon .case::before { content: ""; position: absolute; left: 4.15rem; top: 1rem; width: 1rem; height: 1rem; border: var(--trait) solid var(--encre); background: var(--soleil); border-radius: 50%; }
.jalon.rassurant .case::before { background: var(--lagon); }
.jalon.alerte .case::before { background: var(--corail); }
.jalon h4 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.jalon p { margin: 0; font-size: 0.97rem; }
.legende-frise { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; margin: 0.6rem 0 0; }
.legende-frise span::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; border: 2px solid var(--encre); border-radius: 50%; margin-right: 0.35rem; vertical-align: -0.1em; }
.legende-frise .l-r::before { background: var(--lagon); }
.legende-frise .l-a::before { background: var(--corail); }
.legende-frise .l-n::before { background: var(--soleil); }

/* Jauge du niveau de preuve */
.preuve { display: flex; gap: 0.35rem; align-items: center; margin: 0.4rem 0 0.9rem; }
.preuve i { width: 2.4rem; height: 0.9rem; border: 2px solid var(--encre); border-radius: 2px; background: var(--surface); }
.preuve i.plein { background: var(--lagon); }
.preuve span { font-family: var(--f-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-left: 0.4rem; }

/* Tableau comparatif → cartes sur téléphone */
.tableau-reco { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); font-size: 0.95rem; }
.tableau-reco th, .tableau-reco td { padding: 0.55rem 0.6rem; border-bottom: 1px solid #c9dadc; text-align: left; vertical-align: top; }
.tableau-reco thead th { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.05rem; background: var(--encre); color: #fff; line-height: 1.05; }
.tableau-reco thead th small { display: block; font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.05em; color: #a9dfe2; text-transform: none; margin-top: 0.15rem; }
.tableau-reco tbody th { font-weight: 700; width: 26%; }
.tableau-reco tbody tr:nth-child(even) { background: #f3f8f8; }
.v { font-weight: 700; }
.v.oui::before { content: "✓ "; color: var(--ok); }
.v.non::before { content: "✕ "; color: var(--stop); }
.v.nd { color: var(--gris); font-weight: 400; }
.v.nd::before { content: "– "; }
.v.cond::before { content: "! "; color: var(--attention); }

/* Conseils : avant / pendant / après */
.moment { position: relative; }
.moment .case { height: 100%; }
.moment h3 { display: flex; align-items: center; gap: 0.5rem; }
.coche { list-style: none; padding: 0; margin: 0; }
.coche li { position: relative; padding-left: 1.7rem; margin: 0.45rem 0; }
.coche li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; border: 2px solid var(--encre); border-radius: 3px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; background: var(--ok-fond); color: var(--ok); }
.coche li.non::before { content: "✕"; background: var(--stop-fond); color: var(--stop); }
.coche li.attn::before { content: "!"; background: var(--attention-fond); color: var(--attention); }

/* La crise sous l'eau : bande d'urgence */
.urgence { border: var(--trait) solid var(--encre); border-radius: var(--rayon); background: var(--stop-fond); box-shadow: 6px 6px 0 var(--stop); padding: 1.2rem 1.25rem; margin-top: 2rem; }
.urgence h3 { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; margin: 0 0 0.8rem; line-height: 1; }
.urgence ol { list-style: none; counter-reset: u; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.urgence ol li { counter-increment: u; background: var(--surface); border: 2px solid var(--encre); border-radius: var(--rayon); padding: 0.8rem 0.9rem 0.8rem 3.1rem; position: relative; }
.urgence ol li::before { content: counter(u); position: absolute; left: 0.7rem; top: 0.7rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--stop); color: #fff; display: grid; place-items: center; font-family: var(--f-cri); font-style: italic; font-weight: 800; }
.urgence ol li b { display: block; font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; margin-bottom: 0.2rem; }

/* Encadrés */
.note { border-left: 6px solid var(--lagon); background: var(--surface); padding: 0.8rem 1rem; border-radius: 0 var(--rayon) var(--rayon) 0; margin: 1rem 0; }
.note.maj { border-left-color: var(--corail); }
.note .etiquette { margin-right: 0.4rem; }
.discordance { border: 2px dashed var(--attention); background: var(--attention-fond); padding: 0.8rem 1rem; border-radius: var(--rayon); margin: 1rem 0; font-size: 0.97rem; }
.discordance::before { content: "Les sources divergent"; display: block; font-family: var(--f-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--attention); margin-bottom: 0.2rem; }

/* Renvois aux sources */
a.ref { font-family: var(--f-mono); font-size: 0.72em; font-weight: 600; text-decoration: none; vertical-align: super; line-height: 0; padding: 0 0.12em; color: var(--lagon-fonce); }
a.ref::before { content: "["; } a.ref::after { content: "]"; }
.nuit a.ref, .hero a.ref { color: #63d3cf; }
.sources ol { padding-left: 2.6rem; font-size: 0.93rem; }
.sources li { margin: 0.35rem 0; scroll-margin-top: 5rem; }
.sources li:target { background: var(--soleil); outline: 4px solid var(--soleil); }
.sources .lu { font-family: var(--f-mono); font-size: 0.7rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.06em; }

/* Abréviations expliquées au survol ou au toucher */
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }
.bulle-abbr { position: absolute; z-index: 80; max-width: 18rem; background: var(--encre); color: #fff; font-size: 0.9rem; padding: 0.45rem 0.65rem; border-radius: var(--rayon); box-shadow: 3px 3px 0 var(--lagon); pointer-events: none; }

/* Apparition au défilement */
.revele { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.revele.vu { opacity: 1; transform: none; }

/* Pied */
.pied-site { background: var(--nuit); color: #cfe6e8; padding: 3rem 0 6rem; border-top: var(--trait) solid var(--lagon); font-size: 0.95rem; }
.pied-site a { color: var(--soleil); }
.pied-site .grille { grid-template-columns: 1.3fr 1fr 1fr; }
.pied-site h3 { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; color: #fff; margin: 0 0 0.5rem; font-size: 1.25rem; }
.pied-site .mise-a-jour { font-family: var(--f-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--soleil); }

/* Barre du bas (téléphone) */
.barre-bas { display: none; }

/* ---------- Adaptations ---------- */
@media (max-width: 980px) {
  .hero .enveloppe, .test, .pression { grid-template-columns: 1fr; }
  .g4, .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .urgence ol { grid-template-columns: 1fr; }
  .resultat { position: static; }
  .pied-site .grille { grid-template-columns: 1fr; }
  .nav { display: none; }
  .barre-bas {
    display: flex; position: fixed; z-index: 60; left: 50%; bottom: 0.8rem; transform: translateX(-50%);
    background: var(--nuit); border: var(--trait) solid var(--lagon); border-radius: 999px; padding: 0.3rem; gap: 0.1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  .barre-bas a { display: grid; justify-items: center; gap: 0.05rem; color: #d9eef0; text-decoration: none; font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.35rem 0.6rem; border-radius: 999px; min-width: 3.6rem; }
  .barre-bas a svg { width: 1.35rem; height: 1.35rem; }
  .barre-bas a.actif { background: var(--soleil); color: var(--nuit); }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .g2, .g3, .g4, .etapes { grid-template-columns: 1fr; }
  .section { padding: 3.2rem 0 2.6rem; }
  .hero { min-height: auto; }
  .hero .enveloppe { padding-top: 1.4rem; padding-bottom: 4.5rem; }
  .hero .enveloppe > div:first-child { display: flex; flex-direction: column; }
  .hero-logo { width: 190px; }
  .hero .chapo { order: 10; margin-top: 1.2rem; }
  .profils { margin-top: 0.4rem; }
  .profils .btn { width: 100%; justify-content: center; }
  .tete { align-items: center; }
  .num { width: 2.9rem; height: 2.9rem; font-size: 1.35rem; }
  .lecture { grid-template-columns: 1fr 1fr; }
  .lecture .mesure b { font-size: 1.55rem; }
  .colonne-eau { min-height: 300px; }
  .frise::before { left: 3.3rem; }
  .jalon { grid-template-columns: 2.8rem 1fr; gap: 1.3rem; }
  .jalon .an { font-size: 1.05rem; }
  .jalon .case::before { left: 2.85rem; }
  /* Tableau en cartes : une carte par organisme */
  .tableau-reco, .tableau-reco tbody, .tableau-reco tr, .tableau-reco td, .tableau-reco th { display: block; width: 100%; }
  .tableau-reco { border: 0; box-shadow: none; background: transparent; }
  .tableau-reco thead { display: none; }
  .tableau-reco tbody tr { background: var(--surface) !important; border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: 4px 4px 0 var(--encre); margin-bottom: 1rem; }
  .tableau-reco tbody th { background: var(--encre); color: #fff; width: 100%; }
  .tableau-reco td { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.5rem; }
  .tableau-reco td::before { content: attr(data-l); font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris); }
  .v { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bulles, .descendre::after { display: none; }
  .revele { opacity: 1; transform: none; transition: none; }
  .btn, .res-etat.pop, .plongeur, .plongeur .poumon { transition: none; animation: none; }
}

/* ---------- Impression : une fiche par profil ---------- */
.fiche-imprimable { display: none; }
@media print {
  @page { size: A4; margin: 14mm 13mm; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.4; }
  body.imprime-fiche > *:not(.fiche-imprimable) { display: none !important; }
  body.imprime-fiche .fiche-imprimable { display: block; }
  body.imprime-fiche .fiche-imprimable[hidden] { display: none !important; }
  .fiche-imprimable h1 { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 22pt; margin: 0 0 2mm; line-height: 1; }
  .fiche-imprimable h2 { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 13pt; margin: 4mm 0 1mm; border-bottom: 2px solid #000; }
  .fiche-imprimable ul, .fiche-imprimable ol { margin: 0 0 2mm; padding-left: 5mm; }
  .fiche-imprimable li { margin: 0.5mm 0; }
  .fiche-imprimable .pied-fiche { margin-top: 4mm; font-size: 8pt; color: #333; border-top: 1px solid #999; padding-top: 2mm; }
  .bandeau, .barre-bas, .bulles, .descendre { display: none !important; }
  .revele { opacity: 1 !important; transform: none !important; }
}