/* ==========================================================================
   Rendeau, feuille de style unique
   Vocabulaire de nommage : le site emprunte ses classes au reseau lui meme
   (captage, conduite, branchement, regard, vanne, exutoire, bilan, releve).
   ========================================================================== */

:root {
  --fond: #FFFFFF;
  --fond-alt: #F2F5F1;
  --surface: #FAFBF9;
  --texte: #14202A;
  --texte-doux: #4E5C63;
  --mesure: #266124;
  --mesure-clair: #E4EEE2;
  --mesure-sombre: #1D4A1B;
  --nappe: #0F3D5C;
  --nappe-clair: #E3EBF1;
  --bordure: #D7DEDA;
  --sur-mesure: #FFFFFF;

  --utile: 1180px;
  --gouttiere: 28px;
  --entete-h: 68px;

  --titre: "Bitter", Georgia, "Times New Roman", serif;
  --courant: "Assistant", "Segoe UI", Helvetica, Arial, sans-serif;
  --main: "Kalam", "Segoe Script", cursive;

  --etoile-mesure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23266124' stroke-width='1.6' stroke-linecap='square'%3E%3Cline x1='12' y1='9' x2='12' y2='2'/%3E%3Cline x1='12' y1='15' x2='12' y2='22'/%3E%3Cline x1='9' y1='12' x2='2' y2='12'/%3E%3Cline x1='15' y1='12' x2='22' y2='12'/%3E%3Cline x1='14.12' y1='9.88' x2='17.3' y2='6.7'/%3E%3Cline x1='9.88' y1='9.88' x2='6.7' y2='6.7'/%3E%3Cline x1='14.12' y1='14.12' x2='17.3' y2='17.3'/%3E%3Cline x1='9.88' y1='14.12' x2='6.7' y2='17.3'/%3E%3C/g%3E%3C/svg%3E");
  --etoile-zinc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%234E5C63' stroke-width='1.6' stroke-linecap='square'%3E%3Cline x1='12' y1='9' x2='12' y2='2'/%3E%3Cline x1='12' y1='15' x2='12' y2='22'/%3E%3Cline x1='9' y1='12' x2='2' y2='12'/%3E%3Cline x1='15' y1='12' x2='22' y2='12'/%3E%3Cline x1='14.12' y1='9.88' x2='17.3' y2='6.7'/%3E%3Cline x1='9.88' y1='9.88' x2='6.7' y2='6.7'/%3E%3Cline x1='14.12' y1='14.12' x2='17.3' y2='17.3'/%3E%3Cline x1='9.88' y1='14.12' x2='6.7' y2='17.3'/%3E%3C/g%3E%3C/svg%3E");
  --etoile-nappe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%230F3D5C' stroke-width='1.6' stroke-linecap='square'%3E%3Cline x1='12' y1='9' x2='12' y2='2'/%3E%3Cline x1='12' y1='15' x2='12' y2='22'/%3E%3Cline x1='9' y1='12' x2='2' y2='12'/%3E%3Cline x1='15' y1='12' x2='22' y2='12'/%3E%3Cline x1='14.12' y1='9.88' x2='17.3' y2='6.7'/%3E%3Cline x1='9.88' y1='9.88' x2='6.7' y2='6.7'/%3E%3Cline x1='14.12' y1='14.12' x2='17.3' y2='17.3'/%3E%3Cline x1='9.88' y1='14.12' x2='6.7' y2='17.3'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Bases
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.01em;
  color: var(--texte);
  margin: 0 0 0.6em;
}

h1 { font-size: 3.4rem; font-weight: 700; line-height: 1.18; }
h2 { font-size: 2.1rem; font-weight: 600; line-height: 1.18; }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--nappe); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mesure); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }

strong { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin: 2.5rem 0;
}

::selection { background: var(--mesure-clair); color: var(--texte); }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nappe);
  color: #FFFFFF;
  padding: 12px 20px;
  z-index: 999;
  font-weight: 600;
}
.evitement:focus {
  left: 12px;
  top: 12px;
  color: #FFFFFF;
}

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Conduite (conteneur) et grille de 12 colonnes
   -------------------------------------------------------------------------- */

.conduite {
  width: 100%;
  max-width: var(--utile);
  margin-inline: auto;
  padding-inline: 22px;
}

.grille12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: 1 / -1; }
.col-3a10 { grid-column: 3 / 11; }
.col-2a8 { grid-column: 2 / 9; }
.col-9a12 { grid-column: 9 / 13; }

/* --------------------------------------------------------------------------
   Elements d identite : surtitre, etoile radiale, note en marge, double filet
   -------------------------------------------------------------------------- */

.surtitre {
  font-family: var(--main);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.01em;
}
.surtitre::before {
  content: "";
  width: 24px; height: 24px;
  flex: 0 0 24px;
  background: var(--etoile-mesure) center / contain no-repeat;
}

.note-marge {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.5;
  margin: 0.6rem 0 0;
  max-width: 46ch;
}

.tabulaire {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
}

.indic {
  font-family: var(--courant);
  font-weight: 600;
  color: var(--nappe);
  white-space: nowrap;
}

