/* =========================================================================
   CÂLIN BOUT'CHOU — système « douceur » design, préfixe cb-
   Vocabulaire de la chambre d'enfant et du rituel du soir, en français :
   berceau (en-tête), couverture (héros accueil façon couverture de
   magazine), chapitre (section numérotée), histoire (carte illustrée),
   journal (flux daté), ouverture (tête d'article), planche (image pleine
   largeur), colonne (lecture 62ch), doudou (astuce de parent), résumé,
   comptine (citation), suite (à lire ensuite), ornement (séparateur SVG),
   socle (pied).
   Palette : crème chaud + sauge + pêche + encre chaude, un accent
   signature argile. Aucune requête externe, aucun dégradé criard,
   dark-mode automatique, coins arrondis mesurés (8px).
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · la chambre en douceur ------------------------------ */
  --creme:          #faf5ea;  /* fond de page, papier chaud                  */
  --creme-profond:  #f1e8d7;  /* réserves, sections alternées                */
  --creme-voile:    #fdf9f0;  /* encadrés, lignes paires, le plus clair      */
  --encre:          #37302a;  /* encre chaude : texte principal              */
  --encre-nuit:     #2b241e;  /* fond nuit : socle, couverture               */
  --encre-douce:    #71655a;  /* légendes, méta, chapôs                      */
  --sauge:          #8fa58c;  /* sauge décorative : fonds doux, ornements    */
  --sauge-profond:  #4d6a52;  /* sauge texte : titres de rubrique, filets    */
  --sauge-pale:     #eef2ea;  /* fond des encadrés « en résumé »             */
  --argile:         #a5552f;  /* ACCENT SIGNATURE : liens, kickers, drop-cap */
  --argile-vif:     #d98a5f;  /* argile sur fond nuit                        */
  --peche:          #f6d9bd;  /* pêche douce : fonds d'encadrés doudou       */
  --peche-pale:     #fdf1e3;  /* fond doudou très léger                      */
  --miel:           #a07a3c;  /* second ton discret : ornements, indications */
  --filet:          #e2d7c2;  /* hairline sur papier                         */
  --filet-nuit:     #453b31;  /* hairline sur nuit                           */

  /* Dark mode : la même chambre à la veilleuse. */
  --nuit-papier:    #221c16;
  --nuit-creux:     #2b241d;
  --nuit-texte:     #ede3d1;
  --nuit-doux:      #b5a892;

  /* ---- 2. TYPE · piles système chaleureuses, rien de fetched ------------ */
  --police-titre: "Charter", "Bitstream Charter", "Iowan Old Style", "Superclarendon", Georgia, "Times New Roman", serif;
  --police-texte: "Avenir Next", "Seravek", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --titre-graisse: 600;
  --caps-interlettrage: 0.18em;

  --corps-taille: clamp(1.02rem, 0.97rem + 0.22vw, 1.12rem);
  --corps-interligne: 1.66;
  --echelle-h1: clamp(2.2rem, 1.2rem + 3.6vw, 4.15rem);
  --echelle-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.28rem);
  --echelle-h3: clamp(1.14rem, 1.03rem + 0.55vw, 1.44rem);

  /* ---- 3. RYTHME --------------------------------------------------------- */
  --mesure:        62ch;
  --mesure-large:  1360px;
  --marge-page:    clamp(1.1rem, 4vw, 4rem);
  --gouttiere:     clamp(0.9rem, 2.2vw, 2rem);
  --souffle:       clamp(2.4rem, 5.5vw, 5.2rem);
  --decalage:      clamp(1.2rem, 3vw, 3rem);

  /* ---- 4. DETAILS · arrondis mesurés, transitions courtes ---------------- */
  --angle:        8px;
  --angle-fin:    6px;
  --filet-fin:    1px solid var(--filet);
  --vitesse:      150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --creme:         var(--nuit-papier);
    --creme-profond: var(--nuit-creux);
    --creme-voile:   #312a22;
    --encre:         var(--nuit-texte);
    --encre-douce:   var(--nuit-doux);
    --sauge:         #9db39a;
    --sauge-profond: #a9c2a4;
    --sauge-pale:    #2d3529;
    --argile:        var(--argile-vif);
    --argile-vif:    #e8a37b;
    --peche:         #4d3d30;
    --peche-pale:    #3a2f25;
    --miel:          #c9a55c;
    --filet:         #443a2e;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.cb-glyphe { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--echelle-h1); }
