/* Les Voix de l'IA — feuille de style du site (pages de l'émission et des portraits).
   Reprend la charte de la page d'origine (3h33.com/podcast-voix-de-lia) : fond presque noir, or #c4a265,
   vert #5b8a72, Playfair Display / DM Sans / JetBrains Mono, grain léger. Téléphone d'abord. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0c;
  --bg-card:#111114;
  --bg-card-hover:#18181c;
  --bg-doux:#0e0e11;
  --text:#f5f4f1;
  --text-dim:#b8b5ad;
  --text-faible:#8a877f;
  --accent:#c4a265;
  --accent-clair:#d4b275;
  --accent-glow:#c4a26540;
  --accent2:#5b8a72;
  --accent2-clair:#86b59c;
  --lia:#c99ab8;
  --spotify:#1DB954;
  --border:#222226;
  --border-2:#2c2c31;
  --player-bg:#0d0d10f2;
  --ff-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ff-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ff-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* viewport-fit=cover : en paysage, l'encoche de l'iPhone mord sur les côtés ; la gouttière s'élargit d'autant */
  --gouttiere:max(1.25rem,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --large:1200px;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{background:var(--bg);color:var(--text);font-family:var(--ff-body);min-height:100vh;overflow-x:hidden;line-height:1.5}
@supports (overflow:clip){html,body{overflow-x:clip}}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:#c4a26555;color:var(--text)}

/* grain */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.saut{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--accent);color:var(--bg);padding:.8rem 1.2rem;font-family:var(--ff-mono);font-size:.75rem;text-decoration:none}
.saut:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ barre du haut */
.barre{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem var(--gouttiere);min-height:3.4rem;
  background:linear-gradient(#0a0a0cb3,#0a0a0c00);
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.barre.defile{background:#0a0a0cd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--border)}
.marque{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.marque img{width:30px;height:auto;flex-shrink:0;transition:transform .5s var(--ease)}
.marque:hover img{transform:rotate(-8deg) scale(1.06)}
.marque span{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marque span em{font-style:italic;font-weight:400;color:var(--accent)}
.barre-droite{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.barre nav{display:flex;align-items:center;gap:1.4rem}
.barre nav a{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color .3s;position:relative}
.barre nav a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.barre nav a:hover,.barre nav a.actif{color:var(--accent)}
.barre nav a:hover::after,.barre nav a.actif::after{transform:scaleX(1)}
.barre nav a.cta-abonner{color:var(--accent);border:1px solid #c4a26580;padding:.5rem .8rem;transition:color .3s,background .3s,border-color .3s}
.barre nav a.cta-abonner::after{display:none}
.barre nav a.cta-abonner:hover,.barre nav a.cta-abonner.actif{background:var(--accent);color:var(--bg);border-color:var(--accent)}
@media(max-width:640px){.barre nav a.facultatif{display:none}.barre nav{gap:1rem}.barre-droite{gap:.7rem}.facultatif-texte{display:none}}
@media(max-width:420px){.barre nav a.etroit{display:none}.barre nav a{letter-spacing:.14em}.barre .fleche{width:34px;height:34px}.barre-droite{gap:.55rem}}

/* flèches « portrait précédent / suivant » (pages des portraits), avec une bulle au survol */
.fleches{display:flex;gap:.4rem}
.fleche{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-2);background:#0a0a0c99;color:var(--text);text-decoration:none;transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease)}
.fleche svg{width:16px;height:16px}
.fleche:hover,.fleche:focus-visible{border-color:var(--accent);color:var(--accent);background:#c4a2651a}
.fleche.precedent:hover{transform:translateX(-2px)}
.fleche.suivant:hover{transform:translateX(2px)}
.fleche .bulle{position:absolute;top:calc(100% + 12px);right:-.4rem;display:flex;align-items:center;gap:.65rem;padding:.45rem .9rem .45rem .45rem;background:#111114f5;border:1px solid var(--border-2);box-shadow:0 16px 40px #000a;white-space:nowrap;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease);text-align:left}
.fleche .bulle img,.fleche .bulle-initiales{width:40px;height:40px;object-fit:cover;flex-shrink:0;background:#1d150e;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);color:#efe6d2}
.fleche .bulle-sens{display:block;font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.fleche .bulle strong{display:block;font-family:var(--ff-display);font-size:.98rem;color:var(--text);font-weight:700}
.fleche:hover .bulle,.fleche:focus-visible .bulle{opacity:1;transform:none}
@media(hover:none){.fleche .bulle{display:none}}
/* grands écrans : les flèches passent sur les côtés de la page, à mi-hauteur */
.fleches-cote{display:none}
@media(min-width:1360px){
  .barre .fleches{display:none}
  .fleches-cote{display:block}
  .fleches-cote .fleche{position:fixed;top:50%;z-index:800;width:52px;height:52px;margin-top:-26px;background:#0d0d10cc;border-color:#c4a26566;color:var(--accent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px #0008}
  .fleches-cote .fleche svg{width:22px;height:22px}
  .fleches-cote .precedent{left:1.4rem}
  .fleches-cote .suivant{right:1.4rem}
  .fleches-cote .fleche:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
  .fleches-cote .fleche .bulle{top:50%;right:auto;transform:translate(-6px,-50%)}
  .fleches-cote .precedent .bulle{left:calc(100% + 12px)}
  .fleches-cote .suivant .bulle{left:auto;right:calc(100% + 12px);transform:translate(6px,-50%);flex-direction:row-reverse;text-align:right;padding:.45rem .45rem .45rem .9rem}
  .fleches-cote .fleche:hover .bulle,.fleches-cote .fleche:focus-visible .bulle{transform:translate(0,-50%)}
}

/* ------------------------------------------------------------------ bandeau (émission) : compact, sur un mur de vignettes
   Les vignettes des portraits défilent lentement (CSS seul) sur un plan incliné ; un voile sombre garde le texte lisible.
   Le titre, Lia et les deux boutons tiennent en une hauteur d'écran réduite : les épisodes se voient tout de suite.
   overflow:clip (et non hidden seul) : le bandeau ne peut pas « défiler » de côté quand le navigateur y amène un élément
   (recherche dans la page, focus), le halo qui le déborde n'y est pour rien. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;max-width:none;margin:0;
  padding:4.6rem var(--gouttiere) 1.6rem;text-align:center;border-bottom:1px solid var(--border);
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 85% 70% at 50% 46%,#0a0a0ce6 0%,#0a0a0cb8 55%,#0a0a0c73 100%),
    linear-gradient(180deg,#0a0a0cf0 0%,#0a0a0c00 22%,#0a0a0c00 78%,#0a0a0c 100%);
}
.hero::after{
  content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 45% 50% at 50% 40%,#c4a2651c 0%,transparent 70%);
  animation:respire 14s ease-in-out infinite alternate;
}
.hero-dedans{
  position:relative;max-width:1360px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"texte" "lia" "actions";gap:1rem;align-items:center;
}
.hero-texte{grid-area:texte}
.hero-actions{grid-area:actions}
.hero-label{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  opacity:0;animation:fadeUp .8s .2s forwards;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
}
.hero-label img{width:22px;height:auto}
.hero h1{
  font-family:var(--ff-display);font-weight:900;font-size:clamp(2.45rem,10.4vw,5.6rem);line-height:1;letter-spacing:-.03em;
  white-space:nowrap;margin-top:.55rem;opacity:0;animation:fadeUp .8s .35s forwards;text-shadow:0 4px 40px #0a0a0c;
}
.hero h1 .accent{color:var(--accent);background:linear-gradient(100deg,var(--accent) 20%,#f3dcaa 45%,var(--accent) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:reflet 7s 1.6s ease-in-out infinite}
.hero h1 .italic{font-style:italic;font-weight:400}
.hero-compte{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);opacity:0;animation:fadeUp .8s .55s forwards}
.hero-compte strong{color:var(--accent);font-weight:500;font-size:.8rem;letter-spacing:.04em}
.hero-compte>span+span::before{content:'·';margin-right:1rem;color:var(--text-faible)}
.hero-cta{margin-top:.9rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;opacity:0;animation:fadeUp .8s .65s forwards}
.hero-mention{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.12em;color:var(--text-faible);margin-top:.8rem;text-transform:uppercase;opacity:0;animation:fadeUp .8s .75s forwards}
.hero-mention a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid #c4a26566}
.hero-mention a:hover{color:var(--accent)}
@media(min-width:960px){
  .hero{padding:5.4rem var(--gouttiere) 2.4rem}
  .hero::before{background:
    linear-gradient(90deg,#0a0a0cf0 0%,#0a0a0cd1 34%,#0a0a0c73 60%,#0a0a0c40 100%),
    linear-gradient(180deg,#0a0a0ce6 0%,#0a0a0c00 24%,#0a0a0c00 74%,#0a0a0c 100%)}
  .hero::after{background:radial-gradient(ellipse 40% 60% at 22% 45%,#c4a2651f 0%,transparent 70%)}
  .hero-dedans{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"texte lia" "actions lia";column-gap:4rem;row-gap:1.4rem;text-align:left}
  .hero-texte{align-self:end}
  .hero-actions{align-self:start}
  .hero-label,.hero-compte,.hero-cta{justify-content:flex-start}
  .hero h1{font-size:clamp(3rem,5.2vw,5.6rem)}
}

/* Lia vous présente l'émission : lecteur, texte en citation, encart Choucroute Citron */
.lia-carte{
  grid-area:lia;position:relative;text-align:left;width:100%;max-width:520px;margin:0 auto;padding:.95rem 1rem 1rem;
  border:1px solid #c4a2654d;background:linear-gradient(150deg,#17140fe6,#0c0c0fd9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 70px #000b,inset 0 1px 0 #c4a26526;
  opacity:0;animation:fadeUp .9s .5s forwards;
}
.lia-carte::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 0% 0%,#c4a26522,transparent 60%),radial-gradient(ellipse 50% 60% at 100% 100%,#c99ab814,transparent 60%)}
@media(min-width:960px){.lia-carte{margin:0 0 0 auto;padding:1.25rem 1.35rem 1.15rem}}
.lia-bouton{position:relative;display:flex;align-items:center;gap:.85rem;width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--text);-webkit-tap-highlight-color:transparent}
/* Le bouton de lecture de Lia : grand rond doré (comme ceux des portraits), halo qui pulse doucement tant qu'on ne
   l'a pas encore écoutée (demande d'Alexandre, 12/10/2026 : « on ne voit pas assez le bouton ») ; toute la ligne
   est cliquable (c'est un seul bouton). Pendant l'écoute : pause, et l'onde des boutons de lecture. */
.lia-rond{
  position:relative;width:64px;height:64px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--bg);box-shadow:0 0 0 0 #c4a26500,0 8px 24px #0008;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s;
}
.lia-rond svg{width:24px;height:24px;fill:currentColor}
.lia-rond .i-pause{display:none}
.lia-bouton.joue .lia-rond .i-lecture{display:none}
.lia-bouton.joue .lia-rond .i-pause{display:block}
.lia-bouton:not(.joue) .lia-rond .i-lecture{margin-left:4px}
.lia-rond::before,.lia-rond::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);opacity:0;pointer-events:none}
.lia-carte:not(.ecoutee) .lia-rond{animation:lia-halo 2.6s ease-in-out infinite}
.lia-carte:not(.ecoutee) .lia-rond::before{animation:appel 2.6s var(--ease) infinite}
.lia-carte.joue .lia-rond::before{animation:onde 1.8s var(--ease) infinite}
.lia-carte.joue .lia-rond::after{animation:onde 1.8s .9s var(--ease) infinite}
.lia-bouton:hover .lia-rond{transform:scale(1.06);background:var(--accent-clair);box-shadow:0 0 30px var(--accent-glow),0 8px 24px #0008}
.lia-bouton:active .lia-rond{transform:scale(.95)}
@keyframes lia-halo{0%,100%{box-shadow:0 0 0 0 #c4a26500,0 0 18px #c4a26533,0 8px 24px #0008}50%{box-shadow:0 0 0 6px #c4a26524,0 0 34px #c4a26566,0 8px 24px #0008}}
.lia-textes{min-width:0;flex:1;line-height:1.25}
.lia-titre{font-family:var(--ff-display);font-weight:700;font-size:1.06rem;color:var(--text);transition:color .3s}
.lia-bouton:hover .lia-titre{color:var(--accent-clair)}
.lia-temps{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.lia-piste{position:relative;display:block;height:2px;margin:.8rem 0 0;background:#ffffff14;overflow:hidden}
.lia-piste i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),#f3dcaa);transition:transform .25s linear}
.lia-carte audio{display:none}
html:not(.anime) .lia-carte audio{display:block;width:100%;margin-top:.7rem}
html:not(.anime) .lia-bouton,html:not(.anime) .lia-piste{display:none}
.lia-texte{margin:.75rem 0 0;position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:1rem}
.lia-citation{flex:1 1 100%;min-width:0}
.lia-texte figcaption{order:2}
.lia-lire{order:3}
.lia-carte.sans-son .lia-texte{margin-top:0}
.lia-citation p{font-family:var(--ff-display);font-style:italic;font-size:.95rem;line-height:1.55;color:#e4ddcc}
.lia-citation span{transition:color .4s,background-color .4s}
.lia-carte.ecoute .lia-citation span{color:#e4ddcc8c}
.lia-carte.ecoute .lia-citation span.deja{color:#e4ddccb8}
.lia-carte.ecoute .lia-citation span.dit{color:#fff6e2;background:linear-gradient(transparent 62%,#c4a26545 62%)}
.lia-texte figcaption{margin-top:.4rem;font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lia-lire{display:inline-block;margin:.3rem 0 0;padding:.2rem 0;background:none;border:0;border-bottom:1px solid #c4a26566;color:var(--accent);font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lia-lire[hidden]{display:none}
.cc-encart{position:relative;display:flex;align-items:center;gap:.7rem;margin-top:.8rem;padding-top:.75rem;border-top:1px solid #ffffff12}
.cc-logo{flex-shrink:0;display:block}
.cc-logo img{width:30px;height:auto;transition:transform .5s var(--ease)}
.cc-logo:hover img{transform:rotate(-8deg) scale(1.08)}
.cc-encart p{font-size:.76rem;line-height:1.45;color:var(--text-dim);font-weight:300}
.cc-encart strong{color:var(--text);font-weight:500}
.cc-encart a{color:var(--accent);text-decoration:none;white-space:nowrap;border-bottom:1px solid #c4a26555}
.cc-encart a:hover{border-color:var(--accent)}
.cc-encart a svg{width:10px;height:10px;margin-left:.25rem;vertical-align:-1px}
.cc-encart .cc-court{display:none}
/* Sur téléphone, le bandeau se resserre pour que la première rangée de portraits se voie dès l'arrivée
   (375 × 812 : elle commence vers 450 px). Le texte de Lia tient sur UNE ligne, « Lire tout » à sa droite (il se
   déplie aussi pendant l'écoute) : il reste entier dans la page, pour qui veut le lire et pour les moteurs de
   recherche. L'encart Choucroute Citron tient sur une ligne, les chiffres aussi. Ordinateur inchangé. */
@media(max-width:700px){
  .hero{padding-top:3.85rem;padding-bottom:1rem}
  .hero-dedans{gap:.65rem}
  .hero-label{font-size:.54rem;letter-spacing:.2em}
  .hero-label img,.hero-label .hl-serie{display:none}
  .hero h1{margin-top:.2rem;font-size:clamp(2rem,8.6vw,3.4rem)}
  .lia-carte{padding:.7rem .85rem .7rem}
  .lia-rond{width:56px;height:56px}
  .lia-rond svg{width:21px;height:21px}
  .lia-titre{font-size:1rem}
  .lia-piste{margin-top:.55rem}
  .lia-texte{margin-top:.5rem;column-gap:.6rem}
  .lia-citation p{font-size:.88rem;line-height:1.5}
  html.anime .lia-carte:not(.deplie):not(.ecoute) .lia-citation{flex:1 1 0}
  html.anime .lia-carte:not(.deplie):not(.ecoute) .lia-citation p{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  html.anime .lia-carte:not(.deplie):not(.ecoute) .lia-texte figcaption{display:none}
  .lia-carte.ecoute .lia-lire{display:none}
  .lia-texte figcaption{font-size:.5rem;letter-spacing:.05em}
  .lia-lire{flex:0 0 auto;font-size:.52rem;letter-spacing:.1em;margin:0}
  .cc-encart{margin-top:.5rem;padding-top:.5rem;gap:.5rem}
  .cc-logo img{width:24px}
  .cc-encart p{display:none}
  .cc-encart .cc-court{display:inline-flex;align-items:center;font-size:.74rem;line-height:1.3;color:var(--text-dim);font-weight:300}
  .cc-court strong{margin-left:.3em}
  .cc-encart .cc-court svg{color:var(--accent)}
  .hero-compte{font-size:.56rem;letter-spacing:.08em;gap:.2rem .6rem;flex-wrap:nowrap;white-space:nowrap}
  .hero-compte strong{font-size:.72rem}
  .hero-compte>span+span::before{margin-right:.6rem}
  .hero-compte .hc-long,.hero-compte .hc-prep{display:none}
  .hero-cta{margin-top:.55rem}
  .hero .hero-cta .btn{padding-top:.78rem;padding-bottom:.78rem}
  .hero-mention{font-size:.52rem;letter-spacing:.07em;margin-top:.5rem}
  .hero-mention .dernier-paru{display:none}
  .section-portraits{padding-top:1rem}
  .section-portraits .section-label{font-size:.56rem;letter-spacing:.14em;margin-bottom:.3rem}
  .portraits-titre .section-title{font-size:1.75rem}
  .section-portraits .episodes-grid{margin-top:.7rem}
}
/* très petits téléphones (320 px) : les deux boutons et le titre des portraits tiennent encore sur une ligne */
@media(max-width:360px){
  .hero .hero-cta .btn{padding-left:.7rem;padding-right:.7rem;letter-spacing:.05em;font-size:.62rem;gap:.45rem}
  .portraits-titre .section-title{font-size:1.5rem}
}
@keyframes appel{0%{opacity:.6;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.35)}}

/* boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.8rem;border-radius:0;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s;cursor:pointer;border:none;
}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:var(--accent-clair);transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}

/* sections */
section{padding:5rem var(--gouttiere);max-width:var(--large);margin:0 auto}
.section-label{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.section-title{font-family:var(--ff-display);font-size:clamp(2rem,6vw,3.5rem);font-weight:700;line-height:1.1;margin-bottom:1rem}
.section-title em{font-weight:400;color:var(--accent)}
.section-desc{color:var(--text-dim);font-size:1rem;line-height:1.7;max-width:640px;font-weight:300;margin-bottom:2.5rem}

/* chiffres */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem;padding:2.5rem var(--gouttiere);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 auto;max-width:var(--large)}
.stat{text-align:center}
.stat-num{font-family:var(--ff-display);font-size:clamp(1.9rem,6vw,2.6rem);font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.stat-label{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin-top:.3rem}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ------------------------------------------------------------------ les portraits, tout de suite sous le bandeau */
.section-portraits{max-width:1360px;padding-top:1.6rem;display:grid;grid-template-columns:minmax(0,1fr)}
.section-portraits>.ancre{grid-column:1/-1}
.portraits-titre .section-title{margin-bottom:.2rem}
.section-portraits .episodes-grid{order:2;margin-top:1.1rem}
.section-portraits .portraits-desc{order:3;margin:2rem 0 0}
@media(min-width:900px){
  .section-portraits{padding-top:2.2rem;grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:3rem;align-items:end}
  .section-portraits .portraits-desc{order:1;margin:0 0 .4rem;font-size:.9rem;line-height:1.6}
  .section-portraits .episodes-grid{grid-column:1/-1;margin-top:1.6rem}
}
@media(min-width:1240px){.section-portraits .episodes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.section-portraits .section-label{margin-bottom:.6rem}

/* ------------------------------------------------------------------ cartes des portraits */
.episodes-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media(min-width:620px){.episodes-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.episodes-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.episode-card{
  background:var(--bg-card);border:1px solid var(--border);overflow:hidden;position:relative;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s,background .4s;isolation:isolate;
}
.episode-card:hover,.episode-card:focus-within{background:var(--bg-card-hover);border-color:#c4a26599;transform:translateY(-6px);box-shadow:0 24px 60px #00000070,0 0 0 1px #c4a26522}
.episode-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.episode-card:hover::before,.episode-card:focus-within::before{transform:scaleX(1)}
.episode-card.actif{border-color:var(--accent)}
.lien-carte{position:absolute;inset:0;z-index:1}
button.lien-carte{background:none;border:0;padding:0;cursor:pointer;width:100%}
.lien-carte:focus-visible{outline-offset:-3px}
.card-cover{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(135deg,#1a1a1e 0%,#0d0d10 100%)}
.card-cover picture img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.episode-card:hover .card-cover picture img,.episode-card:hover .monogramme{transform:scale(1.04)}
.monogramme{transition:transform 1s var(--ease)}
.card-cover::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 55%,rgba(10,10,12,.85) 100%)}
/* reflet qui traverse la vignette au survol */
.card-cover .reflet{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#fff3 50%,transparent 65%);transform:translateX(-120%);transition:transform 1.1s var(--ease)}
.episode-card:hover .card-cover .reflet{transform:translateX(120%)}
.card-cover-badge{
  position:absolute;top:1rem;right:1rem;z-index:2;background:rgba(10,10,12,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:.32rem .7rem;font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.25em;color:var(--accent);text-transform:uppercase;border:1px solid #c4a26540;
}
.card-cover-badge.nouveau{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.card-cover-badge.bientot{color:var(--text-dim)}
.card-cover-play{
  position:absolute;bottom:1rem;right:1rem;z-index:2;width:54px;height:54px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(10px) scale(.9);transition:opacity .4s,transform .4s var(--ease),box-shadow .3s;
}
.card-cover-play::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);opacity:0;transform:scale(.8)}
.episode-card:hover .card-cover-play,.card-cover-play:focus-visible{opacity:1;transform:none}
.card-cover-play:hover{transform:scale(1.08)!important;box-shadow:0 0 30px var(--accent-glow)}
.card-cover-play:hover::before{animation:onde 1.4s var(--ease) infinite}
.card-cover-play svg{width:18px;height:18px;fill:var(--bg);margin-left:3px}
.card-cover-play.joue svg{margin-left:0}
@media(hover:none){.card-cover-play{opacity:1;transform:none}}
.card-inner{padding:1.4rem 1.5rem 1.6rem;flex:1;display:flex;flex-direction:column}
.card-number{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.card-number::after{content:'';flex:1;height:1px;background:var(--border)}
.card-name{font-family:var(--ff-display);font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.3rem}
.card-role{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;color:var(--accent);margin-bottom:1rem}
.card-desc{font-size:.88rem;line-height:1.6;color:var(--text-dim);font-weight:300;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-footer{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--border);position:relative;z-index:2}
.card-desc+.card-footer{margin-top:1.2rem}
.card-duration{font-family:var(--ff-mono);font-size:.7rem;color:var(--text-dim)}
.card-lire{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.card-lire svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.episode-card:hover .card-lire svg{transform:translateX(4px)}
.card-play{width:42px;height:42px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .3s,box-shadow .3s;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.card-play:hover,.card-play:focus-visible{transform:scale(1.12);box-shadow:0 0 20px var(--accent-glow)}
.card-play svg{width:14px;height:14px;fill:var(--bg);margin-left:2px}
.card-play.joue svg{margin-left:0}

/* sur téléphone : deux cartes par ligne, plus compactes (nom, rôle, durée et lecture) */
@media(max-width:619px){
  .episodes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .episodes-grid .card-inner{padding:.75rem .8rem .85rem}
  .episodes-grid .card-number,.episodes-grid .card-desc,.episodes-grid .card-cover-play{display:none}
  .episodes-grid .card-name{font-size:1.08rem;line-height:1.15}
  .episodes-grid .card-role{font-size:.58rem;letter-spacing:.04em;margin-bottom:0;line-height:1.4}
  .episodes-grid .card-footer{padding-top:.65rem;margin-top:auto}
  .episodes-grid .card-footer .card-duration{font-size:.62rem}
  .episodes-grid .card-play{width:36px;height:36px}
  .episodes-grid .card-lire{font-size:.55rem;letter-spacing:.12em}
  .episodes-grid .card-cover-badge{top:.5rem;right:.5rem;font-size:.5rem;letter-spacing:.18em;padding:.25rem .5rem}
  .episodes-grid .card-role+.card-footer{margin-top:.75rem}
  .monogramme .serie,.monogramme .nom{display:none}
}

/* monogramme (portrait sans vignette), dans l'esprit des vignettes : fond brun, double cadre doré */
.monogramme{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12%;
  background:radial-gradient(ellipse 70% 60% at 50% 38%,#4a3826 0%,#1d150e 62%,#120d09 100%);color:#efe6d2;
}
.monogramme::before,.monogramme::after{content:'';position:absolute;pointer-events:none;border:1px solid #c9a86acc}
.monogramme::before{inset:6%}
.monogramme::after{inset:7.8%;border-color:#c9a86a55}
.monogramme .initiales{font-family:var(--ff-display);font-weight:400;font-size:clamp(3.5rem,22cqi,8rem);line-height:1;letter-spacing:-.02em}
.monogramme .serie{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.35em;color:#c9a86a;margin-top:1.2rem;text-transform:uppercase}
.monogramme .nom{font-family:var(--ff-display);font-size:1.15rem;margin-top:.4rem}
.monogramme .pastille{position:absolute;top:10%;left:10%;width:13%;height:auto;opacity:.95}
.card-cover,.portrait-visuel{container-type:inline-size}

/* ------------------------------------------------------------------ projet */
.about-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media(min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}}
.about-quote{font-family:var(--ff-display);font-size:clamp(1.25rem,3.4vw,1.6rem);font-style:italic;line-height:1.5;position:relative;padding-left:2rem;margin-top:1rem}
.about-quote::before{content:'"';position:absolute;left:-.5rem;top:-.5rem;font-size:5rem;color:var(--accent);opacity:.3;font-family:var(--ff-display);line-height:1}
.about-details{display:flex;flex-direction:column;gap:1.2rem}
.about-detail{padding:1.1rem 1.4rem;border-left:2px solid var(--border);transition:border-color .4s,background .4s}
.about-detail:hover{border-color:var(--accent);background:#ffffff04}
.about-detail h3{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem;font-weight:500}
.about-detail p{font-size:.92rem;color:var(--text-dim);line-height:1.6;font-weight:300}
.about-detail a{color:var(--accent);text-underline-offset:3px}
.voix-trio{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.voix-trio span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--border-2);color:var(--text-dim)}
.voix-trio i{width:8px;height:8px;border-radius:50%;display:inline-block}
.lien-marque{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;color:var(--accent);font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-decoration:none;transition:color .3s}
.lien-marque img{width:40px;height:auto;transition:transform .6s var(--ease)}
.lien-marque:hover img{transform:rotate(-10deg) scale(1.08)}
.lien-marque:hover{color:var(--accent-clair)}

/* plateformes */
.platforms{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.platform-badge{
  display:inline-flex;align-items:center;gap:.55rem;padding:.65rem 1.1rem;border:1px solid var(--border-2);
  font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:all .3s;
}
a.platform-badge:hover{border-color:var(--accent);color:var(--accent)}
.platform-badge.bientot{border-style:dashed;cursor:default}
.platform-badge .etat{font-size:.55rem;letter-spacing:.12em;color:var(--accent);opacity:.9}
.abonnement{border:1px solid var(--border);background:linear-gradient(135deg,#121216,#0c0c0f);padding:2rem 1.5rem;position:relative;overflow:hidden}
.abonnement::after{content:'';position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(#c4a26522,transparent 70%);pointer-events:none}
.abonnement p{color:var(--text-dim);font-weight:300;max-width:620px}

/* S'abonner (en haut de la page de l'émission) */
.section-abonnement{padding-top:3rem}
.abonnement-grille{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:start}
@media(min-width:960px){.abonnement-grille{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.abonnement{min-width:0}
.abonnement .section-label svg{width:12px;height:12px;vertical-align:-1px;margin-right:.3rem}
.abonnement-tete{display:flex;gap:1.2rem;align-items:center;margin-bottom:1rem}
.abonnement-tete .section-title{font-size:clamp(1.6rem,5vw,2.4rem);margin-bottom:0}
.abonnement .pochette{width:132px;height:132px;flex-shrink:0;border:1px solid #c4a26555;box-shadow:0 14px 40px #0008;transition:transform .6s var(--ease)}
.abonnement .pochette:hover{transform:rotate(-2deg) scale(1.03)}
@media(max-width:520px){.abonnement .pochette{width:88px;height:88px}}
.abonnement p strong{color:var(--accent);font-weight:500}
.flux-libelle{font-family:var(--ff-mono);font-size:.62rem!important;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faible)!important;margin:1.4rem 0 .5rem}
.flux-ligne{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
.flux-adresse{flex:1 1 100%;min-width:0;display:flex;align-items:center;padding:.75rem .9rem;background:#08080a;border:1px solid var(--border-2);font-family:var(--ff-mono);font-size:.82rem;color:var(--text);word-break:break-all;-webkit-user-select:all;user-select:all;cursor:text;line-height:1.45}
.flux-ligne .btn{flex:0 0 auto;justify-content:center}
.copier.copie-ok{background:var(--accent2);border-color:var(--accent2);color:var(--text)}
@media(max-width:520px){.flux-ligne .btn{flex:1 1 100%}}
/* encart « Par e-mail » (service 3h33-site/services/abonnements) */
.abo-email{position:relative;z-index:1;margin:0 0 1.5rem;padding:1.2rem 1.1rem 1.1rem;border:1px solid #c4a26545;background:#0b0b0ecc;box-shadow:inset 0 1px 0 #c4a2651a}
.abo-email-titre{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-display);font-size:1.15rem;font-weight:700;line-height:1.25;margin-bottom:.9rem}
.abo-email-titre svg{width:18px;height:18px;flex-shrink:0;fill:var(--accent)}
.abo-email-ligne{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
.abo-email-champ{flex:1 1 15rem;min-width:0;padding:.85rem .95rem;background:#08080a;border:1px solid var(--border-2);border-radius:0;color:var(--text);font-family:var(--ff-body);font-size:1rem;line-height:1.3;-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s}
.abo-email-champ::placeholder{color:var(--text-faible);opacity:1}
.abo-email-champ:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.abo-email-ligne .btn{flex:0 0 auto}
.abo-email-ligne .btn svg{transition:transform .3s var(--ease)}
.abo-email-ligne .btn:hover svg{transform:translateX(3px)}
.abo-email.en-cours .btn{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.abo-email .abo-email-etat{margin:.7rem 0 0;font-size:.9rem;color:var(--text-dim)}
.abo-email .abo-email-etat:empty{display:none}
.abo-email .abo-email-etat.erreur{color:#e9a48f}
.abo-email .abo-email-etat.ok{margin:0;padding:.85rem .95rem;border:1px solid var(--accent2);background:#5b8a7218;color:var(--text);font-weight:400}
.abo-email.envoye .abo-email-ligne{display:none}
.abo-email .abo-email-mention{margin:.75rem 0 0;font-size:.8rem;color:var(--text-faible);line-height:1.5}
.abo-email-mention a{color:var(--accent);text-underline-offset:3px}
.abo-piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.insecable{white-space:nowrap}
@media(max-width:520px){.abo-email-ligne .btn{flex:1 1 100%;justify-content:center}}
@media(min-width:769px){.abo-email{padding:1.4rem 1.5rem 1.3rem}}
.applis{list-style:none;margin:1.4rem 0 0;display:grid;gap:.15rem}
.applis li{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.7rem 0;border-top:1px solid var(--border)}
@media(min-width:640px){.applis li{grid-template-columns:11rem 1fr;gap:1rem;align-items:baseline}}
.applis .appli{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.applis a.appli svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.applis a.appli:hover svg{transform:translateX(3px)}
.applis li>span:last-child{color:var(--text-dim);font-size:.9rem;font-weight:300;line-height:1.5}
.note-flux{margin-top:1.2rem;font-size:.85rem}
.note-flux a{color:var(--accent);text-underline-offset:3px}
.abonnement-cc h3{font-family:var(--ff-display);font-size:1.7rem;margin:.2rem 0 .7rem}
.abonnement-cc .logo-cc{float:right;margin:0 0 .5rem 1rem}
.abonnement-cc .logo-cc img{width:84px;height:auto;transition:transform .6s var(--ease)}
.abonnement-cc .logo-cc:hover img{transform:rotate(-8deg) scale(1.06)}
.abonnement-cc .platforms{clear:both}
.abonnement-cc .platform-badge svg{width:11px;height:11px}
.abonnement-cc .flux-adresse{font-size:.75rem}

/* Ce qui arrive */
.a-venir{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:700px){.a-venir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){.a-venir{grid-template-columns:repeat(3,minmax(0,1fr))}}
.a-venir-carte{position:relative;padding:1.5rem 1.4rem 1.6rem;border:1px solid var(--border);background:var(--bg-card);transition:border-color .4s,transform .5s var(--ease),background .4s}
.a-venir-carte::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--accent),var(--accent2));transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.a-venir-carte:hover{border-color:#c4a26566;background:var(--bg-card-hover);transform:translateY(-3px)}
.a-venir-carte:hover::before{transform:scaleY(1)}
.a-venir-etat{display:inline-block;font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);border:1px dashed #c4a26570;padding:.28rem .6rem;margin-bottom:.9rem}
.a-venir-etat.fait{border-style:solid;background:#c4a2651a}
.a-venir-carte h3{font-family:var(--ff-display);font-size:1.25rem;line-height:1.25;margin-bottom:.6rem}
.a-venir-carte p{color:var(--text-dim);font-size:.92rem;line-height:1.6;font-weight:300}

/* petites choses */
.ancre{position:relative;top:-5rem;display:block;height:0;visibility:hidden}
.pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;margin-top:1rem;font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase}
.pied-liens a{color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.pied-liens a:hover{color:var(--accent)}
.pied-liens svg{width:11px;height:11px}
.abonner-portrait{display:flex;gap:.7rem;align-items:flex-start;margin-top:2rem;padding:1rem 1.2rem;border:1px solid var(--border);color:var(--text-dim);font-size:.92rem;font-weight:300}
.abonner-portrait svg{width:16px;height:16px;flex-shrink:0;color:var(--accent);margin-top:.2rem}
.abonner-portrait a{color:var(--accent);text-underline-offset:3px}

/* bouton « remonter en haut » : apparaît quand on est descendu, au-dessus du lecteur s'il est ouvert */
.remonter{
  position:fixed;right:calc(1rem + env(safe-area-inset-right,0px));bottom:calc(1.1rem + var(--safe-bottom));z-index:1001;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#111114e6;border:1px solid #c4a26599;color:var(--accent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px #0009;opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s,transform .45s var(--ease),visibility 0s linear .45s,bottom .5s var(--ease),background .3s,color .3s;
}
.remonter.visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.remonter:hover{background:var(--accent);color:var(--bg)}
.remonter svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.remonter:hover svg{transform:translateY(-2px)}
body.lecteur-ouvert .remonter{bottom:calc(150px + var(--safe-bottom))}
body.lecteur-ouvert:not(.mode-audio) .remonter{bottom:calc(250px + var(--safe-bottom))}

/* pied de page */
footer{border-top:1px solid var(--border);padding:3rem var(--gouttiere);text-align:center;margin-top:3rem;padding-bottom:calc(3rem + var(--safe-bottom))}
footer img{width:56px;height:auto;margin:0 auto 1rem;opacity:.9}
footer p{font-family:var(--ff-mono);font-size:.63rem;color:var(--text-dim);letter-spacing:.16em;line-height:2}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .mention-ia{color:var(--text-faible);margin-top:.6rem;text-transform:none;letter-spacing:.06em}

/* ------------------------------------------------------------------ lecteur collant (page de l'émission) */
.player{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--player-bg);border-top:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transform:translateY(110%);transition:transform .55s var(--ease);padding-bottom:var(--safe-bottom);
}
.player.active{transform:translateY(0)}
.player-embed-inner{max-width:var(--large);margin:0 auto;padding:.7rem 1rem}
.player-embed-info{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.player-cover{width:46px;height:46px;border-radius:6px;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#1a1a1e,#0d0d10);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-style:italic;color:var(--accent)}
.player-cover img{width:100%;height:100%;object-fit:cover}
.player-titles{min-width:0;flex:1}
.player-name{font-family:var(--ff-display);font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-role{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-nav-btns{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.player-btn{background:none;border:none;cursor:pointer;color:var(--text-dim);display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;min-width:38px;min-height:38px;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent;text-decoration:none}
.player-btn:hover,.player-btn:focus-visible{color:var(--text);background:#ffffff0c}
.player-btn svg{width:20px;height:20px}
.player-btn.spotify-direct{color:var(--spotify)}
.player-embed-frame{border-radius:12px;overflow:hidden;height:152px;background:#191414;position:relative}
.player-embed-frame iframe{width:100%;height:152px;border:none;border-radius:12px;display:block}
.player-embed-frame::before{content:'Chargement du lecteur…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.15em;color:var(--text-dim);text-transform:uppercase;transition:opacity .3s;pointer-events:none}
.player-embed-frame.loaded::before{opacity:0}
.player[data-mode="audio"] .player-embed-frame,.player[data-mode="audio"] .mobile-audio-tip,.player[data-mode="audio"] .spotify-direct{display:none}
.player[data-mode="spotify"] .player-audio,.player[data-mode="spotify"] .lien-page{display:none}
.mobile-audio-tip{margin-top:.5rem;font-family:var(--ff-mono);font-size:.6rem;color:var(--text-dim);text-align:center;line-height:1.5}
.mobile-audio-tip a{color:var(--spotify);text-decoration:none}
@media(min-width:769px){.mobile-audio-tip{display:none}}
body.lecteur-ouvert{padding-bottom:230px}
body.lecteur-ouvert.mode-audio{padding-bottom:140px}

/* ------------------------------------------------------------------ lecteur audio maison */
.player-audio{display:flex;align-items:center;gap:.8rem}
.bouton-lecture{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;border:none;cursor:pointer;background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;position:relative;transition:transform .3s var(--ease),box-shadow .3s,background .3s;-webkit-tap-highlight-color:transparent;
}
.bouton-lecture:hover{transform:scale(1.06);box-shadow:0 0 30px var(--accent-glow);background:var(--accent-clair)}
.bouton-lecture:active{transform:scale(.95)}
.bouton-lecture svg{width:20px;height:20px;fill:currentColor}
.bouton-lecture .i-pause{display:none}
.bouton-lecture.joue .i-lecture{display:none}
.bouton-lecture.joue .i-pause{display:block}
.bouton-lecture:not(.joue) .i-lecture{margin-left:3px}
.bouton-lecture.joue::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);animation:onde 1.8s var(--ease) infinite}
.piste{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.temps{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:.62rem;color:var(--text-dim);font-variant-numeric:tabular-nums}
input.curseur{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;--p:0%}
input.curseur::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--p),#ffffff22 var(--p))}
input.curseur::-moz-range-track{height:3px;border-radius:3px;background:#ffffff22}
input.curseur::-moz-range-progress{height:3px;border-radius:3px;background:var(--accent)}
input.curseur::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--text);margin-top:-5px;box-shadow:0 0 0 4px #c4a26533;transition:transform .2s}
input.curseur::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--text)}
input.curseur:hover::-webkit-slider-thumb{transform:scale(1.25)}

/* onde : barres générées à la construction, qui « respirent » pendant l'écoute */
.onde{
  position:relative;height:64px;display:flex;align-items:center;gap:2px;cursor:pointer;touch-action:none;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.onde .couche{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.onde .couche.jouee{clip-path:inset(0 calc(100% - var(--progression,0%)) 0 0);transition:clip-path .25s linear}
.onde i{flex:1;min-width:1px;height:calc(var(--h) * 1%);border-radius:2px;background:#ffffff26;transform-origin:center;transition:background .3s}
.onde .couche.jouee i{background:linear-gradient(180deg,#e9cf98,var(--accent))}
.lecteur.joue .onde i{animation:barre 1.25s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -73ms)}
.onde:hover .couche:not(.jouee) i{background:#ffffff38}
.onde .survol{position:absolute;top:0;bottom:0;width:1px;background:var(--text);opacity:0;pointer-events:none;transition:opacity .2s}
.onde:hover .survol{opacity:.6}

/* ------------------------------------------------------------------ page portrait */
.fil{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faible);margin-bottom:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.fil a{color:var(--text-dim);text-decoration:none}
.fil a:hover{color:var(--accent)}
.fil span[aria-hidden]{color:var(--border-2)}
.portrait-hero{position:relative;padding:6.5rem var(--gouttiere) 2.5rem;max-width:var(--large);margin:0 auto}
.portrait-hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 50% 60% at 25% 35%,#c4a26514,transparent 70%),radial-gradient(ellipse 40% 50% at 85% 70%,#5b8a720d,transparent 70%)}
.portrait-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
@media(min-width:900px){.portrait-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem}.portrait-visuel::before{inset:-18px}}
.portrait-visuel{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin:0 auto;opacity:0;animation:apparition 1.2s .2s var(--ease) forwards}
.portrait-visuel .cadre{position:absolute;inset:0;overflow:hidden;box-shadow:0 30px 80px #000a,0 0 0 1px #c4a26533;animation:flotte 9s ease-in-out 1.4s infinite}
.portrait-visuel .cadre picture img{width:100%;height:100%;object-fit:cover}
.portrait-visuel .cadre::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff24 48%,transparent 62%);transform:translateX(-130%);animation:balaye 2.4s 1.1s var(--ease) forwards}
.portrait-visuel::before{content:'';position:absolute;inset:-10px;border:1px solid #c4a26530;pointer-events:none;animation:apparition 1.6s .6s var(--ease) backwards}
.portrait-visuel::after{content:'';position:absolute;inset:-40px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#c4a26530,transparent);filter:blur(10px);animation:respire 8s ease-in-out infinite alternate}
.portrait-texte>*{opacity:0;animation:fadeUp .9s var(--ease) forwards}
.portrait-texte>*:nth-child(1){animation-delay:.35s}
.portrait-texte>*:nth-child(2){animation-delay:.45s}
.portrait-texte>*:nth-child(3){animation-delay:.55s}
.portrait-texte>*:nth-child(4){animation-delay:.65s}
.portrait-texte>*:nth-child(5){animation-delay:.75s}
.portrait-texte>*:nth-child(n+6){animation-delay:.85s}
.surtitre{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.surtitre .pastille-etat{color:var(--bg);background:var(--accent);padding:.2rem .5rem;letter-spacing:.2em}
.surtitre .pastille-etat.bientot{background:transparent;color:var(--text-dim);border:1px dashed var(--border-2)}
.portrait-texte h1{font-family:var(--ff-display);font-weight:900;font-size:clamp(2.6rem,9vw,5rem);line-height:.98;letter-spacing:-.025em}
.portrait-texte .angle{font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:clamp(1.25rem,3.6vw,1.8rem);line-height:1.3;color:var(--accent);margin-top:.8rem}
.portrait-texte .fonction{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-dim);margin-top:1rem;text-transform:uppercase;line-height:1.7}
.portrait-texte .accroche{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--text-dim);font-weight:300;line-height:1.7;margin-top:1.2rem;max-width:620px}
.meta-ligne{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:1.2rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;color:var(--text-faible)}
.meta-ligne span{display:inline-flex;align-items:center;gap:.4rem}
.meta-ligne span+span::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--border-2);margin-right:.6rem}
.site-officiel{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid #c4a26566;padding-bottom:.25rem;transition:color .3s,border-color .3s}
.site-officiel:hover{color:var(--accent);border-color:var(--accent)}
.site-officiel svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.site-officiel:hover svg{transform:translate(2px,-2px)}

/* lecteur de la page portrait */
.lecteur{margin-top:2rem;padding:1.2rem;border:1px solid var(--border);background:linear-gradient(160deg,#141418,#0c0c0f 70%);position:relative;overflow:hidden}
.lecteur::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 0% 0%,#c4a26514,transparent 60%);pointer-events:none}
.lecteur-haut{display:flex;align-items:center;gap:1rem;position:relative}
.lecteur-haut .titre-lecteur{min-width:0;flex:1}
.lecteur-haut .titre-lecteur strong{display:block;font-family:var(--ff-display);font-size:1.05rem;line-height:1.25}
.lecteur-haut .titre-lecteur span{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase}
.lecteur .onde{margin:1rem 0 .3rem}
.lecteur-bas{display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:relative;font-family:var(--ff-mono);font-size:.64rem;color:var(--text-dim)}
.lecteur-bas .temps-courant{font-variant-numeric:tabular-nums}
.lecteur-outils{display:flex;align-items:center;gap:.25rem}
.lecteur-outils button{background:none;border:1px solid transparent;cursor:pointer;color:var(--text-dim);font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.05em;padding:.4rem .55rem;min-height:36px;display:inline-flex;align-items:center;gap:.25rem;transition:color .2s,border-color .2s}
.lecteur-outils button:hover{color:var(--text);border-color:var(--border-2)}
.lecteur-outils svg{width:16px;height:16px}
.lecteur audio{display:none}
html:not(.anime) .lecteur audio{display:block;width:100%;margin-top:1rem}
html:not(.anime) .lecteur .onde,html:not(.anime) .lecteur-outils,html:not(.anime) .lecteur .bouton-lecture{display:none}
.lecteur.bientot{text-align:left}
.lecteur.bientot .onde i{background:#ffffff14}
.lecteur.bientot p{color:var(--text-dim);font-weight:300;font-size:.95rem;position:relative}
.lecteur.bientot strong{color:var(--accent);font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;font-weight:500;display:block;margin-bottom:.4rem}
.lecteur.bientot .onde i{animation:barre-lente 3s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -110ms)}

/* mini-lecteur fixe sous la barre du haut : il apparaît dès que le grand lecteur est passé au-dessus de l'écran et
   reste là pendant toute la lecture de la page (site.js) ; --haut-barre est mesuré par site.js */
.mini{
  position:fixed;left:0;right:0;top:var(--haut-barre,3.4rem);z-index:890;
  background:#0b0b0eeb;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border);box-shadow:0 18px 30px -22px #000;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
  transition:transform .45s var(--ease),opacity .3s,visibility 0s .45s;
}
.mini.visible{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:transform .45s var(--ease),opacity .3s,visibility 0s}
.mini-dedans{max-width:var(--large);margin:0 auto;padding:.4rem var(--gouttiere);display:flex;align-items:center;gap:.4rem}
.mini .bouton-lecture{width:40px;height:40px}
.mini .bouton-lecture svg{width:15px;height:15px}
.mini .bouton-lecture:not(.joue) .i-lecture{margin-left:2px}
.mini .bouton-lecture.joue::after{inset:-3px}
.mini-saut{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:var(--text-dim);cursor:pointer;transition:color .2s,background .2s}
.mini-saut:hover{color:var(--accent);background:#ffffff0d}
.mini-saut svg{width:20px;height:20px}
.mini-centre{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;padding:0 .35rem}
.mini-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;min-width:0}
.mini-aller{min-width:0;display:flex;align-items:baseline;gap:.5rem;padding:0;border:0;background:none;color:var(--text);cursor:pointer;text-align:left}
.mini-n{flex-shrink:0;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;color:var(--accent)}
.mini-n:empty{display:none}
.mini-chapitre{min-width:0;font-family:var(--ff-display);font-size:.92rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.mini-aller:hover .mini-chapitre{color:var(--accent-clair)}
.mini-temps{flex-shrink:0;font-family:var(--ff-mono);font-size:.62rem;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-piste{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
.mini-fond{position:relative;display:block;width:100%;height:3px;border-radius:3px;background:#ffffff1f;transition:height .2s}
.mini-piste:hover .mini-fond{height:5px}
.mini-jouee{position:absolute;left:0;top:0;bottom:0;width:var(--progression,0%);border-radius:3px;background:linear-gradient(90deg,var(--accent),#f3dcaa);transition:width .25s linear}
.mini-jouee::after{content:'';position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--text);box-shadow:0 0 0 3px #c4a26540;opacity:0;transition:opacity .2s}
.mini-piste:hover .mini-jouee::after,.mini-piste:focus-visible .mini-jouee::after,html.en-ecoute .mini-jouee::after{opacity:1}
.mini-piste:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* repères : une fine coupure au début de chaque partie */
.mini-fond b{position:absolute;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:#0b0b0e}
@media(max-width:520px){
  .mini-dedans{gap:.15rem;padding-left:.75rem;padding-right:.6rem}
  .mini-sep,.mini-total{display:none}
  .mini-chapitre{font-size:.86rem}
  .mini-saut{width:34px;height:34px}
}
@media(min-width:980px){html.mini-ouvert .chapitres{top:calc(var(--haut-barre,3.4rem) + var(--haut-mini,3.3rem) + 1.25rem)}}

/* corps de la page portrait : chapitres à côté de la conversation */
.portrait-corps{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:2rem}
.portrait-corps>*{min-width:0}
@media(min-width:980px){.portrait-corps{grid-template-columns:260px minmax(0,1fr);gap:3.5rem;align-items:start}}
.chapitres{position:relative}
@media(min-width:980px){.chapitres{position:sticky;top:5.5rem;transition:top .45s var(--ease)}}
.chapitres h2{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:500}
.chapitres ol{list-style:none;counter-reset:ch;display:flex;flex-direction:column;gap:.15rem}
@media(max-width:979px){
  .chapitres ol{flex-direction:row;overflow-x:auto;gap:.5rem;padding-bottom:.6rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 calc(var(--gouttiere) * -1);padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
  .chapitres li{flex:0 0 auto;scroll-snap-align:start}
  .chapitres a{border:1px solid var(--border-2);padding:.55rem .8rem!important;white-space:nowrap}
  .chapitres a::before{display:none}
}
.chapitres a{
  display:flex;gap:.7rem;align-items:baseline;padding:.5rem .6rem .5rem 1rem;text-decoration:none;color:var(--text-dim);font-size:.9rem;
  position:relative;transition:color .3s,background .3s,border-color .3s;border-radius:2px
}
.chapitres a::before{content:'';position:absolute;left:0;top:.45rem;bottom:.45rem;width:2px;background:var(--border-2);transition:background .3s,transform .4s var(--ease)}
.chapitres a .n{font-family:var(--ff-mono);font-size:.6rem;color:var(--text-faible);letter-spacing:.1em;flex-shrink:0;transition:color .3s}
.chapitres a:hover{color:var(--text);background:#ffffff06}
.chapitres a.courant{color:var(--text);border-color:var(--accent)}
.chapitres a.courant::before{background:var(--accent)}
.chapitres a.courant .n{color:var(--accent)}
.chapitres .note{font-size:.72rem;color:var(--text-faible);margin-top:1rem;line-height:1.5;font-weight:300}
/* instants des chapitres (épisodes minutés), et la partie qu'on entend pendant l'écoute */
.chapitres a .titre-ch{flex:1;min-width:0}
.chapitres a .t{flex-shrink:0;margin-left:auto;padding-left:.4rem;font-family:var(--ff-mono);font-size:.58rem;color:var(--text-faible);font-variant-numeric:tabular-nums;transition:color .3s;display:inline-flex;align-items:center;gap:.35rem}
.chapitres a[data-debut]:hover .t{color:var(--accent)}
.chapitres a.ecoute{color:var(--text)}
.chapitres a.ecoute .t,.chapitres a.ecoute .n{color:var(--accent)}
.chapitres a.ecoute::before{background:var(--accent)}
html.en-ecoute .chapitres a.ecoute .t::before{
  content:'';width:9px;height:9px;flex-shrink:0;
  background:linear-gradient(var(--accent),var(--accent)) 0 100%/2px 45% no-repeat,linear-gradient(var(--accent),var(--accent)) 3.5px 100%/2px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) 7px 100%/2px 65% no-repeat;
  animation:egaliseur .9s ease-in-out infinite alternate
}
@keyframes egaliseur{0%{background-size:2px 45%,2px 100%,2px 65%}50%{background-size:2px 100%,2px 40%,2px 85%}100%{background-size:2px 60%,2px 75%,2px 30%}}
@media(max-width:979px){.chapitres .note{display:none}}

/* la conversation */
.conversation h2,.bloc h2{font-family:var(--ff-display);font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.15;margin-bottom:.4rem}
.conversation .intro-conv{color:var(--text-dim);font-weight:300;margin-bottom:2rem;font-size:.95rem}
.legende-voix{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chapitre-titre{
  display:flex;align-items:center;gap:.9rem;margin:2.6rem 0 1.4rem;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);scroll-margin-top:6rem
}
.chapitre-titre .num{font-family:var(--ff-display);font-size:1.6rem;letter-spacing:0;color:var(--accent);font-style:italic;line-height:1}
.chapitre-titre::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-2),transparent)}
.chapitre-titre.generique{color:var(--text-faible)}
.replique{display:flex;gap:.75rem;margin:.9rem 0;max-width:640px}
.replique .avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:.9rem;border:1px solid currentColor;margin-top:1.15rem
}
.replique .contenu{min-width:0}
.replique .qui{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.3rem}
.replique .bulle{padding:.85rem 1.1rem;line-height:1.65;font-size:.97rem;font-weight:300;color:#e9e6df;border:1px solid var(--border);background:var(--bg-card);border-radius:2px 16px 16px 16px}
.replique.ada{color:var(--accent)}
.replique.ada .bulle{border-color:#c4a26530;background:linear-gradient(135deg,#17140f,#111114)}
.replique.alan{color:var(--accent2-clair);flex-direction:row-reverse;margin-left:auto;text-align:left}
.replique.alan .contenu{display:flex;flex-direction:column;align-items:flex-end}
.replique.alan .bulle{border-color:#5b8a7238;background:linear-gradient(135deg,#0f1513,#111114);border-radius:16px 2px 16px 16px}
.replique.lia{color:var(--lia);max-width:680px;margin-left:auto;margin-right:auto}
.replique.lia .bulle{border-color:#c99ab840;background:radial-gradient(ellipse at 0% 0%,#c99ab81a,transparent 60%),#141117;border-radius:16px;position:relative}
.replique.lia .avatar{background:radial-gradient(circle at 30% 30%,#c99ab855,transparent 70%)}
.replique.lia .qui::after{content:' · l’IA-nimatrice';letter-spacing:.12em;opacity:.7}
.replique.generique .bulle{color:var(--text-dim);font-style:italic}
/* répliques cliquables (épisodes minutés) : un clic lance l'écoute au début de la réplique ; celle qu'on entend
   s'éclaire (couleur, liseré, halo), sans rien changer à la mise en page : la page ne saute jamais */
.ecouter-ici{
  display:inline-flex;align-items:center;gap:.3rem;margin-left:.55rem;padding:.12rem .45rem .12rem .38rem;vertical-align:1px;
  border:1px solid transparent;border-radius:999px;background:none;color:var(--text-faible);cursor:pointer;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;transition:color .25s,border-color .25s,background .25s
}
.ecouter-ici svg{width:7px;height:7px;fill:currentColor}
.ecouter-ici:hover,.ecouter-ici:focus-visible{color:currentColor;border-color:currentColor}
.replique .ecouter-ici:hover,.replique .ecouter-ici:focus-visible{color:inherit}
.chapitre-titre .ecouter-ici{order:1;margin-left:0;color:var(--text-faible);letter-spacing:.06em}
.chapitre-titre .ecouter-ici:hover{color:var(--accent);border-color:#c4a26566}
.conversation.minutee .replique .bulle{cursor:pointer;transition:color .35s,border-color .35s,box-shadow .35s}
.conversation.minutee .replique:hover .bulle{box-shadow:0 0 0 1px #ffffff12}
.conversation.minutee .replique:hover .ecouter-ici{color:inherit}
.replique.ada{--voix:var(--accent)}
.replique.alan{--voix:var(--accent2-clair)}
.replique.lia{--voix:var(--lia)}
.replique.en-cours .bulle{color:#fffaf0;border-color:var(--voix,var(--accent));box-shadow:0 0 0 1px var(--voix,var(--accent)),0 0 34px -10px var(--voix,var(--accent))}
.replique.en-cours .ecouter-ici{color:inherit;border-color:currentColor}
.replique.en-cours .avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--voix,var(--accent)),0 0 18px var(--voix,var(--accent))}
html.anime .replique.reveal{transform:translateY(16px);transition-duration:.6s}
html.anime .replique.ada.reveal{transform:translateX(-18px)}
html.anime .replique.alan.reveal{transform:translateX(18px)}
html.anime .replique.reveal.visible{transform:none}
@media(min-width:700px){.replique .avatar{width:42px;height:42px}}

/* blocs : citations, sources, Lia, partage */
.bloc{margin-top:4rem}
.bloc .sous{color:var(--text-dim);font-weight:300;margin-bottom:1.8rem;font-size:.95rem}
.citations{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:760px){.citations{grid-template-columns:1fr 1fr}}
.citation{margin:0;padding:1.5rem 1.4rem 1.3rem;border:1px solid var(--border);background:var(--bg-card);position:relative;overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.citation:hover{border-color:#c4a26566;transform:translateY(-3px)}
.citation::before{content:'»';position:absolute;right:.9rem;bottom:-2.6rem;font-family:var(--ff-display);font-size:6rem;color:var(--accent);opacity:.09;line-height:1;transition:opacity .4s,transform .6s var(--ease)}
.citation:hover::before{opacity:.2;transform:rotate(-8deg)}
.citation blockquote{font-family:var(--ff-display);font-style:italic;font-size:1.12rem;line-height:1.5;color:var(--text)}
.citation .trad{margin-top:.7rem;font-size:.88rem;color:var(--text-dim);font-weight:300;line-height:1.6}
.citation figcaption{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--border);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center}
.citation figcaption a{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.citation figcaption a:hover{text-decoration:underline}
.citation figcaption svg{width:10px;height:10px}
.sources-liste{list-style:none;display:grid;grid-template-columns:1fr;gap:.1rem;counter-reset:src}
@media(min-width:760px){.sources-liste{grid-template-columns:1fr 1fr;column-gap:2rem}}
.sources-liste li{counter-increment:src;border-bottom:1px solid var(--border)}
.sources-liste a{display:flex;gap:.8rem;align-items:baseline;padding:.65rem 0;text-decoration:none;color:var(--text-dim);font-size:.86rem;line-height:1.45;transition:color .25s}
.sources-liste a::before{content:counter(src,decimal-leading-zero);font-family:var(--ff-mono);font-size:.58rem;color:var(--text-faible);flex-shrink:0;width:1.6rem}
.sources-liste a:hover{color:var(--text)}
.sources-liste .domaine{display:block;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;color:var(--accent);margin-bottom:.1rem}
.sources-liste .chemin{display:block;overflow-wrap:anywhere}
details.plus{margin-top:1.4rem;border:1px solid var(--border)}
details.plus summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;justify-content:space-between;gap:1rem}
details.plus summary::-webkit-details-marker{display:none}
details.plus summary::after{content:'+';font-size:1.1rem;transition:transform .4s var(--ease)}
details.plus[open] summary::after{transform:rotate(45deg)}
details.plus .dedans{padding:0 1.2rem 1rem}
.methode{margin-top:2rem;padding:1.3rem 1.4rem;border-left:2px solid var(--accent);background:#c4a2650a;color:var(--text-dim);font-weight:300;font-size:.92rem;line-height:1.7}
.methode strong{color:var(--text);font-weight:500}

.lia-encart{
  margin-top:4rem;padding:2rem 1.5rem;border:1px solid #c99ab840;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 120% at 100% 0%,#c99ab81f,transparent 60%),radial-gradient(ellipse 60% 80% at 0% 100%,#c4a26512,transparent 60%),#111014;
}
.lia-encart .etiquette{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lia)}
.lia-encart h2{font-family:var(--ff-display);font-size:clamp(1.5rem,4.6vw,2.1rem);margin:.5rem 0 .6rem;line-height:1.2}
.lia-encart p{color:var(--text-dim);font-weight:300;max-width:560px}
.lia-encart .champ{margin-top:1.4rem;display:flex;gap:.5rem;max-width:560px}
.lia-encart .champ span{flex:1;border:1px dashed #c99ab866;padding:.85rem 1rem;color:var(--text-faible);font-size:.9rem;font-style:italic;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lia-encart .champ b{padding:.85rem 1rem;background:#c99ab826;color:var(--lia);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;display:flex;align-items:center}
.lia-encart .etincelles{position:absolute;right:1.2rem;top:1.2rem;width:70px;height:70px;opacity:.8}
.lia-encart .etincelles path{fill:var(--lia);transform-origin:center;transform-box:fill-box;animation:scintille 3.2s ease-in-out infinite}
.lia-encart .etincelles path:nth-child(2){animation-delay:-1.1s}
.lia-encart .etincelles path:nth-child(3){animation-delay:-2.1s}

.partage{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.partage .titre-partage{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);margin-right:.4rem;width:100%}
@media(min-width:620px){.partage .titre-partage{width:auto}}
.partage a,.partage button{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .9rem;border:1px solid var(--border-2);background:none;color:var(--text-dim);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .3s,border-color .3s,transform .3s var(--ease)}
.partage a:hover,.partage button:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.partage svg{width:14px;height:14px;fill:currentColor}
.partage .partage-natif{display:none}
.partage.natif .partage-natif{display:inline-flex}
.partage .copie-ok{color:var(--accent2-clair);border-color:var(--accent2)}

/* portrait précédent / suivant */
.voisins{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:4rem}
@media(min-width:700px){.voisins{grid-template-columns:1fr 1fr}}
.voisin{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--border);background:var(--bg-card);text-decoration:none;transition:border-color .4s,transform .5s var(--ease),background .4s;overflow:hidden}
.voisin:hover{border-color:#c4a26599;transform:translateY(-3px);background:var(--bg-card-hover)}
.voisin.suivant{flex-direction:row-reverse;text-align:right}
.voisin .mini-vignette{width:72px;height:72px;flex-shrink:0;position:relative;overflow:hidden;background:#1a1a1e}
.voisin .mini-vignette picture img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.voisin:hover .mini-vignette picture img{transform:scale(1.1)}
.voisin .mini-vignette .monogramme{padding:0}
.voisin .mini-vignette .monogramme .initiales{font-size:1.6rem}
.voisin .mini-vignette .monogramme .serie,.voisin .mini-vignette .monogramme .nom,.voisin .mini-vignette .monogramme .pastille{display:none}
.voisin .sens{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent)}
.voisin strong{display:block;font-family:var(--ff-display);font-size:1.15rem;margin-top:.2rem}
.voisin .etat{font-size:.78rem;color:var(--text-dim);font-weight:300}
.retour-liste{text-align:center;margin-top:2.5rem}

/* ------------------------------------------------------------------ apparitions au défilement */
html.anime .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.anime .reveal.visible{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes apparition{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes respire{from{transform:scale(1);opacity:.85}to{transform:scale(1.06);opacity:1}}
@keyframes reflet{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes balaye{to{transform:translateX(130%)}}
@keyframes onde{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.45)}}
@keyframes barre{from{transform:scaleY(.55)}to{transform:scaleY(1.1)}}
@keyframes barre-lente{from{transform:scaleY(.35)}to{transform:scaleY(.9)}}
@keyframes scintille{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.1);opacity:1}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .hero-label,.hero h1,.hero-compte,.hero-mention,.hero-cta,.lia-carte,.portrait-visuel,.portrait-texte>*{opacity:1!important;animation:none!important}
  .lia-rond,.lia-rond::before,.lia-rond::after,.hero::after{animation:none!important}
  html.anime .reveal{opacity:1!important;transform:none!important}
  .lecteur.joue .onde i,.lecteur.bientot .onde i{animation:none!important}
  .hero h1 .accent{animation:none!important}
}

/* grands écrans */
@media(min-width:769px){
  :root{--gouttiere:max(2rem,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  section{padding:6rem var(--gouttiere)}
  .lecteur{padding:1.5rem 1.6rem}
  .player-embed-inner{padding:.8rem 1.5rem}
  .abonnement{padding:2.5rem}
  .lia-encart{padding:2.5rem}
}
@media(max-width:768px){
  .hero-cta .btn{padding:.85rem 1.05rem;letter-spacing:.1em;font-size:.68rem}
  .player-role{display:none}
}

/* Téléphone (12/10, demande d'Alexandre : « on ne voit pas le player ») : vignette du portrait plus petite pour que
   le titre et le lecteur remontent ; le mini-lecteur, visible dès l'arrivée, a un bouton de lecture plus gros. */
@media (max-width:700px){
  .portrait-visuel{max-width:min(64vw,300px)}
  .mini .bouton-lecture{width:46px;height:46px}
  .mini .bouton-lecture svg{width:17px;height:17px}
}

/* ------------------------------------------------------------------ revue téléphone (12/10, v4 : 375 × 812 et 320 × 640) */
/* Mini-lecteur avant la première écoute : « Écouter le portrait » et la durée totale (pas « 0:00 ») */
.mini.attente .mini-courant,.mini.attente .mini-sep{display:none}
.mini.attente .mini-total{display:inline}
/* Le lecteur collant de la page de l'émission, en paysage : rien sous l'encoche */
@media(max-width:768px){.player-embed-inner{padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}}
@media(min-width:769px){.player-embed-inner{padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.5rem,env(safe-area-inset-right,0px))}}

@media(max-width:700px){
  /* le mini-lecteur est là dès l'arrivée sur un portrait : la page commence sous lui (le fil d'Ariane était caché dessous) */
  .mini~main .portrait-hero{padding-top:calc(var(--haut-barre,3.4rem) + var(--haut-mini,3.75rem) + 1rem)}
  .mini~main .fil{margin-bottom:1.1rem}
  .fil{row-gap:.9rem} /* sur deux lignes, la zone de toucher d'un lien ne déborde pas sur la ligne suivante */
  /* boutons du mini-lecteur : 40 px au moins ; barre de progression plus haute au doigt (la hauteur du mini ne change pas) */
  .mini-saut{width:40px;height:40px}
  .mini-piste{height:24px}
  /* le symbole de Lia ne passe plus sur le titre « Parler de … avec Lia » */
  .lia-encart .etincelles{width:52px;height:52px;right:.9rem;top:.9rem}
  .lia-encart h2{padding-right:2.6rem}
  /* boutons et liens d'au moins 40 px de haut */
  .lecteur-outils button{min-height:40px;min-width:40px;justify-content:center}
  .episodes-grid .card-play{width:40px;height:40px}
  .partage a,.partage button{min-height:40px}
  .platform-badge{min-height:40px}
  .player-btn{min-width:40px;min-height:40px}
  .lien-marque{padding:.25rem 0}
  input.curseur{height:28px;margin:-5px 0}
  .pied-liens{row-gap:1.3rem}
  /* texte courant d'au moins 14 px */
  .sources-liste a{font-size:.9rem}
  .note-flux{font-size:.9rem}
  footer .mention-ia{font-size:.74rem;line-height:1.75}
}
/* 320 px : « Les Voix de l'IA » reste entier dans la barre des portraits (le lien « Portraits » s'efface ; le nom
   de l'émission mène à la même page) */
@media(max-width:360px){.barre nav a.tres-etroit{display:none}}

/* Au doigt, les petits liens et boutons gardent leur dessin mais leur zone de toucher passe à 40 px au moins :
   un pseudo-élément transparent l'agrandit (rien ne bouge à l'écran ; à la souris, rien ne change). */
@media(max-width:700px),(pointer:coarse){
  .marque,.lia-lire,.cc-logo,.cc-court,.card-lire,.site-officiel,.ecouter-ici,.applis a.appli,.fil a,.mini-aller,.pied-liens a{position:relative}
  .barre nav a::before,.marque::before,.lia-lire::before,.cc-logo::before,.cc-court::before,.card-lire::before,.site-officiel::before,
  .ecouter-ici::before,.applis a.appli::before,.fil a::before,.mini-aller::before,.pied-liens a::before,.fleche::after{content:'';position:absolute}
  .barre nav a::before{inset:-13px -6px}
  .marque::before{inset:-8px -4px}
  .fleche::after{inset:-3px}
  .lia-lire::before{inset:-12px -8px}
  .cc-logo::before,.cc-court::before{inset:-12px -3px}
  .card-lire::before{inset:-14px -6px}
  .site-officiel::before{inset:-10px -4px}
  .ecouter-ici::before{inset:-10px -4px}
  .applis a.appli::before{inset:-12px -4px}
  .fil a::before{inset:-12px -3px}
  .mini-aller::before{inset:-9px -4px -3px}
  .mini-piste::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-8px}
  .pied-liens a::before{inset:-10px -6px}
}

/* ================================================================== recherche, familles, « Connaissez-vous… ? » (12/10/2026)
   Page de l'émission : sous le titre des portraits, un portrait tiré au hasard (« Connaissez-vous… ? »), puis le champ
   de recherche, les familles (puces, plusieurs à la fois) et le compteur. Pages des portraits : la loupe de la barre
   ouvre la recherche par-dessus la page ; les familles du portrait mènent à la page de l'émission filtrée. */
[hidden]{display:none!important}
mark{background:#c4a26547;color:var(--text);padding:0 .06em;border-radius:2px;box-shadow:0 0 0 1px #c4a26526}

/* ordre dans la section : titre, Connaissez-vous, outils, grille, « aucun », texte de présentation */
.section-portraits .connaissez{order:1}
.section-portraits .outils{order:2}
.section-portraits .episodes-grid{order:3}
.section-portraits .aucun,.section-portraits .fin-resultats{order:4}
.section-portraits .portraits-desc{order:5;margin:2rem 0 0}
@media(min-width:900px){
  .section-portraits .connaissez{grid-column:2;margin-top:0}
  .section-portraits .outils,.section-portraits .aucun,.section-portraits .fin-resultats,.section-portraits .portraits-desc{grid-column:1/-1}
  .section-portraits .portraits-desc{margin:2.6rem 0 0;font-size:.95rem;line-height:1.65;max-width:640px}
}

/* « Connaissez-vous… ? » */
.connaissez{
  position:relative;display:grid;grid-template-columns:124px minmax(0,1fr);grid-template-areas:"vig texte" "vig actions";column-gap:1rem;align-items:start;margin-top:1rem;padding:.9rem;
  border:1px solid #c4a2654d;background:linear-gradient(150deg,#17140fe6,#0c0c0fd9);box-shadow:0 18px 50px #0008,inset 0 1px 0 #c4a26526;overflow:hidden;isolation:isolate;
}
.connaissez::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 80% at 0% 0%,#c4a26524,transparent 60%)}
.cv-vignette{grid-area:vig;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 38%,#4a3826 0%,#1d150e 62%,#120d09 100%);box-shadow:0 0 0 1px #c4a26540,0 12px 30px #0009}
.cv-vignette picture,.cv-vignette img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cv-vignette:hover img{transform:scale(1.06)}
.cv-initiales{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:2.4rem;color:#efe6d2}
.cv-texte{grid-area:texte;min-width:0;display:flex;flex-direction:column}
.cv-label{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.cv-nom{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;line-height:1.15;margin-top:.15rem;color:var(--text)}
.cv-nom a{color:inherit;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease),color .3s}
.cv-nom a:hover{color:var(--accent-clair);background-size:100% 1px}
.cv-role{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;color:var(--accent);margin-top:.25rem}
.cv-phrase{margin-top:.55rem}
.cv-phrase p:not(.cv-source){font-family:var(--ff-display);font-style:italic;font-size:.93rem;line-height:1.5;color:#e4ddcc;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cv-source{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.05em;color:var(--text-faible);margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}
.cv-ecouter{padding:.7rem 1.05rem;min-height:42px}
.cv-ecouter .cv-duree{font-size:.6rem;letter-spacing:.06em;opacity:.72;text-transform:none}
.cv-autre{display:inline-flex;align-items:center;gap:.45rem;min-height:42px;padding:.55rem .9rem;background:none;border:1px solid var(--border-2);color:var(--text-dim);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.cv-autre:hover{border-color:var(--accent);color:var(--accent)}
.cv-autre svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.cv-autre:hover svg{transform:rotate(-12deg)}
/* le portrait tiré au hasard apparaît en douceur (et à chaque « Un autre ») ; sans script, celui de la page reste */
html.anime .connaissez:not(.pret) .cv-vignette,html.anime .connaissez:not(.pret) .cv-texte{opacity:0}
.connaissez.change .cv-vignette{animation:cv-entree .7s var(--ease) both}
.connaissez.change .cv-texte{animation:cv-entree .7s .06s var(--ease) both}
@keyframes cv-entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:699px){
  .connaissez{grid-template-columns:84px minmax(0,1fr);grid-template-areas:"vig texte" "actions actions";column-gap:.8rem;padding:.75rem;margin-top:.75rem}
  .cv-label{font-size:.52rem;letter-spacing:.2em}
  .cv-nom{font-size:1.2rem}
  .cv-role{font-size:.56rem;letter-spacing:.04em}
  .cv-phrase{margin-top:.4rem}
  .cv-phrase p:not(.cv-source){font-size:.84rem;-webkit-line-clamp:2;line-clamp:2}
  .cv-source{font-size:.5rem}
  .cv-actions{margin-top:.65rem;gap:.45rem;flex-wrap:nowrap}
  .cv-ecouter{flex:1 1 auto;padding:.6rem .8rem;font-size:.62rem;letter-spacing:.1em;gap:.45rem}
  .cv-autre{padding:.5rem .65rem;font-size:.58rem;letter-spacing:.08em}
}

/* outils : recherche, familles, compteur */
.outils{margin-top:1.2rem;scroll-margin-top:4.4rem}
html:not(.anime) .outils{display:none}
.cherche{position:relative;display:flex;align-items:center}
.cherche>svg{position:absolute;left:.95rem;width:18px;height:18px;color:var(--accent);pointer-events:none}
.cherche-champ{
  width:100%;min-width:0;height:50px;padding:0 3rem 0 2.85rem;background:#08080a;border:1px solid var(--border-2);border-radius:0;
  color:var(--text);font-family:var(--ff-body);font-size:1rem;line-height:1.3;-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s;
}
.cherche-champ::placeholder{color:var(--text-faible);opacity:1}
.cherche-champ:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.cherche-champ::-webkit-search-cancel-button,.cherche-champ::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.cherche-effacer{position:absolute;right:4px;top:50%;width:42px;height:42px;margin-top:-21px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text-dim);cursor:pointer;transition:color .2s}
.cherche-effacer:hover{color:var(--accent)}
.cherche-effacer svg{width:16px;height:16px}
.puces{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.puce{
  display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.45rem .85rem;border:1px solid var(--border-2);border-radius:999px;
  background:#0c0c0f;color:var(--text-dim);font-family:var(--ff-body);font-size:.84rem;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s,opacity .25s;-webkit-tap-highlight-color:transparent;
}
.puce:hover{border-color:#c4a26599;color:var(--text)}
.puce[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500}
.puce-n{font-family:var(--ff-mono);font-size:.62rem;color:var(--text-faible);font-variant-numeric:tabular-nums}
.puce[aria-pressed="true"] .puce-n{color:#0a0a0cb3}
.puce:disabled{opacity:.32;cursor:default}
.puce:disabled:hover{border-color:var(--border-2);color:var(--text-dim)}
/* téléphone : les familles sur une seule ligne qui défile de côté (la page, elle, ne bouge pas) */
@media(max-width:699px){
  .outils{margin-top:.9rem}
  .puces{flex-wrap:nowrap;overflow-x:auto;margin:.6rem calc(var(--gouttiere) * -1) 0;padding:0 var(--gouttiere) .3rem;scroll-padding:0 var(--gouttiere);scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent)}
  .puces::-webkit-scrollbar{display:none}
  .puce{flex:0 0 auto;font-size:.8rem;padding:.4rem .75rem}
}
.compte-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;margin-top:.55rem;min-height:40px}
.compte{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.compte strong{color:var(--accent);font-weight:500;font-size:.8rem;letter-spacing:.04em}
.outils .tout-voir{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.4rem .85rem;border:1px solid #c4a26580;background:none;color:var(--accent);font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.outils .tout-voir:hover{background:var(--accent);color:var(--bg)}
.tout-voir svg{width:12px;height:12px}
.exemples{margin-left:auto;font-size:.82rem;color:var(--text-faible);font-weight:300}
.exemples button,.rf-etat button,.aucun-exemples button{background:none;border:0;border-bottom:1px dashed #c4a26570;color:var(--text-dim);font:inherit;cursor:pointer;padding:.15rem 0;margin:0 .2rem;transition:color .2s,border-color .2s}
.exemples button:hover,.rf-etat button:hover,.aucun-exemples button:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:699px){.exemples{display:none}}
.aucun{padding:2.4rem 1rem;margin-top:1.1rem;text-align:center;border:1px dashed var(--border-2);color:var(--text-dim)}
.aucun p{margin-bottom:1rem}
.aucun .btn svg{width:12px;height:12px}

/* cartes pendant une recherche : le passage trouvé, surligné, à la place du résumé */
.card-extrait{display:block;font-size:.84rem;line-height:1.55;color:var(--text-dim);font-weight:300}
.card-extrait+.card-footer{margin-top:1.1rem}
.extrait-ou{display:block;font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.extrait-texte{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.extrait-plus{display:block;margin-top:.35rem;font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.06em;color:var(--text-faible)}
.episode-card.avec-extrait .card-desc{display:none}
.card-name mark,.card-role mark{background:#c4a26540;color:inherit;box-shadow:none}
@media(max-width:619px){
  .episodes-grid .card-extrait{margin-top:.5rem;font-size:.74rem;line-height:1.45}
  .episodes-grid .extrait-ou{font-size:.5rem;letter-spacing:.06em;margin-bottom:.2rem}
  .episodes-grid .extrait-texte{-webkit-line-clamp:5;line-clamp:5}
  .episodes-grid .extrait-plus{display:none}
  .episodes-grid .card-extrait+.card-footer{margin-top:.7rem}
}

/* ================================================================== les résultats mis en valeur (v6, 12/10/2026)
   Retour d'Alexandre : « on voit assez mal les résultats ; il faut mettre en valeur le résultat obtenu ».
   html.en-filtre (une recherche ou une famille) : la ligne du compteur devient un grand titre doré avec « Effacer », les
   portraits trouvés ont un liseré doré et suivent juste sous le champ, le reste de la page est rangé jusqu'à
   l'effacement (site.js efface d'abord si on clique un lien vers une partie rangée), « Connaissez-vous… ? » s'estompe
   sans bouger (le champ reste à sa place). html.en-recherche (des mots, et au moins un résultat) : les cartes passent en
   liste, plus lisible : vignette, nom, entreprise, passage trouvé surligné en or, bouton « Écouter ». */
html.en-filtre main>:not(.hero):not(.section-portraits),
html.en-filtre .section-portraits .portraits-desc,
html.en-filtre .section-portraits .signaler-ligne,
html.en-filtre .section-portraits .signaler-etat-ligne{display:none!important}
/* toujours assez de place sous le champ pour l'amener sous la barre, même avec un seul résultat (--avant-outils : site.js) */
html.en-filtre .section-portraits{min-height:calc(var(--avant-outils,24rem) + 100vh);align-content:start}
.connaissez{transition:opacity .45s var(--ease),filter .45s}
html.en-filtre .connaissez{opacity:.3;filter:saturate(.25)}
html.en-filtre .connaissez:hover,html.en-filtre .connaissez:focus-within{opacity:1;filter:none}

/* le titre des résultats */
html.en-filtre .compte-ligne{flex-wrap:nowrap;align-items:center;gap:.6rem 1.2rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #c4a26538}
html.en-filtre .compte{flex:1 1 auto;min-width:0;font-family:var(--ff-display);font-size:clamp(1.45rem,2.4vw,2.1rem);font-weight:700;line-height:1.18;letter-spacing:0;text-transform:none;color:var(--accent)}
html.en-filtre .compte strong{font-size:1em;font-weight:900;letter-spacing:0;color:var(--accent-clair)}
.compte-q,.compte-f{font-style:italic;font-weight:400;color:var(--text)}
html.en-filtre .outils .tout-voir{flex:0 0 auto;min-height:44px;padding:.5rem 1rem;font-size:.66rem;border-color:var(--accent)}
.resultats-aide{margin-top:.4rem;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.08em;color:var(--text-faible)}
@media(max-width:699px){
  html.en-filtre .compte-ligne{margin-top:.75rem;padding-top:.75rem;gap:.6rem .8rem}
  html.en-filtre .compte{font-size:1.32rem}
  html.en-filtre .outils .tout-voir{min-height:40px;padding:.4rem .7rem;font-size:.6rem;letter-spacing:.1em}
  .resultats-aide{display:none}
}

/* les portraits trouvés : liseré doré, apparition douce */
html.en-filtre #grille-portraits .episode-card{border-color:#c4a2658c;box-shadow:0 0 0 1px #c4a26526,0 22px 50px -26px #c4a26570;animation:resultat-entree .45s var(--ease) backwards}
html.en-filtre #grille-portraits .episode-card:hover,html.en-filtre #grille-portraits .episode-card:focus-within{border-color:var(--accent)}
@keyframes resultat-entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* le passage trouvé : surligné en or plein, texte foncé, bien lisible (aussi dans la fenêtre de recherche des portraits) */
html.en-filtre #grille-portraits .card-extrait mark,.rf-extrait mark,html.en-filtre #grille-portraits .card-role mark{
  background:var(--accent);color:#0a0a0c;font-weight:500;box-shadow:none;border-radius:2px;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.en-filtre #grille-portraits .card-name mark{background:none;color:var(--accent-clair);box-shadow:inset 0 -.09em 0 var(--accent);border-radius:0;padding:0}

/* en liste pendant une recherche par mots */
html.en-recherche .section-portraits .episodes-grid{grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:.9rem}
@media(min-width:900px){html.en-recherche .section-portraits .episodes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
html.en-recherche #grille-portraits .episode-card{
  --vig:136px;display:grid;grid-template-columns:var(--vig) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;
  grid-template-areas:"vig nom" "vig role" "vig ext" "vig pied";column-gap:1.2rem;align-items:start;padding:1rem;
}
html.en-recherche #grille-portraits .card-inner{display:contents}
html.en-recherche #grille-portraits .card-cover{grid-area:vig;width:var(--vig)}
html.en-recherche #grille-portraits .card-number,
html.en-recherche #grille-portraits .card-cover-badge,
html.en-recherche #grille-portraits .card-cover-play{display:none}
html.en-recherche #grille-portraits .card-name{grid-area:nom;font-size:1.45rem;line-height:1.15;margin:0}
html.en-recherche #grille-portraits .card-role{grid-area:role;font-size:.64rem;line-height:1.45;margin:.25rem 0 0}
html.en-recherche #grille-portraits .card-extrait,html.en-recherche #grille-portraits .card-desc{grid-area:ext;margin-top:.7rem}
html.en-recherche #grille-portraits .episode-card:not(.avec-extrait) .card-desc{display:-webkit-box}
html.en-recherche #grille-portraits .card-extrait{font-size:.96rem;line-height:1.55;color:#ebe5d6;font-weight:400}
html.en-recherche #grille-portraits .extrait-ou{font-size:.58rem;letter-spacing:.1em;margin-bottom:.3rem}
html.en-recherche #grille-portraits .extrait-texte{-webkit-line-clamp:4;line-clamp:4}
html.en-recherche #grille-portraits .extrait-plus{display:block;font-size:.58rem}
html.en-recherche #grille-portraits .card-footer{grid-area:pied;justify-content:flex-start;gap:.9rem;margin-top:.8rem;padding-top:.75rem}
/* « Écouter » en toutes lettres (« Pause » pendant l'écoute) */
.card-play-mot{display:none}
html.en-recherche #grille-portraits .card-play{order:-1;width:auto;height:42px;border-radius:999px;padding:0 1.05rem 0 .9rem;gap:.5rem}
html.en-recherche #grille-portraits .card-play:hover,html.en-recherche #grille-portraits .card-play:focus-visible{transform:scale(1.04)}
html.en-recherche #grille-portraits .card-play-mot{display:inline;font-family:var(--ff-mono);font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bg)}
html.en-recherche #grille-portraits .card-play-mot::before{content:"Écouter"}
html.en-recherche #grille-portraits .card-play.joue .card-play-mot::before{content:"Pause"}
@media(max-width:699px){
  /* téléphone : vignette, nom et entreprise sur une ligne ; le passage trouvé sur toute la largeur, dessous */
  html.en-recherche #grille-portraits .episode-card{--vig:76px;grid-template-rows:auto auto auto auto;grid-template-areas:"vig nom" "vig role" "ext ext" "pied pied";column-gap:.85rem;padding:.8rem .85rem .85rem}
  html.en-recherche #grille-portraits .card-name{font-size:1.2rem;align-self:end}
  html.en-recherche #grille-portraits .card-role{font-size:.6rem;letter-spacing:.04em;align-self:start}
  html.en-recherche #grille-portraits .card-extrait,html.en-recherche #grille-portraits .card-desc{margin-top:.7rem;font-size:.9rem;line-height:1.5}
  html.en-recherche #grille-portraits .extrait-ou{font-size:.54rem;letter-spacing:.06em}
  html.en-recherche #grille-portraits .extrait-texte{-webkit-line-clamp:5;line-clamp:5}
  html.en-recherche #grille-portraits .card-footer{margin-top:.7rem;padding-top:.65rem}
  html.en-recherche #grille-portraits .card-play{height:40px}
  html.en-recherche #grille-portraits .card-footer .card-duration{font-size:.66rem}
}

/* rien trouvé : des pistes */
html.en-filtre .aucun{text-align:left;padding:1.3rem 1.25rem 1.4rem;margin-top:1rem;border:1px dashed #c4a2655c;background:#0d0c0a}
.aucun-ligne{margin:0 0 1rem;line-height:1.6;color:var(--text-dim);font-weight:300}
.aucun-orthographe{font-family:var(--ff-display);font-size:1.3rem;color:var(--text);font-weight:400}
.aucun-mot{background:none;border:0;border-bottom:2px solid var(--accent);padding:0 .1rem;color:var(--accent-clair);font:inherit;font-style:italic;font-weight:700;cursor:pointer;transition:color .2s,background .2s}
.aucun-mot:hover,.aucun-mot:focus-visible{background:#c4a26526;color:var(--text)}
.aucun-lien{background:none;border:0;border-bottom:1px solid var(--accent);padding:.1rem 0;color:var(--accent);font:inherit;font-weight:400;cursor:pointer}
.aucun-lien:hover{color:var(--accent-clair)}
.aucun-familles{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.aucun-libelle{width:100%;margin-bottom:.1rem}
.aucun-exemples{font-size:.92rem}
.aucun-exemples button{margin:0 0 0 .2rem}
@media(max-width:699px){
  html.en-filtre .aucun{padding:1rem .9rem 1.1rem}
  .aucun-orthographe{font-size:1.2rem}
  .aucun-familles{gap:.4rem}
  .aucun-familles .puce{font-size:.78rem;padding:.35rem .7rem;min-height:40px}
}
.fin-resultats{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--border);color:var(--text-faible);font-size:.88rem;font-weight:300}
.fin-resultats .btn{padding:.7rem 1.1rem;min-height:42px}
.fin-resultats .btn svg{width:12px;height:12px}
@media (prefers-reduced-motion: reduce){
  html.en-filtre #grille-portraits .episode-card{animation:none}
  .connaissez{transition:none}
}

/* loupe de la barre du haut */
.loupe-barre{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-2);background:#0a0a0c99;color:var(--text);text-decoration:none;transition:border-color .3s,color .3s,background .3s}
.loupe-barre svg{width:16px;height:16px}
.loupe-barre:hover,.loupe-barre:focus-visible{border-color:var(--accent);color:var(--accent);background:#c4a2651a}
@media(max-width:420px){.loupe-barre{width:34px;height:34px}}

/* page d'un portrait : ses familles, et le passage trouvé par la recherche */
.familles-portrait{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.1rem}
.fp-titre{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faible);margin-right:.25rem}
.familles-portrait .puce{min-height:34px;padding:.3rem .8rem;font-size:.8rem}
.familles-portrait .puce:hover{border-color:var(--accent);color:var(--accent)}
.replique{scroll-margin-top:calc(var(--haut-barre,3.4rem) + var(--haut-mini,3.7rem) + 1.5rem)}
.replique.trouvee:not(.en-cours) .bulle{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 42px -8px #c4a26599}
.replique.trouvee .qui::before{content:'Passage trouvé · ';color:var(--accent)}

/* la fenêtre de recherche des pages des portraits */
.recherche-fenetre{
  width:min(680px,calc(100vw - 2rem));max-width:none;max-height:min(84vh,760px);margin:8vh auto auto;padding:0;
  border:1px solid #c4a26566;background:#0e0e11;color:var(--text);box-shadow:0 40px 120px #000d;overflow:hidden;
}
.recherche-fenetre[open]{display:flex;flex-direction:column}
.recherche-fenetre::backdrop{background:#050506c7;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.fenetre-ouverte{overflow:hidden}
.rf-dedans{display:flex;flex-direction:column;flex:1;min-height:0;padding:1rem 1.1rem .7rem}
.rf-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.rf-tete h2{font-family:var(--ff-display);font-size:1.35rem;line-height:1.2}
.rf-fermer{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-2);border-radius:50%;background:none;color:var(--text-dim);cursor:pointer;transition:color .2s,border-color .2s}
.rf-fermer:hover{color:var(--accent);border-color:var(--accent)}
.rf-fermer svg{width:16px;height:16px}
.rf-etat{font-size:.86rem;color:var(--text-dim);margin:.8rem 0 .4rem;font-weight:300}
.rf-resultats{list-style:none;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -1.1rem;padding:0 1.1rem}
.rf-resultats li+li{border-top:1px solid var(--border)}
.rf-resultats a{display:flex;gap:.85rem;align-items:flex-start;padding:.8rem .45rem;text-decoration:none;color:var(--text);transition:background .2s}
.rf-resultats a:hover,.rf-resultats a:focus-visible{background:#ffffff08}
.rf-resultats a:focus-visible{outline-offset:-2px}
.rf-vignette{width:56px;height:56px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#1d150e;font-family:var(--ff-display);color:#efe6d2}
.rf-vignette img{width:100%;height:100%;object-fit:cover}
.rf-texte{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.rf-texte strong{font-family:var(--ff-display);font-size:1.08rem;line-height:1.25}
.rf-role{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.06em;color:var(--accent)}
.rf-extrait{display:block;margin-top:.35rem;font-size:.86rem;line-height:1.5;color:var(--text-dim);font-weight:300}
.rf-extrait .extrait-texte{-webkit-line-clamp:3;line-clamp:3}
.rf-pied{border-top:1px solid var(--border);margin-top:.4rem;padding-top:.4rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.rf-pied a{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;color:var(--accent);text-decoration:none}
.rf-pied svg{width:12px;height:12px}
@media(max-width:700px){
  .recherche-fenetre{width:100%;height:100%;height:100dvh;max-height:none;margin:0;border:0}
  .rf-dedans{padding:calc(.8rem + env(safe-area-inset-top,0px)) var(--gouttiere) calc(.5rem + var(--safe-bottom))}
  .rf-resultats{margin:0 calc(var(--gouttiere) * -1);padding:0 var(--gouttiere)}
}

/* au doigt : zones de toucher de 40 px au moins */
@media(max-width:700px),(pointer:coarse){
  .loupe-barre{position:relative}
  .loupe-barre::after{content:'';position:absolute;inset:-3px}
  .familles-portrait .puce{min-height:40px}
}
@media (prefers-reduced-motion: reduce){
  .connaissez.change .cv-vignette,.connaissez.change .cv-texte{animation:none!important}
  html.anime .connaissez .cv-vignette,html.anime .connaissez .cv-texte{opacity:1!important}
}
/* téléphone (≤ 420 px), pages des portraits : la loupe prend la place du lien « Portraits » (le nom de l'émission,
   à gauche, mène à la même page) ; sinon « Les Voix de l'IA » serait coupé */
@media(max-width:420px){.barre nav a.tres-etroit{display:none}}
/* 320 px : avec la loupe, la barre se resserre un peu pour que « Les Voix de l'IA » reste entier */
@media(max-width:360px){
  .barre{gap:.5rem}
  .barre-droite{gap:.4rem}
  .barre .fleches{gap:.3rem}
  .marque{gap:.45rem}
  .marque img{width:24px}
  .marque span{font-size:.94rem}
  .barre nav a.cta-abonner{padding:.5rem .6rem;letter-spacing:.1em}
}
/* « Un autre » ne bouge pas sous le doigt : la phrase garde toujours la même hauteur (3 lignes et sa source ;
   2 lignes et sa source sur téléphone), quelle que soit sa longueur */
.cv-phrase{min-height:5.45rem}
@media(max-width:699px){.cv-phrase{min-height:3.75rem}}
.cv-role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================================================================== « Signaler une erreur ou une info » (12/10/2026)
   Encart des pages des portraits, juste après les sources ; une ligne discrète sur la page de l'émission. Sans
   JavaScript, le bouton s'efface et l'adresse s'affiche en toutes lettres (« arobase », « point »). */
.signaler{
  position:relative;margin-top:2.5rem;padding:1.6rem 1.4rem 1.4rem;border:1px solid #c4a2654d;overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 0% 0%,#c4a2651c,transparent 60%),linear-gradient(150deg,#141210,#0c0c0f);
  box-shadow:inset 0 1px 0 #c4a26526;
}
.signaler-tete{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.signaler-icone{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #c4a26566;background:#c4a26514}
.signaler-icone svg{width:20px;height:20px;fill:var(--accent)}
.signaler .section-label{margin-bottom:.3rem}
.signaler h2{font-family:var(--ff-display);font-size:clamp(1.3rem,4vw,1.7rem);line-height:1.2}
.signaler-texte{color:var(--text-dim);font-weight:300;line-height:1.7;max-width:620px;margin-bottom:1.1rem}
.signaler-bouton svg{width:15px;height:15px;fill:currentColor}
.signaler-etat{margin-top:.8rem;font-size:.88rem;color:var(--text-dim)}
.signaler-etat:empty{display:none}
.signaler-repli{display:none;color:var(--text-dim);font-size:.92rem}
html:not(.js) .signaler-repli{display:block}
html:not(.js) .signaler-ligne .signaler-repli{display:inline}
html:not(.js) [data-signaler]{display:none}
@media(max-width:520px){.signaler{padding:1.3rem 1.1rem 1.2rem}.signaler-bouton{width:100%}}
/* corrections apportées (episodes/voix-de-lia/<id>/corrections.json) */
.corrections{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.corrections h3{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:.6rem}
.corrections ul{list-style:none;display:grid;gap:.55rem}
.corrections li{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;font-size:.92rem;line-height:1.6;color:var(--text-dim);font-weight:300}
@media(min-width:640px){.corrections li{grid-template-columns:10rem minmax(0,1fr);gap:1rem}}
.corrections time{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.06em;color:var(--text-faible);padding-top:.2rem}
/* la ligne discrète de la page de l'émission */
.signaler-ligne{order:6;display:flex;gap:.6rem;align-items:flex-start;margin-top:1.2rem;max-width:640px;color:var(--text-faible);font-size:.86rem;line-height:1.6;font-weight:300}
.signaler-ligne>svg{width:15px;height:15px;flex-shrink:0;margin-top:.25rem;fill:var(--accent)}
.signaler-lien{display:inline;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:400;text-decoration:underline;text-decoration-color:#c4a26570;text-underline-offset:3px;cursor:pointer}
.signaler-lien:hover{text-decoration-color:var(--accent)}
.signaler-lien svg{display:none}
.signaler-etat-ligne{order:7;margin-top:.4rem}
@media(min-width:900px){.section-portraits .signaler-ligne,.section-portraits .signaler-etat-ligne{grid-column:1/-1}}
@media(max-width:700px),(pointer:coarse){.signaler-lien{position:relative}.signaler-lien::before{content:'';position:absolute;inset:-12px -4px}}
@media(max-width:520px){.signaler-bouton{letter-spacing:.07em;padding:.95rem .9rem;font-size:.68rem}}

/* mini-lecteur bien visible (13/10/2026, deux passes ; Alexandre : « pas assez visible ») : fond chaud doré, liseré or,
   photo de la personne, gros bouton ; en pause après une écoute, le bouton ET la réplique entendue respirent
   (anneau qui gonfle : transform et opacity, fiables sur téléphone ; en « mouvement réduit », seulement l'opacité) */
.mini{background:linear-gradient(180deg,#2b2216f7,#16120df7);border-bottom:2px solid var(--accent);box-shadow:0 10px 30px -8px #000,0 1px 24px -6px var(--accent-glow)}
.mini::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-clair),transparent);opacity:.6}
html.en-ecoute .mini::before{opacity:1}
.mini-dedans{padding-top:.6rem;padding-bottom:.6rem;gap:.6rem}
.mini .bouton-lecture{width:56px;height:56px;box-shadow:0 0 0 4px #c4a26533,0 0 30px -2px var(--accent-glow)}
.mini .bouton-lecture svg{width:20px;height:20px}
.mini-photo{width:44px;height:44px;flex-shrink:0;border-radius:50%;object-fit:cover;border:2px solid var(--accent);box-shadow:0 0 14px -4px var(--accent-glow)}
.mini-qui{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-qui i{font-style:normal;color:var(--text-dim)}
.mini-fond{height:6px;background:#ffffff2e}
.mini-piste:hover .mini-fond{height:8px}
.mini-jouee::after{opacity:1;width:12px;height:12px;margin-top:-6px;right:-6px}
.mini-chapitre{font-size:1.05rem;color:#fffaf0}
.mini-temps{font-size:.74rem;color:var(--text)}
.mini-saut{color:var(--text)}
.mini-vitesse{flex-shrink:0;min-width:46px;height:32px;padding:0 .5rem;border:1px solid var(--accent);border-radius:16px;background:#c4a2651a;color:var(--accent);font-family:var(--ff-mono);font-size:.7rem;cursor:pointer;transition:color .2s,background .2s}
.mini-vitesse:hover,.mini-vitesse.change{color:var(--bg);background:var(--accent)}
.mini .bouton-lecture::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--accent-clair);opacity:0;pointer-events:none}
html.en-pause .mini .bouton-lecture::before{animation:respire-anneau 1.6s ease-in-out infinite}
html.en-pause .mini .bouton-lecture{animation:respire-bouton 1.6s ease-in-out infinite}
@keyframes respire-anneau{0%,100%{transform:scale(.9);opacity:.15}50%{transform:scale(1.18);opacity:1}}
@keyframes respire-bouton{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
html.en-pause .replique.en-cours .bulle{animation:respire-bulle 1.6s ease-in-out infinite}
@keyframes respire-bulle{0%,100%{box-shadow:0 0 0 1px var(--voix,var(--accent)),0 0 10px -10px var(--voix,var(--accent))}50%{box-shadow:0 0 0 2px var(--voix,var(--accent)),0 0 40px -4px var(--voix,var(--accent))}}
@media(prefers-reduced-motion:reduce){
  html.en-pause .mini .bouton-lecture{animation:none}
  @keyframes respire-anneau{0%,100%{transform:none;opacity:.15}50%{transform:none;opacity:1}}
}
@media(max-width:560px){
  .mini-dedans{gap:.3rem}
  .mini .bouton-lecture{width:50px;height:50px}
  .mini-photo{display:none}
  .mini-vitesse{min-width:38px;height:28px;padding:0 .3rem}
}
/* la réplique entendue se met en pause d'un clic : on le montre au survol */
.conversation.minutee .replique[data-debut] .bulle{cursor:pointer}
html.en-ecoute .replique.en-cours .bulle:hover{box-shadow:0 0 0 1px var(--voix,var(--accent)),0 0 44px -6px var(--voix,var(--accent))}

/* affichage « Essentiel » / « Tout afficher » (13/10/2026) : sans JavaScript, tout reste affiché comme avant */
html.anime:not(.complet) .complet-seul{display:none!important}
html.complet .simple-seul{display:none!important}
/* 18/10/2026 : plus de colonne unique en « essentiel » — les chapitres, désormais toujours visibles, sont collés sur le
   côté (colonne de 260 px) ; en une colonne, la liste collante passait par-dessus la conversation au défilement */
.plus-loin{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--border-2)}
.tiroir{margin-top:.7rem;border:1px solid var(--border-2);border-radius:14px;background:#0c0c0f;transition:border-color .25s}
.tiroir[open]{border-color:#c4a26566}
.tiroir>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.9rem 1.2rem;list-style:none;cursor:pointer;font-family:var(--ff-body);font-size:1rem;color:var(--text)}
.tiroir>summary::-webkit-details-marker{display:none}
.tiroir>summary::after{content:"+";flex:none;color:var(--accent);font-size:1.5rem;line-height:1;transition:transform .3s var(--ease)}
.tiroir[open]>summary::after{transform:rotate(45deg)}
.tiroir>summary:hover{color:var(--accent-clair)}
.tiroir-dedans{padding:0 1.2rem 1.4rem}
.tiroir .reveal{opacity:1!important;transform:none!important}
.tiroir .bloc,.tiroir .signaler,.tiroir .lia-encart,.tiroir .partage{margin-top:0}
.tiroir .bloc>.section-label,.tiroir .bloc>h2{display:none}
.tiroir .familles-portrait{margin-top:0}
.astuce{display:inline-flex;align-items:center;gap:.5rem;margin:-1rem 0 1.6rem;padding:.55rem 1rem;border-radius:999px;background:#c4a2651f;border:1px solid #c4a26566;color:var(--accent-clair);font-size:.9rem}
.astuce[hidden]{display:none}

/* « Comment on fabrique un portrait » (13/10/2026) */
.methode-bande{max-width:1180px;margin:0 auto;padding:4.5rem 1.5rem 1rem}
.etapes{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.etapes li{position:relative;padding:1.4rem 1.3rem 1.3rem;border:1px solid var(--border-2);border-radius:16px;background:linear-gradient(180deg,#15120d,#0c0c0f)}
.etape-n{display:inline-grid;place-items:center;width:30px;height:30px;margin-bottom:.8rem;border-radius:50%;background:var(--accent);color:var(--bg);font-family:var(--ff-mono);font-size:.8rem;font-weight:600}
.etapes strong{display:block;font-family:var(--ff-display);font-size:1.25rem;font-weight:500;color:var(--text);margin-bottom:.4rem}
.etapes p{margin:0;color:var(--text-dim);font-size:.93rem;line-height:1.55}
.methode-pied{margin-top:1.4rem;color:var(--text-dim);font-size:.93rem}
.methode-pied a{color:var(--accent-clair);white-space:nowrap}
.methode-pied a svg{width:14px;height:14px;vertical-align:-2px}
@media(max-width:699px){.methode-bande{padding:3rem 1rem .5rem}.methode-pied a{white-space:normal}}
/* cartes : on voit qu'on peut ouvrir la page (conversation, sources) et pas seulement écouter */

/* lecteur collant : « La conversation » écrit en toutes lettres */
.player .lien-page{display:inline-flex;align-items:center;gap:.4rem;width:auto;padding:0 .8rem;border-radius:999px;border:1px solid #c4a26566;color:var(--accent-clair);font-size:.78rem;white-space:nowrap}
.player .lien-page svg{width:14px;height:14px}
@media(max-width:560px){.player .lien-page .lp-mot{display:none}.player .lien-page{padding:0;width:40px;justify-content:center}}

/* Bandeau plus court (13/10/2026, Alexandre : « le bandeau prend trop de place ») : la carte de Lia ne montre qu'une
   accroche ; le texte entier s'ouvre quand on l'écoute ou quand on touche « Lire » (site.js, classe deplie). */
.lia-accroche{margin:.7rem 0 0;color:var(--text-dim);font-size:.95rem;line-height:1.5}
html.anime .lia-carte.deplie .lia-accroche,html.anime .lia-carte.ecoute .lia-accroche{display:none}
html:not(.anime) .lia-accroche{display:none}
html.anime .lia-carte:not(.deplie):not(.ecoute) .lia-citation,html.anime .lia-carte:not(.deplie):not(.ecoute) .lia-texte figcaption{display:none}
html.anime .lia-carte:not(.deplie):not(.ecoute) .lia-texte{margin-top:.2rem;justify-content:flex-start}
html.anime .lia-carte:not(.deplie):not(.ecoute) .cc-encart p{display:none}
.hero{padding-top:4rem;padding-bottom:1.2rem}
/* « Écoutez sur » Apple Podcasts / Spotify dans le bloc S'abonner (13/10/2026) */
.platforms-vdia{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.4rem 0 1.2rem}
.platforms-titre{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-right:.3rem}

/* Vue « Les plus célèbres » / « Tous » et familles derrière un bouton (13/10/2026) */
.vues{display:inline-flex;margin-bottom:.9rem;padding:3px;border:1px solid var(--border-2);border-radius:999px;background:#0c0c0f}
.vue{min-height:40px;padding:.45rem 1.1rem;border:0;border-radius:999px;background:none;color:var(--text-dim);font-family:var(--ff-body);font-size:.9rem;cursor:pointer;transition:background .25s,color .25s}
.vue:hover{color:var(--text)}
.vue[aria-pressed="true"]{background:var(--accent);color:var(--bg);font-weight:500}
.vue .vue-n{font-family:var(--ff-mono);font-size:.66rem;opacity:.75;margin-left:.25rem}
.familles-bouton{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;margin-top:.8rem;padding:.45rem 1rem;border:1px solid var(--border-2);border-radius:999px;background:#0c0c0f;color:var(--text-dim);font-family:var(--ff-body);font-size:.86rem;cursor:pointer}
.familles-bouton:hover{color:var(--text);border-color:#c4a26599}
.familles-bouton .vue-n{font-family:var(--ff-mono);font-size:.62rem;color:var(--text-faible)}
.fb-fleche{transition:transform .25s}
.outils.familles-ouvertes .fb-fleche{transform:rotate(180deg)}
html.anime .outils:not(.familles-ouvertes) .puces{display:none}
html:not(.anime) .vues,html:not(.anime) .familles-bouton{display:none}

/* Cartes : « La conversation, les sources » en vrai bouton et « Partager » (13/10/2026, Alexandre : « on doit mieux
   voir ces boutons et il manque le partage ») ; au-dessus du lien qui couvre la carte */
.card-actions{position:relative;z-index:2;display:flex;align-items:center;gap:.5rem;margin-top:.9rem}
.card-ouvrir{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.45rem .9rem;border:1px solid #c4a26599;border-radius:999px;color:var(--accent-clair);font-family:var(--ff-body);font-size:.84rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.card-ouvrir svg{width:15px;height:15px;flex:none}
.card-ouvrir:hover,.card-ouvrir:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.card-partager{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;flex:none;min-height:40px;margin-left:auto;padding:.45rem .85rem;border:1px solid #c4a26599;border-radius:999px;font-family:var(--ff-body);font-size:.84rem;font-weight:500;background:none;color:var(--accent-clair);cursor:pointer;transition:background .25s,color .25s}
.card-partager svg{width:17px;height:17px;fill:currentColor}
.card-partager:hover,.card-partager[aria-expanded="true"]{background:var(--accent);color:var(--bg)}
.partage-pop{position:absolute;z-index:60;display:flex;flex-direction:column;min-width:190px;padding:.4rem;border:1px solid #c4a26566;border-radius:12px;background:#15120d;box-shadow:0 12px 30px #000c}
.partage-pop a,.partage-pop button{display:block;width:100%;padding:.55rem .8rem;border:0;border-radius:8px;background:none;color:var(--text);font-family:var(--ff-body);font-size:.9rem;text-align:left;text-decoration:none;cursor:pointer}
.partage-pop a:hover,.partage-pop button:hover,.partage-pop a:focus-visible{background:#c4a26526;color:var(--accent-clair)}
html.en-recherche #grille-portraits .episode-card .card-actions{grid-column:2;margin-top:.4rem}

.co-court{display:none}

@media(max-width:600px){.co-long{display:none}.co-court{display:inline}.card-ouvrir{padding:.4rem .75rem;font-size:.8rem}.card-actions{flex-direction:column;align-items:stretch}.card-ouvrir,.card-partager{justify-content:center;margin-left:0;width:100%}.card-actions{gap:.4rem}}
html.en-recherche #grille-portraits .card-ouvrir .co-long{display:inline}html.en-recherche #grille-portraits .card-ouvrir .co-court{display:none}
@media(max-width:600px){html.en-recherche #grille-portraits .card-ouvrir .co-long{display:none}html.en-recherche #grille-portraits .card-ouvrir .co-court{display:inline}}

/* Bloc « Abonnez-vous » sous la conversation (14/10/2026) */
.abonner-bloc{margin-top:3rem;padding:1.6rem 1.5rem;border:1px solid #c4a26566;border-radius:18px;background:linear-gradient(160deg,#1c170f,#0c0c0f)}
.abonner-bloc h2{margin:.4rem 0 .5rem;font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:500}
.abonner-bloc h2 em{color:var(--accent);font-style:italic}
.abonner-bloc>p{margin:0 0 1.1rem;color:var(--text-dim)}
.abonner-boutons{display:flex;flex-wrap:wrap;gap:.6rem}
.btn-abonner{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.6rem 1.1rem;border:1px solid #c4a26599;border-radius:999px;background:#0c0c0f;color:var(--text);font-family:var(--ff-body);font-size:.95rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn-abonner svg{width:20px;height:20px;flex:none;color:var(--accent)}
.btn-abonner:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn-abonner:hover svg{color:var(--bg)}
.btn-flux{color:var(--text-dim);font-weight:400}
.abonner-email{margin:1rem 0 0}
.abonner-email a{color:var(--accent-clair)}
@media(max-width:600px){.abonner-bloc{padding:1.3rem 1.1rem}.btn-abonner{width:100%;justify-content:center}}
.abonner-bloc .section-label{display:flex;align-items:center;gap:.4rem}.abonner-bloc .section-label svg{width:14px;height:14px;flex:none}
.card-actions{flex-wrap:wrap}.card-ouvrir{flex:0 1 auto}.card-partager{margin-left:0}

/* Bandeau sobre (14/10/2026, Alexandre : « beaucoup trop chargé », « quelque chose de beaucoup plus sombre », « sobre »).
   Fond noir uni et une lueur dorée à peine visible ; à gauche le titre, une phrase, Lia en une ligne, deux boutons ;
   à droite un seul portrait, le dernier paru, en grand. */
.hero{padding:6rem var(--gouttiere) 3rem;text-align:left;background:var(--bg)}
.hero::before{background:radial-gradient(ellipse 60% 55% at 78% 45%,#c4a26510 0%,transparent 70%)}
.hero::after{background:none;animation:none}
.hero-dedans{max-width:1180px;grid-template-columns:minmax(0,1fr);grid-template-areas:"texte" "jour";gap:2.2rem;align-items:center}
.hero-label,.hero-cta{justify-content:flex-start}
.hero-label a{color:inherit;text-decoration:none;border-bottom:1px solid #c4a26555}
.hero-label a:hover{border-color:var(--accent)}
.hero h1{text-shadow:none}
.hero-phrase{max-width:34rem;margin:1.1rem 0 0;color:var(--text-dim);font-size:1.05rem;line-height:1.65;font-weight:300;opacity:0;animation:fadeUp .8s .45s forwards}
.hero-cta{margin-top:1.4rem}
.hero-mention{margin-top:1.1rem}
.hero-mention strong{color:var(--accent);font-weight:500}
/* Lia : une ligne discrète, plus une carte */
.hero .lia-carte{max-width:34rem;margin:1.3rem 0 0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero .lia-carte::before{display:none}
.hero .lia-rond{width:42px;height:42px;background:none;border:1px solid #c4a26599;color:var(--accent);box-shadow:none}
.hero .lia-rond svg{width:15px;height:15px}
.hero .lia-carte:not(.ecoutee) .lia-rond,.hero .lia-carte:not(.ecoutee) .lia-rond::before{animation:none}
.hero .lia-bouton:hover .lia-rond{background:var(--accent);color:var(--bg);box-shadow:none}
.hero .lia-titre{font-family:var(--ff-body);font-weight:400;font-size:.95rem;color:var(--text-dim)}
.hero .lia-piste{max-width:20rem;margin-left:calc(42px + .85rem)}
.hero .lia-texte{margin-left:calc(42px + .85rem)}
.hero .cc-encart{display:none}
/* le portrait du jour */
.du-jour{grid-area:jour;display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;max-width:30rem;opacity:0;animation:fadeUp .9s .55s forwards}
.dj-image{position:relative;display:block;width:100%;padding:0;border:1px solid #c4a26540;background:#0c0c0f;cursor:pointer;aspect-ratio:1;overflow:hidden;box-shadow:0 30px 80px #000c}
.dj-image img,.dj-image .monogramme{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dj-image:hover img{transform:scale(1.03)}
.dj-rond{position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--bg);box-shadow:0 6px 20px #000a;transition:transform .3s var(--ease),background .3s}
.dj-rond svg{width:20px;height:20px;margin-left:3px;fill:currentColor}
.dj-image:hover .dj-rond{transform:scale(1.07);background:var(--accent-clair)}
.dj-etiquette{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faible)}
.dj-etiquette .dj-quand{color:var(--accent)}
.dj-nom{margin:.45rem 0 0;font-family:var(--ff-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1}
.dj-nom a{color:var(--text);text-decoration:none}
.dj-nom a:hover{color:var(--accent-clair)}
.dj-role{margin-top:.35rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.dj-angle{margin-top:.7rem;font-family:var(--ff-display);font-style:italic;font-size:1.1rem;line-height:1.4;color:var(--accent)}
.dj-boutons{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.1rem}
.dj-boutons .card-partager{margin-left:0}
@media(min-width:960px){
  .hero{padding:7rem var(--gouttiere) 4.5rem}
  .hero-dedans{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"texte jour";column-gap:5rem}
  .du-jour{justify-self:end}
}
@media(max-width:700px){
  .hero{padding:4.6rem var(--gouttiere) 2rem}
  .hero-label .hl-serie{display:inline}
  .hero-phrase{font-size:.95rem;margin-top:.8rem}
  .hero .lia-carte{margin-top:1rem}
  .du-jour{grid-template-columns:38% minmax(0,1fr);gap:1rem;align-items:start}
  .dj-rond{width:40px;height:40px;right:.5rem;bottom:.5rem}
  .dj-rond svg{width:14px;height:14px}
  .dj-nom{font-size:1.4rem;margin-top:.3rem}
  .dj-angle{font-size:.95rem;margin-top:.45rem}
  .dj-etiquette{font-size:.54rem;letter-spacing:.1em}
  .dj-boutons{grid-column:1 / -1;margin-top:.2rem}
  .dj-boutons .btn{flex:1 1 100%;justify-content:center}
}

/* Page portrait : S'abonner et Partager juste sous le lecteur (14/10/2026) */
.portrait-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem}
.pa-titre{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-right:.2rem}
.pa-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.45rem .95rem;border:1px solid var(--border-2);border-radius:999px;background:none;color:var(--text);font-family:var(--ff-body);font-size:.86rem;text-decoration:none;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.pa-btn svg{width:16px;height:16px;flex:none}
.pa-btn:hover,.pa-btn:focus-visible{border-color:var(--accent);color:var(--accent-clair)}
.pa-btn.pa-partager{margin-left:auto;border-color:#c4a26599;color:var(--accent-clair)}
.pa-btn.pa-partager:hover{background:var(--accent);color:var(--bg)}
@media(max-width:520px){.pa-titre{flex:1 1 100%}.pa-btn.pa-partager{margin-left:0}}
@media(min-width:960px){
  .hero{padding:5.6rem var(--gouttiere) 3.5rem}
  .du-jour{max-width:23rem}
  .dj-boutons{gap:.45rem}
}
/* téléphone : le portrait du jour juste sous le titre, avant la présentation */
@media(max-width:700px){
  .hero-dedans{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-texte{display:contents}
  .hero-label{order:1}
  .hero h1{order:2}
  .du-jour{order:3;margin:1.1rem 0 1.4rem;max-width:none}
  .hero-phrase{order:4;margin-top:0}
  .hero .lia-carte{order:5}
  .hero-cta{order:6}
  .hero-mention{order:7}
  .dj-boutons{grid-column:1 / -1;margin-top:0}
  .dj-boutons .btn{flex:1 1 100%}
  .dj-boutons .card-ouvrir,.dj-boutons .card-partager{flex:1 1 0;justify-content:center}
}
@media(max-width:700px){.hero-label{justify-content:flex-start}.hero h1{text-align:left}.hero-cta{justify-content:flex-start}}

/* Sous le haut de la page portrait (14/10/2026) : « Comment ce portrait a été fait » et « Abonnez-vous », côte à côte */
.portrait-avant{max-width:var(--large);margin:0 auto;padding:0 var(--gouttiere) 1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
.portrait-avant .abonner-bloc{margin-top:0}
@media(min-width:980px){.portrait-avant{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.enquete{padding:1.6rem 1.5rem;border:1px solid var(--border-2);border-radius:18px;background:#0e0e11}
.enquete h2{margin:.4rem 0 .9rem;font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:500}
.enquete h2 em{color:var(--accent);font-style:italic}
.enquete-chiffres{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.8rem 2rem}
.enquete-chiffres li{display:flex;align-items:baseline;gap:.55rem}
.enquete-chiffres strong{font-family:var(--ff-display);font-size:2.2rem;line-height:1;color:var(--accent);font-weight:700}
.enquete-chiffres span{max-width:12rem;color:var(--text-dim);font-size:.85rem;line-height:1.3}
.enquete>p{color:var(--text-dim);font-weight:300;line-height:1.6}
.enquete-liens{margin-top:.9rem}
.enquete-liens a{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent-clair);text-decoration:none;border-bottom:1px solid #c4a26566}
.enquete-liens a svg{width:14px;height:14px}
.enquete-liens a:hover{border-color:var(--accent)}
.portrait-actions .pa-btn.pa-partager{margin-left:0}
.enquete .enquete-ia{margin:-.3rem 0 1rem;padding-left:.8rem;border-left:2px solid var(--accent);color:var(--text);font-weight:400}

/* Recherche et filtres dans le bandeau (14/10/2026, Alexandre : « il y a beaucoup de place là-haut », « le moteur de
   recherche, les filtres, qu'on les voie mieux »). Les deux colonnes partent du haut : à gauche le titre, la phrase,
   Lia, puis la recherche ; à droite le portrait du jour. Pendant une recherche, le bandeau se réduit au titre et au
   champ : les résultats suivent juste dessous. */
.hero .outils{margin-top:1.6rem;scroll-margin-top:5rem}
.hero .outils .vues{margin-bottom:.8rem}
.hero .outils .cherche{max-width:none}
@media(min-width:960px){
  .hero-dedans{align-items:start}
  .hero{padding-top:6.2rem}
}
@media(max-width:700px){
  .hero .outils{order:4;margin-top:0;margin-bottom:1.4rem}
  .hero-phrase{order:5}
  .hero .lia-carte{order:6}
  .hero-mention{order:8}
}
html.en-filtre .hero .du-jour,html.en-filtre .hero-phrase,html.en-filtre .hero .lia-carte,html.en-filtre .hero-mention,html.en-filtre .hero-label{display:none}
html.en-filtre .hero{padding-bottom:0;border-bottom:0}
html.en-filtre .hero-dedans{grid-template-columns:minmax(0,1fr);grid-template-areas:"texte"}
html.en-filtre .section-portraits{padding-top:.5rem}
html.en-filtre .section-portraits .portraits-titre{display:none}
@media(min-width:960px){.hero-texte{align-self:start}.hero .outils .cherche{width:100%}}
html.en-filtre .section-portraits .connaissez{display:none}
/* le moteur de recherche du bandeau, bien visible (14/10/2026) */
.hero .outils{margin-top:1.8rem;padding:1.3rem 1.3rem 1.1rem;border:1px solid #c4a26559;border-radius:16px;background:linear-gradient(160deg,#17130d,#0d0d10)}
.cherche-titre{margin:0 0 .7rem;font-family:var(--ff-display);font-size:1.35rem;font-weight:700;color:var(--text)}
.cherche-titre span{display:block;margin-top:.15rem;font-family:var(--ff-body);font-size:.85rem;font-weight:300;color:var(--text-dim)}
.hero .cherche-champ{height:60px;font-size:1.08rem;border:1px solid var(--accent);border-radius:12px;background:#08080a;box-shadow:0 0 0 4px #c4a2651a}
.hero .cherche-champ:focus{box-shadow:0 0 0 4px #c4a26540;outline:none}
.hero .cherche>svg{width:20px;height:20px;left:1.05rem}
.filtres-titre{margin:1.1rem 0 .55rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.hero .outils .vues{margin-bottom:0}
.hero .familles-bouton{display:none}
html.anime .hero .outils .puces{display:flex}
.hero .outils .puces{margin-top:.6rem}
html.en-filtre .cherche-titre span,html.en-filtre .filtres-titre{display:none}
@media(max-width:700px){.hero .outils{padding:1rem .9rem .9rem;margin-left:calc(var(--gouttiere) * -.25);margin-right:calc(var(--gouttiere) * -.25)}.cherche-titre{font-size:1.15rem}.hero .cherche-champ{height:54px;font-size:1rem}}
/* bandeau en deux rangées (14/10/2026) : titre | portrait du jour, puis la recherche sur toute la largeur */
.hero .outils{grid-area:outils}
@media(min-width:960px){
  .hero{padding:5.6rem var(--gouttiere) 2.6rem}
  .hero-dedans{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"texte jour" "outils outils";row-gap:2rem;align-items:center}
  .hero-texte{align-self:center}
  .du-jour{max-width:34rem;grid-template-columns:200px minmax(0,1fr);column-gap:1.4rem;align-items:start}
  .dj-boutons{grid-column:1 / -1}
  .dj-rond{width:46px;height:46px;right:.6rem;bottom:.6rem}
  .dj-nom{font-size:1.9rem}
  .hero .outils{margin-top:0;padding:1.5rem 1.6rem 1.3rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:2rem;align-items:start}
  .hero .outils>*{grid-column:1 / -1}
  .hero .outils .cherche-titre{grid-column:1}
  .hero .outils .cherche{grid-column:1}
  .hero .outils .filtres-titre{grid-column:2;grid-row:1;margin-top:.3rem}
  .hero .outils .vues{grid-column:2;grid-row:2;align-self:center}
}
html.en-filtre .hero-dedans{grid-template-areas:"texte" "outils";grid-template-columns:minmax(0,1fr)}
/* boutons pratiques du bandeau (14/10/2026) */
.bandeau-actions{margin-top:1.2rem;display:flex;flex-direction:column;gap:.55rem;opacity:0;animation:fadeUp .8s .6s forwards}
.ba-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.bandeau-actions .pa-btn{min-height:38px;padding:.38rem .85rem;font-size:.82rem}
.bandeau-actions .pa-titre{min-width:5.2rem}
.pa-btn.pa-discret{border-color:transparent;color:var(--text-dim);padding-left:.55rem;padding-right:.55rem}
.pa-btn.pa-discret:hover{border-color:var(--border-2);color:var(--accent-clair)}
.bandeau-actions .card-partager{margin-left:0;min-height:38px;font-size:.82rem}
@media(max-width:700px){.bandeau-actions{order:7;margin-bottom:.4rem}.bandeau-actions .pa-titre{flex:1 1 100%}}
html.en-filtre .bandeau-actions{display:none}
@media(min-width:960px){.hero .outils .filtres-titre{display:none}.hero .outils .vues{grid-row:2}}
@media(max-width:700px){.hero .outils .vue{font-size:.8rem;padding-left:.7rem;padding-right:.7rem;white-space:nowrap}.hero .outils .vues{display:flex;width:100%}.hero .outils .vue{flex:1 1 0;justify-content:center}}

/* Lia en médaillon (14/10/2026) : son portrait (Seedream 5 Pro, citron d'ambre au front), le bouton de lecture posé
   dessus, et le citron qui s'allume doucement au rythme de sa voix (--voix, de 0 à 1, mesuré par site.js) */
.hero .lia-bouton{gap:1rem}
.lia-medaillon{position:relative;flex-shrink:0;width:92px;height:92px;border-radius:50%;padding:3px;background:linear-gradient(140deg,#f3dcaa,var(--accent) 45%,#6b5226);box-shadow:0 10px 30px #000a,0 0 0 1px #c4a26540}
.lia-medaillon picture,.lia-medaillon img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.lia-citron{position:absolute;left:calc(3px + 58% * (86 / 92));top:calc(3px + 41% * (86 / 92));width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff6c8 0%,#ffd54ab3 35%,#ffb30066 60%,transparent 72%);mix-blend-mode:screen;
  opacity:calc(.15 + var(--voix,0) * .85);transform:scale(calc(1 + var(--voix,0) * 1.6));
  box-shadow:0 0 calc(4px + var(--voix,0) * 22px) calc(var(--voix,0) * 8px) #ffc83d99;transition:opacity .08s linear,transform .08s linear}
.lia-carte:not(.voix-suivie).joue .lia-citron{animation:citron-doux 1.4s ease-in-out infinite}
@keyframes citron-doux{0%,100%{opacity:.35;transform:scale(1.1)}50%{opacity:1;transform:scale(2.1)}}
.lia-carte:not(.ecoutee) .lia-citron{animation:citron-veille 3.2s ease-in-out infinite}
@keyframes citron-veille{0%,100%{opacity:.12}50%{opacity:.6}}
.hero .lia-medaillon .lia-rond{position:absolute;right:-4px;bottom:-4px;width:36px;height:36px;background:var(--accent);color:var(--bg);border:2px solid var(--bg);box-shadow:0 4px 12px #000a}
.hero .lia-medaillon .lia-rond svg{width:13px;height:13px}
.hero .lia-bouton:hover .lia-medaillon .lia-rond{background:var(--accent-clair);transform:scale(1.08)}
.hero .lia-bouton:hover .lia-medaillon{box-shadow:0 10px 30px #000a,0 0 24px -2px var(--accent-glow)}
.lia-nouveau{display:block;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}
.hero .lia-titre{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--text)}
.hero .lia-bouton:hover .lia-titre{color:var(--accent-clair)}
.hero .lia-piste,.hero .lia-texte{margin-left:calc(92px + 1rem)}
@media(max-width:700px){.lia-medaillon{width:76px;height:76px}.hero .lia-piste,.hero .lia-texte{margin-left:calc(76px + 1rem)}.hero .lia-titre{font-size:1.02rem}}
@media (prefers-reduced-motion: reduce){.lia-citron{animation:none!important;transition:none}}

/* S'abonner : boutons en or plein (14/10/2026, Alexandre : « qu'on les voie encore plus ») */
.ba-abonner .pa-btn{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
.ba-abonner .pa-btn svg{color:var(--bg)}
.ba-abonner .pa-btn:hover,.ba-abonner .pa-btn:focus-visible{background:var(--accent-clair);border-color:var(--accent-clair);color:var(--bg);transform:translateY(-1px)}
.ba-abonner .pa-titre{color:var(--accent)}
.bandeau-actions .pa-discret{border-color:var(--border-2);color:var(--text)}
.bandeau-actions .pa-discret::after{content:'→';margin-left:.35rem;color:var(--accent);transition:transform .2s}
.bandeau-actions .pa-discret:hover::after{transform:translateX(3px)}
.bandeau-actions .card-partager::after{content:none}

/* À écouter aujourd'hui (14/10/2026) */
.dj-titre{grid-column:1 / -1;margin:0 0 .2rem;font-family:var(--ff-display);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;color:var(--text)}
.dj-titre::before{content:'';display:inline-block;width:.55em;height:.55em;margin-right:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);vertical-align:.08em}
.dj-nom a span{color:var(--accent);font-size:.8em;transition:margin .2s}
.dj-nom a:hover span{margin-left:.25rem}
.dj-tous{grid-column:1 / -1;margin:.2rem 0 0}
.dj-tous a{color:var(--accent-clair);font-size:.92rem;text-decoration:none;border-bottom:1px solid #c4a26566}
.dj-tous a:hover{border-color:var(--accent)}
.dj-image{cursor:pointer}
.dj-image:hover{box-shadow:0 30px 80px #000c,0 0 0 2px var(--accent)}
/* tout ce qui se clique a l'air cliquable : familles et vues qui s'allument, cartes qui réagissent */
.hero .puce:hover{border-color:var(--accent);color:var(--accent-clair)}
/* S'abonner, plus discret (14/10/2026, Alexandre : « trop visibles », un seul bouton doit appeler le clic : Écouter).
   Contour doré, texte clair, sur une seule ligne ; l'or plein reste réservé à « Écouter ». */
.ba-abonner{flex-wrap:nowrap;gap:.4rem}
.ba-abonner .pa-titre{min-width:0;margin-right:.3rem;color:var(--text-dim)}
.ba-abonner .pa-btn{background:none;border-color:#c4a26580;color:var(--text);font-weight:400;padding:.35rem .75rem;white-space:nowrap}
.ba-abonner .pa-btn svg{color:var(--accent)}
.ba-abonner .pa-btn:hover,.ba-abonner .pa-btn:focus-visible{background:#c4a2651f;border-color:var(--accent);color:var(--accent-clair);transform:none}
@media(max-width:520px){.ba-abonner{flex-wrap:wrap}}
/* bloc de Lia resserré (14/10/2026) : la barre de progression n'apparaît que pendant l'écoute, « Lire le texte » juste
   sous le titre, alignés sur le texte ; les lignes suivantes partent du même bord gauche que le médaillon */
html.anime .hero .lia-carte:not(.ecoute) .lia-piste{display:none}
.hero .lia-bouton{align-items:center}
.hero .lia-texte{margin-top:-1.9rem;margin-bottom:.4rem;min-height:1.2rem}
.hero .lia-carte.ecoute .lia-texte,.hero .lia-carte.deplie .lia-texte{margin-top:.6rem}
.hero .lia-lire{margin:0}
.bandeau-actions{margin-top:1.1rem}
@media(max-width:700px){.hero .lia-texte{margin-top:-1.4rem}}
/* colonnes inversées (14/10/2026, Alexandre) : « À écouter aujourd'hui » à gauche, le titre et Lia à droite */
@media(min-width:960px){
  .hero-dedans{grid-template-areas:"jour texte" "outils outils"}
  .du-jour{justify-self:start}
}
/* boutons du bandeau plus petits que « Lia vous explique le concept » (14/10/2026, Alexandre) */
.bandeau-actions{gap:.45rem}
.bandeau-actions .pa-btn,.ba-abonner .pa-btn,.bandeau-actions .card-partager{min-height:32px;padding:.22rem .7rem;font-size:.76rem;gap:.35rem}
.bandeau-actions .pa-btn svg,.bandeau-actions .card-partager svg{width:13px;height:13px}
.bandeau-actions .pa-titre{font-size:.56rem}
.bandeau-actions .pa-discret::after{margin-left:.25rem}

/* Le portrait du jour d'abord (14/10/2026, Alexandre : « on ne sait plus quoi lire, il faut mettre en valeur
   l'épisode ») : sur grand écran, tant qu'on n'a pas fait défiler la page, la présentation, Lia, les boutons et la
   recherche sont atténués ; ils se rallument au survol, au clavier, pendant une recherche, ou dès qu'on descend. */
.hero-mention{display:none}
@media(min-width:960px) and (hover:hover){
  .hero-phrase,.hero .lia-carte,.bandeau-actions,.hero .outils,.hero-label{transition:opacity .5s var(--ease),filter .5s var(--ease)}
  html.anime:not(.a-defile):not(.en-filtre) .hero-phrase,
  html.anime:not(.a-defile):not(.en-filtre) .hero .lia-carte,
  html.anime:not(.a-defile):not(.en-filtre) .bandeau-actions,
  html.anime:not(.a-defile):not(.en-filtre) .hero-label{opacity:.42!important;filter:saturate(.6)}
  html.anime:not(.a-defile):not(.en-filtre) .hero .outils{opacity:.5;filter:saturate(.6)}
  html.anime .hero-texte:hover .hero-phrase,html.anime .hero-texte:hover .lia-carte,html.anime .hero-texte:hover .bandeau-actions,html.anime .hero-texte:hover .hero-label,
  html.anime .hero-texte:focus-within .hero-phrase,html.anime .hero-texte:focus-within .lia-carte,html.anime .hero-texte:focus-within .bandeau-actions,html.anime .hero-texte:focus-within .hero-label,
  html.anime .hero .outils:hover,html.anime .hero .outils:focus-within,
  html.anime .lia-carte.joue{opacity:1!important;filter:none}
  /* le portrait du jour, plus grand */
  .du-jour{max-width:38rem;grid-template-columns:250px minmax(0,1fr)}
  .dj-nom{font-size:2.2rem}
}
/* familles sur deux lignes au plus sur grand écran (14/10/2026, Alexandre) : puces plus compactes */
@media(min-width:960px){
  .hero .outils .puces{gap:.35rem}
  .hero .outils .puce{min-height:32px;padding:.28rem .62rem;font-size:.78rem;gap:.3rem}
  .hero .outils .puce-n{font-size:.56rem}
}
/* moteur de recherche compact (14/10/2026, Alexandre) : ni titre ni sous-titre (il est dans le champ), pas de ligne
   « compteur / Essayez » tant qu'on ne cherche pas ; pendant une recherche, le compteur revient en titre des résultats */
.hero .outils{padding:1rem 1.1rem}
@media(min-width:960px){.hero .outils{padding:1.1rem 1.3rem;row-gap:.2rem}.hero .outils .vues{grid-row:1}.hero .outils .cherche{grid-row:1}}
.hero .cherche-champ{height:54px}
html:not(.en-filtre) .hero .outils .compte-ligne{display:none}
.hero .outils .exemples{display:none}
/* lien discret vers les sources (14/10/2026) : petit, gris, au-dessus du lien qui couvre la carte */
.card-sources,.dj-sources{position:relative;z-index:2;display:inline-block;margin-top:.45rem;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.08em;color:var(--text-faible);text-decoration:none;border-bottom:1px dotted #ffffff26;transition:color .2s,border-color .2s}
.card-sources:hover,.dj-sources:hover,.card-sources:focus-visible,.dj-sources:focus-visible{color:var(--accent);border-color:#c4a26599}
/* lien discret vers Choucroute Citron dans la barre du haut (14/10/2026, Alexandre) ; masqué sur téléphone */
.retour-marque{margin-left:1rem;margin-right:auto;font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faible);text-decoration:none;white-space:nowrap;transition:color .2s}
.retour-marque:hover,.retour-marque:focus-visible{color:var(--accent)}
@media(max-width:900px){.retour-marque{display:none}}

/* ------------------------------------------------------------------ le quiz (16/10/2026)
   Bouton sous le lecteur, encart après la conversation, fenêtre du quiz d'un portrait, invitation à la fin de
   l'écoute, page du grand quiz. Tout est caché sans JavaScript (attribut hidden, retiré par site.js). */
.pa-btn.pa-quiz{border-color:#c4a26599;color:var(--accent-clair)}
.pa-btn.pa-quiz:hover{background:var(--accent);color:var(--bg)}
.pa-quiz[hidden],.quiz-encart[hidden]{display:none}

.quiz-encart{margin:2.5rem 0 1rem;padding:1.4rem 1.3rem;border:1px solid #c4a26566;background:radial-gradient(ellipse 80% 120% at 0% 0%,#c4a2651c,transparent 60%),var(--bg-card);display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.1rem;align-items:start}
.quiz-encart-icone{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center}
.quiz-encart-icone svg{width:26px;height:26px}
.quiz-encart .section-label{margin-bottom:.35rem}
.quiz-encart h2{font-family:var(--ff-display);font-size:clamp(1.3rem,3.5vw,1.65rem);line-height:1.2;margin-bottom:.45rem}
.quiz-encart p{color:var(--text-dim);font-weight:300;line-height:1.6;font-size:.95rem}
.quiz-encart-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:.7rem}
.quiz-encart-grand{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font-size:.88rem;text-decoration:none}
.quiz-encart-grand svg{width:14px;height:14px}
.quiz-encart-grand:hover{text-decoration:underline}

.quiz-fenetre{
  width:min(720px,calc(100vw - 1.5rem));max-width:none;max-height:min(90vh,860px);margin:5vh auto auto;padding:0;
  border:1px solid #c4a26566;background:#0e0e11;color:var(--text);box-shadow:0 40px 120px #000d;overflow:hidden;
}
.quiz-fenetre[open]{display:flex;flex-direction:column}
.quiz-fenetre::backdrop{background:#050506d9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.qf-dedans{display:flex;flex-direction:column;min-height:0;flex:1}
.qf-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem .7rem;border-bottom:1px solid var(--border)}
.qf-tete h2{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.quiz-fenetre .quiz-scene{overflow-y:auto;overscroll-behavior:contain;padding:1.1rem 1.1rem 1.4rem}
@media (max-width:600px){
  .quiz-fenetre{width:100vw;max-height:none;height:100dvh;margin:0;border:none}
}

.qz-tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-faible);margin-bottom:.6rem}
.qz-tete strong{color:var(--accent);font-size:.95rem}
.qz-barre{height:3px;background:var(--border);margin-bottom:1.3rem;overflow:hidden}
.qz-barre i{display:block;height:100%;background:var(--accent);transition:width .5s var(--ease)}
.qz-qui{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 1rem;font-size:.85rem;color:var(--text-dim)}
.qz-vignette{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:#1d150e;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);color:#efe6d2}
.qz-vignette img{width:100%;height:100%;object-fit:cover}
.qz-question{font-family:var(--ff-display);font-size:clamp(1.25rem,3.6vw,1.6rem);line-height:1.3;font-weight:600;margin-bottom:1.1rem;outline:none}
.qz-choix{display:grid;gap:.55rem}
.qz-reponse{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;min-height:52px;padding:.7rem .9rem;border:1px solid var(--border-2);background:var(--bg-card);color:var(--text);cursor:pointer;font-size:1rem;line-height:1.4;transition:border-color .2s,background .2s,transform .2s,opacity .3s}
.qz-reponse:hover:not(:disabled){border-color:var(--accent);background:var(--bg-card-hover)}
.qz-reponse:active:not(:disabled){transform:scale(.99)}
.qz-lettre{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:.72rem;color:var(--text-dim)}
.qz-reponse:disabled{cursor:default}
.qz-reponse.juste{border-color:var(--accent2-clair);background:#5b8a7226}
.qz-reponse.juste .qz-lettre{background:var(--accent2-clair);border-color:var(--accent2-clair);color:var(--bg)}
.qz-reponse.faux{border-color:#c46565;background:#c4656522}
.qz-reponse.faux .qz-lettre{background:#c46565;border-color:#c46565;color:var(--bg)}
.qz-reponse.autre{opacity:.45}
.qz-retour:empty{display:none}
.qz-retour{margin-top:1.2rem;animation:qz-arrive .45s var(--ease)}
@keyframes qz-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qz-verdict{font-family:var(--ff-display);font-size:1.25rem;margin-bottom:.4rem}
.reussi .qz-verdict{color:var(--accent2-clair)}
.rate .qz-verdict{color:#e08a8a}
.rate .qz-verdict strong{color:var(--text)}
.qz-explication{color:var(--text-dim);line-height:1.65;font-weight:300;margin-bottom:.9rem}
.qz-extrait{border-left:2px solid var(--accent);padding:.55rem 0 .55rem .9rem;margin:0 0 1rem;background:linear-gradient(90deg,#c4a26512,transparent)}
.qz-extrait.alan{border-left-color:var(--accent2-clair)}
.qz-extrait.lia{border-left-color:var(--lia)}
.qz-extrait blockquote{font-family:var(--ff-display);font-style:italic;line-height:1.55;font-size:1.02rem}
.qz-extrait figcaption{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;color:var(--text-faible);margin-top:.35rem;text-transform:uppercase}
.qz-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem}
.qz-actions .qz-suivante{margin-left:auto}
.qz-ecouter{display:inline-flex;align-items:center;gap:.5rem;min-height:42px;padding:.4rem .95rem .4rem .5rem;border:1px solid #c4a26599;border-radius:999px;background:none;color:var(--accent-clair);cursor:pointer;font-size:.88rem;transition:background .2s,color .2s}
.qz-ecouter:hover{background:#c4a2651f}
.qz-ecouter svg{width:28px;height:28px;padding:7px;border-radius:50%;background:var(--accent);fill:var(--bg);flex:none}
.qz-ecouter .i-pause,.qz-ecouter.joue .i-lecture{display:none}
.qz-ecouter.joue .i-pause{display:block}
.qz-t{font-family:var(--ff-mono);font-size:.7rem;color:var(--text-faible)}
.qz-lien{color:var(--text-dim);font-size:.86rem;text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px}
.qz-lien:hover{color:var(--accent)}
.qz-suivante svg,.qz-commencer svg,.qz-grand svg{width:14px;height:14px}
@media (max-width:600px){.qz-actions .qz-suivante{margin-left:0;width:100%}}

.qz-fin{text-align:center;padding:1rem 0 .5rem}
.qz-fin-note{font-family:var(--ff-display);font-size:1.6rem;color:var(--text-dim)}
.qz-fin-note strong{font-size:4.2rem;color:var(--accent);line-height:1}
.qz-fin-mot{font-family:var(--ff-display);font-size:1.5rem;margin:.4rem 0 .5rem;outline:none}
.qz-fin-record{color:var(--text-dim);font-size:.9rem;margin-bottom:.4rem}
.qz-fin-sous{font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:1.6rem 0 .6rem}
.qz-fin-liste{list-style:none;text-align:left;display:grid;gap:.6rem}
.qz-fin-liste li{border:1px solid var(--border);padding:.7rem .9rem;display:flex;flex-direction:column;gap:.25rem;background:var(--bg-card)}
.qz-fin-q{font-weight:500}
.qz-fin-r{color:var(--text-dim);font-size:.9rem}
.qz-fin-actions{justify-content:center;margin:1.2rem 0 .4rem}
.qz-grand{display:inline-flex;align-items:center;gap:.4rem}

.quiz-invitation{position:fixed;left:50%;bottom:calc(1rem + var(--safe-bottom));z-index:950;transform:translate(-50%,140%);opacity:0;transition:transform .5s var(--ease),opacity .4s;width:min(520px,calc(100vw - 1.5rem));display:flex;align-items:center;gap:.9rem;padding:.8rem .8rem .8rem 1.1rem;background:#141210f5;border:1px solid #c4a26599;box-shadow:0 20px 60px #000c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.quiz-invitation.visible{transform:translate(-50%,0);opacity:1}
.quiz-invitation p{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.quiz-invitation strong{font-family:var(--ff-display);font-size:1.08rem}
.quiz-invitation span{color:var(--text-dim);font-size:.82rem}
.quiz-invitation .btn{padding:.75rem 1.1rem;white-space:nowrap}
.quiz-invitation-fermer{flex:none;width:34px;height:34px;border:none;background:none;color:var(--text-faible);cursor:pointer;display:flex;align-items:center;justify-content:center}
.quiz-invitation-fermer svg{width:16px;height:16px}

.quiz-page{max-width:760px;margin:0 auto;padding:6.5rem var(--gouttiere) 4rem}
.quiz-page .section-desc{margin-bottom:1.8rem}
.page-quiz .quiz-scene{border:1px solid var(--border-2);background:var(--bg-doux);padding:1.4rem 1.2rem 1.6rem;min-height:320px}
.quiz-scene.charge{display:flex;align-items:center;justify-content:center}
.quiz-scene.charge::before{content:'';width:28px;height:28px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--accent);animation:qz-tourne 1s linear infinite}
@keyframes qz-tourne{to{transform:rotate(360deg)}}
.qz-accueil{text-align:center;padding:1rem 0}
.qz-chiffres{list-style:none;display:flex;justify-content:center;gap:2.2rem;margin-bottom:1.2rem}
.qz-chiffres li{display:flex;flex-direction:column;gap:.15rem}
.qz-chiffres strong{font-family:var(--ff-display);font-size:2.4rem;color:var(--accent);line-height:1}
.qz-chiffres span{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faible)}
.qz-accueil-texte{color:var(--text-dim);max-width:460px;margin:0 auto 1.5rem;line-height:1.6;font-weight:300}
.quiz-sans-js{color:var(--text-dim)}
.quiz-note{margin-top:1.4rem;color:var(--text-faible);font-size:.82rem;line-height:1.6}
@media (prefers-reduced-motion:reduce){.qz-retour{animation:none}.quiz-invitation{transition:none}}
/* les modes du grand quiz (16/10/2026) */
.qz-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin-bottom:1.6rem;text-align:left}
.qz-mode-btn{display:flex;flex-direction:column;gap:.2rem;padding:.85rem .95rem;border:1px solid var(--border-2);background:var(--bg-card);color:var(--text);cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.qz-mode-btn:hover{border-color:#c4a26599}
.qz-mode-btn[aria-pressed="true"]{border-color:var(--accent);background:radial-gradient(ellipse 90% 120% at 0% 0%,#c4a2651f,transparent 70%),var(--bg-card)}
.qz-mode-btn strong{font-family:var(--ff-display);font-size:1.08rem;line-height:1.25}
.qz-mode-btn[aria-pressed="true"] strong{color:var(--accent-clair)}
.qz-mode-n{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.qz-mode-d{font-size:.82rem;color:var(--text-dim);line-height:1.45;font-weight:300}
.qz-mode-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.qz-changer{background:none;border:none;cursor:pointer;font-family:var(--ff-body);font-size:.8rem;letter-spacing:0;text-transform:none;padding:0}
/* les voix du quiz (16/10/2026) */
.qz-voix{border-color:var(--accent);background:#c4a2651a}
.qf-mention{padding:.45rem 1.1rem;font-size:.72rem;color:var(--text-faible);border-bottom:1px solid var(--border)}
/* ------------------------------------------------------------------ Ma playlist (marche 1, 16/10/2026)
   docs/ETUDE-PLAYLISTS-PARCOURS.md : pastilles « Sujets », « + » sur chaque portrait, « Tout ajouter » sur une recherche,
   barre « Ma playlist · N épisodes · durée — Écouter » en bas de l'écran (au-dessus du lecteur collant s'il est
   ouvert : --lecteur-h, posé par site.js), liste qui s'ouvre au-dessus. Un seul bouton plein : « Écouter ». */
html:not(.anime) .sujets,html:not(.anime) .card-ajouter,html:not(.anime) .tout-ajouter{display:none!important}
.sujets{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.7rem}
.sujets-titre{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faible);margin-right:.2rem}
.sujet{min-height:34px;padding:.3rem .75rem;border:1px dashed #c4a26559;border-radius:999px;background:none;color:var(--text-dim);font-family:var(--ff-body);font-size:.8rem;line-height:1.2;white-space:nowrap;cursor:pointer;transition:color .25s,border-color .25s,background .25s;-webkit-tap-highlight-color:transparent}
.sujet:hover{color:var(--text);border-color:#c4a265b3;border-style:solid}
.sujet[aria-pressed="true"]{border-style:solid;border-color:var(--accent);color:var(--accent-clair);background:#c4a2651a}
@media(max-width:699px){
  .sujets{flex-wrap:nowrap;overflow-x:auto;margin:.5rem calc(var(--gouttiere) * -1) 0;padding:0 var(--gouttiere) .2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent)}
  .sujets::-webkit-scrollbar{display:none}
  .sujet{flex:0 0 auto;font-size:.76rem;min-height:32px;padding:.25rem .65rem}
}

/* « + » de chaque portrait : ajouter (ou retirer) de ma playlist */
.card-ajouter{width:42px;height:42px;margin-left:auto;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:1px solid #c4a26573;color:var(--accent);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .3s;-webkit-tap-highlight-color:transparent}
.card-ajouter+.card-play{margin-left:0}
.card-ajouter:hover,.card-ajouter:focus-visible{border-color:var(--accent);background:#c4a2651f;transform:scale(1.06)}
.card-ajouter svg{width:16px;height:16px}
.card-ajouter svg+svg{display:none}
.card-ajouter[aria-pressed="true"]{border-color:var(--accent);background:#c4a26529;color:var(--accent-clair)}
.card-ajouter[aria-pressed="true"] svg{display:none}
.card-ajouter[aria-pressed="true"] svg+svg{display:block}
.card-footer:has(.card-ajouter){justify-content:flex-start}
@media(max-width:619px){
  .episodes-grid .card-footer:has(.card-ajouter){gap:.45rem}
  .episodes-grid .card-ajouter{width:34px;height:34px}
  .episodes-grid .card-ajouter svg{width:14px;height:14px}
}
html.en-recherche #grille-portraits .card-ajouter{margin-left:auto}

/* « Tout ajouter » : sous le titre des résultats */
.tout-ajouter{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.4rem .9rem;border:1px solid #c4a26580;border-radius:999px;background:none;color:var(--accent-clair);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tout-ajouter[hidden]{display:none}
.tout-ajouter:hover{background:#c4a2651f;border-color:var(--accent)}
.tout-ajouter svg{width:14px;height:14px;flex-shrink:0}
.tout-ajouter.fait{border-color:transparent;color:var(--text-dim);cursor:default;background:none}
html.en-filtre .compte-ligne:has(.tout-ajouter:not([hidden])){flex-wrap:wrap}
html.en-filtre .compte-ligne:has(.tout-ajouter:not([hidden]))::after{content:"";order:2;flex-basis:100%;height:0}
html.en-filtre .compte-ligne .tout-ajouter{order:3}
html.en-filtre .compte-ligne:has(.tout-ajouter:not([hidden])) .compte{flex:1 1 0}
@media(max-width:699px){.tout-ajouter{min-height:36px;padding:.3rem .8rem;font-size:.58rem;letter-spacing:.1em}}

/* la barre et la liste */
.ma-playlist{position:fixed;left:0;right:0;bottom:var(--lecteur-h,0px);z-index:999;background:var(--player-bg);border-top:1px solid #c4a2654d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:bottom .55s var(--ease);box-shadow:0 -12px 30px #0007}
.ma-playlist[hidden]{display:none}
body:not(.lecteur-ouvert) .ma-playlist{padding-bottom:var(--safe-bottom)}
.mp-barre{max-width:var(--large);margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;gap:.6rem}
.mp-barre.ajoute{animation:mp-ajoute .9s var(--ease)}
@keyframes mp-ajoute{30%{box-shadow:inset 0 0 0 1px var(--accent),0 0 26px #c4a26555}}
.mp-ouvrir{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center;gap:.6rem;padding:.3rem .4rem;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.mp-ouvrir>svg{width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.mp-libelle{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mp-nom{font-family:var(--ff-display);font-weight:700;font-size:1rem}
.mp-resume{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.06em;color:var(--text-dim);white-space:nowrap}
.mp-chevron{display:flex;margin-left:.1rem;color:var(--text-faible);transition:transform .35s var(--ease)}
.mp-chevron svg{width:16px;height:16px}
.ma-playlist.ouverte .mp-chevron{transform:rotate(180deg)}
.mp-ouvrir:hover .mp-nom,.mp-ouvrir:focus-visible .mp-nom{color:var(--accent-clair)}
.mp-ecouter{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1.15rem 0 1rem;border:0;border-radius:999px;background:var(--accent);color:var(--bg);cursor:pointer;font-family:var(--ff-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,box-shadow .3s,transform .3s;-webkit-tap-highlight-color:transparent}
.mp-ecouter:hover,.mp-ecouter:focus-visible{background:var(--accent-clair);box-shadow:0 0 24px var(--accent-glow)}
.mp-ecouter:active{transform:scale(.96)}
.mp-ecouter svg{width:14px;height:14px;fill:currentColor}
/* lecteur ouvert : son gros bouton rond suffit, celui de la barre passe en contour (un seul appel fort à la fois) */
body.lecteur-ouvert .mp-ecouter{background:none;color:var(--accent-clair);box-shadow:inset 0 0 0 1px #c4a26599}
body.lecteur-ouvert .mp-ecouter:hover,body.lecteur-ouvert .mp-ecouter:focus-visible{background:#c4a2651f;box-shadow:inset 0 0 0 1px var(--accent)}
.mp-panneau{max-width:var(--large);margin:0 auto;padding:.8rem 1rem .2rem;max-height:min(64vh,32rem);max-height:min(64vh,32rem,calc(100dvh - var(--lecteur-h,0px) - 150px));display:flex;flex-direction:column;border-bottom:1px solid var(--border)}
.mp-panneau[hidden]{display:none}
.mp-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.mp-tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem}
.mp-tete .mp-partager{margin-left:auto}
.mp-titre-panneau{font-family:var(--ff-display);font-size:1.25rem;font-weight:700;color:var(--accent)}
.mp-fermer{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text-dim);cursor:pointer;border-radius:50%}
.mp-fermer:hover{color:var(--text);background:#ffffff0c}
.mp-fermer svg{width:16px;height:16px}
.mp-recu{margin:0 0 .6rem;padding:.6rem .8rem;border:1px dashed #c4a26573;font-size:.88rem;color:var(--text-dim);line-height:1.5}
.mp-remettre{background:none;border:0;padding:0;color:var(--accent-clair);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mp-liste{list-style:none;margin:0;padding:0}
.mp-item{display:flex;align-items:center;gap:.15rem;border-top:1px solid var(--border)}
.mp-item:first-child{border-top:0}
.mp-jouer{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.7rem;padding:.5rem .2rem;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.mp-num{width:1.3rem;flex-shrink:0;text-align:right;font-family:var(--ff-mono);font-size:.66rem;color:var(--text-faible)}
.mp-vignette{width:40px;height:40px;flex-shrink:0;border-radius:5px;overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-style:italic;color:var(--accent);background:#141417}
.mp-vignette img{width:100%;height:100%;object-fit:cover}
.mp-texte{min-width:0;display:flex;flex-direction:column}
.mp-texte strong{font-family:var(--ff-display);font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-role{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.06em;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-jouer:hover strong,.mp-jouer:focus-visible strong{color:var(--accent-clair)}
.mp-item.en-cours .mp-num{color:var(--accent)}
.mp-item.en-cours .mp-num::before{content:"▸ "}
.mp-item.en-cours strong{color:var(--accent-clair)}
.mp-item.en-cours .mp-vignette{border-color:var(--accent)}
.mp-bouger,.mp-retirer{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:50%;color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mp-bouger:hover,.mp-retirer:hover,.mp-bouger:focus-visible,.mp-retirer:focus-visible{color:var(--text);background:#ffffff0f}
.mp-bouger:disabled{opacity:.22;cursor:default;background:none}
.mp-bouger svg,.mp-retirer svg{width:16px;height:16px}
.mp-retirer:hover{color:#e8a39a}
.mp-actions{display:flex;justify-content:flex-end;padding-top:.2rem;border-top:1px solid var(--border)}
.mp-partager,.mp-vider{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.35rem .2rem;background:none;border:0;color:var(--accent);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.mp-partager svg{width:15px;height:15px;fill:currentColor}
.mp-partager:hover span{text-decoration:underline;text-underline-offset:3px}
.mp-vider{color:var(--text-faible)}
.mp-vider:hover{color:var(--text)}
.mp-etat{min-height:1.2em;margin:0 0 .2rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;color:var(--accent-clair)}
@media(max-width:420px){
  .mp-barre{padding:.45rem .75rem;gap:.4rem}
  .mp-ouvrir{gap:.45rem;padding:.3rem .1rem}
  .mp-nom{font-size:.95rem}
  .mp-resume{font-size:.6rem;letter-spacing:.03em}
  .mp-ecouter{padding:0 .95rem 0 .85rem;font-size:.62rem;letter-spacing:.1em}
  .mp-panneau{padding:.75rem .75rem .3rem}
  .mp-bouger,.mp-retirer{width:34px;height:34px}
  .mp-jouer{gap:.55rem}
}
/* place pour la barre en bas de la page, et le bouton « remonter » au-dessus d'elle */
body.avec-playlist,body.avec-playlist.lecteur-ouvert,body.avec-playlist.lecteur-ouvert.mode-audio{padding-bottom:calc(var(--lecteur-h,0px) + 76px + var(--safe-bottom))}
body.avec-playlist .remonter,body.avec-playlist.lecteur-ouvert .remonter,body.avec-playlist.lecteur-ouvert:not(.mode-audio) .remonter{bottom:calc(var(--lecteur-h,0px) + 74px + var(--safe-bottom))}
body.playlist-ouverte .remonter{opacity:0;visibility:hidden;pointer-events:none}
.card-footer:has(.card-ajouter) .card-duration{white-space:nowrap}

/* ------------------------------------------------------------------ les parcours (marche 3, 16/10/2026)
   Bloc « Par où commencer ? » de l'accueil et page de chaque parcours (parcours/<id>/). Les liaisons sont écrites
   (pas encore de voix) ; « Écouter » remplit Ma playlist de l'accueil. */
.section-parcours{max-width:var(--large);margin:0 auto;padding:5rem var(--gouttiere) 2rem}
.pc-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;margin-top:1.8rem}
.pc-carte{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.3rem 1.2rem 1.2rem;border:1px solid var(--border-2);background:radial-gradient(ellipse 90% 80% at 0% 0%,#c4a26514,transparent 65%),var(--bg-card);transition:border-color .25s}
.pc-carte:hover{border-color:#c4a26599}
.pc-carte .lien-carte{position:absolute;inset:0;z-index:0}
.pc-carte .pc-actions{position:relative;z-index:1;margin-top:auto}
.pc-meta,.pc-maillon{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pc-titre{font-family:var(--ff-display);font-size:1.4rem;line-height:1.2}
.pc-accroche{color:var(--text-dim);font-weight:300;line-height:1.55;font-size:.95rem}
.pc-vignettes{list-style:none;display:flex;margin:.3rem 0 .5rem;padding:0}
.pc-vignettes li{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--bg);margin-left:-8px;background:#1d150e;flex:none}
.pc-vignettes li:first-child{margin-left:0}
.pc-vignettes img,.pc-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.pc-vignettes .monogramme,.pc-vignette .monogramme{width:100%;height:100%;font-size:.6rem}
.pc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;margin:.6rem 0}
.pc-actions .btn svg{width:14px;height:14px}
.pc-ecouter svg{fill:currentColor}
.pc-voir{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font-size:.88rem;text-decoration:none}
.pc-voir svg{width:14px;height:14px}
.pc-voir:hover{text-decoration:underline}

.parcours-page{max-width:760px;margin:0 auto;padding:6.5rem var(--gouttiere) 4rem}
.pc-chapo{font-family:var(--ff-display);font-size:clamp(1.2rem,3.4vw,1.5rem);line-height:1.4;margin:.4rem 0 1rem}
.pc-note{color:var(--text-faible);font-size:.82rem;line-height:1.55;margin-bottom:2rem}
.pc-bloc{margin:2rem 0}
.pc-sous{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:.9rem}
.pc-objectifs{padding-left:1.1rem;display:grid;gap:.5rem;color:var(--text-dim);line-height:1.55;font-weight:300}
.pc-liaison{font-family:var(--ff-display);font-style:italic;font-size:1.08rem;line-height:1.65;color:var(--text);border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1rem}
.pc-etapes{list-style:none;padding:0;margin:0;display:grid;gap:2.2rem}
.pc-etape{display:grid;gap:.9rem}
.pc-episode{display:flex;align-items:center;gap:1.1rem;padding:0 1rem 0 0;border:1px solid var(--border-2);background:var(--bg-card);color:var(--text);text-decoration:none;transition:border-color .2s,background .2s}
.pc-episode:hover{border-color:var(--accent);background:var(--bg-card-hover)}
.pc-vignette{position:relative;width:150px;height:150px;overflow:hidden;flex:none;background:#1d150e;border:1px solid var(--border-2)}
.pc-num{position:absolute;left:0;top:0;min-width:2rem;padding:.15rem .45rem;background:var(--accent);color:var(--bg);font-family:var(--ff-display);font-weight:700;font-size:1.05rem;text-align:center;line-height:1.3}
.pc-ep-texte{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.pc-ep-texte strong{font-family:var(--ff-display);font-size:1.2rem;line-height:1.2}
.pc-role{color:var(--text-dim);font-size:.82rem;line-height:1.35}
.pc-duree{display:flex;align-items:center;gap:.4rem;font-family:var(--ff-mono);font-size:.7rem;color:var(--text-faible);white-space:nowrap}
.pc-duree svg{width:14px;height:14px;color:var(--accent)}
.pc-cle{font-size:.92rem;line-height:1.55;color:var(--text-dim);padding:.6rem .8rem;background:#c4a26512}
.pc-cle span{display:block;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}
.pc-fin{margin-top:2.6rem}
@media (max-width:520px){
  .pc-episode{gap:.8rem;padding:0 .7rem 0 0}
  .pc-vignette{width:104px;height:104px}
  .pc-num{font-size:.9rem;min-width:1.6rem}
  .pc-ep-texte strong{font-size:1.08rem}
  .pc-duree{display:none}
  .pc-liaison{font-size:1rem}
}
.parcours-page section.pc-bloc{padding:0;max-width:none}
/* vignette du parcours (mosaïque des six vignettes, images.py) : en tête de carte et de page */
.pc-couverture{display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--border-2);background:#141414}
.pc-couverture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pc-carte .pc-couverture{margin:-1.3rem -1.2rem .5rem;border:0;border-bottom:1px solid var(--border-2)}
.pc-carte:hover .pc-couverture img{transform:scale(1.03)}
.pc-entete{display:grid;gap:1.2rem;margin-bottom:.8rem}
.pc-entete .pc-couverture{max-width:420px}
@media (min-width:700px){.pc-entete{grid-template-columns:260px minmax(0,1fr);align-items:center;gap:1.8rem}.pc-entete .pc-couverture{max-width:none}}
/* la vignette porte déjà la durée et le titre : sur la carte, on ne les redit qu'aux lecteurs d'écran */
.pc-carte .pc-couverture~.pc-meta,.pc-carte .pc-couverture~.pc-titre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Ma playlist : des vignettes qu'on voit (16/10/2026, Alexandre : « ce qui donne envie, c'est la vignette ») */
.mp-vignette{width:64px;height:64px;border-radius:4px}
@media(max-width:420px){.mp-vignette{width:54px;height:54px}}
/* l'écoute d'un parcours avec Lia (16/10/2026) : bouton « Lia » devant chaque texte dit, lecteur en bas de la page */
.pc-dit{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start}
.pc-dit:not(:has(.pc-lia)){display:block}
.pc-lia{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;padding:.3rem .7rem .3rem .35rem;border:1px solid #c4a26599;border-radius:999px;background:none;color:var(--accent-clair);font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.pc-lia svg{width:22px;height:22px;padding:6px;border-radius:50%;background:var(--accent);fill:var(--bg)}
.pc-lia:hover,.pc-lia.joue{background:#c4a2651f;border-color:var(--accent)}
.pc-en-cours .pc-liaison{border-left-color:var(--accent-clair);background:linear-gradient(90deg,#c4a2651a,transparent 70%)}
.pc-episode.pc-en-cours{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 30px #c4a26533}
.pc-lire svg{fill:currentColor}
.pc-lecteur{position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--player-bg);border-top:1px solid #c4a2654d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding-bottom:var(--safe-bottom);box-shadow:0 -12px 30px #0007}
.pc-lecteur[hidden]{display:none}
.pc-lecteur-dedans{position:relative;max-width:760px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem}
.pc-lecteur button{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:var(--text-dim);cursor:pointer}
.pc-lecteur button svg{width:16px;height:16px}
.pc-l-prec svg{transform:rotate(-90deg)}
.pc-l-suiv svg{transform:rotate(-90deg)}
.pc-lecteur .pc-l-jouer{width:46px;height:46px;background:var(--accent);color:var(--bg)}
.pc-l-jouer svg{fill:currentColor}
.pc-lecteur.joue .pc-l-jouer svg{display:none}
.pc-lecteur.joue .pc-l-jouer::before{content:"";width:12px;height:14px;border-left:4px solid var(--bg);border-right:4px solid var(--bg)}
.pc-l-texte{min-width:0;display:flex;flex-direction:column;line-height:1.25;margin-left:.3rem}
.pc-l-titre{font-family:var(--ff-display);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-l-etape{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.08em;color:var(--text-faible)}
.pc-l-barre{position:absolute;left:0;right:0;top:0;height:2px;background:var(--border)}
.pc-l-barre i{display:block;height:100%;width:0;background:var(--accent)}
body.pc-ecoute{padding-bottom:calc(76px + var(--safe-bottom))}
body.pc-ecoute .remonter{bottom:calc(84px + var(--safe-bottom))}
@media (max-width:520px){.pc-dit{display:block}.pc-lia{margin:0 0 .6rem}}
/* une seule touche « son » après la réponse, le reste en liens ; haut-parleur en haut (16/10/2026) */
button.qz-lien{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-size:.86rem}
.qz-lien-son .qz-t{margin-left:.2rem}
.qz-lien-son.joue{color:var(--accent-clair)}
.qz-hp{flex:none;width:42px;height:42px;margin-left:auto;margin-right:.5rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-2);border-radius:50%;background:none;color:var(--accent);cursor:pointer;transition:color .2s,border-color .2s}
.qz-hp:hover{border-color:var(--accent)}
.qz-hp[aria-pressed="false"]{color:var(--text-faible)}
.qz-hp svg{width:20px;height:20px}
.qz-mode-ligne .qz-hp{width:34px;height:34px;margin:0 0 0 .6rem}
.qz-extrait-seul .qz-explication{margin:0;color:var(--text)}
/* « Revenir au quiz » : on retrouve son questionnaire où on l'a laissé (16/10/2026) */
.quiz-revenir{position:fixed;left:50%;bottom:calc(1rem + var(--safe-bottom));z-index:950;transform:translate(-50%,140%);opacity:0;transition:transform .45s var(--ease),opacity .35s;display:flex;align-items:center;gap:.8rem;padding:.7rem 1.2rem .7rem .8rem;border:1px solid var(--accent);background:#141210f5;color:var(--text);box-shadow:0 20px 60px #000c;cursor:pointer;text-align:left;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100vw - 1.5rem)}
.quiz-revenir.visible{transform:translate(-50%,0);opacity:1}
.quiz-revenir:hover{background:#1d1912f5}
.quiz-revenir-icone{width:36px;height:36px;flex:none;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.quiz-revenir strong{display:block;font-family:var(--ff-display);font-size:1.02rem}
.quiz-revenir strong+span{display:block;font-size:.8rem;color:var(--text-dim)}
/* le bandeau du parcours (17/10/2026, Alexandre : « un super bandeau », moins haut, le texte tout de suite) :
   pleine largeur jusqu'à 1200 px, au-dessus de la colonne de texte ; il porte le titre, que la page ne redit pas sur
   ordinateur (gardé pour les lecteurs d'écran) ; sur téléphone, le titre reste écrit sous le bandeau */
.page-parcours .parcours-page{padding-top:5.2rem}
.pc-bandeau{display:block;width:min(1200px,100vw - 2 * var(--gouttiere));margin:.8rem 0 1.4rem;position:relative;left:50%;transform:translateX(-50%);border:1px solid var(--border-2);box-shadow:0 30px 80px #0009;overflow:hidden}
.pc-bandeau img{display:block;width:100%;height:auto}
.pc-entete.avec-bandeau{display:block;margin-bottom:.4rem}
@media (min-width:700px){
  .pc-entete.avec-bandeau .section-label,.pc-entete.avec-bandeau h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .pc-entete.avec-bandeau .pc-chapo{font-size:clamp(1.3rem,2.4vw,1.6rem);margin-top:0}
}
@media (max-width:699px){.pc-entete.avec-bandeau .section-title{font-size:1.9rem}.pc-bandeau{width:calc(100vw - 2 * var(--gouttiere))}}
/* Une indication (astuce, « à savoir ») : la même partout, bien visible, sans rien qui ressemble à un bouton
   (17/10/2026, Alexandre : « on ne peut pas faire un bouton avec un texte ») : pas de cadre, pas de forme arrondie ;
   un petit mot doré en capitales, puis le texte. */
.indication{display:block;background:none;border:0;border-radius:0;padding:0;color:var(--text-dim);font-size:.9rem;line-height:1.55;font-weight:300}
.indication-mot{display:inline-block;margin-right:.6rem;font-family:var(--ff-mono);font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.astuce.indication{margin:.4rem 0 1.6rem;color:var(--accent-clair)}
.astuce.indication[hidden]{display:none}
/* Page parcours, version resserrée (17/10/2026, Alexandre : « trop d'infos tuent l'info », « il faut qu'on ait envie
   de cliquer et qu'on comprenne tout de suite où ») : deux grands boutons sous l'accroche, celui de l'écoute bat comme
   un cœur ; chaque passage dit tient sur une ligne, son texte se lit en ouvrant ; le reste dans « En savoir plus ». */
.pc-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:.8rem;margin:1.4rem 0 .5rem}
.pc-cta-ecouter,.pc-cta-quiz{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;text-align:left;text-decoration:none;cursor:pointer;font:inherit;border-radius:14px;transition:transform .2s var(--ease),box-shadow .3s,background .3s}
.pc-cta-ecouter{border:0;background:linear-gradient(135deg,var(--accent-clair),var(--accent));color:var(--bg);box-shadow:0 10px 34px #c4a26540}
.pc-cta-quiz{border:2px solid var(--accent);background:radial-gradient(ellipse 90% 120% at 0% 0%,#c4a26526,transparent 70%),var(--bg-card);color:var(--text)}
.pc-cta-ecouter:hover,.pc-cta-quiz:hover{transform:translateY(-2px)}
.pc-cta-quiz:hover{background:#c4a2652e}
.pc-cta-icone{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pc-cta-ecouter .pc-cta-icone{background:var(--bg);color:var(--accent-clair)}
.pc-cta-ecouter .pc-cta-icone svg{width:20px;height:20px;fill:currentColor;margin-left:3px}
.pc-cta-quiz .pc-cta-icone{background:var(--accent);color:var(--bg)}
.pc-cta-quiz .pc-cta-icone svg{width:26px;height:26px}
.pc-cta-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pc-cta-txt strong{font-family:var(--ff-display);font-size:1.3rem;line-height:1.15}
.pc-cta-txt small{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;opacity:.85}
.pc-cta-fin{margin:2.6rem 0 1.6rem}
.pc-alt{margin:.2rem 0 2.2rem;font-size:.85rem;color:var(--text-faible)}
.pc-alt a{color:var(--text-dim)}
/* le cœur qui bat : le bouton d'écoute tant qu'on n'écoute pas ; puis le bouton du lecteur pendant l'écoute */
@keyframes pc-coeur{0%,100%{transform:scale(1);box-shadow:0 10px 34px #c4a26540,0 0 0 0 #c4a26566}14%{transform:scale(1.035)}28%{transform:scale(1)}42%{transform:scale(1.025);box-shadow:0 10px 34px #c4a26540,0 0 0 14px #c4a26500}70%{transform:scale(1)}}
.pc-cta-ecouter{animation:pc-coeur 2.4s ease-in-out infinite}
body.pc-ecoute .pc-cta-ecouter{animation:none}
@keyframes pc-coeur-rond{0%,100%{box-shadow:0 0 0 0 #c4a26599}50%{box-shadow:0 0 0 10px #c4a26500}}
.pc-lecteur.joue .pc-l-jouer{animation:pc-coeur-rond 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.pc-cta-ecouter,.pc-lecteur.joue .pc-l-jouer{animation:none}}
/* les passages dits : une ligne, le texte derrière « Lire » */
.pc-etape-dit{display:block}
.pc-dit{display:flex;align-items:flex-start;gap:.7rem;grid-template-columns:none}
.pc-texte{flex:1;min-width:0}
.pc-texte summary{cursor:pointer;list-style:none;padding:.35rem 0;color:var(--text-dim);font-size:.92rem}
.pc-texte summary::-webkit-details-marker{display:none}
.pc-texte summary::after{content:" · lire";color:var(--text-faible);font-size:.82rem}
.pc-texte[open] summary::after{content:" · fermer"}
.pc-texte .pc-liaison{margin:.4rem 0 .6rem;font-size:1rem}
.pc-dit-duree{font-family:var(--ff-mono);font-size:.66rem;color:var(--text-faible)}
.pc-lia-muet{cursor:default}
.pc-dit.pc-en-cours .pc-texte summary{color:var(--accent-clair)}
.pc-dit.pc-en-cours .pc-lia{background:#c4a26529;border-color:var(--accent)}
.pc-etapes{gap:1.4rem}
.pc-etape{gap:.6rem}
.pc-plus{margin:1rem 0 1.4rem;border-top:1px solid var(--border);padding-top:.9rem}
.pc-plus summary{cursor:pointer;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.pc-plus p{color:var(--text-dim);line-height:1.6;margin:.8rem 0 1rem;font-weight:300}
@media (max-width:520px){.pc-dit{display:flex}.pc-lia{margin:0}.pc-cta-txt strong{font-size:1.15rem}}
/* l'accroche plus discrète, pour que les deux boutons se voient sans faire défiler */
@media (min-width:700px){.pc-entete.avec-bandeau .pc-chapo{font-size:1.18rem;line-height:1.5;color:var(--text-dim);max-width:62ch}}
.pc-bandeau{margin-bottom:1rem}
.pc-cta{margin-top:1rem}
/* « Défier un ami » dans les quiz (17/10/2026) */
.qz-tete .qz-defier{margin-left:auto;padding:.35rem .7rem;font-size:.6rem}
/* La voix d'Alexandre dans un portrait (17/10/2026) : au centre, comme Lia, en ivoire */
.replique.alexandre{color:var(--text);max-width:680px;margin-left:auto;margin-right:auto}
.replique.alexandre .bulle{border-color:#efe6d240;background:#131316;border-radius:16px}
.replique.alexandre .qui::after{content:' · sa voix recréée par I.A.';letter-spacing:.12em;opacity:.7}
/* Alexandre mis en valeur : parcours, quiz, portraits (17/10/2026) */
.pc-dit-alexandre{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border:1px solid var(--accent);background:linear-gradient(135deg,#c4a26514,transparent)}
.pc-dit-alexandre .pc-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--accent)}
.pc-dit-alexandre .pc-dit-corps{flex:1;min-width:0}
.pc-dit-alexandre .pc-qui{margin:0 0 .5rem;font-size:1rem}.pc-dit-alexandre .pc-qui span{color:var(--text-dim);font-size:.85rem}
.pc-dit-alexandre .pc-dit-ligne{display:flex;gap:.7rem;align-items:flex-start;flex-wrap:wrap}
.replique.alexandre .avatar{overflow:hidden;padding:0}.replique.alexandre .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.quiz-auteur{display:flex;gap:.9rem;align-items:center;margin:0 0 1.2rem;color:var(--text-dim)}
.quiz-auteur img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);flex:none}
.qz-voix .qz-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
/* Feux d'artifice du sans-faute (17/10/2026) */
.qz-feux{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
/* « Quitter le quiz » à côté de « Revenir au quiz » (17/10/2026) */
.quiz-revenir{padding:0;gap:0;cursor:default}
.quiz-revenir-ouvrir{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem .7rem .8rem;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.quiz-revenir-quitter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;align-self:stretch;padding:0 .9rem;background:none;border:0;border-left:1px solid var(--border-2);color:var(--text-dim);font:inherit;cursor:pointer}
.quiz-revenir-quitter span:first-child{font-size:1.3rem;line-height:1}.quiz-revenir-quitter-mot{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.quiz-revenir-quitter:hover{color:var(--accent)}
/* Option C (17/10/2026) : « Découvrir la fiche complète » bien visible sur chaque carte, sommaire en haut de chaque fiche */
.card-fiche{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
.card-fiche:hover,.card-fiche:focus-visible{background:var(--accent-clair);border-color:var(--accent-clair);color:var(--bg)}
.sommaire-fiche{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 0}
.sommaire-fiche .sf-titre{width:100%;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim)}
.sommaire-fiche a{display:inline-flex;align-items:center;min-height:38px;padding:.4rem .9rem;border:1px solid var(--border-2);border-radius:999px;color:var(--text);text-decoration:none;font-size:.88rem;transition:border-color .25s,color .25s}
.sommaire-fiche a:hover,.sommaire-fiche a:focus-visible{border-color:var(--accent);color:var(--accent)}


/* « Les Voix de l'IA en une minute » dans le bandeau (17/10/2026, Alexandre : sa vignette en plus grand) */
.minute-carte .lia-medaillon.minute-medaillon{width:148px;height:148px;border-radius:18px;padding:3px}
.minute-carte .minute-medaillon picture,.minute-carte .minute-medaillon img{border-radius:15px}
.minute-carte .lia-textes{display:flex;flex-direction:column;gap:.15rem}
.minute-qui{display:block;font-size:.85rem;color:var(--text-dim);font-weight:400}
.minute-voix{color:var(--accent);font-weight:600}
.minute-carte .lia-citation [data-t]{display:block;margin:.25rem 0}
@media (max-width:560px){.minute-carte .lia-medaillon.minute-medaillon{width:116px;height:116px}}
/* La minute d'Alexandre plus visible (17/10/2026, Alexandre : « l'explication doit être plus visible ») : un encadré doré,
   et sur téléphone juste sous le titre, avant le portrait du jour */
.hero .lia-carte.minute-carte{max-width:36rem;margin:1.4rem 0 .4rem;padding:1rem 1.1rem;border:1px solid #c4a265aa;border-radius:20px;background:linear-gradient(150deg,#1d1810,#121014 70%);box-shadow:0 14px 40px #0009,0 0 0 4px #c4a26514}
.minute-carte .lia-nouveau{color:var(--accent)}
.minute-carte .lia-titre{font-size:1.25rem}
@media(max-width:700px){
  .hero .lia-carte.minute-carte{order:3;margin:1rem 0 .6rem}
  .du-jour{order:4}
  .hero-phrase{order:5}
  .minute-carte .lia-titre{font-size:1.12rem}
}
/* « Mon nouveau métier : le vibe coding » dans « Une série … imaginée par » (17/10/2026) */
.vibe-carte{display:flex;gap:1rem;align-items:center;margin:1rem 0 0;padding:.9rem;border:1px solid #c4a26566;border-radius:16px;background:#121014}
.vibe-carte img{width:120px;height:120px;flex:none;border-radius:12px;object-fit:cover}
.vibe-carte figcaption{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}
.vibe-carte strong{font-family:var(--ff-display);font-size:1.05rem;color:var(--text)}
.vibe-carte span{font-size:.85rem;color:var(--text-dim)}
.vibe-carte audio{width:100%;margin-top:.2rem}
.vibe-lien{font-size:.8rem;color:var(--accent)}
@media(max-width:520px){.vibe-carte{flex-direction:column;align-items:stretch}.vibe-carte img{width:100%;height:auto;aspect-ratio:1/1;max-width:260px;align-self:center}}
/* iPad (18/10/2026, Alexandre : « la version iPad ne fonctionne pas ») : entre 701 et 959 px, .hero .outils portait
   grid-area:outils alors que la grille n'avait que "texte" "jour" → colonnes implicites, titre et portrait du jour
   écrasés à 0 px, bandeau de 3 000 px. On donne à cette largeur une grille en une colonne qui connaît les trois zones. */
@media(min-width:701px) and (max-width:959px){
  .hero{padding:5.6rem var(--gouttiere) 2.4rem}
  .hero-dedans{grid-template-columns:minmax(0,1fr);grid-template-areas:"texte" "jour" "outils";row-gap:2rem;align-items:start}
  .du-jour{max-width:none;justify-self:stretch;grid-template-columns:220px minmax(0,1fr);column-gap:1.4rem;align-items:start}
  .dj-boutons{grid-column:1 / -1}
  .hero .lia-carte.minute-carte{max-width:none}
}
/* Barre du haut sur tablette : 6 liens + « S'abonner » débordaient de 66 px à 768 px */
@media(max-width:1024px){.barre nav a.facultatif{display:none}.barre nav{gap:1.1rem}}

/* Pied de la carte du lecteur (18/10/2026, Alexandre : même fond que le lecteur, boutons qui se comprennent) */
.lecteur .lecteur-pied{margin:1.1rem -1.2rem -1.2rem;padding:1.1rem 1.2rem 1.2rem;border-top:1px solid var(--border);background:#0f0f12}
@media(min-width:700px){.lecteur .lecteur-pied{margin:1.3rem -1.6rem -1.5rem;padding:1.2rem 1.6rem 1.4rem}}
.lecteur-pied .portrait-actions{margin-top:0;align-items:stretch}
.pa-quiz-grand{flex:1 1 260px;display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.7rem 1rem;border:0;border-radius:10px;background:var(--accent);color:var(--bg);font-family:var(--ff-body);text-align:left;cursor:pointer;transition:background .25s,transform .25s}
.pa-quiz-grand:hover,.pa-quiz-grand:focus-visible{background:var(--accent-clair);transform:translateY(-1px)}
.pa-quiz-grand>svg{width:24px;height:24px;flex:none}
.pa-quiz-grand>svg:last-child{width:18px;height:18px;margin-left:auto}
.pa-quiz-grand .pq-texte strong{display:block;font-size:1rem;font-weight:600}
.pa-quiz-grand .pq-texte span{font-size:.8rem;opacity:.8}
.pa-quiz-grand[hidden]{display:none}
.lecteur-pied .pa-btn.pa-partager{align-self:center}
.lecteur-pied .sommaire-fiche{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1.1rem}
/* 3 liens côte à côte seulement si la carte du lecteur est assez large (pas l'écran : sur iPad en deux colonnes, la
   carte est étroite) ; sinon l'un sous l'autre, et « Partager l'épisode » passe sous le quiz */
.lecteur-pied{container-type:inline-size}
@container (min-width:500px){.lecteur-pied .sommaire-fiche{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:499px){.lecteur-pied .pa-btn.pa-partager{flex:1 1 100%;justify-content:center}}
.lecteur-pied .sommaire-fiche .sf-titre{grid-column:1/-1;color:var(--accent)}
.lecteur-pied .sommaire-fiche a{display:flex;align-items:flex-start;gap:.6rem;min-height:0;padding:.7rem .8rem;border:1px solid var(--border-2);border-radius:8px}
.lecteur-pied .sommaire-fiche a svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--accent)}
.lecteur-pied .sommaire-fiche a svg:not([fill]){fill:currentColor}
.lecteur-pied .sommaire-fiche a strong{display:block;font-weight:500;font-size:.9rem}
.lecteur-pied .sommaire-fiche a span span{display:block;font-size:.76rem;color:var(--text-dim);margin-top:.1rem}
/* 18/10/2026, Alexandre : vignette plus grande, en haut de la colonne (elle flottait au milieu, avec du vide au-dessus) */
@media(min-width:900px){.portrait-grille{grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:3rem;align-items:start}.portrait-visuel{max-width:600px;margin-top:2.2rem}}
/* « Partager l'épisode » s'allume trois fois puis se tait (18/10/2026). Seuls transform et opacity bougent, sur un
   calque à part : la carte graphique s'en charge, rien n'est recalculé dans la page. Rien si l'appareil demande moins
   d'animations. */
.lecteur-pied .pa-partager{position:relative;isolation:isolate}
.lecteur-pied .pa-partager::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--accent);box-shadow:0 0 14px #c4a26599;opacity:0;pointer-events:none;will-change:transform,opacity;animation:partage-pouls 1.6s ease-out 4s 3}
@keyframes partage-pouls{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.lecteur-pied .pa-partager.rappel::after{animation:partage-pouls2 1.6s ease-out .3s 3}
@keyframes partage-pouls2{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.lecteur-pied .pa-partager::after,.lecteur-pied .pa-partager.rappel::after{animation:none}}

/* Quiz : bonne ou mauvaise réponse, impossible de se tromper (18/10/2026, Alexandre : « ça doit être beaucoup plus
   clair »). Bandeau vert ou rouge avec ✓ / ✗, étiquette sur les réponses, zone du retour encadrée. Animations en
   transform et opacity seulement. */
.qz-reponse{position:relative}
.qz-etiquette{margin-left:auto;flex:none;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px}
.qz-reponse.juste .qz-etiquette{background:var(--accent2-clair);color:var(--bg)}
.qz-reponse.faux .qz-etiquette{background:#d97272;color:var(--bg)}
.qz-reponse.juste{border-width:2px;background:#5b8a7240}
.qz-reponse.faux{border-width:2px;border-color:#d97272;background:#c4656536}
.qz-reponse.autre{opacity:.35}
.qz-retour{padding:1rem 1.1rem 1.1rem;border:1px solid var(--border-2);background:#ffffff06}
.reussi .qz-retour{border-color:#86b59c66;background:#5b8a7214}
.rate .qz-retour{border-color:#d9727266;background:#c465650f}
.qz-verdict{display:flex;align-items:center;gap:.85rem;margin:-1rem -1.1rem 1rem;padding:.9rem 1.1rem;font-size:1.5rem;line-height:1.2}
.reussi .qz-verdict{background:#5b8a7240;color:#bfe3cd}
.rate .qz-verdict{background:#c4656540;color:#f4c4c4}
.qz-verdict-icone{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-body);font-size:1.4rem;font-weight:700;color:var(--bg);animation:qz-pop .5s var(--ease) both}
.reussi .qz-verdict-icone{background:var(--accent2-clair)}
.rate .qz-verdict-icone{background:#d97272}
.qz-verdict-texte b{display:block;font-weight:700}
.qz-verdict-sous{display:block;font-family:var(--ff-body);font-size:1rem;margin-top:.2rem;color:var(--text)}
.rate .qz-verdict strong{color:#fff}
@keyframes qz-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.qz-verdict-icone{animation:none}}
.reussi .qz-verdict-texte{font-weight:700}

/* Verdict sous la question, réponses écartées retirées (18/10/2026) */
.qz-verdict{margin:0 0 .8rem;border:1px solid transparent;animation:qz-arrive .4s var(--ease)}
.reussi .qz-verdict{border-color:#86b59c88}
.rate .qz-verdict{border-color:#d9727288}
.qz-reponse.autre{display:none}
.qz-retour{margin-top:.8rem}
@media (prefers-reduced-motion:reduce){.qz-verdict{animation:none}}

/* Fin du quiz (18/10/2026, Alexandre) : « Fermer » gros et écrit en toutes lettres ; chaque bouton dit ce qu'il fait */
.qf-fermer{width:auto;height:48px;padding:0 1.1rem 0 .85rem;gap:.45rem;border-radius:999px;border-color:var(--accent);color:var(--text);font-family:var(--ff-body);font-size:.95rem}
.qf-fermer svg{width:20px;height:20px}
.qf-fermer:hover,.qf-fermer:focus-visible{background:var(--accent);color:var(--bg)}
.qz-fin-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;align-items:stretch}
.qz-fin-actions .btn{flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;padding:.85rem 1rem;border-radius:10px;text-align:left;text-transform:none;letter-spacing:normal;font-family:var(--ff-body)}
.qz-fin-btn-titre{font-size:1rem;font-weight:600}
.qz-fin-btn-sous{font-size:.8rem;opacity:.75;line-height:1.35}
.qz-fin-actions .qz-grand{grid-column:1/-1;justify-self:center;margin-top:.3rem}

/* Écran de fin d'écoute (18/10/2026) */
.fin-ecoute{margin:0 0 1.1rem;padding:1rem;border:1px solid #c4a26599;border-radius:12px;background:#c4a26514;animation:qz-arrive .5s var(--ease)}
.fin-ecoute[hidden]{display:none}
.fe-titre{font-family:var(--ff-display);font-size:1.2rem;line-height:1.3;margin:0 0 .8rem}
.fe-titre em{color:var(--accent-clair)}
.fe-partager,.fe-choix{display:flex;align-items:center;gap:.75rem;width:100%;padding:.8rem .95rem;border-radius:10px;text-align:left;text-decoration:none;cursor:pointer;font-family:var(--ff-body);transition:background .25s,border-color .25s,transform .25s}
.fe-partager{border:0;background:var(--accent);color:var(--bg)}
.fe-partager:hover,.fe-partager:focus-visible{background:var(--accent-clair);transform:translateY(-1px)}
.fe-partager svg,.fe-choix svg{width:22px;height:22px;flex:none}
.fe-partager strong,.fe-choix strong{display:block;font-size:1rem;font-weight:600}
.fe-partager span span,.fe-choix span span{display:block;font-size:.8rem;opacity:.8;margin-top:.1rem}
.fe-suites{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.5rem}
@container (min-width:500px){.fe-suites{display:flex}.fe-suites>*{flex:1 1 0;min-width:0}}
.fe-choix{border:1px solid var(--border-2);background:none;color:var(--text)}
.fe-choix svg{color:var(--accent)}
.fe-choix:hover,.fe-choix:focus-visible{border-color:var(--accent)}
.fe-choix[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.fin-ecoute{animation:none}}
.fin-ecoute:not([hidden]) ~ .portrait-actions{display:none}

/* Voix du quiz (18/10/2026, Alexandre : « qu'on entende les voix et les corrections ») */
.qz-hp{width:auto;border-radius:999px;gap:.4rem;padding:0 .8rem 0 .6rem;font-family:var(--ff-body);font-size:.82rem;color:var(--text)}
.qz-hp[aria-pressed="true"]{border-color:#c4a26599;color:var(--accent-clair)}
@media (max-width:420px){.qz-hp-txt{display:none}.qz-hp{padding:0;width:42px}}
.qz-mode-ligne .qz-hp{width:auto;padding:0 .6rem}
.qz-choix-voix{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--border);background:#c4a26512}
.qz-choix-voix p{flex:1 1 100%;margin:0;font-size:.9rem}
.qz-choix-voix button{min-height:38px;padding:.35rem .9rem;border-radius:999px;font-family:var(--ff-body);font-size:.88rem;cursor:pointer}
.qz-cv-avec{border:0;background:var(--accent);color:var(--bg);font-weight:600}
.qz-cv-sans{border:1px solid var(--border-2);background:none;color:var(--text)}
.qz-verdict{flex-wrap:wrap}
.qz-voix-bandeau{flex:1 1 100%;margin-top:.2rem;justify-content:flex-start;background:#00000033;border-color:transparent;color:var(--text);font-size:.92rem;font-family:var(--ff-body)}
@container (min-width:520px){.qz-voix-bandeau{flex:0 0 auto;margin:0 0 0 auto}}
.qz-onde{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-left:.3rem}
.qz-onde i{width:3px;height:30%;border-radius:2px;background:currentColor;opacity:.5}
.qz-voix-bandeau.joue .qz-onde i{opacity:1;animation:qz-onde .9s ease-in-out infinite}
.qz-voix-bandeau.joue .qz-onde i:nth-child(2){animation-delay:.15s}.qz-voix-bandeau.joue .qz-onde i:nth-child(3){animation-delay:.3s}.qz-voix-bandeau.joue .qz-onde i:nth-child(4){animation-delay:.45s}
@keyframes qz-onde{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.6)}}
.qz-onde i{transform-origin:bottom}
.qz-suivante.qz-attend{opacity:.55}
.qz-suivante.qz-pret{animation:qz-pop .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.qz-voix-bandeau.joue .qz-onde i,.qz-suivante.qz-pret{animation:none}}

/* « À écouter aujourd'hui » (18/10/2026) : un seul ▶, en pastille avec la durée, en haut à droite de la vignette (il
   cachait le nom) ; « La fiche complète » et « Partager » de même hauteur, dans la colonne du texte */
.du-jour .dj-rond{top:.8rem;right:.8rem;bottom:auto;width:auto;height:40px;padding:0 .9rem 0 .75rem;gap:.45rem;display:inline-flex;align-items:center;border-radius:999px;font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.04em}
.du-jour .dj-rond svg{width:14px;height:14px;margin:0}
.du-jour .dj-texte .dj-boutons{margin-top:1.2rem;grid-column:auto}
.du-jour .dj-boutons{flex-wrap:wrap;gap:.45rem}.du-jour .dj-boutons .card-ouvrir,.du-jour .dj-boutons .card-partager{min-height:42px;padding:0 .75rem;font-size:.84rem;flex:0 0 auto;white-space:nowrap}
.du-jour .dj-boutons .card-ouvrir{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.du-jour .dj-boutons .card-ouvrir:hover{background:var(--accent-clair)}
@media (max-width:600px){.du-jour .dj-rond{height:34px;font-size:.7rem;padding:0 .7rem 0 .6rem;top:.5rem;right:.5rem}.du-jour .dj-boutons .card-ouvrir,.du-jour .dj-boutons .card-partager{flex:1 1 0;justify-content:center;padding:0 .7rem}}
@media (max-width:600px){.du-jour .dj-boutons{flex-wrap:wrap;margin-top:.8rem}.du-jour .dj-boutons .card-ouvrir,.du-jour .dj-boutons .card-partager{flex:1 1 auto;min-height:40px;font-size:.84rem}.du-jour .dj-rond{height:28px;font-size:.62rem;padding:0 .55rem 0 .45rem;gap:.3rem;top:.4rem;right:.4rem}.du-jour .dj-rond svg{width:11px;height:11px}}

/* 19/10/2026 : l'enquête seule en haut de la page portrait (l'abonnement n'y est plus) */

.intro-conv .transcription-seule{white-space:nowrap;color:var(--accent-clair)}

/* 19/10/2026, Alexandre : le bouton ▶ durée sort de la vignette (il cachait le visage) et se pose dessous, CENTRÉ et
   plus visible ; les deux boutons (« Découvrir son portrait », « Partager ») ont la même largeur, l'un sous l'autre, et
   « Découvrir les N autres portraits » est centré dessous (« j'aime bien les boutons centrés »). */
.du-jour .dj-visuel{display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:0}
.du-jour .dj-rond{position:static;justify-content:center;border:0;cursor:pointer;min-width:62%;height:48px;padding:0 1.3rem;gap:.55rem;font-size:.92rem;box-shadow:0 8px 26px #000b,0 0 0 1px #e2c58a66}
.du-jour .dj-rond svg{width:16px;height:16px}
.du-jour .dj-texte .dj-boutons{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;max-width:20rem}
.du-jour .dj-texte .dj-boutons .card-ouvrir,.du-jour .dj-texte .dj-boutons .card-partager{width:100%;min-height:46px;justify-content:center;font-size:.9rem}
.du-jour .dj-tous{max-width:20rem;margin:.9rem 0 0;text-align:center}
@media (min-width:960px) and (max-width:1100px){.du-jour .dj-texte .dj-boutons .card-ouvrir,.du-jour .dj-texte .dj-boutons .card-partager{padding:0 .5rem;gap:.3rem;font-size:.8rem}}
@media (min-width:960px) and (max-width:1020px){.du-jour .dj-ouvrir svg{display:none}}
@media (max-width:600px){.du-jour .dj-visuel{gap:.55rem}.du-jour .dj-rond{min-width:100%;height:36px;font-size:.72rem;padding:0 .6rem;gap:.35rem}.du-jour .dj-rond svg{width:12px;height:12px}.du-jour .dj-texte .dj-boutons{max-width:none}.du-jour .dj-texte .dj-boutons .card-ouvrir,.du-jour .dj-texte .dj-boutons .card-partager{min-height:42px;font-size:.86rem}.du-jour .dj-tous{max-width:none;margin-top:.6rem}.du-jour .dj-tous a{font-size:.84rem}}

/* 19/10/2026, Alexandre : le rond ▶ qui apparaît au passage de la souris cachait le nom écrit sur la vignette. Il sort de
   l'image et se pose à droite de « Saison 2 · Portrait », à cheval sur le bas de la vignette. */
.card-inner{position:relative}
/* 44 px, à 3 px sous l'image : il tient entre la vignette et le nom, même pour un nom long sur iPad, où il reste affiché */
.card-inner > .card-cover-play{top:3px;right:1.5rem;bottom:auto;width:44px;height:44px}
.card-inner > .card-cover-play svg{width:16px;height:16px}

/* « Écouter la réponse » bien visible (19/10/2026) : fond doré léger, texte plus gros et gras, il s'allume une fois */
.qz-ecouter.qz-passage{min-height:48px;padding:.45rem 1.1rem .45rem .5rem;background:#c4a26526;border:1.5px solid var(--accent);color:var(--text);font-size:1rem;font-weight:600;animation:qz-appel 1.6s ease-out .6s 2}
.qz-ecouter.qz-passage svg{width:32px;height:32px;padding:8px}
.qz-ecouter.qz-passage:hover,.qz-ecouter.qz-passage:focus-visible{background:#c4a26545}
.qz-ecouter.qz-passage .qz-t{color:var(--accent-clair);font-weight:400}
@keyframes qz-appel{0%{box-shadow:0 0 0 0 #c4a265aa}100%{box-shadow:0 0 0 14px #c4a26500}}
@media (prefers-reduced-motion:reduce){.qz-ecouter.qz-passage{animation:none}}
@media (max-width:600px){.qz-actions .qz-passage{width:100%;justify-content:flex-start}}
/* « Revenir au quiz » beaucoup plus visible (20/10/2026, Alexandre : « il faut qu'il soit beaucoup plus gros pour qu'on
   ne puisse pas le rater ») : bouton doré plein, large, qui respire ; toujours AU-DESSUS du lecteur et de la playlist
   (avant, sur téléphone, il passait dessous quand on écoutait un passage pendant le quiz) ; « remonter » passe au-dessus */
.quiz-revenir{z-index:1002;width:min(560px,calc(100vw - 1.5rem));max-width:none;border:0;border-radius:18px;background:linear-gradient(135deg,var(--accent-clair),var(--accent));color:var(--bg);box-shadow:0 18px 50px #000d,0 0 0 0 #c4a26599;overflow:hidden;transition:transform .45s var(--ease),opacity .35s,bottom .5s var(--ease)}
.quiz-revenir.visible{animation:quiz-revenir-souffle 2.6s ease-in-out 1s infinite}
@keyframes quiz-revenir-souffle{0%,100%{box-shadow:0 18px 50px #000d,0 0 0 0 #c4a26599}50%{box-shadow:0 18px 50px #000d,0 0 0 12px #c4a26500}}
.quiz-revenir:hover{background:linear-gradient(135deg,#f3dca8,var(--accent-clair))}
.quiz-revenir-ouvrir{flex:1;min-width:0;gap:1rem;padding:1rem 1.1rem;min-height:76px}
.quiz-revenir-icone{width:50px;height:50px;font-size:1.5rem;background:var(--bg);color:var(--accent-clair)}
.quiz-revenir strong{font-size:1.4rem;line-height:1.15;color:var(--bg)}
.quiz-revenir strong+span{font-size:.9rem;color:#1a1408;opacity:.85;margin-top:.15rem}
.quiz-revenir-quitter{color:#1a1408;border-left:1px solid #0000002e;padding:0 1rem}
.quiz-revenir-quitter:hover{color:var(--bg);background:#00000014}
body.lecteur-ouvert .quiz-revenir{bottom:calc(150px + var(--safe-bottom))}
body.lecteur-ouvert:not(.mode-audio) .quiz-revenir{bottom:calc(250px + var(--safe-bottom))}
body.avec-playlist .quiz-revenir,body.avec-playlist.lecteur-ouvert .quiz-revenir,body.avec-playlist.lecteur-ouvert:not(.mode-audio) .quiz-revenir{bottom:calc(var(--lecteur-h,0px) + 74px + var(--safe-bottom))}
body.pc-ecoute .quiz-revenir{bottom:calc(86px + var(--safe-bottom))}
body.quiz-a-reprendre .remonter{bottom:calc(1.1rem + 108px + var(--safe-bottom))}
body.quiz-a-reprendre.lecteur-ouvert .remonter{bottom:calc(150px + 108px + var(--safe-bottom))}
body.quiz-a-reprendre.lecteur-ouvert:not(.mode-audio) .remonter{bottom:calc(250px + 108px + var(--safe-bottom))}
body.quiz-a-reprendre.avec-playlist .remonter{bottom:calc(var(--lecteur-h,0px) + 74px + 108px + var(--safe-bottom))}
body.quiz-a-reprendre.pc-ecoute .remonter{bottom:calc(86px + 108px + var(--safe-bottom))}
body.quiz-a-reprendre{padding-bottom:calc(110px + var(--safe-bottom))}
@media (max-width:520px){.quiz-revenir strong{font-size:1.22rem}.quiz-revenir-ouvrir{padding:.9rem .9rem;gap:.8rem}.quiz-revenir-icone{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.quiz-revenir.visible{animation:none}}

/* 20/10/2026, Alexandre : « Les VIP · Very Internet People » se voient sans cacher l'image (une ligne dorée sous la vignette) */
.card-number.card-vip{color:var(--accent)}.card-number.card-vip b{display:inline-block;padding:1px 7px;border-radius:999px;background:linear-gradient(90deg,#c4a265,#e6cf98);color:#141008;font-weight:700;letter-spacing:.08em;margin-right:2px}
/* dans .portrait-visuel (carré, positionné) : posé SOUS l'image, hors du flux, et la place réservée par la marge du dessous */
.portrait-visuel.avec-vip{margin-bottom:76px}.portrait-visuel .vip-bandeau{position:absolute;left:0;right:0;top:calc(100% + 26px);margin:0}
.vip-bandeau{display:flex;align-items:center;justify-content:center;gap:10px;max-width:520px;margin:30px auto 0;padding:9px 12px;border-radius:8px;background:linear-gradient(90deg,#c4a265,#e6cf98,#c4a265);color:#141008;letter-spacing:.08em}
.vip-bandeau b{font:700 1.3rem/1 var(--ff-display);letter-spacing:.06em}.vip-bandeau span{font-size:.8rem;text-transform:uppercase;font-weight:700}
@media(max-width:700px){.portrait-visuel.avec-vip{margin-bottom:58px}.portrait-visuel .vip-bandeau{top:calc(100% + 18px)}.vip-bandeau{max-width:min(64vw,300px);margin-top:20px;gap:7px;padding:7px 8px}.vip-bandeau b{font-size:1.05rem}.vip-bandeau span{font-size:.62rem;letter-spacing:.06em;white-space:nowrap}}
@media(max-width:619px){.episodes-grid .card-number.card-vip{display:flex;font-size:.52rem;letter-spacing:.1em;margin:0 0 .45rem;white-space:nowrap}.episodes-grid .card-number.card-vip::after{display:none}.episodes-grid .card-vip .cv-long{display:none}}
/* 20/10/2026, Alexandre : « une infobulle avec un petit i » : au survol, au clavier (Tab) et au toucher (focus) */
.vip-bandeau{position:relative}.vip-info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid #141008;font:italic 700 13px/1 Georgia,serif;color:#141008;cursor:help;position:relative;flex:none;outline:none}
.vip-info:focus-visible{box-shadow:0 0 0 3px #fff8}
.vip-bulle{position:absolute;bottom:calc(100% + 12px);right:-10px;width:240px;max-width:78vw;padding:10px 12px;border-radius:10px;background:#141008;color:#f3e9d2;border:1px solid #c4a26599;font:400 13px/1.45 system-ui,sans-serif;letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 8px 24px #000a;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:20;pointer-events:none}
.vip-bulle b{display:block;font-weight:700;color:#e6cf98;margin-bottom:3px}
.vip-bulle::after{content:"";position:absolute;top:100%;right:15px;border:7px solid transparent;border-top-color:#141008}
.vip-info:hover .vip-bulle,.vip-info:focus .vip-bulle,.vip-info:focus-within .vip-bulle{opacity:1;visibility:visible;transform:none}
.vip-bandeau .vip-info{font:italic 700 13px/1 Georgia,serif;text-transform:none;letter-spacing:0}
.vip-bandeau .vip-bulle{font:400 13px/1.45 system-ui,-apple-system,sans-serif;text-transform:none;letter-spacing:0;font-style:normal}
.vip-bandeau .vip-bulle b{display:block;font:700 13px/1.3 system-ui,-apple-system,sans-serif;letter-spacing:.02em;color:#e6cf98;margin-bottom:3px}

/* Infobulles « i » génériques (20/10/2026) : sources vérifiées, prédiction de Lia, Ada/Alan/Lia */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font:italic 700 12px/1 Georgia,serif;text-transform:none;letter-spacing:0;cursor:help;position:relative;vertical-align:middle;margin-left:4px;outline:none}
.info-i:focus-visible{box-shadow:0 0 0 3px var(--accent-glow)}
.info-bulle{position:absolute;bottom:calc(100% + 10px);left:50%;width:260px;max-width:80vw;transform:translate(-50%,4px);padding:10px 12px;border-radius:10px;background:#141008;color:#f3e9d2;border:1px solid #c4a26599;font:400 13px/1.45 system-ui,-apple-system,sans-serif;font-style:normal;letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 8px 24px #000a;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:30;pointer-events:none;white-space:normal}
.info-bulle b{display:block;font:700 13px/1.3 system-ui,-apple-system,sans-serif;color:#e6cf98;margin-bottom:3px;letter-spacing:.02em}
.info-bulle::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:#141008}
.info-i:hover .info-bulle,.info-i:focus .info-bulle{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* site.js place la bulle (left, width, --fleche) pour qu'elle reste dans l'écran ; sans JavaScript : centrée */
.info-bulle.placee{transform:translateY(4px)}.info-i:hover .info-bulle.placee,.info-i:focus .info-bulle.placee{transform:none}.info-bulle.placee::after{left:var(--fleche,50%)}
.info-i.ouverte .info-bulle,.vip-info.ouverte .vip-bulle{opacity:1;visibility:visible}.info-i.ouverte .info-bulle.placee{transform:none}.info-i.ouverte .info-bulle:not(.placee){transform:translate(-50%,0)}.vip-info.ouverte .vip-bulle{transform:none}
/* 20/10/2026 : la bulle garde son propre style partout (le titre du lecteur est en petites capitales) ; le lecteur la laisse dépasser */
.info-i{text-transform:none!important;font:italic 700 12px/1 Georgia,serif!important;letter-spacing:0!important}
.info-i .info-bulle{display:block!important;font:400 13px/1.45 system-ui,-apple-system,sans-serif!important;text-transform:none!important;letter-spacing:0!important;color:#f3e9d2!important;font-style:normal!important}
.info-i .info-bulle b{display:block!important;font:700 13px/1.3 system-ui,-apple-system,sans-serif!important;color:#e6cf98!important;text-transform:none!important;letter-spacing:.02em!important}
.lecteur:has(.info-i){overflow:visible}

/* 21/10/2026, Alexandre : « qui je suis », sous le concept en une minute et demie, avec le lien vers le vibe coding */
.qui-alexandre{margin-top:.8rem;padding-top:.75rem;border-top:1px solid #ffffff12;font-size:.8rem;line-height:1.5;color:var(--text-dim);font-weight:300}
.qui-alexandre strong{color:var(--text);font-weight:500}
.qui-alexandre a{color:var(--accent);text-decoration:none;white-space:nowrap;border-bottom:1px solid #c4a26555}
.qui-alexandre a:hover{border-color:var(--accent)}

/* page des annonceurs (24/10/2026 ; version 2 le même soir : mur de vignettes, son de 30 s, chiffres, étapes) */
.ann-hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:6rem var(--gouttiere) 3rem;border-bottom:1px solid var(--border)}
.ann-mur{position:absolute;inset:-12% -10%;z-index:-2;display:flex;flex-direction:column;justify-content:center;gap:14px;transform:rotate(-8deg);opacity:.5;pointer-events:none}
.ann-rang{display:flex;gap:14px;width:max-content;animation:ann-glisse 140s linear infinite}
.ann-rang:nth-child(2){animation-direction:reverse;animation-duration:170s}
.ann-rang img{width:150px;height:150px;object-fit:cover;flex-shrink:0;filter:grayscale(.35) contrast(1.05);border:1px solid #ffffff10}
@keyframes ann-glisse{to{transform:translateX(-50%)}}
.ann-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 75% at 35% 45%,#0a0a0cf2 0%,#0a0a0cc4 55%,#0a0a0c8c 100%),linear-gradient(180deg,#0a0a0ce6 0%,#0a0a0c00 25%,#0a0a0c00 75%,#0a0a0c 100%)}
.ann-hero::after{content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 40% 45% at 30% 40%,#c4a2651f 0%,transparent 70%);animation:respire 14s ease-in-out infinite alternate}
.ann-hero-dedans{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
@media(min-width:960px){.ann-hero-dedans{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem}}
.ann-hero .section-title{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;margin-bottom:1rem}
.ann-hero .section-desc{font-size:1.1rem;margin-bottom:1.6rem}
.ann-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.ann-son{grid-area:auto;max-width:560px;padding:1rem 1.1rem;border:1px solid #c4a265aa;border-radius:20px;background:linear-gradient(150deg,#1d1810,#121014 70%);box-shadow:0 14px 40px #0009,0 0 0 4px #c4a26514}
.ann-son .lia-medaillon .lia-rond{position:absolute;right:-6px;bottom:-6px;width:52px;height:52px;background:var(--accent);color:var(--bg);border:2px solid var(--bg);box-shadow:0 4px 12px #000a}
.ann-son .lia-medaillon .lia-rond svg{width:18px;height:18px}
.ann-son .lia-bouton:hover .lia-medaillon .lia-rond{background:var(--accent-clair);transform:scale(1.08)}
@media(max-width:700px){.ann-hero{padding-top:5rem}.ann-hero-dedans{gap:1.4rem}.ann-hero-actions .btn-ghost{display:none}.ann-hero .section-desc{margin-bottom:1.2rem}}
.ann-son .lia-citation [data-t]{transition:color .4s,opacity .4s}
.ann-chiffres{max-width:1200px;margin:0 auto;padding:3rem var(--gouttiere) 1rem}
.ann-chiffres ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
@media(min-width:700px){.ann-chiffres ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ann-chiffres li{background:var(--bg);padding:1.4rem 1rem 1.3rem;text-align:center;display:flex;flex-direction:column;gap:.25rem}
.ann-chiffres li:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:700px){.ann-chiffres li:last-child:nth-child(odd){grid-column:auto}}
.ann-plus{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim)}
.ann-nombre{font-family:var(--ff-display);font-size:clamp(1.9rem,4.5vw,2.7rem);font-weight:700;color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
.ann-libelle{font-size:.88rem;color:var(--text-dim)}
.ann-chiffres-note{margin-top:.8rem;text-align:center;font-size:.8rem;color:var(--text-dim)}
.ann-section{max-width:1200px;margin:0 auto;padding:3.5rem var(--gouttiere) 0}
.ann-section .section-title{margin-bottom:1.6rem}
.ann-etapes{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;counter-reset:etape}
@media(min-width:800px){.ann-etapes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ann-etapes li{position:relative;padding:1.5rem 1.4rem;border:1px solid var(--border);background:var(--bg-card)}
.ann-etape-n{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-family:var(--ff-display);font-size:1.15rem;margin-bottom:.9rem}
.ann-etapes h3{font-family:var(--ff-display);font-size:1.2rem;margin-bottom:.5rem}
.ann-etapes p{color:var(--text-dim);font-size:.92rem;line-height:1.6;font-weight:300}
.annonceurs-contact{margin:0 0 4rem}
@media(prefers-reduced-motion:reduce){.ann-rang,.ann-hero::after{animation:none}}

/* vidéo de présentation (bandeau et page « Réseaux sociaux », 24/10/2026) */
.video-cadre{position:relative;aspect-ratio:16/9;background:#000;border:1px solid #c4a2654d;overflow:hidden}
.video-cadre.verticale{aspect-ratio:9/16;max-width:360px}
.video-cadre video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.video-jouer{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:0;background:var(--accent);color:#0a0a0c;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 8px #c4a26533,0 12px 40px #000b;transition:transform .3s var(--ease),background .3s}
.video-jouer svg{width:28px;height:28px;margin-left:4px;fill:currentColor}
.video-jouer:hover{transform:scale(1.07);background:var(--accent-clair)}
.video-jouer:focus-visible{outline:2px solid #fff;outline-offset:4px}
.video-cadre.lancee .video-jouer,html:not(.js) .video-jouer{display:none}
.video-carte .video-tete{margin:0 0 .65rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;line-height:1.25}
.video-carte .video-tete .lia-nouveau{flex:1 1 100%}
.video-carte .lia-texte figcaption a{color:var(--accent)}
.hero .video-carte .lia-texte{margin-left:0;margin-top:.75rem}
@media(prefers-reduced-motion:reduce){.video-jouer{transition:none}}

/* page « Réseaux sociaux » (24/10/2026) */
.reseaux-page{max-width:1100px;margin:0 auto;padding:6.5rem var(--gouttiere) 4rem}
.reseaux-page .section-desc{margin-bottom:2rem;max-width:760px}
.reseaux-bloc{margin:0 0 3.5rem;padding:0;max-width:none}
.reseaux-bloc>h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.15;margin:0 0 .6rem}
.reseaux-bloc>h2 em{color:var(--accent)}
.reseaux-duree,.teaser-duree{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);vertical-align:middle;margin-left:.4rem}
.reseaux-intro{color:var(--text-dim);max-width:760px;margin:0 0 1.2rem;line-height:1.6}
.reseaux-bloc .video-cadre{max-width:900px}
.video-formats{margin:.9rem 0 0;font-size:.95rem}
.video-formats a,.teaser-avec a,.teaser-lien a{color:var(--accent);text-decoration:none;border-bottom:1px solid #c4a26566}
.video-formats a svg,.teaser-lien a svg{width:14px;height:14px;vertical-align:-2px}
.promo-texte{margin:1rem 0 0;max-width:900px;border-top:1px solid var(--border)}
.promo-texte summary{cursor:pointer;padding:.8rem 0;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.promo-texte p{margin:0 0 .7rem;line-height:1.65;color:var(--text-dim)}
.promo-texte p b{color:var(--text);font-weight:600}
.teasers{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:900px){.teasers{grid-template-columns:repeat(3,1fr)}}
.teaser-carte{display:flex;flex-direction:column;gap:.8rem;padding:1.3rem 1.2rem 1rem;background:var(--bg-card);border:1px solid var(--border);min-width:0}
.teaser-tete h3{font-family:var(--ff-display);font-weight:500;font-size:1.35rem;line-height:1.2;margin:.3rem 0 0}
.teaser-tete .teaser-duree{margin:0}
.teaser-accroche{margin:0;line-height:1.55;color:var(--text-dim)}
.teaser-carte audio{width:100%}
/* lecteur d'un son court (25/10/2026) */
.ls{--p:0;display:flex;align-items:center;gap:.85rem;padding:.7rem .85rem .7rem .7rem;border:1px solid #c4a2654d;background:linear-gradient(150deg,#17140fe6,#0c0c0fd9);border-radius:999px}
.ls audio{display:none}
html:not(.js) .ls{display:block;border:0;background:none;padding:0}
html:not(.js) .ls audio{display:block;width:100%}
html:not(.js) .ls-jouer,html:not(.js) .ls-milieu,html:not(.js) .ls-temps{display:none}
.ls-jouer{flex:0 0 auto;position:relative;width:48px;height:48px;border-radius:50%;border:0;padding:0;background:var(--accent);color:#0a0a0c;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 5px #c4a26526;transition:transform .25s var(--ease),background .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.ls-jouer svg{width:20px;height:20px;fill:currentColor}
.ls-jouer .i-pause{display:none}
.ls-jouer:not(.joue) .i-lecture{margin-left:3px}
.ls-jouer.joue .i-lecture{display:none}
.ls-jouer.joue .i-pause{display:block}
.ls-jouer:hover{background:var(--accent-clair);transform:scale(1.06)}
.ls-jouer:active{transform:scale(.95)}
.ls-jouer:focus-visible,.ls-barre:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ls.joue .ls-jouer{box-shadow:0 0 0 5px #c4a26540,0 0 24px var(--accent-glow)}
.ls-milieu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.45rem}
.ls-titre{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-barre{position:relative;height:32px;margin:-13px 0;cursor:pointer;touch-action:none}
.ls-barre::before,.ls-fait{content:'';position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.ls-barre::before{right:0;background:#ffffff1f}
.ls-fait{width:calc(var(--p) * 100%);background:linear-gradient(90deg,#a8874d,var(--accent-clair))}
.ls-poignee{position:absolute;top:50%;left:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#f3dcaa;box-shadow:0 0 0 4px #c4a26533;transform:scale(0);transition:transform .2s var(--ease)}
.ls.joue .ls-poignee,.ls.glisse .ls-poignee,.ls-barre:hover .ls-poignee,.ls-barre:focus-visible .ls-poignee{transform:scale(1)}
.ls-temps{flex:0 0 auto;font-family:var(--ff-mono);font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.ls-ecoule{color:var(--text)}
@media(prefers-reduced-motion:reduce){.ls-jouer,.ls-poignee{transition:none}}
.teaser-avec{margin:0;font-size:.92rem;line-height:1.6}
.teaser-avec span{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faible);margin-right:.3rem}
.teaser-lien{margin:0;font-size:.92rem}
.teaser-carte .promo-texte{margin-top:auto}
.reseaux-page .partage{margin:0 0 2.5rem}
/* ligne discrète vers la page des annonceurs, en fin de « Le projet » (25/10/2026) */
.projet-annonceurs{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--border);font-size:.92rem;color:var(--text-dim)}
.projet-annonceurs a{color:var(--accent);text-decoration:none;border-bottom:1px solid #c4a26566;white-space:nowrap}
.projet-annonceurs a:hover{color:var(--accent-clair);border-bottom-color:var(--accent-clair)}
/* 27/10/2026 : « Partage cet épisode » sous la vignette (et sous le bandeau VIP) de la page portrait */
.portrait-colonne{min-width:0}
.pv-partage{display:flex;justify-content:center;max-width:520px;margin:2rem auto 0}
.portrait-visuel.avec-vip+.pv-partage{margin-top:0}
@media(min-width:900px){.pv-partage{max-width:600px}}
.pv-partage .pa-btn.pa-partager{margin:0}