/* Cadre de carte en double filet, comme l encadrement d un tableau de rapport */
.double-filet {
  position: relative;
  border: 1px solid var(--bordure);
  background: var(--surface);
}
.double-filet::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  opacity: 0.3;
  pointer-events: none;
}

/* Pastille lumineuse qui pulse sur les points cles */
.pastille {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mesure);
  flex: 0 0 7px;
}
.pastille::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--mesure);
  opacity: 0.18;
  animation: halo 2.4s ease-in-out infinite;
}
@keyframes halo {
  0%   { transform: scale(0.45); opacity: 0.28; }
  60%  { transform: scale(1); opacity: 0.06; }
  100% { transform: scale(1.15); opacity: 0; }
}

.pulse-svg {
  transform-origin: center;
  transform-box: fill-box;
  animation: halo-svg 2.4s ease-in-out infinite;
}
@keyframes halo-svg {
  0%   { r: 4; opacity: 0.32; }
  60%  { r: 15; opacity: 0.07; }
  100% { r: 18; opacity: 0; }
}

/* Fond de courbes topographiques */
.topo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.topo svg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Boutons (vannes)
   -------------------------------------------------------------------------- */

.vanne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 30px;
  border-radius: 2px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s linear, color 0.18s linear;
}

.vanne--principale {
  background: var(--mesure);
  color: var(--sur-mesure);
  border-color: var(--mesure);
}
.vanne--principale:hover {
  background: var(--mesure-sombre);
  color: var(--sur-mesure);
}
.vanne--principale::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid transparent;
  border-radius: 1px;
}
.vanne--principale:hover::before { border-color: rgba(255, 255, 255, 0.42); }
.vanne--principale:focus-visible { outline: 3px solid var(--nappe); outline-offset: 2px; }

.vanne--secondaire {
  background: transparent;
  color: var(--nappe);
  border: 1.5px solid var(--nappe);
}
.vanne--secondaire:hover {
  background: var(--fond-alt);
  color: var(--nappe);
  box-shadow: inset 0 0 0 1.5px var(--nappe);
}
.vanne--secondaire:focus-visible { outline: 3px solid var(--mesure); outline-offset: 2px; }

.vanne--large { width: 100%; }

/* Halo respirant du bouton principal du hero, une pulsation toutes les six secondes */
.vanne--respire::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 4px;
  border: 2px solid var(--mesure);
  opacity: 0;
  animation: respire 6s ease-out infinite;
  pointer-events: none;
}
@keyframes respire {
  0%   { opacity: 0.5; transform: scale(0.97); }
  12%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   En tete fixe
   -------------------------------------------------------------------------- */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
  z-index: 120;
}
.entete--defile { box-shadow: 0 3px 0 -2px var(--bordure); }
.entete--defile::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--bordure);
  opacity: 0.45;
}

.entete__interieur {
  height: var(--entete-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.entete__jauge {
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--mesure);
  transition: width 0.1s linear;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--texte);
  flex: 0 0 auto;
}
.marque__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: 0.012em;
  color: var(--nappe);
}
.marque svg { display: block; }

.entete__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.entete__lien {
  font-family: var(--courant);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}
.entete__lien:hover { color: var(--texte); }
.entete__lien::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--etoile-mesure) center / contain no-repeat;
  opacity: 0;
}
.entete__lien[aria-current="true"] { color: var(--texte); }
.entete__lien[aria-current="true"]::before { opacity: 1; }

.entete__action { flex: 0 0 auto; }
.entete__action .vanne { height: 42px; padding: 0 20px; font-size: 0.9375rem; }

.bouton-filets {
  display: none;
  width: 46px; height: 42px;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.bouton-filets span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--texte);
  margin: 4px auto;
}

/* Panneau plein ecran sous 900 pixels */
.panneau {
  position: fixed;
  inset: 0;
  background: var(--fond);
  z-index: 200;
  display: none;
  padding: 22px;
  overflow-y: auto;
}
.panneau[data-ouvert="true"] { display: block; }
.panneau__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 14px;
  margin-bottom: 26px;
}
.panneau__fermer {
  width: 46px; height: 42px;
  border: 1px solid var(--bordure);
  background: transparent;
  border-radius: 2px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--texte);
}
.panneau__liens { display: flex; flex-direction: column; gap: 4px; }
.panneau__liens a {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--texte);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--bordure);
}
.panneau .vanne { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Rythme vertical des sections
   -------------------------------------------------------------------------- */

main { padding-top: var(--entete-h); }

.travee { padding: 92px 0; position: relative; }
.travee--serree { padding: 68px 0; }
.travee--alt { background: var(--fond-alt); }
.travee--filet { border-top: 1px solid var(--bordure); }

.travee__intro { max-width: 62ch; margin-bottom: 46px; }
.travee__intro p { color: var(--texte-doux); font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   Captage : le hero
   -------------------------------------------------------------------------- */

.captage {
  position: relative;
  padding: 74px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
}

.captage__contenu { position: relative; z-index: 1; align-items: center; }

.captage__promesse { grid-column: 1 / 7; }
.captage__schema { grid-column: 7 / 13; }

.captage h1 { margin-bottom: 20px; }
.captage h1 em {
  font-style: normal;
  color: var(--nappe);
}
.captage__sous {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  max-width: 52ch;
  margin-bottom: 26px;
}

.captage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}

.captage__gage {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-left: 3px solid var(--mesure);
  padding-left: 14px;
  max-width: 46ch;
}
.captage__gage b {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--nappe);
}
.captage__gage span { font-size: 0.9375rem; color: var(--texte-doux); line-height: 1.45; }

