/* ============================================================
   STYLE DU SITE — « golden hour », tirages argentiques (2026-10-25)
   La direction artistique vient des photos de Léo : la lumière du soir
   sur la Garonne, la brique rose de Toulouse, le grain de la pellicule.
   Noir chaud du crépuscule, orange LEOPROD (le logo), or du couchant,
   papier photo crème. Titres : Syncopate + Bodoni Moda italique (comme
   les flyers et la Beat Tape) ; texte : Sora ; étiquettes : DM Mono.
   Tout reste discret : la photo fait le travail, pas les effets.
   Les couleurs principales sont réglées ici.
   ============================================================ */

:root {
  --fond: #0e0a08;          /* noir chaud du crépuscule */
  --fond-2: #140e0b;
  --surface: #1b1410;
  --surface-2: #251c16;
  --bord: #3a2d25;
  --filet: rgba(240, 190, 130, .2);    /* filet or du couchant */
  --texte: #f7ecdc;         /* papier photo crème */
  --texte-2: #c6b39d;
  --texte-3: #978470;
  --accent: #f07a2e;        /* orange LEOPROD (le logo) */
  --accent-clair: #ff9d5f;
  --or: #f0c27b;            /* or du couchant */
  --or-clair: #f8dcae;
  --papier: #f1e6d3;        /* le bord blanc des tirages photo */
  --ok: #8fd6a8;
  --orage: #a9b8cf;         /* le ciel d'orage des photos : couleur de l'album */
  --orage-fond: #0f1216;
  --brique: #e48a6b;        /* la brique de Toulouse, la ville rose : couleur du collectif */
  --brique-fond: #140e0b;
  --radio: #6fd0c0;
  --laurier: #ef9a82;       /* la brique rose de Toulouse, là où ont lieu les cours : couleur des Formations
                               (la variable garde son ancien nom, « laurier », pour ne rien casser) */
  --laurier-fond: #170d0a;
  --rayon: 6px;
  --police-titre: "Syncopate", "Arial Black", sans-serif;
  --police-luxe: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --police: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --police-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --marge: clamp(16px, 4vw, 48px);
  --largeur: 1200px;
  --haut-entete: 68px;
  --ease: cubic-bezier(.22, .8, .16, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grain de film, très léger : le côté « tirage photo » */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body.avec-lecteur { padding-bottom: 112px; }
a { color: inherit; }
b, strong { font-weight: 600; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 4px; }
/* Titres qui reçoivent le focus après un changement de page : pas de cadre (ce ne sont pas des boutons) */
h1[tabindex="-1"]:focus, main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
kbd { font-family: var(--police-mono); font-size: .8em; border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--texte); background: var(--surface); }
::selection { background: var(--accent); color: #0e0a08; }

.evitement { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #0e0a08; padding: 10px 16px; border-radius: 4px; z-index: 100; font-weight: 600; }
.evitement:focus { left: 8px; }

.bandeau-proto {
  background: var(--fond-2);
  color: var(--texte-2);
  font: 500 12px/1.4 var(--police-mono);
  letter-spacing: .06em;
  text-align: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--filet);
}

/* Petit losange : la facette d'une catégorie, d'une page ou d'un style */
.losange { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; transform: rotate(45deg); border: 1px solid var(--c, var(--lueur, var(--accent))); transition: background .2s, transform .3s var(--ease); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--haut-entete);
  padding: 10px var(--marge);
  background: rgba(14, 10, 8, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--filet);
  view-transition-name: entete;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.logo-marque { width: 34px; height: 34px; flex-shrink: 0; color: var(--texte); }
.logo-marque .lg-ondes { transition: transform .5s var(--ease); transform-origin: 33px 50px; }
.logo:hover .logo-marque .lg-ondes { transform: scale(1.08); }
.logo span { font-family: var(--police-titre); font-weight: 700; font-size: 18px; letter-spacing: .08em; line-height: 1; }
.logo small { font-family: var(--police-luxe); font-style: italic; font-size: 14px; color: var(--or); white-space: nowrap; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.nav a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; color: var(--texte-2); font: 500 12.5px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-radius: 4px; transition: color .2s; }
.nav a:hover, .nav a.actif { color: var(--texte); }
.nav a:hover .losange { transform: rotate(135deg); }
.nav a.actif .losange { background: var(--c); }
[data-nav="beats"] { --c: var(--accent); }
[data-nav="artiste"] { --c: var(--orage); }
[data-nav="beatmakers"] { --c: var(--brique); }
[data-nav="radio"] { --c: var(--radio); }
[data-nav="ateliers"] { --c: var(--laurier); }
[data-nav="sur-mesure"] { --c: var(--or); }
.compteur { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: #0e0a08; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.compteur.zero { background: var(--surface-2); color: var(--texte-2); }
.entete-outils { display: flex; align-items: center; gap: 6px; }
.btn-outil { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 12px; border: 1px solid var(--bord); border-radius: 4px; background: transparent; color: var(--texte-2); text-decoration: none; font: 500 12.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.btn-outil:hover, .btn-outil.actif { color: var(--texte); border-color: var(--or); }
.btn-outil svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn-outil kbd { font-size: 11px; padding: 0 5px; }
.btn-outil .compteur-favoris { position: absolute; top: -6px; right: -6px; }
.compteur-favoris { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #0e0a08; font: 700 10.5px/1 var(--police); letter-spacing: 0; }
.btn-menu { display: none; }

/* ---------- Onglets du bas (téléphone) ---------- */
.onglets { display: none; }

/* ---------- Mise en page ---------- */
main { outline: none; display: block; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.section { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.titre-section, .titre-bloc, .titre-page {
  font-family: var(--police-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.08; margin: 0 0 14px;
}
.titre-section { font-size: clamp(22px, 3vw, 38px); }
.titre-bloc { font-size: clamp(26px, 4.2vw, 56px); }
.titre-page { font-size: clamp(32px, 5.6vw, 72px); line-height: 1.02; }
/* Le mot en italique Bodoni : la touche haute couture dans les titres futuristes */
.titre-section em, .titre-bloc em, .titre-page em, .marque em, .encart h2 em, .une-baseline em {
  font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--or-clair);
  font-size: 1.12em; line-height: .9;
}
.titre-section, .titre-bloc, .titre-page, .marque, .artiste-nom, h1, h2 { text-wrap: balance; }
.sous-titre { color: var(--texte-2); margin: 0 0 28px; max-width: 62ch; }
.surtitre { display: flex; align-items: center; gap: 12px; font-family: var(--police-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.surtitre::before { content: ""; width: 26px; height: 1px; background: currentColor; flex-shrink: 0; }
.surtitre .num { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: 17px; letter-spacing: .02em; color: var(--or); text-transform: none; margin-right: -2px; }
.surtitre:has(.num)::before { display: none; }
.surtitre .num::after { content: ""; display: inline-block; width: 26px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--accent); }
.donnees { font-family: var(--police-mono); font-size: 13px; color: var(--texte-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lien-fleche { color: var(--texte); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 3px; white-space: nowrap; transition: border-color .2s, color .2s; }
.lien-fleche:hover { border-color: var(--accent); color: var(--accent-clair); }
.section-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: 34px; }
.section-tete .sous-titre { margin: 0; max-width: 46ch; }
.section-tete .titre-section, .section-tete .titre-bloc { margin: 0; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid transparent; border-radius: 3px; padding: 12px 26px; font: 600 12.5px var(--police-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: transform .12s, background .2s, border-color .2s, color .2s, box-shadow .25s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-accent { background: var(--accent); color: #120a05; box-shadow: 0 10px 30px -14px rgba(240, 122, 46, .7); }
.btn-accent:hover { background: var(--accent-clair); box-shadow: 0 14px 36px -12px rgba(240, 122, 46, .8); }
.btn-contour { background: transparent; border-color: var(--filet); color: var(--texte); }
.btn-contour:hover { border-color: var(--or); color: var(--or-clair); }
.btn-petit { min-height: 40px; padding: 8px 16px; font-size: 11.5px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.btn-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--texte-2); }
.btn-icone:hover { color: var(--texte); background: var(--surface-2); }
.btn-lecture { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--texte); color: #0e0a08; transition: transform .15s, background .2s; }
.btn-lecture:hover { transform: scale(1.06); }
.btn-lecture svg, .btn-icone svg { width: 20px; height: 20px; }
.ic { display: inline-grid; place-items: center; }
.btn .ic svg { width: 17px; height: 17px; }
.lien { background: none; border: 0; padding: 0; color: var(--texte-2); text-decoration: underline; text-decoration-color: var(--filet); text-underline-offset: 4px; font-size: 14px; }
.lien:hover { color: var(--texte); text-decoration-color: currentColor; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Le cœur des favoris */
.btn-favori { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texte-3); transition: color .2s, transform .2s; }
.btn-favori svg { width: 20px; height: 20px; transition: fill .2s, transform .3s var(--ease); }
.btn-favori:hover { color: var(--texte); }
.btn-favori[aria-pressed="true"] { color: var(--accent); }
.btn-favori[aria-pressed="true"] svg { fill: currentColor; animation: battement .45s var(--ease); }
.btn-favori.avec-texte, .btn-action { width: auto; height: 44px; gap: 8px; padding: 0 16px; border: 1px solid var(--bord); border-radius: 3px; display: inline-flex; align-items: center; background: transparent; color: var(--texte-2); font: 500 12px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; }
.btn-action svg { width: 18px; height: 18px; }
.btn-action:hover, .btn-favori.avec-texte:hover { border-color: var(--or); color: var(--texte); }
.btn-favori.avec-texte[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-clair); }
@keyframes battement { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- Habillage par style ----------
   Chaque catégorie et chaque sous-genre a sa police, sa couleur de facette (--lueur)
   et l'étalonnage de ses photos. Le style se met sur un conteneur (.theme-soul…) ;
   .t-fond reçoit le fond, .t-titre la police. */
.t-fond { background: var(--t-fond); }
.t-titre {
  font-family: var(--t-police); font-style: var(--t-style); font-weight: var(--t-graisse);
  text-transform: var(--t-casse); letter-spacing: var(--t-espace); line-height: var(--t-interligne);
  color: var(--t-couleur); text-shadow: var(--t-ombre);
  font-size: calc(var(--taille-base, 30px) * var(--t-taille));
}
[class*="theme-"] {
  --t-police: var(--police-titre); --t-style: normal; --t-graisse: 700; --t-casse: uppercase; --t-espace: .02em; --t-interligne: 1.02;
  --t-couleur: #f6f1e8; --t-ombre: 0 2px 18px rgba(0, 0, 0, .45); --t-taille: .8; --lueur: var(--accent);
  --t-filtre: saturate(1.02) contrast(1.06); --t-voile: linear-gradient(180deg, transparent 42%, rgba(8, 7, 6, .86));
  --t-fond: linear-gradient(150deg, var(--c1, #2b2520), var(--c2, #0e0a08));
}
.theme-autre { --lueur: var(--or); }
/* Hip-Hop/Trap (catégorie) : la police du site, blanc sur scène */
.theme-hiphop { --t-taille: .76; --lueur: #f07a2e; --t-filtre: saturate(1.05) contrast(1.12); --t-voile: linear-gradient(180deg, transparent 38%, rgba(14, 6, 3, .9)); }
/* Late night trap soul : Cormorant italique doré, la nuit à deux */
.theme-soul {
  --t-police: "Cormorant Garamond", Georgia, serif; --t-style: italic; --t-casse: none; --t-espace: 0; --t-interligne: .92;
  --t-couleur: #f1dcae; --t-ombre: 0 0 22px rgba(241, 220, 174, .35); --t-taille: 1.35; --lueur: #e8c989;
  --t-filtre: saturate(1.05) contrast(1.08); --t-voile: linear-gradient(180deg, rgba(120, 30, 70, .14), transparent 45%, rgba(22, 6, 20, .88));
}
/* Trap Island : les bandits des Caraïbes, gothique de tatouage, rouge braise */
.theme-island {
  --t-police: "Pirata One", "Old English Text MT", serif; --t-graisse: 400; --t-casse: none; --t-espace: .01em; --t-interligne: .95;
  --t-couleur: #fff1e8; --t-ombre: 0 0 18px rgba(255, 60, 45, .55), 2px 2px 0 #6e0b0b; --t-taille: 1.28; --lueur: #ff5a44;
  --t-filtre: saturate(1.15) contrast(1.22) brightness(.9); --t-voile: linear-gradient(180deg, rgba(40, 0, 0, .22), transparent 40%, rgba(18, 4, 4, .9));
}
/* Dark Trap : la cité la nuit, pochoir, trait rouge */
.theme-dark {
  --t-police: "Saira Stencil One", Impact, sans-serif; --t-graisse: 400; --t-espace: .01em; --t-interligne: .95;
  --t-couleur: #ececec; --t-ombre: 2px 2px 0 #c1121f; --t-taille: .95; --lueur: #e5383b;
  --t-filtre: saturate(.6) contrast(1.25) brightness(.88); --t-voile: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .9));
}
/* Afro trap : le terrain entre les tours, lettrage de stade */
.theme-afrotrap {
  --t-police: "Big Shoulders Display", Impact, sans-serif; --t-graisse: 900; --t-espace: .03em; --t-interligne: .9;
  --t-couleur: #f3ffe9; --t-ombre: 0 3px 0 rgba(0, 0, 0, .5), 0 0 24px rgba(134, 224, 108, .35); --t-taille: 1.15; --lueur: #86e06c;
  --t-filtre: saturate(1.08) contrast(1.15); --t-voile: linear-gradient(180deg, transparent 40%, rgba(4, 16, 8, .9));
}
/* Afrobeats/Amapiano (catégorie) et Afrobeats : Unbounded, or */
.theme-afro {
  --t-police: "Unbounded", "Arial Black", sans-serif; --t-graisse: 800; --t-interligne: 1.05;
  --t-couleur: #fff3dc; --t-ombre: 0 3px 0 rgba(0, 0, 0, .45); --t-taille: .72; --lueur: #e3b35b;
  --t-filtre: saturate(1.12) contrast(1.08); --t-voile: linear-gradient(180deg, transparent 40%, rgba(50, 20, 5, .88));
}
/* Amapiano : le piano de Johannesburg, en minuscules, doré rosé */
.theme-amapiano {
  --t-police: "Unbounded", sans-serif; --t-graisse: 500; --t-casse: lowercase; --t-espace: -.01em;
  --t-couleur: #ffe8d6; --t-ombre: 0 0 20px rgba(244, 162, 89, .45); --t-taille: .84; --lueur: #f4a259;
  --t-filtre: saturate(1.1) contrast(1.08); --t-voile: linear-gradient(180deg, transparent 40%, rgba(30, 14, 22, .88));
}
/* Afro House : percussions et désert, lettres espacées, lueur pourpre */
.theme-afrohouse {
  --t-graisse: 400; --t-espace: .14em; --t-couleur: #fbe9ff; --t-ombre: 0 0 16px rgba(214, 92, 255, .6); --t-taille: .68; --lueur: #d06cff;
  --t-filtre: saturate(1.15) contrast(1.1); --t-voile: linear-gradient(180deg, transparent 40%, rgba(20, 4, 24, .88));
}
/* Electro/House music (catégorie) : néon adouci, violet */
.theme-house {
  --t-police: "Tilt Neon", Arial, sans-serif; --t-graisse: 400; --t-espace: .04em;
  --t-couleur: #f6ecff; --t-ombre: 0 0 4px #fff, 0 0 14px #b98cff, 0 0 30px #7b3cff; --t-taille: .95; --lueur: #b98cff;
  --t-filtre: saturate(.85) contrast(1.08) brightness(.9); --t-voile: linear-gradient(180deg, transparent 44%, rgba(13, 4, 30, .88));
}
/* Electro/House : lasers de festival, néon magenta */
.theme-electro {
  --t-police: "Tilt Neon", Arial, sans-serif; --t-graisse: 400; --t-espace: .04em;
  --t-couleur: #ffe9fb; --t-ombre: 0 0 4px #fff, 0 0 12px #ff4fd8, 0 0 28px #ff4fd8; --t-taille: .95; --lueur: #ff5fd9;
  --t-filtre: saturate(1.3) contrast(1.1); --t-voile: linear-gradient(180deg, transparent 45%, rgba(13, 2, 33, .88));
}
/* Pop House : boules à facettes, rose doré */
.theme-pophouse {
  --t-police: "Shrikhand", Georgia, serif; --t-graisse: 400; --t-casse: none; --t-espace: 0;
  --t-couleur: #fff0f4; --t-ombre: 3px 3px 0 #b8466e; --t-taille: .95; --lueur: #ff9ec0;
  --t-filtre: saturate(1.05) contrast(1.05); --t-voile: linear-gradient(180deg, transparent 45%, rgba(40, 10, 22, .86));
}
/* Boom Bap : l'âge d'or new-yorkais, lettrage d'enseigne, or patiné */
.theme-boombap {
  --t-police: "Bungee", Impact, sans-serif; --t-graisse: 400; --t-espace: .02em; --t-interligne: .95;
  --t-couleur: #f1c75b; --t-ombre: 3px 3px 0 rgba(0, 0, 0, .6); --t-taille: .9; --lueur: #d4a537;
  --t-filtre: saturate(.8) contrast(1.12) sepia(.15); --t-voile: linear-gradient(180deg, transparent 40%, rgba(22, 17, 10, .9));
}
/* Reggaeton : le dembow, lettres d'affiche de fête, chaleur rouge orangé */
.theme-reggaeton {
  --t-police: "Bowlby One", Impact, sans-serif; --t-graisse: 400; --t-espace: .01em; --t-interligne: .95;
  --t-couleur: #fff0d0; --t-ombre: 3px 3px 0 #d62a12; --t-taille: .88; --lueur: #ff7a2f;
  --t-filtre: saturate(1.15) contrast(1.1); --t-voile: linear-gradient(180deg, transparent 42%, rgba(58, 10, 6, .88));
}
/* Club House : l'étiquette d'un disque de club, ambre */
.theme-clubhouse {
  --t-police: var(--police-mono); --t-graisse: 600; --t-espace: .16em;
  --t-couleur: #fff3e3; --t-ombre: 0 0 18px rgba(255, 159, 28, .45); --t-taille: .72; --lueur: #ffa53a;
  --t-filtre: saturate(1.05) contrast(1.12); --t-voile: linear-gradient(180deg, transparent 42%, rgba(20, 10, 2, .88));
}
/* French House : la French Touch, Bodoni italique champagne */
.theme-frenchhouse {
  --t-police: var(--police-luxe); --t-style: italic; --t-graisse: 500; --t-casse: none; --t-espace: 0; --t-interligne: .95;
  --t-couleur: #f4e6c4; --t-ombre: 0 0 24px rgba(232, 211, 162, .35); --t-taille: 1.2; --lueur: #e8d3a2;
  --t-filtre: saturate(.95) contrast(1.1); --t-voile: linear-gradient(180deg, transparent 42%, rgba(10, 10, 16, .88));
}

/* ---------- Photos (pochettes, affiches, bannières) ---------- */
.pochette-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: var(--t-filtre); transition: transform .8s var(--ease); }
.avec-photo::after { content: ""; position: absolute; inset: 0; background: var(--t-voile); pointer-events: none; }
.pochette { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; flex-shrink: 0; container-type: inline-size; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pochette-mini { width: 48px; }
.pochette-cadre { position: absolute; inset: 4.5%; z-index: 1; border: 1px solid rgba(239, 220, 176, .3); border-radius: 2px; pointer-events: none; }
.pochette-marque { position: absolute; top: 9%; left: 9%; z-index: 1; display: flex; align-items: center; gap: .45em; color: #fff; font: 700 max(8px, 4.2cqi)/1 var(--police-titre); letter-spacing: .08em; }
.pochette-marque .logo-marque { width: 1.9em; height: 1.9em; }
.pochette-code { position: absolute; top: 9%; right: 9%; z-index: 1; font: 600 max(8px, 4.2cqi)/1 var(--police-mono); letter-spacing: .1em; color: rgba(255, 255, 255, .85); }
.pochette-bas { position: absolute; left: 9%; right: 9%; bottom: 9%; z-index: 1; display: grid; gap: .5em; justify-items: start; }
.pochette-style { display: flex; align-items: center; gap: .6em; font: 600 max(7px, 3.6cqi)/1.2 var(--police-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lueur); }
.pochette-style::before { content: ""; width: 1.8em; height: 2px; background: currentColor; }
.pochette-titre { --taille-base: clamp(15px, 10.5cqi, 58px); overflow-wrap: break-word; max-width: 100%; }
.pastille-bientot { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); font: 600 max(9px, 4.6cqi)/1 var(--police-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--or-clair); border: 1px solid var(--or); padding: .7em 1em; background: rgba(14, 10, 8, .6); backdrop-filter: blur(2px); }

/* ---------- La une (haut de l'accueil) ---------- */
.une { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(580px, 88svh, 860px); }
.une::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 60% at 70% 45%, rgba(240, 122, 46, .08), transparent 70%), radial-gradient(40% 50% at 10% 80%, rgba(240, 194, 123, .06), transparent 70%); }
/* Le logo vivant (logo.js) à droite du texte : une onde par catégorie */
.une-embleme { position: absolute; z-index: -1; top: 50%; left: 76%; width: min(34vw, 62svh, 520px); transform: translate(-50%, -50%); }
.une-embleme::before { content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 122, 46, .14), rgba(240, 122, 46, .04) 60%, transparent); }
.une::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--fond)); z-index: -1; pointer-events: none; }
.une-texte { position: relative; width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 72px var(--marge) 88px; pointer-events: none; }
.une-texte > * { max-width: 560px; pointer-events: auto; }
.marque {
  font-family: var(--police-titre); font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 7.6vw, 112px); line-height: .92; letter-spacing: .04em; margin: 0 0 18px; max-width: none;
  background: linear-gradient(180deg, #fffaf2 20%, #cdb98f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.une-baseline { font-family: var(--police-luxe); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; color: var(--texte); margin: 0 0 22px; }
.une-baseline em { font-size: 1em; }
.une-description { color: var(--texte-2); font-size: clamp(16px, 1.6vw, 18px); margin: 0 0 30px; max-width: 48ch; }
.facettes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 34px 0 0; padding: 0; }
.facette { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 14px; border: 1px solid var(--filet); border-radius: 3px; text-decoration: none; background: rgba(14, 10, 8, .45); backdrop-filter: blur(6px); transition: border-color .25s, background .25s, color .25s; }
.facette .losange { --c: var(--lueur); }
.facette-nom { font: 600 12.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; }
.facette-nb { font-size: 12.5px; color: var(--texte-3); }
.facette:hover, .facette:focus-visible, .facette.allumee { border-color: var(--lueur); background: color-mix(in srgb, var(--lueur) 12%, rgba(14, 10, 8, .6)); }
.facette:hover .losange, .facette:focus-visible .losange, .facette.allumee .losange { background: var(--lueur); transform: rotate(135deg); }
.une-hud { position: absolute; right: var(--marge); bottom: 38px; display: grid; gap: 4px; justify-items: end; font-family: var(--police-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); }
.une-hud #hud-etat { display: inline-flex; align-items: center; gap: 8px; }
.une-hud #hud-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.une-hud.en-lecture #hud-etat { color: var(--texte); }
.une-hud.en-lecture #hud-etat::before { background: var(--accent); border-color: var(--accent); animation: clignote 1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: .2; } }

/* ---------- Bandeau des styles qui défile ---------- */
.defile { overflow: hidden; border-block: 1px solid var(--filet); background: var(--fond-2); }
.defile-piste { display: flex; align-items: center; width: max-content; animation: defile 60s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-piste span { font-family: var(--t-police); font-style: var(--t-style); font-weight: var(--t-graisse); text-transform: var(--t-casse); letter-spacing: var(--t-espace); font-size: calc(20px * var(--t-taille)); line-height: 1; padding: 18px 0; white-space: nowrap; color: var(--texte); }
.defile-piste span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 1.6em; transform: rotate(45deg) translateY(-.15em); background: var(--lueur); vertical-align: middle; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Cartes de beats ---------- */
.grille-beats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); list-style: none; margin: 0; padding: 0; }
.carte-beat { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.carte-beat .pochette { width: 100%; }
.pochette-clic { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; background: transparent; }
.carte-beat:hover .pochette, .carte-beat.en-cours .pochette { transform: translateY(-6px); box-shadow: 0 26px 50px -24px var(--lueur); }
.carte-beat:hover .pochette-photo, .carte-beat.en-cours .pochette-photo { transform: scale(1.05); }
.carte-beat-infos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.carte-beat-infos .btn-lecture { width: 44px; height: 44px; }
.carte-beat.en-cours .btn-lecture { background: var(--lueur); }
.carte-beat-textes { display: grid; gap: 1px; min-width: 0; }
.carte-beat-infos .prod-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-beat-genre { font-size: 14px; color: var(--texte-2); }
.carte-beat .badge-nouveau { font-size: 9.5px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; display: inline-block; }
.carte-beat-textes .donnees { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.prod-titre { font-weight: 500; font-size: 16px; text-decoration: none; display: inline-block; }
.prod-titre:hover { color: var(--accent-clair); }
.badge-nouveau { font: 700 10.5px/1.4 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: #0e0a08; background: var(--or); border-radius: 2px; padding: 2px 7px; margin-left: 8px; vertical-align: 2px; }

/* ---------- Les univers : onglets par catégorie ---------- */
.onglets-univers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--filet); margin-bottom: 28px; }
.onglet-u { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: baseline; text-align: left; padding: 16px 14px 18px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--texte-2); transition: color .2s, border-color .3s; }
.onglet-u .num { grid-row: span 2; font-family: var(--police-luxe); font-style: italic; font-size: 22px; color: var(--texte-3); transition: color .2s; }
.onglet-u-nom { font: 700 clamp(12px, 1.3vw, 15px)/1.2 var(--police-titre); text-transform: uppercase; letter-spacing: .06em; }
.onglet-u-nb { font: 500 12px var(--police-mono); letter-spacing: .1em; color: var(--texte-3); }
.onglet-u:hover { color: var(--texte); }
.onglet-u[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--lueur); }
.onglet-u[aria-selected="true"] .num { color: var(--lueur); }
.panneau-u { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); animation: fondu .6s var(--ease); }
.panneau-u:focus-visible { outline-offset: 8px; }
@keyframes fondu { from { opacity: 0; transform: translateY(10px); } }
.univers-affiche { position: relative; display: flex; align-items: flex-end; aspect-ratio: 21 / 8; overflow: hidden; border-radius: 4px; text-decoration: none; container-type: inline-size; }
.univers-affiche.avec-photo::after { background: linear-gradient(90deg, rgba(14, 10, 8, .88), rgba(14, 10, 8, .35) 55%, transparent), var(--t-voile); }
.univers-affiche:hover .pochette-photo { transform: scale(1.04); }
.univers-texte { position: relative; z-index: 1; display: grid; gap: 12px; padding: clamp(18px, 6cqi, 32px); }
.univers-texte .t-titre { --taille-base: clamp(26px, 6.4cqi, 72px); }
.univers-desc { color: #e6ded2; max-width: 44ch; }
.univers-texte .lien-fleche { justify-self: start; }
.grille-sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 42%), 1fr)); gap: clamp(12px, 1.6vw, 20px); list-style: none; margin: 0; padding: 0; }
.pochette-sg { display: grid; gap: 10px; text-decoration: none; }
.pochette-sg .pochette { width: 100%; }
.pochette-sg .pochette-titre { --taille-base: clamp(15px, 11cqi, 44px); }
.pochette-sg:hover .pochette { transform: translateY(-5px); box-shadow: 0 22px 44px -22px var(--lueur); }
.pochette-sg:hover .pochette-photo { transform: scale(1.06); }
.pochette-sg.vide .pochette-photo { filter: var(--t-filtre) grayscale(.55) brightness(.7); }
.sg-infos { display: grid; gap: 2px; }
.sg-infos .donnees { font-size: 12px; }
.sg-compte { font-size: 14px; color: var(--texte); }
.pochette-sg:hover .sg-compte { color: var(--lueur); }

