/* =============================================================================
   STRAWBERRY FIELDS — strawberryfields.fr
   Site de fan, sans but lucratif, sans lien avec Apple Corps Ltd.

   Direction : affiche sérigraphiée britannique, 1967.
   Thème sombre par défaut (l'affiche imprimée sur encre),
   thème clair = la même affiche tirée sur papier crème.
   ========================================================================== */

/* --- 1. JETONS ------------------------------------------------------------ */
:root{
  --ground:#120A33;
  --ground-2:#1A1046;
  --ground-3:#241457;
  --nuit:#0C0A3E;
  --text:#F6EAD2;
  --text-dim:#BEA9D6;
  --rule:rgba(246,234,210,.20);
  --rule-strong:rgba(246,234,210,.55);
  --dot:rgba(246,234,210,.13);
  --ray:rgba(255,91,46,.30);
  --shadow:rgba(6,2,18,.55);
  --frame:#F6EAD2;
  --etoiles:rgba(255,240,200,.55);

  --marigold:#FFC02E;
  --tangerine:#FF5B2E;
  --magenta:#E2246E;
  --turquoise:#12BFA8;
  --violet:#8A4BEE;
  --lime:#C3E053;

  /* le filet arc-en-ciel : signature de l'affiche Magical Mystery Tour,
     employée en trait fin plutôt qu'en aplat, pour éviter le criard */
  --arcenciel:linear-gradient(90deg,
    var(--marigold) 0%, var(--tangerine) 22%, var(--magenta) 44%,
    var(--violet) 64%, var(--turquoise) 84%, var(--lime) 100%);

  /* littéraux indépendants du thème : texte posé sur une encre pleine */
  --ink-fixed:#150C2E;
  --paper-fixed:#FBF2DE;

  --display:"Alfa Slab One","Rockwell","Georgia",serif;
  --body:"Spectral","Iowan Old Style","Georgia",serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --maxw:1180px;
  --pad:clamp(1.1rem,4vw,3rem);

  /* grain de papier, partagé par les pochettes et le fond */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#F3E7CE; --ground-2:#EADAB9; --ground-3:#E2CFA8;
    --nuit:#EFE0BE;
    --text:#22103A; --text-dim:#6A5378;
    --rule:rgba(34,16,58,.22); --rule-strong:rgba(34,16,58,.60);
    --dot:rgba(34,16,58,.14); --ray:rgba(230,69,24,.24);
    --shadow:rgba(80,52,20,.30); --frame:#22103A;
    --etoiles:rgba(34,16,58,.20);
    --marigold:#E8A400; --tangerine:#E64518; --magenta:#C81660;
    --turquoise:#0C9C89; --violet:#6B2FD6; --lime:#8FA61C;
  }
}
:root[data-theme="light"]{
  --ground:#F3E7CE; --ground-2:#EADAB9; --ground-3:#E2CFA8;
  --nuit:#EFE0BE;
  --text:#22103A; --text-dim:#6A5378;
  --rule:rgba(34,16,58,.22); --rule-strong:rgba(34,16,58,.60);
  --dot:rgba(34,16,58,.14); --ray:rgba(230,69,24,.24);
  --shadow:rgba(80,52,20,.30); --frame:#22103A;
  --etoiles:rgba(34,16,58,.20);
  --marigold:#E8A400; --tangerine:#E64518; --magenta:#C81660;
  --turquoise:#0C9C89; --violet:#6B2FD6; --lime:#8FA61C;
}

/* --- 2. BASE -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:color-mix(in srgb,var(--marigold) 35%,transparent);
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
img,svg,iframe{max-width:100%}
img{display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400}
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--marigold);outline-offset:3px;border-radius:2px;
}

/* Le grain plein écran est un calque en fusion : coûteux à peindre sur les
   petits appareils, et invisible à cette taille. On ne le sert qu'au-delà. */
.grain{display:none}
@media (min-width:800px) and (prefers-reduced-motion:no-preference){
  .grain{
    display:block;position:fixed;inset:0;z-index:90;pointer-events:none;
    opacity:.17;mix-blend-mode:overlay;background-image:var(--grain);
  }
}

/* =============================================================================
   MAGICAL MYSTERY TOUR — le ciel étoilé et le filet arc-en-ciel
   Deux motifs seulement, tenus discrets : c'est ce qui évite le criard.
   ========================================================================== */

/* champ d'étoiles : trois nappes de points de tailles différentes, fixées au
   fond de page. Invisible en thème clair, où le papier tient ce rôle. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, var(--etoiles), transparent),
    radial-gradient(1.1px 1.1px at 74% 14%, var(--etoiles), transparent),
    radial-gradient(1.6px 1.6px at 42% 68%, var(--etoiles), transparent),
    radial-gradient(1px 1px at 88% 52%, var(--etoiles), transparent),
    radial-gradient(1.2px 1.2px at 8% 74%, var(--etoiles), transparent),
    radial-gradient(1.5px 1.5px at 62% 88%, var(--etoiles), transparent),
    radial-gradient(1px 1px at 30% 40%, var(--etoiles), transparent);
  background-size:340px 340px,280px 280px,420px 420px,300px 300px,380px 380px,260px 260px,200px 200px;
  opacity:.5;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::before{opacity:.14}}
:root[data-theme="light"] body::before{opacity:.14}
@media (max-width:700px){body::before{display:none}}
main,.topbar,.pied,.bandeau-legal{position:relative;z-index:1}

/* le filet arc-en-ciel, en tête de page et sous chaque en-tête de page */
.filet{height:3px;background:var(--arcenciel);position:relative;z-index:2}