/* Schema de bilan des volumes au trait */
.bilan {
  background: var(--fond);
  border: 1px solid var(--bordure);
  padding: 22px 24px 18px;
  position: relative;
}
.bilan::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  opacity: 0.3;
  pointer-events: none;
}
.bilan__titre {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 14px;
}
.bilan svg { width: 100%; height: auto; display: block; }
.bilan__pied {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* Bandeau de reassurance en pied de hero, sur les douze colonnes */
.reassure {
  position: relative;
  z-index: 1;
  margin-top: 62px;
  border-top: 1px solid var(--bordure);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reassure__case {
  padding: 22px 24px 26px;
  border-right: 1px solid var(--bordure);
}
.reassure__case:last-child { border-right: 0; }
.reassure__case b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--nappe);
  line-height: 1.1;
}
.reassure__case span {
  display: block;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-top: 6px;
  line-height: 1.45;
}
.reassure__case--alerte b { color: var(--mesure); }

/* --------------------------------------------------------------------------
   Photographies
   -------------------------------------------------------------------------- */

.cliche { margin: 0; }
.cliche img {
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--mesure);
  filter: saturate(0.75);
  width: 100%;
}
.cliche figcaption {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-top: 10px;
  line-height: 1.5;
}
.cliche--debord { margin-right: -60px; }

/* --------------------------------------------------------------------------
   Perte : la section probleme, deux colonnes de six
   -------------------------------------------------------------------------- */

.perte__colonne h3 { margin-top: 1.6rem; }
.perte__colonne h3:first-of-type { margin-top: 0; }
.perte__colonne p { color: var(--texte-doux); }

.compte {
  margin-top: 26px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 4px 0;
}
.compte__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.9375rem;
}
.compte__ligne:last-child { border-bottom: 0; }
.compte__ligne dt { color: var(--texte-doux); margin: 0; }
.compte__ligne dd {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--texte);
  text-align: right;
  white-space: nowrap;
}
.compte__total dt, .compte__total dd { color: var(--mesure); font-weight: 600; }

/* --------------------------------------------------------------------------
   Chaine : la section solution, quatre maillons relies par un filet continu
   -------------------------------------------------------------------------- */

.chaine { position: relative; }
.chaine::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 47px;
  height: 1px;
  background: var(--bordure);
}
.chaine__maillon { grid-column: span 3; position: relative; padding-top: 78px; }
.chaine__noeud {
  position: absolute;
  top: 31px;
  left: 0;
  width: 34px; height: 34px;
  background: var(--fond);
  display: grid;
  place-items: center;
}
.chaine__noeud::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  background: var(--etoile-zinc) center / contain no-repeat;
}
.chaine__maillon--actif .chaine__noeud::before { background-image: var(--etoile-mesure); }
.chaine__maillon--actif .chaine__noeud::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mesure);
  box-shadow: 0 0 0 8px rgba(38, 97, 36, 0.14);
  animation: halo-ombre 2.4s ease-in-out infinite;
}
@keyframes halo-ombre {
  0%   { box-shadow: 0 0 0 2px rgba(38, 97, 36, 0.3); }
  60%  { box-shadow: 0 0 0 11px rgba(38, 97, 36, 0.05); }
  100% { box-shadow: 0 0 0 13px rgba(38, 97, 36, 0); }
}
.chaine__rang {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  color: var(--texte-doux);
  display: block;
  margin-bottom: 8px;
}
.chaine__maillon h3 { margin-bottom: 0.45em; }
.chaine__maillon p { font-size: 0.9375rem; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   Moteur : les fonctionnalites, trois colonnes de quatre sur deux rangees
   -------------------------------------------------------------------------- */

.moteur__fiche {
  grid-column: span 4;
  padding: 26px 24px 24px;
}
.moteur__fiche h3 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.moteur__fiche h3::before {
  content: "";
  flex: 0 0 10px;
  width: 10px; height: 10px;
  margin-top: 8px;
  background: var(--etoile-mesure) center / contain no-repeat;
}
.moteur__fiche p {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  position: relative;
  z-index: 1;
}
.moteur__ref {
  display: block;
  margin-top: 12px;
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Exercice : les avantages, bandes horizontales pleine largeur
   -------------------------------------------------------------------------- */

.exercice__bande {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--bordure);
}
.exercice__bande:last-child { border-bottom: 1px solid var(--bordure); }
.exercice__chiffre { grid-column: span 3; }
.exercice__chiffre b {
  display: block;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--mesure);
}
.exercice__chiffre span {
  display: block;
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-top: 8px;
}
.exercice__texte { grid-column: span 9; }
.exercice__texte h3 { margin-bottom: 0.4em; }
.exercice__texte p { color: var(--texte-doux); max-width: 76ch; }