/* ---------- Blocs pleine largeur ---------- */
.bloc { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.bloc-album { background: linear-gradient(180deg, var(--fond), var(--orage-fond) 18%, var(--orage-fond) 82%, var(--fond)); }
.bloc-album .surtitre { color: var(--orage); }
.bloc-album .surtitre .num::after { background: var(--orage); }
.bloc-collectif { background: linear-gradient(180deg, var(--fond), var(--brique-fond) 18%, var(--brique-fond) 82%, var(--fond)); }
.bloc-collectif .surtitre { color: var(--brique); }
.bloc-collectif .surtitre .num::after { background: var(--brique); }
.bloc-radio { background: linear-gradient(180deg, var(--fond), #0b1312 25%, #0b1312 75%, var(--fond)); }
.bloc-radio .surtitre { color: var(--radio); }
.bloc-radio .surtitre .num::after { background: var(--radio); }
.bloc-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bloc-grille-inverse { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.bloc-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 4px; }
.bloc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); }
.bloc-texte > p:not(.surtitre) { color: var(--texte-2); max-width: 58ch; }
.bloc-texte .hero-actions { margin-top: 28px; }

/* Coins de viseur autour des photos */
.viseur { position: relative; }
.viseur::before, .viseur::after { content: ""; position: absolute; width: 24px; height: 24px; border: 1px solid var(--viseur, var(--or)); pointer-events: none; z-index: 2; }
.viseur::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.viseur::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.bloc-album .viseur { --viseur: var(--orage); }

.liste-singles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; max-width: 460px; }
.liste-singles li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(169, 184, 207, .18); }
.liste-singles li:first-child { border-top: 1px solid rgba(169, 184, 207, .18); }
.liste-singles b { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: 20px; }
.liste-singles .donnees { color: var(--orage); }

/* ---------- Le savoir-faire : trois photos, trois étapes ---------- */
.piliers-photo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.piliers-photo figure { position: relative; margin: 0 0 18px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; }
.piliers-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.06) sepia(.12); transition: transform 1.2s var(--ease); }
.piliers-photo li:hover img { transform: scale(1.05); }
.piliers-photo figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(14, 10, 8, .7)); }
.piliers-photo figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); }
.piliers-photo h3 { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; margin: 0 0 8px; color: var(--or-clair); }
.piliers-photo p { margin: 0; color: var(--texte-2); }

/* ---------- Manifeste ---------- */
.manifeste { overflow: hidden; isolation: isolate; border-block: 1px solid var(--filet); }
.manifeste-fond { position: absolute; inset: 0; z-index: -1; }
.manifeste-fond img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.55) sepia(.2); }
.manifeste-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 10, 8, .96) 0%, rgba(14, 10, 8, .82) 45%, rgba(14, 10, 8, .55) 100%), linear-gradient(180deg, var(--fond), transparent 20%, transparent 80%, var(--fond)); }
.manifeste-citation { margin: 0 0 24px; font-family: var(--police-luxe); font-weight: 500; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -.01em; max-width: 20ch; }
.manifeste-citation p { margin: 0; }
.manifeste-citation em { color: var(--accent); }
.manifeste-texte { color: #d6cdbf; font-size: clamp(16px, 1.8vw, 19px); max-width: 60ch; margin: 0 0 44px; }
.piliers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 980px; }
.piliers li { display: grid; align-content: start; gap: 6px; padding-top: 18px; border-top: 1px solid var(--filet); }
.piliers b { font: 600 13px var(--police-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--or-clair); }
.piliers span { color: var(--texte-2); font-size: 15px; }
.manifeste-signature { margin: 40px 0 0; font-family: var(--police-luxe); font-style: italic; font-size: 18px; color: var(--or); }

