/* Direction verrouillée HJ-2 « convergence » : voir design/ROUND-2-CONTEXT.md */
:root{
  --paper:#FFF4E8; --surface:#FFFAF3; --ar:#0B3D2E; --fr:#7A1E2C; --accent:#A87410; --muted:#6B6B6B;
  --rule:#EBDCC6; --field:#9C8A70; --on-ar:#FFF4E8; --accent-on-ar:#E2B45C;
  --ink:var(--fr); --gold:var(--accent); --bar:var(--ar); --bar-on:var(--accent);
  --gutter:clamp(1rem,3vw,2.75rem); --radius:4px;
  color-scheme:light; box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0D2620; --surface:#12302A; --ar:#CFE6DA; --fr:#F1C8CE; --accent:#E2B45C; --muted:#A6B3AD; --rule:#23443B; --field:#6A8C80; --on-ar:#0D2620; --accent-on-ar:#8A5E0C; color-scheme:dark; }
}
:root[data-theme="dark"]{ --paper:#0D2620; --surface:#12302A; --ar:#CFE6DA; --fr:#F1C8CE; --accent:#E2B45C; --muted:#A6B3AD; --rule:#23443B; --field:#6A8C80; --on-ar:#0D2620; --accent-on-ar:#8A5E0C; color-scheme:dark; }

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--fr);font-family:"Alexandria",system-ui,sans-serif;font-weight:300;font-size:1.0625rem;line-height:1.7;font-kerning:normal;overflow-x:hidden}
strong,b,dt,th{font-weight:500}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
a:hover{color:var(--ar);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ar{font-family:"Alexandria",sans-serif;direction:rtl;unicode-bidi:isolate;color:var(--ar)}
h2,h3,.gem-title,dl.res dt{text-wrap:balance}
p,dd,li{text-wrap:pretty}
code{font-size:.9em;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:.05em .35em}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ar);color:var(--on-ar);padding:.6rem 1rem;font-weight:500;text-decoration:none}
.skip:focus{top:1rem}
button,a,input,select{touch-action:manipulation}
body:has(.player.open){padding-bottom:6.5rem}

/* ---------------------------------------------------------------- ouverture : deux langues qui convergent */
.hero{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:center;padding:clamp(1rem,3vh,2rem) clamp(1rem,4vw,3rem) 10vh}
.hero-photo{grid-column:1/-1;margin:0 0 clamp(2rem,5vh,3.5rem)}
.hero-photo img{display:block;width:100%;height:clamp(16rem,46vh,30rem);object-fit:cover;object-position:52% 68%;border-radius:var(--radius);filter:grayscale(1) contrast(1.08);opacity:0;animation:in-photo 1.4s ease forwards}
.hero-photo figcaption{margin-top:.5rem;text-align:center;font-size:.82rem;color:var(--muted)}
@keyframes in-photo{to{opacity:1}}
.hero .fr{text-align:right}
.hero .latin{margin:0;font-weight:800;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.02em;color:var(--fr)}
.hero .dates{margin:1rem 0 0;color:var(--accent);font-weight:500;font-size:1.5rem}
.hero .lede{margin:2.4rem 0 0 auto;max-width:30ch;font-size:1.2rem;line-height:1.55}
.hero .listen{margin-top:2.2rem;display:inline-flex;align-items:center;gap:.85rem;flex-direction:row-reverse;text-align:right;background:none;border:0;padding:0;font:inherit;color:var(--fr);cursor:pointer}
.hero .listen .disc{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--ar);color:var(--on-ar);display:grid;place-items:center;font-size:1rem;transition:transform .2s}
.hero .listen:hover .disc{transform:scale(1.08)}
.hero .listen span:last-child{font-weight:500}
.hero .listen small{display:block;font-weight:300;color:var(--muted);font-size:.9rem}
.hero .ar-side{direction:rtl}
.hero h1{margin:0;font-weight:800;font-size:clamp(3.2rem,7.2vw,7rem);line-height:1.3;text-align:left;color:var(--ar)}
.hero .mecca{margin:1rem 0 0;font-size:1.7rem;font-weight:500;text-align:left;color:var(--accent)}
.hero .tr{margin:.1rem 0 0;direction:ltr;text-align:left;color:var(--muted);font-size:.95rem}
.hero .fr > *{opacity:0;transform:translateX(-1.5rem);animation:in-fr 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero .ar-side > *{opacity:0;transform:translateX(1.5rem);animation:in-ar 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero .fr > :nth-child(2),.hero .ar-side > :nth-child(2){animation-delay:.12s}
.hero .fr > :nth-child(3),.hero .ar-side > :nth-child(3){animation-delay:.24s}
.hero .fr > :nth-child(4){animation-delay:.36s}
@keyframes in-fr{to{opacity:1;transform:none}}
@keyframes in-ar{to{opacity:1;transform:none}}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;row-gap:2.5rem;min-height:auto;padding-top:9vh}
  .hero .ar-side{order:-1}
  .hero-photo{order:-2;margin-bottom:0}
  .hero h1,.hero .mecca{text-align:right}
  .hero .tr{text-align:right}
}