.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.7rem 1.1rem;background:var(--marigold);color:var(--ink-fixed);
  font-family:var(--mono);font-size:.75rem;text-decoration:none;
}
.saut-contenu:focus{left:.5rem;top:.5rem}

/* --- 3. PIÈCES COMMUNES --------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.band{
  padding-block:clamp(3rem,8vw,6.5rem);position:relative;
  /* le navigateur saute la mise en page des sections hors écran */
  content-visibility:auto;contain-intrinsic-size:auto 900px;
}
.band--alt{background:var(--ground-2)}
.band--dots{background-image:radial-gradient(var(--dot) 1.4px,transparent 1.5px);background-size:15px 15px}
/* la bande « nuit » : bleu profond et rayonnement d'étoile, pour les passages
   qui appellent l'imagerie du film */
.band--nuit{
  background:
    radial-gradient(120% 90% at 78% 8%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 58%),
    radial-gradient(90% 70% at 12% 96%,color-mix(in srgb,var(--turquoise) 18%,transparent),transparent 60%),
    var(--nuit);
  color:var(--text);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .band--nuit{color:var(--text)}}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--text-dim);margin:0;
}
.eyebrow::before{
  content:"✳";margin-right:.7em;
  color:var(--accent,var(--marigold));letter-spacing:0;
}
.title{
  font-family:var(--display);
  font-size:clamp(1.85rem,5.2vw,3.7rem);
  line-height:1;letter-spacing:-.015em;margin:.5rem 0 0;
}
.title em{font-style:normal;color:var(--accent,var(--marigold))}
.lede{max-width:64ch;color:var(--text-dim);margin:1.1rem 0 0;font-size:1.05rem}
.sec-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.sec-head::after{
  content:"";height:4px;width:88px;margin-top:1.35rem;
  background:var(--accent,var(--marigold));border-radius:2px;
}

/* --- 4. PHOTOGRAPHIES ----------------------------------------------------- */
.photo{margin:0;position:relative;background:var(--ground-3)}
.photo img{
  width:100%;height:100%;object-fit:cover;
  border:2px solid var(--frame);
  filter:contrast(1.04) saturate(.94);
  background:var(--ground-3);
}
.photo figcaption{
  display:grid;gap:.2rem;padding-top:.7rem;
  font-size:.86rem;line-height:1.45;color:var(--text-dim);
}
.credit{
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-dim);opacity:.78;
}
.credit a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}
.photo--tirage img{box-shadow:6px 7px 0 0 var(--shadow)}
@media (max-width:600px){.photo--tirage img{box-shadow:4px 4px 0 0 var(--shadow)}}

.zoom{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;line-height:0;transition:transform .25s ease;
}
@media (hover:hover){.zoom:hover{transform:translateY(-3px)}}

/* --- 5. BARRE DE NAVIGATION ----------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:70;
  background:var(--ground);
  border-bottom:2px solid var(--rule-strong);
}
@media (min-width:800px){
  .topbar{
    background:color-mix(in srgb,var(--ground) 88%,transparent);
    backdrop-filter:blur(10px);
  }
}
.topbar-in{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:1rem;min-height:54px;
}
.brand{
  font-family:var(--display);font-size:1.02rem;text-decoration:none;
  white-space:nowrap;display:flex;align-items:baseline;gap:.35em;
}
.brand span{color:var(--tangerine)}
/* le fil d'Ariane : rappelle où l'on est, sans occuper de place */
.fil{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fil::before{content:"/";margin-right:.7em;opacity:.5}
@media (max-width:520px){.fil{display:none}}

/* --- le menu dépliant ------------------------------------------------------
   Dix libellés alignés faisaient un en-tête illisible. Un seul bouton ouvre
   un panneau où chaque page a son numéro, son titre et sa description.
   Construit sur <details> : il fonctionne sans JavaScript. */
.menu{margin-left:auto;position:relative}
.menu-btn{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.65rem;
  padding:.7rem 0 .7rem .9rem;
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--text);
}
.menu-btn::-webkit-details-marker{display:none}
.menu-barres{display:grid;gap:4px;width:20px}
.menu-barres i{
  display:block;height:2px;background:var(--tangerine);
  transition:transform .25s ease,opacity .25s ease;
}
.menu[open] .menu-barres i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[open] .menu-barres i:nth-child(2){opacity:0}
.menu[open] .menu-barres i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (hover:hover){.menu-btn:hover .menu-barres i{background:var(--marigold)}}

.menu-panneau{
  position:absolute;top:calc(100% + .7rem);right:0;z-index:80;
  width:min(92vw,660px);
  background:var(--ground-2);
  border:2px solid var(--rule-strong);
  box-shadow:0 24px 60px -20px var(--shadow);
}
.menu-panneau::before{           /* le filet arc-en-ciel, en rappel */
  content:"";display:block;height:3px;background:var(--arcenciel);
}
.menu-liste{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;padding:.4rem;
}
@media (max-width:560px){.menu-liste{grid-template-columns:1fr}}
.menu-liste a{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:.8rem;row-gap:.1rem;align-items:baseline;
  padding:.7rem .8rem;text-decoration:none;
  border:1px solid transparent;
}
@media (hover:hover){
  .menu-liste a:hover{background:var(--ground-3);border-color:var(--rule)}
}
.menu-liste a[aria-current="page"]{background:var(--ground-3);border-color:var(--marigold)}
.m-no{
  grid-row:span 2;font-family:var(--mono);font-size:.64rem;font-weight:600;
  color:var(--tangerine);font-variant-numeric:tabular-nums;
}
.menu-liste a[aria-current="page"] .m-no{color:var(--marigold)}
.m-titre{font-family:var(--display);font-size:1.02rem;line-height:1.15;color:var(--text)}
.m-resume{font-size:.8rem;line-height:1.35;color:var(--text-dim)}