/* ---------- Le collectif : les villes ---------- */
.villes-cartes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 0 34px; padding: 0; }
.ville-carte { position: relative; aspect-ratio: 3 / 4.4; overflow: hidden; border-radius: 4px; border: 1px solid transparent; }
.ville-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05) brightness(.8) sepia(.12); transition: transform 1s var(--ease), filter .6s; }
.ville-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14, 10, 8, .92)); }
.ville-carte:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.05) brightness(.9); }
.ville-texte { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: grid; gap: 2px; }
.ville-texte b { font: 700 clamp(11px, 1.1vw, 15px)/1.1 var(--police-titre); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.ville-texte .donnees { font-size: 11.5px; color: #d6cdbf; }
.ville-ici, .ville-bientot { justify-self: start; margin-top: 8px; font: 600 10px var(--police-mono); letter-spacing: .16em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; }
.ville-ici { background: var(--brique); color: #1a0d08; }
.ville-bientot { border: 1px solid rgba(239, 220, 176, .3); color: var(--texte-2); }
.ville-carte.premiere { border-color: var(--brique); }

/* ---------- La radio ---------- */
.poste { position: relative; display: grid; gap: 16px; padding: clamp(18px, 2.6vw, 28px); border: 1px solid rgba(111, 208, 192, .22); border-radius: 8px; background: linear-gradient(160deg, #111a19, #0c0f0e 60%); box-shadow: 0 40px 80px -40px rgba(111, 208, 192, .25), inset 0 1px 0 rgba(255, 255, 255, .04); }
.poste-ecran { display: grid; gap: 14px; padding: 18px; border-radius: 6px; background: #070b0a; border: 1px solid rgba(111, 208, 192, .14); }
.poste-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.poste-nom { margin: 0; font: 700 14px var(--police-titre); text-transform: uppercase; letter-spacing: .08em; }
.poste-freq { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.poste-freq b { font: 600 28px/1 var(--police-mono); color: var(--radio); letter-spacing: .04em; text-shadow: 0 0 18px rgba(111, 208, 192, .5); }
.cadran { position: relative; height: 34px; }
.cadran-graduations { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(111, 208, 192, .5) 0 1px, transparent 1px 10px) bottom / 100% 40% no-repeat, repeating-linear-gradient(90deg, rgba(111, 208, 192, .8) 0 1px, transparent 1px 50px) bottom / 100% 75% no-repeat; opacity: .6; }
.cadran-aiguille { position: absolute; top: 0; bottom: 0; left: calc(8% + var(--canal, 0) * 28%); width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); transition: left .8s var(--ease); }
.poste-maintenant { display: grid; gap: 2px; min-height: 64px; }
.poste-maintenant b, .poste-maintenant a { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.2; text-decoration: none; }
.poste-maintenant a:hover { color: var(--radio); }
.poste-egaliseur { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.poste-egaliseur span { flex: 1; min-width: 2px; border-radius: 1px; background: linear-gradient(180deg, var(--radio), rgba(111, 208, 192, .15)); opacity: .5; transform-origin: bottom; transform: scaleY(.25); transition: transform .4s; }
.poste.en-lecture .poste-egaliseur span { opacity: .9; animation: egaliseur .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes egaliseur { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.canaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.canal { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 3px; background: transparent; color: var(--texte-2); text-align: left; font: 600 11.5px/1.25 var(--police-mono); letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s, color .2s, background .2s; }
.canal-bientot { font: 500 10px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.canal span { overflow-wrap: anywhere; }
.canal:hover { color: var(--texte); border-color: var(--lueur); }
.canal[aria-pressed="true"] { color: var(--texte); border-color: var(--lueur); background: color-mix(in srgb, var(--lueur) 12%, transparent); }
.canal[aria-pressed="true"] .losange { background: var(--lueur); }
.btn-radio { width: 100%; }
.a-suivre .surtitre { color: var(--radio); margin-bottom: 10px; }
.radio-suite { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.radio-suite li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.radio-suite .pochette { width: 40px; }
.radio-suite a { text-decoration: none; font-weight: 500; }
.radio-suite a:hover { color: var(--radio); }
.radio-suite small { display: block; color: var(--texte-3); font-size: 12.5px; }
.radio-suite .suite-vide { display: block; color: var(--texte-3); font-size: 14px; }
.radio-une { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 7vw, 96px); background: radial-gradient(60% 70% at 85% 30%, rgba(111, 208, 192, .09), transparent 70%); }
/* Le logo de la radio et ses ondes */
.radio-titre { display: grid; justify-items: start; gap: 18px; margin-bottom: 10px; }
.radio-sceau { position: relative; width: clamp(120px, 12vw, 160px); }
.poste-marque { display: inline-flex; align-items: center; gap: 10px; }
.poste-marque .logo-marque { width: 26px; height: 26px; }
.radio-sceau .ondes { position: absolute; inset: 0; pointer-events: none; }
.radio-sceau .ondes i { position: absolute; inset: 14%; border: 1px solid var(--teinte); border-radius: 50%; opacity: 0; animation: onde 4.2s cubic-bezier(.2, .6, .4, 1) infinite; }
.radio-sceau .ondes i:nth-child(2) { animation-delay: 1.4s; }
.radio-sceau .ondes i:nth-child(3) { animation-delay: 2.8s; }
@keyframes onde { 0% { transform: scale(.75); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
.radio-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.radio-texte .surtitre::before { display: none; }
.statut { display: inline-flex; align-items: center; gap: 8px; font-family: var(--police-mono); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); border: 1px solid var(--bord); border-radius: 2px; padding: 5px 12px; text-decoration: none; }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.statut-live { color: var(--radio); border-color: rgba(111, 208, 192, .4); }
.statut-live::before { background: currentColor; animation: clignote 1.4s steps(2) infinite; }
a.statut { color: var(--texte); border-color: var(--accent); }
a.statut::before { background: var(--accent); border-color: var(--accent); }
.raccourcis-radio { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--texte-3); }
.antenne { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.antenne li { border: 1px solid var(--filet); border-radius: 2px; padding: 6px 14px; font-size: 14px; }

/* ---------- Encart « sur mesure » ---------- */
.encart { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--filet); border-radius: 6px; background: linear-gradient(90deg, rgba(14, 10, 8, .96) 30%, rgba(14, 10, 8, .6)), url("images/styles/amapiano-1.jpg") center / cover; }
.encart h2 { margin: 0 0 8px; font: 700 clamp(20px, 2.4vw, 28px)/1.15 var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.encart p { margin: 0; color: var(--texte-2); max-width: 56ch; }

/* ---------- Le logo vivant (logo.js) ----------
   --i0, --i1, --i2 : allumage de chaque onde (une par catégorie), --s : battement au tempo */
:where(.logo-signe) { display: block; width: 100%; height: auto; overflow: visible; }   /* :where = sans priorité : les tailles des logos l'emportent */
.logo-vivant .lg-ondes, .logo-vivant .lg-lueurs { transform: scale(var(--s, 1)); transform-origin: 33px 50px; }
.logo-vivant .lg-onde { transition: stroke-opacity .2s; }
.logo-vivant .lg-onde[data-g="0"] { stroke-opacity: calc(.3 + .7 * var(--i0, .4)); }
.logo-vivant .lg-onde[data-g="1"] { stroke-opacity: calc(.3 + .7 * var(--i1, .4)); }
.logo-vivant .lg-onde[data-g="2"] { stroke-opacity: calc(.3 + .7 * var(--i2, .4)); }
.lg-lueur { opacity: 0; }
.lg-lueur[data-g="0"] { opacity: calc(var(--i0, 0) * var(--i0, 0) * .85); }
.lg-lueur[data-g="1"] { opacity: calc(var(--i1, 0) * var(--i1, 0) * .85); }
.lg-lueur[data-g="2"] { opacity: calc(var(--i2, 0) * var(--i2, 0) * .85); }
.lg-lueurs, .lg-echos { pointer-events: none; }
/* l'émission : une onde fine part du disque et s'efface, comme un signal radio */
.lg-echo { opacity: 0; transform-origin: 33px 50px; animation: emission 5s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(var(--k, 0) * 2.5s); }
.logo-vivant.joue .lg-echo { animation-duration: 2.6s; animation-delay: calc(var(--k, 0) * 1.3s); }
@keyframes emission { 0% { opacity: .6; transform: scale(.66); } 100% { opacity: 0; transform: scale(1.45); } }
.logo-vivant.cliquable .lg-cible { cursor: pointer; }

/* ---------- En-têtes des pages intérieures (avec le logo vivant) ---------- */
.page-entete { position: relative; overflow: hidden; background: radial-gradient(50% 80% at 85% 50%, color-mix(in srgb, var(--teinte) 10%, transparent), transparent 70%); }
.page-entete-grille { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 26vw, 340px); align-items: center; gap: 24px; min-height: clamp(220px, 30vw, 360px); padding-top: clamp(24px, 4vw, 48px); }
.page-entete-texte .surtitre { color: var(--teinte); }
.page-entete-texte .sous-titre { margin-bottom: 8px; }
.page-embleme { position: relative; width: 100%; max-width: 300px; justify-self: center; padding-block: 12px; }
.page-embleme::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--teinte) 16%, transparent), transparent); }

/* ---------- Catalogue ---------- */
.section-catalogue { padding-top: 28px; }
.onglets-cat { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--filet); margin-bottom: 18px; }
.onglets-cat::-webkit-scrollbar { display: none; }
.onglet-cat { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 18px 14px 0; margin-right: 22px; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; color: var(--texte-2); font: 700 12.5px var(--police-titre); text-transform: uppercase; letter-spacing: .06em; transition: color .2s, border-color .3s; }
.onglet-cat small { font: 500 12px var(--police-mono); color: var(--texte-3); letter-spacing: .06em; }
.onglet-cat .losange { --c: var(--lueur); }
.onglet-cat:hover { color: var(--texte); }
.onglet-cat.actif { color: var(--texte); border-bottom-color: var(--lueur); }
.onglet-cat.actif .losange { background: var(--lueur); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.puce { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; border: 1px solid var(--bord); background: transparent; color: var(--texte-2); border-radius: 3px; padding: 6px 14px; font-size: 14px; text-decoration: none; transition: color .2s, border-color .2s, background .2s; }
.puce small { font: 500 11.5px var(--police-mono); color: var(--texte-3); }
.puce .losange { --c: var(--lueur); }
.puce:hover { color: var(--texte); border-color: var(--lueur); }
.puce.actif { color: var(--texte); border-color: var(--lueur); background: color-mix(in srgb, var(--lueur) 14%, transparent); }
.puce.actif .losange { background: var(--lueur); }
.puce-vide { opacity: .72; }
.filtres { position: sticky; top: calc(var(--haut-entete) + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 calc(var(--marge) * -1) 18px; padding: 12px var(--marge); background: rgba(14, 10, 8, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--filet); }
.recherche { flex: 1 1 220px; min-height: 44px; background: var(--surface); border: 1px solid var(--bord); border-radius: 3px; padding: 10px 16px; outline: none; font-size: 15px; }
.recherche:focus { border-color: var(--or); }
.recherche::placeholder { color: var(--texte-3); }
.selection { min-height: 44px; background: var(--surface); border: 1px solid var(--bord); border-radius: 3px; padding: 9px 12px; font-size: 14px; }
.selection:focus { border-color: var(--or); }
.btn-filtre-favoris { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--bord); border-radius: 3px; background: transparent; color: var(--texte-2); font-size: 14px; }
.btn-filtre-favoris svg { width: 18px; height: 18px; }
.btn-filtre-favoris:hover { color: var(--texte); border-color: var(--accent); }
.btn-filtre-favoris[aria-pressed="true"] { color: var(--texte); border-color: var(--accent); background: rgba(240, 122, 46, .12); }
.btn-filtre-favoris[aria-pressed="true"] svg { fill: var(--accent); color: var(--accent); }
.nb-resultats { margin: 0 0 0 auto; font: 500 12.5px var(--police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }

/* ---------- Liste des beats ---------- */
.liste-prods { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
.liste-prods.apparait > li { animation: fondu .5s var(--ease) both; }
.liste-prods.apparait > li:nth-child(2) { animation-delay: .04s; }
.liste-prods.apparait > li:nth-child(3) { animation-delay: .08s; }
.liste-prods.apparait > li:nth-child(4) { animation-delay: .12s; }
.liste-prods.apparait > li:nth-child(n+5) { animation-delay: .16s; }
.ligne-prod { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px 104px 56px auto; align-items: center; gap: 16px; padding: 10px 12px 10px 10px; background: var(--surface); border: 1px solid transparent; border-radius: 4px; transition: border-color .2s, background .2s; }
.ligne-prod:hover { border-color: var(--bord); background: var(--surface-2); }
.ligne-prod.en-cours { border-color: color-mix(in srgb, var(--lueur) 60%, transparent); background: color-mix(in srgb, var(--lueur) 6%, var(--surface)); }
.ligne-prod .pochette { width: 64px; }
.btn-jouer { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; background: rgba(0, 0, 0, .3); color: #fff; opacity: 0; transition: opacity .15s; }
.btn-jouer svg { width: 24px; height: 24px; }
.ligne-prod:hover .btn-jouer, .ligne-prod.en-cours .btn-jouer, .btn-jouer:focus-visible, .res-beats li:hover .btn-jouer { opacity: 1; }
.ligne-textes { min-width: 0; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texte-2); background: var(--fond); border-radius: 2px; padding: 2px 9px; text-decoration: none; }
.tag-style .losange { --c: var(--lueur); width: 6px; height: 6px; }
a.tag:hover { color: var(--texte); }
.col-meta { color: var(--texte-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.col-meta b { display: block; font: 500 10.5px var(--police-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-3); }
.prix-des { font-size: 13px; color: var(--texte-2); margin: 0 10px 0 4px; white-space: nowrap; }
.col-action { display: flex; align-items: center; justify-content: flex-end; }
.vide { list-style: none; display: grid; justify-items: center; gap: 16px; text-align: center; color: var(--texte-2); padding: 44px 20px; border: 1px dashed var(--bord); border-radius: 4px; }
.vide p { margin: 0; }
.vide b { color: var(--texte); }

.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: etape; list-style: none; margin: 28px 0 0; padding: 0; }
.etapes li { padding-top: 18px; border-top: 1px solid var(--filet); }
.etapes li::before { counter-increment: etape; content: "0" counter(etape); font-family: var(--police-luxe); font-style: italic; font-size: 28px; color: var(--accent); display: block; line-height: 1; margin-bottom: 12px; }
.etapes h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.etapes p { margin: 0; color: var(--texte-2); font-size: 15px; }

/* ---------- Bannière d'un univers (catalogue) ---------- */
.banniere { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(320px, 42vw, 500px); }
.banniere-fond { position: absolute; inset: 0; z-index: -1; }
.banniere-fond.avec-photo::after { background: linear-gradient(180deg, rgba(14, 10, 8, .2), rgba(14, 10, 8, .55) 55%, var(--fond)), linear-gradient(90deg, rgba(14, 10, 8, .6), transparent 60%); }
.banniere-fond .pochette-photo { animation: travelling 22s ease-out both; }
@keyframes travelling { from { transform: scale(1.12); } to { transform: scale(1); } }
.banniere-texte { position: relative; width: 100%; padding-top: 80px; padding-bottom: 28px; }
.banniere .surtitre { color: var(--lueur); flex-wrap: wrap; }
.banniere .surtitre a { color: inherit; }
.banniere-nom { margin: 0 0 14px; --taille-base: clamp(36px, 6.6vw, 90px); }
.banniere-desc { color: #e2d9cc; font-size: clamp(16px, 1.8vw, 19px); max-width: 56ch; margin: 0 0 12px; }

/* ---------- Fiche d'un beat ---------- */
.fiche-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 24px; font-size: 14px; }
.fiche-nav a { color: var(--texte-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.fiche-nav a:hover { color: var(--texte); }
.fiche-nav span { display: flex; gap: 20px; }
.fiche { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); padding: 16px 0 56px; align-items: start; }
.fiche-visuel { display: grid; gap: 14px; position: sticky; top: calc(var(--haut-entete) + 20px); }
.fiche .pochette { width: 100%; box-shadow: 0 40px 90px -40px var(--lueur); }
.fiche-style { display: inline-flex; align-items: center; gap: 10px; color: var(--texte-2); text-decoration: none; font: 500 12.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; }
.fiche-style .losange { --c: var(--lueur); }
.fiche-style:hover { color: var(--lueur); }
.fiche h1 { --taille-base: clamp(40px, 6vw, 74px); margin: 0 0 16px; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--texte-2); margin-bottom: 24px; }
.fiche-meta span b { color: var(--texte); font-weight: 500; }
.fiche-ecoute { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.fiche .btn-lecture { width: 60px; height: 60px; background: var(--lueur); }
.fiche .btn-lecture svg { width: 24px; height: 24px; }
.onde { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 60px; cursor: pointer; border-radius: 4px; }
.onde span { flex: 1; min-width: 1px; background: #3a342e; border-radius: 1px; transition: background .1s; }
.onde span.joue { background: var(--lueur); }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.fiche h2 { font: 700 14px var(--police-titre); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.fil { gap: 8px; flex-wrap: wrap; }
.fil::before { display: none; }
.fil a { color: inherit; }
.fil > span { color: var(--texte-3); margin-left: 6px; }

/* ---------- Licences ---------- */
.licences-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.carte-licence { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--surface); border: 1px solid var(--bord); border-radius: 4px; padding: 20px; color: var(--texte); }
button.carte-licence { transition: border-color .2s, transform .12s, background .2s; }
button.carte-licence:hover { border-color: var(--or); background: var(--surface-2); }
button.carte-licence:active { transform: scale(.98); }
.carte-licence.choisie { border-color: var(--accent); background: #1d130c; }
.carte-licence.conseillee { border-color: rgba(240, 194, 123, .45); }
.carte-licence.conseillee::before { content: "Conseillée"; position: absolute; top: -10px; right: 14px; font: 700 10.5px/1.5 var(--police-mono); text-transform: uppercase; letter-spacing: .14em; background: var(--or); color: #0e0a08; padding: 1px 8px; border-radius: 2px; }
.licence-nom { font: 600 12.5px var(--police-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--texte-2); }
.licence-prix { font-family: var(--police-luxe); font-weight: 500; font-size: 32px; line-height: 1.1; }
.licence-resume { color: var(--texte-2); font-size: 14px; }
.carte-licence ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--texte-2); }
.carte-licence li { padding: 3px 0 3px 18px; position: relative; }
.carte-licence li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--or); }
.fiche-achat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.tableau-defilant { overflow-x: auto; border: 1px solid var(--filet); border-radius: 4px; }
.comparatif { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.comparatif th, .comparatif td { padding: 15px 16px; text-align: center; border-bottom: 1px solid var(--bord); }
.comparatif th:first-child, .comparatif td:first-child { text-align: left; color: var(--texte-2); font-weight: 400; }
.comparatif thead th { background: var(--surface); font: 600 12.5px var(--police-mono); text-transform: uppercase; letter-spacing: .14em; }
.comparatif thead th span { display: block; font-family: var(--police-luxe); font-size: 26px; letter-spacing: 0; text-transform: none; color: var(--or-clair); margin-top: 4px; }
.comparatif tr:last-child td, .comparatif tr:last-child th { border-bottom: 0; }
.oui { color: var(--ok); font-weight: 600; }
.non { color: var(--texte-3); }
.note { font-size: 13.5px; color: var(--texte-2); margin-top: 14px; }
.faq { display: flex; flex-direction: column; gap: 0; max-width: 780px; border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 500; padding: 14px 0; min-height: 44px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--police-luxe); font-size: 24px; line-height: 1; color: var(--or); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--texte-2); margin: 0 0 16px; }

/* ---------- Formulaires ---------- */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.liste-avantages { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
.liste-avantages li { padding-left: 28px; position: relative; color: var(--texte-2); }
.liste-avantages li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--accent); }
/* Joindre Léo directement : téléphone (appel, SMS), e-mail, fiche contact à enregistrer */
.contact-direct { margin-top: clamp(28px, 4vw, 40px); padding-top: 22px; border-top: 1px solid var(--filet); display: grid; gap: 14px; justify-items: start; }
.contact-direct .surtitre { margin: 0; }
.contact-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.contact-liste li { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.contact-icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--filet); border-radius: 50%; color: var(--or); }
.contact-icone svg { width: 19px; height: 19px; }
.contact-valeur { min-width: 0; overflow-wrap: anywhere; color: var(--texte); text-decoration: none; font: italic 500 clamp(19px, 2vw, 24px)/1.2 var(--police-luxe); transition: color .2s; }
.contact-valeur:hover { color: var(--or-clair); }
.contact-action { display: inline-flex; align-items: center; min-height: 36px; margin-left: 6px; padding: 0 14px; border: 1px solid var(--filet); border-radius: 3px; color: var(--texte-2); text-decoration: none; font: 600 11.5px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; }
.contact-action:hover { border-color: var(--or); color: var(--or-clair); }
.contact-copier { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--texte-3); transition: color .2s, border-color .2s; }
.contact-copier svg { width: 18px; height: 18px; }
.contact-copier:hover { color: var(--or-clair); border-color: var(--filet); }
.contact-fiche { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--or); font: 600 12px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.contact-fiche::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; letter-spacing: 0; }
.contact-fiche:hover { color: var(--or-clair); }
body[data-page="ateliers"] .contact-icone, body[data-page="ateliers"] .contact-fiche { color: var(--laurier); }
.btn-tel svg { width: 17px; height: 17px; }
.btn-tel { letter-spacing: .1em; }
.pied-contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pied-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.pied-contact svg { width: 16px; height: 16px; color: var(--or); }
.formulaire { background: var(--surface); border: 1px solid var(--filet); border-radius: 6px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; }
.formulaire h2 { margin: 0; font: 700 16px var(--police-titre); text-transform: uppercase; letter-spacing: .06em; }
.formulaire .note { margin: 0; }
.champ { display: grid; gap: 7px; }
.champ label { font-size: 14px; font-weight: 500; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 46px; background: var(--fond); border: 1px solid var(--bord); border-radius: 3px; padding: 11px 14px; outline: none; font-size: 16px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(240, 194, 123, .12); }
.champ input:user-invalid, .champ textarea:user-invalid { border-color: #e5383b; }
.champ textarea { min-height: 120px; resize: vertical; }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.message-form { font-size: 14px; color: var(--texte); margin: 0; }
.message-form.message-ok { color: var(--ok); }
.message-form:empty { display: none; }

/* ---------- Artiste ---------- */
.artiste-une { position: relative; overflow: hidden; background: radial-gradient(45% 70% at 82% 40%, rgba(169, 184, 207, .09), transparent 70%); }
.artiste-une-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "nom portrait" "bio portrait"; gap: 28px clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(28px, 4vw, 56px); }
.artiste-une-nom { grid-area: nom; align-self: end; }
.artiste-une-bio { grid-area: bio; }
.artiste-une-bio .artiste-bio { margin-bottom: 26px; }
.artiste-statut { margin: 18px 0 0; font: 600 13px var(--police-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--orage); }
.artiste-portrait { grid-area: portrait; position: relative; margin: 0; width: 100%; aspect-ratio: 2 / 3; max-height: 84svh; overflow: hidden; border-radius: 4px; background: var(--surface); --viseur: rgba(239, 220, 176, .7); }
.artiste-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.92) contrast(1.04); }
.artiste-portrait figcaption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 48px 18px 16px; background: linear-gradient(transparent, rgba(8, 8, 10, .78)); color: #efe6d6; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.artiste-nom { font-family: var(--police-titre); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 8vw, 116px); line-height: 1; letter-spacing: .02em; margin: 0; }
.artiste-nom span { display: block; }
.artiste-nom span + span { font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--orage); font-size: 1.05em; }
.artiste-colonnes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: start; padding-top: 24px; }
.artiste-bio { font-size: clamp(17px, 1.9vw, 21px); color: var(--texte); max-width: 46ch; margin: 0; }
.metiers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.metiers li { font-family: var(--police-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--filet); border-radius: 2px; padding: 5px 10px; color: var(--texte-2); }
.chapitres { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: chap; }
.chapitres li { counter-increment: chap; padding: 20px 20px 4px 0; border-top: 1px solid rgba(169, 184, 207, .3); position: relative; }
.chapitres li::before { content: "0" counter(chap); display: block; font-family: var(--police-luxe); font-style: italic; font-size: 22px; color: var(--orage); margin-bottom: 8px; }
.chapitres li::after { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; transform: rotate(45deg); background: var(--orage); }
.chapitres li:last-child::after { background: var(--accent); }
.chapitres b { display: block; font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.chapitres span { color: var(--texte-2); font-size: 15px; }
.grille-singles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); list-style: none; margin: 0; padding: 0; }
.single { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 4px; background: var(--surface); --viseur: rgba(239, 220, 176, .6); }
.single img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); transition: transform 1s var(--ease); }
.single:hover img { transform: scale(1.04); }
.single-voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 8, 10, .92)); }
.single-texte { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: grid; gap: 8px; justify-items: start; }
.single-texte .donnees { color: var(--orage); }
.single-titre { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; margin: 0; }
.single .statut { background: rgba(8, 8, 10, .6); color: var(--texte); border-color: rgba(239, 220, 176, .3); }

