/* =====================================================================
   THE BOGUE SOUND LEDGER — feuille unique du carnet de chaussée.
   Squelette « chronologie » (année > mois > entrée) rhabillé.
   Direction artistique 21. Le Carnet d'Établi, préfixe ce-.
   Lexique de classes : fronton, préambule, relevé, chenal, rail-saisons,
   saison, quinzaine, note, amer, laisse, relèvement, estran, passage,
   quai, balisage, sillage, borne, fenêtre, marge, voisins, renvois, sauts.
   Aucune requête tierce : polices système uniquement, aucune image
   distante, aucun script, aucun fichier de police.
   ===================================================================== */

:root {
  /* ---------- COULEURS : dix jetons, chacun nommé par sa matière ---------- */
  --journal:        #EFE9DC;   /* papier de journal chaud : fond général de page */
  --journal-pale:   #F4F0E6;   /* papier passé au soleil : blocs posés, plaques */
  --tourbe:         #2E2620;   /* tourbe humide : encre courante et titres */
  --tourbe-delavee: #5A4F45;   /* tourbe séchée : textes secondaires, légendes */
  --marais:         #4A5A3C;   /* herbe de marais salé : filets forts, trait haut */
  --laiton:         #6E5136;   /* laiton de lanterne : dates, liens, losange allumé */
  --laiton-voile:   #E4D9C4;   /* laiton sur papier buvard : fonds d'étiquette */
  --vase:           #7C7266;   /* vase draguée : axe vertical, piquets, bordures */
  --filet-vase:     #C9BBA2;   /* dépôt de vase sec : filets fins, graduations */
  --estran:         #3A342C;   /* estran mouillé à contre-jour : UN seul bloc par page */

  /* REGLE NEGATIVE 1 : --laiton ne remplit jamais un fond de bouton ni de
     pavé. Il n'existe qu'en texte, en filet de 1px ou en losange de 9px.
     Une balise éclaire, elle ne peint pas.
     REGLE NEGATIVE 2 : --estran ne sert qu'à UN seul bloc par page. Deux
     fonds sombres dans une même page et la marée n'a plus de sens.
     REGLE NEGATIVE 3 : ni ombre portée, ni coin arrondi, ni dégradé de
     confort. La seule lumière du carnet est le laiton. */

  /* ---------- TYPOGRAPHIE : deux piles, un troisième rôle, un registre ---------- */
  --titre-police:   "Hoefler Text", "Baskerville", "Times New Roman", Georgia, serif;
  --texte-police:   Tahoma, "Segoe UI", "DejaVu Sans", sans-serif;
  --chiffre-police: ui-monospace, "SFMono-Regular", Consolas, monospace;   /* dates, heures de marée, hauteurs, distances, numéros de balise et de route */

  --corps-taille: clamp(16.5px, 15.6px + 0.28vw, 18px);
  --interligne-texte: 1.62;
  --interligne-titre: 1.12;
  --interligne-sous-titre: 1.2;
  --mesure: 68ch;              /* largeur de lecture bornée en ch */

  /* ---------- MESURES ET RYTHME ---------- */
  --emprise:   76rem;
  --rail:      13rem;
  --pas:       clamp(1rem, 0.55rem + 1.5vw, 1.85rem);
  --gouttiere: clamp(1.1rem, 0.5rem + 2vw, 2.75rem);
  --ratio-large:  3 / 1;       /* la vue, le pays d'eau */
  --ratio-releve: 3 / 2;       /* la planche, la scène de travail */
  --ratio-detail: 1 / 1;       /* l'objet isolé */

  /* ---------- GÉOMÉTRIE DE L'AXE : les trois se règlent ensemble ---------- */
  --axe-position: 1.15rem;     /* distance du filet vertical au bord gauche de la liste */
  --axe-retrait:  7.8rem;      /* gouttière de date = retrait de la colonne des entrées */
  --amer-taille:  9px;         /* losange de la balise */
}

/* ---------------------------------------------------------------------
   RÉINITIALISATION MINIMALE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Garde-fou anti débordement. « clip » et non « hidden » : « hidden »
     créerait un conteneur de défilement et casserait les éléments collés
     (plaque de saison, rail des saisons). */
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body.ce-page {
  margin: 0;
  background: var(--journal);
  color: var(--tourbe);
  font-family: var(--texte-police);
  font-size: var(--corps-taille);
  line-height: var(--interligne-texte);
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  font-weight: 600;
  line-height: var(--interligne-sous-titre);
  margin: 0;
  text-wrap: balance;
}
h1 { line-height: var(--interligne-titre); letter-spacing: -0.012em; }
h2 { letter-spacing: -0.012em; }
h3, h4 { font-weight: 500; letter-spacing: 0; }

p, ul, ol, dl, figure, blockquote, table { margin: 0; }

a { color: var(--laiton); text-underline-offset: 0.18em; }
a:hover { color: var(--marais); }

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

/* L'italique de Hoefler Text est réservée aux noms de bateaux, aux titres
   d'ouvrages cités et à la phrase d'auteur. Rien d'autre n'est en italique. */