/* --- 6. AFFICHE / HERO ---------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(2rem,6vw,4.5rem) 0 0}
.rays{
  position:absolute;left:50%;top:36%;translate:-50% -50%;
  width:190vmax;aspect-ratio:1;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--ray) 0deg 4.6deg,transparent 4.6deg 9.2deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 8%,transparent 62%);
  mask-image:radial-gradient(closest-side,#000 8%,transparent 62%);
}
/* l'animation d'un dégradé conique plein écran est très coûteuse :
   réservée aux grands écrans, et jamais en mouvement réduit */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .rays{animation:spin 150s linear infinite}
}
@keyframes spin{to{rotate:360deg}}

.arch{
  position:relative;z-index:1;
  max-width:940px;margin-inline:auto;
  border:3px solid var(--rule-strong);
  border-radius:50% 50% 10px 10px / 34% 34% 10px 10px;
  padding:clamp(2.2rem,7vw,4.4rem) clamp(1rem,4vw,3rem) clamp(1.8rem,4vw,2.8rem);
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 6%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 62%),
    color-mix(in srgb,var(--ground) 72%,transparent);
  box-shadow:0 30px 70px -30px var(--shadow);
}
.arch-top{
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.26em;color:var(--marigold);
}
.wordmark{
  font-family:var(--display);line-height:.85;letter-spacing:-.02em;
  margin:.8rem 0 0;display:flex;flex-direction:column;align-items:center;
}
.wordmark .w-1{
  font-size:clamp(2.6rem,11vw,7.4rem);
  background:linear-gradient(178deg,var(--marigold) 0%,var(--tangerine) 52%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--violet) 70%,transparent));
}
.wordmark .w-2{
  font-size:clamp(1.5rem,5.6vw,3.5rem);color:var(--turquoise);
  letter-spacing:.12em;text-indent:.12em;
}
.hero-sub{max-width:46ch;margin:1.3rem auto 0;font-size:1.02rem;color:var(--text-dim);font-style:italic}
.crew{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .9rem;
  margin:1.5rem 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
}
.crew li{display:flex;align-items:center;gap:.9rem}
.crew li::after{content:"✳";color:var(--turquoise);font-size:.75rem}
.crew li:last-child::after{content:none}

.hero-photo{
  position:relative;z-index:1;
  max-width:540px;margin:clamp(-2.2rem,-3vw,-1.4rem) auto 0;
  rotate:-1.4deg;
}
.hero-photo .duo{
  position:relative;overflow:hidden;
  border:3px solid var(--frame);
  box-shadow:8px 10px 0 0 var(--shadow);
  background:var(--tangerine);
}
.hero-photo .duo img{
  filter:grayscale(1) contrast(1.22) brightness(1.06);
  mix-blend-mode:luminosity;opacity:.92;
}
.hero-photo figcaption{rotate:1.4deg;text-align:center;justify-items:center;padding-top:.9rem}

.marquee{
  margin-top:clamp(2.2rem,6vw,4rem);
  background:var(--marigold);color:var(--ink-fixed);
  border-block:3px solid var(--ink-fixed);
  overflow:hidden;position:relative;z-index:1;
}
.marquee-track{
  display:flex;width:max-content;
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;padding-block:.6rem;
}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:slide 46s linear infinite}
}
.marquee-track span{padding-inline:1.3rem;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}

/* --- 7. OUVERTURE --------------------------------------------------------- */
.opening{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.opening{grid-template-columns:1fr}}
.prose p{margin:0 0 1.15rem;max-width:64ch}
.prose p:last-child{margin-bottom:0}
.prose .drop::first-letter{
  font-family:var(--display);float:left;font-size:3.8rem;line-height:.82;
  padding:.06em .12em 0 0;color:var(--tangerine);
}
.fiche{border:2px solid var(--rule-strong);background:var(--ground-3);padding:1.4rem 1.5rem}
.fiche h3{
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--marigold);margin-bottom:1.1rem;
}
.fiche dl{margin:0;display:grid;gap:.8rem}
.fiche div{display:grid;gap:.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule)}
.fiche div:last-child{border-bottom:0;padding-bottom:0}
.fiche dt{
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);
}
.fiche dd{margin:0;font-size:.96rem;line-height:1.45}

/* --- 8. EN-TÊTE DE PAGE ---------------------------------------------------- */
.pagehead{
  position:relative;overflow:hidden;
  padding-block:clamp(2.4rem,7vw,5.5rem) clamp(2rem,6vw,4.5rem);
  border-bottom:3px solid var(--rule-strong);
  background:
    radial-gradient(110% 130% at 12% 0%,color-mix(in srgb,var(--accent,var(--tangerine)) 20%,transparent),transparent 60%),
    var(--ground-2);
}
.pagehead .wrap{position:relative;z-index:1}
.rays--calme{top:-10%;left:78%;width:110vmax;opacity:.5;animation-duration:240s}
.pagetitre{
  font-family:var(--display);
  font-size:clamp(2.2rem,8vw,5.4rem);
  line-height:.95;letter-spacing:-.02em;margin:.5rem 0 0;
}
.pagetitre em{font-style:normal;color:var(--accent,var(--tangerine))}
.pagehead .lede{margin-top:1.2rem;font-size:1.06rem}
.sous-titre{font-family:var(--display);font-size:1.3rem;line-height:1.2;margin:.5rem 0 .9rem}

