:root {
    --bg: #0A1922;
    --surface: #112833;
    --fg: #EAF0EC;
    --muted: #7F97A1;
    --accent: #E7AE47;
    --accentfg: #0A1922;
    --border: #21363F;
    --link: #E7AE47;
    --font-heading: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --font-body: 'Alegreya Sans', 'Gill Sans', Calibri, 'Segoe UI', sans-serif;
    --radius: 2px;
    --base-size: 17px;
    --space: 34px;
}
@font-face{font-family:'Display Fallback';font-weight:700 900;src:local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),local('Roboto Bold'),local('Roboto-Bold'),local('Arial Bold'),local('Arial-BoldMT');size-adjust:66%;ascent-override:95%;line-gap-override:0%}
@font-face{font-family:'Label Fallback';font-weight:700;src:local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),local('Roboto Bold'),local('Roboto-Bold'),local('Arial Bold'),local('Arial-BoldMT');size-adjust:82%}
:root{--font-label:'Big Shoulders Text','Arial Narrow','Label Fallback',sans-serif;
  --fg-2:color-mix(in srgb,var(--fg) 72%,var(--bg));--surface-2:color-mix(in srgb,var(--surface) 92%,var(--fg));--accent-2:color-mix(in srgb,var(--accent) 80%,var(--bg));
  --track:.14em;--l-s:13px;--l-m:15px;--s-2:16px;--s-3:24px;--s-4:32px;--s-6:48px;--s-8:64px;--s-12:96px;--wrap:1180px;--gutter:24px}