/* ---------------------------------------------------------------- les lieux en couleur */
.lieux{padding:0 0 clamp(3rem,6vw,5rem);border-top:0}
.lieux h2{padding:0 clamp(1rem,4vw,3rem)}
.lieux .rail{display:flex;gap:clamp(.75rem,1.5vw,1.25rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem clamp(1rem,4vw,3rem) 1rem;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.lieux figure{flex:0 0 min(78vw,30rem);margin:0;scroll-snap-align:start}
.lieux img{display:block;width:100%;height:clamp(15rem,32vw,24rem);object-fit:cover;border-radius:var(--radius)}
.lieux figcaption{display:grid;grid-template-columns:1fr auto;gap:0 1rem;margin-top:.7rem;font-size:.92rem;line-height:1.45}
.lieux figcaption .p{font-weight:500;color:var(--fr)}
.lieux figcaption .ar{font-weight:500;font-size:1.05rem}
.lieux figcaption .why{grid-column:1/-1;color:var(--muted)}
.lieux figcaption .cr{grid-column:1/-1;color:var(--muted);font-size:.8rem}

/* ---------------------------------------------------------------- navigation */
.topnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
.topnav .wrap{display:flex;align-items:center;gap:.15rem;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-top:.45rem;padding-bottom:.45rem}
.topnav .wrap::-webkit-scrollbar{display:none}
.topnav a{text-decoration:none;color:var(--fr);font-size:.92rem;font-weight:400;padding:.35rem .7rem;border-radius:999px}
.topnav a:hover{color:var(--ar)}
.topnav a[aria-current="true"]{background:var(--ar);color:var(--on-ar)}
.topnav .brand{font-weight:800;font-size:1.15rem;color:var(--ar);margin-right:.5rem}
.theme-toggle{flex:none;margin-left:auto;background:none;border:1px solid var(--field);color:var(--fr);border-radius:999px;min-width:2.4rem;height:2.4rem;cursor:pointer;font:inherit;font-size:1rem}
.theme-toggle:hover{color:var(--ar);border-color:var(--ar)}
@media (pointer:coarse){.topnav a{min-height:44px;display:inline-flex;align-items:center}a.play{min-height:44px}}

/* ---------------------------------------------------------------- sections et titres convergents */
section{padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);border-top:1px solid var(--rule)}
h2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:baseline;margin:0 0 2rem;font-weight:800;font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.15;letter-spacing:-.02em;text-align:right;color:var(--fr)}
h2 .ar{font-weight:800;letter-spacing:0;font-size:1.05em;line-height:1.5;text-align:left}
h3{font-size:1.25rem;line-height:1.4;margin:2.4rem 0 .6rem;font-weight:500}
h3 .ar{font-weight:500}
@media (max-width:760px){h2{grid-template-columns:1fr;text-align:left}h2 .ar{order:-1;text-align:right}}
.intro{max-width:40rem;color:var(--fr);font-size:1.08rem;margin:0 0 2rem}
.count{color:var(--muted);font-size:.95rem;margin:0 0 .8rem;max-width:52rem}
.note{background:var(--surface);border-left:3px solid var(--accent);padding:1.2rem 1.4rem;max-width:52rem}