/* --- 9. BLOCS DE MISE EN PAGE ---------------------------------------------- */
.duo-bloc{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
}
.duo-bloc--inverse .duo-img{order:2}
@media (max-width:840px){
  .duo-bloc{grid-template-columns:1fr}
  .duo-bloc--inverse .duo-img{order:0}
}
.duo-img img{aspect-ratio:4/3}

.duo-photos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(1.4rem,3vw,2.4rem);
}
@media (max-width:640px){.duo-photos{grid-template-columns:1fr}}
.duo-photos .photo img{aspect-ratio:4/3}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.9rem)}
@media (max-width:840px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.trio{grid-template-columns:1fr}}
.trio .photo img{aspect-ratio:3/4}

.grille-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,2.2vw,1.7rem)}
@media (max-width:900px){.grille-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.grille-4{grid-template-columns:1fr}}
.grille-4 .photo img{aspect-ratio:1}

.pleine-largeur{margin-top:clamp(1.8rem,4vw,3rem)}
.pleine-largeur .photo img{aspect-ratio:21/9;max-height:520px}
@media (max-width:700px){.pleine-largeur .photo img{aspect-ratio:16/10}}

.bandeau{background:var(--ground-2);padding-block:clamp(1.6rem,4vw,3rem)}
.bandeau .photo{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.bandeau .photo img{aspect-ratio:2.4/1;max-height:480px}
@media (max-width:700px){.bandeau .photo img{aspect-ratio:16/10}}

.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.9rem,2.2vw,1.7rem)}
.band--galerie{background:var(--ground-2)}
.galerie .photo{display:flex;flex-direction:column}
.galerie .photo img{aspect-ratio:3/2}
.g-4{grid-column:span 4}
.g-3{grid-column:span 3}
.g-2{grid-column:span 2}
.g-2 img{aspect-ratio:3/4}
@media (max-width:920px){
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-4,.g-3,.g-2{grid-column:span 1}
  .g-2 img{aspect-ratio:3/2}
}
@media (max-width:560px){.galerie{grid-template-columns:1fr}}

/* --- 10. CARTES DE SOMMAIRE ------------------------------------------------ */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.9rem)}
@media (max-width:900px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cartes{grid-template-columns:1fr}}
.carte{
  display:flex;flex-direction:column;text-decoration:none;
  border:2px solid var(--rule);background:var(--ground-3);
  transition:border-color .25s,transform .25s;
}
@media (hover:hover){.carte:hover{border-color:var(--k,var(--marigold));transform:translateY(-4px)}}
.carte .photo{margin:0}
.carte .photo img{aspect-ratio:16/10;border:0;border-bottom:2px solid var(--rule)}
.carte:hover .photo img{border-bottom-color:var(--k,var(--marigold))}
.carte .zoom{cursor:pointer;pointer-events:none}
.carte-txt{padding:1rem 1.1rem 1.3rem;display:grid;gap:.35rem}
.carte-no{
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.2em;
  color:var(--k,var(--marigold));font-variant-numeric:tabular-nums;
}
.carte h3{font-family:var(--display);font-size:1.22rem;line-height:1.15}
.carte p{margin:0;font-size:.9rem;line-height:1.5;color:var(--text-dim)}

/* --- 11. FICHES DES MEMBRES ------------------------------------------------ */
.membre-in{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:start;
}
.membre--inverse .membre-photos{order:2}
@media (max-width:900px){
  .membre-in{grid-template-columns:1fr}
  .membre--inverse .membre-photos{order:0}
}
.membre-photos{display:grid;gap:clamp(.8rem,2vw,1.4rem)}
.membre-photo img{aspect-ratio:3/4;border-color:var(--m,var(--marigold))}
.membre-photo-2 img{aspect-ratio:4/3}
.membre-no{
  font-family:var(--display);font-size:2.4rem;line-height:.9;
  color:var(--m,var(--marigold));margin:0 0 .3rem;font-variant-numeric:tabular-nums;
}
.membre-txt h2{font-family:var(--display);font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.02}
.membre-vie{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--text-dim);margin:.6rem 0 0;font-variant-numeric:tabular-nums;
}
.membre-role{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--m,var(--marigold));margin:.35rem 0 1.1rem;
}
.membre-txt > p{margin:0 0 1.05rem;max-width:62ch}
.membre-fiche{
  margin:1.3rem 0 0;display:grid;gap:.85rem;
  border-top:2px solid var(--rule-strong);padding-top:1.2rem;
}
.membre-fiche div{display:grid;gap:.15rem}
.membre-fiche dt{
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--m,var(--marigold));
}
.membre-fiche dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--text-dim)}

/* --- 12. GRILLES DE FICHES ------------------------------------------------- */
.entourage,.inventions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:2px solid var(--rule-strong);border-left:2px solid var(--rule-strong);
}
.inventions{margin-top:clamp(2rem,4vw,3.2rem)}
@media (max-width:880px){.entourage,.inventions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.entourage,.inventions{grid-template-columns:1fr}}
.entourage article,.invention{
  padding:1.3rem 1.3rem 1.5rem;
  border-right:2px solid var(--rule-strong);border-bottom:2px solid var(--rule-strong);
  display:grid;gap:.35rem;align-content:start;
}
.entourage h3{font-family:var(--display);font-size:1.1rem;line-height:1.2;color:var(--e,var(--marigold))}
.entourage .e-role{
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);margin:0;
}
.entourage p{margin:.3rem 0 0;font-size:.88rem;line-height:1.55;color:var(--text-dim)}
.invention .an{
  font-family:var(--mono);font-size:.64rem;font-weight:600;
  letter-spacing:.14em;color:var(--i,var(--lime));font-variant-numeric:tabular-nums;
}
.invention h3{font-family:var(--display);font-size:1.05rem;line-height:1.22}
.invention p{margin:0;font-size:.89rem;line-height:1.55;color:var(--text-dim)}
.invention .ou{
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-dim);opacity:.8;margin-top:.2rem;
}