*{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:var(--base-size)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main{flex:1 0 auto}
.sr-only,.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accentfg);padding:8px 12px;z-index:50}.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--font-heading);font-weight:700;margin:0;line-height:1;text-wrap:balance;text-transform:uppercase;letter-spacing:.01em;color:var(--fg)}
p{margin:0}
sup{font-size:.68em;line-height:0;vertical-align:.4em}
.lbl,.mast__nav a,.btn,.pill,.cap,.ess dt,th,.arrow,.sommaire li::before,.crumb{font-family:var(--font-label);font-weight:700;letter-spacing:var(--track);text-transform:uppercase}
.lbl,.mast__nav a,.btn{font-size:var(--l-m)}
.pill,.cap,.ess dt,th,.crumb{font-size:var(--l-s)}
.lbl{color:var(--fg-2)}
.sec-h{font-size:clamp(40px,5vw,64px)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:1px solid var(--accent);color:var(--accent);background:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--accent);color:var(--accentfg)}
.pill{display:inline-block;justify-self:start;align-self:start;padding:5px 9px;border:1px solid var(--muted);color:var(--fg-2)}
.pill--on{border-color:var(--accent);color:var(--accent)}
.crumb{color:var(--muted);margin:0 0 var(--s-3)}.crumb a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}.crumb a:hover{color:var(--accent)}
.lead{font-size:20px;color:var(--fg-2);max-width:56ch}
/* ───── Masthead ───── */
.mast{position:relative;z-index:5;border-bottom:3px solid var(--fg)}
.mast--hero{position:absolute;inset:0 0 auto 0;border-bottom:0}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:72px}
.mast__brand{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-heading);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.03em}
.brandmark{flex:none;display:inline-flex;width:.9em;height:.9em;color:var(--accent)}.brandmark svg{width:100%;height:100%;display:block}
.mast__right{display:flex;align-items:center;gap:var(--s-3)}
.mast__nav{display:flex;gap:28px}
.mast__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg-2)}
.mast__nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent);color:var(--fg)}
.srch{display:inline-flex;align-items:center;gap:6px;color:var(--fg-2)}
.srch input{width:150px;min-width:0;height:36px;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:14px;padding:0 10px;outline:none}
.srch input:focus{border-color:var(--accent)}.srch input::placeholder{color:var(--muted)}
.srch button{width:36px;height:36px;border:1px solid var(--border);background:none;color:var(--fg-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.srch button:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:720px){.mast .wrap{flex-wrap:wrap;padding-block:18px 0;row-gap:8px}.mast__nav{gap:var(--s-2);flex-wrap:wrap}.mast__nav a{font-size:13px;letter-spacing:.1em}.mast__right{width:100%;justify-content:space-between}.srch input{width:120px}}
/* ───── Héros : le banc ───── */
.hero{position:relative;min-height:min(88vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 55% at 50% -10%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 60%),radial-gradient(40% 40% at 18% 30%,color-mix(in srgb,var(--fg) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2) 0%,var(--bg) 70%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__rays{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(112deg,transparent 0 46px,color-mix(in srgb,var(--accent) 5%,transparent) 46px 52px,transparent 52px 130px);mask-image:linear-gradient(180deg,#000 0%,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:140px var(--s-8);display:grid;gap:var(--s-3)}
.hero h1{font-size:clamp(56px,12vw,168px);line-height:.98;max-width:min(100%,14ch);overflow-wrap:break-word}
.hero h1 em{font-style:normal;font-weight:900;color:var(--accent)}
.hero__deck{max-width:46ch;font-size:20px;color:var(--fg-2)}
.sommaire{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px;counter-reset:s}
.sommaire li{display:flex;align-items:baseline;gap:10px}
.sommaire li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-size:var(--l-s);color:var(--accent)}
.sommaire a{display:inline-block;padding-block:8px;font-size:19px;color:var(--fg);border-bottom:1px solid var(--muted)}.sommaire a:hover{color:var(--accent);border-color:var(--accent)}
.hint{font-size:14px;color:var(--muted);min-height:1em}
@media(prefers-reduced-motion:reduce){.hero__rays{display:none}}
/* ───── Bandes ───── */
.band,.tide,.guide .wrap{padding-block:var(--s-12)}
@media(max-width:720px){.band,.tide,.guide .wrap{padding-block:var(--s-8)}}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
@media(max-width:560px){.band-head{flex-direction:column;align-items:flex-start;gap:12px}}
.rail-nav{display:flex;align-items:center;gap:12px}
.arrow{width:44px;height:44px;border:1px solid var(--muted);background:none;color:var(--fg-2);font-size:18px;cursor:pointer}.arrow:hover{border-color:var(--accent);color:var(--accent)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,420px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:var(--surface-2) transparent;margin-inline:calc(50% - 50vw);padding-inline:max(var(--gutter),calc(50vw - var(--wrap)/2 + var(--gutter)));scroll-padding-inline:max(var(--gutter),calc(50vw - var(--wrap)/2 + var(--gutter)))}
.rail::-webkit-scrollbar{height:6px}.rail::-webkit-scrollbar-thumb{background:var(--surface-2)}
.fish{scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);padding:var(--s-3) 26px;display:grid;grid-template-rows:auto auto auto 1fr;gap:var(--s-2);min-height:320px;container-type:inline-size}
.fish h3{font-size:44px;line-height:.96}.fish h3{font-size:clamp(34px,13cqi,52px)}
.fish__sub{color:var(--fg-2);font-size:15px;line-height:1.5;max-width:30ch}
.fish__meta{margin:auto 0 0;font-size:15px;color:var(--muted)}.fish__meta time{color:var(--fg-2)}
.fish__media{margin:-24px -26px 0;aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}.fish__media img{width:100%;height:100%;object-fit:cover}
/* ───── Guide (article vedette) ───── */
.guide{background:var(--surface);border-block:1px solid var(--border)}
.guide .wrap{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
.plate{position:sticky;top:40px;aspect-ratio:4/5;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 50% at 30% 20%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 60%),linear-gradient(160deg,var(--surface-2),var(--bg))}
.plate img{width:100%;height:100%;object-fit:cover}
.plate svg{width:72%;height:auto;color:var(--fg-2);opacity:.9}
.guide-text{display:grid;gap:var(--s-3)}
.guide-text h2{font-size:clamp(48px,6.5vw,96px)}
.guide-text p{max-width:58ch;font-size:18px}
@media(max-width:860px){.guide .wrap{grid-template-columns:1fr}.plate{position:static;max-width:440px}}
/* ───── Table des saisons ───── */
.tide h2{margin-bottom:12px}.tide .lead{margin-bottom:var(--s-6)}
.tide-scroll{overflow-x:auto}.tide-scroll:focus-visible{outline-offset:6px}
.tide table{border-collapse:separate;border-spacing:0;width:100%;min-width:660px;font-variant-numeric:tabular-nums}
.tide th{color:var(--muted);text-align:center;padding:0 0 14px}
.tide tbody th{width:1%;font-family:var(--font-heading);font-weight:700;font-size:26px;letter-spacing:.01em;text-transform:none;color:var(--fg);text-align:left;padding:0 var(--s-3) 0 0;white-space:nowrap;height:44px;border-top:1px solid var(--border)}
.tide td{padding:0;height:44px;min-width:44px;border-top:1px solid var(--border)}
.tide td i{display:block;height:20px;margin:0 3px;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.tide td.on i{background:var(--accent)}.tide td.mi i{background:var(--accent-2);opacity:.75}.tide td.now i{box-shadow:inset 0 0 0 1px var(--fg)}
.legend{display:flex;flex-wrap:wrap;gap:28px;margin-top:28px;font-size:15px;color:var(--fg-2)}.legend i{display:inline-block;width:22px;height:12px;vertical-align:-1px;margin-right:8px}
/* ───── Grille de cartes (rubrique, auteur, recherche, à lire ensuite) ───── */
.grid{display:grid;gap:18px}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);display:grid;grid-template-rows:auto auto auto 1fr;gap:12px;padding:0 22px 22px;container-type:inline-size}
.card__media{margin:0 -22px 8px;aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}.card__media img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:30px;line-height:.96;padding-top:22px}.card__media+.pill,.card__media+h3{padding-top:0}
.card:not(:has(.card__media)) .pill{margin-top:22px}
.card__dek{color:var(--fg-2);font-size:15px;line-height:1.5}
.card__foot{margin-top:auto;font-size:14px;color:var(--muted)}
/* ───── Article ───── */
.arthead{max-width:760px;padding-top:var(--s-4)}
.arthead h1{font-size:clamp(48px,7vw,96px)}
.arthead__dek{font-size:20px;line-height:1.5;color:var(--fg-2);margin-top:var(--s-2);max-width:680px}
.byline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:15px;color:var(--muted)}
.byline b{color:var(--fg);font-weight:500}.byline a{text-decoration:underline;text-underline-offset:3px;color:var(--fg)}
.share{display:flex;gap:16px}.share a{text-decoration:underline;text-underline-offset:3px;color:var(--fg-2)}
.herofig{margin:var(--s-4) 0 0}.herofig img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface)}
.herofig figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);padding-block:var(--s-4) var(--s-8)}
@media(min-width:1024px){.article{grid-template-columns:minmax(0,660px) 300px;gap:40px}}
.prose{min-width:0}
.prose p,.prose li{font-size:18px;line-height:1.65}
.prose p{margin:0 0 1.2em}
.prose h2{font-size:34px;margin:1.6em 0 .5em}.prose h3{font-size:24px;margin:1.4em 0 .4em}
.prose a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}.prose li{margin:.3em 0}
.prose blockquote{margin:1.6em 0;padding:16px 22px;background:var(--surface);border-left:3px solid var(--accent);font-style:italic;color:var(--fg-2)}
.prose blockquote p{margin:0}
.prose figure{margin:1.6em 0}.prose figure figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px;margin:1em 0 1.4em;font-variant-numeric:tabular-nums}
.prose th{text-align:left;padding:8px 12px 8px 0;border-bottom:2px solid var(--fg);color:var(--fg)}.prose td{padding:8px 12px 8px 0;border-bottom:1px solid var(--border);vertical-align:top}
.prose hr{border:0;border-top:1px solid var(--border);margin:2em 0}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--surface);padding:.1em .35em}
.aside{position:sticky;top:20px;display:grid;gap:var(--s-3);align-content:start}
.aside .lbl{display:block;margin-bottom:4px}
.aside__list a{display:block;padding:8px 0;border-bottom:1px solid var(--border);font-size:15px}
.box{background:var(--surface);padding:16px 18px 20px;border-top:3px solid var(--fg)}
.ess dt{color:var(--muted);margin-top:12px}.ess dd{margin:2px 0 0;font-family:var(--font-heading);font-weight:700;font-size:26px;line-height:1;overflow-wrap:anywhere}
.authorcard{display:grid;grid-template-columns:56px 1fr;gap:16px;margin-top:var(--s-6);padding:22px;background:var(--surface);border:1px solid var(--border)}
.avatar{width:56px;height:56px;border-radius:999px;background:var(--accent);color:var(--accentfg);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:20px;flex:none}
.authorcard h3{font-size:24px}.authorcard p{font-size:15px;color:var(--fg-2);margin-top:6px}
/* ───── Rubrique / À propos / utilitaires ───── */
.archead{padding-top:var(--s-4)}.archead h1{font-size:clamp(48px,7vw,96px);margin-top:12px}
.section{padding-block:var(--s-6) var(--s-12)}
.about{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);padding-block:var(--s-4) var(--s-12)}
@media(min-width:900px){.about{grid-template-columns:minmax(0,660px) 300px;gap:56px}}
.about h1{font-size:clamp(48px,7vw,96px)}
.about .story p{font-size:18px;line-height:1.65;margin:0 0 1.2em}.about .story p:first-child{font-size:20px;color:var(--fg-2)}
.portrait{aspect-ratio:1;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center}.portrait .avatar{width:120px;height:120px;font-size:44px}
.doc{max-width:680px;padding-block:var(--s-4) var(--s-12)}.doc h1{font-size:clamp(40px,6vw,72px);margin-bottom:var(--s-3)}.doc h2{font-size:24px;margin:1.6em 0 .4em}.doc p{font-size:17px;line-height:1.6;margin:0 0 1em}
.empty{padding-block:var(--s-12);text-align:left;max-width:640px}.empty h1{font-size:clamp(48px,7vw,96px);margin-bottom:var(--s-2)}.empty p{color:var(--fg-2);font-size:18px}
.searchpage{display:flex;gap:10px;max-width:560px;margin-top:var(--s-3)}
.searchpage input{flex:1;min-width:0;height:48px;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:17px;padding:0 14px;outline:none}.searchpage input:focus{border-color:var(--accent)}
#search-count{margin-top:14px;color:var(--fg-2)}
/* ───── Pied ───── */
.foot{border-top:1px solid var(--border);padding-block:var(--s-6) 40px;color:var(--muted);font-size:15px;margin-top:auto}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);align-items:end}
.foot__brand{font-family:var(--font-heading);font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-label);font-weight:700;font-size:var(--l-m);letter-spacing:var(--track);text-transform:uppercase}