.ce-ouvrage { font-family: var(--titre-police); font-style: italic; }
.ce-auteur  { font-family: var(--titre-police); font-style: italic; }

/* ---------------------------------------------------------------------
   STRUCTURE GÉNÉRALE
   --------------------------------------------------------------------- */
.ce-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--tourbe);
  color: var(--journal);
  padding: 0.6rem 1rem;
  font-family: var(--titre-police);
}
.ce-evitement:focus { left: 0.5rem; top: 0.5rem; }

.ce-emprise {
  width: 100%;
  max-width: var(--emprise);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ---------------------------------------------------------------------
   SIGNATURE A — .ce-relevement, le relèvement : deux traits inégaux qui
   se lisent ensemble, le laiton derrière le vert du marais. Quatre emplois :
   tête du rail des saisons, seuil de quinzaine, sous le titre d'article,
   au-dessus du quai.
   --------------------------------------------------------------------- */
.ce-relevement {
  border-top: 3px solid var(--marais);
  box-shadow: 0 2px 0 0 var(--journal), 0 4px 0 0 var(--laiton);
}
.ce-relevement--seuil {
  border-top: 0;
  border-bottom: 3px solid var(--marais);
  box-shadow: none;
}
.ce-relevement--seuil::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 2px;
  background: var(--laiton);
}

/* ---------------------------------------------------------------------
   SIGNATURE B — .ce-amer, la balise : losange plein posé sur un piquet de
   1px. Quatre emplois : chaque .ce-note du carnet et des pages de rubrique,
   les jalons internes d'article, les voisins amont et aval, le rail.
   --------------------------------------------------------------------- */
.ce-amer,
.ce-note::before,
.ce-amers-article__jalon::before,
.ce-voisins__lien::before {
  content: "";
  position: absolute;
  left: calc(var(--axe-x, var(--axe-position)) - var(--axe-retrait));
  top: 0.62em;
  width: var(--amer-taille);
  height: var(--amer-taille);
  transform: translateX(-50%) rotate(45deg);
  background: var(--journal);
  border: 1px solid var(--vase);
  z-index: 2;
}
.ce-note::after,
.ce-amers-article__jalon::after {
  content: "";
  position: absolute;
  left: calc(var(--axe-x, var(--axe-position)) - var(--axe-retrait) - .5px);
  top: calc(0.62em + var(--amer-taille));
  width: 1px;
  height: 10px;
  background: var(--vase);
}
.ce-note:first-child::before { background: var(--laiton); border-color: var(--laiton); }

/* ---------------------------------------------------------------------
   SIGNATURE C — .ce-laisse, la laisse de marée : la ligne d'algues et de
   coquilles que l'eau laisse sur le sable, graduée comme l'échelle peinte
   sur une pile de pont. Cinq emplois : bas du préambule, bas de chaque
   plaque de saison, sommet de l'estran retourné, bas des légendes, avant
   les renvois d'article.
   --------------------------------------------------------------------- */
.ce-laisse {
  height: 14px;
  background-image: repeating-linear-gradient(90deg, var(--filet-vase) 0 1px, transparent 1px 6px);
  border-bottom: 1px solid var(--filet-vase);
}
.ce-laisse--haute {
  height: 22px;
  background-image: repeating-linear-gradient(90deg, var(--laiton) 0 1px, transparent 1px 6px);
  border-bottom: 0;
}
.ce-saison__bas {
  height: 14px;
  background-image: repeating-linear-gradient(90deg, var(--filet-vase) 0 1px, transparent 1px 6px);
}

/* ---------------------------------------------------------------------
   FRONTON : marque, ligne de contexte, navigation à deux états.
   Pas de téléphone, pas de bouton, rien à vendre.
   --------------------------------------------------------------------- */
.ce-fronton {
  border-bottom: 1px solid var(--filet-vase);
  padding-block: 1.1rem;
}
.ce-fronton__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem 2rem;
}
.ce-fronton__identite {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.ce-fronton__marque {
  display: block;
  font-family: var(--titre-police);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--tourbe);
  text-decoration: none;
}
.ce-fronton__marque:hover { color: var(--laiton); }
.ce-fronton__mention {
  margin-top: 0.15rem;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}

/* La bascule : une case à cocher, aucune ligne de script. */
.ce-bascule {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ce-bascule__declencheur {
  display: inline-block;
  cursor: pointer;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tourbe);
  border: 1px solid var(--vase);
  padding: 0.35rem 0.65rem;
}
.ce-fronton__liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  font-family: var(--titre-police);
  font-size: 1rem;
}
.ce-fronton__liste a {
  color: var(--tourbe);
  text-decoration: none;
  padding-bottom: 0.12rem;
  border-bottom: 2px solid transparent;
}
.ce-fronton__liste a:hover,
.ce-fronton__liste a[aria-current="page"] {
  color: var(--laiton);
  border-bottom-color: var(--laiton);
}