h2 { font-size: var(--echelle-h2); }
h3 { font-size: var(--echelle-h3); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--argile);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--vitesse);
}
a:hover { color: var(--sauge-profond); }
:focus-visible {
  outline: 2px solid var(--argile);
  outline-offset: 3px;
  border-radius: 2px;
}
hr { border: 0; border-top: var(--filet-fin); margin: var(--souffle) 0; }

::selection { background: var(--sauge); color: #23291f; }

.cb-journal, .cb-indications, .cb-jour, .cb-chapitre__numero,
.cb-histoire__numero, .cb-couverture__parution, .cb-doudou__titre,
.cb-resume__titre, .cb-defile {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

.cb-evite {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre-nuit); color: var(--creme-voile);
  padding: 0.7rem 1.15rem; z-index: 60;
  border-radius: 0 0 var(--angle-fin) 0;
}
.cb-evite:focus { left: 0.6rem; top: 0.6rem; }

.cb-promenade {
  width: 100%;
  max-width: var(--mesure-large);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}
.cb-scene { display: block; }

/* --- Le berceau (en-tête) : papier clair, wordmark serif, filet double --- */
.cb-berceau {
  background: var(--creme-voile);
  border-bottom: 3px double var(--filet);
  padding-block: clamp(0.8rem, 1.7vw, 1.2rem);
}
.cb-berceau__rang {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.cb-marque {
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  color: var(--encre);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.cb-marque b { font-weight: 600; color: var(--argile); }
.cb-marque:hover { color: var(--sauge-profond); }
.cb-marque span {
  display: block;
  font-family: var(--police-texte);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--sauge-profond);
  margin-top: 0.3rem;
}
.cb-navigation ul {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  list-style: none; margin: 0; padding: 0;
}
.cb-navigation a {
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-block: 0.25rem;
  transition: color var(--vitesse);
}
.cb-navigation a:hover { color: var(--argile); }

/* --- Le fil (fil d'Ariane) ------------------------------------------------ */
.cb-fil { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.cb-fil ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem;
  color: var(--encre-douce);
}
.cb-fil li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--sauge-profond);
}
.cb-fil a { color: var(--encre-douce); }
.cb-fil a:hover { color: var(--argile); }
.cb-fil [aria-current="page"] { color: var(--encre); font-weight: 600; }

/* =========================================================================
   LA COUVERTURE · héros façon couverture de magazine parental :
   composition typographique (kicker petites caps, grand titre serif,
   deck, ligne de parution à filet double avec numéro de dossier).
   Bande courte : la grille de rubriques commence avant 700px à 1456x800.
   ========================================================================= */