/* --------------------------------------------------------------------------
   Attestation : preuve sociale
   -------------------------------------------------------------------------- */

.jalons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--bordure);
  margin-bottom: 46px;
  background: var(--fond);
}
.jalons__case {
  padding: 24px 22px;
  border-right: 1px solid var(--bordure);
}
.jalons__case:last-child { border-right: 0; }
.jalons__case b {
  display: block;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--nappe);
  line-height: 1.05;
}
.jalons__case span { display: block; font-size: 0.9375rem; color: var(--texte-doux); margin-top: 6px; }

.attestation {
  grid-column: span 4;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
}
.attestation blockquote {
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.attestation blockquote p { font-size: 1rem; }
.attestation figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.attestation figcaption b { display: block; color: var(--texte); font-size: 0.9375rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Bareme : les tarifs
   -------------------------------------------------------------------------- */

.bareme { align-items: start; }

.bareme__carte {
  grid-column: span 4;
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  background: var(--fond);
}
.bareme__carte--avant {
  margin: -16px 0;
  padding: 46px 26px 44px;
  border-color: var(--mesure);
  background: var(--surface);
}
.bareme__carte--avant::after { border-color: var(--mesure); }
.bareme__etoile {
  position: absolute;
  top: 12px; left: 12px;
  width: 24px; height: 24px;
  background: var(--etoile-mesure) center / contain no-repeat;
  z-index: 2;
}
.bareme__carte > * { position: relative; z-index: 1; }
.bareme__nom { margin-bottom: 4px; }
.bareme__cible {
  font-size: 0.875rem;
  color: var(--texte-doux);
  min-height: 3.6em;
  margin-bottom: 16px;
}
.bareme__prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 14px 0;
  margin-bottom: 18px;
}
.bareme__prix b {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--texte);
}
.bareme__prix span { font-size: 0.875rem; color: var(--texte-doux); }
.bareme__annuel {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin: -8px 0 18px;
}
.bareme__inclus { list-style: none; margin: 0 0 24px; padding: 0; }
.bareme__inclus li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  padding: 7px 0;
  border-bottom: 1px solid var(--bordure);
  line-height: 1.5;
}
.bareme__inclus li:last-child { border-bottom: 0; }
.bareme__inclus li::before {
  content: "";
  flex: 0 0 10px;
  width: 10px; height: 10px;
  margin-top: 6px;
  background: var(--etoile-mesure) center / contain no-repeat;
}
.bareme__carte .vanne { margin-top: auto; }

.bareme__mention {
  grid-column: 1 / -1;
  margin-top: 40px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  border-left: 3px solid var(--nappe);
  padding-left: 16px;
}

/* --------------------------------------------------------------------------
   Regard : la FAQ en accordeon
   -------------------------------------------------------------------------- */

.regard { border-top: 1px solid var(--bordure); }
.regard__item { border-bottom: 1px solid var(--bordure); }
.regard__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 20px 4px;
  text-align: left;
  cursor: pointer;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--texte);
  line-height: 1.35;
}
.regard__bouton:hover { color: var(--nappe); }
.regard__signe {
  margin-left: auto;
  flex: 0 0 22px;
  width: 22px; height: 22px;
  position: relative;
}
.regard__signe::before,
.regard__signe::after {
  content: "";
  position: absolute;
  background: var(--mesure);
  left: 50%; top: 50%;
}
.regard__signe::before { width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; }
.regard__signe::after { width: 1.5px; height: 14px; margin: -7px 0 0 -0.75px; transition: transform 0.2s linear; }
.regard__bouton[aria-expanded="true"] .regard__signe::after { transform: scaleY(0); }
.regard__reponse {
  padding: 0 4px 22px;
  max-width: 72ch;
}
.regard__reponse p { font-size: 1rem; color: var(--texte-doux); }
.regard__reponse[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Branchement : le formulaire de contact
   -------------------------------------------------------------------------- */

.branchement__form { grid-column: 2 / 9; }
.branchement__aparte { grid-column: 9 / 12; }

.formulaire { display: grid; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texte);
}
.champ__aide { font-size: 0.875rem; color: var(--texte-doux); font-weight: 400; }
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 2px;
  padding: 12px 13px;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 128px; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: 3px solid var(--mesure);
  outline-offset: 1px;
  border-color: var(--mesure);
}
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.consentement {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.5;
}
.consentement input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--mesure); flex: 0 0 17px; }

