/* =====================================================================
   New Creative, feuille de style unique.
   Parti pris : papier d'atelier. Angles vifs (aucun arrondi), filets
   d'un cheveu, chiffres en ornement, respiration large.
   Aucune ressource externe : polices systeme, motifs en CSS pur.
   ===================================================================== */

/* ---------- 1. Jetons ------------------------------------------------ */

:root {
  /* matieres */
  --craie:         #fbf6ee;
  --craie-creuse:  #f5ede1;
  --grege:         #ece0cf;
  --sapin:         #1e2a24;
  --sapin-doux:    #2c5347;
  --gris-plume:    #5c6660;
  --argile:        #a94b27;
  --argile-vif:    #c4613a;
  --argile-voile:  #f0dccf;
  --celadon:       #dae7de;
  --filet:         #ded2c2;
  --filet-pale:    #ebe1d3;

  /* encres appliquees */
  --fond:          var(--craie);
  --fond-creux:    var(--craie-creuse);
  --texte:         var(--sapin);
  --texte-faible:  var(--gris-plume);
  --lien:          var(--argile);
  --lien-actif:    #8c3c1e;
  --trait:         var(--filet);
  --trait-pale:    var(--filet-pale);
  --contraste:     var(--sapin);
  --sur-contraste: #f7f2e9;

  /* caracteres */
  --serif-titre: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Hoefler Text", Constantia, Georgia, serif;
  --sans-appui: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", Ubuntu, "Noto Sans", system-ui, sans-serif;

  /* mesures */
  --laize: 71rem;
  --laize-large: 84rem;
  --justification: 39rem;
  --marge-laterale: clamp(1.15rem, 5vw, 3.5rem);

  /* rythme vertical */
  --r1: 0.4rem;
  --r2: 0.75rem;
  --r3: 1.2rem;
  --r4: 1.9rem;
  --r5: clamp(2.4rem, 5vw, 3.6rem);
  --r6: clamp(3.4rem, 8vw, 5.8rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:          #141a17;
    --fond-creux:    #1b2320;
    --texte:         #ede6da;
    --texte-faible:  #a6b0aa;
    --lien:          #e28b5f;
    --lien-actif:    #f0a97f;
    --trait:         #2e3833;
    --trait-pale:    #26302b;
    --contraste:     #0e1211;
    --sur-contraste: #ede6da;
    --craie:         #141a17;
    --craie-creuse:  #1b2320;
    --grege:         #253029;
    --celadon:       #21332c;
    --argile-voile:  #33231b;
    --sapin-doux:    #9ec9b6;
  }
}

/* ---------- 2. Socle ------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--serif-titre);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* grain de papier, motif CSS pur */
  background-image:
    repeating-linear-gradient(90deg, rgba(94, 78, 58, .028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(94, 78, 58, .022) 0 1px, transparent 1px 5px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--serif-titre);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.1;
  margin: 0;
  color: var(--texte);
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 1.3rem + 3.4vw, 3.9rem); margin-bottom: var(--r3); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.14; }
h3 { font-size: clamp(1.16rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.24; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 var(--r3); }

a {
  color: var(--lien);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--lien) 42%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--lien-actif); text-decoration-color: currentColor; }

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

ul, ol { margin: 0 0 var(--r3); padding-left: 1.25em; }
li { margin-bottom: var(--r1); }

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: var(--r5) 0;
}

::selection { background: var(--argile-voile); color: var(--sapin); }

.acces-direct {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--contraste);
  color: var(--sur-contraste);
  padding: .7rem 1.1rem;
  font-family: var(--sans-appui);
  font-size: .85rem;
}
.acces-direct:focus { left: 0; }

/* ---------- 3. Gabarit de page --------------------------------------- */

.plateau {
  width: 100%;
  max-width: var(--laize);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}
.plateau--large { max-width: var(--laize-large); }

.colonne {
  max-width: var(--justification);
}

.bloc { margin-block: var(--r6); }
.bloc--serre { margin-block: var(--r5); }

/* ---------- 4. Bandeau et rubriquier --------------------------------- */

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--fond);
}

.bandeau-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
  padding-block: var(--r3);
}

.enseigne {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--texte);
}
.enseigne:hover { color: var(--texte); }