.cb-couverture { position: relative; isolation: isolate; }
.cb-couverture__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Le voile est une COULEUR EN DUR par doctrine, jamais une var(). */
.cb-couverture__voile {
  position: absolute; inset: 0;
  background: rgba(43, 36, 30, 0.8);
  z-index: -1;
}
@media (prefers-color-scheme: dark) {
  .cb-couverture__voile { background: rgba(20, 16, 12, 0.87); }
}
.cb-couverture__texte {
  padding-block: clamp(2.7rem, 6vw, 4.4rem) clamp(2rem, 4.6vw, 3.3rem);
  max-width: 62rem;
  color: var(--nuit-texte);
}
.cb-couverture__kicker {
  display: flex; align-items: center;
  gap: 0.8rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--argile-vif);
  margin: 0 0 1rem;
}
.cb-couverture__kicker::after {
  content: "";
  flex: 1;
  max-width: 8.5rem;
  border-top: 1px solid currentColor;
  opacity: 0.75;
}
.cb-couverture__texte h1 {
  color: #faf5ea;
  max-width: 22ch;
}
.cb-couverture__texte > p {
  font-size: clamp(1.02rem, 0.95rem + 0.38vw, 1.2rem);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--nuit-texte);
  margin: 1.05rem 0 0;
}
/* Ligne de parution : filet double + numéro de dossier, la signature. */
.cb-couverture__parution {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.15rem;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 3px double rgba(237, 227, 209, 0.55);
  font-size: 0.75rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--argile-vif);
}
.cb-couverture__parution .cb-glyphe { color: var(--miel); }
.cb-couverture__parution em {
  font-style: normal;
  color: var(--nuit-texte);
  letter-spacing: 0.08em;
}

/* =========================================================================
   LES CHAPITRES · sections numérotées 01-06
   ========================================================================= */

.cb-chapitre { padding-block: clamp(1.9rem, 4.4vw, 3.5rem); }
.cb-chapitre--creux { background: var(--creme-profond); }
.cb-chapitre__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--filet-fin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.cb-chapitre__numero {
  font-family: var(--police-texte);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--argile);
  margin-right: 0.7rem;
}
.cb-chapitre__titre { font-size: var(--echelle-h2); }
.cb-chapitre__note {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.92rem;
  max-width: 44ch;
}

/* L'ornement : nuage et étoiles entre les grandes sections. */
.cb-ornement {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.3rem, 1vw, 0.8rem);
  color: var(--sauge);
}

/* La plaque : surtitre petites caps argile. */
.cb-plaque {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--argile);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   LES HISTOIRES · mosaïque asymétrique douce de cartes illustrées
   ========================================================================= */

.cb-histoires {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gouttiere);
  list-style: none; margin: 0; padding: 0;
}
.cb-histoire { margin: 0; }
.cb-histoire--plein  { grid-column: span 6; }
.cb-histoire--large  { grid-column: span 4; }
.cb-histoire--moyen  { grid-column: span 3; }
.cb-histoire--petit  { grid-column: span 2; }
.cb-histoire--decale  { transform: translateY(var(--decalage)); }
.cb-histoire--decale2 { transform: translateY(calc(var(--decalage) * 0.5)); }
.cb-histoires--dense { padding-bottom: var(--decalage); }

.cb-histoire__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--angle);
  border: var(--filet-fin);
  background: var(--creme-profond);
}
.cb-histoire__cadre::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(43, 36, 30, 0);
  transition: background var(--vitesse);
}
.cb-histoire:hover .cb-histoire__cadre::after,
.cb-histoire:focus-within .cb-histoire__cadre::after {
  background: rgba(43, 36, 30, 0.16);
}
.cb-histoire__cadre--pano     { aspect-ratio: 21 / 9; }
.cb-histoire__cadre--paysage  { aspect-ratio: 4 / 3; }
.cb-histoire__cadre--carre    { aspect-ratio: 1 / 1; }
.cb-histoire__cadre--portrait { aspect-ratio: 3 / 4; }
.cb-histoire__vue {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--angle);
  transition: transform 320ms ease;
}
.cb-histoire:hover .cb-histoire__vue { transform: scale(1.02); }

.cb-histoire__legende { padding-top: 0.7rem; }
.cb-histoire__sur-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--sauge-profond);
  margin: 0 0 0.3rem;
}
.cb-histoire__numero {
  font-weight: 600;
  color: var(--miel);
  letter-spacing: 0.22em;
}
.cb-histoire__titre { margin: 0 0 0.3rem; font-size: var(--echelle-h3); }
.cb-histoire__lien {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--argile), var(--argile));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--vitesse), color var(--vitesse);
}
.cb-histoire__lien:hover { color: var(--argile); background-size: 100% 2px; }
.cb-histoire__mot {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cb-histoire__indication {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--miel);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}

