/* 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:1000px){
  .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:1401px){.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}}

/* ================================================================ direction « Pochette » (design/DIRECTION.md)
   Le Caire des années d'or : recto noir, verso ivoire, kufi rouge, Bodoni, filets et pointillés.
   Couche ajoutée après style.css et multipage.css : elle redéfinit les variables et la composition. */
:root{
  --noir:#14110E; --noir2:#1E1A16; --ivoire:#F6EEDF; --ivoire2:#EFE4D0; --rouge:#B3261E; --or:#C9952B; --or-txt:#8A5F12;
  --paper:var(--ivoire); --surface:#FBF6EC; --ar:#0B3D2E; --fr:#2A2420; --accent:#8A5F12; --muted:#5E554B;
  --rule:#CDBFA8; --field:#8E8070; --on-ar:var(--ivoire); --radius:0;
  --kufi:"Reem Kufi","Alexandria",sans-serif; --bodoni:"Bodoni Moda","Didot",Georgia,serif; --naskh:"Amiri","Alexandria",serif;
}
:root[data-theme="dark"]{--paper:#17130F;--surface:#201B16;--ar:#CFE6DA;--fr:#EFE6D6;--accent:#E2B45C;--muted:#B5A894;--rule:#3B332B;--field:#6E6355;--ivoire:#17130F;--ivoire2:#201B16;--rouge:#E0574C;--or-txt:#E2B45C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#17130F;--surface:#201B16;--ar:#CFE6DA;--fr:#EFE6D6;--accent:#E2B45C;--muted:#B5A894;--rule:#3B332B;--field:#6E6355;--ivoire:#17130F;--ivoire2:#201B16;--rouge:#E0574C;--or-txt:#E2B45C}}
body{background:var(--paper);color:var(--fr);font-size:1.0625rem}
/* grain de papier très léger : une seule image, sans animation */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer.site,.site-head{position:relative;z-index:1}
a:hover{color:var(--rouge)}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
.ar,[lang="ar"]{font-family:var(--naskh)}
::selection{background:var(--rouge);color:#fff}

/* ---------------------------------------------------------------- en-tête : bande noire de pochette */
.site-head{background:var(--noir);color:var(--ivoire);border-bottom:3px solid var(--rouge)}
:root[data-theme="dark"] .site-head{color:#EFE6D6}
.site-head .wrap{min-height:4rem;max-width:1440px}
.site-head .brand{flex-direction:row;align-items:center;gap:.75rem;color:#F6EEDF}
.site-head .brand svg{width:2.4rem;height:2.4rem;flex:none}
.site-head .brand .nm{display:flex;flex-direction:column;line-height:1.1}
.site-head .brand [lang="ar"]{font-family:var(--kufi);font-weight:700;font-size:1.3rem;color:#F6EEDF}
.site-head .brand .lat{font-family:var(--bodoni);font-style:italic;font-size:.82rem;color:#CBBFAA;letter-spacing:0}
.menu a{border-radius:0;color:#F6EEDF;font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .55rem;min-height:2.6rem;border-bottom:2px solid transparent}
.menu a:hover{background:none;color:var(--or);border-bottom-color:var(--or)}
.menu a[aria-current="page"]{background:none;color:#fff;border-bottom-color:var(--rouge)}
.menu a.audio-link{color:var(--or)}
.menu-toggle,.theme-toggle{border-radius:0;border-color:#5a5047;color:#F6EEDF}
@media (max-width:1000px){
  .menu{background:var(--noir);border-bottom:3px solid var(--rouge)}
  .menu a{font-size:.95rem;letter-spacing:.08em;border-bottom:1px dotted #4a4038;min-height:48px}
  .menu a small{color:var(--or);font-family:var(--naskh);font-size:1.15rem;letter-spacing:0;text-transform:none}
}

/* ---------------------------------------------------------------- titres : Bodoni et kufi qui convergent */
h2{font-family:var(--bodoni);font-weight:800;letter-spacing:-.01em;color:var(--fr);border-top:3px double var(--fr);padding-top:.9rem;font-size:clamp(1.8rem,3.4vw,3rem)}
h2 .ar{font-family:var(--kufi);font-weight:700;color:var(--rouge);font-size:1em}
h3{font-family:var(--bodoni);font-weight:800;font-size:1.35rem}
h3 .ar{font-family:var(--naskh);font-weight:700;color:var(--rouge)}
section{border-top:0}
.content > section:first-child{border-top:0}
.intro{font-family:var(--bodoni);font-size:1.22rem;line-height:1.55;max-width:44rem}
.count{color:var(--muted)}
.note{background:none;border:0;border-left:3px solid var(--rouge);padding:.4rem 0 .4rem 1.2rem}
.photo .frame{border-radius:0}
.photo img{filter:grayscale(1) contrast(1.12)}
.photo figcaption,figcaption{font-size:.84rem;color:var(--muted);border-top:1px solid var(--fr);padding-top:.4rem}
code{border-radius:0}

/* tête des pages intérieures : un verso de pochette */
.page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:0 clamp(1.5rem,4vw,4rem);padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem);border-bottom:3px double var(--fr);margin-bottom:1rem}
.page-head .ref{grid-column:1/-1;margin:0 0 1.2rem;font:500 .72rem/1 "Alexandria",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--or-txt)}
h1.page,.content section > h1{display:flex;flex-direction:column;align-items:stretch;font-family:var(--bodoni);font-weight:800;font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98;text-align:left;margin:0 0 1rem;letter-spacing:-.02em}
h1.page .ar,.content section > h1 .ar{order:-1;font-family:var(--kufi);font-weight:700;color:var(--rouge);font-size:.95em;line-height:1.25;text-align:right;margin-bottom:.15em}
.page-head .lede{font-family:var(--bodoni);font-size:1.25rem;line-height:1.5;align-self:end;max-width:none}
.page-head .lede::first-letter{float:left;font:800 3.6em/.82 var(--bodoni);color:var(--rouge);margin:.06em .12em 0 0}
.toc{grid-column:1/-1;display:block;columns:2 16rem;column-gap:3rem;counter-reset:t;margin:1.8rem 0 0}
.toc li{break-inside:avoid;counter-increment:t}
.toc a{display:flex;gap:.6rem;align-items:baseline;border:0;border-bottom:1px dotted var(--field);background:none;padding:.35rem 0;min-height:2.6rem;font-size:1rem;border-radius:0}
.toc a::before{content:counter(t);font-family:var(--bodoni);font-weight:800;color:var(--rouge);min-width:1.4em}
.toc a:hover{color:var(--rouge);border-color:var(--rouge)}
@media (max-width:760px){.page-head{grid-template-columns:1fr}.page-head .lede{margin-top:.6rem}}

/* toutes les anciennes « cartes » deviennent des fiches à filets, sans arrondi ni ombre */
.cards a,.gcard,.summary li button,.cloud button,.filters input,.filters select,.filters button,.more,.stag,.gframe,.gframe button,.mapbox,.tablebox,.lieux img{border-radius:0!important;box-shadow:none!important}
.gcard{background:none;border:0;border-top:1px solid var(--fr);padding-top:.7rem}
.gtag{border-radius:0;font-family:"Alexandria",sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem}
.gframe button{background:var(--rouge);color:#fff}
.more,.filters button{background:var(--noir);color:var(--ivoire);border:0;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;font-weight:500}
.filters input,.filters select{background:var(--surface);border:0;border-bottom:1px solid var(--fr)}
table{border-top:2px solid var(--fr)}
th{font-family:"Alexandria",sans-serif;font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
tbody tr:hover{background:color-mix(in srgb,var(--rouge) 5%,transparent)}
a.play::before{border-radius:50%;background:var(--rouge)}
ol.gems li::before{font-family:var(--bodoni);color:var(--rouge)}
.gem-title{font-family:var(--bodoni);font-weight:800}
.cloud button{background:none;border:1px solid var(--rule)}
.cloud button[aria-pressed="true"]{background:var(--rouge);border-color:var(--rouge)}
.bars button::before{background:var(--rouge)}
.lieux figcaption .p{font-family:var(--bodoni);font-weight:800}
.pager{border-top:3px double var(--fr)}
.pager a{border:0;border-radius:0;background:none;font-family:var(--bodoni);font-weight:800;font-size:1.3rem}
.pager small{font-family:"Alexandria",sans-serif;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;color:var(--or-txt)}

/* ---------------------------------------------------------------- pied de page : dos de pochette */
footer.site{background:var(--noir);color:#CBBFAA;border-top:3px solid var(--rouge);margin-top:4rem}
footer.site .sig{font-family:var(--kufi);color:var(--rouge);font-size:2.4rem}
footer.site a{color:#F6EEDF}
footer.site .fnav a{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
footer.site .mentions{font-size:.78rem;color:#9E9282;letter-spacing:.04em}

/* ================================================================ accueil : la pochette */
.sleeve{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:min(92vh,58rem);background:var(--noir)}
.sleeve .recto{position:relative;margin:0;overflow:hidden;background:#000;min-height:22rem}
.sleeve .recto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 35%;filter:grayscale(1) contrast(1.28) brightness(1.08)}
.sleeve .recto .ref{position:absolute;top:1.1rem;left:1.2rem;z-index:2;font:500 .7rem/1.3 "Alexandria",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.sleeve .recto figcaption{position:absolute;left:1.2rem;bottom:1rem;right:40%;z-index:2;border:0;color:#D9CDB8;font-size:.8rem}
.sleeve .recto .label{position:absolute;right:-9%;bottom:-12%;width:44%;aspect-ratio:1;z-index:1}
.sleeve .verso{background:#F6EEDF;color:#1E1A16;padding:clamp(1.5rem,5vh,3.5rem) clamp(1.25rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.sleeve h1{margin:0;font-family:var(--kufi);font-weight:700;font-size:clamp(3.6rem,8.4vw,9.4rem);line-height:.98;color:#B3261E;text-align:right}
.sleeve .latin{margin:.6rem 0 0;font-family:var(--bodoni);font-weight:800;font-size:clamp(1.9rem,3.5vw,3.4rem);line-height:1;letter-spacing:-.015em}
.sleeve .latin i{font-weight:400;color:#7A1E2C}
.sleeve .dates{margin:.8rem 0 0;font-size:1rem;color:#4A423A}
.sleeve .dates bdi{font-family:var(--bodoni);font-weight:800;color:#1E1A16}
.sleeve .listen{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;background:none;border:0;padding:0;font:inherit;color:#1E1A16;cursor:pointer;text-align:left}
.sleeve .listen svg{width:3.4rem;height:3.4rem;flex:none}
.sleeve .listen b{display:block;font-family:var(--bodoni);font-size:1.15rem}
.sleeve .listen small{color:#5E554B}
.sleeve .listen:hover b{color:#B3261E}
.faces{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;border-top:3px double #1E1A16;padding-top:.9rem}
.faces h2{all:unset;display:block;font:500 .7rem/1.4 "Alexandria",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#B3261E;margin-bottom:.4rem}
.faces h2 span{font-family:var(--naskh);letter-spacing:0;font-size:.95rem;text-transform:none}
.faces ol{list-style:none;margin:0;padding:0;counter-reset:f var(--start,0)}
.faces li{counter-increment:f}
.faces a{display:flex;align-items:baseline;gap:.6rem;padding:.42rem 0;border-bottom:1px dotted #9B8F7D;text-decoration:none;color:#1E1A16;min-height:2.6rem}
.faces a::before{content:counter(f);font-family:var(--bodoni);font-weight:800;color:#B3261E;min-width:1.1em}
.faces a span[lang="ar"]{margin-left:auto;font-family:var(--naskh);color:#0B3D2E}
.faces a:hover{color:#B3261E}
@media (max-width:860px){
  .sleeve{grid-template-columns:1fr;min-height:0}
  .sleeve .recto{height:min(78vh,36rem)}
  .sleeve .recto .label{width:34%;right:-6%;bottom:-8%}
  .sleeve .recto h1.on-photo{display:block}
  .sleeve .verso h1{display:none}
  .faces{grid-template-columns:1fr}
}
.sleeve .recto h1.on-photo{display:none;position:absolute;z-index:2;right:1rem;left:1rem;bottom:2.4rem;font-size:clamp(3.2rem,15vw,5.6rem);color:#F6EEDF;text-shadow:0 0 1.2rem rgba(0,0,0,.6)}
@media (max-width:860px){.sleeve .recto h1.on-photo{display:block}.sleeve .recto figcaption{bottom:.6rem;right:1rem}}

/* note de pochette : texte en colonnes */
.liner{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,5rem);padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,4rem)}
.liner .kicker{font:500 .72rem/1.5 "Alexandria",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--or-txt);border-top:3px solid var(--rouge);padding-top:.6rem;margin:0}
.liner .kicker span{display:block;font-family:var(--kufi);font-size:1.6rem;letter-spacing:0;color:var(--rouge);text-transform:none;margin-top:.3rem}
.liner .txt{columns:2 19rem;column-gap:3rem;column-rule:1px solid var(--rule);font-family:var(--bodoni);font-size:1.18rem;line-height:1.6}
.liner .txt p{margin:0 0 1rem}
.liner .txt p:first-child::first-letter{float:left;font:800 4.4em/.8 var(--bodoni);color:var(--rouge);margin:.05em .12em 0 0}
@media (max-width:760px){.liner{grid-template-columns:1fr}}

/* l'écoute en trois faces */
.ecoute{padding:clamp(2rem,5vw,4rem) 0;border-top:3px double var(--fr)}
.ecoute-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;border-bottom:1px solid var(--fr)}
.ecoute-grid > a{display:block;padding:1.2rem 1.4rem 1.6rem 0;text-decoration:none;color:var(--fr);border-right:1px solid var(--fr)}
.ecoute-grid > a + a{padding-left:1.4rem}
.ecoute-grid > a:last-child{border-right:0}
.ecoute-grid .face{font:500 .7rem "Alexandria",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--or-txt)}
.ecoute-grid strong{display:block;font-family:var(--bodoni);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.05;margin:.4rem 0}
.ecoute-grid strong span{display:block;font-family:var(--kufi);font-weight:700;color:var(--rouge);font-size:.9em}
.ecoute-grid .n{font-family:var(--bodoni);font-size:3.4rem;font-weight:800;line-height:1;color:var(--rouge)}
.ecoute-grid a:hover strong{color:var(--rouge)}
@media (max-width:860px){.ecoute-grid{grid-template-columns:1fr}.ecoute-grid > a{border-right:0;border-bottom:1px solid var(--rule);padding-left:0!important}}
.mini-index{display:flex;flex-wrap:wrap;gap:0;margin:1.4rem 0 0;padding:0;list-style:none;direction:rtl}
.mini-index a{display:inline-block;padding:.1rem .45rem;font-family:var(--naskh);font-size:1.12rem;text-decoration:none;color:var(--muted);border-left:1px solid var(--rule)}
.mini-index a.on{color:var(--fr)}
.mini-index a.on:hover{color:var(--rouge)}

/* planche contact des photos */
.planche{padding:clamp(2rem,5vw,4rem) 0}
.planche-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.2rem);align-items:start}
.planche-grid figure{margin:0}
.planche-grid img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.1)}
.planche-grid .a{grid-column:1/6}.planche-grid .b{grid-column:6/10;margin-top:4rem}.planche-grid .c{grid-column:10/13;margin-top:1.5rem}
.planche-grid .d{grid-column:2/7}.planche-grid .e{grid-column:7/12;margin-top:-3rem}
@media (max-width:760px){.planche-grid{grid-template-columns:1fr 1fr}.planche-grid figure{grid-column:auto!important;margin:0!important}.planche-grid .a{grid-column:1/-1!important}}

/* sommaire du site, façon dos de pochette */
.sommaire{columns:2 22rem;column-gap:3rem;list-style:none;margin:0;padding:0;counter-reset:s}
.sommaire li{break-inside:avoid;counter-increment:s;border-top:1px solid var(--fr)}
.sommaire a{display:grid;grid-template-columns:2.4rem 1fr auto;gap:.2rem .8rem;padding:.8rem 0 1rem;text-decoration:none;color:var(--fr)}
.sommaire a::before{content:counter(s,decimal-leading-zero);font-family:var(--bodoni);font-weight:800;color:var(--rouge);font-size:1.3rem;grid-row:span 2}
.sommaire .t{font-family:var(--bodoni);font-weight:800;font-size:1.3rem}
.sommaire .ar{font-family:var(--kufi);color:var(--rouge);font-size:1.2rem}
.sommaire .d{grid-column:2/-1;color:var(--muted);font-size:.95rem;line-height:1.5}
.sommaire a:hover .t{color:var(--rouge)}

/* ================================================================ page Audio */
.audio-head{background:var(--noir);color:#F6EEDF;padding:clamp(2rem,6vw,4.5rem) 0 0;position:relative;overflow:hidden}
.audio-head .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 2rem}
.audio-head h1{margin:0;font-family:var(--bodoni);font-weight:800;font-size:clamp(3rem,8vw,7rem);line-height:.9;color:#F6EEDF}
.audio-head h1 .ar{display:block;font-family:var(--kufi);color:#E0574C;font-size:.85em;line-height:1.2}
.audio-head .lede{font-family:var(--bodoni);font-size:1.15rem;color:#D9CDB8;max-width:38rem;margin:1rem 0 0}
.audio-head .chiffres{display:flex;gap:2rem;margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#CBBFAA}
.audio-head .chiffres b{display:block;font-family:var(--bodoni);font-size:2.6rem;letter-spacing:0;color:var(--or)}
.audio-head .label{position:absolute;right:-6rem;top:-6rem;width:22rem;opacity:.9;pointer-events:none}
.tabs{display:flex;gap:0;margin-top:2.2rem;border-top:1px solid #3A322A;overflow-x:auto;scrollbar-width:none}
.tabs a{flex:none;display:flex;align-items:baseline;gap:.6rem;padding:1rem 1.3rem 1rem 0;margin-right:1.3rem;color:#CBBFAA;text-decoration:none;border-bottom:4px solid transparent;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;min-height:3rem}
.tabs a b{font-family:var(--bodoni);font-size:1.3rem;letter-spacing:0;color:var(--or)}
.tabs a span[lang="ar"]{font-family:var(--naskh);letter-spacing:0;font-size:1rem;text-transform:none}
.tabs a[aria-selected="true"]{color:#fff;border-bottom-color:#E0574C}
.tabs a:hover{color:#fff}
.vue{padding:clamp(1.5rem,4vw,3rem) 0}
.vue[hidden]{display:none}
.vue-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;margin-bottom:1.4rem}
.vue-intro p{margin:0;font-family:var(--bodoni);font-size:1.12rem;max-width:44rem}
.legende{font-size:.82rem;color:var(--muted)}

/* index des 114 sourates : deux colonnes de dos de pochette */
.index114{list-style:none;margin:0;padding:0;columns:3 15.5rem;column-gap:2.4rem}
.index114 li{break-inside:avoid}
.index114 a,.index114 span.s{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:baseline;gap:0 .55rem;padding:.38rem 0;border-bottom:1px dotted var(--field);text-decoration:none;color:var(--muted);min-height:2.75rem}
.index114 .no{font-family:var(--bodoni);font-weight:800;font-size:1.05rem;color:var(--field)}
.index114 .nm{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.index114 .nm [lang="ar"]{font-family:var(--naskh);font-size:1.32rem;color:inherit}
.index114 .nm small{font-size:.76rem}
.index114 .c{font-family:var(--bodoni);font-weight:800;font-size:1.05rem}
.index114 a{color:var(--fr)}
.index114 a .no{color:var(--rouge)}
.index114 a .nm [lang="ar"]{color:var(--ar)}
.index114 a:hover,.index114 a[aria-current="true"]{background:color-mix(in srgb,var(--rouge) 7%,transparent)}
.index114 a[aria-current="true"] .c{color:var(--rouge)}

/* panneau d'une sourate */
.panneau{margin:2rem 0 0;border-top:3px double var(--fr);padding-top:1.2rem;scroll-margin-top:5rem}
.panneau[hidden]{display:none}
.panneau-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem 1.4rem;align-items:end;margin-bottom:1rem}
.panneau-head .no{font-family:var(--bodoni);font-weight:800;font-size:clamp(3.4rem,8vw,6rem);line-height:.8;color:var(--rouge)}
.panneau-head h2{all:unset;display:block;font-family:var(--bodoni);font-weight:800;font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.panneau-head h2 .ar{display:block;font-family:var(--naskh);font-weight:700;color:var(--ar);font-size:1.1em;text-align:left;direction:rtl;unicode-bidi:plaintext}
.panneau-head .meta{color:var(--muted);font-size:.9rem;margin:.4rem 0 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem 1rem;background:var(--noir);color:#F6EEDF;border:0;font:500 .74rem "Alexandria",sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--rouge);color:#fff}
.btn.clair{background:none;color:var(--fr);border:1px solid var(--fr)}
.btn.clair:hover{border-color:var(--rouge);color:var(--rouge);background:none}

/* une ligne d'enregistrement */
.pistes{list-style:none;margin:0;padding:0;counter-reset:p}
.piste{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.2rem 1rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.piste .jouer{width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--rouge);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.piste .jouer svg{width:1rem;height:1rem;fill:currentColor}
.piste .jouer .pause{display:none}
.piste.is-playing .jouer .lire,.piste .jouer.is-playing .lire{display:none}
.piste.is-playing .jouer .pause{display:block}
.piste.is-playing{background:color-mix(in srgb,var(--rouge) 6%,transparent)}
.piste .tt{min-width:0}
.piste .tt b{font-family:var(--bodoni);font-weight:800;font-size:1.12rem}
.piste .tt .ar{font-family:var(--naskh);font-size:1.15rem;color:var(--ar);margin-left:.5rem}
.piste .sub{display:block;color:var(--muted);font-size:.9rem;line-height:1.45}
.piste .sub bdi{font-weight:500;color:var(--fr)}
.piste .q{font:500 .66rem "Alexandria",sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.piste .q.q3{color:var(--ar)}.piste .q.q2{color:var(--or-txt)}.piste .q.q1{color:var(--muted)}
.piste .q::before{content:"";display:inline-block;width:.55rem;height:.55rem;border:1px solid currentColor;border-radius:50%;margin-right:.35rem;vertical-align:-.04em}
.piste .q.q3::before{background:currentColor}
.piste .q.q2::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.piste .liens{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.84rem}
.piste .liens a{min-height:2rem;display:inline-flex;align-items:center}
.piste .liens .com{color:var(--muted);font-style:italic}
.piste details{grid-column:2/-1;font-size:.84rem;color:var(--muted)}
.piste details summary{cursor:pointer;min-height:2rem;display:inline-flex;align-items:center}
.piste details ul{margin:.3rem 0 0;padding-left:1.1rem}
@media (max-width:600px){.piste{grid-template-columns:2.9rem minmax(0,1fr)}.piste .q{grid-column:2}}

/* studio : le bac à disques */
.bac{display:flex;gap:4px;overflow-x:auto;padding:.5rem 0 1.2rem;align-items:stretch;scrollbar-width:thin}
.dos{flex:0 0 auto;width:3.6rem;min-height:21rem;writing-mode:vertical-rl;display:flex;justify-content:space-between;align-items:center;padding:1rem .5rem;border:0;cursor:pointer;font:500 .72rem "Alexandria",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:start;color:#F6EEDF;background:var(--c,#7A1E2C)}
.dos b{font-family:var(--kufi);font-size:1.35rem;letter-spacing:0;text-transform:none;font-weight:700}
.dos .yr{font-family:var(--bodoni);font-size:1rem;letter-spacing:0}
.dos.clair{color:#1E1A16}
.dos[aria-expanded="true"]{outline:3px solid var(--fr);outline-offset:2px}
.dos:hover{filter:brightness(1.12)}
.pochette-ouverte{display:grid;grid-template-columns:minmax(14rem,22rem) minmax(0,1fr);gap:1.5rem clamp(1.5rem,4vw,3rem);border-top:3px double var(--fr);padding-top:1.4rem;margin-top:.6rem}
.pochette-ouverte[hidden]{display:none}
.cover{aspect-ratio:1;background:var(--c,#7A1E2C);color:#F6EEDF;position:relative;overflow:hidden;padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between}
.cover.clair{color:#1E1A16}
.cover .cref{font:500 .66rem "Alexandria",sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.cover .cnom{font-family:var(--kufi);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;text-align:right;position:relative;z-index:1}
.cover .clat{font-family:var(--bodoni);font-weight:800;font-size:1.1rem;position:relative;z-index:1}
.cover svg{position:absolute;right:-22%;bottom:-22%;width:70%;opacity:.95}
.album-info h3{margin:0 0 .3rem;font-size:clamp(1.6rem,3vw,2.3rem)}
.album-info h3 .ar{display:block;font-family:var(--kufi);color:var(--rouge)}
.album-info dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:.8rem 0 1rem;font-size:.92rem}
.album-info dt{font:500 .68rem "Alexandria",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:.25rem}
.album-info dd{margin:0}
.album-info .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.tracklist{list-style:none;margin:0;padding:0;columns:2 18rem;column-gap:2rem}
.tracklist li{break-inside:avoid}
.tracklist button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.5rem;width:100%;padding:.35rem 0;border-bottom:1px dotted var(--field);cursor:pointer;min-height:2.5rem;align-items:baseline}
.tracklist button:focus-visible{outline:2px solid var(--rouge)}
.tracklist .n{font-family:var(--bodoni);font-weight:800;color:var(--rouge)}
.tracklist .d{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.tracklist button:hover,.tracklist button.is-playing{color:var(--rouge)}
.tracklist [lang="ar"]{font-family:var(--naskh);color:var(--ar);margin-left:.4rem}
@media (max-width:760px){.pochette-ouverte{grid-template-columns:1fr}.cover{max-width:20rem}}

/* haflat et radio : programme filtrable */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:end;padding:1rem 0;border-top:1px solid var(--fr);border-bottom:1px solid var(--fr);margin-bottom:1rem}
.filtres label{display:flex;flex-direction:column;font:500 .66rem "Alexandria",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);gap:.2rem;min-width:0}
.filtres select,.filtres input{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--fr);background:var(--surface);border:0;border-bottom:1px solid var(--fr);min-height:2.75rem;padding:.2rem .4rem;max-width:100%;border-radius:0}
.filtres input[type="search"]{min-width:min(16rem,80vw)}
.annee-bloc{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:0 1.4rem;border-top:1px solid var(--fr)}
.annee-bloc > .yr{font-family:var(--bodoni);font-weight:800;font-size:2.4rem;line-height:1;color:var(--or-txt);padding-top:.7rem;position:sticky;top:4.5rem;align-self:start}
.annee-bloc > .yr small{display:block;font:400 .74rem "Alexandria",sans-serif;color:var(--muted)}
.annee-bloc .pistes .piste:last-child{border-bottom:0}
@media (max-width:600px){.annee-bloc{grid-template-columns:1fr}.annee-bloc > .yr{position:static;font-size:1.8rem;padding:.6rem 0 0}}

/* ================================================================ lecteur persistant */
.player{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--noir);color:#F6EEDF;border-top:3px solid var(--rouge);display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;padding:.55rem clamp(.7rem,3vw,2rem) .6rem;transform:none;border-radius:0;box-shadow:none;max-width:none}
.player[hidden]{display:none}
.player .lbl{width:2.6rem;height:2.6rem}
.player.playing .lbl{animation:tourne 4s linear infinite}
@keyframes tourne{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion: reduce){.player.playing .lbl{animation:none}}
.player .ctrl{display:flex;align-items:center;gap:.25rem}
.player .ctrl button{background:none;border:0;color:#F6EEDF;min-width:2.75rem;min-height:2.75rem;font:500 .78rem "Alexandria",sans-serif;cursor:pointer;padding:0 .3rem}
.player .ctrl button:disabled{opacity:.35;cursor:default}
.player .ctrl button:hover:not(:disabled){color:var(--or)}
.player .pp{width:3rem;height:3rem;border-radius:50%;background:#B3261E!important;display:grid;place-items:center}
.player .pp::before{content:"";width:0;height:0;border-left:.8rem solid #fff;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;margin-left:.2rem}
.player .pp[data-s="pause"]::before{border:0;width:.75rem;height:.9rem;margin:0;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.player .ctrl svg{width:1rem;height:1rem;fill:currentColor}
.player .meta{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.player .meta .l1{display:flex;gap:.6rem;align-items:baseline;min-width:0;white-space:nowrap;overflow:hidden}
.player .meta .fr{font-family:var(--bodoni);font-weight:800;font-size:1.02rem;color:#F6EEDF;overflow:hidden;text-overflow:ellipsis}
.player .meta .ar{font-family:var(--naskh);font-size:1.08rem;color:#E9C77F;overflow:hidden;text-overflow:ellipsis}
.player .meta .sub{font-size:.78rem;color:#CBBFAA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .meta .q{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.player .side{display:flex;align-items:center;gap:.2rem .8rem;flex-wrap:wrap;justify-content:flex-end;font-size:.78rem}
.player .side a,.player .side button{color:#F6EEDF;background:none;border:0;font:inherit;cursor:pointer;min-height:2.5rem;display:inline-flex;align-items:center;padding:0 .2rem}
.player .side a:hover,.player .side button:hover{color:var(--or)}
.player .side .rate{font-family:var(--bodoni);font-weight:800;font-size:.95rem}
.player .track{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:center;font-size:.72rem;color:#CBBFAA;font-variant-numeric:tabular-nums}
.player .track input{width:100%;accent-color:#E0574C;margin:0}
.player .queue{grid-column:1/-1;list-style:none;margin:0;padding:0;max-height:40vh;overflow:auto;border-top:1px solid #3A322A;overscroll-behavior:contain}
.player .queue[hidden]{display:none}
.player .queue button{all:unset;box-sizing:border-box;display:block;width:100%;padding:.45rem .2rem;border-bottom:1px dotted #3A322A;cursor:pointer;font-size:.9rem}
.player .queue button:focus-visible{outline:2px solid var(--or)}
.player .queue [aria-current="true"] button{color:var(--or)}
.player .queue [lang="ar"]{font-family:var(--naskh);color:#E9C77F;margin-left:.4rem}
.player .queue small{display:block;color:#9E9282}
body.has-player{padding-bottom:8.5rem}
@media (max-width:760px){
  .player{grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem .6rem}
  .player .lbl{display:none}
  .player .ctrl{grid-column:1/-1;order:3;justify-content:space-between}
  .player .side{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-end;gap:0}
  .player .side .srcl,.player .side .qbtn{display:none}
  .player .meta{grid-column:1/3;grid-row:1}
  .player .track{order:2}
  body.has-player{padding-bottom:11rem}
}

/* ================================================================ en images */
.galerie-photos{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2rem) clamp(.8rem,1.6vw,1.4rem);align-items:start}
.galerie-photos figure{margin:0;grid-column:span 4}
.galerie-photos figure.grand{grid-column:span 7}
.galerie-photos figure.moyen{grid-column:span 5}
.galerie-photos img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.08)}
.galerie-photos figure.couleur img{filter:none}
.galerie-photos figcaption b{display:block;font-family:var(--bodoni);font-weight:800;color:var(--fr);font-size:1rem}
@media (max-width:760px){.galerie-photos{grid-template-columns:1fr}.galerie-photos figure{grid-column:1/-1!important}}
.embeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1.4rem}
.embed{border-top:3px double var(--fr);padding-top:.8rem}
.embed p{margin:0 0 .6rem;font-size:.95rem}
.embed iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.djamil-attente{border:1px dashed var(--field);padding:1rem 1.2rem;color:var(--muted);font-size:.95rem}

/* ---------------------------------------------------------------- correctifs après contrôle (14 novembre 2026) */
.player{width:auto;inset:auto 0 0 0;max-width:none}
.panneau-head{align-items:center}
.panneau-head h2 .ar{text-align:left;direction:rtl;unicode-bidi:isolate;font-size:.85em;margin-top:.15em}
@media (max-width:860px){.sleeve .recto figcaption{right:36%}}
.sleeve .dates [lang="ar"]{font-family:var(--naskh);white-space:nowrap}
.player.open{transform:none}
.player .pp{grid-row:auto}
.lieux > h2{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:clamp(1rem,4vw,2.5rem);padding-right:clamp(1rem,4vw,2.5rem)}

/* ---- page Audio : onglets Choix et Catalogue daté, éditions sous le bac (novembre 2026) ---- */
html:not(.js) .vue[hidden]{display:block}
.vue .toc{columns:2 16rem;column-gap:3rem;counter-reset:t;margin:0 0 1rem;padding:0;list-style:none}
.editions{margin-top:clamp(2.5rem,6vw,4rem)}
.vue-intro-p{font-family:var(--bodoni);font-size:1.12rem;max-width:44rem;margin:0 0 1.2rem}
.ecoute-plus{margin:1rem 0 0;font-family:var(--bodoni);font-size:1.1rem}
/* crédits : en petit, au bas de la page Sources */
#credits{font-size:.84rem;color:var(--muted)}
#credits h2{font-size:1.3rem}
#credits .intro{font-size:.88rem;max-width:48rem}
#credits dl.res{max-width:48rem}
#credits dt{font-size:.86rem;font-weight:500;margin-top:.8rem}
#credits dd{font-size:.8rem;margin-left:0}
.mentions a{color:inherit}
/* cinq onglets : alignés sur la ligne de base ; sur grand écran ils passent à la ligne au lieu de se cacher à droite */
.tabs{align-items:baseline}
@media (min-width:761px){.tabs{flex-wrap:wrap;overflow-x:visible}}
/* tête de la page Audio sur téléphone : titre puis chiffres, l'un sous l'autre (la colonne des chiffres écrasait le titre) */
@media (max-width:760px){
  .audio-head .wrap{grid-template-columns:minmax(0,1fr)}
  .audio-head .chiffres{flex-wrap:wrap;gap:.6rem 1.6rem}
  .audio-head .chiffres b{font-size:2rem}
  .audio-head .label{width:14rem;right:-5rem;top:-5rem;opacity:.55}
}