.voie-directe {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.aparte {
  padding: 24px 22px;
}
.aparte > * { position: relative; z-index: 1; }
.aparte h3 { font-size: 1.125rem; }
.aparte ul { list-style: none; margin: 0; padding: 0; }
.aparte li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  padding: 8px 0;
  border-bottom: 1px solid var(--bordure);
  line-height: 1.5;
}
.aparte li:last-child { border-bottom: 0; }
.aparte li::before {
  content: "";
  flex: 0 0 10px;
  width: 10px; height: 10px;
  margin-top: 6px;
  background: var(--etoile-nappe) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Exutoire : le pied de page
   -------------------------------------------------------------------------- */

.exutoire {
  position: relative;
  background: var(--fond);
  border-top: 1px solid var(--bordure);
  padding: 62px 0 0;
  overflow: hidden;
}
.exutoire__grille { position: relative; z-index: 1; }
.exutoire__col { grid-column: span 3; }
.exutoire__col h4 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 14px;
}
.exutoire__col ul { list-style: none; margin: 0; padding: 0; }
.exutoire__col li { padding: 5px 0; }
.exutoire__col a { font-size: 0.9375rem; color: var(--texte); text-decoration: none; }
.exutoire__col a:hover { color: var(--mesure); text-decoration: underline; }
.exutoire__position { font-size: 0.9375rem; color: var(--texte-doux); margin: 12px 0 16px; max-width: 34ch; }
.exutoire__profils { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.exutoire__profils a { font-size: 0.875rem; color: var(--nappe); }
.exutoire__editeur { font-size: 0.875rem; color: var(--texte-doux); margin-top: 14px; line-height: 1.55; }

.exutoire__barre {
  position: relative;
  z-index: 1;
  margin-top: 52px;
  border-top: 1px solid var(--bordure);
  padding: 20px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Pages internes : mise en page documentaire
   -------------------------------------------------------------------------- */

.chapeau-page {
  border-bottom: 1px solid var(--bordure);
  padding: 62px 0 44px;
  position: relative;
  overflow: hidden;
}
.chapeau-page__contenu { position: relative; z-index: 1; }
.chapeau-page h1 { font-size: 2.7rem; max-width: 20ch; }
.chapeau-page p { color: var(--texte-doux); font-size: 1.125rem; max-width: 62ch; }

.fil {
  font-size: 0.875rem;
  color: var(--texte-doux);
  padding: 16px 0 0;
}
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fil li::after { content: " /"; color: var(--bordure); }
.fil li:last-child::after { content: ""; }

.document { padding: 62px 0 82px; }
.document__corps { grid-column: 1 / 9; }
.document__aside { grid-column: 9 / 13; }
.document__corps h2 {
  font-size: 1.55rem;
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--bordure);
}
.document__corps h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.document__corps h3 { margin-top: 1.7em; }
.document__corps li { margin-bottom: 0.4em; }
.document__corps dl { margin: 0 0 1.2em; }
.document__corps dt { font-weight: 600; margin-top: 0.7em; }
.document__corps dd { margin: 0 0 0.3em; color: var(--texte-doux); }

.encart {
  padding: 22px 20px;
  position: sticky;
  top: calc(var(--entete-h) + 24px);
}
.encart > * { position: relative; z-index: 1; }
.encart h3 { font-size: 1.0625rem; }
.encart p { font-size: 0.9375rem; color: var(--texte-doux); }
.encart ul { list-style: none; margin: 0; padding: 0; }
.encart li { font-size: 0.9375rem; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.encart li:last-child { border-bottom: 0; }

.tableau-doc {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.9375rem;
}
.tableau-doc caption {
  text-align: left;
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  padding-bottom: 8px;
}
.tableau-doc th, .tableau-doc td {
  border: 1px solid var(--bordure);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
.tableau-doc thead th {
  background: var(--fond-alt);
  font-weight: 600;
  font-size: 0.875rem;
}
.tableau-doc td.nombre {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* Page auteur */
.portrait { grid-column: 1 / 5; }
.portrait img { border: 1px solid var(--bordure); border-bottom: 3px solid var(--mesure); }
.portrait figcaption {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-top: 10px;
}
.recit { grid-column: 5 / 13; }

.profils-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.profils-liste li { border-bottom: 1px solid var(--bordure); padding: 9px 0; }
.profils-liste li:last-child { border-bottom: 0; }
.profils-liste a { font-size: 0.9375rem; }

/* Pages courtes : merci et 404 */
.stele {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: left;
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}
.stele__bloc { position: relative; z-index: 1; max-width: 62ch; }
.stele__bloc h1 { font-size: 2.6rem; }
.stele__bloc p { color: var(--texte-doux); font-size: 1.125rem; }
.stele__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Consigne : le bloc de suite a donner sur les pages merci et introuvable */
.consigne {
  padding: 24px 22px 20px;
  margin: 28px 0 24px;
}
.consigne > * { position: relative; z-index: 1; }
.consigne h2 { font-size: 1.1875rem; margin-bottom: 0.65em; }
.consigne ol,
.consigne ul {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pas;
}
.consigne li {
  position: relative;
  padding: 10px 0 10px 32px;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--texte-doux);
}
.consigne li:last-child { border-bottom: 0; }
.consigne ol li { counter-increment: pas; }
.consigne ol li::before {
  content: counter(pas);
  position: absolute;
  left: 0;
  top: 10px;
  font-family: var(--courant);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--mesure);
}
.consigne ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 14px;
  height: 14px;
  background: var(--etoile-mesure) center / contain no-repeat;
}
.consigne ul li a { font-weight: 500; color: var(--nappe); }

/* Plan du site */
.plan__groupe { grid-column: span 6; margin-bottom: 34px; }
.plan__groupe h2 { font-size: 1.4rem; }
.plan__groupe dl { margin: 0; }
.plan__groupe dt { margin-top: 16px; }
.plan__groupe dt a { font-weight: 600; }
.plan__groupe dd { margin: 3px 0 0; color: var(--texte-doux); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Apparition au defilement
   -------------------------------------------------------------------------- */

.leve {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.leve.leve--vu { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  h1 { font-size: 2.9rem; }
  .cliche--debord { margin-right: 0; }
}

@media (max-width: 900px) {
  .entete__nav, .entete__action { display: none; }
  .bouton-filets { display: block; }
  .captage__promesse, .captage__schema { grid-column: 1 / -1; }
  .captage { padding-top: 52px; }
  .reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reassure__case:nth-child(2) { border-right: 0; }
  .reassure__case:nth-child(1), .reassure__case:nth-child(2) { border-bottom: 1px solid var(--bordure); }
  .jalons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jalons__case:nth-child(2) { border-right: 0; }
  .jalons__case:nth-child(1), .jalons__case:nth-child(2) { border-bottom: 1px solid var(--bordure); }
  .col-6, .col-4, .col-5, .col-7, .col-8, .col-9, .col-3a10, .col-2a8, .col-9a12 { grid-column: 1 / -1; }
  .moteur__fiche { grid-column: span 6; }
  .attestation { grid-column: 1 / -1; }
  .bareme__carte { grid-column: 1 / -1; }
  .bareme__carte--avant { margin: 0; padding: 30px 26px 28px; }
  .chaine::before { display: none; }
  .chaine__maillon { grid-column: span 6; padding-top: 62px; }
  .chaine__noeud { top: 14px; }
  .exercice__chiffre, .exercice__texte { grid-column: 1 / -1; }
  .branchement__form, .branchement__aparte { grid-column: 1 / -1; }
  .document__corps, .document__aside { grid-column: 1 / -1; }
  .encart { position: static; }
  .portrait, .recit { grid-column: 1 / -1; }
  .portrait { max-width: 380px; }
  .plan__groupe { grid-column: 1 / -1; }
  .exutoire__col { grid-column: span 6; margin-bottom: 26px; }
}

@media (max-width: 620px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.7rem; }
  .travee { padding: 62px 0; }
  .moteur__fiche { grid-column: 1 / -1; }
  .chaine__maillon { grid-column: 1 / -1; }
  .reassure { grid-template-columns: 1fr; }
  .reassure__case { border-right: 0; border-bottom: 1px solid var(--bordure); }
  .reassure__case:last-child { border-bottom: 0; }
  .jalons { grid-template-columns: 1fr; }
  .jalons__case { border-right: 0; border-bottom: 1px solid var(--bordure); }
  .jalons__case:last-child { border-bottom: 0; }
  .champ--duo { grid-template-columns: 1fr; }
  .exutoire__col { grid-column: 1 / -1; }
  .captage__actions .vanne { width: 100%; }
  .chapeau-page h1 { font-size: 2.1rem; }
  .tableau-doc { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pastille::after {
    animation: none;
    opacity: 1;
    width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px;
    background: transparent;
    border: 2px solid var(--mesure);
  }
  .pulse-svg { animation: none; r: 11; opacity: 1; fill: none; stroke: var(--mesure); stroke-width: 2; }
  .chaine__maillon--actif .chaine__noeud::after {
    animation: none;
    box-shadow: 0 0 0 2px var(--mesure);
  }
  .vanne--respire::after { animation: none; opacity: 0; }
  .leve { opacity: 1; transform: none; transition: none; }
  .entete__jauge { transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@media print {
  .entete, .panneau, .vanne, .topo { display: none !important; }
  body { color: #000; }
  main { padding-top: 0; }
}

/* ==========================================================================
   Magazine : Le Bilan des Volumes
   Section ajoutee a la fin de la feuille, aucune regle existante n est touchee.
   Meme palette, meme etoile radiale a branches fines, meme cadre en double filet
   et meme pastille qui pulse que le reste du site : une page du magazine se lit
   comme une piece du meme dossier technique, pas comme un module rapporte.

   Vocabulaire de nommage, dans la continuite du reseau :
     sommaire  la grille de cartes            feuillet  une carte d article
     notice    l entete d un article          chapo     l exergue de chapeau
     corps-article  le corps redactionnel     signature l encart auteur
     renvoi    le bloc A lire aussi           derniers  la mise en avant d accueil
   Le corps redactionnel ne porte aucune classe : toutes les balises nues y sont
   mises en forme en tant que descendantes de .corps-article.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sommaire : la grille de cartes d article
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: stretch;
}

.sommaire__mention {
  grid-column: 1 / -1;
  margin-top: 34px;
  padding-left: 16px;
  border-left: 3px solid var(--nappe);
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Feuillet : une carte d article
   -------------------------------------------------------------------------- */

.feuillet {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 20px;
  background: var(--surface);
  transition: border-color 0.18s linear;
}
.feuillet > * { position: relative; z-index: 1; }
.feuillet:hover { border-color: var(--nappe); }
.feuillet:hover::after { border-color: var(--nappe); opacity: 0.45; }

.feuillet__vue {
  margin: 0 0 16px;
  display: block;
}
.feuillet__vue img {
  width: 100%;
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--mesure);
  filter: saturate(0.75);
  transition: filter 0.2s linear;
}
.feuillet:hover .feuillet__vue img { filter: saturate(0.95); }

.feuillet__texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 10px;
}

.feuillet__angle {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nappe);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feuillet__angle::before {
  content: "";
  flex: 0 0 10px;
  width: 10px; height: 10px;
  background: var(--etoile-mesure) center / contain no-repeat;
}

.feuillet__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.feuillet__titre a {
  color: var(--texte);
  text-decoration: none;
}
.feuillet__titre a:hover {
  color: var(--nappe);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feuillet__extrait {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: none;
}

.feuillet__pied {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums lining-nums;
}
.feuillet__pied time { white-space: nowrap; }
.feuillet__duree {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.feuillet__duree::before {
  content: "";
  width: 1px; height: 12px;
  background: var(--bordure);
}

/* Carte compacte, employee dans le bloc A lire aussi */
.feuillet--compact { padding: 10px 10px 16px; }
.feuillet--compact .feuillet__titre { font-size: 1.0625rem; }
.feuillet--compact .feuillet__extrait { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Chapeau du magazine, en tete de la page d index
   -------------------------------------------------------------------------- */

.magazine__chapo {
  font-size: 1.125rem;
  color: var(--texte-doux);
  max-width: 68ch;
  line-height: 1.6;
}
.magazine__reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums lining-nums;
  max-width: 68ch;
}
.magazine__reperes span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* --------------------------------------------------------------------------
   Notice : l entete d un article, fil d Ariane, angle, dates, temps de lecture
   -------------------------------------------------------------------------- */

.notice {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
  padding: 30px 0 44px;
}
.notice__contenu { position: relative; z-index: 1; }
.notice h1 {
  font-size: 2.7rem;
  max-width: 22ch;
  margin-bottom: 22px;
}
.notice__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums lining-nums;
}
.notice__angle {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nappe);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.notice__angle::before {
  content: "";
  flex: 0 0 16px;
  width: 16px; height: 16px;
  background: var(--etoile-mesure) center / contain no-repeat;
}
.notice__separe {
  padding-left: 16px;
  border-left: 1px solid var(--bordure);
}
.notice__maj {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* Image a la une, sous l entete d article */
.tirage {
  margin: 0;
  padding: 34px 0 0;
}
.tirage img {
  width: 100%;
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--mesure);
  filter: saturate(0.75);
}
.tirage figcaption {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-top: 10px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Chapo : l exergue qui pose le probleme et annonce la reponse
   -------------------------------------------------------------------------- */

.chapo {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--texte);
  border-left: 3px solid var(--mesure);
  padding-left: 20px;
  max-width: 64ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Corps de l article : HTML semantique nu, aucune classe
   Chaque balise est mise en forme comme descendante du conteneur de corps,
   pour qu un article ne paraisse jamais non style faute de classe.
   -------------------------------------------------------------------------- */

.article { padding: 44px 0 78px; }
.article__colonne { grid-column: 2 / 10; }

.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--texte);
}
.corps-article > *:first-child { margin-top: 0; }

.corps-article p {
  margin: 0 0 1.05em;
  max-width: 68ch;
}

.corps-article h2 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--texte);
  margin: 2.2em 0 0.7em;
  padding-top: 1.05em;
  border-top: 1px solid var(--bordure);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.corps-article h2::before {
  content: "";
  flex: 0 0 16px;
  width: 16px; height: 16px;
  margin-top: 0.34em;
  background: var(--etoile-zinc) center / contain no-repeat;
}

.corps-article h3 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.32;
  color: var(--texte);
  margin: 1.8em 0 0.55em;
  padding-left: 14px;
  border-left: 3px solid var(--mesure);
}

.corps-article ul,
.corps-article ol {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}
.corps-article ol { counter-reset: pas-article; }
.corps-article li {
  position: relative;
  padding: 8px 0 8px 30px;
  border-bottom: 1px solid var(--bordure);
  line-height: 1.6;
}
.corps-article li:last-child { border-bottom: 0; }
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px; height: 12px;
  background: var(--etoile-mesure) center / contain no-repeat;
}
.corps-article ol > li { counter-increment: pas-article; }
.corps-article ol > li::before {
  content: counter(pas-article);
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--courant);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--nappe);
}
.corps-article li ul,
.corps-article li ol { margin: 8px 0 0; }
.corps-article li ul > li,
.corps-article li ol > li { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }

.corps-article a {
  color: var(--nappe);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover { color: var(--mesure); }

.corps-article strong { font-weight: 600; color: var(--texte); }
/* Les references reglementaires se composent en Assistant 600 bleu de nappe,
   sans italique : c est le role de em dans un corps d article. */
.corps-article em {
  font-style: normal;
  font-weight: 600;
  color: var(--nappe);
  white-space: nowrap;
}

/* Tableau recapitulatif, encadre comme un tableau de rapport annuel */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0 1.8em;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.corps-article th,
.corps-article td {
  border: 1px solid var(--bordure);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.corps-article thead th {
  background: var(--fond-alt);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--texte);
}
.corps-article tbody th {
  font-weight: 600;
  background: var(--surface);
}
.corps-article tbody tr:nth-child(even) td { background: var(--surface); }

/* Encadre : la carte des tarifs, etoile radiale a l angle superieur gauche */
.corps-article aside {
  position: relative;
  margin: 1.9em 0;
  padding: 26px 24px 22px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
}
.corps-article aside::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 24px; height: 24px;
  background: var(--etoile-mesure) center / contain no-repeat;
  z-index: 2;
}
.corps-article aside::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  opacity: 0.3;
  pointer-events: none;
}
.corps-article aside > * { position: relative; z-index: 1; }
.corps-article aside > *:first-child { padding-left: 30px; }
.corps-article aside p { font-size: 0.9375rem; color: var(--texte-doux); }
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul,
.corps-article aside ol { margin-bottom: 0; }
.corps-article aside li { font-size: 0.9375rem; color: var(--texte-doux); }