.apres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-left:2px solid var(--rule-strong)}
@media (max-width:880px){.apres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.apres{grid-template-columns:1fr}}
.apres > div{
  padding:1.2rem 1.2rem 1.4rem;
  border-right:2px solid var(--rule-strong);border-block:2px solid var(--rule-strong);
  display:grid;gap:.4rem;align-content:start;
}
.apres h3{font-family:var(--display);font-size:1rem;line-height:1.2;color:var(--a,var(--marigold))}
.apres p{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-dim)}

/* --- 13. CHRONOLOGIE ------------------------------------------------------- */
.chrono{list-style:none;margin:0;padding:0;position:relative}
.chrono::before{
  content:"";position:absolute;left:calc(clamp(46px,9vw,96px) + 11px);top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--tangerine),var(--magenta),var(--violet),var(--turquoise),var(--lime));
}
.chrono li{
  display:grid;grid-template-columns:clamp(46px,9vw,96px) 24px minmax(0,1fr);
  gap:0 clamp(.7rem,2vw,1.6rem);padding-bottom:1.9rem;
}
.chrono li:last-child{padding-bottom:0}
.chrono .an{
  font-family:var(--display);font-size:clamp(.95rem,2.4vw,1.5rem);
  line-height:1.3;text-align:right;font-variant-numeric:tabular-nums;
}
.chrono .pastille{
  position:relative;z-index:1;width:24px;height:24px;border-radius:50%;
  border:3px solid var(--ground);background:var(--c,var(--tangerine));margin-top:.28rem;
}
.chrono h3{font-family:var(--display);font-size:1.02rem;line-height:1.3;margin-bottom:.25rem}
.chrono .jour{
  font-family:var(--mono);font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--c,var(--tangerine));
  display:block;margin-bottom:.3rem;
}
.chrono p{margin:0;font-size:.93rem;color:var(--text-dim);max-width:62ch}

.citation{
  margin:clamp(2.2rem,5vw,3.5rem) 0 0;padding:1.6rem 0 0;
  border-top:2px solid var(--rule-strong);display:grid;gap:.6rem;
}
.citation blockquote{
  margin:0;font-family:var(--display);
  font-size:clamp(1.2rem,3.4vw,2.05rem);line-height:1.18;
  color:var(--marigold);max-width:22ch;
}
.citation cite{
  font-family:var(--mono);font-style:normal;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);
}

/* --- 14. CHIFFRES ---------------------------------------------------------- */
.band--chiffres{background:var(--turquoise);color:var(--ink-fixed)}
.band--chiffres .eyebrow{color:color-mix(in srgb,var(--ink-fixed) 68%,transparent)}
.band--chiffres .sec-head::after{background:var(--ink-fixed)}
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink-fixed)}
@media (max-width:900px){.chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.chiffres{grid-template-columns:1fr}}
.chiffre{
  padding:1.4rem 1.1rem 1.6rem;
  border-bottom:2px solid var(--ink-fixed);border-right:2px solid var(--ink-fixed);
  display:grid;gap:.3rem;align-content:start;
}
.chiffre:nth-child(4n){border-right:0}
@media (max-width:900px){
  .chiffre:nth-child(4n){border-right:2px solid var(--ink-fixed)}
  .chiffre:nth-child(2n){border-right:0}
}
@media (max-width:400px){.chiffre{border-right:0}}
.chiffre b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6vw,3.5rem);line-height:.92;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.chiffre b small{font-size:.42em;letter-spacing:0}
.chiffre .quoi{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;margin-top:.35rem;
}
.chiffre .quand{font-size:.88rem;line-height:1.4;color:color-mix(in srgb,var(--ink-fixed) 74%,transparent)}

/* =============================================================================
   15. LES DISQUES — pochette sérigraphiée + galette qui sort du sillon
   ========================================================================== */
.albums{list-style:none;margin:0;padding:0;display:grid;gap:0}
.album{
  display:grid;grid-template-columns:clamp(140px,20vw,220px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:start;
  padding:clamp(1.6rem,3vw,2.6rem) 0;
  border-bottom:2px solid var(--rule);
}
.album:first-child{border-top:2px solid var(--rule-strong)}
@media (max-width:620px){.album{grid-template-columns:1fr;gap:1.1rem;justify-items:start}}

/* l'objet physique : sleeve + vinyle */
.objet{
  position:relative;width:100%;aspect-ratio:1;
  max-width:220px;
}
@media (max-width:620px){.objet{max-width:190px}}
.galette{
  position:absolute;top:2.5%;left:0;
  width:95%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      var(--label,#d8c8a0) 0 16%,
      #0d0d0f 16.5% 17.5%,
      transparent 17.6%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 46%),
    #16161a;
  /* au repos le disque dépasse déjà : sur un écran tactile, où le survol
     n'existe pas, c'est la seule façon de voir qu'il y a un disque dedans */
  transform:translateX(13%);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.65);
  transition:transform .5s cubic-bezier(.2,.85,.25,1);
}
@media (hover:hover){
  .album:hover .galette,.album:focus-within .galette{transform:translateX(26%) rotate(8deg)}
}
/* la galette est positionnée : sans cela elle passerait par-dessus le texte,
   qui n'est pas positionné et se peint donc plus tôt */