/* photos d'archives : noir et blanc d'origine */
.photo{margin:0}
.photo .frame{overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.photo img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.photo figcaption{margin-top:.55rem;font-size:.88rem;line-height:1.45;color:var(--muted)}
.photo.inset{float:right;width:min(46%,20rem);margin:.4rem 0 1rem 1.8rem}
@media (max-width:640px){.photo.inset{float:none;width:100%;margin:1.4rem 0}}
.strip{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;margin:0 0 1rem;align-items:start}
.strip .photo:first-child{grid-row:span 2}
@media (max-width:720px){.strip{grid-template-columns:1fr 1fr}.strip .photo:first-child{grid-column:1/-1;grid-row:auto}}

/* ---------------------------------------------------------------- biographie */
.bio{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.bio{grid-template-columns:1fr}.bio aside{order:-1;position:static;display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:1.5rem;align-items:start}.bio aside .photo{margin:0}}
@media (max-width:520px){.bio aside{grid-template-columns:1fr}.bio aside .photo{max-width:16rem}}
.bio article{max-width:40rem}
.bio article h3{display:grid;grid-template-columns:1fr auto;gap:0 1rem;align-items:baseline;font-size:1.4rem;margin:3rem 0 .7rem}
.bio article h3 .ar{font-size:1.3rem;text-align:left}
.bio article p{margin:0 0 1.1rem}
.bio aside{position:sticky;top:4.8rem;font-size:.95rem}
.bio aside .photo{margin-bottom:1.4rem}
.bio aside dl{margin:0}
.bio aside dt{color:var(--muted);font-size:.85rem;margin-top:.8rem;font-weight:400}
.bio aside dd{margin:0}
.bio aside dd.ar{font-size:1.15rem;text-align:left}
.pull{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:500;line-height:1.4;margin:2.2rem 0;padding-left:1.4rem;border-left:3px solid var(--accent);color:var(--ar)}
.pull small{display:block;margin-top:.5rem;font-size:.88rem;font-weight:300;color:var(--muted)}
.sources-bio{columns:2 18rem;column-gap:3rem;font-size:.93rem;color:var(--muted);padding-left:1.1rem}
.sources-bio li{margin-bottom:.4rem;break-inside:avoid}

/* ---------------------------------------------------------------- chronologie */
ol.chrono{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));border-top:1px solid var(--rule)}
ol.chrono li{padding:1.1rem 1.2rem 1.4rem 0;border-bottom:1px solid var(--rule);font-size:.98rem;line-height:1.5}
ol.chrono .y{display:block;font-size:1.6rem;font-weight:800;color:var(--accent);margin-bottom:.3rem;letter-spacing:-.01em}
ol.chrono .ar{display:block;margin-top:.35rem;font-size:1rem;text-align:right}

/* ---------------------------------------------------------------- carte et frise */
.mapbox{border-radius:var(--radius);background:var(--surface);overflow-x:auto;padding:clamp(.5rem,2vw,1.5rem)}
.mapbox svg{display:block;width:100%;min-width:680px;height:auto}
.legend{color:var(--muted);font-size:.93rem;margin:.8rem 0 0}
.frise{margin:0;padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);border-top:1px solid var(--rule)}
.bars{display:flex;align-items:center;gap:clamp(2px,.5vw,5px);height:clamp(150px,22vw,240px);padding:.5rem 0;overflow-x:auto}
.bars button{flex:1 0 9px;min-width:9px;height:100%;background:transparent;border:0;padding:0;cursor:pointer;display:flex;align-items:center}
.bars button::before{content:"";display:block;width:100%;height:var(--h,4%);min-height:3px;margin:auto;border-radius:999px;background:var(--bar);transform:scaleY(.04);transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),background .2s}
.bars.on button::before{transform:none}
.bars button.empty{cursor:default}
.bars button.empty::before{background:var(--rule);height:3px}
.bars button:hover:not(.empty)::before{background:var(--fr)}
.bars button[aria-pressed="true"]::before{background:var(--bar-on)}
.axis{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);margin-top:.6rem}