.enseigne-sigle {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--sapin-doux);
  color: #f7f2e9;
  font-family: var(--serif-titre);
  font-size: 1rem;
  letter-spacing: .04em;
  flex: none;
}
@media (prefers-color-scheme: dark) {
  .enseigne-sigle { color: #10201a; }
}

.enseigne-nom {
  display: block;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.enseigne-devise {
  display: block;
  font-family: var(--sans-appui);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-top: .18rem;
}

.rubriquier {
  font-family: var(--sans-appui);
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.rubriquier::-webkit-scrollbar { display: none; }
/* le rubriquier defile au doigt sur petit ecran : on signale la suite par un fondu */
@media (max-width: 59.99rem) {
  .rubriquier {
    flex: 1 1 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  }
}

.rubriquier ul {
  display: flex;
  gap: clamp(.9rem, 2.4vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.rubriquier li { margin: 0; }
.rubriquier a {
  color: var(--texte-faible);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.rubriquier a:hover { color: var(--texte); border-bottom-color: var(--trait); }
.rubriquier a[aria-current] { color: var(--texte); border-bottom-color: var(--argile-vif); }

/* ---------- 5. Etiquettes typographiques ------------------------------ */

.surtitre {
  display: block;
  font-family: var(--sans-appui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--argile);
  margin-bottom: var(--r2);
}

.chapo {
  font-size: clamp(1.12rem, 1.03rem + 0.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--texte-faible);
  max-width: 34em;
}

.signature-temps {
  font-family: var(--sans-appui);
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--texte-faible);
  text-transform: uppercase;
}
.signature-temps span + span::before {
  content: "\00b7";
  margin-inline: .5rem;
  color: var(--trait);
}

.titre-section {
  display: flex;
  align-items: baseline;
  gap: var(--r3);
  margin-bottom: var(--r4);
}
.titre-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trait);
}

.marque-page {
  display: inline-block;
  font-family: var(--sans-appui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sapin-doux);
  background: var(--celadon);
  padding: .3rem .6rem;
}

.fil-ariane {
  font-family: var(--sans-appui);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--texte-faible);
  padding-block: var(--r3) 0;
}
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fil-ariane li + li::before {
  content: "/";
  margin-right: .5rem;
  color: var(--trait);
}
.fil-ariane a { color: var(--texte-faible); text-decoration-color: var(--trait); }
.fil-ariane a:hover { color: var(--lien); }

/* ---------- 6. Cadres d'image (jamais de bloc gris) ------------------- */

.cadre {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--grege);
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #f0e2d2 0%, #e0c9b3 52%, #c9a488 100%);
  background-size: auto, cover;
}
.cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: var(--sans-appui);
  font-size: .78rem;
  line-height: 1.4;
  color: var(--sapin);
  padding: .6rem;
}

.cadre--argile {
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 10px),
    radial-gradient(120% 100% at 14% 10%, rgba(196, 97, 58, .55), transparent 60%),
    linear-gradient(155deg, #eedac9 0%, #dfb99d 48%, #b9754f 100%);
}
.cadre--celadon {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 11px),
    radial-gradient(110% 100% at 82% 12%, rgba(44, 83, 71, .42), transparent 62%),
    linear-gradient(150deg, #e6efe7 0%, #c9ddd0 50%, #8fae9d 100%);
}
.cadre--grege {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 8px),
    linear-gradient(200deg, #f4ece0 0%, #e3d4bf 55%, #c8b498 100%);
}
.cadre--haut { aspect-ratio: 4 / 5; }
.cadre--panoramique { aspect-ratio: 16 / 9; }

@media (min-width: 60rem) {
  .cadre--panoramique { aspect-ratio: 21 / 9; }
}

.legende {
  display: block;
  font-family: var(--sans-appui);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--texte-faible);
  margin-top: var(--r2);
  padding-left: .7rem;
  border-left: 2px solid var(--argile-vif);
}

/* ---------- 7. La une ------------------------------------------------- */

.une { padding-top: var(--r4); }
.une .cadre { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .une .cadre { aspect-ratio: 16 / 9; } }
@media (min-width: 60rem) { .une .cadre { aspect-ratio: 21 / 9; } }

.une-carte {
  position: relative;
  z-index: 2;
  background: var(--fond);
  border-top: 3px solid var(--argile-vif);
  padding: var(--r4) var(--r4) var(--r3);
  margin-top: -2.6rem;
  margin-inline: 0;
  max-width: 46rem;
}

.une-carte h1 { margin-bottom: var(--r3); }

@media (min-width: 60rem) {
  .une-carte {
    margin-top: -5.5rem;
    margin-left: clamp(0rem, 4vw, 3.5rem);
    padding: var(--r5) var(--r5) var(--r4);
  }
}

.bouton {
  display: inline-block;
  font-family: var(--sans-appui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.5rem;
  border: 1px solid var(--contraste);
  background: var(--contraste);
  color: var(--sur-contraste);
  transition: background .15s ease, color .15s ease;
}
.bouton:hover { background: transparent; color: var(--texte); }

.bouton--file {
  background: transparent;
  color: var(--texte);
  border-color: var(--trait);
}
.bouton--file:hover { border-color: var(--contraste); background: var(--contraste); color: var(--sur-contraste); }

/* ---------- 8. Sommaire des rubriques --------------------------------- */

.sommaire {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--trait);
}

