/* Carnet sanitaire piscine : feuille de style, direction visuelle v2 (30 octobre 2026).
   Identité « Carnet de bord » (docs/captures/piscine/directions/B) avec trois mécanismes de
   « Ligne d'eau » (A) : carte d'état par bassin, confirmation dans le champ, barre d'onglets en bas
   sur téléphone. Polices auto-hébergées (OFL), aucune ressource externe. Ombres : seulement le halo
   de focus et le trait sous la page de carnet dessinée. */

/* ===== Polices : Fraunces (titres, date, heures, prix) et Inter (tout le reste) ===== */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("polices/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("polices/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("polices/fraunces-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("polices/fraunces-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("polices/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("polices/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Jetons ===== */
:root {
  --fond: #F2F6F9;
  --surface: #FFFFFF;
  --encre: #0E2A47;
  --encre-2: #4B6176;
  --accent: #0E2A47;
  --sur-accent: #FFFFFF;
  --champ: #7C8FA2;
  --trait: #DCE5EC;
  --trait-fort: #C5D3DE;
  --soleil: #FF8A2B;
  --soleil-pale: #FFF1E6;
  --sur-soleil: #0E2A47;
  --numero: #B54708;
  --marine: #0E2A47;
  --sur-marine: #FFFFFF;
  --gratuit: #FFB27A;
  --eau: #E6F0F6;

  --ok: #155A36;      --ok-teinte: #E2F3E8;   --ok-icone: #1E6B41;
  --att: #6B4100;     --att-teinte: #FFF0D4;  --att-icone: #8A5200;
  --nc: #7E2914;      --nc-teinte: #FBE4DD;   --nc-icone: #A3381F;

  --titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rayon-carte: 20px;
  --rayon-champ: 14px;
  --gouttiere: 1rem;
  --lecture: 40rem;
  --cible: 3rem;
  --halo: rgba(255, 138, 43, 0.28);
  color-scheme: light dark;
}
@media (min-width: 48em) { :root { --gouttiere: 2rem; } }
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0E161C; --surface: #16222A; --encre: #E8EEF2; --encre-2: #A5B3BE;
    --accent: #9CC8F5; --sur-accent: #06223D; --champ: #7F909D;
    --trait: #263540; --trait-fort: #31424E;
    --soleil: #FF8A2B; --soleil-pale: #3A2A1C; --sur-soleil: #0E2A47; --numero: #FFB27A;
    --marine: #12304F; --sur-marine: #FFFFFF; --gratuit: #FFB27A; --eau: #1B2D38;
    --ok: #8FE0B1; --ok-teinte: #12301F; --ok-icone: #8FE0B1;
    --att: #F5CD7A; --att-teinte: #33260A; --att-icone: #F5CD7A;
    --nc: #FFB1B1; --nc-teinte: #3A1214; --nc-icone: #FFB1B1;
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: var(--texte); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 380; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.375rem; }
h1 em, h2 em { font-style: italic; font-weight: 340; }
p, li, dd { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--trait-fort); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 6px; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.cadre { width: 100%; max-width: 81.5rem; margin-inline: auto; padding-inline: var(--gouttiere); }
.cadre--etroit { max-width: 48rem; }
.legende { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); }
.petit { font-size: 0.875rem; color: var(--encre-2); }
.tres-petit { font-size: 0.8125rem; color: var(--encre-2); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mt-2 { margin-block-start: 0.5rem; }
.mt-3 { margin-block-start: 0.75rem; }
.mt-4 { margin-block-start: 1rem; }
.mt-5 { margin-block-start: 1.5rem; }
.mt-6 { margin-block-start: 2rem; }
.mb-4 { margin-block-end: 1rem; }
.lecture { max-width: var(--lecture); }
.facultatif { font-weight: 400; color: var(--encre-2); }
.a-verifier { color: var(--att); font-weight: 600; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.75rem 1rem; background: var(--marine); color: var(--sur-marine); border-radius: 12px; }
.evitement:focus { top: 1rem; }
main { display: block; padding-block-end: 2.5rem; }
main:focus { outline: none; }

/* ===== Cartes ===== */
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 1.5rem; }
@media (min-width: 48em) { .carte { padding: 2rem 2.25rem; } }
.carte + .carte, .pile > * + * { margin-block-start: 1rem; }
.carte__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-block-end: 1.25rem; }
.carte__tete h2 { margin-block-start: 0.5rem; }
.carte__titre { font-size: 1.75rem; }
.carte--fond { background: var(--fond); }

/* ===== Boutons : un seul orange par écran ===== */
.bouton, .bouton--second, .bouton--marine, .bouton--clair, .bouton--danger, .bouton--discret {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.5rem; padding: 0 1.75rem; border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--soleil); color: var(--sur-soleil);
}
.bouton:hover { background: #F57A17; }
.bouton--second { background: var(--surface); color: var(--encre); border-color: var(--trait-fort); font-size: 1rem; min-height: 3.25rem; }
.bouton--second:hover { border-color: var(--encre); }
.bouton--marine { background: var(--marine); color: var(--sur-marine); font-size: 1rem; min-height: 3.25rem; }
.bouton--marine:hover { background: #1A3B5E; }
.bouton--clair { background: transparent; color: var(--sur-marine); border-color: rgba(255, 255, 255, 0.55); font-size: 1rem; min-height: 3.25rem; white-space: nowrap; }
.bouton--clair:hover { border-color: #FFFFFF; }
.bouton--danger { background: var(--nc-icone); color: #FFFFFF; font-size: 1rem; }
.bouton--discret { background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--nc); border-color: color-mix(in srgb, currentColor 35%, transparent); font-size: 0.9375rem; min-height: 3.25rem; }
.bouton--large { width: 100%; min-height: 3.75rem; }
.bouton .ico, .bouton--marine .ico { width: 1.1em; height: 1.1em; }
.lien-bouton { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0; border: 0; background: none; color: var(--accent); font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 0.25em; cursor: pointer; }
.lien-bouton:hover { text-decoration-color: currentColor; }
.lien-fleche { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--trait-fort); text-underline-offset: 0.3em; }
.lien-fleche:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
@media (max-width: 39.99em) { .actions > .bouton, .actions > .bouton--second, .actions > .bouton--danger, .actions > form, .actions > form > button { width: 100%; } }

/* ===== Pastilles d'état : toujours un mot et une forme ===== */
.etat { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0.2rem 0.85rem 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.etat .ico { width: 1rem; height: 1rem; }
.etat--ok { background: var(--ok-teinte); color: var(--ok); }
.etat--att { background: var(--att-teinte); color: var(--att); }
.etat--nc { background: var(--nc-teinte); color: var(--nc); }
.etat--neutre { background: var(--fond); color: var(--encre-2); border: 1px solid var(--trait); }

/* ===== En-tête ===== */
.entete__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; min-height: 4.5rem; padding-block: 0.75rem; }
@media (min-width: 48em) { .entete__ligne { min-height: 5.5rem; } }
.marque { font-family: var(--titre); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--encre); text-decoration: none; display: inline-flex; align-items: baseline; min-height: var(--cible); align-items: center; white-space: nowrap; flex: none; }
@media (min-width: 48em) { .marque { font-size: 1.7rem; } }
.marque__point { color: var(--soleil); font-weight: 700; }
.nav-site ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 500; }
.nav-site a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--encre); text-decoration: none; }
.nav-site a:hover { text-decoration: underline; text-decoration-color: var(--trait-fort); }
.nav-site a[aria-current] { text-decoration: underline; text-decoration-color: var(--soleil); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.nav-site .ouvrir { min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); }
.nav-site .ouvrir:hover, .nav-site .ouvrir[aria-current] { border-color: var(--encre); text-decoration: none; }
@media (max-width: 47.99em) {
  .nav-site .nav-site__lien { display: none; }
  .entete__ligne { flex-wrap: nowrap; }
  .marque { font-size: 1.25rem; }
  .nav-site .ouvrir { font-size: 0.875rem; padding: 0 0.9rem; white-space: nowrap; }
  .nav-site .ouvrir[aria-current] { display: none; }
}