/* Petit écran : déclencheur visible, liste repliée tant qu'on n'a pas coché. */
@media (max-width: 55.99rem) {
  .ce-fronton__acces { flex: 1 1 100%; }
  .ce-fronton__liste { display: none; margin-top: 0.7rem; }
  .ce-bascule:checked ~ .ce-fronton__liste { display: flex; flex-direction: column; }
}
/* Grand écran : barre horizontale, déclencheur caché. */
@media (min-width: 56rem) {
  .ce-bascule__declencheur { display: none; }
  .ce-fronton__acces { align-self: center; }
}

/* ---------------------------------------------------------------------
   PRÉAMBULE : étroit (54ch), décalé à gauche de la gouttière du rail,
   très aéré. Lettrine Hoefler Text de trois lignes en laiton.
   --------------------------------------------------------------------- */
.ce-preambule {
  padding-block: calc(var(--pas) * 1.7) calc(var(--pas) * 1.1);
}
/* Le préambule reste étroit (54ch) et décalé à gauche, mais il n'abandonne
   pas la moitié droite de l'écran : le texte tient la première colonne, la
   vue du pays d'eau tient la seconde, ancrée sur la même ligne de base. */
.ce-preambule .ce-emprise { max-width: none; }
.ce-preambule__colonne { max-width: 54ch; }
@media (min-width: 62rem) {
  .ce-preambule .ce-emprise {
    display: grid;
    grid-template-columns: 54ch minmax(0, 1fr);
    column-gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: end;
  }
  .ce-preambule .ce-vue { align-self: end; }
  .ce-preambule__bas { grid-column: 1 / -1; }
}
.ce-preambule__titre {
  font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3.05rem);
}
.ce-preambule__texte {
  margin-top: 0.9rem;
  color: var(--tourbe-delavee);
  font-size: 1.05em;
}
/* Lettrine de trois lignes : elle n'existe qu'au premier paragraphe d'un
   texte de lecture, jamais dans une liste ni dans un encadré. */
.ce-lettrine::first-letter {
  float: left;
  font-family: var(--titre-police);
  font-size: 3.35em;
  line-height: 0.82;
  font-weight: 600;
  color: var(--laiton);
  padding: 0.06em 0.1em 0 0;
}
.ce-preambule__bas { margin-top: calc(var(--pas) * 1.2); }

/* ---------------------------------------------------------------------
   IMAGES : trois cadrages nommés, bordure de 1px, aucun filtre, aucun
   arrondi, aucune ombre. Les ratios sont posés en variables.
   --------------------------------------------------------------------- */
.ce-vue,
.ce-planche,
.ce-detail { margin: 0; }

.ce-vue__boite { aspect-ratio: var(--ratio-large); }
.ce-planche__boite { aspect-ratio: var(--ratio-releve); }
.ce-detail__boite { aspect-ratio: var(--ratio-detail); }

.ce-vue__boite,
.ce-planche__boite,
.ce-detail__boite {
  overflow: hidden;
  border: 1px solid var(--filet-vase);
  background: var(--journal-pale);
}
.ce-vue__boite img,
.ce-planche__boite img,
.ce-detail__boite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ce-vue__legende,
.ce-planche__legende,
.ce-detail__legende {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tourbe-delavee);
  border-left: 3px solid var(--marais);
  padding-left: 0.7rem;
}
.ce-planche__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ce-planche__bas,
.ce-detail__bas { margin-top: 0.85rem; }
.ce-detail { max-width: 100%; }

/* Paire de marée : deux cadrages STRICTEMENT identiques, une seule
   légende commune. Le filet central de 2px tombe sur l'axe. */
.ce-paire {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0;
}
@media (min-width: 44rem) {
  .ce-paire { grid-template-columns: 1fr 2px 1fr; gap: 0; column-gap: 1.1rem; }
  .ce-paire::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background: var(--vase);
  }
}
.ce-paire__etat {
  display: block;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: 0.4rem;
}
.ce-paire__legende {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tourbe-delavee);
  border-left: 3px solid var(--marais);
  padding-left: 0.7rem;
}

/* ---------------------------------------------------------------------
   RELEVÉ : bande large et basse de quatre mesures, chiffres tabulaires
   sur fond de laiton buvard.
   --------------------------------------------------------------------- */
.ce-releve {
  background: var(--laiton-voile);
  border-top: 1px solid var(--filet-vase);
  border-bottom: 1px solid var(--filet-vase);
  padding-block: calc(var(--pas) * 0.85);
}
.ce-releve__interieur { padding-inline: var(--gouttiere); }
.ce-releve__mesures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.5rem;
  max-width: var(--emprise);
  margin-inline: auto;
}
@media (min-width: 44rem) {
  .ce-releve__mesures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ce-releve__intitule {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-releve__valeur {
  margin: 0.25rem 0 0;
  font-family: var(--chiffre-police);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--tourbe);
}
.ce-releve__valeur--mot {
  font-family: var(--titre-police);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   CHENAL : la grille du corps, rail des saisons à gauche, carnet à droite.
   Mobile : le rail passe AU-DESSUS du carnet, en une ligne qui défile
   dans son propre conteneur.
   --------------------------------------------------------------------- */
.ce-chenal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pas);
  align-items: start;          /* chaque colonne garde sa hauteur propre */
  padding-bottom: calc(var(--pas) * 2);
}
@media (min-width: 62rem) {
  .ce-chenal {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.6rem);
  }
}

