/* =====================================================================
   N4CC — kit « L'Heure Juste » (direction C + navigation de A)
   Design system en code : jetons, puis composants. Tout est scopé sous html.n4h.
   Règles : texte courant ≥ 17 px, cibles ≥ 44 px (56 px pour les actions), contraste AA,
   la zone de lecture reste sur papier clair à toute heure, mouvement réduit respecté.
   ===================================================================== */

@property --s1 { syntax: '<color>'; inherits: true; initial-value: #3D8FD6; }
@property --s2 { syntax: '<color>'; inherits: true; initial-value: #8CC6EE; }
@property --s3 { syntax: '<color>'; inherits: true; initial-value: #D8EEF8; }
@property --sea1 { syntax: '<color>'; inherits: true; initial-value: #145A8D; }
@property --sea2 { syntax: '<color>'; inherits: true; initial-value: #2A84B6; }

/* ---------- 1. Jetons ---------- */
:root.n4h {
  /* Couleurs de marque (reprises de l'accueil) */
  --ink: #0A2540; --ink-2: #33445C; --ink-3: #566275;
  --paper: #FBF8F1; --paper-2: #F3EEE2; --paper-3: #EAE3D3; --line: #E2DACA; --white: #FFFDF8;
  --night: #0A2540; --night-2: #12355A; --night-3: #1B4F72;
  --sun: #FFD93D; --sun-2: #F2B21B; --coral: #FF7849; --coral-ink: #B83A0E;
  --mint: #10B981; --mint-ink: #0B7A55; --mint-bg: #E3F5EC;
  --busy: #F2B21B; --full: #FF6B5E;
  /* Typographie */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-data: 'DM Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --t-xl: clamp(2.1rem, 1.3rem + 3.3vw, 4.2rem);    /* H1 */
  --t-l: clamp(1.65rem, 1.25rem + 1.6vw, 2.55rem);  /* H2 */
  --t-m: 1.3rem;                                     /* H3, titres de bloc */
  --t-lede: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --t-body: 1.0625rem;                               /* 17 px, 18 px dès 960 px */
  --t-small: .9375rem;                               /* 15 px, minimum pour du texte suivi */
  --t-meta: .8125rem;                                /* 13 px, étiquettes de données seulement */
  /* Espacements (base 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;
  /* Rayons */
  --r-sign: 6px; --r: 12px; --r-panel: 20px; --r-pill: 999px;
  /* Ombres */
  --sh-float: 0 18px 40px -22px rgba(10, 37, 64, .5), 0 2px 6px rgba(10, 37, 64, .08);
  --sh-paper: 0 1px 0 rgba(10, 37, 64, .06), 0 10px 26px -18px rgba(10, 37, 64, .35);
  /* Mouvement : la nature lente, les gestes rapides */
  --ease-respire: cubic-bezier(.33, 0, .2, 1);
  --ease-arrive: cubic-bezier(.12, .9, .18, 1);   /* « frein » : arrivée latérale des panneaux */
  --d-fast: 150ms; --d-ui: 240ms; --d-enter: 700ms; --d-sky: 1400ms;
  /* Mise en page */
  --wrap: 1200px; --header-h: 60px; --bar-h: 76px;
  /* Les quatre lumières (pilotées par data-sky, calculé pour l'aire) */
  --s1: #3D8FD6; --s2: #8CC6EE; --s3: #D8EEF8; --sea1: #145A8D; --sea2: #2A84B6;
  color-scheme: light;
}
:root.n4h[data-sky="aube"]  { --s1: #23305A; --s2: #8D7BA6; --s3: #F2B9A0; --sea1: #31496F; --sea2: #6F7FA3; }
:root.n4h[data-sky="jour"]  { --s1: #3D8FD6; --s2: #8CC6EE; --s3: #D8EEF8; --sea1: #145A8D; --sea2: #2A84B6; }
:root.n4h[data-sky="doree"] { --s1: #2A3766; --s2: #9E7AA8; --s3: #F4AE8C; --sea1: #24436B; --sea2: #56688F; }
:root.n4h[data-sky="nuit"]  { --s1: #030914; --s2: #0A1C38; --s3: #1B3358; --sea1: #061529; --sea2: #0E2746; }
@media (min-width: 960px) { :root.n4h { --header-h: 72px; } }

/* ---------- 2. Base ---------- */
.n4h *, .n4h *::before, .n4h *::after { box-sizing: border-box; }
html.n4h { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
.n4h body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 960px) { .n4h body { padding-bottom: 0; font-size: 1.125rem; } }
.n4h img { max-width: 100%; height: auto; display: block; }
:where(.n4h) a { color: var(--ink); text-decoration-thickness: .08em; text-underline-offset: .2em; }
:where(.n4h) a:hover { text-decoration-color: var(--coral); }
.n4h :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--sun); border-radius: 6px; }
.n4h h1, .n4h h2, .n4h h3 { text-wrap: balance; }
.n4h p { text-wrap: pretty; }
.hj-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hj-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hj-wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .hj-wrap { padding-left: 32px; padding-right: 32px; } }
.hj-skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 14px 18px; background: var(--sun); color: var(--ink); font-weight: 700; border-radius: var(--r); text-decoration: none; }
.hj-skip:focus { top: 12px; }
.hj-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); flex: none; box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); animation: hj-pulse 2.4s infinite; }
@keyframes hj-pulse { 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* ---------- 3. Boutons ---------- */
.hj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-pill); font: 700 16px/1.1 var(--f-body); text-decoration: none; cursor: pointer; transition: transform var(--d-fast) var(--ease-respire), box-shadow var(--d-fast) var(--ease-respire), background-color var(--d-fast); -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.hj-btn:active { transform: translateY(1px) scale(.985); }
.hj-btn .hj-i { width: 20px; height: 20px; }
.hj-btn--sun { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--sun-2); }
.hj-btn--sun:hover { box-shadow: 0 5px 0 var(--sun-2); transform: translateY(-1px); }
.hj-btn--ink { background: var(--ink); color: #fff; }
.hj-btn--ink:hover { background: var(--night-2); }
.hj-btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hj-btn--line:hover { background: var(--paper-2); }
.hj-btn--light { background: #fff; color: var(--ink); }
.hj-btn--sm { min-height: 44px; padding: 0 14px; font-size: 15px; }
.hj-btn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.hj-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---------- 4. En-tête ---------- */
.hj-header { position: sticky; top: 0; z-index: 40; background: rgba(251, 248, 241, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--line); view-transition-name: hj-header; }
.hj-header__in { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-4); }
.hj-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: none; }
.hj-brand img { width: 40px; height: 40px; border-radius: 50%; }
.hj-brand__t { display: grid; line-height: 1.1; min-width: 0; }
.hj-brand__sub { font: 600 11.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hj-brand__name { font: 700 17px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hj-nav { display: none; }
.hj-header__act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hj-desk { display: none !important; }
@media (min-width: 960px) {
  .hj-brand img { width: 46px; height: 46px; }
  .hj-brand__name { font-size: 19px; }
  .hj-nav { display: flex; gap: 2px; margin-left: 8px; }
  .hj-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r); text-decoration: none; font-weight: 600; font-size: 16px; }
  .hj-nav a:hover { background: var(--paper-2); }
  .hj-desk { display: inline-flex !important; }
}
@media (min-width: 960px) and (max-width: 1180px) { .hj-header .hj-btn--line.hj-desk { display: none !important; } .hj-nav a { padding: 0 9px; } .hj-nav a:nth-child(4) { display: none; } }
/* Libellés plus longs hors français (numéro international, « Voorzieningen »…) : sur écran moyen,
   le téléphone devient une icône (son numéro reste lu par les lecteurs d'écran) — plus de débordement. */
@media (min-width: 960px) and (max-width: 1040px) { html.n4h:not([lang^="fr"]) .hj-nav a:nth-child(3) { display: none; } }
@media (min-width: 1181px) and (max-width: 1480px) {
  html.n4h:not([lang^="fr"]) .hj-header .hj-btn--line.hj-desk { padding: 0 13px; }
  html.n4h:not([lang^="fr"]) .hj-header .hj-btn--line.hj-desk span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.n4h:not([lang^="fr"]) .hj-nav a { padding: 0 9px; }
}
@media (max-width: 380px) { .hj-brand__sub { font-size: 10.5px; letter-spacing: .05em; } .hj-brand__name { font-size: 16px; } }

/* Langue : par son nom, pas par un drapeau */
.hj-lang { position: relative; }
.hj-lang summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); font: 700 15px/1 var(--f-body); cursor: pointer; }
.hj-lang summary::-webkit-details-marker { display: none; }
.hj-lang summary .hj-i { width: 18px; height: 18px; }
.hj-lang .hj-lang__chev { width: 16px; height: 16px; transition: transform var(--d-ui) var(--ease-respire); }
.hj-lang[open] .hj-lang__chev { transform: rotate(180deg); }
.hj-lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; margin: 0; padding: 6px; list-style: none; background: var(--white); border-radius: var(--r); box-shadow: var(--sh-float), inset 0 0 0 1px var(--line); z-index: 60; }
.hj-lang a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.hj-lang a:hover, .hj-lang a[aria-current] { background: var(--paper-2); }
.hj-lang a[aria-current]::after { content: "✓"; margin-left: auto; color: var(--mint-ink); }