.onglets { display: none; }
@media (min-width: 48em) {
  .onglets { display: block; }
  .onglets ul { display: flex; gap: 0.25rem; padding: 0.3rem; margin: 0; list-style: none; background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; }
  .onglets a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--encre-2); text-decoration: none; white-space: nowrap; }
  .onglets a:hover { color: var(--encre); background: var(--fond); }
  .onglets a[aria-current] { background: var(--marine); color: var(--sur-marine); }
}
.etab { text-align: right; font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.etab span { display: block; font-weight: 400; color: var(--encre-2); }
@media (max-width: 47.99em) { .etab { text-align: start; } }
@media (min-width: 48em) { .etab { font-size: 0.9375rem; } .etab span { display: inline; margin-inline-start: 0.35rem; } }
@media (min-width: 48em) and (max-width: 71.99em) { .entete--carnet .etab span { display: none; } }

/* ===== Barre d'onglets en bas (téléphone, carnet) ===== */
.barre-bas { display: none; }
@media (max-width: 47.99em) {
  body.avec-barre { padding-block-end: calc(4.75rem + env(safe-area-inset-bottom)); }
  .barre-bas {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 10;
    background: var(--surface); border-block-start: 1px solid var(--trait);
    padding-block-end: env(safe-area-inset-bottom);
  }
  .barre-bas > ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
  .barre-bas a, .barre-bas summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    min-height: 4rem; padding: 0.4rem 0.1rem; color: var(--encre-2); text-decoration: none;
    font-size: 0.6875rem; font-weight: 500; line-height: 1.1; text-align: center; cursor: pointer; list-style: none;
  }
  .barre-bas summary::-webkit-details-marker { display: none; }
  .barre-bas .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.7; }
  .barre-bas a[aria-current] { color: var(--encre); font-weight: 700; }
  .barre-bas a[aria-current] .ico { color: var(--numero); stroke-width: 2.1; }
  .barre-bas details { position: relative; }
  .barre-bas details[open] summary { color: var(--encre); font-weight: 700; }
  .barre-bas__plus { position: absolute; right: 0.5rem; bottom: calc(100% + 0.5rem); min-width: 12rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 16px; }
  .barre-bas__plus a { flex-direction: row; justify-content: flex-start; gap: 0.75rem; min-height: 3rem; padding: 0 0.9rem; font-size: 0.9375rem; color: var(--encre); border-radius: 12px; }
  .barre-bas__plus a .ico { width: 1.25rem; height: 1.25rem; }
  .barre-bas__plus a[aria-current] { background: var(--fond); }
}

/* ===== Pied de page ===== */
.pied { padding-block: 3rem 2.5rem; color: var(--encre-2); }
.pied__grille { display: grid; gap: 1.25rem 3rem; border-block-start: 1px solid var(--trait); padding-block-start: 2rem; }
@media (min-width: 56em) { .pied__grille { grid-template-columns: auto 1fr; align-items: end; } }
.pied .marque { font-size: 1.35rem; min-height: 2.75rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--encre-2); text-decoration: none; }
.pied__liens a:hover { color: var(--encre); text-decoration: underline; }
.pied__mention { font-size: 0.8125rem; line-height: 1.55; }
@media (min-width: 56em) { .pied__mention { text-align: right; justify-self: end; max-width: 38rem; } }
.pied__mention p + p { margin-block-start: 0.35rem; }
.pied__mention a { color: var(--encre-2); }

/* ===== Formulaires ===== */
.champ { margin-block-end: 1.25rem; }
.champ > label, .champ__titre, .champ > legend { display: block; font-size: 0.875rem; font-weight: 600; margin-block-end: 0.5rem; color: var(--encre); }
.aide { display: block; font-size: 0.8125rem; color: var(--encre-2); margin-block-start: 0.4rem; }
.champ > label + .aide, .champ > legend + .aide, .champ__titre + .aide { margin-block: -0.25rem 0.5rem; }
input[type="text"], input[type="email"], input[type="date"], input[type="time"], select, textarea {
  display: block; width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem;
  background: var(--surface); color: var(--encre); border: 1px solid var(--champ); border-radius: var(--rayon-champ);
  font-size: 1.0625rem;
}
input, select { min-width: 0; }
/* Safari iOS : les champs date et heure gardent une largeur intrinsèque et débordent de leur carte
   sans appearance:none ; le texte y est centré par défaut. */
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; max-width: 100%; text-align: start; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: start; min-height: 1.5em; }
textarea { min-height: 6rem; line-height: 1.5; resize: vertical; }
select { appearance: none; padding-inline-end: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, var(--encre-2) 50%), linear-gradient(135deg, var(--encre-2) 50%, transparent 50%); background-position: right 1.35rem center, right 1rem center; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre), 0 0 0 5px var(--halo); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--nc-icone); border-width: 2px; }
input.court { max-width: 10rem; }
input.moyen { max-width: 20rem; }
.formulaire { max-width: none; }