.album-txt{position:relative;z-index:2}
.pochette-cadre{
  position:relative;z-index:1;width:100%;aspect-ratio:1;
  box-shadow:6px 8px 0 0 var(--shadow), 0 18px 30px -18px rgba(0,0,0,.7);
  transition:transform .4s cubic-bezier(.2,.85,.25,1);
}
@media (hover:hover){.album:hover .pochette-cadre{transform:translate(-3px,-4px)}}
.pochette{display:block;width:100%;height:100%;border:1px solid rgba(0,0,0,.35)}
/* grain d'impression + usure des bords, en une seule règle pour les treize */
.pochette-cadre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain),
    radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.32));
  background-size:160px 160px,cover;
  opacity:.5;mix-blend-mode:multiply;
}
.pochette-cadre::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  border-top:2px solid rgba(255,255,255,.16);
  box-shadow:inset -3px 0 6px -4px rgba(0,0,0,.8);
}

.album-txt{display:grid;gap:.3rem}
.album-no{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  color:var(--d,var(--marigold));font-variant-numeric:tabular-nums;
}
.album h2{font-family:var(--display);font-size:clamp(1.15rem,2.8vw,1.75rem);line-height:1.12}
.album-alias{font-family:var(--body);font-style:italic;font-size:.8em;color:var(--text-dim)}
.album-date{
  font-family:var(--mono);font-size:.68rem;color:var(--text-dim);
  font-variant-numeric:tabular-nums;margin:.15rem 0 .5rem;
}
.album-txt > p{margin:0;font-size:.96rem;line-height:1.6;max-width:70ch;color:var(--text-dim)}
.album-ecoute{
  margin-top:.7rem!important;padding-top:.65rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.66rem!important;letter-spacing:.02em;
  color:var(--d,var(--marigold))!important;
}

.singles{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.4rem,4vw,3.5rem);
}
@media (max-width:700px){.singles{grid-template-columns:1fr}}
.singles li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.95rem;
}
.singles .s-an{
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  color:var(--marigold);font-variant-numeric:tabular-nums;
}
.singles .s-bonus,.singles .s-bonus .s-an{color:var(--turquoise)}
.singles .s-bonus em{font-style:italic;color:var(--text-dim);font-size:.84rem}

/* =============================================================================
   16. VIDÉOS — façade légère, l'iframe n'est chargée qu'au clic
   ========================================================================== */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
@media (max-width:760px){.videos{grid-template-columns:1fr}}
.video{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:2px solid var(--rule-strong);
  /* le fond reste visible tant que le lecteur n'est pas chargé */
  background:
    radial-gradient(120% 140% at 78% 10%,color-mix(in srgb,var(--v,var(--tangerine)) 40%,transparent),transparent 62%),
    var(--ground-3);
  box-shadow:6px 7px 0 0 var(--shadow);
}
/* carte de repli, posée à la place du lecteur quand l'hébergeur interdit
   les cadres externes */
.video-repli{
  position:absolute;inset:0;
  display:grid;align-content:end;gap:.35rem;
  padding:clamp(1rem,3vw,1.6rem);
  text-decoration:none;color:var(--text);
}
.video-repli::before{
  content:"";position:absolute;top:clamp(1rem,3vw,1.6rem);left:clamp(1rem,3vw,1.6rem);
  width:52px;height:52px;border-radius:50%;background:var(--v,var(--tangerine));
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transition:transform .3s ease;
}
.video-repli::after{
  content:"";position:absolute;
  top:calc(clamp(1rem,3vw,1.6rem) + 16px);left:calc(clamp(1rem,3vw,1.6rem) + 20px);
  width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent var(--ink-fixed);
  transition:transform .3s ease;
}
@media (hover:hover){
  .video-repli:hover::before,.video-repli:hover::after{transform:scale(1.12)}
}
.video-repli-src{
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--v,var(--tangerine));
}
.video-repli-titre{font-family:var(--display);font-size:clamp(1rem,2.6vw,1.4rem);line-height:1.14;max-width:22ch}
.video-repli-meta{font-family:var(--mono);font-size:.6rem;color:var(--text-dim);letter-spacing:.06em}
.video-repli-note{
  margin-top:.4rem;padding:.4rem .6rem;
  background:color-mix(in srgb,var(--ink-fixed) 55%,transparent);
  border-left:3px solid var(--marigold);
  font-family:var(--mono);font-size:.58rem;line-height:1.5;
  letter-spacing:.04em;color:var(--paper-fixed);
}

.video-nom{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--v,var(--tangerine));text-transform:uppercase;
}
.video-nom strong{font-weight:600}
.video-lien{
  color:var(--v,var(--tangerine));font-weight:600;
  text-decoration-thickness:1px;text-underline-offset:2px;white-space:nowrap;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* sortie de secours posée sur le lecteur : une erreur survenant dans le cadre
   YouTube est illisible depuis cette page, donc on garde une porte ouverte */

@media (max-width:600px){}

.video-legende{
  display:grid;gap:.3rem;padding-top:.7rem;
  font-size:.86rem;line-height:1.45;color:var(--text-dim);
}
.video-legende a{color:var(--text-dim)}
.video-bloc{margin:0}

/* =============================================================================
   17. LIEUX
   ========================================================================== */
.lieux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.6vw,2rem)}
@media (max-width:900px){.lieux{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lieux{grid-template-columns:1fr}}
.lieu{display:flex;flex-direction:column;gap:.7rem}
.lieu .photo img{aspect-ratio:4/3;border-color:var(--rule-strong)}
.lieu .ville{
  font-family:var(--mono);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--l,var(--turquoise));
}
.lieu h3{font-family:var(--display);font-size:1.1rem;line-height:1.2}
.lieu .adresse{font-family:var(--mono);font-size:.66rem;color:var(--text-dim)}
.lieu p{margin:.1rem 0 0;font-size:.89rem;line-height:1.55;color:var(--text-dim)}