.ce-rail-saisons {
  position: relative;
  padding-top: 0.9rem;
  scroll-margin-top: 1rem;
}
.ce-rail-saisons__titre {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
  margin-bottom: 0.6rem;
}
.ce-rail-saisons__liste {
  list-style: none;
  padding: 0 0 0.4rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.ce-rail-saisons__annee {
  position: relative;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tourbe);
  font-family: var(--chiffre-police);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--filet-vase);
  background: var(--journal-pale);
}
.ce-rail-saisons__annee:hover { border-color: var(--laiton); color: var(--laiton); }
.ce-rail-saisons__compte {
  font-family: var(--texte-police);
  font-size: 0.7rem;
  letter-spacing: 0;
  color: var(--tourbe-delavee);
}
@media (min-width: 62rem) {
  .ce-rail-saisons {
    position: sticky;
    top: 0.5rem;
    padding-top: 1rem;
  }
  .ce-rail-saisons__liste { flex-direction: column; gap: 0; overflow: visible; }
  .ce-rail-saisons__annee {
    border: 0;
    border-left: 3px solid var(--vase);
    background: none;
    padding: 0.45rem 0 0.45rem 0.8rem;
    font-size: 1.1rem;
  }
  .ce-rail-saisons__annee:hover { border-left-color: var(--laiton); }
  .ce-rail-saisons__annee--active {
    border-left-color: var(--laiton);
    color: var(--laiton);
  }
  /* Quatrième emploi de la balise : le losange du rail, posé sur son piquet. */
  .ce-rail-saisons__annee--active::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.95rem;
    width: var(--amer-taille);
    height: var(--amer-taille);
    transform: translateX(-50%) rotate(45deg);
    background: var(--laiton);
    border-color: var(--laiton);
    border-style: solid;
    border-width: 1px;
    z-index: 2;
  }
  .ce-rail-saisons__annee--active::after {
    content: "";
    position: absolute;
    left: calc(0.1rem - .5px);
    top: calc(0.95rem + var(--amer-taille));
    width: 1px;
    height: 10px;
    background: var(--vase);
  }
}

/* ---------------------------------------------------------------------
   LE CARNET : frise datée, saison > quinzaine > note.
   --------------------------------------------------------------------- */
.ce-carnet { min-width: 0; }

.ce-saison {
  margin-top: calc(var(--pas) * 1.4);
  scroll-margin-top: 4.2rem;
}
.ce-saison:first-child { margin-top: 0; }

/* Plaque de saison, collée en haut pendant le défilement. */
.ce-saison__plaque {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: 0.55rem 0 0.5rem;
  background: var(--journal);
  border-bottom: 2px solid var(--tourbe);
}
.ce-saison__annee {
  font-family: var(--chiffre-police);
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ce-saison__mesure {
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-saison__suite { margin-top: 0.9rem; padding-left: var(--axe-retrait); }
.ce-saison__bas { margin-top: calc(var(--pas) * 1.1); }

.ce-quinzaine {
  margin-top: calc(var(--pas) * 1.05);
  scroll-margin-top: 4.6rem;
}
.ce-quinzaine__seuil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
  padding-bottom: 0.45rem;
}
.ce-quinzaine__compte {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--tourbe-delavee);
}

/* La colonne des notes porte l'axe vertical continu. */
.ce-notes {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0 var(--axe-retrait);
  position: relative;
}
.ce-notes::before {
  content: "";
  position: absolute;
  left: var(--axe-position);
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--filet-vase);
}
.ce-note {
  position: relative;
  padding-bottom: calc(var(--pas) * 1.05);
}
.ce-note:last-child { padding-bottom: 0.35rem; }

.ce-note__horodate {
  position: absolute;
  left: calc(var(--axe-position) - var(--axe-retrait) + 0.6rem);
  top: 0.14em;
  width: calc(var(--axe-retrait) - var(--axe-position) - 1.2rem);
  text-align: right;
  white-space: nowrap;
  font-size: 0.8em;
}
.ce-note__titre {
  font-size: clamp(1.2rem, 1.02rem + 0.78vw, 1.52rem);
  line-height: var(--interligne-sous-titre);
  max-width: var(--mesure);
}
.ce-note__titre a {
  color: var(--tourbe);
  text-decoration: none;
  border-bottom: 1px solid var(--vase);
}
.ce-note__titre a:hover { color: var(--laiton); border-bottom-color: var(--laiton); }
.ce-note__eclat {
  margin-top: 0.4rem;
  max-width: var(--mesure);
  color: var(--tourbe-delavee);
}
.ce-note__pied {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}
.ce-note__duree {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}

/* Étiquette de rubrique : toujours un lien vers le hub de la rubrique. */
.ce-etiquette {
  display: inline-block;
  font-family: var(--chiffre-police);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton);
  background: var(--laiton-voile);
  padding: 0.2rem 0.5rem;
  text-decoration: none;
}
.ce-etiquette:hover { background: var(--laiton); color: var(--journal); }