/* Collectif */
.etapes-num { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: etape; }
.etapes-num li { counter-increment: etape; border-top: 1px solid var(--filet); padding-top: 18px; }
.etapes-num li::before { content: "0" counter(etape); display: block; font-family: var(--police-luxe); font-style: italic; font-size: 30px; line-height: 1; color: var(--puce, var(--brique)); margin-bottom: 12px; }
.etapes-num b { display: block; margin-bottom: 4px; font-weight: 500; }
.etapes-num span { color: var(--texte-2); font-size: 15px; }
.atouts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.atouts li { display: grid; gap: 2px; padding-left: 26px; position: relative; }
.atouts li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px; transform: rotate(45deg); background: var(--puce, var(--brique)); }
.atouts b { font-size: 17px; font-weight: 500; }
.atouts span { color: var(--texte-2); }

/* Artiste : le parcours. Une carte par voyage, dans la police et la couleur (--lueur) de l'univers
   le plus proche : un quadrillage de carte marine, une balise, les coordonnées */
.escales { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.escale { display: grid; align-content: start; gap: 10px; }
.escale > p { margin: 8px 0 2px; color: var(--texte-2); font-size: 15px; }
.escale .lien-fleche { justify-self: start; white-space: normal; }
.escale-carte {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; container-type: inline-size; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--lueur) 26%, transparent);
  background:
    radial-gradient(58% 42% at 50% 40%, color-mix(in srgb, var(--lueur) 18%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, rgba(239, 220, 176, .05) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(90deg, rgba(239, 220, 176, .05) 0 1px, transparent 1px 10%),
    linear-gradient(165deg, #17120f, #0e0a08 70%);
  transition: border-color .4s;
}
.escale:hover .escale-carte { border-color: color-mix(in srgb, var(--lueur) 60%, transparent); }
.escale-cadre { position: absolute; inset: 4.5%; z-index: 2; border: 1px solid rgba(239, 220, 176, .2); border-radius: 2px; pointer-events: none; }
.escale-haut { position: absolute; top: 9%; left: 9%; right: 9%; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; font: 600 max(10.5px, 3.7cqi)/1.2 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; }
.escale-region { color: var(--lueur); }
.escale-coord { color: rgba(243, 238, 230, .72); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.escale-bas { position: absolute; left: 9%; right: 9%; bottom: 9%; z-index: 2; display: grid; gap: 10px; justify-items: start; }
.escale-nom { margin: 0; --taille-base: 12.5cqi; overflow-wrap: anywhere; }
.escale-duree { font: 600 max(10px, 3.4cqi)/1 var(--police-mono); letter-spacing: .16em; text-transform: uppercase; padding: 5px 8px; border-radius: 2px; background: var(--lueur); color: #0e0a08; }
/* La balise : deux cercles, un réticule, un losange qui émet */
.escale-cible {
  position: absolute; left: 50%; top: 40%; z-index: 1; width: 40cqi; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lueur) 40%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--lueur) 28%, transparent) 0 0) center / 1px 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--lueur) 28%, transparent) 0 0) center / 100% 1px no-repeat;
}
.escale-cible::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--lueur) 60%, transparent); animation: tourne 48s linear infinite; }
.escale-cible::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); background: var(--lueur); animation: balise 2.8s var(--ease) infinite; animation-delay: calc(var(--d, 0) * .9s); }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes balise { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lueur) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 20px transparent; } }
.parcours-france { margin: 0 0 18px; color: var(--or); }
.villes-parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.villes-parcours .ville-carte { aspect-ratio: 16 / 9; }
.villes-parcours .ville-texte b { font-size: clamp(12px, 1.5vw, 19px); }
.parcours-fin { margin: clamp(36px, 5vw, 56px) 0 0; font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.2; color: var(--or-clair); max-width: 32ch; text-wrap: balance; }

/* Artiste : la carte du monde du parcours (carte.js). Une trame de points champagne, chaque voyage allumé
   dans la couleur de son univers (--lueur), la France en orange, des routes qui partent de la France.
   Le plan garde les proportions de la carte ; sur téléphone, le cadre en montre le centre (l'Atlantique). */
.carte-monde { margin: 0 0 clamp(36px, 5vw, 60px); }
.carte-cadre { position: relative; aspect-ratio: var(--rapport); overflow: hidden; }
.carte-cadre::after {   /* les bords se fondent dans la page */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--fond), transparent 7%, transparent 93%, var(--fond)), linear-gradient(180deg, var(--fond), transparent 9%, transparent 90%, var(--fond));
}
.carte-plan { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: var(--rapport); translate: -50% 0; }
.carte-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.carte-svg path { fill: none; stroke-linecap: round; }
.carte-grille path { stroke: rgba(240, 194, 123, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte-grille .carte-tropique { stroke: rgba(240, 194, 123, .16); stroke-dasharray: 2 6; }
.carte-terre { stroke: rgba(239, 220, 176, .3); stroke-width: .46; }
.carte-pays { stroke: var(--accent); stroke-width: .5; }
.carte-halo { stroke: var(--lueur); stroke-width: .5; transition: opacity .4s; }
.carte-halo-loin { opacity: .42; }
.carte-ville { fill: var(--or-clair); stroke: var(--fond); stroke-width: .12; }
.carte-ville.ici { fill: #fff4e6; }
.carte-route { stroke: var(--lueur); stroke-width: .17; opacity: .8; stroke-dasharray: 1; transition: opacity .4s, stroke-width .4s; }
.carte-comete { stroke: #fff4e6; stroke-width: .36; stroke-dasharray: .035 2; stroke-dashoffset: .035; opacity: 0; }
.carte-monde:is(.vu, .fait) .carte-route { animation: carte-trace 1.8s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * .3s); }
.carte-monde .carte-comete { animation: carte-comete 4.8s cubic-bezier(.45, 0, .3, 1) infinite; animation-delay: calc(2.2s + var(--i, 0) * 1.6s); }
@keyframes carte-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes carte-comete { 0% { stroke-dashoffset: .035; opacity: 0; } 6%, 86% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
/* un voyage survolé (sur la carte ou sa carte d'escale) : sa route s'allume, les autres s'effacent */
.carte-monde.un-choisi .carte-route:not(.actif) { opacity: .22; }
.carte-monde.un-choisi .carte-halo:not(.actif) { opacity: .25; }
.carte-route.actif { opacity: 1; stroke-width: .26; }
.carte-ocean { position: absolute; z-index: 1; translate: -50% -50%; font: 500 11px var(--police-mono); letter-spacing: .5em; text-transform: uppercase; color: rgba(240, 194, 123, .34); white-space: nowrap; pointer-events: none; }
.carte-points { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.carte-point { position: absolute; width: 0; height: 0; }
.carte-point button {
  position: absolute; left: 0; top: 0; translate: -15px -50%; pointer-events: auto;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--texte); text-align: left;
}
.carte-balise { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; }
.carte-balise::before { content: ""; width: 9px; height: 9px; rotate: 45deg; background: var(--lueur); box-shadow: 0 0 14px var(--lueur); }
.carte-balise::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--lueur); opacity: 0; animation: carte-sonar 3s var(--ease) infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes carte-sonar { 0% { transform: scale(.3); opacity: .9; } 75%, 100% { transform: scale(1.6); opacity: 0; } }
.carte-etiquette {
  display: grid; gap: 4px; padding: 7px 11px 8px; border-radius: 3px; white-space: nowrap;
  background: rgba(14, 10, 8, .74); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid color-mix(in srgb, var(--lueur) 32%, transparent); transition: border-color .3s, background .3s;
}
.carte-etiquette b { --taille-base: 17px; line-height: 1; }
.carte-etiquette span { font: 600 10.5px/1.1 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lueur); }
.carte-point button:hover .carte-etiquette, .carte-point.actif .carte-etiquette { border-color: var(--lueur); background: rgba(14, 10, 8, .9); }
.carte-maison {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: 26px calc(-50% - 30px); margin: 0;
  display: grid; gap: 3px; padding: 6px 10px 7px; border-left: 2px solid var(--accent); background: rgba(14, 10, 8, .66); pointer-events: none;
}
.carte-maison b { font: 700 13px/1 var(--police-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.carte-maison span { white-space: nowrap; font: 500 10.5px/1.45 var(--police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--or-clair); }
.carte-legende { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; color: var(--texte-3); font-size: 13.5px; }
.carte-legende span { display: flex; align-items: baseline; gap: 10px; }
.carte-cle { flex: none; width: 8px; height: 8px; rotate: 45deg; background: linear-gradient(135deg, #ff5a44, #e3b35b 50%, #f07a2e); translate: 0 -1px; }
.carte-cle-france { background: var(--accent); }

/* L'éducateur et les ateliers : vert laurier */
.bloc-ateliers { background: linear-gradient(180deg, var(--fond), var(--laurier-fond) 18%, var(--laurier-fond) 82%, var(--fond)); }
.bloc-ateliers .surtitre, body[data-page="ateliers"] #vue .surtitre { color: var(--laurier); }
.bloc-ateliers .surtitre .num::after, body[data-page="ateliers"] #vue .surtitre .num::after { background: var(--laurier); }
.chiffres { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.chiffres li { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--laurier) 35%, transparent); }
.chiffres b { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--laurier); }
.chiffres span { font: 600 12px/1.4 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texte); }
.chiffres-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin: 0; }
.chiffres-detail p { margin: 6px 0 0; color: var(--texte-2); font-size: 15px; }
.citation { margin: 0; }
.citation blockquote { margin: 0; }
.citation p { margin: 0; font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.25; text-wrap: pretty; }
.citation figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: 600 12px var(--police-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--laurier); }
.citation figcaption::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.insecable { white-space: nowrap; }
.educateur { align-items: start; margin-top: clamp(20px, 3vw, 36px); }
.bloc-grille > .citation { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid color-mix(in srgb, var(--laurier) 40%, transparent); }
.bloc-grille > .citation p { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15; }
.citation-grande p { font-size: clamp(28px, 4.6vw, 60px); line-height: 1.08; max-width: 22ch; }
.citations-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--filet); }
.ateliers-liste, .ateliers-demande { --puce: var(--laurier); }
.ateliers-pour { margin: 40px 0 14px; color: var(--laurier); }
.structures { margin: 0; display: grid; gap: 12px; }
.structures div { border-top: 1px solid var(--filet); padding-top: 10px; }
.structures dt { font-weight: 500; }
.structures dd { margin: 0; color: var(--texte-2); font-size: 15px; }

/* ---------- Døoble L : le duo (soleil couchant de Saint-Martin, mer des Caraïbes) ---------- */
:root { --duo: #ffb35c; --duo-mer: #5ec8d8; --duo-fond: #120d09; }
.theme-duo { --lueur: var(--duo); --t-filtre: saturate(1.04) contrast(1.05); }
[data-nav="duo"] { --c: var(--duo); }
.btn-duo { background: var(--duo); color: #1a0f05; box-shadow: 0 10px 30px -14px rgba(255, 179, 92, .7); }
.btn-duo:hover { background: #ffc98a; }
.bloc-duo { background: linear-gradient(180deg, var(--fond), var(--duo-fond) 18%, var(--duo-fond) 82%, var(--fond)); }
.bloc-duo .surtitre, .duo-une .surtitre, .duo-histoire .surtitre { color: var(--duo); }
.bloc-duo .surtitre .num::after, .duo-histoire .surtitre .num::after { background: var(--duo); }
.bloc-duo .viseur { --viseur: var(--duo); }
.clip-apercu { position: relative; display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 9; }
.clip-apercu img, .fait-main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.clip-apercu:hover img, .fait-main-image:hover img { transform: scale(1.04); }
.clip-lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(14, 10, 8, .55); border: 1px solid rgba(255, 179, 92, .6); color: var(--duo); backdrop-filter: blur(6px); transition: transform .3s var(--ease), background .3s; }
.clip-lecture svg { width: 26px; height: 26px; margin-left: 3px; }
.clip-apercu:hover .clip-lecture, .fait-main-image:hover .clip-lecture { transform: translate(-50%, -50%) scale(1.08); background: rgba(14, 10, 8, .75); }
.clip-legende { position: absolute; left: 14px; bottom: 12px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.duo-mention a { text-decoration-color: var(--duo); }

/* Page du duo : Laury et Léo en photo, à côté du nom */
.duo-une { position: relative; overflow: hidden; background: radial-gradient(50% 70% at 80% 45%, rgba(255, 179, 92, .1), transparent 70%); }
.duo-une-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(20px, 3vw, 40px); }
.duo-portrait { position: relative; margin: 0; aspect-ratio: 2 / 3; max-height: 82svh; overflow: hidden; border-radius: 4px; background: var(--surface); --viseur: rgba(255, 179, 92, .75); }
.duo-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.95) contrast(1.04); }
.duo-portrait figcaption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 48px 18px 16px; background: linear-gradient(transparent, rgba(8, 8, 10, .8)); color: #efe6d6; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.duo-nom { margin: 0 0 14px; font: 700 clamp(46px, 8.4vw, 124px)/.95 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.duo-nom em { font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; color: var(--duo); }
.duo-une .banniere-desc { max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); }
.duo-une .hero-actions { margin-top: 26px; }
.membre img { object-position: 50% 28%; }
/* Accueil : le texte d'abord, la photo du duo ensuite */
.bloc-grille-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.bloc-grille-duo .bloc-photo { order: 2; max-height: 78svh; aspect-ratio: 4 / 5; }
.bloc-grille-duo .bloc-photo img { object-position: 50% 30%; filter: saturate(.95) contrast(1.04); }

/* Les sons du duo : l'EP, puis une carte par son avec sa pochette YouTube (16:9) */
.ep { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); padding: clamp(14px, 2vw, 20px); border: 1px solid rgba(255, 179, 92, .28); border-radius: 6px; background: linear-gradient(120deg, rgba(255, 179, 92, .07), transparent 60%); }
.ep-pochette { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 9; }
.ep-pochette img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ep-pochette:hover img { transform: scale(1.04); }
.ep-pochette:hover .clip-lecture { transform: translate(-50%, -50%) scale(1.08); background: rgba(14, 10, 8, .75); }
.ep-texte .donnees { margin: 0 0 8px; color: var(--duo); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.ep-texte h3 { margin: 0 0 10px; font: 700 clamp(40px, 6vw, 72px)/1 var(--police-titre); letter-spacing: .02em; }
.ep-texte p:not(.donnees) { color: var(--texte-2); margin: 0 0 22px; }
.grille-sons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.sons-bonus { margin: 40px 0 18px; color: var(--duo); }
.carte-son { min-width: 0; }
.carte-son-image { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--filet); background: #000; transition: border-color .2s; }
.carte-son-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.carte-son:hover .carte-son-image img { transform: scale(1.04); }
.carte-son .btn-jouer { background: rgba(0, 0, 0, .28); }
.carte-son .btn-jouer svg { width: 34px; height: 34px; padding: 14px; box-sizing: content-box; border-radius: 50%; background: rgba(14, 10, 8, .6); border: 1px solid rgba(255, 179, 92, .6); color: var(--duo); }
.carte-son:hover .btn-jouer, .carte-son.en-cours .btn-jouer { opacity: 1; }
.carte-son.en-cours .carte-son-image { border-color: var(--duo); }
.carte-son-duree { position: absolute; right: 8px; top: 8px; z-index: 3; padding: 2px 7px; border-radius: 3px; background: rgba(8, 7, 6, .82); color: #f3eee6; font-size: 12px; pointer-events: none; }
.carte-son-infos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 2px 0; }
.carte-son .son-num { text-align: left; }
.carte-son .son-textes b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.son-youtube { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 3px; color: var(--texte-2); text-decoration: none; font: 600 11px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.ic-youtube { width: 20px; height: 14px; flex-shrink: 0; }
.son-youtube:hover { color: var(--texte); border-color: rgba(255, 179, 92, .6); }
@media (hover: none) { .carte-son .btn-jouer { opacity: 1; background: transparent; } }
.duo-route { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.duo-route li { display: flex; align-items: center; gap: 8px; }
.duo-route li + li::before { content: ""; width: 22px; height: 1px; background: var(--duo); }
.duo-route li:first-child { color: var(--duo); }
.duo-recit p { color: var(--texte-2); font-size: 17px; max-width: 58ch; }
.duo-recit p:first-child { color: var(--texte); font-size: clamp(18px, 1.8vw, 21px); }
.puces-duo { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces-duo li { padding: 6px 12px; border: 1px solid rgba(255, 179, 92, .38); border-radius: 999px; font: 500 12px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; }
.membres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.membre { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 4; border: 1px solid var(--filet); }
.membre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.membre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 7, 6, .9)); }
.membre-texte { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: grid; gap: 4px; }
.membre-texte b { font: italic 500 clamp(28px, 3vw, 40px)/1 var(--police-luxe); }
.membre-texte .donnees { color: var(--duo); }
.membre-texte .lien-fleche { justify-self: start; font-size: 14px; margin-top: 4px; }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
.clip { margin: 0; }
.clip video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; border: 1px solid var(--filet); }
.clip figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-top: 12px; }
/* le clip entier sur YouTube (en ligne, le site n'a que l'extrait de 30 s) : toujours sur sa ligne, sous le titre */
.clip figcaption::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
.clip-youtube { order: 3; margin-top: 4px; }
.clips + .note { margin-top: 22px; }
.clip figcaption b { font: italic 500 24px var(--police-luxe); }
.bloc-duo .note a { color: var(--texte); }
.son-num { font: italic 500 18px var(--police-luxe); color: var(--duo); text-align: right; }
.son-textes { display: grid; gap: 2px; min-width: 0; }
.son-textes b { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carnet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 10px; }
.carnet li { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; }
.carnet li:first-child, .carnet li:last-child { aspect-ratio: auto; }
.carnet img { width: 100%; height: 100%; object-fit: cover; }
.encart-duo { background: linear-gradient(90deg, rgba(14, 10, 8, .95) 30%, rgba(14, 10, 8, .55)), url("images/dooble-l/lim-soleil.jpg") center / cover; }
.encart-duo h2 em { color: var(--duo); }
.duo-fond { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; }
.duo-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 7, 6, .75)); }
.duo-fond .duo-monogramme { position: absolute; right: 8%; bottom: 4%; z-index: 1; font-size: clamp(70px, 9vw, 120px); color: var(--duo); }