@media (min-width: 46rem) {
  .sommaire { grid-template-columns: repeat(2, 1fr); column-gap: var(--r5); }
}

.sommaire-entree {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: var(--r3);
  padding-block: var(--r4);
  border-bottom: 1px solid var(--trait);
  align-items: start;
}

.numero {
  font-family: var(--serif-titre);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--argile-vif);
  font-variant-numeric: lining-nums;
  padding-top: .1rem;
}

.sommaire-entree h3 { margin-bottom: var(--r2); }
.sommaire-entree h3 a { color: var(--texte); text-decoration: none; }
.sommaire-entree h3 a:hover { color: var(--lien); text-decoration: underline; text-decoration-color: currentColor; }
.sommaire-entree p { font-size: .98rem; color: var(--texte-faible); margin: 0; }

/* ---------- 9. Cartouches (cartes article) ---------------------------- */

.grille-cartouches {
  display: grid;
  gap: var(--r5) var(--r4);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .grille-cartouches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grille-cartouches--trois { grid-template-columns: repeat(3, 1fr); } }

.cartouche { display: flex; flex-direction: column; align-items: flex-start; }
.cartouche > * { width: 100%; }
.cartouche .marque-page { width: auto; margin-bottom: var(--r2); }
.cartouche .cadre { margin-bottom: var(--r3); }
.cartouche h3 { margin-bottom: var(--r2); }
.cartouche h3 a { color: var(--texte); text-decoration: none; }
.cartouche h3 a:hover { color: var(--lien); text-decoration: underline; text-decoration-color: currentColor; }
.cartouche p {
  font-size: .97rem;
  color: var(--texte-faible);
  margin-bottom: var(--r2);
}
.cartouche .signature-temps { margin-top: auto; }

/* ---------- 10. Pan sombre (atelier du mois) -------------------------- */

.pan-sombre {
  background: var(--sapin-doux);
  color: #f2ece1;
}
@media (prefers-color-scheme: dark) {
  .pan-sombre { background: #1f2f29; color: #e8e2d6; border-top: 1px solid #31423b; border-bottom: 1px solid #31423b; }
}

.pan-sombre h2, .pan-sombre h3 { color: inherit; }
.duo h2, .duo h3 { margin-bottom: var(--r3); }
.pan-sombre .surtitre { color: #e9b892; }
.pan-sombre .chapo { color: rgba(242, 236, 225, .82); }
.pan-sombre a { color: #f4d9c4; }
.pan-sombre a:hover { color: #fff; }
.pan-sombre .bouton {
  background: #f2ece1;
  color: #1f2f29;
  border-color: #f2ece1;
}
.pan-sombre .bouton:hover { background: transparent; color: #f2ece1; }

.duo {
  display: grid;
  gap: var(--r5);
  align-items: center;
  padding-block: var(--r6);
}
@media (min-width: 56rem) {
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
  .duo--image-gauche > .cadre { order: -1; }
}

/* ---------- 11. Carnet d'idees ---------------------------------------- */

.carnet {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 52rem) {
  .carnet { columns: 2; column-gap: var(--r5); border-top: 0; }
  .carnet > li { break-inside: avoid; border-top: 1px solid var(--trait); }
}

.carnet > li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--r2);
  padding-block: var(--r3);
  border-bottom: 1px solid var(--trait);
  margin: 0;
}
@media (min-width: 52rem) { .carnet > li { border-bottom: 0; } }

.carnet b {
  font-family: var(--sans-appui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--argile);
  padding-top: .35rem;
}
.carnet p { margin: 0; font-size: .97rem; color: var(--texte-faible); }
.carnet a { font-family: var(--serif-titre); font-size: 1.05rem; }

/* ---------- 12. Encadres et corps d'article --------------------------- */

.encadre {
  background: var(--fond-creux);
  border-left: 3px solid var(--argile-vif);
  padding: var(--r4);
  margin-block: var(--r5);
}
.encadre > :last-child { margin-bottom: 0; }
.encadre h2, .encadre h3 { font-size: 1.1rem; margin-bottom: var(--r2); }

.encadre--celadon {
  background: var(--celadon);
  border-left-color: var(--sapin-doux);
}
.encadre--large { max-width: 52rem; }
.encadre h2.encadre-enseigne {
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  margin-bottom: var(--r3);
}
.encadre--large > p:last-child { margin-bottom: 0; }

.encadre-titre {
  display: block;
  font-family: var(--sans-appui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--argile);
  margin-bottom: var(--r2);
}

.feuillet { max-width: var(--justification); }
.feuillet h2 { margin-top: var(--r5); margin-bottom: var(--r3); }
.feuillet h3 { margin-top: var(--r4); margin-bottom: var(--r2); }
.feuillet ul, .feuillet ol { padding-left: 1.15em; }
.feuillet li { margin-bottom: var(--r2); }
.feuillet > .cadre, .feuillet > figure { margin-block: var(--r5); }
.feuillet figure { margin: 0; }

.feuillet .exergue {
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--sapin-doux);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding-block: var(--r3);
  margin-block: var(--r5);
}

.ancres {
  font-family: var(--sans-appui);
  font-size: .92rem;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding-block: var(--r3);
  margin-block: var(--r5);
}
.ancres ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ancre;
}
.ancres li { margin-bottom: .45rem; counter-increment: ancre; }
.ancres li::before {
  content: counter(ancre, decimal-leading-zero);
  color: var(--argile);
  font-size: .76rem;
  letter-spacing: .08em;
  margin-right: .7rem;
}
.ancres a { color: var(--texte); text-decoration-color: var(--trait); }
.ancres a:hover { color: var(--lien); }

.pas-a-pas {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin-block: var(--r4);
}
.pas-a-pas > li {
  counter-increment: etape;
  position: relative;
  padding-left: 3.2rem;
  padding-bottom: var(--r4);
  border-left: 1px solid var(--trait);
  margin-left: 1.05rem;
  margin-bottom: 0;
}
.pas-a-pas > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pas-a-pas > li::before {
  content: counter(etape);
  position: absolute;
  left: -1.05rem;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--fond);
  border: 1px solid var(--argile-vif);
  color: var(--argile);
  font-family: var(--sans-appui);
  font-size: .82rem;
  font-weight: 600;
}
.pas-a-pas strong { display: block; margin-bottom: .2rem; }