/* Champ de mesure : grand, unité dans le champ, verdict en direct (piscine.js). */
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
/* Deux dates côte à côte ne tiennent pas à 390 px : une colonne sur petit écran. */
@media (max-width: 29.99em) { .champs:has(input[type="date"]) { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 30em) { .champs { gap: 1.4rem 1.5rem; } }
.champs .champ { margin: 0; }
.champ--large { grid-column: 1 / -1; }
.champ--mesure { container: mesure / inline-size; }
.champ--mesure > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saisie {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  min-height: 4rem; padding-inline-end: 1rem; background: var(--surface);
  border: 1px solid var(--champ); border-radius: var(--rayon-champ);
}
.saisie:focus-within { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre), 0 0 0 5px var(--halo); }
.saisie input, .saisie input[type="text"] {
  flex: 1; min-width: 0; min-height: 3.9rem; padding: 0 0 0 1rem; border: 0; background: transparent; border-radius: var(--rayon-champ);
  font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums;
}
.saisie input:focus-visible { outline: none; box-shadow: none; }
.saisie input[aria-invalid="true"] { border: 0; }
.champ--erreur .saisie { border: 2px solid var(--nc-icone); }
.saisie--petite { min-height: 3.5rem; }
.saisie--petite input, .saisie--petite input[type="text"] { min-height: 3.4rem; font-size: 1.25rem; }
.unite { flex: none; font-size: 0.875rem; font-weight: 500; color: var(--encre-2); }
.verdict { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.verdict:empty { display: none; }
.verdict .ico { width: 1rem; height: 1rem; }
.verdict--ok { color: var(--ok); }
.verdict--att { color: var(--att); }
.verdict--nc { color: var(--nc); }
@container mesure (max-width: 17rem) {
  .saisie .verdict { position: absolute; left: 0; top: calc(100% + 0.4rem); }
  .champ--mesure:has(.verdict:not(:empty)) .aide { visibility: hidden; }
}

/* Segments (bassin) et bascule (transparence) : radios stylées */
.segment { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.3rem; padding: 0.3rem; background: var(--fond); border-radius: 16px; }
.segment label, .bascule label { position: relative; cursor: pointer; }
.segment input, .bascule input, .choix-carte input, .puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.25rem 0.75rem; border: 1px solid transparent; border-radius: 12px; font-weight: 600; font-size: 1rem; color: var(--encre-2); text-align: center; line-height: 1.2; }
.segment input:checked + span { background: var(--surface); color: var(--encre); border-color: var(--encre); }
.segment input:focus-visible + span, .bascule input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 29.99em) { .bascule span { font-size: 0.875rem; padding-inline: 0.25rem; } }
.bascule span { display: flex; align-items: center; justify-content: center; min-height: 4rem; padding: 0.25rem 0.5rem; border: 1px solid var(--champ); border-radius: var(--rayon-champ); font-weight: 600; font-size: 0.9375rem; color: var(--encre-2); text-align: center; line-height: 1.2; background: var(--surface); }
.bascule input:checked + span { border: 2px solid var(--encre); color: var(--encre); background: var(--soleil-pale); }
.bascule--trois { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

/* Cases et radios en liste (choix multiples) */
.choix { display: flex; align-items: flex-start; gap: 0.75rem; min-height: var(--cible); padding: 0.7rem 1rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-champ); background: var(--surface); cursor: pointer; line-height: 1.35; }
.choix + .choix { margin-block-start: 0.5rem; }
.choix input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.05rem 0 0; accent-color: var(--marine); }
.choix:has(input:checked) { border-color: var(--encre); background: var(--soleil-pale); }
.puces { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.puce { position: relative; display: inline-flex; }
.puce span { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.35rem 1rem; border: 1px solid var(--champ); border-radius: 999px; background: var(--surface); font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.puce input:checked + span { border: 2px solid var(--encre); background: var(--soleil-pale); font-weight: 600; }
.puce input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Replis */
.repli { margin-block: 1rem; border-radius: var(--rayon-champ); background: var(--fond); }
.repli > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.75rem 1.1rem; cursor: pointer; font-weight: 600; font-size: 0.9375rem; list-style: none; }
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after { content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--trait-fort); background: var(--surface) linear-gradient(var(--encre), var(--encre)) center / 0.8rem 1.5px no-repeat; }
.repli:not([open]) > summary::after { background-image: linear-gradient(var(--encre), var(--encre)), linear-gradient(var(--encre), var(--encre)); background-size: 0.8rem 1.5px, 1.5px 0.8rem; background-position: center, center; background-repeat: no-repeat; }
.repli > summary .petit { display: block; font-weight: 400; font-size: 0.8125rem; margin-block-start: 0.1rem; }
.repli__corps { padding: 0.25rem 1.1rem 1.25rem; }
.repli--blanc { background: var(--surface); border: 1px solid var(--trait); }
.source { margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--encre-2); }
.source > summary { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin-block: -0.375rem; cursor: pointer; font-weight: 500; color: var(--encre-2); text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 0.25em; list-style: none; }
.source > summary::-webkit-details-marker { display: none; }
.source > summary::after { content: "+"; font-weight: 600; text-decoration: none; }
.source[open] > summary::after { content: "\2212"; }
.source__corps { padding: 0.5rem 0 0.25rem; line-height: 1.5; }
.source__corps p + p { margin-block-start: 0.35rem; }