/* Le troisième registre : la cote de lecture, en capitales espacées. */
.ce-cote {
  font-family: var(--texte-police);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* L'idée inattendue : la fenêtre des deux marées, trois cases dont une
   seule est allumée. Jamais un filtre, jamais un menu : une cote imprimée. */
.ce-fenetre {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.ce-fenetre__case {
  display: inline-block;
  border: 1px solid var(--filet-vase);
  background: var(--journal);
  color: var(--tourbe-delavee);
  padding: 0.18rem 0.42rem;
}
.ce-fenetre__case--allumee {
  border-color: var(--laiton);
  color: var(--laiton);
  background: var(--laiton-voile);
}
.ce-fenetre--grande .ce-fenetre__case { padding: 0.4rem 0.8rem; }
.ce-fenetre--grande { gap: 5px; }

/* Variantes serrées : listes de renvois, voisins, sommaires. */
.ce-notes--serre .ce-note { padding-bottom: calc(var(--pas) * 0.6); }
.ce-notes--serre .ce-note__titre { font-size: 1.05rem; }
.ce-renvoi {
  font-family: var(--titre-police);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--laiton-voile);
}
.ce-renvoi:hover { border-bottom-color: var(--laiton); }

/* ---------------------------------------------------------------------
   L'ESTRAN : l'UNIQUE section retournée, pleine largeur, qui déborde des
   marges. Deux fonds sombres dans une même page et la marée n'a plus de
   sens (règle négative 2). À l'intérieur, le laiton est rebindé sur sa
   valeur allumée : une balise éclaire, elle ne peint pas.
   --------------------------------------------------------------------- */
.ce-estran {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gouttiere), calc(50vw - 38rem));
  background: var(--estran);
  color: var(--journal);
  padding-block: 0 calc(var(--pas) * 2.4);
  --laiton: #C49A63;        /* laiton de lanterne allumée, sur l'estran */
  --filet-vase: #6A5E4C;
  --vase: #8A7C68;
  --tourbe-delavee: #D6CBB4;
}
.ce-estran__sommet {
  padding-top: 0;
  margin-inline: calc(50% - 50vw);
}
.ce-estran__titre {
  margin-top: calc(var(--pas) * 1.6);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem);
  max-width: 42ch;
}
.ce-estran__texte { margin-top: 0.8rem; max-width: 58ch; }
.ce-estran__texte a { color: var(--laiton); }
.ce-estran__table {
  margin-top: calc(var(--pas) * 1.4);
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 52rem) {
  .ce-estran__table { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); }
}
.ce-estran__part { border-top: 1px solid var(--filet-vase); padding-top: 0.8rem; }
.ce-estran__part-titre {
  font-size: 1.06rem;
  font-weight: 500;
  max-width: 30ch;
}
.ce-estran__part-titre a { color: var(--journal); text-decoration: none; border-bottom: 1px solid var(--vase); }
.ce-estran__part-titre a:hover { color: var(--laiton); border-bottom-color: var(--laiton); }
.ce-estran__part-texte { margin-top: 0.5rem; font-size: 0.94rem; color: var(--tourbe-delavee); }
.ce-estran__part-mois {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laiton);
}
.ce-estran__image { margin-top: calc(var(--pas) * 1.6); }
.ce-estran__image .ce-vue__boite { position: relative; border-color: var(--filet-vase); }
.ce-estran__image .ce-vue__boite::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;                /* dégradé de lisibilité : du texte se pose dessus */
  background: linear-gradient(to top, rgba(58, 52, 44, .72), transparent);
}
.ce-estran__image .ce-vue__legende { color: var(--tourbe-delavee); border-left-color: var(--laiton); }

/* ---------------------------------------------------------------------
   LE PASSAGE : étroit (60ch), aéré. Les pages du détroit et de l'île,
   deux termes par page : ce que c'est, ce que la page ne tranche pas.
   --------------------------------------------------------------------- */
.ce-passage { padding-block: calc(var(--pas) * 2) calc(var(--pas) * 1.4); }
.ce-passage__interieur { max-width: 60ch; }
.ce-passage__groupe { margin-top: calc(var(--pas) * 1.5); }
.ce-passage__groupe:first-of-type { margin-top: var(--pas); }
.ce-passage__chapeau { font-family: var(--chiffre-police); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tourbe-delavee); }
.ce-passage__titre { margin-top: 0.4rem; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); }
.ce-passage__texte { margin-top: 0.7rem; color: var(--tourbe-delavee); }
.ce-passage__dl {
  margin-top: 1rem;
  border-top: 1px solid var(--filet-vase);
  padding-top: 0.75rem;
}
.ce-passage__dl + .ce-passage__dl { margin-top: 1.4rem; }
.ce-passage__terme {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton);
}
.ce-passage__valeur { margin: 0.25rem 0 0; }
.ce-passage__lien { margin-top: 0.6rem; }

/* ---------------------------------------------------------------------
   LE QUAI : le pied qui prouve. Quatre colonnes, toutes obligatoires.
   --------------------------------------------------------------------- */