/* ---------------------------------------------------------------- listes */
ol.gems{list-style:none;margin:0;padding:0;counter-reset:g;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:0 2.5rem}
ol.gems li{display:grid;grid-template-columns:2.4rem 1fr;gap:0 1rem;padding:1.3rem 0;border-bottom:1px solid var(--rule);counter-increment:g}
ol.gems li::before{content:counter(g);font-weight:800;font-size:1.8rem;line-height:1.1;color:var(--accent)}
.gem-title{font-weight:500;font-size:1.05rem;line-height:1.45}
.gem-title .ar{display:block;font-weight:800;font-size:1.3rem;line-height:1.6;text-align:right}
.gem-why{margin:.3rem 0 .5rem;color:var(--muted);font-size:.97rem}
ol.rank{margin:0;padding-left:1.8rem;max-width:52rem}
ol.rank li{padding:.7rem 0 .7rem .3rem;border-bottom:1px solid var(--rule)}
ol.rank li::marker{color:var(--accent);font-weight:800}
ol.rank .n{float:right;margin-left:1rem;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
ol.rank.hard em{font-style:normal;font-size:.85rem;margin-left:.4rem;color:var(--accent);font-weight:500;white-space:nowrap}
dl.res{margin:0;max-width:52rem}
dl.res dt{font-weight:500;margin-top:1.4rem;font-size:1.05rem}
dl.res dt .ar{margin-left:.6rem;font-size:1.1rem}
dl.res dd{margin:.25rem 0 0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:0 3.5rem}

/* ---------------------------------------------------------------- tableaux */
.tablebox{overflow:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.75rem .95rem;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-weight:500;color:var(--muted);font-size:.84rem;background:var(--surface);position:sticky;top:0;z-index:1;box-shadow:inset 0 -1px 0 var(--rule)}
td:first-child{min-width:min(17rem,60vw)}
td:nth-child(2){min-width:9rem}
td .ar{display:block;font-size:1.15rem;font-weight:500;line-height:1.6;text-align:right}
td .fr{display:block;font-size:.92rem;color:var(--muted)}
td.yr{font-variant-numeric:tabular-nums;white-space:nowrap}
td.qual{white-space:nowrap;font-size:.9rem}
td.qual .qb{color:var(--accent)}
td.fame{white-space:nowrap;color:var(--accent);letter-spacing:.06em}
tr.star .ar::after{content:" ✦";color:var(--accent);font-size:.85rem}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.type{display:inline-block;font-size:.8rem;padding:.08rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--fr) 9%,transparent);white-space:nowrap}
.type.studio{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.type.radio,.type.tv{background:color-mix(in srgb,var(--ar) 14%,transparent)}

/* lien d'écoute : pastille verte */
a.play{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;white-space:nowrap;font-weight:500;color:var(--ar)}
a.play::before{content:"▶";flex:none;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--ar);color:var(--on-ar);display:grid;place-items:center;font-size:.62rem;padding-left:.12rem;transition:transform .2s}
a.play:hover::before{transform:scale(1.1)}
a.play.is-playing::before{content:"❚❚";background:var(--accent);padding-left:0;letter-spacing:-.1em}

