/* =========================================================
   AXLSTONE — maquette
   La tagline EST la direction artistique :
   trois humeurs, trois mondes, un interrupteur —
   drôle / mais un peu (l'entre-deux neutre) / triste.
   Tout le design passe par les tokens ci-dessous —
   pour changer la palette, on ne touche que ce bloc.
   ========================================================= */
:root{
  /* --- humeur « drôle » (par défaut) : rétro 1972, solaire --- */
  --fond:#F6E7C9;
  --fond-2:#F0DCAE;
  --encre:#57301F;
  --encre-douce:#9A6B4F;
  --accent:#E8622C;        /* orange brûlé */
  --accent-2:#E8A33C;      /* moutarde */
  --accent-3:#7B7A36;      /* olive */
  --carte:#FBEFD3;
  --trait:#DCC08D;
  --r-carte:150px 150px 16px 16px;  /* arches seventies */
  --r-doux:24px;                    /* arrondi généreux des autres cartes */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --corps:'Karla','Helvetica Neue',sans-serif;
  --lit:'Newsreader',Georgia,serif;
  /* la carte du visual novel : sombre quelle que soit l'humeur (c'est voulu),
     mais sa nuit se teinte aux couleurs de l'humeur en cours */
  --vn-fond:#2A1A10;                 /* nuit chaude, café brûlé */
  --vn-texte:#EFDFC6;
  --vn-titre:#FBEFD3;
  --vn-accent:#E8A33C;               /* moutarde, comme les pastilles du jour */
  --vn-halo:rgba(232,98,44,.20);     /* lueur orange brûlé */
}
[data-humeur="mais"]{
  /* --- humeur « mais un peu » : l'entre-deux, gris neutre ---
     comme le mot « mais » : ni drôle ni triste — papier, graphite, taupe, pierre */
  --fond:#E7E4DE;
  --fond-2:#DEDAD2;
  --encre:#33312E;
  --encre-douce:#7B776F;
  --accent:#5C5852;        /* graphite */
  --accent-2:#8D887E;      /* taupe */
  --accent-3:#B0AA9E;      /* pierre */
  --carte:#EFECE6;
  --trait:#C9C4BA;
  --vn-fond:#191817;                 /* nuit sans couleur, anthracite */
  --vn-texte:#DEDBD4;
  --vn-titre:#F0EEE9;
  --vn-accent:#B0AA9E;               /* pierre */
  --vn-halo:rgba(176,170,158,.16);
}
[data-humeur="triste"]{
  /* --- humeur « un peu triste » : bleu nuit, calme --- */
  --fond:#1B2430;
  --fond-2:#16202B;
  --encre:#DCE4EE;
  --encre-douce:#8C9BAD;
  --accent:#8FB4D9;        /* pluie */
  --accent-2:#B9A7E0;      /* lavande */
  --accent-3:#5E7A9B;      /* nuit d'orage */
  --carte:#222E3C;
  --trait:#33414F;
  --vn-fond:#14111A;                 /* nuit froide, violet d'encre */
  --vn-texte:#DCD4E8;
  --vn-titre:#EFEAF7;
  --vn-accent:#B9A7E0;               /* lavande */
  --vn-halo:rgba(185,167,224,.16);
  /* les formes (arches, arrondis) sont les mêmes dans toutes les humeurs :
     seule la couleur change — --r-carte et --r-doux héritent de :root */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color:var(--fond);
  /* 4. trame de demi-teinte très légère — un souvenir de papier imprimé */
  background-image:radial-gradient(color-mix(in srgb,var(--encre) 5%,transparent) 1.2px,transparent 1.4px);
  background-size:26px 26px;
  color:var(--encre);
  font-family:var(--corps);
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.62;
  transition:background 600ms ease,color 600ms ease;
}
::selection{background:var(--accent);color:var(--fond)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
.page{max-width:1060px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
section{padding:clamp(1.9rem,4.2vw,3rem) 0}

/* ---------- habillage des vides ---------- */
/* 1. une petite lune au trait ouvre chaque section — clin d'œil aux arches des émissions */
:is(.livres,.avenir,.videos,.stream,.ailleurs)::before{
  content:'';display:block;width:54px;height:27px;margin:0 auto clamp(1.5rem,3vw,2.2rem);
  border:4px solid var(--trait);border-bottom:none;border-radius:54px 54px 0 0;
  transition:border-color 600ms ease;
}
/* …et leurs couleurs suivent l'arc-en-ciel du héro, en boucle — par position,
   pour que le cycle tienne quand on réordonne les sections (le héro est la 1re) */
section:nth-of-type(4n+2)::before{border-color:var(--accent)}
section:nth-of-type(4n+3)::before{border-color:var(--accent-2)}
section:nth-of-type(4n)::before{border-color:var(--accent-3)}
section:nth-of-type(4n+1)::before{border-color:var(--encre-douce)}
/* 2. les sections sont numérotées comme les faces d'un vinyle */
.page{counter-reset:section}
:is(.livres,.avenir,.videos,.stream,.ailleurs){counter-increment:section}
:is(.livres,.avenir,.videos,.stream,.ailleurs) > .libelle::before{
  content:counter(section,decimal-leading-zero) ' · ';
  color:var(--encre-douce);
}

/* 6. une icône au trait en filigrane derrière chaque section,
   avec un léger parallaxe au défilement (--parallaxe est posé par main.js) */
:is(.livres,.avenir,.videos,.stream,.annexes,.reseaux){position:relative}
:is(.livres,.avenir,.videos,.stream,.annexes,.reseaux)::after{
  content:'';position:absolute;z-index:-1;right:-20px;top:24px;
  width:min(300px,30vw);aspect-ratio:1;
  background:var(--trait);opacity:.5;transition:background 600ms ease;
  -webkit-mask:var(--filigrane) center/contain no-repeat;
  mask:var(--filigrane) center/contain no-repeat;
  translate:0 calc(var(--parallaxe,0)*1px);
}
/* livre ouvert */
.livres{--filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E")}
/* sablier */
.avenir{--filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 7.828V2'/%3E%3C/svg%3E")}
/* clap de cinéma */
.videos{--filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z'/%3E%3Cpath d='m6.2 5.3 3.1 3.9'/%3E%3Cpath d='m12.4 3.4 3.1 4'/%3E%3Cpath d='M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E")}
/* ondes du direct */
.stream{--filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.2 19.1 19.1'/%3E%3C/svg%3E")}
/* globe des sites annexes */
.annexes{--filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E")}
/* arobase des réseaux */
.reseaux{--filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E")}

.libelle{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:1.2rem;text-wrap:balance}
.rev{opacity:0;transform:translateY(20px);transition:opacity 600ms ease,transform 600ms ease}
.rev.visible{opacity:1;transform:none}
/* …et dans une section qui apparaît, les cartes se lèvent l'une après
   l'autre — un décalé bien marqué, jamais de forme qui change */
.rev :is(.livre,.projet,.chaine,.site-carte,.rs-groupe){
  opacity:0;transform:translateY(34px);
  transition:opacity 650ms cubic-bezier(.2,1,.3,1),transform 650ms cubic-bezier(.2,1,.3,1);
}
.rev.visible :is(.livre,.projet,.chaine,.site-carte,.rs-groupe){opacity:1;transform:none}
.rev.visible :is(.livre,.projet,.chaine,.site-carte,.rs-groupe):nth-child(2){transition-delay:180ms}
.rev.visible :is(.livre,.projet,.chaine,.site-carte,.rs-groupe):nth-child(3){transition-delay:360ms}
.rev.visible :is(.livre,.projet,.chaine,.site-carte,.rs-groupe):nth-child(4){transition-delay:540ms}
.rev.visible :is(.livre,.projet,.chaine,.site-carte,.rs-groupe):nth-child(n+5){transition-delay:720ms}
/* pour qui préfère éviter les mouvements : tout est là, sans effet */
@media(prefers-reduced-motion:reduce){
  .rev,.rev :is(.livre,.projet,.chaine,.site-carte,.rs-groupe){opacity:1;transform:none;transition:none}
}

/* ---------- rayures seventies en haut de page ---------- */
.rayures{
  height:12px;
  background:repeating-linear-gradient(90deg,
    var(--accent) 0 25%,var(--accent-2) 25% 50%,
    var(--accent-3) 50% 75%,var(--encre-douce) 75% 100%);
  transition:background 600ms ease;
}

/* ---------- en-tête + interrupteur d'humeur ---------- */
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.4rem;flex-wrap:wrap;position:relative}
/* 5. deux étincelles au trait autour de l'interrupteur d'humeur —
   étincelles de soleil en drôle, étoiles de nuit en triste (même forme) */
.etincelle{
  position:absolute;width:15px;height:15px;fill:none;
  stroke:var(--accent-2);stroke-width:1.6;stroke-linejoin:round;
  animation:scintille 2.8s ease-in-out infinite alternate;
  transition:stroke 600ms ease;pointer-events:none;
}
.etincelle.e1{right:168px;top:8px}
.etincelle.e2{right:-4px;top:52px;width:11px;height:11px;animation-delay:1.4s}
@keyframes scintille{from{opacity:.35}to{opacity:1}}
.marque{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.marque span{color:var(--accent)}
.humeur-bloc{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.humeur-legende{
  font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-douce);transition:color 600ms ease;
}
.humeur{
  display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  background:var(--carte);border:1px solid var(--trait);border-radius:999px;
  padding:.35rem .5rem;cursor:pointer;color:var(--encre);
  transition:background 600ms ease,border-color 600ms ease;
}
/* le surlignage répond au doigt (120ms) — c'est la page qui prend son temps, pas lui */
.humeur .opt{padding:.3rem .8rem;border-radius:999px;transition:background 120ms ease,color 120ms ease}
.humeur .opt.actif{background:var(--accent);color:var(--fond)}

/* ---------- héro : la tagline en architecture + soleil d'époque ---------- */
.hero{padding-top:clamp(2.5rem,7vw,5rem);position:relative}
.soleil{
  position:absolute;right:0;top:clamp(1rem,4vw,2.5rem);
  width:clamp(110px,19vw,210px);pointer-events:none;
}
.soleil path{transition:fill 600ms ease,stroke 600ms ease}
.soleil .arc{transform-origin:50% 100%;animation:leve 900ms cubic-bezier(.2,1,.3,1) both}
.soleil .arc:nth-child(2){animation-delay:120ms}
.soleil .arc:nth-child(3){animation-delay:240ms}
.soleil .arc:nth-child(4){animation-delay:360ms}
@keyframes leve{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
@media(max-width:640px){.soleil{width:84px;opacity:.55}}
.hero h1{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,9vw,6.4rem);
  line-height:1.02;letter-spacing:-.025em;text-wrap:balance;
}
.hero h1 .drole{color:var(--accent)}
.hero h1 .mais{transition:color 600ms ease}
/* en humeur mais, le « mais » de la tagline prend l'accent — c'est lui la vedette */
[data-humeur="mais"] .hero h1 .mais{color:var(--accent)}
.hero h1 .triste{
  font-family:var(--lit);font-weight:400;font-style:italic;
  display:inline-block;transform:rotate(-1.6deg) translateY(.06em);
  color:var(--encre-douce);
}
.hero .presentation{margin-top:1.8rem;display:flex;align-items:center;gap:clamp(1.4rem,3.2vw,2.4rem)}
/* le portrait : un cercle cerclé des trois couleurs du soleil — les anneaux
   sont en box-shadow (ne poussent pas la mise en page), la marge leur fait la place.
   Même forme dans toutes les humeurs, seules les couleurs des anneaux changent. */
.hero .portrait{
  width:clamp(108px,14vw,148px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  flex-shrink:0;margin:19px;
  border:4px solid var(--accent);
  box-shadow:0 0 0 7px var(--fond),0 0 0 10px var(--accent-2),
             0 0 0 16px var(--fond),0 0 0 19px var(--accent-3);
  animation:portrait-leve 800ms 240ms cubic-bezier(.2,1,.3,1) both;
  transition:border-color 600ms ease,box-shadow 600ms ease,filter 600ms ease;
}
@keyframes portrait-leve{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* en humeur triste, la photo se voile légèrement — un souvenir plutôt qu'un présent */
[data-humeur="triste"] .hero .portrait{filter:grayscale(.35) brightness(.95)}
/* en humeur mais, elle passe au noir et blanc — ni chaude ni froide, en suspens */
[data-humeur="mais"] .hero .portrait{filter:grayscale(1)}
@media(max-width:560px){.hero .presentation{flex-direction:column;align-items:flex-start}}
.hero .qui{max-width:56ch;font-size:clamp(1.05rem,1.7vw,1.25rem)}
.hero .qui b{font-weight:700}
.hero .qui .metier{color:var(--encre-douce)}

/* ---------- livres : des objets, pas des liens ---------- */
.livres .rayon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:stretch}
@media(max-width:720px){.livres .rayon{grid-template-columns:1fr}}
.livre{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.couv{
  width:clamp(96px,12vw,130px);aspect-ratio:2/3;border-radius:3px 8px 8px 3px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.9rem .7rem;position:relative;flex-shrink:0;
  box-shadow:6px 8px 0 rgba(0,0,0,.12);
  transform:rotate(-2deg);transition:transform 300ms cubic-bezier(.2,1.6,.4,1);
}
.livre:hover .couv{transform:rotate(0) translateY(-4px)}
.couv::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;background:rgba(0,0,0,.18)}
.couv .c-titre{font-family:var(--lit);font-weight:500;font-size:.82rem;line-height:1.2}
.couv .c-nom{font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.couv-img{object-fit:cover;padding:0;display:block}
.couv-nuits{background:linear-gradient(160deg,#233046,#0F1622);color:#E7DFCB}
.couv-lhotel{background:linear-gradient(160deg,#8C2B2B,#4A1214);color:#F2E3D0}
.livre h3{font-family:var(--lit);font-weight:500;font-size:1.35rem;font-style:italic;margin-bottom:.2rem}
.livre .genre{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce);display:block;margin-bottom:.6rem}
.livre p{font-size:.95rem;margin-bottom:.8rem}
.lien{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent);
  padding-bottom:2px;transition:opacity 200ms ease;
}
.lien:hover{opacity:.7}
.liens{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- visual novel : l'aura sombre, quelle que soit l'humeur ---------- */
/* le bloc « chantiers » : la carte du projet phare et la liste des projets
   ne font qu'un seul objet — nuit au-dessus, papier en dessous */
.chantiers{
  border:1px solid var(--trait);border-radius:var(--r-doux);overflow:hidden;
  background:var(--carte);
  box-shadow:6px 8px 0 rgba(0,0,0,.12); /* la même ombre papier que les couvertures */
  transition:background 600ms ease,border-color 600ms ease;
}
.vn .cadre{
  background:var(--vn-fond);color:var(--vn-texte);
  padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.4rem,3vw,2.2rem);
  position:relative;overflow:hidden;
  /* même gabarit que les lignes de chantiers : contenu à gauche, état à droite */
  display:grid;grid-template-columns:1fr auto;gap:.1rem 1.4rem;align-items:center;
  transition:background 600ms ease,color 600ms ease;
}
.vn .libelle,.vn h2,.vn p{grid-column:1}
.vn .cadre::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 0%,var(--vn-halo),transparent 55%);
}
.vn .libelle{color:var(--vn-accent)}
.vn h2{color:var(--vn-titre);font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:.7rem}
.vn p{max-width:56ch;font-family:var(--lit);font-size:.98rem}
.vn .statut{
  grid-column:2;grid-row:1 / span 3;/* à droite du contenu, comme les lignes en dessous */
  display:inline-block;font-family:var(--corps);white-space:nowrap;
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--vn-accent);border-radius:999px;padding:.4rem .95rem;color:var(--vn-accent);
  transition:border-color 600ms ease,color 600ms ease;
}

/* ---------- à venir : le projet phare + la liste ---------- */
.projets{padding:0 clamp(1.4rem,3vw,2.2rem)}
/* chaque chantier : titre puis description en dessous, l'état à droite */
.projet{
  display:grid;grid-template-columns:1fr auto;gap:.1rem 1.2rem;align-items:center;
  padding:.9rem 0;border-bottom:1px solid var(--trait);
}
.projet:last-child{border-bottom:none}
.projet h3{font-family:var(--display);font-weight:600;font-size:1.05rem;grid-column:1}
.projet p{font-size:.9rem;color:var(--encre-douce);grid-column:1;margin:0}
.projet .etat{grid-column:2;grid-row:1 / span 2}
/* en écran étroit, la pastille d'état passe sous le texte au lieu de l'écraser */
@media(max-width:640px){
  .vn .cadre{grid-template-columns:1fr}
  .vn .statut{grid-column:1;grid-row:auto;justify-self:start;margin-top:.9rem}
  .projet{grid-template-columns:1fr}
  .projet .etat{grid-column:1;grid-row:auto;justify-self:start;margin-top:.4rem}
}
.etat{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:.3rem .8rem;white-space:nowrap;transition:border-color 600ms ease,color 600ms ease}

/* ---------- sites : cartes avec dernières publications ---------- */
.sites-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.site-carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-doux);padding:1.4rem;transition:background 600ms ease,border-color 250ms ease,border-radius 600ms ease}
.site-carte:hover{border-color:var(--accent)}
.site-carte h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:.15rem}
.site-carte .quoi{font-size:.8rem;color:var(--encre-douce);margin-bottom:1rem}
.pubs{
  list-style:none;border-top:1px solid var(--trait);margin-bottom:1rem;
  /* la plume au trait des billets (style Lucide) — peinte en accent via mask */
  --ic-plume:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/%3E%3Cline x1='16' x2='2' y1='8' y2='22'/%3E%3Cline x1='17.5' x2='9' y1='15' y2='15'/%3E%3C/svg%3E");
}
.pubs li{border-bottom:1px solid var(--trait)}
.pubs a{display:flex;gap:.55rem;align-items:baseline;text-decoration:none;padding:.6rem 0;font-size:.92rem;transition:color 200ms ease}
.pubs a::before{
  content:'';flex-shrink:0;width:13px;height:13px;align-self:center;
  background:var(--accent);transition:background 600ms ease;
  -webkit-mask:var(--ic-plume) center/contain no-repeat;
  mask:var(--ic-plume) center/contain no-repeat;
}
.pubs a:hover{color:var(--accent)}
.pubs .date{font-size:.7rem;color:var(--encre-douce);white-space:nowrap;margin-left:auto;padding-left:1rem}
/* carte sans billets : deux lignes fantômes au trait + un petit mot —
   un vide assumé, pas un chargement (donc aucune animation) ; le tout
   disparaît dès que de vrais billets arrivent (build ou flux.php) */
.pub-fantome{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem 0}
.pub-fantome span{display:block;height:8px;border-radius:4px;background:var(--trait);transition:background 600ms ease}
.pub-fantome span:first-child{width:58%}
.pub-fantome span:last-child{width:44px;opacity:.6}
.pub-fantome+.pub-fantome span:first-child{width:42%}
.pub-fantome+.pub-fantome+.pub-fantome span:first-child{width:66%}
.pub-vide{font-family:var(--lit);font-style:italic;font-size:.85rem;color:var(--encre-douce);padding:.6rem 0}
/* pendant l'appel à flux.php, les mêmes lignes fantômes servent de squelette
   de chargement : elles respirent, puis laissent place aux billets frais
   (ou rendent l'antenne aux billets du build si le flux ne donne rien) */
.pubs.attente .pub-fantome span{animation:respire 1s ease-in-out infinite alternate}
@keyframes respire{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.pubs.attente .pub-fantome span{animation:none}}

/* ---------- vidéos & stream ---------- */
.chaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:.4rem}
.chaine{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);
  padding:2rem 1.4rem 1.4rem;text-decoration:none;display:block;text-align:center;
  transition:transform 250ms ease,border-color 250ms ease,background 600ms ease,border-radius 600ms ease;
}
.chaine .ic{margin-left:auto;margin-right:auto}
.chaine:hover{transform:translateY(-4px);border-color:var(--accent)}
.chaine .ic{display:block;margin-bottom:.7rem}
.ic{width:24px;height:24px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 600ms ease}
.programme{display:flex;flex-wrap:wrap;gap:1.1rem;flex-basis:100%;margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--trait)}
.programme .item{display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
.programme .ic{width:18px;height:18px}
.chaine h3{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:.25rem}
.chaine p{font-size:.86rem;color:var(--encre-douce)}
.chaine .pastille{
  display:inline-block;margin-top:.7rem;font-size:.65rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}

/* ---------- ailleurs : les portes, en sourdine ---------- */
.ailleurs .portes{display:flex;flex-wrap:wrap;gap:.7rem}
.porte{
  font-size:.85rem;font-weight:500;text-decoration:none;
  border:1px solid var(--trait);border-radius:999px;padding:.55rem 1.15rem;
  transition:border-color 200ms ease,color 200ms ease;
}
.porte:hover{border-color:var(--accent);color:var(--accent)}
.porte span{color:var(--encre-douce);font-weight:400}
.rs-groupe{margin-bottom:1.3rem}
.rs-groupe .sous{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce);display:block;margin-bottom:.6rem}

/* ---------- stream : la carte CEsoir ---------- */
.direct{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-doux);
  padding:clamp(1.4rem,3vw,2rem);display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  text-decoration:none;transition:transform 250ms ease,border-color 250ms ease,background 600ms ease,border-radius 600ms ease;
}
.direct:hover{transform:translateY(-4px);border-color:var(--accent)}
.direct .live{
  width:14px;height:14px;border-radius:50%;background:#E23D3D;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(226,61,61,.5);animation:ondes 2s ease-out infinite;
}
@keyframes ondes{to{box-shadow:0 0 0 14px rgba(226,61,61,0)}}
.direct h3{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.7rem)}
.direct p{font-size:.92rem;color:var(--encre-douce);flex:1 1 26ch}
.direct .pastille{font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}

/* ---------- pied ---------- */
footer{
  padding:0 0 2.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  font-size:.78rem;color:var(--encre-douce);
}
/* 3. le pied reprend les rayures du haut : la page se referme comme elle s'ouvre */
footer::before{
  content:'';display:block;width:100%;height:8px;margin-bottom:1.5rem;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,
    var(--accent) 0 25%,var(--accent-2) 25% 50%,
    var(--accent-3) 50% 75%,var(--encre-douce) 75% 100%);
  transition:background 600ms ease;
}
footer .sig{font-family:var(--lit);font-style:italic}
/* 7. le soleil du héro revient en tout petit, comme un point final */
.soleil-fin{width:52px;height:28px;flex-shrink:0;align-self:center}
.soleil-fin .arc{transition:fill 600ms ease,stroke 600ms ease}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
}