/* cl26.11.02 — Olograme : feuille de style unique (maquette validée le 02/11/2026) */
@font-face{font-family:"Poppins";font-weight:100;font-display:swap;src:url(/fonts/poppins-100.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:200;font-display:swap;src:url(/fonts/poppins-200.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:300;font-display:swap;src:url(/fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
/* cl26.11.07 — texte courant en Inter (plus lisible sur mobile et bureau) ; Poppins reste la police des titres */
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --fond:#f6f5f2;--encre:#161616;--gris:#6d6a65;--trait:#dcd9d3;
  --police:"Poppins","Century Gothic",system-ui,sans-serif;--large:1120px;
  --texte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--rayon:8px;--rayon-petit:4px;--doux:cubic-bezier(.2,.8,.2,1);
  --logo:none;color-scheme:light;
}
/* cl26.11.03 — mode sombre : réglage de l'appareil, ou choix forcé par le bouton du bandeau (data-theme sur <html>, gardé dans le navigateur) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){--fond:#121211;--encre:#eceae6;--gris:#9b978f;--trait:#2d2c29;--logo:invert(1);color-scheme:dark}
}
:root[data-theme="sombre"]{--fond:#121211;--encre:#eceae6;--gris:#9b978f;--trait:#2d2c29;--logo:invert(1);color-scheme:dark}
.marque img,.pied img,.intro img{filter:var(--logo)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--fond);color:var(--encre);font:400 16px/1.65 var(--texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.sans-defilement{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.bande{max-width:var(--large);margin:0 auto;padding:0 24px}
.petit{font-size:13px;color:var(--gris)}

/* Restes du CMS : outils d'édition masqués, page introuvable */
.d-none,.cms .edit{display:none!important}
.cms .container{max-width:var(--large);margin:0 auto;padding:120px 24px;text-align:center}
.cms .container h2{font:100 56px/1.1 var(--police);margin-bottom:12px}
.cms .container .btn{margin-top:24px;font:400 14px var(--texte);background:none;border:0;border-bottom:1px solid var(--encre);cursor:pointer;color:var(--encre)}

/* En-tête */
.entete{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--fond) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.entete .bande{display:flex;align-items:center;justify-content:space-between;height:68px}
.marque{display:flex;align-items:center;gap:12px}
.marque img{width:40px;height:40px}
.marque span{font:200 24px/1 var(--police);letter-spacing:.04em}
.menu{display:flex;gap:28px;font-size:14px}
.menu a{color:var(--gris);transition:color .2s}
.menu a:hover{color:var(--encre)}

/* Ouverture */
.ouverture img{width:100%;aspect-ratio:2048/582;object-fit:cover}
.legende{font-size:13px;color:var(--gris);padding-top:10px}

/* Rubriques */
.rubrique{padding-top:96px}
.titre{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--trait);padding-bottom:14px;margin-bottom:36px}
.titre h2,.concert-tete h1{font:100 68px/1.05 var(--police);letter-spacing:-.02em}
.titre p{font-size:14px;color:var(--gris)}
h3{font:200 22px/1.3 var(--police)}

/* Morceaux */
.morceaux{list-style:none}
.morceau{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--trait)}
.lire{width:44px;height:44px;border-radius:50%;border:1px solid var(--encre);display:grid;place-items:center;background:none;color:var(--encre);cursor:pointer;transition:background .2s,color .2s}
.lire:hover,.morceau.en-lecture .lire{background:var(--encre);color:var(--fond)}
.lire svg{width:14px;height:14px;margin-left:2px}
.duree{font-variant-numeric:tabular-nums;color:var(--gris);font-size:14px}

/* Concerts */
.concerts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.vignette{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9}
.vignette img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .5s ease,opacity .3s}
.concert:hover .vignette img{transform:scale(1.03);opacity:1}
.nb{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:3px 8px}
.concert h3{margin-top:14px}
.concert-tete{padding-top:64px}
.retour{display:inline-block;font-size:14px;color:var(--gris);margin-bottom:24px}
.concert-tete .petit{font-size:15px;margin-top:8px}