/* Erreurs et confirmations */
.resume-erreurs { margin-block-end: 1.5rem; padding: 1.25rem 1.5rem; border: 2px solid var(--nc-icone); border-radius: var(--rayon-carte); background: var(--surface); }
.resume-erreurs h2 { font-size: 1.5rem; margin-block-end: 0.5rem; color: var(--nc); }
.resume-erreurs ul { margin: 0; padding-inline-start: 1.25rem; }
.resume-erreurs a { color: var(--nc); font-weight: 600; text-decoration-color: currentColor; }
.erreur-champ { display: flex; gap: 0.4rem; align-items: flex-start; margin-block-start: 0.4rem; color: var(--nc); font-size: 0.875rem; font-weight: 600; }
.erreur-champ .ico { margin-block-start: 0.1rem; }
.confirmation { display: inline-flex; align-items: center; gap: 0.55rem; margin-block-end: 1rem; padding: 0.6rem 1.1rem 0.6rem 0.85rem; border-radius: 16px; background: var(--ok-teinte); color: var(--ok); font-weight: 600; font-size: 0.9375rem; }
.piege { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

/* ===== Titre de page (pages secondaires) : une seule chose grande ===== */
.tete-page { padding-block: 1.5rem 1.75rem; }
@media (min-width: 48em) { .tete-page { padding-block: 2.5rem 2.25rem; } }
.tete-page h1 { margin-block-start: 0.5rem; }
.tete-page__intro { margin-block-start: 1rem; font-size: 1.125rem; max-width: 40rem; }
.tete-page .statut { margin-block-start: 0.75rem; }
.statut { font-size: 0.875rem; color: var(--encre-2); }
.statut strong { color: var(--encre); font-weight: 600; }

/* ===== Accueil ===== */
.heros { display: grid; gap: 2rem; align-items: center; padding-block: 1rem 2rem; }
@media (min-width: 60em) { .heros { grid-template-columns: 1fr minmax(20rem, 29rem); gap: 3.5rem; padding-block: 1.75rem 2.25rem; } }
.heros h1 { font-size: clamp(3rem, 8.5vw, 5.75rem); font-weight: 380; line-height: 0.98; letter-spacing: -0.03em; }
.souligne { position: relative; display: inline-block; white-space: nowrap; }
.souligne svg { position: absolute; left: 0.2rem; bottom: -0.55rem; width: calc(100% - 0.4rem); height: 1rem; }
.promesse { margin-block-start: 1.75rem; font-size: 1.125rem; line-height: 1.5; max-width: 35rem; }
@media (min-width: 48em) { .promesse { font-size: 1.25rem; } }
.promesse strong { font-weight: 600; }
.illu { border-radius: var(--rayon-carte); overflow: hidden; border: 1px solid var(--trait); background: var(--eau); aspect-ratio: 47 / 30; }
.illu svg { display: block; width: 100%; height: 100%; }
@media (max-width: 47.99em) { .illu { aspect-ratio: 47 / 22; } }

.outil { padding: 1.5rem 1.25rem; }
@media (min-width: 48em) { .outil { padding: 2.25rem 2.5rem 2rem; } }
.outil__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.etapes { display: flex; gap: 0.4rem; }
.etapes i { display: block; width: 2.25rem; height: 4px; border-radius: 4px; background: var(--trait); }
.etapes i.fait { background: var(--soleil); }
.outil__question { margin-block: 0.9rem 1.5rem; font-size: clamp(1.75rem, 3.6vw, 2.375rem); line-height: 1.15; }
.choix-cartes { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .choix-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .choix-cartes--3, .choix-cartes--5 { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.choix-carte { position: relative; display: block; min-height: 4.75rem; padding: 1.25rem 3.5rem 1.25rem 1.35rem; border: 1px solid var(--trait-fort); border-radius: 16px; background: var(--surface); cursor: pointer; }
.choix-carte:hover { border-color: var(--champ); }
.choix-carte__t { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.choix-carte__d { display: block; margin-block-start: 0.25rem; font-size: 0.875rem; color: var(--encre-2); line-height: 1.4; }
.choix-carte__rond { position: absolute; top: 1.3rem; right: 1.2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--champ); }
.choix-carte:has(input:checked) { border: 2px solid var(--encre); background: var(--soleil-pale); padding: calc(1.25rem - 1px) calc(3.5rem - 1px) calc(1.25rem - 1px) calc(1.35rem - 1px); }
.choix-carte:has(input:checked) .choix-carte__rond { border: 0; background: var(--marine); top: calc(1.3rem - 1px); right: calc(1.2rem - 1px); }
.choix-carte:has(input:checked) .choix-carte__rond::after { content: ""; position: absolute; left: 0.47rem; top: 0.25rem; width: 0.33rem; height: 0.65rem; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.choix-carte:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 3px; }
.outil__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-block-start: 1.5rem; }
.outil__pied-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
@media (max-width: 39.99em) { .outil__pied-droite { width: 100%; flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; text-align: center; } }
/* Téléphone : le bouton principal d'abord, le lien « Recommencer » dessous. */
@media (max-width: 47.99em) {
  /* Safari : une colonne avec flex-wrap: wrap prend une hauteur fantôme ; en colonne, on ne replie jamais. */
  .outil__pied { flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; }
  .outil__pied .bouton { justify-content: center; }
}
.definition { flex: 1 1 18rem; font-size: 0.9375rem; }
/* Sous 48 em le pied est une colonne : la base flexible de 18 rem deviendrait une hauteur (un vide de 290 px sous le
   lien, vu dans Safari). Cette règle doit rester APRÈS la précédente : même spécificité, la dernière l'emporte. */
@media (max-width: 47.99em) { .definition { flex: 0 0 auto; } }
.definition > summary { display: inline-flex; min-height: var(--cible); align-items: center; cursor: pointer; font-weight: 500; list-style: none; }
.definition > summary::-webkit-details-marker { display: none; }
.definition > summary span { border-block-end: 1px solid var(--trait-fort); padding-block-end: 2px; }
.definition[open] { flex-basis: 100%; order: 3; }
/* Safari réserve la hauteur du contenu d'un details fermé quand il est un élément flexible : on le masque explicitement. */
.definition:not([open]) > .definition__corps { display: none; }
.definition__corps { margin-block-start: 0.5rem; padding: 1rem 1.25rem; border-radius: var(--rayon-champ); background: var(--fond); font-size: 0.875rem; color: var(--encre-2); }
.definition__corps ul { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; }
.definition__corps li + li { margin-block-start: 0.35rem; }
.definition__corps strong { color: var(--encre); }
.types { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: 1.25rem; font-size: 0.9375rem; color: var(--encre-2); }
.types a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); color: var(--encre); font-weight: 600; text-decoration: none; }
.types a:hover { border-color: var(--encre); }

/* Résultat du questionnaire */
.resultat { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; align-items: start; margin-block-start: 1rem; }
@media (min-width: 48em) { .resultat { gap: 1.25rem 2rem; align-items: center; } }
/* Téléphone : la lettre au-dessus du texte, qui garde toute la largeur. */
@media (max-width: 47.99em) { .resultat { grid-template-columns: minmax(0, 1fr); } .resultat__lettre { width: 4rem; height: 4rem; font-size: 2.75rem; } }
.resultat__lettre { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: var(--soleil-pale); font-family: var(--titre); font-size: 3.25rem; font-weight: 400; line-height: 1; color: var(--encre); }
.resultat__lettre--hors { font-size: 1.6rem; font-style: italic; }
@media (min-width: 48em) { .resultat__lettre--hors { font-size: 3rem; } }
@media (min-width: 48em) { .resultat__lettre { width: 10rem; height: 10rem; font-size: 7.25rem; } }
.resultat h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
.resultat__resume { margin-block-start: 0.6rem; font-size: 1.0625rem; }
.reponses-puces { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.reponses-puces li { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--fond); font-size: 0.8125rem; font-weight: 500; }