/* Citation */
.corps-article blockquote {
  margin: 1.7em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--mesure);
  max-width: 64ch;
}
.corps-article blockquote p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

/* Figure inseree dans le corps */
.corps-article figure { margin: 1.8em 0; }
.corps-article figure img {
  width: 100%;
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--mesure);
  filter: saturate(0.75);
}
.corps-article figcaption {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-top: 10px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Appel a l action de fin d article
   -------------------------------------------------------------------------- */

.appel {
  position: relative;
  margin: 44px 0 0;
  padding: 28px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  max-width: 68ch;
}
.appel::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  opacity: 0.3;
  pointer-events: none;
}
.appel > * { position: relative; z-index: 1; }
.appel__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--texte);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.appel p { font-size: 0.9375rem; color: var(--texte-doux); }
.appel .vanne { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Signature : l encart auteur
   -------------------------------------------------------------------------- */

.signature {
  position: relative;
  margin: 34px 0 0;
  padding: 24px 24px 22px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 68ch;
}
.signature::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  opacity: 0.3;
  pointer-events: none;
}
.signature > * { position: relative; z-index: 1; }
.signature img {
  flex: 0 0 96px;
  width: 96px; height: 96px;
  border: 1px solid var(--bordure);
  border-bottom: 3px solid var(--mesure);
  filter: saturate(0.75);
  object-fit: cover;
}
.signature__bloc { flex: 1 1 auto; }
.signature__qui {
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin: 0 0 4px;
}
.signature__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--texte);
  margin: 0 0 8px;
}
.signature__bio {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  line-height: 1.55;
  margin: 0 0 10px;
}
.signature__lien { font-size: 0.9375rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Renvoi : le bloc A lire aussi
   -------------------------------------------------------------------------- */

.renvoi {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 62px 0 68px;
}
.renvoi__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 22px;
  margin-bottom: 34px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bordure);
}
.renvoi__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--texte);
  margin: 0;
}
.renvoi__lien {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nappe);
}
.renvoi .feuillet { background: var(--fond); }