.ce-quai {
  position: relative;
  background: var(--journal-pale);
  padding-block: calc(var(--pas) * 1.6) calc(var(--pas) * 1.1);
}
.ce-quai__ligne { padding-top: 0.9rem; }
.ce-quai__interieur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pas);
  align-items: start;
}
@media (min-width: 44rem) {
  .ce-quai__interieur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
}
@media (min-width: 62rem) {
  .ce-quai__interieur { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ce-quai__colonne { min-width: 0; }
.ce-quai__titre {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--vase);
  margin-bottom: 0.75rem;
}
.ce-quai__texte { font-size: 0.92rem; color: var(--tourbe-delavee); }
.ce-quai__texte + .ce-quai__texte { margin-top: 0.7rem; }
.ce-quai__ident {
  font-family: var(--chiffre-police);
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  letter-spacing: 0.04em;
}
.ce-quai__liste { list-style: none; padding: 0; font-size: 0.92rem; }
.ce-quai__liste li + li { margin-top: 0.35rem; }
.ce-quai__fenetre {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--filet-vase);
  font-size: 0.88rem;
  color: var(--tourbe-delavee);
}
.ce-quai__fenetre .ce-cote { color: var(--laiton); }
.ce-sommaire-periodes {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  font-family: var(--chiffre-police);
  font-size: 1rem;
}
.ce-sommaire-periodes a { color: var(--tourbe); text-decoration: none; border-bottom: 2px solid transparent; }
.ce-sommaire-periodes a:hover { color: var(--laiton); border-bottom-color: var(--laiton); }
.ce-quai__mention {
  margin-top: calc(var(--pas) * 1.2);
  padding-top: 0.7rem;
  border-top: 1px solid var(--filet-vase);
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}

/* ---------------------------------------------------------------------
   PAGE DE RUBRIQUE (balisage) : l'entrée d'une section, ses entrées
   classées par mois, son tableau, puis la rubrique suivante.
   --------------------------------------------------------------------- */
.ce-balisage {
  padding-bottom: var(--pas);
  border-bottom: 2px solid var(--tourbe);
}
.ce-balisage__situation {
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-balisage__titre {
  margin-top: 0.3rem;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
}
.ce-balisage__resume { margin-top: 0.85rem; max-width: var(--mesure); color: var(--tourbe-delavee); }
.ce-balisage__mesures { margin-top: var(--pas); }
.ce-sauts { margin-top: var(--pas); }
.ce-sauts__liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ce-sauts__liste a {
  display: inline-block;
  font-family: var(--chiffre-police);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tourbe);
  background: var(--journal-pale);
  border: 1px solid var(--filet-vase);
  padding: 0.28rem 0.65rem;
}
.ce-sauts__liste a:hover { color: var(--laiton); border-color: var(--laiton); }
.ce-recapitulatif { margin-top: calc(var(--pas) * 1.6); }
.ce-recapitulatif__titre { font-size: 1.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--vase); margin-bottom: 0.9rem; }
.ce-suite {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: calc(var(--pas) * 2);
  padding-top: 0.9rem;
  border-top: 3px solid var(--marais);
  font-family: var(--chiffre-police);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ce-suite__amont { color: var(--tourbe-delavee); }
.ce-suite a { text-decoration: none; border-bottom: 2px solid var(--laiton-voile); }
.ce-suite a:hover { border-bottom-color: var(--laiton); }

/* ---------------------------------------------------------------------
   DENSITÉ DE LA PAGE DE RUBRIQUE : une rubrique courte (deux ou trois
   entrées) empile les mêmes blocs que l'accueil sur une colonne plus
   courte, et les transitions entre le balisage, les mois, le tableau et
   la suite y laissaient de grands blancs. Le carnet d'une rubrique est
   donc compilé plus serré : mêmes blocs, mêmes signatures, même pas
   mobile — seul le pas des transitions descend d'un cran, et les
   séparations déjà portées par un filet ou une laisse perdent l'air
   supplémentaire qu'elles n'ont plus lieu de tenir.
   --------------------------------------------------------------------- */
.ce-page--rubrique .ce-releve { padding-block: calc(var(--pas) * 0.55); }
.ce-page--rubrique .ce-balisage { padding-bottom: calc(var(--pas) * 0.35); }
.ce-page--rubrique .ce-balisage__mesures { margin-top: calc(var(--pas) * 0.35); }
.ce-page--rubrique .ce-sauts { margin-top: calc(var(--pas) * 0.35); }
.ce-page--rubrique .ce-saison { margin-top: calc(var(--pas) * 0.3); }
.ce-page--rubrique .ce-saison__plaque { padding: 0.35rem 0 0.3rem; }
.ce-page--rubrique .ce-saison:first-child { margin-top: 0; }
.ce-page--rubrique .ce-saison__bas { margin-top: calc(var(--pas) * 0.15); }
.ce-page--rubrique .ce-quinzaine { margin-top: calc(var(--pas) * 0.4); }
.ce-page--rubrique .ce-notes { padding-top: calc(var(--pas) * 0.3); }
.ce-page--rubrique .ce-note { padding-bottom: calc(var(--pas) * 0.5); }
.ce-page--rubrique .ce-recapitulatif { margin-top: calc(var(--pas) * 0.35); }
.ce-page--rubrique .ce-suite { margin-top: calc(var(--pas) * 0.6); }

/* ---------------------------------------------------------------------
   PAGE D'ARTICLE : le sillage (situation), la borne (titre), la fenêtre
   des deux marées, les trois temps, le corps, la marge, les balises
   internes, les voisins, les renvois, les corrections datées.
   --------------------------------------------------------------------- */
.ce-sillage { margin-bottom: var(--pas); }
.ce-sillage__liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-sillage__liste li + li::before { content: "/"; margin-right: 0.5rem; color: var(--vase); }
.ce-sillage__liste a { color: var(--tourbe-delavee); text-decoration: none; }
.ce-sillage__liste a:hover { color: var(--laiton); }

.ce-borne { max-width: calc(var(--mesure) + 18rem); padding-bottom: 0.2rem; }
.ce-borne__horodate {
  display: block;
  font-family: var(--chiffre-police);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--laiton);
}
.ce-borne__titre { margin-top: 0.5rem; font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem); max-width: 30ch; }
.ce-borne__accroche { margin-top: 0.8rem; font-size: 1.06em; color: var(--tourbe-delavee); max-width: var(--mesure); }
.ce-borne__jalons { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.ce-borne__fenetre { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; }
.ce-borne__fenetre-mot { max-width: 48ch; font-size: 0.94rem; color: var(--tourbe-delavee); }
.ce-borne__regle { margin-top: calc(var(--pas) * 1.1); height: 6px; }

/* Le carnet à trois temps : ce qui tient, ce qui bouge avec la marée,
   ce que la source ne publie pas. */
.ce-trois-temps {
  margin-top: calc(var(--pas) * 1.1);
  max-width: calc(var(--mesure) + 4rem);
  border-top: 1px solid var(--filet-vase);
  padding-top: 0.9rem;
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 52rem) {
  .ce-trois-temps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
}
.ce-trois-temps__paire { min-width: 0; }
.ce-trois-temps__terme {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton);
}
.ce-trois-temps__valeur { margin: 0.35rem 0 0; font-size: 0.96rem; }