/* Programme d'analyses : une ligne par paramètre */
.programme { margin-block-start: 1.5rem; }
.prog-groupe + .prog-groupe { margin-block-start: 1.75rem; }
/* Accueil : les analyses de laboratoire et « si la situation l'exige » sont repliées pour que la page reste courte. */
.prog-repli { margin-block-start: 1.25rem; }
.prog-repli > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--trait-fort); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--encre); list-style: none; }
.prog-repli > summary::-webkit-details-marker { display: none; }
.prog-repli > summary::after { content: "+"; font-weight: 600; }
.prog-repli[open] > summary::after { content: "\2212"; }
.prog-repli[open] > summary { margin-block-end: 1rem; }
@media (max-width: 29.99em) { .telephone-cache { display: none; } }
.prog-groupe__titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-block-end: 0.5rem; }
.prog-groupe__titre h3 { font-size: 1.5rem; }
.prog-liste { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); }
.prog-ligne { padding: 1rem 1.25rem; }
.prog-ligne + .prog-ligne { border-block-start: 1px solid var(--trait); }
.prog-ligne__grille { display: grid; gap: 0.35rem 1.25rem; grid-template-columns: 1fr 1fr; }
.prog-ligne__nom { grid-column: 1 / -1; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.prog-ligne__nom .etat { margin-inline-start: 0.4rem; min-height: 1.6rem; font-size: 0.75rem; vertical-align: 0.1em; }
.prog-ligne dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-2); }
.prog-ligne dd { font-size: 0.9375rem; line-height: 1.4; }
.prog-ligne__case { min-width: 0; }
@media (max-width: 55.99em) { .prog-ligne__qui { display: none; } .prog-ligne { padding: 0.85rem 1rem; } .prog-ligne .source { margin-block-start: 0.25rem; } }
@media (min-width: 56em) {
  .prog-ligne__grille { grid-template-columns: minmax(12rem, 1.4fr) 1.3fr 1.1fr 0.8fr; align-items: baseline; }
  .prog-ligne__nom { grid-column: auto; }
  .prog-ligne dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prog-entete { display: grid; grid-template-columns: minmax(12rem, 1.4fr) 1.3fr 1.1fr 0.8fr; gap: 1.25rem; padding: 0 1.25rem 0.5rem; }
}
.prog-entete { display: none; }
@media (min-width: 56em) { .prog-entete { display: grid; } }
.notes { margin-block-start: 1.25rem; font-size: 0.8125rem; color: var(--encre-2); max-width: 48rem; }
.notes p + p { margin-block-start: 0.35rem; }
.appel { text-decoration: none; font-weight: 700; margin-inline-start: 0.1rem; }

/* Section carnet de l'accueil */
.section { padding-block: 4rem; }
@media (min-width: 48em) { .section { padding-block: 6rem; } }
.vitrine { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64em) { .vitrine { grid-template-columns: minmax(20rem, 27.5rem) 1fr; gap: 5rem; } }
.vitrine h2, .titre-edito { font-size: clamp(2.4rem, 5.5vw, 3.5rem); font-weight: 380; line-height: 1.02; letter-spacing: -0.03em; margin-block-start: 1rem; }
.points { display: grid; gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.point { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; }
.point__n { font-family: var(--titre); font-size: 1.375rem; font-style: italic; color: var(--numero); }
.point__t { display: block; font-size: 1.125rem; font-weight: 600; }
.point__d { display: block; font-size: 0.9375rem; color: var(--encre-2); }

.scene { position: relative; min-height: 32.5rem; }
.feuille { position: absolute; background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; }
.feuille--dessous { inset: 2.1rem 0.6rem 0.4rem 3.4rem; transform: rotate(3deg); background: var(--fond); }
.feuille--dessus { inset: 0.6rem 2.5rem 1.9rem 1.25rem; transform: rotate(-1.6deg); padding: 2.5rem 2.75rem 2.25rem 4.75rem; box-shadow: 0 1px 2px rgba(14, 42, 71, 0.05); }
.anneaux { position: absolute; left: 1.6rem; top: 2.9rem; bottom: 2.9rem; display: flex; flex-direction: column; justify-content: space-between; }
.anneaux i { display: block; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--fond); border: 1px solid var(--trait-fort); }
.f-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.f-date { font-family: var(--titre); font-size: 2.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.f-date em { font-style: italic; font-weight: 340; }
.f-lieu { font-size: 0.8125rem; color: var(--encre-2); text-align: right; }
.f-exemple { display: inline-block; margin-block-start: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--fond); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.f-etats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 1.6rem; }
.f-releve { display: grid; grid-template-columns: 7.25rem 1fr; padding-block: 1rem; border-block-start: 1px solid var(--trait); align-items: baseline; }
.f-heure { font-family: var(--titre); font-size: 1.875rem; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.f-bassin { font-size: 0.8125rem; font-weight: 600; margin-block-end: 0.25rem; }
.f-valeurs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; font-size: 0.875rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.f-valeurs strong { color: var(--encre); font-weight: 600; }
.f-valeurs .hors { padding: 0.1rem 0.5rem; border-radius: 6px; background: var(--nc-teinte); color: var(--nc); font-weight: 600; }
.f-valeurs .hors strong { color: var(--nc); }
@media (max-width: 47.99em) {
  .scene { min-height: 0; }
  .feuille--dessous { display: none; }
  .feuille--dessus { position: relative; inset: auto; transform: rotate(-1deg); padding: 1.5rem 1.25rem 1.25rem 3rem; }
  .anneaux { left: 1rem; top: 1.75rem; bottom: 1.75rem; }
  .anneaux i { width: 0.7rem; height: 0.7rem; }
  .f-tete { flex-direction: column; gap: 0.25rem; }
  .f-lieu { text-align: left; }
  .f-date { font-size: 1.9rem; }
  .f-releve { grid-template-columns: 1fr; gap: 0.25rem; }
  .f-heure { font-size: 1.5rem; }
}

.prix-bloc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding: 2rem 1.5rem; border-radius: var(--rayon-carte); background: var(--marine); color: var(--sur-marine); }
@media (min-width: 48em) { .prix-bloc { padding: 2.5rem 3rem; } }
.prix-bloc p { font-family: var(--titre); font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 360; line-height: 1.25; letter-spacing: -0.02em; max-width: 46rem; }
.prix-bloc b { font-weight: 500; color: var(--gratuit); }
.prix-bloc .tres-petit { font-family: var(--texte); font-size: 0.875rem; letter-spacing: 0; color: rgba(255, 255, 255, 0.82); margin-block-start: 0.5rem; }

.faq { margin: 1.5rem 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--trait); max-width: 52rem; }
.faq li { border-block-end: 1px solid var(--trait); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; padding-block: 0.9rem; cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--trait-fort); font-weight: 500; font-size: 1.1rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq__reponse { padding-block-end: 1.25rem; max-width: var(--lecture); color: var(--encre); }
.faq__reponse .petit { display: block; margin-block-start: 0.5rem; font-size: 0.8125rem; }
.ambiguites dt { font-weight: 600; margin-block-start: 0.9rem; }
.ambiguites dd { font-size: 0.9375rem; color: var(--encre); margin-block-start: 0.2rem; }
.ambiguites dd .petit { display: block; margin-block-start: 0.4rem; color: var(--encre-2); line-height: 1.45; }
.ambiguites dd strong { color: var(--att); }