.defilement {
  overflow-x: auto;
  margin-block: var(--r4);
  border: 1px solid var(--trait);
}
/* les tableaux respirent au-dela de la justification quand la place existe */
@media (min-width: 64rem) {
  .feuillet .defilement { width: 51rem; max-width: calc(100vw - 2 * var(--marge-laterale)); }
}
.tableau-atelier {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .93rem;
  font-family: var(--sans-appui);
}
.tableau-atelier caption {
  caption-side: top;
  text-align: left;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--trait);
}
.tableau-atelier th, .tableau-atelier td {
  text-align: left;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--trait-pale);
  vertical-align: top;
}
.tableau-atelier thead th {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  background: var(--fond-creux);
}
.tableau-atelier tbody tr:last-child th,
.tableau-atelier tbody tr:last-child td { border-bottom: 0; }

/* ---------- 13. Questions frequentes ---------------------------------- */

.questions { border-top: 1px solid var(--trait); }
.questions > div {
  border-bottom: 1px solid var(--trait);
  padding-block: var(--r4);
}
.questions h3 { margin-bottom: var(--r2); }
.questions p:last-child { margin-bottom: 0; }

/* ---------- 14. Suite de lecture --------------------------------------- */

.suite-lecture {
  display: grid;
  gap: var(--r3);
  border-top: 1px solid var(--trait);
  padding-top: var(--r4);
}
@media (min-width: 46rem) { .suite-lecture { grid-template-columns: repeat(3, 1fr); gap: var(--r4); } }
.suite-lecture a {
  display: block;
  font-family: var(--serif-titre);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--texte);
  text-decoration: none;
  border-top: 2px solid var(--argile-vif);
  padding-top: var(--r2);
}
.suite-lecture a:hover { color: var(--lien); }
.suite-lecture span {
  display: block;
  font-family: var(--sans-appui);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: .35rem;
}

/* ---------- 15. Ourlet (pied de page) --------------------------------- */

.ourlet {
  margin-top: var(--r6);
  border-top: 1px solid var(--trait);
  background: var(--fond-creux);
  padding-block: var(--r6) var(--r4);
  font-size: .95rem;
}

.ourlet-grille {
  display: grid;
  gap: var(--r5);
}
@media (min-width: 48rem) {
  .ourlet-grille { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--r5); }
}

.ourlet h2 {
  font-family: var(--sans-appui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: var(--r3);
}
.ourlet ul { list-style: none; margin: 0; padding: 0; }
.ourlet li { margin-bottom: .55rem; }
.ourlet a { color: var(--texte); text-decoration-color: var(--trait); }
.ourlet a:hover { color: var(--lien); }
.ourlet p { color: var(--texte-faible); }

.ourlet-mention {
  margin-top: var(--r5);
  border-top: 1px solid var(--trait);
  padding-top: var(--r3);
  font-family: var(--sans-appui);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--texte-faible);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2) var(--r4);
  justify-content: space-between;
}
.ourlet-mention p { margin: 0; max-width: 46em; }

/* ---------- 16. Impression -------------------------------------------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .bandeau, .rubriquier, .ourlet, .suite-lecture, .acces-direct, .cadre { display: none; }
  .feuillet { max-width: none; }
  a { text-decoration: none; color: #000; }
}