/* Livre d'or / Gastenboek : feuille partagée par /livre-d-or/ et /nl/gastenboek/ (production, 26/09/2026).
   Source : maquette _Deliverables/livre-or-2026-09/livre-d-or-A-fil-du-temps.html (variante A)
   + socle assets/umm-base.css. Règles de maquette retirées (drapeau, pointillé provisoire, mots de démonstration).
   Les accueils gardent leur CSS en ligne (option C de l'audit /css-architect). */
:root {
  --navy: oklch(22% .035 282); --navy-soft: oklch(29% .045 282);
  --paper: oklch(99% .003 221); --cream: oklch(96% .025 221);
  --ink: oklch(23% .032 282); --muted: oklch(47% .025 282);
  --cyan: oklch(67% .145 221); --pink: oklch(60% .19 350);
  --green: oklch(72% .16 127); --orange: oklch(72% .15 65);
  --purple: oklch(43% .13 326);
  --line: color-mix(in oklch,var(--navy) 15%,transparent);
  --cyan-soft: color-mix(in oklch,var(--cyan) 62%,var(--paper));
  --outer: clamp(12px,2vw,28px); --gutter: clamp(20px,4vw,64px); --max: 1440px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: clamp(22px,2.2vw,34px); --ease: cubic-bezier(.16,1,.3,1);
  --bar-h: clamp(56px,4.3vw,64px);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body { margin:0; color:var(--ink); background:var(--paper); font:1.08rem/1.6 "Atkinson Hyperlegible",sans-serif; overflow-x:clip }
img { display:block; max-width:100%; height:auto }
h1,h2,h3,p,figure,blockquote { margin:0 }
h1,h2,h3 { font-family:"Petrona",serif; font-weight:650; letter-spacing:-.04em; text-wrap:balance }
h1 { font-size:clamp(2.6rem,6vw,6rem); line-height:.95 }
h2 { font-size:clamp(2rem,4vw,3.6rem); line-height:1 }
h3 { font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.08 }
p { max-width:68ch }
a { color:inherit }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px }
.wrap { width:min(calc(100% - 2 * var(--gutter)),var(--max)); margin-inline:auto }
.lede { color:var(--muted); font-size:clamp(1.05rem,1.45vw,1.3rem) }
.sr-only { position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); white-space:nowrap }


/* ---------- barre de navigation (etat « barre formee » du site) ---------- */
.topbar { position:sticky; top:0; z-index:50; background:var(--navy); color:var(--paper); box-shadow:0 18px 40px -30px rgba(6,7,18,.9) }
.topbar-row { position:relative; display:flex; align-items:center; gap:clamp(10px,1.4vw,22px); height:var(--bar-h); width:min(calc(100% - 2 * var(--gutter)),var(--max)); margin-inline:auto }
.brand { display:block; flex:0 0 auto; text-decoration:none }
.brand img { width:auto; height:clamp(34px,3.2vw,44px) }
.nav-links { display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); margin-left:auto }
.nav-links a { display:flex; min-height:44px; align-items:center; font-size:.9rem; font-weight:700; text-decoration:none; white-space:nowrap }
.nav-links a:hover { text-decoration:underline; text-underline-offset:6px }
.nav-links a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--cyan); text-decoration-thickness:3px; text-underline-offset:8px }
.support { display:inline-flex; min-height:44px; align-items:center; padding:0 20px; border-radius:999px; background:var(--cyan); color:var(--navy); font-size:.9rem; font-weight:700; text-decoration:none; white-space:nowrap }
.lang { display:inline-flex; flex:0 0 auto; align-items:center; padding:3px; border:1px solid color-mix(in oklch,currentcolor 34%,transparent); border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.06em }
.lang a { display:grid; min-width:38px; min-height:32px; place-items:center; border-radius:999px; text-decoration:none }
.lang a[aria-current] { background:var(--paper); color:var(--navy) }
.menu-toggle { display:none; flex:0 0 44px; width:44px; height:44px; margin-left:auto; padding:0; border:1px solid color-mix(in oklch,var(--paper) 34%,transparent); border-radius:999px; background:transparent; color:var(--paper); cursor:pointer }
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after { display:block; width:18px; height:2px; margin:auto; background:currentcolor; border-radius:2px; content:"" }
.menu-toggle span::before { transform:translateY(-6px) } .menu-toggle span::after { transform:translateY(4px) }
@media (max-width: 1080px) {
  .menu-toggle { display:block; order:3; margin-left:0 }
  .support { display:none }
  .lang { margin-left:auto; order:2 }
  .topbar-row { gap:10px }
  .nav-links { display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; margin:0; padding:14px; border-radius:22px; background:var(--navy); box-shadow:0 24px 54px -28px rgba(6,7,18,.9) }
  .nav-links.open { display:flex }
  .nav-links a { padding:0 12px }
  .nav-links .support-in-menu { display:flex }
}
@media (min-width: 1081px) { .nav-links .support-in-menu { display:none } }
@media (max-width: 420px) { .brand img { height:36px } .lang a { min-width:32px } }