/* Formations : les clips faits maison, la preuve par l'exemple */
.fait-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: 40px; padding: clamp(18px, 3vw, 28px); border: 1px solid color-mix(in srgb, var(--laurier) 30%, transparent); border-radius: 6px; background: rgba(239, 154, 130, .04); }
.fait-main-image { position: relative; display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 9; }
.fait-main .donnees { margin: 0 0 6px; color: var(--laurier); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.fait-main h3 { margin: 0 0 10px; font: 700 clamp(18px, 2vw, 24px)/1.2 var(--police-titre); text-transform: uppercase; }
.fait-main h3 em { font-family: var(--police-luxe); font-weight: 500; text-transform: none; color: var(--or-clair); }
.fait-main p:not(.donnees) { color: var(--texte-2); margin: 0 0 14px; }

/* Accueil : les deux facettes, bien séparées */
.facettes-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
.facette-carte { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(420px, 40vw, 520px); border-radius: 6px; border: 1px solid var(--filet); }
.facette-carte > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.facette-carte:hover > img { transform: scale(1.04); }
.facette-carte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 10, 8, .15), rgba(14, 10, 8, .8) 55%, rgba(14, 10, 8, .96)); }
.facette-carte-texte { padding: clamp(22px, 3vw, 36px); }
.facette-carte .donnees { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }
.facette-carte h3 { margin: 0 0 12px; font: 700 clamp(22px, 2.8vw, 34px)/1.1 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.facette-carte h3 em { font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; }
.facette-carte p:not(.donnees) { color: var(--texte-2); margin: 0 0 16px; max-width: 52ch; }
.facette-art { border-top: 2px solid var(--accent); }
.facette-art .donnees, .facette-art h3 em { color: var(--accent-clair); }
.facette-pro { border-top: 2px solid var(--laurier); }
.facette-pro > img { filter: saturate(.3) brightness(.62) sepia(.25) hue-rotate(40deg); }
.facette-pro .donnees, .facette-pro h3 em { color: var(--laurier); }
.facette-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facette-liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--filet); border-radius: 3px; color: var(--texte); text-decoration: none; font: 600 12px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; background: rgba(14, 10, 8, .4); transition: border-color .2s; }
.facette-liens a:hover { border-color: var(--accent); }
.facette-prix { font-size: 14.5px; }
.facette-prix b { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: 22px; color: var(--or-clair); }

/* La une : l'espace pro, à part, avec ses accès directs (structures, domicile, contact) */
.une-pro { display: grid; gap: 0; width: min(100%, 560px); margin-top: 24px; border: 1px solid color-mix(in srgb, var(--laurier) 45%, transparent); border-radius: 4px; background: rgba(14, 10, 8, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.une-pro-titre { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px 10px 12px; color: var(--texte); text-decoration: none; transition: background .2s; }
.une-pro-titre:hover { background: rgba(239, 154, 130, .08); }
.une-pro-nom { display: grid; gap: 2px; flex: 1; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.une-pro-nom small { color: var(--texte-2); font-weight: 300; font-size: 13px; }
.une-pro-fleche { color: var(--laurier); font-size: 18px; transition: transform .25s var(--ease); }
.une-pro-titre:hover .une-pro-fleche { transform: translateX(4px); }
.une-pro-liens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--laurier) 25%, transparent); }
.une-pro-liens li:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--laurier) 25%, transparent); }
.une-pro-liens li:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--laurier) 25%, transparent); }
.une-pro-liens a { display: grid; align-content: center; gap: 1px; min-height: 52px; padding: 8px 14px; color: var(--texte); text-decoration: none; font: 600 12px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; }
.une-pro-liens a:hover { background: rgba(239, 154, 130, .1); color: var(--laurier); }
.une-pro-liens small { font: italic 500 15px var(--police-luxe); letter-spacing: 0; text-transform: none; color: var(--or-clair); }
.une-pro-tag, .nav-pro-tag { font: 700 10.5px/1 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: #1c0c07; background: var(--laurier); padding: 5px 7px; border-radius: 2px; }

/* En-tête : « Pro · Formations », à part du menu et toujours visible (même quand le menu passe en ☰) */
.btn-pro { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 8px; padding: 0 12px 0 8px; border: 1px solid color-mix(in srgb, var(--laurier) 45%, transparent); border-radius: 4px; color: var(--texte); text-decoration: none; font: 500 12.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: border-color .2s, background .2s; }
.btn-pro::after { content: ""; position: absolute; right: -9px; top: 12px; bottom: 12px; width: 1px; background: var(--filet); }
.btn-pro:hover, .btn-pro.actif { border-color: var(--laurier); background: rgba(239, 154, 130, .08); }

/* Menu (téléphone) et pied de page : deux parties ; l'espace pro en premier dans le menu */
.menu-groupe { margin: 18px 0 4px; font: 600 11.5px var(--police-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.menu-groupe:first-child { margin-top: 0; }
.menu-groupe-pro { display: flex; align-items: center; gap: 10px; color: var(--laurier); margin: 0 0 10px; }
.menu-pro-carte { margin-bottom: 22px; padding: 14px; border: 1px solid color-mix(in srgb, var(--laurier) 40%, transparent); border-radius: 6px; background: rgba(239, 154, 130, .05); }
.menu-pro-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-pro-liens li:first-child { flex-basis: 100%; }
.menu-pro-liens a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--laurier) 35%, transparent); border-radius: 3px; color: var(--texte); text-decoration: none; font: 600 12.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; }
.menu-pro-liens li:first-child a { background: var(--laurier); border-color: var(--laurier); color: #1c0c07; }
.menu-pro-liens a:hover { border-color: var(--laurier); }
.menu-pro-liens li:not(:first-child) { flex: 1; }
.pied-colonnes { display: grid; grid-template-columns: repeat(3, auto); gap: 18px clamp(28px, 5vw, 72px); }
.pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pied-col .lien { font-size: 14px; }
.pied-titre { margin: 0 0 6px; font: 600 11.5px var(--police-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pied-col-pro .pied-titre { color: var(--laurier); }
.pied-reseaux { display: flex; gap: 14px; margin-top: 6px; }

/* La radio : la voix à l'antenne */
.canaux .canal:first-child { grid-column: 1 / -1; }
.cadran-aiguille { left: calc(8% + var(--canal, 0) * 21%); }
.point-voix { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--radio); box-shadow: 0 0 10px var(--radio); animation: clignote 1.1s steps(2) infinite; vertical-align: middle; }
.sous-titre-voix { margin: 4px 0; font: italic 400 clamp(15px, 1.5vw, 17px)/1.45 var(--police-luxe); color: var(--texte); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.poste.voix-a-l-antenne .cadran-aiguille { background: var(--radio); box-shadow: 0 0 14px var(--radio); }
.btn-voix { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--bord); border-radius: 3px; background: transparent; color: var(--texte-2); font: 600 11.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; }
.btn-voix svg { width: 18px; height: 18px; }
.btn-voix[aria-pressed="true"] { color: var(--texte); border-color: rgba(111, 208, 192, .5); }
.btn-voix[aria-pressed="true"] svg { color: var(--radio); }
.lecteur.voix .lecteur-titre::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--radio); vertical-align: middle; animation: clignote 1.1s steps(2) infinite; }
.onglets .onglet-pro.actif::before { background: var(--laurier); }
.onglets .onglet-pro svg { color: var(--laurier); }

/* ---------- Ateliers et cours : interventions, formations, tarifs ---------- */
.btn-laurier { background: var(--laurier); color: #1c0c07; box-shadow: 0 10px 30px -14px rgba(239, 154, 130, .6); }
.btn-laurier:hover { background: #f6b8a5; box-shadow: 0 14px 36px -12px rgba(239, 154, 130, .7); }
.page-entete-texte .hero-actions { margin-top: 26px; }
/* Accès direct : les deux publics, juste sous le titre */
.acces-pro { padding-top: clamp(28px, 4vw, 44px); }
.publics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.carte-public { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); border: 1px solid color-mix(in srgb, var(--laurier) 32%, transparent); border-top: 2px solid var(--laurier); border-radius: 6px; background: linear-gradient(160deg, rgba(239, 154, 130, .08), rgba(14, 10, 8, .4) 60%); transition: border-color .3s, box-shadow .3s; }
.carte-public:focus { outline: none; }
.carte-public.choisie { border-color: var(--laurier); box-shadow: 0 0 0 1px var(--laurier), 0 20px 50px -30px rgba(239, 154, 130, .6); }
.carte-public > .donnees { margin: 0 0 8px; color: var(--laurier); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.carte-public h2 { margin: 0 0 8px; font: 700 clamp(20px, 2.4vw, 28px)/1.15 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.carte-public h2 em { font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; color: var(--laurier); }
.carte-public-qui { margin: 0 0 16px; color: var(--texte-2); font-size: 15px; }
.carte-public-prix { margin: 0 0 16px; color: var(--texte-2); font-size: 14.5px; }
.carte-public-prix b { font: italic 500 clamp(30px, 3.4vw, 40px)/1 var(--police-luxe); color: var(--or-clair); margin-right: 6px; }
.carte-public .compris { margin-bottom: 22px; }
.carte-public .hero-actions { margin-top: auto; }
/* Le sommaire de la page : reste en haut de l'écran pendant qu'on lit */
.sommaire-pro { position: sticky; top: var(--haut-entete); z-index: 30; margin-top: clamp(28px, 4vw, 44px); background: rgba(14, 10, 8, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid color-mix(in srgb, var(--laurier) 22%, transparent); }
.sommaire-pro-rang { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; }
.sommaire-pro ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sommaire-pro ul::-webkit-scrollbar { display: none; }
.sommaire-pro li button { position: relative; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--texte-2); font: 500 12px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: color .2s; }
.sommaire-pro li button:hover, .sommaire-pro li button[aria-current] { color: var(--texte); }
.sommaire-pro li button[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--laurier); }
.sommaire-pro .btn { flex-shrink: 0; }
.carte-public { scroll-margin-top: calc(var(--haut-entete) + 20px); }
.cible { scroll-margin-top: calc(var(--haut-entete) + 72px); }
.cible:focus { outline: none; }
.ateliers-demande .formulaire { scroll-margin-top: calc(var(--haut-entete) + 72px); }
.interventions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
@media (min-width: 1101px) { .interventions { grid-template-columns: repeat(5, minmax(0, 1fr)); } .interventions li { padding: 18px 16px 20px; } }
.interventions li { display: grid; align-content: start; gap: 6px; padding: 20px 20px 22px; border: 1px solid var(--filet); border-top: 2px solid var(--laurier); border-radius: 4px; background: linear-gradient(180deg, rgba(239, 154, 130, .06), transparent 60%); }
.interventions b { font-weight: 500; font-size: 17px; line-height: 1.3; }
.interventions span { color: var(--texte-2); font-size: 15px; }
.formations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.formation { position: relative; padding: 26px 24px 24px; border: 1px solid var(--filet); border-radius: 4px; background: var(--surface); }
.formation-num { display: block; font-family: var(--police-luxe); font-style: italic; font-size: 34px; line-height: 1; color: var(--laurier); margin-bottom: 14px; }
.formation h3 { margin: 0 0 6px; font: 700 16px/1.3 var(--police-titre); text-transform: uppercase; letter-spacing: .04em; }
.formation p { margin: 0 0 14px; color: var(--texte-2); font-size: 15px; }
.formation ul, .compris { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.formation ul li, .compris li { position: relative; padding-left: 20px; font-size: 15px; }
.formation ul li::before, .compris li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--laurier); }
.ateliers-liste .ateliers-pour { margin-top: 56px; }
.tarifs:focus, .formulaire:focus { outline: none; }
.tarifs-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); align-items: start; }
.carte-tarif { padding: clamp(22px, 3vw, 34px); border: 1px solid color-mix(in srgb, var(--laurier) 30%, transparent); border-radius: 6px; background: rgba(14, 10, 8, .55); }
.carte-tarif > .donnees { margin: 0 0 6px; color: var(--laurier); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.carte-tarif h3 { margin: 0 0 6px; font: 700 clamp(17px, 1.8vw, 21px)/1.25 var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.carte-tarif-pour { margin: 0 0 18px; color: var(--texte-2); font-size: 15px; }
.carte-tarif h4 { margin: 26px 0 12px; color: var(--laurier); }
.grille-prix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grille-prix th, .grille-prix td { padding: 11px 0; border-bottom: 1px dashed rgba(240, 194, 123, .22); vertical-align: baseline; }
.grille-prix tr:first-child th, .grille-prix tr:first-child td { border-top: 1px solid var(--filet); }
.grille-prix th { text-align: left; font-weight: 400; }
.grille-prix td { text-align: right; font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1; color: var(--or-clair); white-space: nowrap; padding-left: 16px; }
.deplacement { margin: 20px 0 0; padding: 12px 14px; border-left: 2px solid var(--laurier); background: rgba(239, 154, 130, .06); color: var(--texte-2); font-size: 14.5px; }
.tarifs .hero-actions { margin-top: 26px; }

/* Accueil : le bloc ateliers */
.une-ateliers { display: inline-block; margin-top: 22px; font-size: 14.5px; white-space: normal; border-color: color-mix(in srgb, var(--laurier) 45%, transparent); }
.une-ateliers:hover { color: var(--laurier); border-color: var(--laurier); }
.puces-ateliers { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces-ateliers li { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--laurier) 35%, transparent); border-radius: 2px; font: 500 12px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte); }
.tarifs-apercu { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tarifs-apercu li { display: grid; gap: 4px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--laurier) 28%, transparent); border-left: 2px solid var(--laurier); border-radius: 4px; background: rgba(14, 10, 8, .5); }
.tarifs-apercu .donnees { color: var(--laurier); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.tarifs-apercu b { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; color: var(--or-clair); }
.tarifs-apercu span:last-child { color: var(--texte-2); font-size: 15px; }
.duo-mention { margin: 18px 0 0; }
.duo-mention a { color: var(--texte); text-decoration-color: var(--orage); text-underline-offset: 4px; }

/* Page artiste : le duo */
.duo-carte { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 5vw, 64px); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--filet); border-radius: 6px; background: radial-gradient(120% 140% at 0% 50%, rgba(255, 179, 92, .12), transparent 55%), var(--fond-2); }
.duo-monogramme { display: flex; justify-content: center; align-items: center; font: italic 500 clamp(110px, 16vw, 210px)/.8 var(--police-luxe); color: var(--duo); user-select: none; }
.duo-monogramme span + span { margin-left: -.18em; color: transparent; -webkit-text-stroke: 1.5px var(--or); transform: translateY(.08em); }
.duo-texte p:not(.surtitre) { color: var(--texte-2); max-width: 56ch; }
.duo-texte .hero-actions { margin-top: 22px; }

/* Vitrine d'écoute (vente fermée) */
.btn-partager-ligne { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--texte-3); transition: color .2s; }
.btn-partager-ligne:hover { color: var(--texte); }
.btn-partager-ligne svg { width: 19px; height: 19px; }
.encart-bientot { padding: 22px 24px; border: 1px solid var(--filet); border-left: 2px solid var(--accent); border-radius: 4px; background: var(--surface); }
.encart-bientot .surtitre { margin-bottom: 10px; }
.encart-bientot p:not(.surtitre) { margin: 0; color: var(--texte-2); }
.encart-bientot .hero-actions { margin-top: 18px; }
.bandeau-proto a { color: inherit; font-weight: 500; }

/* Mentions */
.texte-legal { max-width: 72ch; color: var(--texte-2); }
.texte-legal h2 { color: var(--texte); font: 700 14px var(--police-titre); text-transform: uppercase; letter-spacing: .08em; margin: 32px 0 8px; }
.a-completer { color: var(--accent-clair); font-style: italic; }

/* ---------- Panier ---------- */
.panier { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.panier-lignes { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.panier-ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--bord); border-radius: 4px; padding: 10px 16px 10px 10px; }
.panier-ligne .pochette { width: 56px; }
.panier-ligne small { display: block; color: var(--texte-2); }
.panier-prix { font-weight: 600; font-variant-numeric: tabular-nums; }
.recap { position: sticky; top: calc(var(--haut-entete) + 20px); background: var(--surface); border: 1px solid var(--filet); border-radius: 6px; padding: 22px; display: grid; gap: 14px; }
.recap-ligne { display: flex; justify-content: space-between; color: var(--texte-2); }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 18px; border-top: 1px solid var(--bord); padding-top: 14px; }
.recap-total span:last-child { font-family: var(--police-luxe); font-size: 28px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texte-2); cursor: pointer; }
.case input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Lecteur fixe ---------- */
.lecteur {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 10px 16px 10px 10px;
  background: rgba(21, 18, 16, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--filet); border-radius: 8px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
  view-transition-name: lecteur;
}
.lecteur.joue { border-color: color-mix(in srgb, var(--lueur) 40%, var(--filet)); }
.lecteur-fil { display: none; }
.lecteur-infos { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lecteur-textes { min-width: 0; flex: 1; }
.lecteur-titre { display: block; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lecteur-titre:hover { color: var(--accent-clair); }
.lecteur-meta { font-size: 12.5px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lecteur-centre { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lecteur-commandes { display: flex; align-items: center; gap: 8px; }
.lecteur .btn-lecture { background: var(--lueur, var(--texte)); }
.lecteur-progression { display: flex; align-items: center; gap: 10px; width: 100%; font: 500 12px var(--police-mono); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.lecteur-droite { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.lecteur-volume { display: flex; align-items: center; gap: 2px; }
.lecteur-volume input { width: 96px; }
/* Curseurs (progression, volume) : fins, remplis de la couleur du style */
.lecteur input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 24px; background: transparent; cursor: pointer; --rempli: 0%; }
.lecteur input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--lueur, var(--accent)) var(--rempli), #3a342e var(--rempli)); }
.lecteur input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--lueur, var(--accent)) var(--rempli), #3a342e var(--rempli)); }
.lecteur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: var(--texte); border: 0; }
.lecteur input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--texte); border: 0; }
.lecteur input[type="range"]:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }

/* ---------- Fenêtres (licence, recherche, menu, paiement) ---------- */
.modale { width: min(780px, calc(100% - 24px)); max-height: calc(100% - 24px); background: var(--surface); color: var(--texte); border: 1px solid var(--filet); border-radius: 8px; padding: 0; box-shadow: 0 40px 100px -30px #000; }
.modale[open] { animation: ouverture .35s var(--ease); }
@keyframes ouverture { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modale::backdrop { background: rgba(5, 4, 3, .72); backdrop-filter: blur(5px); }
.modale-contenu { padding: clamp(18px, 3vw, 30px); }
.modale-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modale-entete h2 { margin: 0; font: 700 16px var(--police-titre); text-transform: uppercase; letter-spacing: .06em; }
.modale-entete p { margin: 2px 0 0; color: var(--texte-2); font-size: 14px; }
.modale .licences-grille { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.modale-texte p { color: var(--texte-2); }
.modale-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.modale-recherche { margin-top: min(12vh, 110px); }
.recherche-grande { width: 100%; min-height: 54px; font-size: 18px; margin-bottom: 18px; }
.resultats h3 { font: 600 11.5px var(--police-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); margin: 18px 0 10px; }
.res-beats, .res-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.res-beats li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px; border-radius: 4px; }
.res-beats li:hover { background: var(--surface-2); }
.res-beats .pochette { width: 44px; }
.res-beats a, .res-pages a { text-decoration: none; display: block; min-height: 40px; padding: 4px 0; }
.res-beats small { display: block; color: var(--texte-3); font-size: 12.5px; }
.res-beats a:hover, .res-pages a:hover { color: var(--accent-clair); }
.resultats .puces { margin-bottom: 0; }
.resultats .vide { padding: 24px; }
.menu-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-liste a { display: flex; align-items: center; gap: 14px; min-height: 56px; border-bottom: 1px solid var(--bord); text-decoration: none; font: 700 17px var(--police-titre); text-transform: uppercase; letter-spacing: .04em; }
.menu-liste .losange { --c: var(--teinte); width: 9px; height: 9px; }
.menu-liste a[aria-current="page"] .losange { background: var(--teinte); }
.menu-liste a:hover { color: var(--or-clair); }
.menu-bas { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 22px; }
.raccourcis { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; margin: 0; align-items: baseline; }
.raccourcis dt { white-space: nowrap; }
.raccourcis dd { margin: 0; color: var(--texte-2); }

/* ---------- Notification ---------- */
.toast { position: fixed; left: 50%; bottom: 128px; transform: translate(-50%, 20px); background: var(--texte); color: #0e0a08; font-weight: 500; padding: 12px 22px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); z-index: 60; max-width: calc(100% - 32px); text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--filet); margin-top: 40px; padding: 40px var(--marge); color: var(--texte-2); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.pied a { color: var(--texte-2); text-decoration: none; }
.pied a:hover { color: var(--texte); }
.pied-marque { display: grid; gap: 8px; }
.pied-logo { display: flex; align-items: center; gap: 10px; color: var(--texte); }
.pied-logo b { font-family: var(--police-titre); font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.pied-marque q { font-family: var(--police-luxe); font-style: italic; font-size: 18px; color: var(--texte); quotes: "« " " »"; }
.pied-marque q em { color: var(--accent); }
.pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.pied-liens .lien { font-size: 14px; }

/* ---------- Ouverture des pages ----------
   Navigateurs récents : la nouvelle page s'ouvre comme une facette qui s'élargit depuis le clic.
   Les autres : la page apparaît en glissant doucement. */
::view-transition-old(root) { animation: 280ms ease-in both vt-sortie; }
::view-transition-new(root) { animation: 700ms var(--ease) both vt-entree; }
@keyframes vt-sortie { to { opacity: 0; transform: scale(.985); filter: blur(3px); } }
@keyframes vt-entree { from { clip-path: var(--eclat-debut); } to { clip-path: var(--eclat-fin); } }
.onglets { view-transition-name: onglets; }
#vue.entree > * { animation: fondu .6s var(--ease) both; }
#vue.entree > *:nth-child(2) { animation-delay: .06s; }
#vue.entree > *:nth-child(n+3) { animation-delay: .12s; }
/* Apparition au défilement : visible au repos, glisse en place en arrivant */
.revele.vu { animation: revele .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes revele { from { opacity: 0; transform: translateY(22px); } }
.grille-beats .revele:nth-child(2), .grille-sg .revele:nth-child(2) { --d: 1; }
.grille-beats .revele:nth-child(3), .grille-sg .revele:nth-child(3) { --d: 2; }
.grille-beats .revele:nth-child(4), .grille-sg .revele:nth-child(4) { --d: 3; }
.grille-sg .revele:nth-child(5) { --d: 4; }

/* ---------- Inspirations : les albums, en pochettes typographiques ---------- */
.grille-disques { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 48px clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.disque-pochette { position: relative; aspect-ratio: 1; margin: 0 8% 18px 0; }
.disque-vinyle {
  position: absolute; inset: 3% 0 3% auto; aspect-ratio: 1; border-radius: 50%; transform: translateX(9%);
  background: radial-gradient(circle, var(--lueur) 0 10%, #0e0a08 10.5% 12%, transparent 12.5%), repeating-radial-gradient(circle, #171412 0 1.3px, #0c0b0a 1.6px 3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07); transition: transform .7s var(--ease);
}
.disque-vinyle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent, rgba(255, 255, 255, .09) 8%, transparent 18%, transparent 50%, rgba(255, 255, 255, .07) 58%, transparent 68%); }
.disque-face {
  position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 10% 10% 9%;
  border-radius: 3px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(130% 100% at 15% 0%, color-mix(in srgb, var(--lueur) 36%, #0e0a08), #0e0a08 74%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px color-mix(in srgb, var(--lueur) 26%, transparent);
  transition: transform .7s var(--ease);
}
.disque-face::after { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
.disque-annee { font: 500 max(9px, 5cqi) var(--police-mono); letter-spacing: .2em; color: var(--lueur); }
.disque-titre { align-self: end; --taille-base: clamp(16px, 12.5cqi, 44px); font-size: calc(var(--taille-base) * var(--t-taille) * var(--ajuste, 1)); text-wrap: balance; }   /* --ajuste : réduit un mot trop long (app.js) */
.disque-artiste { margin-top: 8px; font: 600 max(9px, 5cqi) var(--police-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.disque:hover .disque-vinyle { transform: translateX(34%) rotate(50deg); }
.disque:hover .disque-face { transform: translateX(-3%); }
.disque-infos .donnees { margin: 0; color: var(--lueur); }
.disque-infos h3 { margin: 4px 0 8px; font: 700 17px/1.2 var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.livre-infos h3 { margin: 4px 0 10px; font: italic 500 clamp(20px, 2vw, 24px)/1.12 var(--police-luxe); color: var(--texte); }
.disque-infos p, .livre-infos p { margin: 0 0 14px; color: var(--texte-2); font-size: 15px; }
.disque-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* ---------- Inspirations : les livres, en reliures de bibliothèque ---------- */
.bloc-livres { background: linear-gradient(180deg, var(--fond), #13100c 18%, #13100c 82%, var(--fond)); }
.grille-livres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 44px clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.livre { display: grid; grid-template-columns: minmax(104px, 36%) minmax(0, 1fr); gap: 22px; align-items: start; }
.livre-couverture {
  position: relative; aspect-ratio: 2 / 3; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  padding: 18% 13% 13%; text-align: center; border-radius: 2px 5px 5px 2px; container-type: inline-size;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .08) 5%, rgba(0, 0, 0, .25) 8%, transparent 13%),
    radial-gradient(120% 80% at 30% 15%, color-mix(in srgb, var(--reliure) 88%, #fff), var(--reliure) 55%, color-mix(in srgb, var(--reliure) 60%, #000));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: perspective(900px) rotateY(-9deg); transform-origin: left center; transition: transform .6s var(--ease);
}
.livre-couverture::before { content: ""; position: absolute; inset: 6% 8%; border: 1px solid rgba(240, 194, 123, .6); outline: 1px solid rgba(240, 194, 123, .28); outline-offset: -5px; pointer-events: none; }   /* double filet d'or */
.livre-auteur { font: 600 max(8px, 6cqi)/1.35 var(--police-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.livre-titre { font: italic 500 clamp(14px, 11.5cqi, 30px)/1.1 var(--police-luxe); color: #f3e2bb; text-wrap: balance; overflow-wrap: anywhere; }
.livre-exlibris { display: grid; justify-items: center; gap: 5px; }
.livre-exlibris .logo-marque { width: max(18px, 15cqi); height: max(18px, 15cqi); color: var(--or); }
.livre-exlibris small { font: 500 max(7px, 4cqi) var(--police-mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(240, 194, 123, .8); }
.livre:hover .livre-couverture { transform: perspective(900px) rotateY(0deg) translateY(-4px); }
.livre-infos .donnees { margin: 0; color: var(--or); }

@media (max-width: 520px) {
  .grille-disques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .disque-infos p:not(.donnees):not(.disque-liens) { display: none; }
  .disque-infos h3 { font-size: 13px; overflow-wrap: anywhere; }
  .livre { grid-template-columns: 38% minmax(0, 1fr); gap: 16px; }
}

/* Animations réduites : réglage du système ou bouton « Réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.calme *, .calme *::before, .calme *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
.calme .defile-piste { animation: none; }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1600px) {
  .nav { gap: 0; }
  .nav a { padding: 8px 8px; letter-spacing: .1em; }
  .logo small, .outil-txt, .btn-outil kbd { display: none; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .btn-menu { display: inline-flex; }
}
@media (max-width: 1080px) {
  .villes-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lecteur-volume input { width: 70px; }
}
@media (max-width: 960px) {
  .grille-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panneau-u { grid-template-columns: minmax(0, 1fr); }
  .univers-affiche { aspect-ratio: 16 / 10; }
  .chapitres, .etapes-num { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .piliers { grid-template-columns: minmax(0, 1fr); }
  .chiffres-detail { grid-template-columns: minmax(0, 1fr); }
  .radio-grille { grid-template-columns: minmax(0, 1fr); }
  .grille-sons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-width: 1060px) {
  .une-embleme { opacity: .45; }   /* le logo passe sous le texte : on l'estompe */
}
@media (max-width: 860px) {
  .fiche, .deux-colonnes, .panier, .bloc-grille, .bloc-grille-inverse, .artiste-colonnes { grid-template-columns: minmax(0, 1fr); }
  .tarifs-grille, .duo-carte { grid-template-columns: minmax(0, 1fr); }
  .facettes-duo, .clips, .fait-main { grid-template-columns: minmax(0, 1fr); }
  .pied-colonnes { grid-template-columns: repeat(2, auto); }
  .duo-monogramme { justify-content: flex-start; font-size: 110px; }
  .artiste-une-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nom" "portrait" "bio"; }
  .artiste-portrait { aspect-ratio: 4 / 5; max-height: none; }
  .duo-une-grille, .ep, .bloc-grille-duo, .publics { grid-template-columns: minmax(0, 1fr); }
  .duo-portrait { aspect-ratio: 4 / 5; max-height: none; }
  .bloc-grille-duo .bloc-photo { order: 0; max-height: none; }
  .fiche-visuel { position: static; max-width: 420px; }
  .recap { position: static; }
  .une { align-items: flex-end; min-height: 0; }
  .une-texte { padding-top: min(84vw, 360px); padding-bottom: 60px; }
  .une-embleme { top: 26px; left: 50%; width: min(72vw, 320px); transform: translateX(-50%); }
  .une-hud { top: 14px; left: var(--marge); right: auto; bottom: auto; justify-items: start; }
  .piliers-photo { grid-template-columns: minmax(0, 1fr); }
  .piliers-photo figure { aspect-ratio: 16 / 10; }
  .bloc-photo { aspect-ratio: 4 / 3; }
  .page-entete-grille { grid-template-columns: minmax(0, 1fr) 150px; }
  .page-embleme { max-width: 170px; }
  .lecteur { grid-template-columns: minmax(0, 1fr) auto; }
  .lecteur-droite { display: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  :root { --haut-entete: 60px; }
  body.avec-lecteur { padding-bottom: 150px; }
  body { padding-bottom: 76px; }
  .entete { padding-block: 6px; }
  .nav { display: none; }
  .btn-menu { display: inline-flex; }
  .btn-outil { border-color: transparent; padding: 0 8px; }
  .logo small { display: none; }
  /* L'espace pro reste dans l'en-tête, en pastille « Pro » (et « Formations » dans la barre du bas) */
  .entete { gap: 6px; }
  .entete-outils { gap: 0; }
  .logo { gap: 8px; }
  .logo span { font-size: 16px; letter-spacing: .06em; }
  .btn-pro { min-width: 44px; justify-content: center; margin-right: 2px; padding: 0 4px; gap: 0; }
  .btn-pro::after { display: none; }
  .btn-pro-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sommaire-pro { position: static; }
  .sommaire-pro .btn { display: none; }
  .une-pro-liens a { padding: 8px 10px; letter-spacing: .08em; font-size: 11px; }
  .onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: rgba(14, 10, 8, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--filet);
  }
  .onglets a, .onglets button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; border: 0; background: none; color: var(--texte-3); text-decoration: none; font: 500 10.5px var(--police-mono); letter-spacing: .08em; text-transform: uppercase; }
  .onglets svg { width: 22px; height: 22px; }
  .onglets .actif { color: var(--texte); }
  .onglets .actif::before { content: ""; position: absolute; top: 2px; width: 18px; height: 2px; background: var(--accent); }
  .onglets .compteur-favoris { position: absolute; top: 6px; left: calc(50% + 6px); }
  .lecteur { left: 6px; right: 6px; bottom: calc(68px + env(safe-area-inset-bottom)); gap: 4px 10px; padding: 8px 8px 8px 8px; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; }
  .lecteur-fil { display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .06); }
  .lecteur-fil span { display: block; height: 100%; background: var(--lueur, var(--accent)); transform-origin: left; transform: scaleX(0); }
  .lecteur-progression { display: none; }
  .lecteur-commandes .btn-icone { display: none; }
  .lecteur-commandes #btn-suiv { display: grid; }
  .lecteur .btn-lecture { width: 44px; height: 44px; }
  .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .filtres .selection { flex: 1 1 40%; }
  .nb-resultats { width: 100%; margin: 0; }
  .ligne-prod { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 8px; }
  .ligne-prod .pochette { width: 56px; }
  .ligne-prod .col-meta, .prix-des, .prod-tags .tag:not(.tag-style) { display: none; }
  .ligne-prod .btn-favori { width: 40px; }
  .ligne-prod .col-action .btn { padding: 8px 12px; }
  .btn-jouer { opacity: 1; background: rgba(0, 0, 0, .2); }
  .champs-duo { grid-template-columns: 1fr; }
  .panier-ligne { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .panier-ligne .pochette { width: 48px; }
  .panier-ligne .panier-prix { grid-column: 3; grid-row: 1; }
  .panier-ligne .lien { grid-column: 2 / 4; justify-self: start; }
  .grille-singles { grid-template-columns: minmax(0, 1fr); }
  .single { aspect-ratio: 5 / 4; }
  .single img { object-position: 50% 30%; }
  .villes-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* la carte du monde : un cadre plus haut, centré sur l'Atlantique (de New York à la France) */
  .carte-cadre { aspect-ratio: 1.4; margin-inline: calc(var(--marge) * -1); }
  .carte-cadre::after { background: linear-gradient(90deg, var(--fond), transparent 3%, transparent 97%, var(--fond)), linear-gradient(180deg, var(--fond), transparent 9%, transparent 90%, var(--fond)); }
  .carte-plan { translate: -54% 0; }
  .carte-ocean, .carte-maison span { display: none; }
  .carte-etiquette { padding: 5px 8px 6px; gap: 3px; }
  .carte-etiquette b { --taille-base: 14px; }
  .carte-etiquette span { font-size: 9px; letter-spacing: .1em; }
  .carte-balise { width: 24px; height: 24px; }
  .carte-point button { translate: -12px -50%; gap: 4px; }
  .carte-maison { translate: -50% calc(-100% - 22px); border-left: 0; border-bottom: 2px solid var(--accent); padding: 4px 8px; }
  .carte-maison b { font-size: 11px; }
  .carte-route { stroke-width: .3; }
  .carte-route.actif { stroke-width: .42; }
  .carte-comete { stroke-width: .6; }
  .carte-legende { font-size: 13px; }
  .escales { grid-template-columns: minmax(0, 1fr); }
  .escale-carte { aspect-ratio: 4 / 3; }
  .escale-cible { width: 30cqi; left: 68%; top: 48%; }
  .escale-nom { --taille-base: 10cqi; }
  .villes-parcours { grid-template-columns: minmax(0, 1fr); }
  .villes-parcours .ville-carte { aspect-ratio: 5 / 2; }
  .villes-parcours .ville-texte b { font-size: 15px; }
  .citations-duo { grid-template-columns: minmax(0, 1fr); }
  /* Les sons du duo : une ligne par son, pochette à gauche (comme l'appli YouTube) */
  .grille-sons { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .carte-son { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 12px; }
  .carte-son-infos { grid-template-columns: minmax(0, 1fr) auto; padding: 0; gap: 8px; }
  .carte-son .son-num { display: none; }
  .carte-son .btn-jouer svg { width: 22px; height: 22px; padding: 9px; }
  .carte-son-duree { right: 5px; top: 5px; font-size: 11px; padding: 1px 5px; }
  .son-youtube { width: 44px; justify-content: center; padding: 0; }
  .son-youtube.clip-youtube { width: auto; padding: 0 12px; }
  .son-youtube-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .onglets-univers { display: flex; overflow-x: auto; scrollbar-width: none; }
  .onglets-univers::-webkit-scrollbar { display: none; }
  .onglet-u { flex: 0 0 auto; padding-right: 22px; }
  .facettes { margin-top: 26px; }
  .page-entete-grille { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .page-embleme { position: absolute; right: -46px; top: 6px; width: 190px; max-width: none; opacity: .4; pointer-events: none; }
  .page-entete-texte { position: relative; }
  .raccourcis-radio { display: none; }
  .canal { letter-spacing: .06em; }
  .modale-menu { margin: auto auto 0; width: 100%; max-width: none; border-radius: 12px 12px 0 0; max-height: 86vh; }
  .modale-recherche { margin-top: 12px; }
  .pied { padding-bottom: 20px; }
}
@media (max-width: 380px) {
  .logo-marque { width: 30px; height: 30px; }
  .logo span { font-size: 14.5px; }
}
@media (max-width: 460px) {
  .chapitres, .etapes-num { grid-template-columns: minmax(0, 1fr); }
  .grille-beats { gap: 12px; }
  .carte-beat-infos { grid-template-columns: minmax(0, 1fr) auto; }
  .carte-beat-infos .btn-lecture { display: none; }
  .fiche-nav span { display: none; }
}

/* ============================================================
   LES PLATEFORMES (2026-10) — Formations (l'accueil), Vente de beats,
   Léo Lafayette, Døoble L, et la radio sur toutes.
   --pf : la couleur de la plateforme (réglée par app.js)
   ============================================================ */
:root { --pf: var(--laurier); }

/* ---------- La barre des plateformes, tout en haut ---------- */
.plateformes { background: var(--fond-2); border-bottom: 1px solid var(--filet); }
.plateformes-rang { display: flex; align-items: center; gap: 8px; max-width: none; padding: 0 var(--marge); min-height: 42px; }
.plateformes-titre { font: 600 10.5px var(--police-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--texte-3); margin-right: 6px; white-space: nowrap; }
.plateformes ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.plateformes ul::-webkit-scrollbar { display: none; }
.plateformes ul a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; color: var(--texte-2); text-decoration: none; font: 500 12px var(--police-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color .2s, background .2s; }
.plateformes ul a:hover { color: var(--texte); background: rgba(255, 255, 255, .03); }
.pf-point { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--pf); flex-shrink: 0; }
.plateformes ul a.actif { color: var(--texte); background: color-mix(in srgb, var(--pf) 12%, transparent); }
.plateformes ul a.actif .pf-point { background: var(--pf); }
.plateformes ul a.actif::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--pf); }
.pf-radio { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pf-radio-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 8px; border: 1px solid color-mix(in srgb, var(--radio) 45%, transparent); border-radius: 999px; background: transparent; color: var(--texte); font: 600 11.5px var(--police-mono); letter-spacing: .12em; text-transform: uppercase; transition: background .2s, border-color .2s; }
.pf-radio-btn .ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--radio); color: #06110f; }
.pf-radio-btn .ic svg { width: 11px; height: 11px; }
.pf-radio-btn small { font: italic 500 14px var(--police-luxe); letter-spacing: 0; text-transform: none; color: var(--radio); }
.pf-radio-btn:hover { border-color: var(--radio); background: rgba(111, 208, 192, .08); }
.pf-radio-btn.en-direct { border-color: var(--radio); background: rgba(111, 208, 192, .12); }
.pf-radio-btn.en-direct .pf-radio-txt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #ff5a4f; vertical-align: middle; animation: clignote 1s steps(2) infinite; }
.pf-radio-lien { font-size: 13px; color: var(--texte-2); padding: 6px 8px; text-decoration: underline; text-decoration-color: var(--filet); text-underline-offset: 3px; white-space: nowrap; }
.pf-radio-lien:hover, .pf-radio-lien.actif { color: var(--radio); }

/* ---------- L'en-tête prend la couleur de sa plateforme ---------- */
.logo small { color: var(--pf); font-size: 15px; }
.nav a .losange { --c: var(--pf); }
.nav a.actif { color: var(--texte); }
.nav a.actif .losange { background: var(--pf); }
.btn-pro#btn-cta { padding: 0 18px; border-color: var(--laurier); background: var(--laurier); color: #1c0c07; font-weight: 600; }
.btn-pro#btn-cta:hover, .btn-pro#btn-cta.actif { background: #f6b8a5; }
.marque-suite { display: block; font-size: .42em; letter-spacing: .3em; color: var(--accent); margin-top: .2em; }
body[data-plateforme="formations"] #vue .surtitre { color: var(--laurier); }
body[data-plateforme="formations"] #vue .surtitre .num::after { background: var(--laurier); }
body[data-plateforme="formations"] #vue .bloc-radio .surtitre { color: var(--radio); }
body[data-plateforme="formations"] #vue .bloc-radio .surtitre .num::after { background: var(--radio); }
body[data-plateforme="formations"] .titre-section em, body[data-plateforme="formations"] .titre-page em { color: var(--laurier); }

/* ---------- La une de l'accueil (Formations) : une phrase, et les formations juste dessous ---------- */
.une-formations { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--filet); }
.une-formations-fond { position: absolute; inset: 0; z-index: -1; }
.une-formations-fond img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 50%; opacity: .32; filter: saturate(.7) contrast(1.05); }
.une-formations-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fond) 25%, rgba(14, 10, 8, .82) 55%, rgba(14, 10, 8, .55)), linear-gradient(180deg, transparent 60%, var(--fond)); }
.une-formations-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.titre-une { margin: 0 0 20px; font: 700 clamp(34px, 5.4vw, 70px)/1.02 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.titre-une em { display: block; font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--laurier); font-size: 1.12em; }
.une-formations .une-description { max-width: 52ch; margin-bottom: 28px; color: var(--texte); opacity: .88; }
.btn-grand { min-height: 56px; padding: 14px 28px; font-size: 13px; }
.une-infos { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--filet); border-radius: 6px; background: rgba(14, 10, 8, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.une-infos li { display: grid; align-content: start; gap: 3px; padding: 14px 16px; }
.une-infos li + li { border-left: 1px solid var(--filet); }
.une-infos .donnees { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--laurier); }
.une-infos b { font-weight: 500; font-size: 15px; line-height: 1.35; }
.une-infos span:not(.donnees) { color: var(--texte-2); font-size: 13.5px; line-height: 1.4; }
.une-chemin { padding: clamp(20px, 2.6vw, 30px); border: 1px solid color-mix(in srgb, var(--laurier) 35%, transparent); border-top: 2px solid var(--laurier); border-radius: 6px; background: rgba(14, 10, 8, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.une-chemin > .donnees { margin: 0 0 14px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--laurier); }
.une-chemin ol { list-style: none; margin: 0; padding: 0; counter-reset: chemin; display: grid; }
.une-chemin li { counter-increment: chemin; position: relative; display: grid; gap: 2px; padding: 12px 0 12px 48px; border-top: 1px solid var(--filet); }
.une-chemin li::before { content: "0" counter(chemin); position: absolute; left: 0; top: 10px; font: italic 500 26px/1 var(--police-luxe); color: var(--or-clair); }
.une-chemin li b { font: 700 13.5px var(--police-titre); text-transform: uppercase; letter-spacing: .05em; }
.une-chemin li span { color: var(--texte-2); font-size: 14px; line-height: 1.45; }
.une-chemin-prix { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--filet); color: var(--texte-2); font-size: 14px; }
.une-chemin-prix b { font: italic 500 26px var(--police-luxe); color: var(--or-clair); margin-left: 4px; }

/* ---------- Les formules ---------- */
.cible { scroll-margin-top: calc(var(--haut-entete) + 16px); }
.cible:focus { outline: none; }
.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.carte-formule { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px); border: 1px solid color-mix(in srgb, var(--laurier) 28%, transparent); border-radius: 6px; background: linear-gradient(170deg, rgba(239, 154, 130, .06), rgba(14, 10, 8, .4) 55%); }
.carte-formule.conseillee { border-color: var(--laurier); box-shadow: 0 0 0 1px var(--laurier), 0 30px 60px -36px rgba(239, 154, 130, .55); }
.formule-badge { position: absolute; top: -12px; right: 20px; padding: 5px 10px; border-radius: 2px; background: var(--laurier); color: #1c0c07; font: 700 10.5px/1 var(--police-mono); letter-spacing: .16em; text-transform: uppercase; }
.carte-formule > .donnees { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--laurier); }
.carte-formule h3 { margin: 0 0 4px; font: 700 clamp(20px, 2.2vw, 26px)/1.15 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.formule-heures { margin: 0 0 16px; color: var(--texte-2); }
.formule-heures b { color: var(--texte); font-weight: 500; }
.formule-prix { display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 0; border-block: 1px solid var(--filet); }
.formule-prix b { font: italic 500 clamp(28px, 3vw, 36px)/1.05 var(--police-luxe); color: var(--or-clair); }
.formule-prix span { font-size: 13.5px; color: var(--texte-2); }
.formule-pour { margin: 0 0 14px; font-size: 15px; }
.formule-etapes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; counter-reset: fe; }
.formule-etapes li { counter-increment: fe; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(240, 194, 123, .2); font-size: 14.5px; }
.formule-etapes li span::before { content: counter(fe) ". "; color: var(--laurier); font-family: var(--police-mono); }
.formule-etapes b { font-weight: 500; font-family: var(--police-mono); font-size: 13.5px; color: var(--texte-2); white-space: nowrap; }
.formule-resultat { display: grid; gap: 4px; margin: 0 0 22px; font-size: 15px; }
.formule-resultat .donnees { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--laurier); }
.carte-formule .btn { margin-top: auto; }
.formules-plus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(16px, 3vw, 40px); margin-top: clamp(24px, 3vw, 36px); padding-top: 22px; border-top: 1px solid var(--filet); }
.formules-plus p { margin: 0; color: var(--texte-2); font-size: 15px; }
.formules-plus b { color: var(--texte); font-weight: 500; }
.formules-plus a { color: var(--laurier); }

/* ---------- Les séances, dans l'ordre ---------- */
.parcours-etapes { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: pe; }
.parcours-etapes li { counter-increment: pe; position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 0 0; border-top: 2px solid color-mix(in srgb, var(--laurier) 35%, transparent); }
.parcours-etapes li::before { content: "0" counter(pe); font: italic 500 30px/1 var(--police-luxe); color: var(--laurier); }
.parcours-etapes li::after { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; transform: rotate(45deg); background: var(--laurier); }
.parcours-etapes b { font: 700 14px var(--police-titre); text-transform: uppercase; letter-spacing: .04em; }
.parcours-etapes span { color: var(--texte-2); font-size: 14.5px; }
.table-defile { overflow-x: auto; border: 1px solid var(--filet); border-radius: 6px; background: rgba(14, 10, 8, .55); }
.table-repartition { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-repartition th, .table-repartition td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
.table-repartition thead th { font: 600 12px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.table-repartition thead th.conseillee { color: var(--laurier); }
.table-repartition tbody th, .table-repartition tfoot th { font-weight: 500; }
.table-repartition td { font-family: var(--police-mono); font-size: 14.5px; }
.table-repartition .conseillee { background: rgba(239, 154, 130, .06); }
.table-repartition tfoot td { font: italic 500 20px var(--police-luxe); color: var(--or-clair); }
.table-repartition tfoot td.resultat { font: 300 14px/1.45 var(--police); color: var(--texte-2); }
.table-repartition tfoot tr:last-child th, .table-repartition tfoot tr:last-child td { border-bottom: 0; }
.table-repartition .non { color: var(--texte-3); }

/* ---------- Lieu et horaires ---------- */
.lieu-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.carte-lieu { padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--filet); border-radius: 6px; background: var(--surface); }
.carte-lieu > .donnees { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--laurier); }
.carte-lieu h3 { margin: 0 0 10px; font: 700 clamp(19px, 2vw, 24px)/1.2 var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.carte-lieu h3 em { font-family: var(--police-luxe); font-style: italic; font-weight: 500; text-transform: none; color: var(--laurier); }
.carte-lieu address { font-style: normal; font-size: 18px; line-height: 1.5; margin: 0 0 6px; }
.lieu-quartier { margin: 0 0 18px; color: var(--texte-2); font-size: 14.5px; }
.horaires { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.horaires th, .horaires td { padding: 9px 0; border-bottom: 1px dashed rgba(240, 194, 123, .22); text-align: left; font-weight: 400; }
.horaires td { text-align: right; font-family: var(--police-mono); font-size: 15px; color: var(--or-clair); white-space: nowrap; padding-left: 12px; }
.horaires tr.ferme th, .horaires tr.ferme td { color: var(--texte-3); }
.lieu-regle { margin: 0 0 18px; color: var(--texte-2); font-size: 15px; }
.reserver-infos { display: grid; gap: 16px; }
.reserver-infos .carte-lieu .hero-actions { margin-top: 8px; }
.regles { margin-top: 8px; }
.regles li::before { background: var(--laurier); }
.alerte-delai { margin: 0; padding: 12px 14px; border-left: 2px solid var(--or); border-radius: 3px; background: rgba(240, 194, 123, .08); font-size: 14.5px; }
.alerte-delai.bloque { border-color: #e5383b; background: rgba(229, 56, 59, .1); }
.encart-salle { margin-bottom: clamp(18px, 2.4vw, 28px); border-left-color: var(--laurier); }
.encart-salle .surtitre { color: var(--laurier); }

/* ---------- Questions et réponses ---------- */
.faq-liste { display: grid; border-top: 1px solid var(--filet); }
.faq-item { border-bottom: 1px solid var(--filet); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 4px; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: clamp(16.5px, 1.7vw, 19px); font-weight: 500; line-height: 1.35; }
.faq-item summary:hover .faq-q { color: var(--laurier); }
.faq-signe { position: relative; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--filet); border-radius: 50%; }
.faq-signe::before, .faq-signe::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; background: var(--laurier); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.faq-signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-signe::after { transform: translate(-50%, -50%) rotate(0); }
.faq-r { padding: 0 4px 22px; max-width: 72ch; color: var(--texte-2); }
.faq-r p { margin: 0; }
.faq-etapes { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: fq; display: grid; gap: 10px; }
.faq-etapes li { counter-increment: fq; position: relative; padding-left: 40px; color: var(--texte); }
.faq-etapes li::before { content: counter(fq); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--laurier) 50%, transparent); font: 600 12px var(--police-mono); color: var(--laurier); }
.faq-theme { margin: clamp(32px, 4vw, 48px) 0 8px; }
.faq-theme:first-child { margin-top: 0; }
.formateur-citation { margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--filet); }

/* ---------- Les cartes des plateformes ---------- */
.cartes-plateformes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.carte-plateforme { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; min-height: 200px; padding: 20px 18px 48px; border: 1px solid var(--filet); border-top: 2px solid var(--pf); border-radius: 6px; background: linear-gradient(170deg, color-mix(in srgb, var(--pf) 8%, transparent), transparent 60%); color: var(--texte); text-decoration: none; transition: border-color .2s, transform .25s var(--ease); }
.carte-plateforme:hover { border-color: var(--pf); transform: translateY(-2px); }
.carte-plateforme .donnees { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pf); }
.carte-plateforme b { font: 700 16px/1.2 var(--police-titre); text-transform: uppercase; letter-spacing: .04em; }
.carte-plateforme-texte { color: var(--texte-2); font-size: 14px; line-height: 1.5; }
.carte-plateforme-fleche { position: absolute; left: 18px; bottom: 16px; color: var(--pf); font-size: 18px; transition: transform .25s var(--ease); }
.carte-plateforme:hover .carte-plateforme-fleche { transform: translateX(4px); }
.carte-plateforme.ici { background: color-mix(in srgb, var(--pf) 10%, transparent); }

/* ---------- Le menu (téléphone) : une carte par plateforme ---------- */
.menu-plateformes { display: grid; gap: 12px; }
.menu-pf { padding: 12px 14px; border: 1px solid var(--bord); border-left: 2px solid var(--pf); border-radius: 4px; }
.menu-pf.ici { background: color-mix(in srgb, var(--pf) 7%, transparent); border-color: color-mix(in srgb, var(--pf) 45%, transparent); }
.menu-pf-titre { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font: 700 16px var(--police-titre); text-transform: uppercase; letter-spacing: .04em; }
.menu-pf-titre .losange { --c: var(--pf); background: var(--pf); }
.menu-pf-titre small { font: italic 500 14px var(--police-luxe); text-transform: none; letter-spacing: 0; color: var(--pf); }
.menu-pf ul { list-style: none; margin: 0; padding: 0 0 2px 21px; display: flex; flex-wrap: wrap; gap: 0 18px; }
.menu-pf ul a { display: inline-flex; align-items: center; min-height: 40px; color: var(--texte-2); text-decoration: none; font-size: 15px; }
.menu-pf ul a:hover { color: var(--texte); }
.pied-col .pied-titre { color: var(--pf, var(--accent)); }
.pied-colonnes { grid-template-columns: repeat(5, auto); }

/* ---------- Écrans moyens et téléphone ---------- */
@media (max-width: 1100px) {
  .cartes-plateformes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .parcours-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pied-colonnes { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 960px) {
  .une-formations-grille { grid-template-columns: minmax(0, 1fr); }
  .formules { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .formules-plus { grid-template-columns: minmax(0, 1fr); }
  .lieu-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .plateformes-titre, .pf-radio-lien { display: none; }
  .plateformes-rang { padding-right: 8px; gap: 4px; }
  .plateformes ul a { padding: 0 10px; font-size: 11px; letter-spacing: .06em; }
  .btn-pro#btn-cta { padding: 0 12px; }
  .btn-pro#btn-cta .btn-pro-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 720px) {
  .une-infos { grid-template-columns: minmax(0, 1fr); }
  .une-infos li + li { border-left: 0; border-top: 1px solid var(--filet); }
  .une-formations-fond img { object-position: 60% 50%; opacity: .22; }
  .cartes-plateformes { grid-template-columns: minmax(0, 1fr); }
  .carte-plateforme { min-height: 0; }
  .parcours-etapes { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .parcours-etapes li { padding-right: 0; }
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .une-formations .hero-actions .btn { flex: 1 1 100%; }
  .pf-radio-btn small { display: none; }
}
/* Le nom de la plateforme reste toujours visible à côté du logo : c'est lui qui dit où l'on est */
.entete .logo small { display: inline; }
@media (max-width: 420px) {
  .entete .logo small { font-size: 13px; }
  .entete .logo span { font-size: 13px; letter-spacing: .04em; }
  .entete .logo { gap: 7px; }
  .entete .logo-marque { width: 28px; height: 28px; }
}
@media (max-width: 520px) {
  /* Téléphone : le nom de la plateforme passe sous LEOPROD, pour laisser la place aux boutons */
  .entete .logo { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 3px; align-items: center; justify-content: start; }
  .entete .logo-marque { grid-row: 1 / 3; }
  .entete .logo span, .entete .logo small { grid-column: 2; line-height: 1; }
  .btn-pro#btn-cta { min-height: 40px; padding: 0 12px; font-size: 11px; letter-spacing: .08em; margin-right: 0; }
  .btn-grand { white-space: normal; text-align: center; letter-spacing: .1em; padding-inline: 18px; }
  .plateformes ul a { padding: 0 8px; }
  .pf-radio-btn { padding-right: 10px; }
}
@media (max-width: 860px) {
  .onglets { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .onglets a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; font-size: 10px; }
  .onglets .actif::before { background: var(--pf); }
  .onglets [data-nav="radio"].actif::before { background: var(--radio); }
}
.pied-reseaux { flex-wrap: wrap; gap: 4px 14px; }
.nav { flex-wrap: nowrap; }
.nav a { white-space: nowrap; }
@media (max-width: 1440px) { .nav a { padding: 8px 7px; letter-spacing: .07em; font-size: 12px; gap: 7px; } }

/* LES LANGUES (i18n.js) : le bouton globe de l'en-tête et sa liste */
.langues { position: relative; }
.btn-langue { gap: 7px; padding: 0 10px; }
.langues-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 200px; background: var(--surface); border: 1px solid var(--bord); border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.langues-liste a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 4px; color: var(--texte-2); text-decoration: none; font-size: 15px; }
.langues-liste a:hover, .langues-liste a:focus-visible { background: rgba(255, 255, 255, .06); color: var(--texte); outline: none; }
.langues-liste a[aria-checked="true"] { color: var(--texte); }
.langues-liste a[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }
.langue-code { font: 600 11px var(--police-mono); letter-spacing: .12em; color: var(--accent); min-width: 22px; }
/* chinois, japonais, coréen : pas de majuscules forcées ni de grands espacements */
html:is([lang="zh"], [lang="ja"], [lang="ko"]) .t-titre, html:is([lang="zh"], [lang="ja"], [lang="ko"]) .titre-section { letter-spacing: .02em; word-break: keep-all; }
@media (max-width: 720px) { .btn-langue span { display: none; } .langues-liste { position: fixed; left: 16px; right: 16px; top: 64px; min-width: 0; } }

/* ============================================================
   DIRECTION ARTISTIQUE « GOLDEN HOUR » (2026-10-25)
   D'après les photos de Léo : la lumière chaude du soir (la Garonne, le champ de blé, les pochettes
   Solaya et Du Soleil au Béton), ses voyages (le Sénégal, New York), la brique rose de Toulouse,
   le grain de la pellicule. Trois motifs, tous discrets :
   - la lueur du couchant : des halos orange et rose, très légers, derrière les hauts de page ;
   - le tirage : une photo droite avec un fin bord de papier crème et une légende en italique ;
   - la pellicule : une bande de film qui fait défiler les photos de Léo et de ses voyages.
   ============================================================ */

/* ---------- La lueur du couchant et le grain ---------- */
body { background: radial-gradient(1100px 620px at 88% -8%, rgba(240, 122, 46, .08), transparent 62%), radial-gradient(900px 560px at -12% 12%, rgba(239, 154, 130, .045), transparent 60%), var(--fond); background-repeat: no-repeat; }
body::after { opacity: .055; }
.entete { background: rgba(14, 10, 8, .8); }
.plateformes { background: #120c09; }
::selection { background: var(--or); color: #1c0c07; }

/* Les étiquettes (DM Mono) : un peu moins espacées que l'ancienne police, plus larges */
.surtitre { letter-spacing: .16em; }
.btn { letter-spacing: .12em; border-radius: 2px; }
.surtitre .num { color: var(--or); }

/* ---------- Le tirage photo ---------- */
.tirage { position: relative; margin: 0; padding: 7px 7px 0; background: var(--papier); border-radius: 1px;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .2); }
.tirage img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: #2a1f18;
  filter: sepia(.1) saturate(1.02) contrast(1.03); }
.tirage figcaption { padding: 9px 4px 10px; font: italic 500 16px/1.2 var(--police-luxe); color: #4a3526; letter-spacing: 0; text-transform: none; }

/* Les grands portraits (Léo Lafayette, Døoble L) deviennent aussi des tirages : bord de papier, légende à la main */
.artiste-portrait, .duo-portrait { padding: 7px 7px 40px; background: var(--papier); border-radius: 1px; overflow: visible;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .2); }
.artiste-portrait::before, .artiste-portrait::after, .duo-portrait::before, .duo-portrait::after { display: none; }
.artiste-portrait img, .duo-portrait img { filter: sepia(.08) saturate(1.02) contrast(1.03); }
.artiste-portrait figcaption, .duo-portrait figcaption { inset: auto 0 0 0; padding: 0 11px 11px; background: none; color: #4a3526;
  font: italic 500 16px/1.2 var(--police-luxe); letter-spacing: 0; text-transform: none; }

/* ---------- Le haut de l'accueil (Formations) : le couchant derrière, le portrait de Léo en tirage ---------- */
.une-formations-fond img { opacity: .36; object-position: 50% 62%; filter: sepia(.18) saturate(1.05) contrast(1.02); }
.une-formations-fond::after { background:
  radial-gradient(60% 70% at 78% 70%, rgba(240, 122, 46, .16), transparent 70%),
  linear-gradient(90deg, var(--fond) 22%, rgba(14, 10, 8, .8) 52%, rgba(14, 10, 8, .5)),
  linear-gradient(180deg, rgba(14, 10, 8, .2), transparent 30%, var(--fond)); }
.une-formations-grille { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.une-tirage { justify-self: center; width: min(100%, 360px); }
/* le chemin d'un morceau passe sous le texte, en une ligne */
.une-chemin { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 28px; padding: 16px 22px 18px; }
.une-chemin > .donnees { grid-column: 1 / -1; }
.une-chemin > .donnees { margin: 0; }
.une-chemin ol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; }
.une-chemin li { padding: 6px 0 6px 34px; border-top: 0; white-space: nowrap; }
.une-chemin li::before { top: 3px; font-size: 22px; }
.une-chemin li b { font-size: 12px; }
.une-chemin li span { display: none; }
.une-chemin-prix { margin: 0; padding: 0; border: 0; white-space: nowrap; }

/* ---------- Le formateur : sa photo à côté des chiffres ---------- */
.formateur-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.formateur-tirage { width: min(100%, 360px); justify-self: center; }
.formateur-grille .chiffres-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- La pellicule ---------- */
.pellicule { --trou: rgba(241, 230, 211, .5); overflow: hidden; padding: 20px 0; background: #080605;
  border-block: 1px solid var(--filet); margin: clamp(24px, 4vw, 48px) 0; }
.pellicule-piste { display: flex; gap: 8px; width: max-content; animation: defile 110s linear infinite; position: relative; }
.pellicule img { display: block; height: clamp(140px, 16vw, 210px); width: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 1px;
  filter: sepia(.12) saturate(.95) contrast(1.03); }
/* les perforations du film, en haut et en bas */
.pellicule::before, .pellicule::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--trou) 0 7px, transparent 7px 20px); opacity: .28; }
.pellicule { position: relative; }
.pellicule::before { top: 7px; height: 6px; }
.pellicule::after { bottom: 7px; height: 6px; }
.pellicule:hover .pellicule-piste { animation-play-state: paused; }
.calme .pellicule-piste { animation: none; }
@media (prefers-reduced-motion: reduce) { .pellicule-piste { animation: none; } }

/* ---------- Les cartes des plateformes, avec leur photo ---------- */
.carte-plateforme.avec-photo { overflow: hidden; isolation: isolate; padding-top: 150px; border-radius: 3px; }
.carte-plateforme-photo { position: absolute; inset: 0 0 auto 0; height: 170px; z-index: -1; }
.carte-plateforme-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: sepia(.16) saturate(1.05);
  transition: transform .8s var(--ease); }
.carte-plateforme-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--fond) 96%); }
.carte-plateforme.avec-photo:hover .carte-plateforme-photo img { transform: scale(1.05); }