/* ---------------------------------------------------------------- filtres et nuage */
.filters{display:flex;flex-wrap:wrap;gap:.9rem 1rem;align-items:end;margin:0 0 1.2rem}
.filters label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);gap:.3rem}
.filters input,.filters select{font:inherit;font-size:1rem;font-weight:400;color:var(--fr);background:var(--surface);border:1px solid var(--field);border-radius:var(--radius);padding:.55rem .75rem;min-width:10rem}
.filters input:focus,.filters select:focus{outline:2px solid var(--ar);outline-offset:1px}
.filters input[type="search"]{min-width:min(100%,18rem)}
.filters button{font:inherit;font-size:.95rem;background:transparent;color:var(--fr);border:1px solid var(--field);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer}
.filters button:hover{border-color:var(--ar);color:var(--ar)}
.filters label.chk{flex-direction:row;align-items:center;gap:.5rem;font-size:.98rem;color:var(--fr);padding-bottom:.55rem}
.filters input[type="checkbox"]{min-width:0;accent-color:var(--ar);width:1.1rem;height:1.1rem}
@media (max-width:560px){.filters label{flex:1 1 100%}.filters input,.filters select{min-width:0;width:100%}}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.5rem 2rem;margin:0 0 2rem}
.summary h3{margin:0 0 .4rem;font-size:.95rem;color:var(--muted);font-weight:500}
.summary ul{list-style:none;margin:0;padding:0}
.summary li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--rule);padding:.25rem 0;font-variant-numeric:tabular-nums}
.summary li button{font:inherit;background:none;border:0;padding:0;color:var(--fr);cursor:pointer;text-align:left}
.summary li button:hover{color:var(--ar)}
.cloud{display:flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:baseline;margin:0 0 1.4rem;padding:1.2rem 1.4rem;background:var(--ar);border-radius:var(--radius);color:var(--on-ar)}
.cloud button{font-family:inherit;font-weight:400;background:none;border:0;padding:.1rem .3rem;color:var(--on-ar);cursor:pointer;line-height:1.3;border-radius:3px}
.cloud button:hover{color:var(--accent-on-ar)}
.cloud button[aria-pressed="true"]{background:var(--accent-on-ar);color:var(--ar)}
.cloud button small{opacity:.7;font-size:.68em}
.stag{display:inline-block;font-size:.8rem;border:0;border-radius:999px;padding:.08rem .55rem;margin:0 .25rem .25rem 0;cursor:pointer;background:color-mix(in srgb,var(--ar) 12%,transparent);color:var(--ar);font-family:inherit}
.stag:hover{background:color-mix(in srgb,var(--ar) 24%,transparent)}

/* ---------------------------------------------------------------- galerie vidéo */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1.8rem 1.4rem;margin:0 0 2rem}
.gcard{display:flex;flex-direction:column;gap:.35rem}
.gcard .gframe{order:-1}
.gcard .ar{font-size:1.15rem;font-weight:500;text-align:right;display:block}
.gcard .gt{font-weight:500;font-size:1.02rem;line-height:1.4}
.gcard .gm{font-size:.88rem;color:var(--muted)}
.gframe{position:relative;aspect-ratio:16/9;background:var(--ar);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 0 .4rem;overflow:hidden}
.gframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gframe button{font:inherit;font-weight:500;background:var(--on-ar);color:var(--ar);border:0;border-radius:999px;padding:.5rem 1.2rem;cursor:pointer}
.gtag{display:inline-block;font-size:.78rem;border-radius:999px;padding:0 .5rem;margin-right:.4rem;background:color-mix(in srgb,var(--fr) 10%,transparent)}
.gframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gframe img+button{position:relative;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.gcard .gt[dir]{text-align:start}
.more{display:block;margin:0 auto 2rem;font:inherit;font-weight:500;background:transparent;color:var(--ink);border:1px solid currentColor;border-radius:999px;padding:.55rem 1.4rem;cursor:pointer}
.more[hidden]{display:none}

/* ---------------------------------------------------------------- pied de page */
footer.site{background:var(--ar);color:var(--on-ar);padding:clamp(3rem,7vw,5rem) 0 7rem;margin-top:4rem;font-size:.95rem}
footer.site .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:end}
footer.site .sig{grid-column:2;grid-row:1/span 3;font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);color:var(--accent-on-ar);line-height:1.3;margin:0;direction:rtl;text-align:left}
footer.site p{grid-column:1;text-align:right;margin:.3rem 0;max-width:34rem;justify-self:end}
footer.site a{color:inherit}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr}footer.site .sig{grid-column:1;grid-row:auto;text-align:right}footer.site p{text-align:left;justify-self:start}}