/* Le corps : colonne de lecture bornée en ch, colonne de notes en marge. */
.ce-corps { max-width: calc(var(--mesure) + 18rem); padding-top: var(--pas); }
.ce-corps > * + * { margin-top: 1.05em; }
.ce-corps p,
.ce-corps ul,
.ce-corps ol,
.ce-corps dl { max-width: var(--mesure); }
.ce-corps h2 {
  margin-top: calc(var(--pas) * 1.15);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--filet-vase);
}
.ce-corps h3 {
  margin-top: calc(var(--pas) * 0.9);
  font-size: 1.08rem;
  color: var(--tourbe-delavee);
}
.ce-corps a { text-decoration-color: var(--laiton-voile); }

/* Colonne de notes en marge : les chiffres tabulaires et les renvois.
   Petit écran : elle se replie dans le flux, avant le paragraphe qu'elle
   annote, séparée par une laisse. Jamais en bas de page. */
.ce-marge {
  position: relative;
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.85rem 0;
  background: var(--journal-pale);
  border-top: 3px solid var(--marais);
  font-size: 0.88rem;
}
.ce-marge__titre {
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton);
}
.ce-marge__liste { list-style: none; padding: 0; margin-top: 0.5rem; }
.ce-marge__liste li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid var(--filet-vase);
}
.ce-marge__liste li:last-child { border-bottom: 0; }
.ce-marge__mot { color: var(--tourbe-delavee); }
.ce-marge__valeur {
  font-family: var(--chiffre-police);
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  letter-spacing: 0.04em;
  color: var(--tourbe);
  white-space: nowrap;
}
.ce-marge__renvois {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.ce-marge__renvois li { margin-top: 0.3rem; }
.ce-marge__renvois a {
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--filet-vase);
}
.ce-marge__renvois a:hover { border-bottom-color: var(--laiton); }
.ce-marge__bas {
  height: 14px;
  margin-top: 0.7rem;
  background-image: repeating-linear-gradient(90deg, var(--filet-vase) 0 1px, transparent 1px 6px);
  border-top: 1px solid var(--filet-vase);
}
@media (min-width: 56.25rem) {
  .ce-marge { float: right; width: 15rem; margin: 0.2rem 0 1.4rem 1.8rem; }
}

/* Jalons internes de l'article : la balise plantée devant chaque partie. */
.ce-amers-article { margin-top: calc(var(--pas) * 1.2); max-width: calc(var(--mesure) + 4rem); }
.ce-amers-article__jalon {
  position: relative;
  margin: 0 0 0 1.35rem;
  padding-left: 0.65rem;
  --axe-retrait: 1.35rem;
  --axe-x: 0rem;
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}

/* Tableaux : toujours dans un conteneur à défilement propre, chiffres
   tabulaires, et la colonne qui dit ce que la source ne publie pas. */