/* ---------- La vente de beats : le soleil derrière le logo vivant ---------- */
.une::before { background: radial-gradient(42% 55% at 74% 50%, rgba(240, 122, 46, .15), transparent 70%), radial-gradient(60% 50% at 70% 100%, rgba(239, 154, 130, .07), transparent 70%), radial-gradient(40% 50% at 10% 80%, rgba(240, 194, 123, .05), transparent 70%); }

/* ---------- Écrans moyens et téléphone ---------- */
@media (max-width: 960px) {
  .une-formations-grille { grid-template-columns: minmax(0, 1fr); }
  .une-tirage { width: min(64%, 280px); }
  .une-chemin { grid-template-columns: minmax(0, 1fr); }
  .une-chemin ol { justify-content: flex-start; gap: 4px 22px; }
  .formateur-grille { grid-template-columns: minmax(0, 1fr); }
  .formateur-tirage { width: min(72%, 300px); }
}
@media (max-width: 720px) {
  .une-formations-fond img { opacity: .3; }
  .formateur-grille .chiffres-detail { grid-template-columns: minmax(0, 1fr); }
  .artiste-portrait, .duo-portrait { padding-bottom: 38px; }
  .carte-plateforme.avec-photo { padding-top: 130px; }
  .carte-plateforme-photo { height: 150px; }
  .pellicule { padding: 18px 0; }
}
/* DM Mono est plus large que l'ancienne police : le menu de l'en-tête se resserre un peu */
.nav a { font-size: 12px; letter-spacing: .08em; }
@media (max-width: 1440px) { .nav a { padding: 8px 6px; letter-spacing: .04em; font-size: 11.5px; gap: 6px; } .btn-pro { letter-spacing: .08em; } }
/* Les photos de voyage dans « Le parcours » : un voile sombre en haut, pour que la région reste lisible sur un ciel ou un sable clair */
.escale-carte.avec-photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(10, 7, 5, .62), transparent); }
.escale-carte.avec-photo .escale-haut { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
/* Le crédit d'une photo qui n'est pas de Léo (licence libre), en bas à droite de la carte */
.escale-credit { position: absolute; right: 8px; bottom: 6px; z-index: 3; font: 400 10px/1.2 var(--police-mono); letter-spacing: .02em; color: rgba(247, 236, 220, .75);
  text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); padding: 4px; }
