/* qsa.islam365.fr : « Entre deux îles ». Feuille unique, sans dépendance.
   Direction artistique : design/DIRECTION.md. Polices libres (OFL) auto-hébergées. */
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Amiri-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Amiri-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Amiri-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ArefRuqaa-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Spectral-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Spectral-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Spectral-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Spectral-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Spectral-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Spectral-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212}

:root{
 --chaux:#f3eee3;--papier:#faf7f0;--encre:#0e2a3a;--encre2:#1d3d4f;--lagon:#0f6e69;--lagon-clair:#7fcfc4;
 --volcan:#3d4a2c;--laterite:#9a4126;--gris:#565d5a;--filet:#d8cfbb;--filet2:#e7e0d0;
 --serif:Spectral,"Iowan Old Style","Palatino Linotype",Georgia,serif;--ar:Amiri,"Noto Naskh Arabic","Traditional Arabic",serif;
 --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--marge:clamp(28px,6.2vw,96px);--pad:clamp(16px,3.6vw,56px);--lecteur:0px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--chaux);color:var(--encre);font:400 1.0625rem/1.62 var(--serif);font-feature-settings:"kern","liga","onum";padding-bottom:var(--lecteur);overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--lagon);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--encre)}
:focus-visible{outline:3px solid var(--laterite);outline-offset:2px}
.ar,[lang=ar]{font-family:var(--ar);direction:rtl;unicode-bidi:isolate;font-feature-settings:normal}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);font-feature-settings:"tnum"}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:8px 14px;z-index:50}.evitement:focus{left:8px}

/* ---- squelette : la route en marge ---- */
.cadre{display:grid;grid-template-columns:var(--marge) minmax(0,1fr);max-width:1480px;margin:0 auto}
.route{position:relative}
.route svg{position:sticky;top:0;display:block;width:100%;height:100vh;overflow:visible}
.route .trace{stroke:var(--lagon);stroke-width:1.3;stroke-dasharray:4 6;fill:none}
.route text{font:400 9.5px var(--mono);fill:var(--gris);letter-spacing:.06em}
.contenu{min-width:0;padding-right:var(--pad)}

/* ---- en-tête ---- */
.entete{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0 14px;border-bottom:1px solid var(--filet)}
.marque{text-decoration:none;color:var(--encre);display:flex;align-items:baseline;gap:12px}
.marque .ar{font-size:1.35rem;line-height:1}.marque .mono{font-size:.68rem}
.menu{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0;padding:0}
.menu a{color:var(--encre);text-decoration:none;font-size:.97rem;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--filet)}
.menu a[aria-current]{border-bottom-color:var(--laterite)}
.menu .ar{font-size:1.02rem;margin-left:6px;color:var(--lagon)}
.bouton-menu{display:none}