.ce-tableau-defilant {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--filet-vase);
  background: var(--journal-pale);
  max-width: 100%;
}
.ce-tableau { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.9rem; }
.ce-tableau__legende {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
  border-bottom: 1px solid var(--filet-vase);
}
.ce-tableau th,
.ce-tableau td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--filet-vase); }
.ce-tableau thead th {
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-tableau tbody th {
  font-family: var(--chiffre-police);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ce-tableau td { font-family: var(--chiffre-police); font-variant-numeric: tabular-nums; font-size: 0.86em; }
.ce-tableau td.ce-tableau__mot { font-family: var(--texte-police); font-variant-numeric: normal; font-size: 1em; }
.ce-tableau tbody tr:last-child th,
.ce-tableau tbody tr:last-child td { border-bottom: 0; }

/* Encadré, liste à puces de laiton, corrections datées. */
.ce-encart {
  margin-top: calc(var(--pas) * 1.2);
  max-width: var(--mesure);
  background: var(--journal-pale);
  border: 1px solid var(--filet-vase);
  border-top: 3px solid var(--marais);
  padding: calc(var(--pas) * 0.85);
}
.ce-encart__titre { font-size: 1.05rem; margin-bottom: 0.5rem; }
.ce-liste { padding-left: 1.2rem; }
.ce-liste li { margin-top: 0.4rem; }
.ce-liste li::marker { color: var(--laiton); }
.ce-revision {
  margin-top: calc(var(--pas) * 1.5);
  max-width: var(--mesure);
  border-top: 2px solid var(--vase);
  padding-top: 0.9rem;
}
.ce-revision__titre {
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-revision__liste { list-style: none; padding: 0; margin-top: 0.6rem; font-size: 0.92rem; color: var(--tourbe-delavee); }
.ce-revision__liste li { margin-top: 0.35rem; }
.ce-revision__liste time {
  font-family: var(--chiffre-police);
  font-variant-numeric: tabular-nums;
  color: var(--tourbe);
}

/* Voisins amont et aval dans l'ordre des dates. Troisième emploi de la balise. */
.ce-voisins {
  display: grid;
  gap: 2px;
  margin-top: calc(var(--pas) * 1.6);
  background: var(--filet-vase);
  border-block: 2px solid var(--filet-vase);
}
@media (min-width: 44rem) { .ce-voisins { grid-template-columns: 1fr 1fr; } }
.ce-voisins__lien {
  position: relative;
  display: block;
  background: var(--journal-pale);
  padding: calc(var(--pas) * 0.75) calc(var(--pas) * 0.75) calc(var(--pas) * 0.75) 1.9rem;
  text-decoration: none;
  color: var(--tourbe);
  --axe-retrait: 0rem;
  --axe-x: 1.1rem;
}
.ce-voisins__lien:hover { background: var(--laiton-voile); }
.ce-voisins__sens {
  display: block;
  font-family: var(--chiffre-police);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tourbe-delavee);
}
.ce-voisins__horodate {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--chiffre-police);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  color: var(--laiton);
}
.ce-voisins__titre { display: block; margin-top: 0.3rem; font-family: var(--titre-police); font-size: 1.02rem; font-weight: 600; }
.ce-voisins__aval { text-align: left; }
@media (min-width: 44rem) { .ce-voisins__aval { text-align: right; padding-right: 0.75rem; } }

.ce-renvois { margin-top: calc(var(--pas) * 1.6); }
.ce-renvois__titre { font-size: 1.15rem; padding-bottom: 0.4rem; border-bottom: 3px solid var(--marais); }
.ce-renvois__laisse { margin-top: calc(var(--pas) * 0.8); }

/* Service : about, contact, legal. */
.ce-service { max-width: var(--mesure); padding-block: var(--pas); }
.ce-service__titre { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); }
.ce-service__corps { margin-top: 1rem; }
.ce-service__corps > * + * { margin-top: 1.05em; }
.ce-service__corps h2 { margin-top: calc(var(--pas) * 1.1); font-size: 1.2rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--filet-vase); }
.ce-service__corps h3 { margin-top: calc(var(--pas) * 0.9); font-size: 1.05rem; color: var(--tourbe-delavee); }

/* ---------------------------------------------------------------------
   PETIT ÉCRAN : la gouttière de date tombe à zéro, la date remonte
   au-dessus du titre, l'axe se colle au bord, les trois variables de
   géométrie sont recalculées ensemble. Le losange, le double filet, la
   graduation, la lettrine, les chiffres tabulaires et la fenêtre tiennent
   à toute largeur.
   --------------------------------------------------------------------- */
@media (max-width: 46rem) {
  :root {
    --axe-position: 1.15rem;
    --axe-retrait: 1.75rem;    /* les trois se règlent ensemble */
    --amer-taille: 9px;
  }
  .ce-note__horodate {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 0.3rem;
  }
  .ce-note__titre { font-size: 1.1rem; }
  .ce-saison__suite { padding-left: 0; }
  .ce-detail { display: none; }         /* l'objet isolé disparaît de la frise */
  .ce-paire { grid-template-columns: 1fr; gap: 0.9rem; }
  .ce-paire::before { display: none; }
  .ce-estran { padding-inline: var(--gouttiere); padding-block: 0 calc(var(--pas) * 1.8); }
  .ce-balisage__resume { max-width: none; }
  .ce-suite { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 56.24rem) {
  .ce-marge { float: none; width: auto; margin: 0 0 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}