/* etiquette de langue d'un article */
.tag-lang { display:inline-grid; min-width:30px; height:22px; place-items:center; padding:0 6px; border-radius:6px; background:var(--navy); color:var(--paper); font-size:.68rem; font-weight:700; letter-spacing:.08em }
.tag-lang.nl { background:var(--purple) }

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

/* ================= page ================= */
    /* ================= Livre d'or variante A (26/09/2026), repris de la v4 ================= */
    html { scroll-padding-top:calc(var(--bar-h) + 16px) }
    .skip { position:fixed; z-index:300; left:12px; top:-80px; padding:12px 18px; border-radius:12px; background:var(--paper); color:var(--navy); font-weight:700 }
    .skip:focus { top:12px }
    .tag-lang { font-size:.75rem }

    /* ---- hero : photo, titre, une phrase ---- */
    .hero { position:relative; isolation:isolate; display:flex; min-height:min(80svh,760px); margin:var(--outer); overflow:hidden; border-radius:var(--radius); color:var(--paper); background:var(--navy) }
    .hero-zoom { position:absolute; z-index:-2; inset:0 }
    .hero-zoom img { width:100%; height:100%; object-fit:cover; object-position:50% 12% }
    .hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse 58% 62% at 0% 100%,rgba(18,19,37,.8) 0%,rgba(18,19,37,.45) 55%,rgba(18,19,37,0) 100%),linear-gradient(0deg,rgba(18,19,37,.92) 0%,rgba(18,19,37,.5) 30%,rgba(18,19,37,0) 52%) }
    .hero-inner { align-self:flex-end; display:grid; gap:var(--s4); width:100%; padding:clamp(24px,4vw,56px) max(calc(var(--gutter) - var(--outer)),calc((100% - var(--max)) / 2)); pointer-events:none }
    .hero h1 { max-width:14ch; font-size:clamp(2.4rem,4.8vw,4.4rem) }
    .hero .lede { max-width:36ch; color:var(--paper) }

    /* ---- le livre d'or ---- */
    .livre { margin-top:clamp(48px,7vw,96px) }
    .entree { position:relative; padding:clamp(22px,4vw,56px); border:1px solid var(--line); border-radius:var(--radius); background:oklch(99% .006 85); box-shadow:0 30px 60px -48px rgba(18,19,37,.6) }
    .sig { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding-bottom:16px; border-bottom:1px solid var(--line) }
    .sig h3 { font-size:clamp(1.5rem,2.6vw,2.3rem) }
    .sig p { width:100%; color:var(--muted); font-size:1rem }
    .fait { max-width:46rem; margin-top:18px; font-size:clamp(1.08rem,1.3vw,1.2rem) }
    .quote-fr { max-width:46rem; margin-top:18px; padding-left:16px; border-left:3px solid var(--cyan) }
    .quote-fr p { font-family:"Petrona",serif; font-weight:500; font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.22; letter-spacing:-.02em }
    .quote-fr .quote-nl { margin-top:8px; color:var(--muted); font-family:"Atkinson Hyperlegible",sans-serif; font-size:1rem; font-weight:400; font-style:italic; letter-spacing:0 }
    .quote-fr cite { display:block; margin-top:8px; color:var(--muted); font-size:.9rem; font-style:normal }
    /* une seule photo : 2 vignettes de meme hauteur, sans recadrage (HLN 676 px et groupe : meme rapport 3:2) */
    .duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); align-items:start; margin-top:clamp(20px,3vw,32px) }
    .duo figure:first-child { max-width:676px }
    .duo a { display:block; border-radius:16px; overflow:hidden }
    .duo img { width:100%; height:auto }
    .duo figcaption { margin-top:8px; color:var(--muted); font-size:.85rem }

    /* ---- presse : rangee plate sous l'entree ---- */
    .presse { margin-top:clamp(28px,4vw,48px) }
    .sub { margin:0 0 18px; font-size:clamp(1.3rem,2vw,1.8rem) }
    .presse-rang { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); margin:0; padding:0; list-style:none }
    .pr { display:grid; align-content:start; gap:12px; min-width:0; font-size:1rem }
    .pr-shot { position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff }
    .pr-shot a { display:block; height:100% }
    .pr-shot img { width:100% }
    .pr-shot .zoom { position:absolute; left:8px; bottom:8px; padding:3px 9px; border-radius:999px; background:var(--navy); color:var(--paper); font-size:.8rem; font-weight:700; pointer-events:none }
    .pr-txt { display:grid; align-content:start; gap:4px }
    .pr-note { display:block; color:var(--muted); font-weight:400 }
    .presse-intro, .mots-intro { max-width:46rem; margin:-8px 0 18px; color:var(--muted) }
    .pr-meta { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; color:var(--muted); font-size:.9rem }
    .pr-meta b { color:var(--ink) }
    .pr-meta .bh-logo { width:auto; height:40px }
    .pr-titre { margin:0; font-family:"Atkinson Hyperlegible",sans-serif; font-size:.95rem; font-weight:700; line-height:1.3; letter-spacing:0 }
    .read { display:inline-flex; min-height:44px; align-items:center; gap:8px; justify-self:start; font-weight:700; text-underline-offset:5px }
    .read:hover { color:var(--purple) }
    .pr .read { display:inline-block; min-height:44px; padding:11px 0; line-height:1.4 }

    /* ---- mots (7/12) et formulaire (5/12, collant) ---- */
    .suite { margin-top:clamp(40px,6vw,72px) }
    .suite-t { margin-bottom:clamp(18px,2.4vw,28px) }
    .suite-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,3vw,40px); align-items:start }

    .mots { display:grid; gap:16px; margin:0; padding:0; list-style:none }
    .mot { position:relative; padding:clamp(20px,3vw,32px) clamp(20px,3vw,32px) clamp(18px,2.6vw,28px) clamp(30px,4vw,48px); border:1px solid var(--line); border-radius:var(--radius); background:oklch(99% .006 85); box-shadow:0 30px 60px -48px rgba(18,19,37,.6) }
    .mot-texte { margin:0; font-size:1.2rem; line-height:1.5; white-space:pre-line }
    .mot-sig { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:10px; color:var(--muted); font-size:1rem }
    .mot-sig b { color:var(--ink) }
    .mots-vide { color:var(--muted) }
    .mot.nouveau { border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in oklch,var(--cyan) 25%,transparent) }
    .caret::after { content:"|"; margin-left:1px; color:var(--cyan); animation:clig .7s steps(1) infinite }
    @keyframes clig { 50% { opacity:0 } }

    /* ---- formulaire ---- */
    .ecrire { position:sticky; top:calc(var(--bar-h) + 16px); padding:clamp(22px,3vw,36px); border-radius:var(--radius); background:var(--cream) }
    .ecrire h3 { font-size:clamp(1.5rem,2.4vw,2.1rem) }
    .ecrire > p { margin-top:8px; color:var(--muted) }
    .form { display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px }
    .field { display:grid; gap:6px }
    .field.full { grid-column:1 / -1 }
    .field label, .consent { font-weight:700 }
    .field small { color:var(--muted); font-size:.85rem; font-weight:400 }
    .form input[type=text], .form select, .form textarea { width:100%; min-height:48px; padding:10px 14px; border:1px solid color-mix(in oklch,var(--navy) 30%,transparent); border-radius:12px; background:var(--paper); color:var(--ink); font:inherit }
    .form textarea { min-height:140px; resize:vertical }
    .compteur { justify-self:end; color:var(--muted); font-size:.9rem }
    .compteur.limite { color:var(--purple); font-weight:700 }
    .consent { grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start; font-weight:400 }
    .consent input { width:22px; height:22px; margin-top:2px; flex:none }
    .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
    .form .actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px; align-items:center }
    .form button { min-height:48px; padding:0 26px; border:0; border-radius:999px; background:var(--navy); color:var(--paper); font:inherit; font-weight:700; cursor:pointer }
    .form button:hover { background:var(--navy-soft) }
    .form-msg { min-height:1.5em; font-weight:700 }
    .form-msg.erreur { color:oklch(50% .2 27) }
    .form-msg.ok { color:oklch(45% .12 150) }

    /* ---- pied de page unique ---- */
    .pied { margin-top:clamp(56px,8vw,112px); padding:clamp(40px,5vw,64px) 0 28px; color:color-mix(in oklch,var(--paper) 78%,transparent); background:color-mix(in oklch,var(--navy) 92%,black) }
    .pied-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px) }
    .pied h2 { margin-bottom:12px; color:var(--paper); font-family:"Atkinson Hyperlegible",sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase }
    .pied-logo { width:auto; height:48px; margin-bottom:14px }
    .pied-nom { color:var(--paper); font-weight:700 }
    .pied-mission { margin-top:8px }
    .pied address { margin-top:14px; font-style:normal; line-height:1.7 }
    .pied a { color:var(--paper); text-underline-offset:4px }
    .pied ul { margin:0; padding:0; list-style:none }
    .pied nav a { display:inline-flex; min-height:44px; align-items:center }
    .pied-mentions p { font-size:.9rem; line-height:1.6 }
    .pied-bas { margin-top:36px; padding-top:18px; border-top:1px solid color-mix(in oklch,var(--paper) 16%,transparent); font-size:.85rem }

    /* ---- visionneuse (dialog) ---- */
    a[data-lb] { cursor:zoom-in }
    .lb { width:100vw; max-width:none; height:100svh; max-height:none; margin:0; padding:56px 12px 40px; border:0; background:rgba(12,13,26,.95) }
    .lb[open] { display:grid; grid-template-columns:56px minmax(0,1fr) 56px; align-items:center; gap:8px }
    .lb::backdrop { background:rgba(12,13,26,.6) }
    .lb-fig { display:grid; justify-items:center; gap:10px; margin:0; min-width:0 }
    .lb-fig img { max-width:100%; max-height:calc(100svh - 150px); width:auto; height:auto; border-radius:6px; background:#fff }
    .lb-fig figcaption { max-width:70ch; color:var(--paper); font-size:.95rem; text-align:center }
    .lb button { width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(18,19,37,.7); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer }
    .lb-close { position:absolute; top:10px; right:12px }
    .lb-count { position:absolute; left:50%; bottom:10px; margin:0; transform:translateX(-50%); color:rgba(255,255,255,.75); font-size:.85rem }

    @media (max-width: 1100px) {
      .presse-rang { grid-template-columns:repeat(3,minmax(0,1fr)) }
    }
    @media (max-width: 860px) {
      .suite-grid { grid-template-columns:1fr }
      .ecrire { position:static }
      .pied-grid { grid-template-columns:1fr }
    }
    @media (max-width: 760px) {
      .hero { display:block; min-height:0 }
      .hero-zoom { position:static; display:block }
      .hero-zoom img { height:auto; aspect-ratio:4/3 }
      .hero::before { display:none }
      .hero-inner { padding:22px 20px 28px }
      .hero-zoom img { object-position:30% 12% }
      .presse-rang { grid-template-columns:1fr; gap:12px }
      .pr { grid-template-columns:80px minmax(0,1fr); gap:6px 12px }
      .pr-txt { gap:0 }
      .pr-meta { font-size:.85rem; gap:2px 6px }
      .pr-titre { margin-top:2px }
      .pr-shot { aspect-ratio:auto; height:100px; border-radius:8px }
      .sub { margin-bottom:12px }
      .pr-shot img { height:auto }
      .pr-shot .zoom { display:none }
      .pr-meta .bh-logo { height:32px }
      .entree { padding:20px 16px 22px 26px }
      .lb[open] { grid-template-columns:1fr; padding:60px 8px 64px }
      .lb-prev, .lb-next { position:absolute; bottom:8px }
      .lb-prev { left:12px } .lb-next { right:12px }
      body { font-size:1rem }
    }

    /* ================= Variantes A/B/C (26/09/2026) : socle commun ================= */
    /* hero reduit : la photo du Roi reste, Donatienne visible */
    .hero { min-height:min(62svh,560px) }
    .hero-zoom img { object-position:50% 6% }
    .hero h1 { font-size:clamp(2.4rem,4.2vw,3.8rem) }
    @media (max-width: 760px) {
      .hero { min-height:0 }
      .hero-zoom img { aspect-ratio:auto; height:282px; object-position:26% 18% }
      .hero-inner { padding:18px 18px 22px }
    }


    /* ================= A · au fil du temps ================= */
    .fil { margin-top:clamp(40px,6vw,80px) }
    .temps { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(20px,3vw,48px); padding-block:clamp(32px,4.5vw,64px); border-top:1px solid var(--line) }
    .temps:first-child { padding-top:0; border-top:0 }
    /* repère = simple étiquette de temps, pas un lien : texte marine gras, petit filet fin au-dessus, aucun soulignement */
    .repere { position:sticky; top:calc(var(--bar-h) + 24px); align-self:start; padding-top:14px; color:var(--navy); font-family:"Atkinson Hyperlegible",sans-serif; font-size:clamp(1.1rem,1.35vw,1.25rem); font-weight:700; line-height:1.3; letter-spacing:0 }
    .repere::before { content:""; display:block; width:40px; height:1px; margin-bottom:12px; background:var(--navy) }
    .temps-corps { min-width:0 }
    .entree { padding:0; border:0; border-radius:0; background:none; box-shadow:none }
    .entree .duo { margin:0 0 clamp(20px,2.6vw,32px) }
    .entree .sig { padding-bottom:12px }
    .presse, .suite { margin-top:0 }
    .suite-t { font-size:clamp(1.6rem,2.8vw,2.4rem) }
    .mot { padding:clamp(18px,2.4vw,28px) }
    /* presse : les 4 articles sur 4 colonnes, la brochure sur sa propre ligne, plus large */
    .temps .presse-rang { grid-template-columns:repeat(4,minmax(0,1fr)) }
    /* brochure BeHeroes : dans le bloc du 17 septembre, à droite du texte et de la citation (demande de Gary, 26/09) */
    .palais-txt { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,230px); gap:clamp(24px,3.4vw,56px); align-items:start }
    .palais-txt .pr-broch { margin-top:18px }
    .temps .pr-broch .pr-shot { aspect-ratio:4/5 }
    /* mots à gauche, formulaire collant à droite, dans la colonne 9/12 */
    .temps .suite-grid { grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,42%,440px)) }
    /* au-dessus de 1180 px : la presse prend toute la largeur (12/12), son repère reste au-dessus, aligné à gauche comme les autres */
    @media (min-width: 1181px) {
      .temps-presse { row-gap:clamp(16px,1.6vw,24px) }
      .temps-presse .repere { grid-column:1 / -1; position:static }
      .temps-presse .temps-corps { grid-column:1 / -1 }
    }
    @media (max-width: 1180px) { .temps .presse-rang { grid-template-columns:repeat(2,minmax(0,1fr)) } }
    @media (max-width: 980px) { .temps .suite-grid { grid-template-columns:minmax(0,1fr) } .temps .ecrire { position:static } }
    @media (max-width: 860px) {
      .temps { grid-template-columns:1fr; gap:14px }
      .repere { position:static }
    }
    /* ---- corrections /visual-qc (26/09) ---- */
    /* formulaire plus compact ; collant seulement si l'écran est assez haut pour le contenir en entier (pas de défilement imbriqué) */
    .temps .ecrire { position:static; padding:clamp(20px,2.2vw,28px) }
    .temps .ecrire > p { margin-top:6px }
    .temps .form { gap:10px; margin-top:14px }
    .temps .form textarea { min-height:104px }
    @media (min-width: 981px) and (min-height: 940px) { .temps .ecrire { position:sticky; top:calc(var(--bar-h) + 12px) } }
    /* select : même hauteur (48 px) dans WebKit, flèche dessinée */
    .form select { appearance:none; -webkit-appearance:none; padding-right:44px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23202038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center }
    /* langue : cible de 44 x 44 px, la pastille visible garde sa taille (dessinée par un pseudo-élément) */
    .lang a { position:relative; isolation:isolate; min-width:44px; min-height:44px; margin:-6px -3px }
    .lang a[aria-current] { background:none }
    .lang a[aria-current]::before { content:""; position:absolute; z-index:-1; inset:6px 3px; border-radius:999px; background:var(--paper) }
    @media (max-width: 860px) { .palais-txt { grid-template-columns:minmax(0,1fr); gap:0 } .palais-txt .pr-broch { margin-top:22px; max-width:520px } }
    @media (max-width: 760px) { .temps .presse-rang { grid-template-columns:1fr } .temps .pr-broch .pr-shot { aspect-ratio:auto } .mot { padding:18px 16px } }

    /* ---- production : états de chargement de la liste, bouton pendant l'envoi ---- */
    .mots-vide[hidden] { display:none }
    .form button[disabled] { opacity:.65; cursor:progress }
    /* ---- production : sans JavaScript, le menu mobile reste lisible (rangée de liens sous la barre) ---- */
    @media (max-width: 1080px) {
      html:not(.js) .menu-toggle { display:none }
      html:not(.js) .topbar-row { flex-wrap:wrap; height:auto; min-height:var(--bar-h); padding-block:6px }
      html:not(.js) .nav-links { display:flex; position:static; order:9; width:100%; flex-direction:row; flex-wrap:wrap; gap:0 14px; padding:0; border-radius:0; background:none; box-shadow:none }
    }
    /* ---- production : un mot sans espace (longue URL, lettre répétée) ne sort jamais de sa carte ---- */
    .mot, .mot-texte, .mot-sig { min-width:0; overflow-wrap:anywhere }