.lieu-large{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.4rem,4vw,3.2rem);align-items:center;
}
.lieu-large--inverse .lieu-large-img{order:2}
@media (max-width:860px){
  .lieu-large{grid-template-columns:1fr}
  .lieu-large--inverse .lieu-large-img{order:0}
}
.lieu-large-img img{aspect-ratio:3/4;max-height:560px}
.lieu-large-txt h3{font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.1rem);line-height:1.1;margin:.3rem 0}
.lieu-large-txt .ville{
  font-family:var(--mono);font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent,var(--tangerine));
}
.lieu-large-txt .adresse{
  display:block;font-family:var(--mono);font-size:.68rem;
  color:var(--text-dim);margin-bottom:1rem;
}
.lieu-large-txt p{margin:0 0 1rem;font-size:.97rem;line-height:1.65;color:var(--text-dim);max-width:62ch}
.lieu-large-txt p:last-child{margin-bottom:0}

.band--road{background:var(--ground-2);padding-bottom:0;overflow:hidden}
.road-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3.5rem);align-items:end}
@media (max-width:800px){.road-head{grid-template-columns:1fr}}
.road-facts{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.road-facts li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
  padding-bottom:.65rem;border-bottom:1px solid var(--rule);
}
.road-facts li:last-child{border-bottom:0}
.road-facts b{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--turquoise);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.road-facts span{font-size:.93rem;color:var(--text-dim)}
.road-photo{margin-top:clamp(1.8rem,4vw,3rem)}
.road-photo .photo img{aspect-ratio:3/2;max-height:460px}
.scene{display:block;width:100%;margin-top:clamp(1.4rem,3vw,2.4rem)}

/* --- 18. HÉRITAGE ---------------------------------------------------------- */
.band--fin{background:var(--magenta);color:var(--paper-fixed)}
.band--fin .eyebrow{color:color-mix(in srgb,var(--paper-fixed) 72%,transparent)}
.band--fin .sec-head::after{background:var(--marigold)}
.fin-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.5rem)}
@media (max-width:820px){.fin-grid{grid-template-columns:1fr}}
.fin-grid p{max-width:60ch;margin:0 0 1.1rem}
.fin-grid p:last-child{margin-bottom:0}
.encart{
  border:3px solid var(--paper-fixed);padding:1.4rem 1.4rem 1.5rem;
  display:grid;gap:.5rem;align-content:start;
  background:color-mix(in srgb,var(--ink-fixed) 22%,transparent);
}
.encart .an{
  font-family:var(--display);font-size:2.4rem;line-height:.9;
  color:var(--marigold);font-variant-numeric:tabular-nums;
}
.encart h3{font-family:var(--display);font-size:1.12rem;line-height:1.25}
.encart p{font-size:.91rem;line-height:1.55;color:color-mix(in srgb,var(--paper-fixed) 86%,transparent)}

.premieres{
  list-style:none;margin:0;padding:0;counter-reset:p;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.4rem,4vw,3.2rem);
}
@media (max-width:760px){.premieres{grid-template-columns:1fr}}
.premieres li{counter-increment:p;padding:1.1rem 0;border-bottom:1px solid var(--rule);display:grid;gap:.3rem}
.premieres h3{
  font-family:var(--display);font-size:1.04rem;line-height:1.25;
  display:flex;gap:.8rem;align-items:baseline;
}
.premieres h3::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  color:var(--turquoise);flex:none;
}
.premieres p{margin:0;font-size:.91rem;line-height:1.6;color:var(--text-dim);padding-left:2.3rem}

.encadre{
  margin-top:clamp(1.8rem,4vw,3rem);
  border-left:5px solid var(--accent,var(--tangerine));
  background:var(--ground-3);padding:1.3rem 1.5rem 1.4rem;
}
.encadre h3{font-family:var(--display);font-size:1.16rem;line-height:1.2;margin-bottom:.5rem}
.encadre p{margin:0;font-size:.94rem;line-height:1.65;color:var(--text-dim);max-width:76ch}

/* --- 19. CRÉDITS ----------------------------------------------------------- */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.3rem,3vw,2.4rem)}
@media (max-width:900px){.notes{grid-template-columns:1fr}}
.note{border-top:4px solid var(--n,var(--marigold));padding-top:1.1rem}
.note h3{font-family:var(--display);font-size:1.14rem;line-height:1.2;margin-bottom:.6rem}
.note p{margin:0 0 .8rem;font-size:.92rem;line-height:1.62;color:var(--text-dim)}
.note p:last-child{margin-bottom:0}