/* ===== Carnet : page du jour ===== */
.lien-carte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-block-end: 1rem; padding: 1.5rem; border-radius: var(--rayon-carte); background: var(--marine); color: var(--sur-marine); }
@media (min-width: 48em) { .lien-carte { grid-template-columns: 1fr auto; padding: 2rem 2.25rem; } }
.lien-carte h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--sur-marine); }
.lien-carte p { color: rgba(255, 255, 255, 0.85); font-size: 0.9375rem; margin-block-start: 0.5rem; max-width: 40rem; }
.lien-carte label { display: block; margin-block: 1.25rem 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--sur-marine); }
.lien-carte input[type="text"] { background: #FFFFFF; color: #0E2A47; border-color: #FFFFFF; font-size: 0.9375rem; font-variant-numeric: normal; }
.lien-carte .bouton-copier { margin-block-start: 0.75rem; background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); }
.lien-carte [role="status"] { color: #FFFFFF; }
.qr-cadre { margin: 0; text-align: center; }
.qr-cadre .qr { display: block; width: 10rem; height: 10rem; margin-inline: auto; padding: 0.6rem; background: #FFFFFF; border-radius: 14px; }
.qr-cadre figcaption { margin-block-start: 0.5rem; font-size: 0.8125rem; }
.lien-carte .qr-cadre figcaption { color: rgba(255, 255, 255, 0.85); }
.partage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (min-width: 48em) { .partage { grid-template-columns: 1fr auto; } }

.jour__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.jour__date { margin-block-start: 0.6rem; font-size: clamp(2.6rem, 7vw, 4.75rem); font-weight: 380; line-height: 1; letter-spacing: -0.03em; }
.jour__date em { font-style: italic; font-weight: 340; }
.jour__bilan { text-align: left; }
@media (min-width: 48em) { .jour__bilan { text-align: right; } }
.jour__bilan p + p { margin-block-start: 0.25rem; }
.bilan { font-size: 0.9375rem; font-weight: 600; }

.etats { display: grid; gap: 0.75rem; margin-block-start: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 36em) { .etats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .etats--3, .etats--4 { grid-template-columns: repeat(3, 1fr); } }
.etat-carte { min-width: 0; padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); }
.etat-carte__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.75rem; font-size: 0.9375rem; font-weight: 600; }
.etat-carte__nom { font-family: var(--texte); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.etat-carte__tete small { font-size: 0.8125rem; font-weight: 500; color: var(--encre-2); }
.mot { display: flex; align-items: center; gap: 0.6rem; margin-block: 0.5rem 0.9rem; font-family: var(--titre); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 450; line-height: 1.1; letter-spacing: -0.02em; }
.mot .ico { width: 1.65rem; height: 1.65rem; stroke-width: 2.2; }
.mot--nc { color: var(--nc-icone); }
.mot--att { color: var(--att-icone); }
.mot--ok { color: var(--ok-icone); }
.mot--vide, .mot--neutre { color: var(--encre-2); }
.mesures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.mesures div { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.mesures dt { font-size: 0.75rem; font-weight: 500; color: var(--encre-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesures dd { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.mesures dd small { font-size: 0.8125rem; font-weight: 500; color: var(--encre-2); margin-inline-start: 0.1rem; }
.mesures .hors dt, .mesures .hors dd, .mesures .hors dd small { color: var(--nc-icone); }
.mesures .surv dt, .mesures .surv dd, .mesures .surv dd small { color: var(--att-icone); }
.mesures .absent dd { color: var(--encre-2); }
.etat-carte__detail { font-size: 0.9375rem; line-height: 1.45; }
.etat-carte__detail a { font-weight: 600; }

/* Alerte compacte */
.alerte { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1rem; align-items: start; margin-block: 1rem; padding: 1.25rem; border-radius: var(--rayon-carte); background: var(--nc-teinte); color: var(--nc); }
@media (min-width: 48em) { .alerte { grid-template-columns: 3.25rem 1fr auto; gap: 1rem 1.25rem; align-items: center; padding: 1.6rem 2rem; } }
.alerte--att { background: var(--att-teinte); color: var(--att); }
.alerte__pastille { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface); color: var(--nc-icone); }
.alerte--att .alerte__pastille { color: var(--att-icone); }
.alerte__pastille .ico { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48em) { .alerte__pastille { width: 3.25rem; height: 3.25rem; } .alerte__pastille .ico { width: 1.5rem; height: 1.5rem; } }
.alerte__titre { font-family: var(--titre); font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 420; letter-spacing: -0.02em; line-height: 1.1; }
.alerte__sous { margin-block-start: 0.3rem; font-size: 0.9375rem; }
.alerte__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
@media (min-width: 48em) { .alerte__actions { grid-column: auto; justify-content: flex-end; } .alerte:has(.consigne[open]) .alerte__actions { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 47.99em) {
  .alerte__actions { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
  .alerte__actions .bouton--discret { white-space: nowrap; gap: 0.35rem; }
  .alerte__actions .bouton--discret, .alerte__actions .bouton--marine { min-height: 3.1rem; padding: 0 0.75rem; font-size: 0.875rem; width: 100%; }
  /* Consigne ouverte : le bouton « Voir la consigne » garde sa place en haut, la consigne s'étale en dessous
     et « Consigner l'incident » passe sous la consigne au lieu de sauter avant elle. */
  .alerte__actions:has(.consigne[open]) { grid-template-columns: minmax(0, 1fr); }
  .alerte__actions .consigne[open] { order: 1; }
  .alerte__actions:has(.consigne[open]) .bouton--marine { order: 2; }
  .consigne[open] { grid-column: 1 / -1; }
}
@media (min-width: 48em) { .alerte__actions > * { flex: 0 0 auto; } }
.consigne > summary { list-style: none; }
.consigne > summary::-webkit-details-marker { display: none; }
.consigne > summary .ico { width: 0.9rem; height: 0.9rem; transition: transform 0.15s; }
.consigne[open] { flex-basis: 100%; order: 3; }
.consigne[open] > summary .ico { transform: rotate(180deg); }
.consigne__corps { margin-block-start: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--rayon-champ); background: var(--surface); color: var(--encre); font-size: 0.9375rem; line-height: 1.5; }
.consigne__corps p + p { margin-block-start: 0.5rem; }
.consigne__corps .petit { font-size: 0.8125rem; }
.alerte--att .bouton--discret { color: var(--att); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.alerte-plus { margin-block: -0.25rem 1rem; font-size: 0.875rem; color: var(--encre-2); }

/* Colonnes du carnet */
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-block-start: 1rem; align-items: start; }
@media (min-width: 64em) { .colonnes { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); gap: 1.5rem; } }
.colonnes > .carte + .carte, .colonnes > * { margin-block-start: 0; }
.ligne-seuil { display: block; }
@media (min-width: 64em) { .colonnes--egales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Saisie */
.saisie-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; }
.saisie-tete h2 { margin-block-start: 0.35rem; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.quand { display: flex; gap: 0.4rem; }
.quand input[type="date"], .quand input[type="time"] { min-height: 2.75rem; padding: 0.4rem 0.75rem; border-radius: 12px; border-color: var(--champ); font-size: 0.9375rem; font-weight: 600; width: auto; }
.quand input[type="date"] { max-width: 10.5rem; }
.quand input[type="time"] { max-width: 7.5rem; }
.bloc-bassin { margin-block-end: 1.5rem; }
.enregistrer { margin-block-start: 1.5rem; text-align: center; }
.enregistrer .lien-bouton { margin-block-start: 0.25rem; }
.liste-seuils { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--encre-2); }
.liste-seuils li + li { margin-block-start: 0.5rem; }
.liste-seuils strong { color: var(--encre); font-weight: 600; }

/* Relevés du jour : liste éditoriale */
.releves-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.releves-tete h2 { font-size: 1.75rem; }
.releves { margin: 0; padding: 0; list-style: none; }
.releve { padding-block: 1.25rem; border-block-start: 1px solid var(--trait); }
.releves > .releve:first-child { border-block-start: 0; }
.releve__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; }
.releve__heure { font-family: var(--titre); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 380; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.releve__bassin { flex: 1 0 auto; font-size: 0.875rem; font-weight: 600; }
.releve__tete .etat { align-self: center; }
.valeurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.4rem; margin: 0.85rem 0 0; }
.valeurs div { padding: 0.45rem 0.6rem; border-radius: 10px; min-width: 0; }
.valeurs dt { font-size: 0.75rem; color: var(--encre-2); line-height: 1.3; }
.valeurs dd { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; line-height: 1.3; overflow-wrap: anywhere; }
.valeurs dd small { font-size: 0.8125rem; font-weight: 500; color: var(--encre-2); margin-inline-start: 0.15rem; }
.valeurs dd.texte { font-size: 0.9375rem; }
.valeurs .val--nc { background: var(--nc-teinte); }
.valeurs .val--nc dt, .valeurs .val--nc dd, .valeurs .val--nc dd small, .valeurs .val--nc .mot-hors { color: var(--nc); }
.valeurs .val--att { background: var(--att-teinte); }
.valeurs .val--att dt, .valeurs .val--att dd, .valeurs .val--att dd small, .valeurs .val--att .mot-hors { color: var(--att); }
.valeurs .mot-hors { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.releve__resume { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin-block-start: 0.75rem; }
.ligne-courte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; margin: 0; font-size: 0.875rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.ligne-courte div { display: flex; gap: 0.3rem; align-items: baseline; }
.ligne-courte dd { color: var(--encre); font-weight: 600; font-size: 0.9375rem; }
.ligne-courte .etat { min-height: 1.75rem; }
.releve__pied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-block-start: 0.5rem; }
.releve__obs { font-size: 0.875rem; color: var(--encre-2); font-style: italic; }
.lien-discret { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.8125rem; color: var(--encre-2); }
.vide { padding: 1.5rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-carte); text-align: center; }
.vide h2, .vide h3 { font-size: 1.5rem; }
.vide p { margin-block-start: 0.4rem; color: var(--encre-2); font-size: 0.9375rem; }
.vide .bouton--second { margin-block-start: 1rem; }

/* Petites cartes : laboratoire, analyses dues */
.petite-carte { display: flex; gap: 1rem; align-items: center; }
.ico-carre { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--att-teinte); color: var(--att-icone); }
.ico-carre--ok { background: var(--ok-teinte); color: var(--ok-icone); }
.ico-carre .ico { width: 1.25rem; height: 1.25rem; }
.petite-carte__t { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.petite-carte__d { font-size: 0.8125rem; color: var(--encre-2); }
.liste-dues { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.liste-dues > li { display: flex; gap: 0.85rem; align-items: flex-start; padding-block: 0.75rem; border-block-start: 1px solid var(--trait); }
.liste-dues > li:first-child { border-block-start: 0; }
.liste-dues .ico-carre { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.liste-dues .petite-carte__t { font-size: 0.9375rem; }
.carte h2.carte__petit-titre { font-size: 1.5rem; }

/* Historique : une carte par jour */
.filtres { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.filtres .champ { margin: 0; }
.filtres input, .filtres select { font-size: 0.9375rem; padding-inline-start: 0.85rem; }
@media (max-width: 35.99em) { .filtres .champ:nth-child(3), .filtres .champ:nth-child(4) { grid-column: 1 / -1; } }
@media (min-width: 56em) { .filtres { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; } }
.filtres .champ--bouton { grid-column: 1 / -1; }
@media (min-width: 56em) { .filtres .champ--bouton { grid-column: auto; } }
.filtres .bouton { width: 100%; }
.compte { margin-block: 1.5rem 0.75rem; font-size: 0.9375rem; font-weight: 600; }
.jour-carte__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-block-end: 0.25rem; }
.jour-carte__tete h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
.jour-carte__tete h2 em { font-style: italic; font-weight: 340; }

/* Listes de cartes (incidents, résultats, calendrier, sources) */
.lignes { margin: 0; padding: 0; list-style: none; }
.lignes > li { padding-block: 1rem; border-block-start: 1px solid var(--trait); }
.lignes > li:first-child { border-block-start: 0; padding-block-start: 0.25rem; }
.ligne__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem 1rem; }
.ligne__tete > :first-child { flex: 1; min-width: 0; }
.ligne__tete .etat { flex: none; }
.ligne__titre { font-weight: 600; font-size: 1rem; }
.ligne__date { font-family: var(--titre); font-size: 1.375rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.ligne__corps { margin-block-start: 0.35rem; font-size: 0.9375rem; }
.ligne__corps p + p { margin-block-start: 0.25rem; }
.ligne__meta { margin-block-start: 0.35rem; font-size: 0.8125rem; color: var(--encre-2); }
.ligne__meta strong { color: var(--encre); font-weight: 600; }
.sources-liste { display: grid; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.sources-liste li { padding: 1rem 1.25rem; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); }
.sources-liste a { display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; font-weight: 600; }
.formules { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .formules { grid-template-columns: 1fr 1fr; } }
.formule { padding: 1.5rem; border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--surface); }
.formule__prix { display: block; margin-block: 0.4rem 0.4rem; font-family: var(--titre); font-size: 2.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.formule p { font-size: 0.9375rem; color: var(--encre-2); }
.formule form { margin-block-start: 1rem; }
.formule form button { width: 100%; }

/* Réglages */
.reglages { display: grid; gap: 1rem; }
.reglages .repli { background: var(--fond); }

/* Prose : mentions légales, confidentialité */
.prose { max-width: var(--lecture); padding-block: 2rem 1rem; }
.prose h1 { margin-block-end: 1.5rem; }
.prose h2 { font-size: 1.6rem; margin-block: 2.25rem 0.6rem; }
.prose p { line-height: 1.65; }
.prose p + p { margin-block-start: 0.75rem; }
.lien-long { overflow-wrap: anywhere; }

/* Impression */
@media print {
  .entete nav, .onglets, .barre-bas, .pied__liens, .evitement, form, .bouton { display: none; }
  body { background: #FFFFFF; }
  .carte { border-color: #999999; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none; } }

/* ===== Comparatif : tableau lisible, une carte par ligne sur téléphone ===== */
.prose--large { max-width: 52rem; }
.liste-points { padding-inline-start: 1.25rem; line-height: 1.6; }
.liste-points li + li { margin-block-start: 0.5rem; }
.compar { overflow-x: auto; margin-block: 1rem 0.5rem; }
.compar__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.compar__table th, .compar__table td { padding: 0.75rem 0.75rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--trait); }
.compar__table thead th { font-family: var(--titre); font-size: 1.25rem; font-weight: 500; border-block-end: 2px solid var(--encre); }
.compar__table tbody th { font-weight: 600; width: 11rem; }
@media (max-width: 47.99em) {
  .compar__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compar__table tr { display: block; padding-block: 0.75rem; border-block-end: 1px solid var(--trait); }
  .compar__table th, .compar__table td { display: block; width: auto; border: 0; padding: 0.15rem 0; }
  .compar__table tbody th { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
  .compar__table td::before { display: block; font-size: 0.75rem; font-weight: 600; color: var(--encre-2); margin-block-start: 0.5rem; }
  .compar__table td:nth-of-type(1)::before { content: "Splashlog"; }
  .compar__table td:nth-of-type(2)::before { content: "Clairdeau"; }
}
.faq__item { border-block-end: 1px solid var(--trait); }
.faq__item summary { cursor: pointer; padding-block: 0.9rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--encre-2); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding-block: 0 1rem; line-height: 1.6; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }


/* Pages de contenu : modèle de carnet sanitaire et ce qui change en 2027 */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 48em) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo > .carte + .carte { margin-block-start: 0; }
.mentions { display: grid; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.mentions__ligne { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.25rem; border: 1px solid var(--trait); border-radius: 16px; background: var(--surface); }
.mentions__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--soleil-pale); color: var(--numero); font-weight: 700; font-variant-numeric: tabular-nums; }
.mentions__ligne p { line-height: 1.55; }
.modele { border-color: var(--trait-fort); }
.types-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40em) { .types-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.types-cartes > .carte + .carte { margin-block-start: 0; }
.type-carte { display: flex; flex-direction: column; }
.type-carte__titre { display: flex; align-items: baseline; gap: 0.6rem; }
.type-carte__mot { font-size: 1.375rem; }
.type-carte__lettre { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--soleil-pale); font-size: 2.25rem; line-height: 1; }
.type-carte__compte { font-weight: 600; }
.calendrier { display: grid; gap: 0; margin: 1rem 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--trait); }
.calendrier__ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem 1.5rem; padding-block: 1rem; border-block-end: 1px solid var(--trait); }
@media (min-width: 48em) { .calendrier__ligne { grid-template-columns: 11rem minmax(0, 1fr); } }
.calendrier__date { font-weight: 700; font-variant-numeric: tabular-nums; }
.calendrier__ligne p { line-height: 1.55; }
.prose h3 { margin-block-end: 0.25rem; }
.prose .carte h2, .prose .carte h3 { margin-block-start: 0; }
@media (min-width: 56em) { .pied__grille { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); } }
.prose .carte .legende + h2 { margin-block-start: 0.5rem; }