/* =========================================================================
   LE JOURNAL · flux daté de l'accueil, deux colonnes douces
   ========================================================================= */

.cb-journal {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--gouttiere) * 1.5);
}
.cb-entree {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.05rem;
  padding-block: 1.1rem;
  border-bottom: var(--filet-fin);
  margin: 0;
}
.cb-journal .cb-entree:nth-last-child(-n+2) { border-bottom: 0; }
.cb-entree__vue {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--angle-fin);
  border: var(--filet-fin);
}
.cb-jour {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--sauge-profond);
}
.cb-jour b { font-weight: 600; color: var(--argile); }
.cb-entree h3 { margin: 0 0 0.3rem; }
.cb-entree h3 a { color: var(--encre); text-decoration: none; }
.cb-entree h3 a:hover { color: var(--argile); text-decoration: underline; }
.cb-entree p { margin: 0; color: var(--encre-douce); font-size: 0.93rem; }

/* =========================================================================
   ARTICLES · ouverture, planche, colonne
   ========================================================================= */

.cb-ouverture {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 56rem;
}
.cb-ouverture__chapo {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--encre-douce);
  max-width: 58ch;
  margin: 0.9rem 0 0;
}
.cb-indications {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-size: 0.81rem;
  color: var(--encre-douce);
  border-top: var(--filet-fin);
  padding-top: 0.8rem;
}
.cb-indications a { color: var(--encre-douce); }
.cb-indications a:hover { color: var(--argile); }

.cb-planche { margin: 0; }
.cb-planche__vue {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--angle);
  border: var(--filet-fin);
}
.cb-planche figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.cb-colonne {
  max-width: var(--mesure);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.cb-colonne > * + * { margin-top: 0.9em; }
.cb-colonne h2 {
  margin-top: 1.7em;
  padding-bottom: 0.26rem;
  border-bottom: var(--filet-fin);
}
.cb-colonne h3 { margin-top: 1.3em; }
.cb-colonne ul, .cb-colonne ol { padding-left: 1.4rem; }
.cb-colonne li + li { margin-top: 0.45em; }
.cb-colonne strong { color: var(--sauge-profond); }
@media (prefers-color-scheme: dark) {
  .cb-colonne strong { color: #c9dcc4; }
}

/* Drop-cap douce : première lettre du premier paragraphe, argile, serif. */
.cb-colonne > p:first-of-type::first-letter {
  font-family: var(--police-titre);
  font-weight: 600;
  float: left;
  font-size: 2.9em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--argile);
}

/* La comptine : citation douce, filet sauge. */
.cb-comptine {
  margin: 1.6em 0;
  padding: 0.25rem 0 0.25rem 1.4rem;
  border-left: 3px solid var(--sauge);
  font-family: var(--police-titre);
  font-size: 1.14em;
  color: var(--encre);
}

/* Le doudou : encadré « astuce de parent », pêche pâle, filet argile. */
.cb-doudou {
  margin: 1.7em 0;
  background: var(--peche-pale);
  border: var(--filet-fin);
  border-left: 3px solid var(--argile);
  border-radius: var(--angle);
  padding: 1rem 1.25rem 1.1rem;
  font-size: 0.96em;
}
.cb-doudou__titre {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--argile);
  margin: 0 0 0.5rem;
}
.cb-doudou__titre .cb-glyphe { color: var(--miel); }
.cb-doudou p { margin: 0; }
.cb-doudou p + p { margin-top: 0.5rem; }
.cb-doudou strong { color: var(--argile); }

/* Le résumé : encadré « en résumé », sauge pâle, coins arrondis. */
.cb-resume {
  margin: 1.7em 0;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge);
  border-radius: var(--angle);
  padding: 1rem 1.25rem 1.1rem;
  font-size: 0.96em;
}
.cb-resume__titre {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--sauge-profond);
  margin: 0 0 0.5rem;
}
.cb-resume__titre .cb-glyphe { color: var(--sauge-profond); }
.cb-resume ul { margin: 0; padding-left: 1.2rem; }
.cb-resume li + li { margin-top: 0.35em; }
.cb-resume strong { color: var(--sauge-profond); }