/* Écoutes */
.ecoutes{display:grid;grid-template-columns:5fr 6fr;gap:56px}
.classement{list-style:none;counter-reset:rang}
.classement li{counter-increment:rang;display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--trait)}
.classement li::before{content:counter(rang,decimal-leading-zero);font-size:12px;color:var(--gris)}
.classement .art{font:200 21px/1.3 var(--police)}
.classement .n{font-size:13px;color:var(--gris)}
.pochettes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pochette img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
.pochette p{font-size:12px;line-height:1.4;margin-top:8px}
.pochette b{font-weight:500;display:block}
.pochette span{color:var(--gris)}
.morceaux-top{margin-top:32px}

/* Photos */
.album+.album{margin-top:56px}
.album-tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.lien{font-size:14px;border-bottom:1px solid var(--encre);padding-bottom:1px;white-space:nowrap}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:12px}
.galerie a{display:block;overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.galerie a:hover img{opacity:.85}
.galerie .h{grid-row:span 2}
.tous{margin-top:32px;text-align:right}
.introuvable{padding:120px 0;text-align:center}

/* Panoramas : à leur taille réelle, jamais agrandis */
.panos{display:flex;flex-direction:column;gap:40px}
.panos figure{margin:0 auto;max-width:100%;display:table}
.panos img{width:auto;max-width:100%;margin:0 auto}
.panos figcaption{font-size:13px;color:var(--gris);padding-top:8px;display:table-caption;caption-side:bottom}
.panos figcaption span+span{float:right;margin-left:16px}

/* Plein écran */
.plein-ecran{position:fixed;inset:0;z-index:20;background:rgba(10,10,10,.94);display:flex;align-items:center;justify-content:center}
.plein-ecran[hidden]{display:none}
.plein-ecran figure{max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center}
.plein-ecran img{max-width:92vw;max-height:82vh;object-fit:contain}
.plein-ecran figcaption{color:#cfccc6;font-size:13px;padding-top:10px}
.plein-ecran button{position:absolute;background:none;border:0;color:#f6f5f2;font:100 48px/1 var(--police);cursor:pointer;padding:12px 18px}
.plein-ecran :focus-visible{outline-color:#f6f5f2}
.pe-fermer{top:12px;right:12px}
.pe-prec{left:8px;top:50%;transform:translateY(-50%)}
.pe-suiv{right:8px;top:50%;transform:translateY(-50%)}

/* Pied */
.pied{margin-top:120px;border-top:1px solid var(--trait);padding:40px 0 56px}
.pied .bande{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--gris)}
.pied img{width:28px;height:28px;opacity:.7}

@media (max-width:820px){
  .bande{padding:0 16px}
  .entete .bande{height:auto;flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px;padding-bottom:12px}
  .menu{gap:20px;overflow-x:auto;max-width:100%;min-width:0}
  .titre{flex-direction:column;gap:4px}
  .titre h2,.concert-tete h1{font-size:44px}
  .rubrique{padding-top:64px}
  .concerts{grid-template-columns:1fr}
  .ecoutes{grid-template-columns:1fr;gap:40px}
  .pochettes{grid-template-columns:repeat(2,1fr)}
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .cms .container h2{font-size:40px}
}
.titre-introuvable{font:100 56px/1.1 var(--police);margin-bottom:12px}
.introuvable .lien{display:inline-block;margin-top:24px}
@media (max-width:820px){.titre-introuvable{font-size:40px}}

/* cl26.11.02 — pages par thème : menu de la page en cours, entrées de l'accueil, années des concerts */
.menu a[aria-current="page"]{color:var(--encre);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.entrees{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 28px;padding-top:72px}
.entree{grid-column:span 2}
.entree:nth-child(-n+2){grid-column:span 3}
.entrees:has(> .entree:nth-child(4):last-child) .entree{grid-column:span 3}
.entree-image{overflow:hidden;background:var(--trait);aspect-ratio:3/2}
.entree-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.entree:hover .entree-image img{transform:scale(1.03)}
.entree h2{font:100 44px/1.1 var(--police);letter-spacing:-.01em;margin-top:16px}
.annee{font:200 28px/1 var(--police);color:var(--gris);margin:56px 0 20px}
.titre+.annee{margin-top:0}
.concert h4{font:200 22px/1.3 var(--police);margin-top:14px}
.avec{font-size:15px;color:var(--gris);margin-top:6px}
@media (max-width:820px){
  .entrees{grid-template-columns:1fr;padding-top:48px}
  .entree,.entree:nth-child(-n+2),.entrees:has(> .entree:nth-child(4):last-child) .entree{grid-column:auto}
  .entree h2{font-size:34px;font-weight:200}
}

/* cl26.11.03 — connexion facultative par e-mail : lien de compte à droite du menu, page Connexion */
.outils{display:flex;align-items:center;gap:28px}
.compte{font-size:14px;color:var(--gris);padding-left:28px;border-left:1px solid var(--trait);transition:color .2s;white-space:nowrap}
.compte:hover{color:var(--encre)}
.compte[aria-current="page"]{color:var(--encre)}
.connexion p{max-width:560px}
.connexion p+p,.connexion .alerte+p{margin-top:12px}
.connexion form{margin-top:28px}
.connexion .alerte{font-weight:500;margin-bottom:20px}
.formulaire{max-width:560px}
.formulaire label{display:block;font-size:13px;color:var(--gris);margin-bottom:8px}
.ligne{display:flex;gap:12px}
.ligne input{flex:1;min-width:0;font:400 16px var(--texte);color:var(--encre);background:transparent;border:0;border-bottom:1px solid var(--encre);padding:10px 2px;border-radius:0}
.ligne input:focus-visible{outline:none;border-bottom-width:2px;padding-bottom:9px}
.bouton{font:500 14px var(--texte);color:var(--fond);background:var(--encre);border:1px solid var(--encre);padding:11px 22px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.bouton:hover{background:transparent;color:var(--encre)}
@media (max-width:820px){
  .entete .bande{position:relative}
  .outils{display:block;width:100%}
  .compte{position:absolute;top:20px;right:16px;padding-left:0;border-left:0}
  .ligne{flex-direction:column}
}

/* cl26.11.03 — panoramas par thème : sommaire des thèmes, un thème = une rubrique */
.sommaire{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:56px;font-size:14px}
.sommaire a{color:var(--gris);border-bottom:1px solid var(--trait);padding-bottom:2px;transition:color .2s,border-color .2s}
.sommaire a:hover{color:var(--encre);border-color:var(--encre)}
.sommaire+.theme-panos{padding-top:56px}
@media (max-width:820px){.sommaire{padding-top:40px}.sommaire+.theme-panos{padding-top:40px}}

/* cl26.11.03 — éditeur : modifier un concert, retirer une vidéo */
.edition{margin-top:28px}
.edition summary{display:inline-block;cursor:pointer;font-size:14px;border-bottom:1px solid var(--encre);padding-bottom:1px;list-style:none}
.edition summary::-webkit-details-marker{display:none}
.edition .formulaire{margin-top:8px}
.edition .formulaire label{margin:20px 0 4px}
.edition .bouton{margin-top:28px}
.enregistre{margin-top:16px}
.retirer{margin-top:10px}
.bouton-clair{color:var(--encre);background:transparent;padding:7px 16px;font-size:13px}
.bouton-clair:hover{background:var(--encre);color:var(--fond)}

/* cl26.11.03 — Panoramas : une page par thème. Sans thème : grille de cartes ; avec un thème : liens des thèmes en tête puis le thème */
.cms:has(> .theme-carte){display:grid;grid-template-columns:repeat(2,1fr);gap:48px 28px;max-width:var(--large);margin:0 auto;padding:96px 24px 0}
.cms:has(> .theme-carte) > :not(.theme-carte){grid-column:1/-1}
.cms:has(> .theme-carte) > .debut{display:none}
.theme-titre{margin-bottom:-8px}
.theme-carte{display:block}
.theme-image{overflow:hidden;background:var(--trait);aspect-ratio:3/1}
.theme-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.theme-carte:hover .theme-image img{transform:scale(1.03)}
.theme-carte h3{font:100 40px/1.1 var(--police);letter-spacing:-.01em;margin-top:14px}
.cms:has(> .lien-theme){display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;max-width:var(--large);margin:0 auto;padding:56px 24px 0}
.cms:has(> .lien-theme) > *{flex:0 0 100%}
.cms:has(> .lien-theme) > .lien-theme{flex:0 0 auto;order:-1;font-size:14px;color:var(--gris);border-bottom:1px solid var(--trait);padding-bottom:2px;transition:color .2s,border-color .2s}
.cms:has(> .lien-theme) > .lien-theme:hover,.lien-theme[aria-current]{color:var(--encre);border-color:var(--encre)}
.lien-theme.tous{order:-2;margin-right:16px}
.theme-titre~.theme-titre,.lien-theme.tous~.lien-theme.tous{display:none}
.cms:has(> .lien-theme) > .theme-panos{padding-top:48px}
@media (max-width:820px){
.cms:has(> .theme-carte){grid-template-columns:1fr;padding:64px 16px 0;gap:40px}
.theme-carte h3{font-size:32px}
.cms:has(> .lien-theme){padding:40px 16px 0}
}


/* cl26.11.03 — concert : mosaïque de vidéos (une demi-ligne chacune) et de photos ; cases de taille fixe, rien ne bouge au lancement */
.mosaique{padding-top:48px;container-type:inline-size}
.mosaique-compte{margin-bottom:16px}
.mosaique-grille{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:calc((100cqw - 36px) / 6);grid-auto-flow:dense;gap:12px}
.tuile-video,.tuile-photo{position:relative;overflow:hidden;margin:0;background:var(--trait)}
.tuile-video{grid-row:span 2;background:#000}
.tuile-video.gauche{grid-column:1 / span 2}
.tuile-video.droite{grid-column:3 / span 2}
.tuile-video.libre{grid-column:span 2}
.tuile-photo a,.tuile-video .lancer{display:block;width:100%;height:100%}
.tuile-photo img,.tuile-video img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .3s}
.tuile-photo:hover img,.tuile-video:hover img{transform:scale(1.04)}
.tuile-video .rond,.clip-lancer .rond{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.tuile-video .rond svg,.clip-lancer .rond svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.tuile-video:hover .rond,.clip-lancer:hover .rond{transform:scale(1.1);background:rgba(255,255,255,.3)}
.duree-video{position:absolute;right:10px;top:10px;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:2px 8px;font-variant-numeric:tabular-nums}
.duree-video:empty{display:none}
.tuile-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.tuile-video .retirer{position:absolute;left:10px;top:10px;margin:0}
.tuile-video .retirer .bouton-clair{background:rgba(255,255,255,.9);color:#161616;border-color:transparent;padding:4px 10px;font-size:12px}
.tuile-photo label{position:absolute;left:8px;bottom:8px;background:color-mix(in srgb,var(--fond) 90%,transparent);color:var(--encre);font-size:12px;padding:3px 8px;cursor:pointer}
.retirer-photos{margin-top:20px}
@media (max-width:820px){
  .mosaique-grille{grid-template-columns:repeat(2,1fr);grid-auto-rows:calc((100cqw - 8px) / 3);gap:8px}
  .tuile-video.gauche,.tuile-video.droite,.tuile-video.libre{grid-column:1 / -1}
}

/* cl26.11.03 — lecteur : la vidéo s'agrandit depuis sa case jusqu'au centre (js/olograme.js), la page derrière ne bouge pas */
.lecteur{position:fixed;inset:0;z-index:20}
.lecteur-fond{position:absolute;inset:0;background:rgba(8,8,8,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lecteur-cadre{position:fixed;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lecteur-cadre video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.lecteur .pe-fermer{position:absolute;top:12px;right:12px;background:none;border:0;color:#f6f5f2;font:100 48px/1 var(--police);cursor:pointer;padding:12px 18px;z-index:2}
.lecteur :focus-visible{outline-color:#f6f5f2}
.lecteur-titre{position:fixed;left:0;right:0;text-align:center;color:#cfccc6;font-size:13px}
/* Éditeur : couper la vidéo (début / fin) */
.coupe{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;
  color:#eceae6;font-size:13px;width:max-content;max-width:94vw}
.coupe b{font-weight:500;font-variant-numeric:tabular-nums;margin-left:4px}
.coupe button{font:500 13px var(--texte);color:#eceae6;background:transparent;border:1px solid rgba(255,255,255,.45);padding:6px 12px;cursor:pointer}
.coupe button:hover{background:rgba(255,255,255,.12)}
.coupe .enregistrer{background:#eceae6;color:#161616;border-color:#eceae6}
.coupe .enregistrer:hover{background:#fff}
/* cl26.11.04 — éditeur : retirer depuis le grand format (photo ou vidéo), ‹ › entre les vidéos, bulle d'état */
.lecteur .pe-prec,.lecteur .pe-suiv{position:absolute;background:none;border:0;color:#f6f5f2;font:100 48px/1 var(--police);cursor:pointer;padding:12px 18px;z-index:2}
.pe-outils{position:absolute;left:50%;bottom:16px;transform:translateX(-50%)}
.plein-ecran .pe-outils button,.coupe .c-retirer{position:static;font:500 13px var(--texte);color:#f6b9ad;background:transparent;border:1px solid #d9806f;padding:6px 12px;cursor:pointer}
.plein-ecran .pe-outils button:hover,.coupe .c-retirer:hover{background:rgba(217,128,111,.18)}
.pe-outils kbd,.coupe kbd{font:inherit;font-size:11px;opacity:.7;margin-left:6px;border:1px solid currentColor;padding:0 4px}
.retrait-etat{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:40;margin:0;padding:8px 16px;font-size:13px;color:#161616;background:#eceae6;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.retrait-etat.erreur{background:#f6d5ce;color:#5a1408}
.retrait-etat[hidden]{display:none}
@media (hover:none){.pe-outils kbd,.coupe kbd{display:none}}

/* cl26.11.03 — bouton clair / sombre du bandeau */
.theme{background:none;border:0;color:var(--gris);cursor:pointer;width:32px;height:32px;display:grid;place-items:center;transition:color .2s}
.theme:hover{color:var(--encre)}
.theme svg{width:18px;height:18px}
.theme .soleil{display:none}
:root[data-theme="sombre"] .theme .lune{display:none}
:root[data-theme="sombre"] .theme .soleil{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .theme .lune{display:none}
  :root:not([data-theme="clair"]) .theme .soleil{display:block}
}
@media (max-width:820px){.theme{position:absolute;top:15px;right:118px}}

/* cl26.11.03 — accueil, première visite : grand logo et « Olograme » au centre, qui zooment en disparaissant */
.intro{display:none}
.avec-intro .intro{display:flex;position:fixed;inset:0;z-index:50;background:var(--fond);align-items:center;justify-content:center;
  animation:intro-fond .9s ease 1.5s forwards}
.intro-coeur{display:flex;flex-direction:column;align-items:center;gap:22px;animation:intro-entree .9s cubic-bezier(.2,.8,.2,1) both,intro-zoom 1.2s cubic-bezier(.7,0,.84,0) 1.25s forwards}
.intro img{width:clamp(120px,22vw,220px);height:auto}
.intro span{font:100 clamp(52px,9vw,112px)/1 var(--police);letter-spacing:.08em;color:var(--encre)}
.avec-intro.intro-passee .intro{animation:intro-fond .35s ease forwards}
@keyframes intro-entree{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes intro-zoom{to{opacity:0;transform:scale(7)}}
@keyframes intro-fond{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .intro-coeur{animation:none}
  .avec-intro .intro{animation:intro-fond .6s ease 1s forwards}
}

/* cl26.11.07 — éditeur : case « Validé » d'un concert, cadre vert des concerts validés dans la liste */
.validation{margin-top:22px}
.validation label{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.validation input{width:20px;height:20px;accent-color:#3f9a4f;cursor:pointer}
.concert.valide{outline:3px solid #3f9a4f;outline-offset:6px}
.marque-valide{position:absolute;left:10px;top:10px;background:#3f9a4f;color:#fff;font-size:12px;padding:3px 8px}

/* cl26.11.07 — écoutes à 50 groupes, pages de groupe (clips YouTube, albums, concerts vus) */
.classement.groupes{columns:2;column-gap:56px;margin-bottom:56px}
.classement.groupes li{break-inside:avoid;grid-template-columns:28px 1fr auto auto}
.classement .art{color:inherit}
a.art:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.groupe-retirer{width:24px;height:24px;border:0;background:none;color:var(--gris);font-size:18px;line-height:1;cursor:pointer;padding:0}
.groupe-retirer:hover{color:#d9806f}
a.pochette{color:inherit;display:block}
a.pochette:hover img{opacity:.85}
.retires{margin-top:48px;font-size:14px}
.retires summary{cursor:pointer;color:var(--gris)}
.retires ul{list-style:none;margin-top:12px}
.retires li{display:flex;align-items:center;gap:16px;padding:6px 0;border-bottom:1px solid var(--trait)}
.retires form{margin-left:auto}
.groupe-retire{margin-top:22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.clips-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.clip{margin:0}
.clip-lancer{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.clip-lancer img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .5s ease,opacity .3s}
.clip-lancer:hover img{transform:scale(1.03);opacity:1}
.clip-lecteur{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.clip figcaption{font-size:14px;margin-top:10px}
.clip .clip-retirer{margin-top:10px}
.clip-ajout{margin-top:40px;max-width:560px}
.enregistre.erreur{color:#b4472f}
.pochettes-groupe .sans-pochette{aspect-ratio:1;background:var(--trait)}
@media (max-width:760px){
  .classement.groupes{columns:1}
  .clips-grille{grid-template-columns:1fr}
}
/* cl26.11.07 — histoire d'un groupe : frise par période (années à gauche, pochettes, albums, line-up, récit) */
.frise-intro .recit{max-width:760px;font:400 19px/1.6 var(--texte)}
.periode{display:grid;grid-template-columns:220px 1fr;gap:48px;padding-top:44px;padding-bottom:44px;border-top:1px solid var(--trait)}
.periode-tete{position:sticky;top:96px;align-self:start}
.periode-annees{font:100 40px/1.1 var(--police);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.periode-tete h2{font:200 18px/1.35 var(--police);margin-top:10px;color:var(--gris)}
.periode-pochettes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.periode-pochettes img{width:132px;height:132px;object-fit:cover;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
.periode-albums{font:200 19px/1.45 var(--police)}
.periode-lineup{margin-top:6px}
.recit{max-width:720px}
.recit p{margin-top:16px;line-height:1.7}
.sources{padding-top:40px;border-top:1px solid var(--trait)}
.sources h2{font:200 22px/1.3 var(--police);margin-bottom:10px}
.sources ul{list-style:none}
.sources li{padding:3px 0}
.sources a{color:var(--gris);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:760px){
  .periode{grid-template-columns:1fr;gap:16px}
  .periode-tete{position:static}
  .periode-annees{font-size:32px}
  .periode-pochettes img{width:96px;height:96px}
  .frise-intro .recit{font-size:17px}
}
/* cl26.11.07 — une ligne ou une pochette retirée par l'éditeur disparaît aussitôt (display:grid/block l'emporterait sur [hidden]) */
.classement li[hidden],a.pochette[hidden],.clip[hidden]{display:none}

/* cl26.11.07 — coins légèrement arrondis sur tous les visuels (sauf l'image d'ouverture, pleine largeur) ;
   isolation : sans elle, Safari laisse dépasser les coins pendant le zoom de l'image */
.vignette,.pochette img,.galerie a,.panos img,.entree-image,.theme-image,.tuile-video,.tuile-photo,.clip-lancer,.clip-lecteur,
.periode-pochettes img,.pochettes-groupe .sans-pochette,.lecteur-cadre,.plein-ecran img{border-radius:var(--rayon)}
.vignette,.galerie a,.entree-image,.theme-image,.tuile-video,.tuile-photo,.clip-lancer{isolation:isolate}
.nb,.duree-video,.marque-valide,.tuile-photo label,.retrait-etat{border-radius:var(--rayon-petit)}
.concert.valide{border-radius:var(--rayon)}

/* cl26.11.07 — effets visuels (catalogue maison) : « Survol de carte ou image » (zoom doux, pochettes qui se soulèvent),
   « Révélation en cascade » au défilement (js/olograme.js pose .vu), « Révélation modale » du plein écran */
.vignette img,.entree-image img,.theme-image img,.clip-lancer img,.galerie img{transition:transform .8s var(--doux),opacity .3s}
.concert:hover .vignette img,.entree:hover .entree-image img,.theme-carte:hover .theme-image img,.clip-lancer:hover img,.galerie a:hover img{transform:scale(1.05);opacity:1}
.galerie a:hover img{opacity:1}
a.pochette img{transition:transform .45s var(--doux),box-shadow .45s var(--doux),opacity .3s}
a.pochette:hover img{opacity:1;transform:translateY(-5px);box-shadow:0 16px 28px -14px rgba(0,0,0,.5)}
.apparition :is(.concert,.entree,.theme-carte,.galerie a,a.pochette,.tuile-photo,.tuile-video,.clip,.periode,.album-tete,.panos figure):not(.vu){opacity:0;transform:translateY(22px)}
.apparition :is(.concert,.entree,.theme-carte,.galerie a,a.pochette,.tuile-photo,.tuile-video,.clip,.periode,.album-tete,.panos figure).vu{
  transition:opacity .7s var(--doux) var(--retard,0ms),transform .8s var(--doux) var(--retard,0ms)}
.plein-ecran img.entre{animation:pe-entree .45s var(--doux)}
@keyframes pe-entree{from{opacity:0;transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){
  .vignette img,.entree-image img,.theme-image img,.clip-lancer img,.galerie img,a.pochette img,.tuile-photo img,.tuile-video img{transition:none;transform:none!important}
  .plein-ecran img.entre{animation:none}
}
/* cl26.11.08 — panoramas : outils de l'éditeur (Retirer, Validé, cadre vert des thèmes validés) */
.theme-image{position:relative}
.theme-carte.valide{outline:3px solid #3f9a4f;outline-offset:6px;border-radius:var(--rayon)}
.panos figure{position:relative}
.pano-retirer{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.65);color:#fff;border:0;border-radius:var(--rayon-petit);font-size:13px;padding:6px 12px;cursor:pointer}
.pano-retirer:hover,.pano-retirer:focus-visible{background:#b3261e}
.theme-panos .validation{margin-top:12px;font-size:14px}