/* ---------- 5. La mer à l'heure juste (fenêtre WebGL existante) ---------- */
.hj-sea { position: relative; height: clamp(220px, 34vh, 300px); overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 20%, var(--s3) 32%, var(--sea2) 32.3%, var(--sea1) 100%); transition: --s1 var(--d-sky), --s2 var(--d-sky), --s3 var(--d-sky), --sea1 var(--d-sky), --sea2 var(--d-sky); }
@media (min-width: 960px) { .hj-sea { height: clamp(300px, 42vh, 440px); } }
.hj-sea__view { position: absolute; inset: 0; }
.hj-sea__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease-respire); }
.hj-sea__view.is-ready canvas { opacity: 1; }
.hj-sea__view.is-fallback canvas { display: none; }
.hj-sea__horizon { position: absolute; left: 0; right: 0; top: 32%; display: flex; justify-content: space-between; gap: 12px; padding: 7px max(16px, env(safe-area-inset-left, 0px)) 0; border-top: 1px solid rgba(255, 255, 255, .6); pointer-events: none; view-transition-name: hj-horizon; }
.hj-sea__horizon span { font: 500 11px/1 var(--f-data); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(6, 21, 41, .42); padding: 4px 7px; border-radius: 4px; }
.hj-sea__horizon span:last-child { display: none; }
@media (min-width: 640px) { .hj-sea__horizon span:last-child { display: inline; } }
@media (min-width: 768px) { .hj-sea__horizon { padding-inline: 32px; } }
.hj-sea__live { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: 14px; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--r-pill); background: rgba(6, 21, 41, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 13.5px/1 var(--f-data); color: #fff; }
@media (min-width: 768px) { .hj-sea__live { left: 32px; bottom: 20px; } }

/* ---------- 6. Grille de page ---------- */
.hj-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--sp-7); padding-block: var(--sp-6) var(--sp-8); }
.hj-head { padding-top: var(--sp-1); }
.hj-h1 { margin: 0; font-family: var(--f-display); font-weight: 720; font-size: var(--t-xl); line-height: 1.03; letter-spacing: -.02em; font-variation-settings: 'opsz' 96; color: var(--ink); }
.hj-h1__pre { display: block; font: 600 clamp(15px, .55vw + 13px, 18px)/1.4 var(--f-body); letter-spacing: 0; color: var(--ink-2); margin-bottom: 12px; max-width: 40ch; }
.hj-h1__main { display: block; }
.hj-h1 em { font-style: italic; font-weight: 700; background: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hj-lede p { font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--sp-4); }
.hj-lede p:first-child { color: var(--ink); }
.hj-main > * + * { margin-top: var(--sp-8); }
@media (min-width: 960px) {
  .hj-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head aside" "lede aside" "main aside"; align-items: start; padding-top: var(--sp-7); }
  .hj-head { grid-area: head; } .hj-lede { grid-area: lede; } .hj-main { grid-area: main; }
  .hj-aside { grid-area: aside; }
}
@media (min-width: 960px) and (min-height: 900px) { .hj-aside { position: sticky; top: calc(var(--header-h) + 20px); } }