.licences{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.3rem,3vw,2.6rem)}
@media (max-width:820px){.licences{grid-template-columns:1fr}}
.lic-bloc{border:2px solid var(--rule);padding:1.1rem 1.2rem 1.3rem;background:var(--ground-3)}
.lic-bloc h3{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;margin-bottom:.2rem}
.lic-tag{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-fixed);background:var(--turquoise);padding:.2rem .5rem;
}
.lic-n{font-family:var(--mono);font-size:.62rem;color:var(--text-dim);font-variant-numeric:tabular-nums}
.lic-note{margin:0 0 .9rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em}
.lic-note a{color:var(--text-dim)}
.lic-bloc ul{margin:0;padding:0;list-style:none;display:grid;gap:.65rem}
.lic-bloc li{
  font-size:.86rem;line-height:1.45;color:var(--text-dim);
  padding-bottom:.65rem;border-bottom:1px solid var(--rule);
}
.lic-bloc li:last-child{border-bottom:0;padding-bottom:0}
.lic-bloc b{color:var(--text);font-weight:600}
.lic-bloc .par{font-family:var(--mono);font-size:.64rem}

/* --- 20. MENTION LÉGALE ---------------------------------------------------- */
.avis{
  border:2px dashed var(--rule-strong);
  background:var(--ground-3);
  padding:clamp(1.1rem,3vw,1.8rem) clamp(1.2rem,3vw,2rem);
  display:grid;gap:.6rem;
}
.avis h2,.avis h3{
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--marigold);
}
.avis p{margin:0;font-size:.93rem;line-height:1.62;color:var(--text-dim);max-width:78ch}
.avis strong{color:var(--text)}

.bandeau-legal{
  background:var(--ink-fixed);color:color-mix(in srgb,var(--paper-fixed) 76%,transparent);
  border-top:2px solid var(--rule-strong);
}
.bandeau-legal .wrap{
  padding-block:.8rem;
  font-family:var(--mono);font-size:.6rem;line-height:1.7;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;
}

/* --- 21. VISIONNEUSE ------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:95;display:none;place-items:center;
  padding:clamp(.8rem,4vw,3rem);
  background:color-mix(in srgb,var(--ink-fixed) 93%,transparent);
  overscroll-behavior:contain;
}
@media (min-width:800px){.lightbox{backdrop-filter:blur(6px)}}
.lightbox.is-open{display:grid}
.lightbox figure{margin:0;display:grid;gap:.9rem;justify-items:center;max-width:1000px}
.lightbox img{
  max-height:70dvh;width:auto;border:3px solid var(--paper-fixed);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}
.lightbox figcaption{
  text-align:center;color:var(--paper-fixed);font-size:.92rem;max-width:62ch;
  display:grid;gap:.35rem;
}
.lightbox .credit{color:color-mix(in srgb,var(--paper-fixed) 70%,transparent);opacity:1}
.lightbox-close{
  position:absolute;top:.8rem;right:.8rem;
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--paper-fixed);background:none;color:var(--paper-fixed);
  font-size:1.3rem;line-height:1;cursor:pointer;
}
@media (hover:hover){.lightbox-close:hover{background:var(--paper-fixed);color:var(--ink-fixed)}}

/* --- 22. PIED DE PAGE ------------------------------------------------------ */
.pied{background:var(--ground);border-top:3px solid var(--rule-strong);padding-block:2.4rem 2.8rem}
.pied-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem}
@media (max-width:760px){.pied-in{grid-template-columns:1fr}}
.pied .sub{font-family:var(--display);font-size:1.5rem;line-height:1;margin-bottom:.7rem}
.pied p{margin:0;font-size:.86rem;color:var(--text-dim);max-width:58ch}
.pied .colophon{
  font-family:var(--mono);font-size:.64rem;line-height:1.9;
  text-transform:uppercase;letter-spacing:.11em;color:var(--text-dim);
}
.sub-svg{width:110px;margin-bottom:1rem}

/* =============================================================================
   23. NAVIGATION DE BAS DE PAGE — page précédente / suivante
   Sur un site de dix pages, c'est le confort de lecture le plus utile.
   ========================================================================== */
.pager{
  border-top:3px solid var(--rule-strong);
  margin-top:clamp(2rem,5vw,3.5rem);
}
.pager-in{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:var(--maxw);margin-inline:auto;
}
@media (max-width:560px){.pager-in{grid-template-columns:1fr}}
.pager a{
  display:grid;gap:.3rem;align-content:center;
  padding:clamp(1.2rem,3vw,1.9rem) var(--pad);
  text-decoration:none;min-height:96px;
  transition:background .25s ease;
}
.pager a:first-child{border-right:2px solid var(--rule)}
@media (max-width:560px){
  .pager a:first-child{border-right:0;border-bottom:2px solid var(--rule)}
}
@media (hover:hover){.pager a:hover{background:var(--ground-3)}}
.pager .sens{
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tangerine);
}
.pager .quoi{font-family:var(--display);font-size:1.25rem;line-height:1.15}
.pager .suiv{text-align:right}
.pager .suiv .sens{color:var(--turquoise)}
.pager .vide{padding:0}

.haut{
  display:block;text-align:center;text-decoration:none;
  padding:.9rem var(--pad);
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--text-dim);
}
@media (hover:hover){.haut:hover{color:var(--text)}}

/* --- 24. PLAN DU SITE DANS LE PIED ------------------------------------------ */
.plan{margin-top:1.4rem}
.plan h3{
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--marigold);margin-bottom:.6rem;
}
.plan ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.25rem 1.2rem;
}
.plan a{
  display:block;padding:.3rem 0;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;color:var(--text-dim);
}
@media (hover:hover){.plan a:hover{color:var(--text)}}

/* --- 25. PAGES DE LA VERSION AUTONOME -------------------------------------- */
.page[hidden]{display:none!important}