/* ---------------------------------------------------------------- lecteur */
.player{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;width:min(46rem,calc(100% - 1.5rem));transform:translate(-50%,calc(100% + 2rem));transition:transform .45s cubic-bezier(.2,.8,.2,1);background:var(--ar);color:var(--on-ar);border-radius:16px;box-shadow:0 18px 40px -16px rgba(11,61,46,.55);padding:.65rem .9rem .65rem .65rem;display:grid;grid-template-columns:auto auto 1fr auto;gap:.2rem .9rem;align-items:center}
.player.open{transform:translate(-50%,0)}
.player .pp{width:3rem;height:3rem;border-radius:50%;border:0;background:var(--accent-on-ar);color:var(--ar);display:grid;place-items:center;cursor:pointer;grid-row:span 2;font-size:1rem}
.player .eq{display:flex;gap:3px;align-items:flex-end;height:1.4rem;grid-row:span 2}
.player .eq i{width:3px;height:30%;border-radius:2px;background:var(--accent-on-ar);opacity:.5}
.player.playing .eq i{opacity:1;animation:eq 1s ease-in-out infinite alternate}
.player.playing .eq i:nth-child(2){animation-delay:-.4s;animation-duration:.8s}
.player.playing .eq i:nth-child(3){animation-delay:-.2s;animation-duration:1.15s}
.player.playing .eq i:nth-child(4){animation-delay:-.6s;animation-duration:.9s}
@keyframes eq{from{height:20%}to{height:100%}}
.player .meta{min-width:0;line-height:1.35}
.player .meta .ar{display:block;color:inherit;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.player .meta .fr{display:block;font-size:.84rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .side{display:flex;gap:.3rem;align-items:center;grid-row:span 2}
.player .side a,.player .side button{color:inherit;background:none;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;font:inherit;font-size:.8rem;padding:.3rem .65rem;cursor:pointer;text-decoration:none}
.player .track{display:flex;align-items:center;gap:.6rem;font-size:.78rem;opacity:.85;font-variant-numeric:tabular-nums}
.player input[type=range]{flex:1;min-width:0;accent-color:var(--accent-on-ar);height:4px}
@media (max-width:560px){.player{grid-template-columns:auto 1fr auto}.player .eq{display:none}.player .side a{display:none}}

/* ================================================================ site multipage (ajouté à style.css par design/multipage.py) */

/* ---- performances : rien d'animé ni de flouté au défilement ---- */
html{scroll-padding-top:4.75rem}
/* les grandes sections hors écran ne sont ni mises en page ni peintes tant qu'on ne s'en approche pas */
.content > section + section,.content > .frise{content-visibility:auto;contain-intrinsic-size:auto 1100px}
main{display:block;overflow-wrap:break-word}
body.has-player{padding-bottom:6.5rem}

/* ---- en-tête commun ---- */
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;gap:.6rem 1rem;min-height:3.75rem;position:relative}
.site-head .brand{display:flex;flex-direction:column;line-height:1.2;text-decoration:none;margin-right:auto;padding:.35rem 0}
.site-head .brand [lang="ar"]{font-weight:800;font-size:1.2rem;color:var(--ar)}
.site-head .brand .lat{font-size:.72rem;font-weight:400;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem}
.menu a{display:inline-flex;align-items:center;min-height:2.5rem;padding:.25rem .6rem;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:400;color:var(--fr);white-space:nowrap}
.menu a:hover{color:var(--ar);background:color-mix(in srgb,var(--ar) 7%,transparent)}
.menu a[aria-current="page"]{background:var(--ar);color:var(--on-ar)}
.menu-toggle{display:none;align-items:center;gap:.5rem;font:inherit;font-size:.95rem;font-weight:500;color:var(--fr);background:none;border:1px solid var(--field);border-radius:999px;min-height:2.6rem;padding:0 1rem;cursor:pointer}
.menu-toggle .bars3{display:inline-grid;gap:3px}
.menu-toggle .bars3 i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
.theme-toggle{margin-left:0}
@media (max-width:1240px){
  .menu-toggle{display:inline-flex}
  .menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);padding:.4rem clamp(1rem,4vw,2.5rem) 1rem;max-height:calc(100vh - 3.75rem);overflow:auto;overscroll-behavior:contain}
  .js .menu{display:none}
  .js .site-head.open .menu{display:block}
  .menu ul{flex-direction:column;gap:0}
  .menu a{display:flex;width:100%;min-height:46px;font-size:1.05rem;border-radius:var(--radius)}
  .menu a{gap:1rem}
  .menu a span{flex:1 1 auto}
  .menu a small{flex:none;font-size:1rem;color:var(--ar);font-weight:500}
  .menu a[aria-current="page"] small{color:inherit}
  html:not(.js) .site-head .wrap{flex-wrap:wrap}
  html:not(.js) .menu{position:static;flex-basis:100%;border:0;padding:0 0 .6rem;max-height:none}
  html:not(.js) .menu ul{flex-direction:row;flex-wrap:wrap}
  html:not(.js) .menu a{width:auto;min-height:40px}
}
@media (min-width:1241px){.menu ul{flex-wrap:nowrap}.menu a small{display:none}}
@media (max-width:420px){.site-head .brand .lat{display:none}.menu-toggle .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ---- tête de page ---- */
.page-head{padding:clamp(2.5rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem)}
h1.page,.content section > h1{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:baseline;margin:0 0 1.4rem;font-weight:800;font-size:clamp(2.1rem,5vw,4rem);line-height:1.1;letter-spacing:-.02em;text-align:right;color:var(--fr)}
h1.page .ar,.content section > h1 .ar{font-weight:800;letter-spacing:0;font-size:1.02em;line-height:1.45;text-align:left}
@media (max-width:760px){h1.page,.content section > h1{grid-template-columns:1fr;text-align:left}h1.page .ar,.content section > h1 .ar{order:-1;text-align:right}}
.page-head .lede{max-width:42rem;font-size:1.15rem;line-height:1.6;margin:0}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.8rem 0 0;padding:0}
.toc a{display:inline-flex;align-items:center;min-height:2.5rem;padding:.2rem .95rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface);text-decoration:none;font-size:.92rem}
.toc a:hover{border-color:var(--ar);color:var(--ar)}
.content > section:first-child{border-top:1px solid var(--rule)}
.content > section:first-child:has(> h1){border-top:0;padding-top:clamp(2.5rem,7vw,5rem)}