/* ---- typographie éditoriale ---- */
h1,h2,h3{font-weight:400;line-height:1.08;margin:0}
.ouvre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;gap:0 clamp(20px,3vw,40px);padding:clamp(24px,4vw,48px) 0 20px}
.ouvre .grand-ar{grid-column:6/13;grid-row:1;font:700 clamp(3.4rem,8.6vw,8.4rem)/.95 var(--ar);text-align:right;margin:0;color:var(--encre)}
.ouvre .titre-fr{grid-column:6/13;grid-row:2;font-size:clamp(2rem,3.4vw,3rem);font-style:italic;margin-top:-.1em;text-align:right}
.ouvre .sous{grid-column:6/13;grid-row:3;margin:14px 0 0;text-align:right}
.ouvre .chapo{grid-column:7/13;grid-row:4;font-size:1.12rem;margin:26px 0 0;max-width:36em;justify-self:end;align-self:end}
/* portrait du cheikh (À La Mecque, photo choisie par Djamil) : grand format, cadré sur le visage et les mains levées, posé comme une page de carnet */
.ouvre .portrait{grid-column:1/6;grid-row:1/5;align-self:start;position:relative}
.ouvre .portrait img{aspect-ratio:4/5;max-height:calc(100svh - 150px);object-fit:cover;background:var(--encre);box-shadow:14px 14px 0 -1px var(--papier),14px 14px 0 0 var(--filet)}
.ouvre .portrait figcaption{max-width:34em}
.titre-page{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding:clamp(28px,5vw,64px) 0 26px;border-bottom:1px solid var(--filet);margin-bottom:34px;align-items:end}
.titre-page h1{grid-column:1/8;font-size:clamp(2.4rem,5vw,4.2rem)}
.titre-page h1 .ar{display:block;font-size:.95em;color:var(--lagon);margin-top:.1em}
.titre-page p{grid-column:8/13;margin:0;color:var(--encre2)}
.section-titre{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.section-titre h2{font-size:clamp(1.9rem,3vw,2.5rem)}
.section-titre .ar{font-size:clamp(1.9rem,3vw,2.6rem);color:var(--lagon)}
.section-titre .num{font:400 .8rem var(--mono);color:var(--laterite)}
.texte{max-width:40em}
.texte p{margin:0 0 1em}
.deux{display:grid;grid-template-columns:4fr 8fr;gap:clamp(20px,4vw,56px);margin:clamp(48px,8vw,104px) 0}
.deux>*{min-width:0}
.ref{font-size:.72em;vertical-align:super;line-height:0}.ref a{text-decoration:none;font-family:var(--mono)}
.doute{font:400 .72rem var(--mono);color:var(--laterite);border-bottom:1px dotted var(--laterite);white-space:nowrap}
blockquote{margin:1.4em 0;padding:0 0 0 22px;border-left:2px solid var(--lagon);font-size:1.18rem;font-style:italic}
blockquote cite{display:block;font:400 .74rem var(--mono);font-style:normal;color:var(--gris);margin-top:8px;text-transform:uppercase;letter-spacing:.04em}

/* ---- frise swahilie ---- */
.frise{height:22px;margin:clamp(40px,7vw,80px) 0 clamp(28px,4vw,40px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22'%3E%3Cg fill='none' stroke='%230f6e69' stroke-width='1.2'%3E%3Cellipse cx='11' cy='11' rx='10' ry='5.6'/%3E%3Cellipse cx='33' cy='11' rx='10' ry='5.6'/%3E%3C/g%3E%3Ccircle cx='22' cy='11' r='2' fill='%239a4126'/%3E%3C/svg%3E") repeat-x left center;opacity:.9}
.frise.courte{width:min(100%,264px);margin:28px 0}

/* ---- figures ---- */
figure{margin:0}
figure img{display:block;width:100%}
figcaption{font-size:.84rem;color:var(--gris);padding-top:7px;margin-top:8px;border-top:1px solid var(--filet);line-height:1.45}
figcaption .coord{font:400 .72rem var(--mono);color:var(--laterite);margin-right:8px;white-space:nowrap}
figcaption a{color:var(--gris)}
.diptyque{display:grid;grid-template-columns:7fr 4fr;gap:clamp(12px,2vw,24px);align-items:end}
.diptyque .large img{aspect-ratio:16/9;object-fit:cover}
.diptyque .haute img{aspect-ratio:3/4;object-fit:cover}
.diptyque .liaison{grid-column:1/-1;height:28px;margin-top:-6px}
.photo-bande img{aspect-ratio:21/8;object-fit:cover}
.photo-nb img{filter:grayscale(1) contrast(1.05)}

/* ---- listes « journal de bord » ---- */
.journal{list-style:none;padding:0;margin:0;border-top:2px solid var(--encre)}
.journal>li{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;gap:6px 16px;padding:13px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.journal .n{font:400 .78rem var(--mono);color:var(--laterite)}
.journal .t{min-width:0}
.journal .t .ar{display:block;font-size:1.22rem;line-height:1.35;color:var(--lagon);text-align:left}
.journal .m{display:block;font:400 .74rem var(--mono);color:var(--gris);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.btn{font:inherit;font-size:.86rem;background:var(--papier);color:var(--encre);border:1px solid var(--encre);border-radius:0;padding:6px 14px;cursor:pointer;min-height:40px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--encre);color:var(--papier)}
.btn.plein{background:var(--encre);color:var(--papier)}
.btn.plein:hover{background:var(--lagon);border-color:var(--lagon)}
.btn[aria-pressed=true]{background:var(--lagon);border-color:var(--lagon);color:#fff}

/* ---- chronologie (journal de bord) ---- */
.chrono{list-style:none;margin:0;padding:0;position:relative}
.chrono::before{content:"";position:absolute;left:7.2rem;top:6px;bottom:6px;border-left:1.3px dashed var(--lagon)}
.chrono li{display:grid;grid-template-columns:6.4rem 1.6rem minmax(0,1fr);gap:0 0;padding:9px 0}
.chrono .quand{font:400 .74rem/1.9 var(--mono);color:var(--laterite);text-transform:uppercase}
.chrono .pt{width:9px;height:9px;border-radius:50%;background:var(--chaux);border:1.5px solid var(--lagon);margin:8px 0 0 3px}
.chrono li.ile-m .pt{background:var(--encre);border-color:var(--encre)}
.chrono li.ile-r .pt{background:var(--laterite);border-color:var(--laterite)}

/* ---- carte des deux îles ---- */
.carte{background:var(--papier);border:1px solid var(--filet)}
.carte svg{display:block;width:100%;height:auto}
.carte .mer{fill:var(--papier)}.carte .ile{fill:var(--volcan);opacity:.88}
.carte .route-mer{stroke:var(--lagon);stroke-width:1.6;stroke-dasharray:5 6;fill:none}
.carte text{font:400 11px var(--mono);fill:var(--encre);letter-spacing:.04em}
.carte .lieu{fill:var(--laterite)}

/* ---- tableaux ---- */
.tableau{overflow-x:auto;margin:0 0 24px}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-bottom:1px solid var(--filet);overflow-wrap:anywhere}
th{font:400 .72rem var(--mono);text-transform:uppercase;color:var(--gris);letter-spacing:.04em;border-bottom:1.5px solid var(--encre)}

/* ---- galerie audio ---- */
.escales{display:flex;flex-wrap:wrap;gap:0 30px;border-bottom:1px solid var(--filet);margin:0 0 28px;padding:0}
.escales button{font:inherit;font-size:1.08rem;background:none;border:0;border-bottom:3px solid transparent;color:var(--gris);padding:10px 0 12px;cursor:pointer;display:flex;align-items:baseline;gap:10px}
.escales button .ar{font-size:1.2rem}
.escales button .mono{font-size:.68rem}
.escales button[aria-selected=true]{color:var(--encre);border-bottom-color:var(--laterite)}
.panneau[hidden]{display:none}
.sourates{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));border-top:1px solid var(--filet);border-left:1px solid var(--filet);margin:0;padding:0;list-style:none}
.sourates li{display:contents}
.sourate{display:block;width:100%;text-align:left;font:inherit;color:#626865;background:transparent;border:0;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:8px 10px 10px;min-height:88px;position:relative;cursor:default}
.sourate .num{font:400 .68rem var(--mono)}
.sourate .ar{display:block;font-size:1.42rem;line-height:1.35;text-align:right}
.sourate .fr{font-size:.78rem;display:block;line-height:1.25}
.sourate.dispo{color:var(--encre);background:var(--papier);cursor:pointer}
.sourate.dispo:hover,.sourate[aria-expanded=true]{background:#fff;box-shadow:inset 0 -3px 0 var(--lagon)}
.sourate .cpt{position:absolute;top:7px;right:9px;font:400 .7rem/1.5 var(--mono);background:var(--lagon);color:#fff;padding:0 6px}
.legende-sourates{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 14px;font-size:.88rem;color:var(--gris)}
.detail-sourate{border:1px solid var(--encre);border-top-width:3px;background:var(--papier);padding:clamp(14px,2.4vw,26px);margin:22px 0}
.detail-sourate h3{font-size:1.7rem;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.detail-sourate h3 .ar{font-size:2.1rem;color:var(--lagon)}
.filtres{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin:0 0 18px;padding:14px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.filtres label{display:flex;flex-direction:column;gap:3px;font:400 .7rem var(--mono);text-transform:uppercase;color:var(--gris);min-width:0}
.filtres select,.filtres input{font:400 .95rem var(--serif);color:var(--encre);background:var(--papier);border:1px solid var(--gris);border-radius:0;padding:6px 8px;min-height:40px;max-width:100%}
.compte{font:400 .78rem var(--mono);color:var(--gris);margin:0 0 10px}
.fiches{list-style:none;margin:0;padding:0;border-top:2px solid var(--encre)}
.fiche{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:14px 0 15px;border-bottom:1px solid var(--filet)}
.fiche.joue{background:linear-gradient(90deg,rgba(127,207,196,.18),transparent 70%)}
.fiche .t{font-size:1.1rem;line-height:1.3}
.fiche .t .ar{display:block;font-size:1.25rem;color:var(--lagon);line-height:1.5;text-align:left}
.fiche .meta{grid-column:1;font:400 .74rem/1.6 var(--mono);color:var(--gris);text-transform:uppercase;letter-spacing:.02em}
.fiche .meta span+span::before{content:" · "}
.fiche .actions{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.fiche details{grid-column:1/-1;font-size:.9rem}
.fiche summary{cursor:pointer;color:var(--lagon);font-size:.86rem}
.fiche details p{margin:.4em 0}
.q{font:400 .68rem/1.55 var(--mono);text-transform:uppercase;padding:0 6px;border:1px solid currentColor;white-space:nowrap}
.q-haute{color:var(--lagon)}.q-moyenne{color:var(--encre2)}.q-basse{color:var(--laterite)}
.disque{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,3vw,40px);padding:26px 0;border-bottom:1px solid var(--filet)}
.disque:first-of-type{border-top:2px solid var(--encre)}
.disque h3{font-size:1.5rem}.disque h3 .ar{display:block;color:var(--lagon);font-size:1.45rem;margin-top:4px}
.disque .infos{font-size:.9rem;color:var(--encre2)}
.disque dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;margin:10px 0 0;font-size:.88rem}
.disque dt{font:400 .7rem/1.9 var(--mono);text-transform:uppercase;color:var(--gris)}.disque dd{margin:0}
.edition{font:400 .7rem var(--mono);text-transform:uppercase;color:var(--laterite)}

/* ---- lecteur persistant ---- */
.lecteur{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--encre);color:#eef3ef;border-top:1px solid #2c4f61}
.lecteur[hidden]{display:none}
.lecteur .dedans{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:8px var(--pad) 8px var(--marge)}
.lecteur button,.lecteur select{font:inherit;font-size:.82rem;background:transparent;color:#eef3ef;border:1px solid #6d8a96;border-radius:0;min-width:44px;min-height:44px;padding:0 8px;cursor:pointer}
.lecteur select{min-width:0;padding:0 4px}
.lecteur option{color:#000}
.lecteur .lire{background:var(--lagon-clair);border-color:var(--lagon-clair);color:var(--encre);font-weight:600;min-width:52px}
.lecteur .cmd{display:flex;gap:6px;align-items:center}
.lecteur .infos{min-width:0}
.lecteur .l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.98rem}
.lecteur .l1 .ar{color:var(--lagon-clair);margin-left:12px;font-size:1.08rem}
.lecteur .l2{font:400 .68rem var(--mono);color:#a9c0c8;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecteur .cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:2px}
.lecteur .temps{font:400 .68rem var(--mono);color:#a9c0c8}
.lecteur input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0;cursor:pointer}
.lecteur input[type=range]::-webkit-slider-runnable-track{height:2px;background:repeating-linear-gradient(90deg,#6d8a96 0 5px,transparent 5px 10px)}
.lecteur input[type=range]::-moz-range-track{height:2px;background:repeating-linear-gradient(90deg,#6d8a96 0 5px,transparent 5px 10px)}
.lecteur input[type=range]::-moz-range-progress{height:2px;background:var(--lagon-clair)}
.lecteur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:22px;margin-top:-11px;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M3 16h20l-3 4H6z' fill='%23eef3ef'/%3E%3Cpath d='M8 15 21 2l-2 13z' fill='%237fcfc4'/%3E%3Cpath d='M12 15V6' stroke='%23eef3ef' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat}
.lecteur input[type=range]::-moz-range-thumb{width:26px;height:22px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M3 16h20l-3 4H6z' fill='%23eef3ef'/%3E%3Cpath d='M8 15 21 2l-2 13z' fill='%237fcfc4'/%3E%3C/svg%3E") center/contain no-repeat}
.lecteur .droite{display:flex;gap:6px;align-items:center}
.lecteur .qualite{font:400 .66rem var(--mono);text-transform:uppercase;color:var(--lagon-clair);border:1px solid var(--lagon-clair);padding:2px 6px;white-space:nowrap}
.lecteur .file{position:absolute;bottom:100%;right:var(--pad);width:min(420px,92vw);max-height:50vh;overflow:auto;background:var(--papier);color:var(--encre);border:1px solid var(--encre);padding:10px 14px}
.lecteur .file ol{margin:0;padding-left:1.4em;font-size:.9rem}.lecteur .file li[aria-current]{font-weight:600;color:var(--lagon)}
.lecteur .file button{color:var(--encre);border-color:var(--gris);min-height:36px}

/* ---- vidéos, intégrations au clic ---- */
.video{position:relative;background:var(--encre);aspect-ratio:16/9;overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover;opacity:.82}
.video button{position:absolute;inset:0;background:transparent;border:0;color:#fff;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;font:inherit}
.video button span{background:var(--encre);padding:6px 12px;border:1px solid #fff;font-size:.9rem}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.integration{border:1px solid var(--filet);background:var(--papier);padding:16px 18px}
.integration p{margin:0 0 10px}

/* ---- pied ---- */
.pied{margin-top:clamp(64px,10vw,120px);padding:28px 0 36px;border-top:1px solid var(--filet);display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 32px;align-items:center;font-size:.9rem;color:var(--gris)}
.pied .signature{font:400 2rem/1 'Aref Ruqaa',var(--ar);color:var(--encre)}
.pied p{margin:0}

/* ---- grilles éditoriales ---- */
.colonnes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.c-1-5{grid-column:1/6}.c-6-13{grid-column:6/13}.c-1-8{grid-column:1/9}.c-9-13{grid-column:9/13}.c-3-11{grid-column:3/11}.c-2-8{grid-column:2/9}
.marge-note{font-size:.84rem;color:var(--gris);border-top:1px solid var(--filet);padding-top:8px}
.chiffres{display:flex;flex-wrap:wrap;gap:18px 40px;margin:24px 0 0;padding:0;list-style:none}
.chiffres li{display:flex;flex-direction:column}
.chiffres b{font:400 2.4rem/1 var(--serif);color:var(--encre)}
.chiffres span{font:400 .7rem var(--mono);text-transform:uppercase;color:var(--gris)}
/* photos du cheikh dans les marges (biographie) et en tête de la page Audio */
.photo-cheikh{min-width:0;display:block}
.photo-cheikh.marge{margin:26px 0 0;max-width:300px}
.photo-cheikh.marge img{aspect-ratio:4/5;object-fit:cover;box-shadow:9px 9px 0 -1px var(--papier),9px 9px 0 0 var(--filet)}
.titre-page.avec-photo{grid-template-rows:auto 1fr}
.titre-page.avec-photo h1{grid-column:1/8;grid-row:1}
.titre-page.avec-photo p{grid-column:1/8;grid-row:2;margin-top:18px;max-width:38em;align-self:end}
.photo-cheikh.entete{grid-column:9/13;grid-row:1/3;align-self:end}
.photo-cheikh.entete img{aspect-ratio:3/4;object-fit:cover;max-height:440px;box-shadow:10px 10px 0 -1px var(--papier),10px 10px 0 0 var(--filet)}
.galerie-cheikh{columns:3 260px}
.galerie-cheikh img{box-shadow:9px 9px 0 -1px var(--papier),9px 9px 0 0 var(--filet)}

/* ---- adaptations ---- */
@media (max-width:980px){
 .ouvre{grid-template-rows:none}
 .ouvre .grand-ar,.ouvre .titre-fr,.ouvre .sous{grid-column:1/13;grid-row:auto}.ouvre .chapo{grid-column:1/13;grid-row:auto;justify-self:start}
 .ouvre .titre-fr,.ouvre .sous{text-align:left}
 .ouvre .portrait{grid-column:1/13;grid-row:auto;margin-top:18px}
 .ouvre .portrait{max-width:560px}
 .ouvre .portrait img{aspect-ratio:4/5;max-height:62svh;box-shadow:10px 10px 0 -1px var(--papier),10px 10px 0 0 var(--filet)}
 .titre-page h1,.titre-page p{grid-column:1/13}.titre-page p{margin-top:14px}
 .titre-page.avec-photo h1,.titre-page.avec-photo p{grid-column:1/13;grid-row:auto}
 .photo-cheikh.entete{grid-column:1/13;grid-row:auto;max-width:360px;margin:18px 0 0;order:2}.titre-page.avec-photo p{order:3}
 .photo-cheikh.entete img{max-height:52svh}
 .photo-cheikh.marge{max-width:340px;margin-bottom:22px}
 .c-1-5,.c-6-13,.c-1-8,.c-9-13,.c-3-11,.c-2-8{grid-column:1/13}
 .deux,.disque{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
 :root{--marge:22px;--pad:14px}
 body{font-size:1rem}
 .route text{display:none}
 .entete{flex-wrap:wrap}
 .bouton-menu{display:inline-flex;font:inherit;background:none;border:1px solid var(--encre);min-height:40px;padding:0 12px}
 .menu{display:none;width:100%;flex-direction:column;gap:0}
 .menu.ouvert{display:flex}.menu a{display:block;padding:10px 0;border-bottom:1px solid var(--filet2)}
 .diptyque{grid-template-columns:minmax(0,1fr)}.diptyque .liaison{display:none}
 .journal>li{grid-template-columns:2.4rem minmax(0,1fr)}.journal>li>.btn,.journal>li>.act{grid-column:2;justify-self:start}
 .fiche{grid-template-columns:minmax(0,1fr)}.fiche .actions{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap}
 .chrono::before{left:5.6rem}.chrono li{grid-template-columns:4.8rem 1.6rem minmax(0,1fr)}
 .lecteur .dedans{grid-template-columns:minmax(0,1fr) auto;padding:6px 10px}
 .lecteur .cmd{grid-column:1/-1;grid-row:3;justify-content:space-between}
 .lecteur .infos{grid-column:1/-1}
 .lecteur .droite{display:none}
 .sourates{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pied{grid-template-columns:minmax(0,1fr)}
 table{font-size:.86rem}th,td{padding:6px 6px 6px 0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.lecteur,.route,.menu,.bouton-menu{display:none!important}.cadre{display:block}}
.galerie-photos{columns:3 300px;column-gap:24px}
.galerie-photos figure{break-inside:avoid;margin:0 0 26px}
.galerie-photos img{height:auto}
@media (max-width:760px){.lecteur .droite{display:flex;grid-column:1/-1;grid-row:4;justify-content:flex-end}.lecteur .qualite{display:none}}
th{overflow-wrap:normal;word-break:normal;white-space:nowrap}
figure.carte{max-width:860px}
.photo-bande.mince img{aspect-ratio:24/5;object-fit:cover}

/* ---- crédits (page Sources) : petit corps, comme un colophon ---- */
.credits .c-6-13{font-size:.8rem;color:var(--gris);line-height:1.5}
.credits ul{list-style:none;margin:0 0 1em;padding:0}
.credits li{padding:5px 0;border-bottom:1px solid var(--filet2)}
.credits a{color:var(--gris)}