/* Le tableau repère, défilant, façon carnet de mesure. */
.cb-defile {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--filet-fin);
  border-radius: var(--angle);
}
.cb-defile table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.92em;
}
.cb-defile th, .cb-defile td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.cb-defile th {
  background: var(--sauge-pale);
  color: var(--sauge-profond);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--police-texte);
}
.cb-defile tr:last-child td { border-bottom: 0; }
.cb-defile tbody tr:nth-child(even) { background: var(--creme-voile); }

/* À lire ensuite. */
.cb-suite {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--filet);
}
.cb-suite h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.cb-suite ul { list-style: none; margin: 0; padding: 0; }
.cb-suite li { padding: 0.3rem 0; }
.cb-suite li::before {
  content: "·";
  color: var(--argile);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   LE SOCLE (pied, fond nuit chaude)
   ========================================================================= */

.cb-socle {
  margin-top: var(--souffle);
  background: var(--encre-nuit);
  color: var(--nuit-texte);
}
.cb-socle__rang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gouttiere) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.cb-socle h2 {
  font-family: var(--police-texte);
  font-size: 0.77rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--argile-vif);
  margin-bottom: 0.7rem;
}
.cb-socle ul { list-style: none; margin: 0; padding: 0; }
.cb-socle li { padding-block: 0.22rem; }
.cb-socle a { color: var(--nuit-doux); text-decoration: none; }
.cb-socle a:hover { color: var(--argile-vif); text-decoration: underline; }
.cb-socle__bas {
  border-top: 1px solid var(--filet-nuit);
  padding-block: 1.05rem;
  font-size: 0.79rem;
  color: var(--nuit-doux);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.cb-socle__bas .cb-glyphe { color: var(--miel); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .cb-histoire--large  { grid-column: span 6; }
  .cb-histoire--moyen  { grid-column: span 3; }
  .cb-histoire--petit  { grid-column: span 3; }
  .cb-histoire--decale, .cb-histoire--decale2 { transform: none; }
  .cb-histoires--dense { padding-bottom: 0; }
}

@media (max-width: 760px) {
  .cb-histoires { grid-template-columns: repeat(2, 1fr); }
  .cb-histoire--large, .cb-histoire--moyen, .cb-histoire--petit { grid-column: span 2; }
  .cb-journal { grid-template-columns: 1fr; }
  .cb-entree { grid-template-columns: 118px 1fr; }
  .cb-journal .cb-entree:nth-last-child(-n+2) { border-bottom: var(--filet-fin); }
  .cb-journal .cb-entree:last-child { border-bottom: 0; }
  .cb-socle__rang { grid-template-columns: 1fr; }
  .cb-couverture__texte { padding-block: 2.4rem 1.9rem; }
  .cb-chapitre__tete { flex-direction: column; gap: 0.3rem; }
  .cb-colonne > p:first-of-type::first-letter {
    font-size: 2.55em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
  }
}

@media (max-width: 480px) {
  .cb-entree { grid-template-columns: 1fr; }
  .cb-navigation ul { gap: 0.35rem 0.95rem; }
}

/* Motion courtesy. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .cb-histoire:hover .cb-histoire__vue { transform: none; }
}

/* Print : un carnet de parent sur papier. */
@media print {
  .cb-berceau, .cb-socle, .cb-evite, .cb-fil, .cb-ornement { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cb-colonne { max-width: none; }
  .cb-doudou, .cb-resume { background: #fff; color: #000; border: 1pt solid #000; }
  .cb-couverture__voile { background: rgba(43, 36, 30, 0.92); }
  .cb-colonne > p:first-of-type::first-letter { color: #000; }
}