/* ---------- 7. Le relevé (3 mesures au plus, toujours datées) ---------- */
.hj-releve { background: var(--white); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--line); padding: var(--sp-4); }
.hj-releve dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.hj-releve dl > div { padding: var(--sp-1) var(--sp-3); }
.hj-releve dl > div:first-child { padding-left: var(--sp-1); }
.hj-releve dl > div + div { border-left: 1px solid var(--line); }
.hj-releve dt { font: 500 var(--t-meta)/1.2 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hj-releve dd { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
.hj-releve__v { font: 500 clamp(25px, 6.4vw, 30px)/1 var(--f-data); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hj-releve__u { font: 500 14px/1 var(--f-data); color: var(--ink-2); }
.hj-releve__s { flex-basis: 100%; margin-top: 6px; font: 500 14px/1.25 var(--f-body); color: var(--ink-2); }
.hj-stamp { margin: var(--sp-3) 0 0; font: 400 12.5px/1.5 var(--f-data); color: var(--ink-3); }

/* ---------- 8. Ce soir à l'aire (tableau à volets) ---------- */
.hj-tonight { margin-top: var(--sp-4); background: var(--night); color: #F4EFE3; border-radius: var(--r-panel); padding: var(--sp-5) var(--sp-4) var(--sp-3); box-shadow: var(--sh-float); }
@media (min-width: 400px) { .hj-tonight { padding-inline: var(--sp-5); } }
.hj-tonight__t { margin: 0 0 var(--sp-3); font: 700 1.35rem/1.1 var(--f-display); color: #fff; }
.hj-tonight__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
.hj-tonight__k { font: 600 16px/1.25 var(--f-body); color: #E4ECF5; }
.hj-tonight__k small { display: block; margin-top: 3px; font: 500 12.5px/1 var(--f-data); color: #A9BBD0; letter-spacing: .02em; }
.hj-flapbox { font: 500 28px/1 var(--f-data); color: #F4EFE3; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hj-flapbox--sun { color: var(--sun); }
.hj-tonight__msg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0 0 var(--sp-3); font: 650 16px/1.35 var(--f-body); color: #fff; }
.hj-tonight__msg.is-busy .hj-dot { background: var(--busy); animation: none; }
.hj-tonight__msg.is-full .hj-dot { background: var(--full); animation: none; }
.hj-tonight__msg.is-unknown .hj-dot { background: #A9BBD0; animation: none; }
.hj-tonight__time { flex-basis: 100%; padding-left: 18px; font: 400 12.5px/1.2 var(--f-data); color: #A9BBD0; }
.hj-tonight__incl { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--t-small); line-height: 1.45; color: #C9D6E5; }
.hj-course-fig { margin: 0 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .14); }
.hj-course-fig figcaption { font: 500 12.5px/1 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: #A9BBD0; margin-bottom: 8px; }
.hj-course { width: 100%; height: auto; display: block; overflow: visible; }
.hj-course__horizon { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.hj-course__path { fill: none; stroke: var(--sun); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; }
.hj-course__end { fill: #A9BBD0; }
.hj-course__sun { fill: var(--sun); }
.hj-course__glow { fill: var(--sun); opacity: .22; }
.hj-course__lab, .hj-course__now { font: 500 11px var(--f-data); fill: #C9D6E5; }
.hj-course__now { fill: #fff; }
.hj-tonight__link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--sun); font-weight: 700; text-decoration: none; }
.hj-tonight__link:hover { text-decoration: underline; }
.hj-tonight__link .hj-i { transition: transform var(--d-fast) var(--ease-respire); }
.hj-tonight__link:hover .hj-i { transform: translateX(3px); }

/* Tableau à volets — portage de SplitFlapText (React Bits, MIT + Commons Clause) en CSS natif */
.hj-flap { position: relative; display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-data); font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: pre; user-select: none; font-variant-numeric: tabular-nums; --flap-tile: #142A44; --flap-text: #F4EFE3; --flap-dur: .1s; }
.hj-flapbox--sun .hj-flap { --flap-text: var(--sun); }
.hj-flap__tile { position: relative; flex: none; width: .78em; height: 1.18em; overflow: hidden; border-radius: 4px; background: linear-gradient(180deg, #1D3657, var(--flap-tile)); box-shadow: 0 .035em .08em rgba(255, 255, 255, .08) inset, 0 -.05em .1em rgba(0, 0, 0, .38) inset, 0 .12em .3em rgba(0, 0, 0, .35); perspective: 10em; transform-style: preserve-3d; isolation: isolate; }
.hj-flap__tile::before { content: ''; position: absolute; z-index: 8; top: calc(50% - .5px); left: 0; width: 100%; height: 1px; background: rgba(0, 0, 0, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); pointer-events: none; }
.hj-flap__half, .hj-flap__flap { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 34%), var(--flap-tile); backface-visibility: hidden; }
.hj-flap__half--top, .hj-flap__flap--front { top: 0; }
.hj-flap__half--bottom, .hj-flap__flap--back { bottom: 0; background: linear-gradient(0deg, rgba(255, 255, 255, .05), transparent 38%), #0F2238; }
.hj-flap__char { position: absolute; left: 0; width: 100%; height: 200%; display: flex; align-items: center; justify-content: center; color: var(--flap-text); }
.hj-flap__half--top .hj-flap__char, .hj-flap__flap--front .hj-flap__char { top: 0; }
.hj-flap__half--bottom .hj-flap__char, .hj-flap__flap--back .hj-flap__char { bottom: 0; }
.hj-flap__flap { z-index: 6; will-change: transform; transform-style: preserve-3d; }
.hj-flap__flap--front { transform-origin: center bottom; animation: hj-flap-front var(--flap-dur) linear both; }
.hj-flap__flap--back { transform-origin: center top; transform: rotateX(90deg); animation: hj-flap-back var(--flap-dur) linear both; }
@keyframes hj-flap-front { 0% { transform: rotateX(0); filter: brightness(1.08); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } 50%, 100% { transform: rotateX(-90deg); filter: brightness(.52); } }
@keyframes hj-flap-back { 0%, 50% { transform: rotateX(90deg); filter: brightness(.58); animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 100% { transform: rotateX(0); filter: brightness(1); } }

/* ---------- 9. Les raisons (sections éditoriales numérotées) ---------- */
.hj-reason { position: relative; }
.hj-reason__n { display: block; margin-bottom: var(--sp-2); font: 700 64px/.9 var(--f-display); font-variation-settings: 'opsz' 144; color: var(--sun); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
@media (min-width: 1100px) { .hj-reason { padding-left: 104px; } .hj-reason__n { position: absolute; left: 0; top: -8px; font-size: 88px; } }
.hj-h2 { margin: 0 0 var(--sp-4); font: 700 var(--t-l)/1.08 var(--f-display); letter-spacing: -.014em; font-variation-settings: 'opsz' 72; color: var(--ink); }
.hj-reason p, .hj-sec p { margin: 0 0 var(--sp-4); max-width: 66ch; color: var(--ink-2); }
.hj-reason p strong, .hj-sec p strong { color: var(--ink); }
.hj-chips { list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: var(--sp-6); }
.hj-chips li { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.35; color: var(--ink); }
.hj-chips .hj-i { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: #FFF3C4; color: var(--ink); stroke-width: 1.9; }

/* ---------- 10. Le chemin de la plage ---------- */
.hj-walk { margin: var(--sp-6) 0 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); background: var(--white); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 600px) { .hj-walk { padding-inline: var(--sp-6); } }
.hj-walk__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: var(--sp-6); }
.hj-walk__cap strong { font: 700 var(--t-m)/1.15 var(--f-display); }
.hj-walk__cap span { font: 500 14px/1 var(--f-data); color: var(--ink-3); }
.hj-walk__track { position: relative; height: 84px; margin: 0 14px; }
.hj-walk__line { position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(10, 37, 64, .35) 0 10px, transparent 10px 18px); }
.hj-walk__fill { position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 2px; background: var(--coral); transform-origin: left center; }
.hj-walk__stop { position: absolute; left: var(--x); top: 0; bottom: 0; width: 0; }
.hj-walk__stop i { position: absolute; top: 35px; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); }
.hj-walk__stop.is-end i { background: var(--sun); }
.hj-walk__stop > span { position: absolute; top: 60px; left: 0; transform: translateX(-50%); font: 600 14.5px/1.1 var(--f-body); color: var(--ink); white-space: nowrap; }
.hj-walk__stop.is-up > span { top: 6px; transform: translateX(-12px); }
.hj-walk__stop.is-start > span { transform: translateX(-7px); }
.hj-walk__stop.is-end > span { transform: translateX(calc(-100% + 7px)); }
.hj-walk__me { position: absolute; left: 0; top: 28px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--mint-ink); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; z-index: 1; }
.hj-walk__me .hj-i { width: 16px; height: 16px; stroke-width: 2.4; }
.hj-walk__now { margin: var(--sp-4) 0 0 !important; font-size: 17px; color: var(--ink) !important; }
.hj-walk__now time { font-family: var(--f-data); font-weight: 500; background: var(--sun); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

/* ---------- 11. Les plages : mât de direction (grammaire de A) ---------- */
.hj-sec { scroll-margin-top: calc(var(--header-h) + 16px); }
.hj-mast { margin-top: var(--sp-5); }
.hj-mast__here { display: grid; gap: 5px; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); border-radius: var(--r-sign); background: var(--night); color: #fff; box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 5px #fff; }
.hj-mast__tag { justify-self: start; padding: 5px 9px; border-radius: 4px; background: var(--sun); color: var(--ink); font: 700 12.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.hj-mast__here strong { font: 700 1.3rem/1.2 var(--f-display); }
.hj-mast__d { font: 500 1.15rem/1 var(--f-data); color: var(--sun); }
.hj-mast__desc { font-size: var(--t-small); line-height: 1.45; color: #C9D6E5; }
.hj-mast__cols { display: grid; gap: var(--sp-6); overflow-x: clip; overflow-clip-margin: 8px; }
@media (min-width: 760px) { .hj-mast__cols { grid-template-columns: 1fr 1fr; } }
.hj-mast__dir { margin: 0 0 var(--sp-3) !important; font: 500 13px/1 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) !important; }
@media (min-width: 760px) { .hj-mast__dir--r { text-align: right; } }
.hj-mast__col ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.hj-sign { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-block: 8px; font: 700 17px/1.2 var(--f-body); color: var(--ink); background: var(--ink); }
.hj-sign::before { content: ""; position: absolute; inset: 3px; background: #fff; z-index: 0; }
.hj-sign > * { position: relative; z-index: 1; }
.hj-sign--r { padding-inline: 16px 36px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.hj-sign--r::before { clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 0 100%); }
.hj-sign--l { padding-inline: 36px 16px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); }
.hj-sign--l::before { clip-path: polygon(21px 0, 100% 0, 100% 100%, 21px 100%, 0 50%); }
.hj-sign__km { font: 500 18px/1 var(--f-data); font-variant-numeric: tabular-nums; }
.hj-sign__desc { display: block; margin: 7px 2px 0; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
.hj-note { font: 400 13px/1.4 var(--f-data) !important; color: var(--ink-3) !important; margin-top: var(--sp-4) !important; }

/* ---------- 12. Repères : l'échelle des bornes ---------- */
.hj-ladder { position: relative; list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.hj-ladder::before { content: ""; position: absolute; left: 31px; top: 18px; bottom: 18px; width: 4px; background: repeating-linear-gradient(180deg, rgba(10, 37, 64, .28) 0 10px, transparent 10px 18px); }
.hj-ladder li { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding: var(--sp-2) 0; }
.hj-borne { position: relative; justify-self: center; width: 58px; height: 66px; display: grid; align-content: end; justify-items: center; padding-bottom: 7px; overflow: hidden; background: #fff; border: 2px solid var(--ink); border-radius: 29px 29px 6px 6px; }
.hj-borne::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--sun); border-bottom: 2px solid var(--ink); }
.hj-borne b { position: relative; font: 500 17px/1 var(--f-data); }
.hj-borne small { position: relative; font: 500 11px/1.2 var(--f-data); color: var(--ink-2); }
.hj-ladder__t strong { display: block; font: 700 17px/1.3 var(--f-body); color: var(--ink); }
.hj-ladder__t > span { font-size: var(--t-small); color: var(--ink-2); }

/* ---------- 13. Photos ---------- */
.hj-gallery__strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 320px); gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px max(16px, env(safe-area-inset-left, 0px)) var(--sp-3); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); scrollbar-width: thin; }
.hj-gallery figure { margin: 0; scroll-snap-align: start; }
.hj-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--paper-3); }
.hj-gallery figcaption { margin-top: 8px; font-size: var(--t-small); color: var(--ink-2); }
@media (min-width: 768px) {
  .hj-gallery__strip { grid-auto-flow: row; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .hj-gallery figure:first-child { grid-row: span 2; }
  .hj-gallery figure:first-child img { aspect-ratio: auto; height: calc(100% - 32px); min-height: 260px; }
  .hj-gallery figure:nth-child(4) { grid-column: 2 / 4; }
  .hj-gallery figure:nth-child(4) img { aspect-ratio: 2.2 / 1; }
}

/* ---------- 14. Venir ---------- */
.hj-open { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 var(--sp-4) !important; padding: 9px 15px; border-radius: var(--r-pill); background: var(--mint-bg); color: var(--mint-ink) !important; font-weight: 700; font-size: 16px; }
.hj-gps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.hj-gps__k { flex-basis: 100%; font: 500 var(--t-meta)/1 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hj-gps__v { font: 500 clamp(20px, 5.4vw, 26px)/1.1 var(--f-data); letter-spacing: -.01em; }
.hj-arrive__link a { font-weight: 700; }

/* ---------- 15. Questions ---------- */
.hj-q { border-top: 1px solid var(--line); }
.hj-q:last-of-type { border-bottom: 1px solid var(--line); }
.hj-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 60px; padding: var(--sp-3) 0; font: 650 17.5px/1.35 var(--f-body); color: var(--ink); cursor: pointer; }
.hj-q summary::-webkit-details-marker { display: none; }
.hj-q summary .hj-i { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--paper-2); transition: transform var(--d-ui) var(--ease-respire), background-color var(--d-fast); }
.hj-q summary:hover .hj-i { background: #FFF3C4; }
.hj-q[open] summary .hj-i { transform: rotate(180deg); background: var(--sun); }
.hj-q__a { padding: 0 0 var(--sp-4); color: var(--ink-2); }
.hj-q__a p { margin: 0 0 var(--sp-3); }
@supports (interpolate-size: allow-keywords) {
  :root.n4h { interpolate-size: allow-keywords; }
  .hj-q::details-content { height: 0; overflow: clip; transition: height var(--d-ui) var(--ease-respire), content-visibility var(--d-ui) allow-discrete; }
  .hj-q[open]::details-content { height: auto; }
}

/* ---------- 16. Appel final, à l'heure du ciel ---------- */
.hj-cta { position: relative; overflow: hidden; padding-block: var(--sp-8) calc(var(--sp-8) + 70px); color: #fff; background: linear-gradient(180deg, var(--s1), color-mix(in srgb, var(--s2) 62%, #0A2540)); transition: --s1 var(--d-sky), --s2 var(--d-sky), --sea1 var(--d-sky), --sea2 var(--d-sky); }
.hj-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, var(--sea2), var(--sea1)); border-top: 1px solid rgba(255, 255, 255, .55); }
.n4h[data-sky="jour"] .hj-cta { background: linear-gradient(180deg, #2F7FC4, #1B4F72); }
.hj-cta__in { position: relative; z-index: 1; }
.hj-cta__k { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 500 13px/1.2 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.hj-cta__t { margin: var(--sp-3) 0 var(--sp-3); font: 700 clamp(2rem, 1.25rem + 3.2vw, 3.7rem)/1.02 var(--f-display); letter-spacing: -.02em; max-width: 18ch; color: #fff; }
.hj-cta__s { margin: 0; font-size: var(--t-lede); max-width: 52ch; color: rgba(255, 255, 255, .94); }

/* ---------- 17. Pied de page ---------- */
.hj-footer { background: var(--night); color: #C9D6E5; padding-block: var(--sp-7); }
.hj-footer__in { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .hj-footer__in { grid-template-columns: 1.2fr 2fr; } }
.hj-footer__brand { display: flex; gap: var(--sp-4); align-items: flex-start; }
.hj-footer__brand img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.hj-footer__brand p { margin: 0; display: grid; gap: 4px; font-size: var(--t-small); line-height: 1.45; }
.hj-footer__brand strong { color: #fff; font: 700 1.1rem/1.25 var(--f-display); }
.hj-footer a { color: #fff; text-decoration: none; }
.hj-footer a:hover { text-decoration: underline; }
.hj-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4) var(--sp-5); }
.hj-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hj-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.hj-footer__langs { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--sp-4) 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 0 20px; }
.hj-footer__langs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.hj-footer__langs a[aria-current] { color: var(--sun); }

/* ---------- 18. Barre d'actions mobile (panneaux de A) ---------- */
.hj-bar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px max(8px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)); background: rgba(251, 248, 241, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -20px rgba(10, 37, 64, .45); }
.hj-bar > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 0 2px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: 700 13.5px/1.05 var(--f-body); text-decoration: none; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3.5px #fff; transition: transform var(--d-fast) var(--ease-respire); -webkit-tap-highlight-color: transparent; }
.hj-bar > *:active { transform: scale(.96); }
.hj-bar .hj-i { width: 22px; height: 22px; }
.hj-bar .is-go { background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sun), inset 0 0 0 3.5px var(--ink); }
@media (min-width: 960px) { .hj-bar { display: none; } }

/* ---------- 19. Le bulletin (menu) ---------- */
.hj-bulletin { margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: var(--paper); color: var(--ink); overscroll-behavior: contain; opacity: 0; transform: translateY(24px); transition: opacity var(--d-ui) var(--ease-respire), transform var(--d-ui) var(--ease-respire); }
.hj-bulletin.is-in { opacity: 1; transform: none; }
.hj-bulletin::backdrop { background: rgba(3, 9, 20, .45); }
@media (min-width: 960px) { .hj-bulletin { margin-left: auto; width: min(460px, 100%); transform: translateX(40px); box-shadow: -30px 0 60px -30px rgba(3, 9, 20, .5); } }
.hj-bulletin__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.hj-bulletin__head h2 { margin: 0; font: 700 1.6rem/1 var(--f-display); }
.hj-b-tonight { margin: 16px; padding: 16px 18px; border-radius: var(--r-panel); background: var(--night); color: #fff; }
.hj-b-tonight h3 { margin: 0 0 12px; font: 700 1.15rem/1.2 var(--f-display); }
.hj-b-tonight dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.hj-b-tonight dt { font: 500 12px/1.2 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: #A9BBD0; }
.hj-b-tonight dd { margin: 5px 0 0; font: 500 22px/1 var(--f-data); color: var(--sun); }
.hj-b-tonight dd.hj-b-tonight__m { font: 600 14.5px/1.3 var(--f-body); color: #fff; }
.hj-b-h { margin: 24px 16px 6px; font: 500 12.5px/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hj-b { list-style: none; margin: 0 8px; padding: 0; }
.hj-b a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 62px; padding: 9px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.hj-b a:hover { background: var(--paper-2); }
.hj-b a[aria-current] { background: #FFF5CC; }
.hj-b__i { grid-row: span 2; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--night-3); }
.hj-b__t { font: 650 17px/1.25 var(--f-body); }
.hj-b__t em { font-style: normal; font: 700 11.5px/1 var(--f-body); background: var(--sun); color: var(--ink); padding: 3px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.hj-b__d { font: 500 15px/1 var(--f-data); text-align: right; white-space: nowrap; }
.hj-b__w { grid-column: 2 / -1; font: 400 13.5px/1.35 var(--f-data); color: var(--ink-2); }
.hj-b--compact a { min-height: 54px; }
.hj-b--compact .hj-b__i { grid-row: auto; }
.hj-b-langs { list-style: none; margin: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px)); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hj-b-langs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; font-weight: 600; color: var(--ink); }
.hj-b-langs a[aria-current] { background: var(--ink); color: #fff; box-shadow: none; }

/* ---------- 20. Transitions entre pages (navigateurs récents) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease-respire); }

/* ---------- 21. Mouvement réduit : rien ne bouge, tout est là ---------- */
@media (prefers-reduced-motion: reduce) {
  .n4h *, .n4h *::before, .n4h *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hj-dot { animation: none; }
}

/* ---------- 22. Pages intérieures : gabarit commun ----------
   Le texte de l'article reste celui de Joomla/FaLang ; seuls le chrome et l'ouverture changent. */
.hj-sea--slim { height: clamp(140px, 21vh, 190px); }
@media (min-width: 960px) { .hj-sea--slim { height: clamp(190px, 25vh, 250px); } }
.hj-sea--slim .hj-sea__live { bottom: 12px; padding: 8px 12px; }
.hj-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-7); padding-block: var(--sp-6); }
@media (min-width: 960px) { .hj-top { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head aside"; align-items: start; padding-block: var(--sp-7); } }
.hj-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-4); font: 500 var(--t-meta)/1.3 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hj-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--sun-2); flex: none; }
.hj-top .hj-h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); }
.hj-head__lede p { margin: var(--sp-4) 0 0; max-width: 60ch; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); }
.hj-head__lede p:first-child { color: var(--ink); }
.hj-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.hj-pills li { display: inline-flex; align-items: center; gap: .4em; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1.25 var(--f-data); color: var(--ink-2); }
.hj-tonight__row--sun { margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .14); }
.hj-tonight__v { font: 500 22px/1 var(--f-data); color: var(--sun); font-variant-numeric: tabular-nums; }
/* Téléphone : « Ce soir » en version courte sous le titre ; le détail reste dans « Ce soir » de la barre */
@media (max-width: 959.98px) {
  :is(.hj-top, .hj-page) .hj-tonight { padding: var(--sp-4); }
  :is(.hj-top, .hj-page) .hj-tonight__t { font-size: 1.15rem; margin-bottom: var(--sp-1); }
  :is(.hj-top, .hj-page) .hj-tonight__row:not(:first-of-type), :is(.hj-top, .hj-page) .hj-tonight__incl { display: none; }
  :is(.hj-top, .hj-page) .hj-tonight__msg { margin-bottom: 0; }
  :is(.hj-top, .hj-page) .hj-tonight__link { min-height: 44px; margin-top: var(--sp-1); }
}
/* Pages de lecture : même grille que la page Plage, sans rangée de chapeau séparée */
@media (min-width: 960px) { .hj-grid.hj-page { grid-template-areas: "head aside" "main aside"; } }
.hj-page .hj-aside > .hj-tonight:first-child, .hj-top .hj-aside > .hj-tonight:first-child { margin-top: 0; }
/* Titre en deux niveaux : la seconde ligne commence par une capitale, même après « : » */
.hj-h1__pre + .hj-h1__main::first-letter { text-transform: uppercase; }
.hj-pills strong { font-weight: 500; color: var(--ink); }
.hj-body { padding-bottom: var(--sp-8); }
.hj-article { min-width: 0; }
.hj-article > :first-child { margin-top: 0; }
.hj-footer__credit { grid-column: 1 / -1; font-size: 13px; color: #A9BBD0; }
.hj-footer__credit a { color: #C9D6E5; text-decoration: underline; }
/* Bandeau cookies (inchangé) : au-dessus de la barre d'actions sur téléphone */
.n4h #n4c-consent { font-family: var(--f-body); }
@media (max-width: 959.98px) { .n4h #n4c-consent { bottom: calc(var(--bar-h) + 10px + env(safe-area-inset-bottom, 0px)); } }
/* Photo « Eau & vidange » : le fichier est déjà droit mais porte l'étiquette EXIF « tourner de 90° » (orientation 6),
   le navigateur la couchait. On ignore l'étiquette pour cette seule photo (même origine : la règle s'applique). */
.n4h img[src$="/IMG_2461.jpg"] { image-orientation: none; }
/* Liens dans le titre (H1) : soulignement soleil, plus fin que dans le texte */
.hj-h1 a { text-decoration-thickness: max(2px, .05em); text-underline-offset: .14em; text-decoration-color: var(--sun-2); }
.hj-h1 a:hover { text-decoration-color: var(--coral); }