/* --------------------------------------------------------------------------
   Derniers : la mise en avant du magazine sur la page d accueil
   -------------------------------------------------------------------------- */

.derniers__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 26px;
  margin-bottom: 40px;
}
.derniers__intro { max-width: 62ch; }
.derniers__intro p { color: var(--texte-doux); font-size: 1.125rem; }
.derniers__acces {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--nappe);
  white-space: nowrap;
}
.derniers .feuillet { background: var(--fond); }

/* --------------------------------------------------------------------------
   Parutions : la liste des articles publies, sur la page auteur
   -------------------------------------------------------------------------- */

.parutions { list-style: none; margin: 0; padding: 0; }
.parutions li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bordure);
}
.parutions li:last-child { border-bottom: 0; }
.parutions time {
  flex: 0 0 auto;
  font-size: 0.875rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.parutions a { font-size: 0.9375rem; font-weight: 500; }
.parutions span {
  flex-basis: 100%;
  font-family: var(--main);
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .notice h1 { font-size: 2.4rem; }
}

@media (max-width: 900px) {
  .feuillet { grid-column: span 6; }
  .article__colonne { grid-column: 1 / -1; }
  .notice h1 { max-width: none; }
}

@media (max-width: 620px) {
  .feuillet { grid-column: 1 / -1; }
  .notice { padding: 22px 0 34px; }
  .notice h1 { font-size: 2rem; }
  .renvoi { padding: 48px 0 52px; }
  .signature { flex-direction: column; gap: 16px; }
  .corps-article table { display: block; overflow-x: auto; }
  .corps-article h2 { font-size: 1.4rem; }
  .article { padding: 30px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .feuillet,
  .feuillet__vue img { transition: none; }
}

@media print {
  .renvoi, .appel { display: none !important; }
  .corps-article { max-width: none; }
}

/* Separation de la section magazine de la page d accueil et du formulaire qui la suit */
.derniers { border-bottom: 1px solid var(--bordure); }