.escale-credit:hover { color: var(--texte); text-decoration: underline; }
/* Sur téléphone, la carte d'un voyage est en paysage : on garde le haut des photos (l'avion de Saint-Martin, le pont de New York) */
@media (max-width: 720px) { .escale-carte.avec-photo img { object-position: 50% 18%; } }
/* Les clips du duo : quand il y en a un nombre impair, le premier (le plus récent) s'affiche en grand */
.clips > .clip:first-child:nth-last-child(odd) { grid-column: 1 / -1; }

/* ============================================================
   ACCESSIBILITÉ ET ERGONOMIE (2026-10-25)
   - les tarifs selon sa situation, dès l'accueil (salle, domicile, structures)
   - des petits textes plus lisibles, des liens plus faciles à toucher au doigt
   - « Confort de lecture » : taille du texte, contraste renforcé, lecture facilitée, animations réduites
   ============================================================ */

/* Les tarifs selon sa situation, dans l'en-tête de l'accueil */
.acces-tarifs { margin-top: 26px; max-width: 560px; }
.acces-tarifs > .donnees { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--laurier); }
.acces-tarifs ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.acces-tarifs li { border-bottom: 1px solid var(--filet); }
.acces-tarifs a, .acces-tarifs button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; width: 100%; min-height: 56px; padding: 10px 4px;
  border: 0; background: none; color: var(--texte); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: background .2s, padding .2s;
}
.acces-tarifs a:hover, .acces-tarifs button:hover { background: color-mix(in srgb, var(--laurier) 10%, transparent); padding-left: 12px; }
.acces-qui { font-size: 15.5px; font-weight: 500; }
.acces-tarifs b { font-family: var(--police-luxe); font-style: italic; font-weight: 500; font-size: 18px; color: var(--laurier); white-space: nowrap; }
.acces-fleche { color: var(--laurier); font-size: 18px; }
@media (max-width: 520px) {
  .acces-tarifs a, .acces-tarifs button { grid-template-columns: minmax(0, 1fr) auto; }
  .acces-tarifs b { grid-column: 1; grid-row: 2; font-size: 17px; }
  .acces-fleche { grid-column: 2; grid-row: 1 / 3; }
}
.carte-tarif { scroll-margin-top: calc(var(--haut-entete) + 72px); }
.carte-tarif:focus { outline: none; }
.carte-tarif:target, .carte-tarif:focus-visible { border-color: var(--laurier); }

/* Des petits textes plus lisibles (rien sous 11,5 px, sauf l'habillage des pochettes) */
.une-infos .donnees, .formule-resultat .donnees, .carte-plateforme .donnees { font-size: 12px; }
.une-chemin > .donnees, .carte-formule > .donnees, .carte-lieu > .donnees, .ville-texte .donnees { font-size: 12.5px; }
.pied-titre { font-size: 12.5px; }
.badge-nouveau, .formule-badge { font-size: 11.5px; }
.ville-ici, .ville-bientot { font-size: 11.5px; }
.citation figcaption { font-size: 12.5px; }
.plateformes ul a { font-size: 12.5px; }
@media (max-width: 720px) {
  .onglets a span { font-size: 11.5px; letter-spacing: .02em; }
  .btn-confort { display: none; }
}

/* Les liens dans le texte se voient aussi sans la couleur (soulignés) */
main p a:not([class]), .formules-plus a, .sous-titre a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Au doigt : des liens du pied de page et du menu assez grands (44 px de haut) */
@media (pointer: coarse) {
  .pied-col { gap: 0; }
  .pied-col a, .pied-col .lien, .menu-bas a, .menu-bas .lien { display: inline-flex; align-items: center; min-height: 44px; }
  .pied-contact a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* La fenêtre « Confort de lecture » (et le même panneau dans le menu) */
.modale-confort { width: min(520px, calc(100% - 24px)); }
.confort { display: grid; gap: 10px; }
.confort-titre { margin: 0 0 10px; font: 600 12.5px var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.confort-groupe { margin-bottom: 6px; }
.confort-tailles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.confort-tailles button {
  display: grid; justify-items: center; gap: 4px; min-height: 72px; padding: 10px 6px; border: 1px solid var(--bord); border-radius: 6px;
  background: transparent; color: var(--texte-2); font: 500 14px var(--police); cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.confort-a { font: 700 calc(16px + var(--i) * 6px)/1 var(--police); color: var(--texte); }
.confort-tailles button[aria-pressed="true"] { border-color: var(--or); color: var(--texte); background: color-mix(in srgb, var(--or) 12%, transparent); }
.confort-bascule {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 12px 16px;
  border: 1px solid var(--bord); border-radius: 6px; background: transparent; color: var(--texte); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s;
}
.confort-bascule:hover, .confort-tailles button:hover { border-color: var(--or); }
.confort-textes { display: grid; gap: 2px; }
.confort-textes b { font-weight: 600; font-size: 15.5px; }
.confort-textes span { color: var(--texte-2); font-size: 13.5px; }
.confort-interrupteur { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 13px; background: var(--bord); transition: background .2s; }
.confort-interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--texte-2); transition: transform .2s, background .2s; }
.confort-bascule[aria-pressed="true"] { border-color: var(--or); background: color-mix(in srgb, var(--or) 8%, transparent); }
.confort-bascule[aria-pressed="true"] .confort-interrupteur { background: var(--or); }
.confort-bascule[aria-pressed="true"] .confort-interrupteur::after { transform: translateX(20px); background: #0e0a08; }
.confort-note { margin: 16px 0 0; color: var(--texte-2); font-size: 13.5px; }
.menu-confort { margin-top: 22px; border-top: 1px solid var(--filet); padding-top: 6px; }
.menu-confort summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 600; font-size: 15.5px; }
.menu-confort summary small { color: var(--texte-2); font-weight: 400; font-size: 13.5px; }
.menu-confort .confort { margin: 6px 0 4px; }

/* Taille du texte : le contenu est agrandi en entier (les textes en px aussi), la mise en page suit */
.texte-grand #vue, .texte-grand .pied, .texte-grand .modale-contenu, .texte-grand .lecteur { zoom: 1.15; }
.texte-tres-grand #vue, .texte-tres-grand .pied, .texte-tres-grand .modale-contenu, .texte-tres-grand .lecteur { zoom: 1.3; }
.texte-grand #vue, .texte-tres-grand #vue, .texte-grand .pied, .texte-tres-grand .pied { overflow-x: clip; }   /* les bandeaux pleine largeur (100vw) ne débordent pas */

/* Contraste renforcé : textes secondaires presque blancs, filets et bordures bien visibles */
:root.contraste {
  --texte: #fffaf2; --texte-2: #f1e6d6; --texte-3: #ddcdb8;
  --filet: rgba(250, 215, 170, .5); --bord: #8a7563;
}
.contraste .revele { opacity: 1 !important; }
.contraste .une-formations-fond img, .contraste .une-formations-fond { opacity: .25; }
.contraste a:focus-visible, .contraste button:focus-visible, .contraste :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Lecture facilitée : sans majuscules ni lettres espacées, une police simple, des lignes plus aérées */
.lisible body *:not(.pochette *):not(.pochette) { text-transform: none !important; letter-spacing: normal !important; }
.lisible :is(.donnees, .surtitre, .btn, .nav a, .btn-outil, .pied-titre, .onglets a, .plateformes ul a, .citation figcaption, .statut, .badge-nouveau, .formule-badge, .confort-titre, .modale-entete h2, .titre-section, .titre-page, .titre-une, h1, h2, h3, h4) { font-family: var(--police) !important; }
.lisible :is(h1, h2, h3) em, .lisible .acces-tarifs b, .lisible .tirage figcaption { font-family: var(--police) !important; font-style: normal !important; }
.lisible main :is(p, li, dd) { line-height: 1.75; }
.lisible main a:not(.btn) { text-decoration: underline !important; text-underline-offset: 4px; }