/* Guides, lot 2 : camping, copropriété, FMT, laboratoire, chlore combiné, pH */
@media (min-width: 56em) { .types-cartes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
p.carte__petit-titre { font-family: var(--titre); font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.ouvert { padding: 1rem 1.25rem; border: 1px solid var(--att-teinte); border-inline-start: 4px solid var(--att-icone); border-radius: 16px; background: var(--surface); }
.ouvert__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-weight: 600; }
.ouvert p { line-height: 1.6; }
.freq { display: grid; gap: 0; margin: 0.75rem 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--trait); }
.freq__ligne { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 0.7rem; border-block-end: 1px solid var(--trait); }
.freq__type { font-weight: 700; font-variant-numeric: tabular-nums; }
.freq__texte { line-height: 1.5; }
.ratio { text-align: start; }
.ratio__chiffre { margin-block: 0.5rem 0.15rem; font-family: var(--titre); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.fmt-resultat { padding: 1.25rem 1.25rem 1rem; border-radius: 16px; background: var(--eau); }
.fmt-resultat__nombre { font-family: var(--titre); font-size: clamp(2.75rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.fmt-resultat__nombre .num { font-family: var(--titre); }
.fmt-resultat__unite { font-size: 1.25rem; letter-spacing: 0; }
.fmt-resultat p + p { margin-block-start: 0.5rem; }
.fmt-exemple { font-family: var(--titre); font-size: 2rem; line-height: 1.1; }
.acteur { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.acteur__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--soleil-pale); color: var(--numero); font-weight: 700; }
.labo-liste { margin: 0; padding: 0; list-style: none; }
.labo-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; padding-block: 0.4rem; border-block-end: 1px solid var(--trait); font-size: 0.9375rem; }
.labo-liste li:last-child { border-block-end: 0; }
.labo-liste .petit { color: var(--encre-2); }
.chiffre-cle__valeur { margin-block: 0.4rem 0.4rem; font-family: var(--titre); font-size: clamp(3rem, 9vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.chiffre-cle__valeur .num { font-family: var(--titre); }
.chiffre-cle__unite { font-size: 1.5rem; letter-spacing: 0; }
.calcul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; font-family: var(--titre); font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.25; }
.liens-guides { display: grid; gap: 0.15rem 1.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .liens-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liens-guides a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.public-type { max-width: 46rem; }
.public-type .etat { margin-inline-end: 0.35rem; }
.pied__guides { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-block-start: 0.5rem; font-size: 0.875rem; }
.pied__guides-titre { font-weight: 600; color: var(--encre); }
.pied__guides a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--encre-2); text-decoration: none; }
.pied__guides a:hover { color: var(--encre); text-decoration: underline; }