/* ---- accueil ---- */
.home .hero{padding-bottom:clamp(2.5rem,7vh,4.5rem);overflow-x:clip}
.home-nav{padding-top:clamp(2.5rem,6vw,4rem)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));gap:1rem}
.cards a{display:flex;flex-direction:column;height:100%;padding:1.2rem 1.3rem 1.25rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--fr)}
.cards a:hover{border-color:var(--ar)}
.cards .t{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:800;font-size:1.3rem;line-height:1.25}
.cards .t .ar{font-weight:500;font-size:1.1rem}
.cards .d{margin:.55rem 0 0;color:var(--fr);font-size:.97rem;line-height:1.5}
.cards .s{margin:.6rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.45}
.cards .n{margin-top:auto;padding-top:.9rem;color:var(--accent);font-weight:500;font-size:.9rem}

/* ---- pages précédente / suivante ---- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:clamp(3rem,6vw,4.5rem) auto 0}
.pager a{display:block;padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:var(--radius);text-decoration:none;font-weight:500}
.pager a:hover{border-color:var(--ar);color:var(--ar)}
.pager small{display:block;color:var(--muted);font-weight:300;font-size:.82rem}
.pager .next{grid-column:2;text-align:right}
@media (max-width:520px){.pager{grid-template-columns:1fr}.pager .next{grid-column:1}}

/* ---- pied de page ---- */
footer.site .fnav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.2rem 1rem;list-style:none;padding:0;margin:0 0 1.4rem;grid-column:1;justify-self:end;max-width:34rem}
footer.site .fnav a{text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
@media (max-width:760px){footer.site .fnav{justify-content:flex-start;justify-self:start}}

/* ---- tableaux : jamais de défilement horizontal ----
   Au-dessus de 860 px : tableau. Les cellules peuvent passer à la ligne et les
   largeurs minimales sont modestes : quand la place suffit, rien ne change ; quand
   elle manque, les colonnes se resserrent au lieu de pousser la dernière hors du
   cadre. De 861 à 1200 px, les marges des cellules sont en plus réduites.
   Jusqu'à 860 px : fiches, une par ligne du tableau, avec le nom de chaque colonne.
   Aucune colonne n'est masquée. */
.tablebox{max-height:none}
.tablebox td:first-child{min-width:min(11rem,60vw)}
.tablebox td:nth-child(2){min-width:6.5rem}
.tablebox td.qual,.tablebox td.fame,.tablebox td.yr,.tablebox td .type{white-space:normal}
@media (min-width:861px) and (max-width:1200px){
  .tablebox th,.tablebox td{padding:.65rem .5rem}
  .tablebox th:first-child,.tablebox td:first-child{padding-left:.8rem}
  .tablebox th:last-child,.tablebox td:last-child{padding-right:.8rem}
  .tablebox a.play{gap:.35rem}
}
@media (max-width:860px){
  .tablebox{overflow:visible;border:0;background:none;border-radius:0}
  .tablebox table,.tablebox tbody,.tablebox tr,.tablebox td{display:block;width:auto}
  .tablebox thead{display:none}
  .tablebox tr{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:.7rem .95rem .8rem;margin:0 0 .75rem}
  .tablebox td{border:0;padding:.18rem 0;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}
  .tablebox td[data-label]{display:flow-root;padding-left:6.9rem;font-size:.92rem}
  .tablebox td[data-label]::before{content:attr(data-label);float:left;margin:.2rem 0 0 -6.9rem;width:6.3rem;color:var(--muted);font-size:.76rem;font-weight:400;line-height:1.3}
  .tablebox td[data-label] .ar{text-align:left;font-size:1.05rem}
  .tablebox td:first-child{padding-bottom:.4rem}
  .tablebox td:first-child .ar{font-size:1.25rem;text-align:right}
  .tablebox tbody tr:hover{background:var(--surface)}
}

/* ---- petits écrans : le nom arabe et l'en-tête tiennent dans 360 px ---- */
@media (max-width:480px){.hero h1{font-size:10.4vw}}
@media (max-width:400px){
  .site-head .wrap{gap:.5rem}
  .site-head .brand [lang="ar"]{font-size:1.05rem}
  .menu-toggle{padding:0 .8rem}
}

/* ---- filtres sur téléphone : deux par ligne, la recherche sur toute la largeur ---- */
@media (max-width:560px){
  .filters{gap:.7rem .7rem}
  .filters label{flex:1 1 calc(50% - .35rem);min-width:0}
  .filters label:has(input[type="search"]){flex-basis:100%}
  .filters label.chk{flex-basis:auto}
  .filters input,.filters select{padding:.5rem .55rem;font-size:.95rem}
}

/* ---- divers ---- */
.mapbox svg{min-width:560px}
/* téléphone : la carte entière, réduite, plutôt qu'une carte coupée à droite (comme mashahat) */
@media (max-width:700px){.mapbox svg{min-width:0}.mapbox{overflow:visible;padding:.4rem}}
@media (max-width:560px){.bars button{flex-basis:5px;min-width:5px}.bars{gap:2px}}
.gframe img{background:var(--ar)}
.gcard[hidden]{display:none}
.noscript{background:var(--surface);border-left:3px solid var(--accent);padding:.8rem 1.1rem}
ol.rank .n{max-width:45%}
@media (max-width:520px){ol.rank .n{float:none;display:block;margin:0 0 .2rem}}
footer.site .sig{grid-row:1/span 4}
@media (max-width:760px){footer.site .sig{grid-row:auto}}