/* ===========================================================================
   EXKAVE — HOME « LA CAVE + LA PLANCHE CONTACT »
   Transposition de artifacts/maquettes/la-cave-planche.html, validée le
   2026-08-16. Portée par artifacts/.../transposition/porter-css.py.

   Ce qui ne vient PAS de la maquette :
     · son en-tête (.facade/.nav/.commandes/.compte) — le produit garde son
       shell partagé, [data-exkave-menu], intouché ;
     · ses pochettes en base64 — 3,1 Mo. Les visuels viennent de l'API ;
     · ses annexes de maquette (.notes, .matieres-demo) et son pied de page.

   Les 8 textures (grain, papier, déchirure, trame, perforations) sont sorties
   en fichiers sous /brand/cave-*.svg : ce sont des SVG de moins d'un demi-kilo
   et ils portent la matière de la page.

   Le cloisonnement `.pc` est conservé : la Planche et la Cave définissent
   `.breve`, `.bouton`, `.entete`, `.titre-l` et `.scene` DIFFÉREMMENT.
   =========================================================================== */

/* --- jetons de la maquette : palette, mesures, matières --- */
:root{--m-grain:url('/brand/cave-m-grain.svg');--m-amas:url('/brand/cave-m-amas.svg');--m-papier:url('/brand/cave-m-papier.svg');--m-trame:url('/brand/cave-m-trame.svg');--m-dechire:url('/brand/cave-m-dechire.svg');}
:root{/* --- matière LAQUE : identique de jour comme de nuit.
         Une façade d'ampli reste noire en plein soleil. --- */
  --laque:          #0b0a09;--laque-2:        #141210;--laque-3:        #201c17;--sur-laque:      #fffdf7;--sur-laque-doux: rgba(255, 253, 247, .64);--sur-laque-tres-doux: rgba(255, 253, 247, .34);--laiton:         #d8b765;--laiton-clair:   #f4e6b8;--laiton-profond: #6f541f;--filet:          rgba(216, 183, 101, .30);--filet-doux:     rgba(216, 183, 101, .15);--lustre: linear-gradient(180deg, rgba(255,253,247,.11) 0%, rgba(255,253,247,.025) 36%, rgba(0,0,0,0) 72%);--laiton-degrade: linear-gradient(135deg, #fff0bd 0%, #d8b765 40%, #9b7425 72%, #4f3a13 100%);/* --- matière CARTON : c'est elle qui bascule avec le thème --- */
  --page:      #0a0908;--carton:    #14110d;--carton-2:  #1e1912;--encre:     #fffdf7;--encre-douce: rgba(255, 253, 247, .70);--cendre:    #8b8478;/* gris chaud, tiré vers le laiton */
  --trait:     rgba(255, 253, 247, .13);--grain-op:  .34;--amas-op:   .13;--papier-op: .07;--papier-melange: soft-light;--display: var(--font-display);--mono: var(--font-mono);--scene: min(1680px, calc(100vw - clamp(40px, 5vw, 104px)));--gout: clamp(14px, 1.5vw, 26px);}
.pc{--grain-fin:url('/brand/cave-grain-fin.svg');--grain-gros:url('/brand/cave-grain-gros.svg');--perfo:url('/brand/cave-perfo.svg');}
.pc{--grain-fin:url('/brand/cave-grain-fin.svg');--grain-gros:url('/brand/cave-grain-gros.svg');--perfo:url('/brand/cave-perfo.svg');/* --- palette : noire dense, or du produit, gris chaud tiré vers l'or --- */
  --nuit:        #050505;--panneau:     #0d0c0a;--panneau-2:   #16130e;--or:          #d8b765;--or-clair:    #f4e6b8;--or-profond:  #7a5c22;--craie:       #fffdf7;--cendre:      #8b8478;--trait:       rgba(216,183,101,.20);--trait-fort:  rgba(216,183,101,.46);--voile:       rgba(255,253,247,.06);--grain-op: .30;--gros-op:  .11;--display: var(--font-display);--mono: var(--font-mono);--gouttiere: clamp(14px, 1.5vw, 26px);--gloss: linear-gradient(180deg, rgba(255,253,247,.10) 0%, rgba(255,253,247,.02) 34%, rgba(0,0,0,0) 68%);--or-degrade: linear-gradient(135deg, #fff0bd 0%, #d8b765 40%, #9b7425 72%, #4f3a13 100%);}

/* Thème clair : ivoire chaud, champagne très pâle, papier de pochette.
   Jamais de blanc clinique. Le laiton s'assombrit sur papier pour rester
   lisible, mais garde sa valeur claire sur la laque. */
[data-ex="jour"]{
  --page:      #f3eee1;
  --carton:    #eae2d0;
  --carton-2:  #ded4be;
  --encre:     #131210;
  --encre-douce: rgba(19, 18, 16, .74);
  --cendre:    #6b6355;
  --trait:     rgba(19, 18, 16, .16);
  --grain-op:  .16;
  --amas-op:   .05;
  --papier-op: .16;
  --papier-melange: multiply;
}
*{ box-sizing: border-box; }
html{ overflow-x: hidden; overflow-x: clip; }
body{
  margin: 0;
  background: var(--page);
  color: var(--encre);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
.scene{
  position: relative;
  width: var(--scene);
  margin: 0 auto;
}
/* ======================================================== TYPOGRAPHIE ===== */
h1, h2, h3{ margin: 0; text-wrap: balance; }
.mono{
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--laiton);
}
.mono--sourd{ color: var(--cendre); }
.titre-xl{ font-size: clamp(2.9rem, 7vw, 6.4rem); font-weight: 400; letter-spacing: -.042em; line-height: .88; }
.titre-l{ font-size: clamp(2rem, 4.1vw, 3.4rem);  font-weight: 400; letter-spacing: -.032em; line-height: .96; }
.titre-m{ font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.16; }
.prose{ max-width: 58ch; color: var(--encre-douce); font-size: 1.03rem; }
.prose strong{ color: var(--encre); font-weight: 400; }
.laiton{ color: var(--laiton); }
[data-ex="jour"] .laiton{ color: #9d7627; }
/* ================================================== MATIÈRES / TEXTURES ==== */
/* Le grain n'est PAS un filtre global : il appartient aux zones de découverte.
   Les zones laquées restent nettes — c'est tout l'intérêt du contraste. */
.matiere-carton{ position: relative; isolation: isolate; }
.matiere-carton::before,
.matiere-carton::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.matiere-carton::before{
  background-image: var(--m-papier);
  background-size: 300px 300px;
  opacity: var(--papier-op);
  mix-blend-mode: var(--papier-melange);
}
.matiere-carton::after{
  background-image: var(--m-grain);
  background-size: 240px 240px;
  opacity: var(--grain-op);
  mix-blend-mode: overlay;
  animation: bouillon .8s steps(1, end) infinite;
}
.matiere-carton > *{ position: relative; z-index: 1; }
@keyframes bouillon {
  0%   { background-position:   0px   0px; }
  25%  { background-position: -63px  41px; }
  50%  { background-position:  39px -58px; }
  75%  { background-position: -27px -19px; }
  100% { background-position:  22px  47px; }
}
/* La laque : lustre, filet laiton, aucun grain. */
.matiere-laque{
  position: relative;
  background: var(--lustre), linear-gradient(180deg, var(--laque-2), var(--laque));
  border: 1px solid var(--filet-doux);
  color: var(--sur-laque);
  box-shadow: inset 0 1px 0 rgba(255,253,247,.09), 0 30px 70px rgba(0,0,0,.5);
}
.matiere-laque .mono--sourd{ color: var(--sur-laque-tres-doux); }
.lien{
  font-family: var(--font-mono);
  font-size: .655rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sur-laque-doux);
  text-decoration: none;
  padding: 9px 1px;
  position: relative;
  white-space: nowrap;
}
.lien::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 3px;
  height: 1px;
  background: var(--laiton);
  transition: right .3s cubic-bezier(.2,.7,.2,1);
}
.lien:hover, .lien:focus-visible{ color: var(--sur-laque); }
.lien:hover::after, .lien:focus-visible::after{ right: 0; }
.lien[aria-current="page"]{ color: var(--laiton); }
.lien[aria-current="page"]::after{ right: 0; }
/* La façade de recherche : la règle de mise en forme du conteneur avait été
   perdue à la transposition, si bien que le champ gardait sa largeur par
   défaut (169 px) et que le bouton se posait juste derrière. */
.prose--court{ display: none; }
.recherche-hifi{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  max-width: 44rem;
}
.recherche-hifi input{
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--sur-laque);
  font-family: var(--font-display);
  font-size: 1.02rem;
  padding: 13px 0;
}
.recherche-hifi input::placeholder{ color: var(--sur-laque-tres-doux); }
.recherche-hifi:focus-within{ border-color: var(--laiton); }
/* ==================================================== 3 · LE GRAND VIDE === */
.vide{ height: clamp(60px, 8vh, 110px); }
/* ===================================================== 4 · STATEMENT ====== */
.statement{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 3vw, 44px) 0 clamp(56px, 6vw, 92px);
}
.statement::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 0;
  bottom: 10%;
  width: min(64vw, 880px);
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    rgba(216, 183, 101, .28) 22px 34px,
    transparent 34px 56px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .14) 18%, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .14) 18%, #000 42%, #000 100%);
}
.statement > *{ position: relative; z-index: 1; }
.pc :not(#exkave-typography-local):not(#exkave-typography-component).statement .laiton{ font-weight: var(--font-weight-strong) !important; }
body.landing-page :not(#exkave-typography-local):not(#exkave-typography-component).statement .laiton{ font-weight: var(--font-weight-strong) !important; }
.statement p{
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -.034em;
  line-height: 1.04;
}
.statement .suite{
  margin-top: 26px;
  max-width: 46ch;
  font-size: 1.04rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.62;
  color: var(--encre-douce);
}
@media (min-width: 901px){
  /* Le vide sous le manifeste est volontairement court : la fiche vedette
     entre déjà dans la zone et son cartouche droit mord légèrement dessus. */
  .statement{ padding-bottom: clamp(24px, 3vw, 46px); }
  .vedette-corps{
    position: relative;
    z-index: 2;
    margin-top: -28px;
  }
}
@media (max-width: 720px){
  .statement::after{
    width: 44%;
    opacity: .55;
  }
}
/* ============================================== 5 · PRESSAGE VEDETTE ====== */
.vedette{ padding-bottom: clamp(40px, 5vw, 76px); }
.vedette-plan{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 62px);
  align-items: center;
}
.vedette-image{
  position: relative;
  width: 75%;
  justify-self: center;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  /* le carton d'une pochette : un bord jamais parfaitement net */
  outline: 1px solid rgba(0,0,0,.35);
}
.vedette-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--m-grain);
  background-size: 240px 240px;
  opacity: .12;
  mix-blend-mode: overlay;
}
.vedette-corps .mono{ display: block; margin-bottom: 14px; }
.vedette-corps .titre-l{ margin-bottom: 8px; }
.vedette-artiste{
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  color: var(--cendre);
  margin: 0 0 26px;
}
.vedette-action{
  display: flex;
  align-items: center;
  gap: 14px;
}
.vedette-chevrons{
  display: inline-flex;
  align-items: center;
  color: var(--laiton);
  filter: drop-shadow(0 0 12px rgba(216,183,101,.24));
}
.vedette-chevrons i{
  display: block;
  margin-left: -3px;
  font-family: var(--font-body);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: 1;
}
.vedette-chevrons i:nth-child(1){ opacity: 1; }
.vedette-chevrons i:nth-child(2){ opacity: .82; }
.vedette-chevrons i:nth-child(3){ opacity: .64; }
.vedette-chevrons i:nth-child(4){ opacity: .46; }
.vedette-chevrons i:nth-child(5){ opacity: .28; }
/* les preuves : la seule zone où la photo passe en noir et blanc, parce
   qu'ici elle ne fait pas envie, elle fait foi */
.preuves{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.preuve{
  position: relative;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.32) brightness(.82);
  border: 1px solid var(--trait);
}
.preuve[data-vide]{
  filter: none;
  background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--trait) 9px 10px);
  border-style: dashed;
  border-color: var(--filet);
}
.preuve span{
  position: absolute;
  left: 0; bottom: 0;
  padding: 4px 7px;
  background: rgba(6,6,5,.84);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laiton);
}
.preuve[data-vide] span{ background: transparent; color: var(--cendre); }
.fiche{ border-top: 1px solid var(--trait); }
.fiche-ligne{
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--trait);
  align-items: baseline;
}
.fiche-ligne dt{
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cendre);
}
.fiche-ligne dd{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.fiche-ligne dd.manque{ color: var(--laiton); }
[data-ex="jour"] .fiche-ligne dd.manque{ color: #8a6620; }
.fiche{ margin-bottom: 26px; }
/* =========================================== 6 · IMAGE PLEINE LARGEUR ===== */
/* Le moment photographique : un bac serré, coupé en haut et en bas,
   quasiment sans interface. On regarde des disques, pas une page. */
.bande-pleine{
  position: relative;
  /* 10 % retirés en haut et 10 % en bas : la composition garde son centre. */
  height: clamp(272px, 35.2vw, 528px);
  overflow: hidden;
  background: #06060a;
}
/* trois rangs de six, coupés en haut et en bas : un mur de disques,
   pas une galerie de vignettes */
.bande-pleine-rangee{
  position: absolute;
  inset: -16% -4%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  transform: rotate(-1.4deg);
}
.bande-pleine .pochette{
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 26px rgba(0,0,0,.55);
}
.bande-pleine::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.385), transparent 22%, transparent 74%, rgba(0,0,0,.42)),
    var(--m-grain);
  background-size: auto, 240px 240px;
  opacity: 1;
  mix-blend-mode: normal;
}
.bande-legende{
  position: absolute;
  left: 0; right: 0; bottom: clamp(16px, 2.4vw, 32px);
  z-index: 2;
  pointer-events: none;
}
.bande-legende .mono{ color: var(--laiton); }
/* ================================================ 8 · BAC DE PRESSAGES ==== */
/* La zone la plus brute de la page : fond carton, grain, étiquettes
   dactylographiées, pochettes qui se chevauchent comme dans un vrai bac. */
.bac{ background: var(--carton); padding: clamp(44px, 5vw, 74px) 0 clamp(48px, 5.4vw, 82px); }
.entete{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: clamp(26px, 3vw, 44px);
  border-bottom: 1px solid var(--trait);
}
.entete .mono{ display: block; margin-bottom: 10px; }
.logo-section{
  height: clamp(24px, 2.4vw, 34px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 10px;
}
[data-ex="jour"] .logo-section{ filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(.76); }
.bac-grille{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: clamp(14px, 1.6vw, 26px) clamp(10px, 1.2vw, 18px);
}
.bac-fiche{ display: block; text-decoration: none; color: inherit; }
.bac-fiche:focus-visible{ outline: 2px solid var(--laiton); outline-offset: 6px; }
.bac-fiche .pochette{
  position: relative;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.bac-fiche:hover .pochette{ transform: translateY(-9px) rotate(-.8deg); box-shadow: 0 26px 54px rgba(0,0,0,.6); }
/* rangement imparfait : chaque colonne retombe à une hauteur différente */
.bac-fiche:nth-child(4n+2){ padding-top: 26px; }
.bac-fiche:nth-child(4n+3){ padding-top: 12px; }
.bac-fiche:nth-child(4n+4){ padding-top: 34px; }
.etiquette{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--trait);
  font-family: var(--font-mono);
  font-size: .7675rem;
  letter-spacing: .1em;
  line-height: 1.75;
  color: var(--cendre);
  font-variant-numeric: tabular-nums;
}
body :not(#exkave-typography-local):not(#exkave-typography-component).etiquette b{
  display: block;
  font-weight: var(--font-weight-emphasis) !important;
  font-size: inherit;
  letter-spacing: .06em;
  color: var(--encre);
  text-transform: none;
  margin-bottom: 2px;
}
.etiquette .art{ display: block; color: var(--cendre); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 5px; }
.etiquette .pr{ color: var(--laiton); }
[data-ex="jour"] .etiquette .pr{ color: #8a6620; }
/* ==================================================== 9 · NEWS GRUNGE ===== */
.culture{ background: var(--carton-2); padding-bottom: clamp(48px, 5.4vw, 82px); }
/* bord déchiré : le passage d'une matière à l'autre n'est pas un trait net */
.dechirure{
  height: 26px;
  background: var(--carton-2);
  -webkit-mask-image: var(--m-dechire);
  mask-image: var(--m-dechire);
  -webkit-mask-size: 240px 26px;
  mask-size: 240px 26px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  margin-bottom: -1px;
}
.une{
  /* c'est un lien : sans `display:block` il reste inline, sa hauteur est nulle
     et ses enfants absolus vont se poser n'importe où dans la page */
  display: block;
  position: relative;
  height: clamp(340px, 40vw, 560px);
  overflow: hidden;
  margin-bottom: clamp(26px, 3vw, 48px);
  text-decoration: none;
}
.une-image{
  position: absolute;
  inset: -8%;
  background-size: cover;
  /* un tirage de presse : contrasté, un peu sale, jamais joli */
  filter: grayscale(1) contrast(1.5) brightness(.72);
  background-position: center 34%;
}
.une::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--m-trame), var(--m-amas);
  background-size: 6px 6px, 320px 320px;
  opacity: .3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.une-texte{
  position: absolute;
  left: clamp(20px, 3vw, 52px);
  bottom: clamp(20px, 3vw, 46px);
  right: clamp(20px, 3vw, 52px);
  z-index: 2;
  max-width: 40rem;
  box-sizing: border-box;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(222,181,82,.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(5,6,8,.84), rgba(5,6,8,.66));
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
  -webkit-backdrop-filter: blur(7px) saturate(.72);
  backdrop-filter: blur(7px) saturate(.72);
}
.une-texte .mono{ display: block; margin-bottom: 10px; color: var(--laiton-clair); }
.une-texte h3{
  font-size: clamp(1.15rem, 1.9vw, 1.62rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: #fffdf7;
  margin-bottom: 8px;
}
.une-texte p{ margin: 0; font-size: .84rem; color: rgba(255,253,247,.7); max-width: 52ch; }
.breves{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.breve{
  display: block;
  text-decoration: none;
  color: inherit;
  padding-top: 14px;
  border-top: 2px solid var(--encre);
  transition: opacity .3s;
}
.breve:hover{ opacity: .62; }
.breve .mono{ display: block; margin-bottom: 10px; }
.breve h4{ margin: 0 0 8px; font-size: .98rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.24; }
.breve p{ margin: 0; font-size: .83rem; color: var(--cendre); line-height: 1.5; }
/* ==================================================== 10 · ZONE PLUS ====== */
/* Retour au propre absolu. Façade d'ampli : rien ne dépasse, rien ne grène. */
.plus{ padding: clamp(52px, 6vw, 92px) 0; }
.plus-panneau{ padding: clamp(28px, 3.4vw, 56px); border-radius: 4px; }
.plus-tete{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: clamp(24px, 3vw, 42px);
  border-bottom: 1px solid var(--filet-doux);
}
.plus-tete h2{ color: var(--laiton); }
.plus-logo{
  display: block;
  width: clamp(118px, 12vw, 164px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.34));
}
.plus-grille{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 30px); }
.formule{
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--filet-doux);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,253,247,.035), rgba(255,253,247,0));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formule--phare{ border-color: var(--filet); background: linear-gradient(180deg, rgba(216,183,101,.10), rgba(216,183,101,.01)); }
.formule--pro{
  border-color: rgba(231,205,139,.38);
  background: linear-gradient(180deg, rgba(255,253,247,.07), rgba(216,183,101,.025));
}
.formule .mono{ color: var(--laiton); }
.formule .prix{ font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 400; letter-spacing: -.03em; color: var(--sur-laque); line-height: 1; }
.prix-ligne{ display: flex; align-items: center; gap: 10px; min-height: clamp(1.7rem, 2.4vw, 2.2rem); }
.prix-ligne .prix{ margin: 0; }
.formule-beta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px 3px;
  border: 1px solid rgba(246,214,134,.68);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246,214,134,.92), rgba(178,127,28,.88));
  color: #090806;
  box-shadow: 0 7px 18px rgba(216,183,101,.2);
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.formule .prix small{ font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--sur-laque-doux); }
.formule ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.formule li{
  font-size: .87rem;
  color: var(--sur-laque-doux);
  padding-left: 18px;
  position: relative;
}
.formule li::before{
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 1px;
  background: var(--laiton);
}
.formule .formule-action{ margin-top: auto; }
.formule-action--indisponible{
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  cursor: default;
  /* L'indisponibilité reste portée par aria-disabled et le curseur. Atténuer
     la couleur donnait au CTA Pro une quatrième identité visuelle. */
  opacity: 1;
}
.bouton{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .91rem;
  color: #16120a;
  text-decoration: none;
  background-image: var(--lustre), var(--laiton-degrade);
  box-shadow: inset 0 1px 0 rgba(255,253,247,.45), inset 0 -2px 0 rgba(0,0,0,.24), 0 10px 26px rgba(0,0,0,.45);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.bouton:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,253,247,.5), 0 16px 36px rgba(0,0,0,.5); }
.bouton--nu{
  background-image: none;
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--trait);
  box-shadow: none;
}
.bouton--nu:hover{ border-color: var(--laiton); box-shadow: none; }
.matiere-laque .bouton--nu{ color: var(--sur-laque); border-color: var(--filet-doux); }
/* ================================================= 11 · MARKETPLACE ======= */
/* Un bac de disquaire, pas une place de marché web. Les étiquettes existent
   mais restent VIERGES : l'API ne renvoie aucune annonce, on ne va pas en
   inventer pour faire joli. */
.marche{ background: var(--carton); padding: clamp(48px, 5.4vw, 84px) 0; }
.marche-bac{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  align-items: end;
}
.article{ position: relative; }
.article .pochette{
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.42);
  transform: rotate(var(--tilt, 0deg));
}
.article:nth-child(3n+1){ --tilt: -1.1deg; }
.article:nth-child(3n+2){ --tilt: .8deg; }
.article:nth-child(5n){ --tilt: -1.8deg; }
/* l'étiquette prix : agrafée de travers, et vide */
.pastille{
  position: absolute;
  top: -12px; right: -8px;
  width: 62px;
  padding: 7px 6px 8px;
  background: #f6f1e4;
  color: #23201a;
  transform: rotate(6deg);
  box-shadow: 0 5px 14px rgba(0,0,0,.5);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}
.pastille::before{
  content: "";
  position: absolute;
  top: 5px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #8a8378;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
}
.pastille em{ display: block; font-style: normal; height: 9px; margin-top: 5px; border-bottom: 1px solid rgba(35,32,26,.35); }
.article .sous{ margin-top: 9px; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .11em; color: var(--cendre); text-transform: uppercase; }
.avertissement{
  margin: clamp(28px, 3vw, 48px) 0 0;
  max-width: 74ch;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--cendre);
  padding-left: 16px;
  border-left: 1px solid var(--filet);
}
/* ================================================= 12 · BIBLIOTHÈQUE ====== */
/* Le mélange le plus net des deux matières : sol graphite propre, façade de
   recherche laquée, puis dessous une masse organique de pochettes. */
.biblio{ padding: 0; background: var(--page); }
.biblio-hero{
  position: relative;
  min-height: clamp(430px, 47vw, 650px);
  display: flex;
  align-items: center;
  padding: clamp(52px, 6vw, 90px) 0;
  overflow: hidden;
  background: #15120e url("/assets/home/village-revival-corner-20260828.webp") center 48% / cover no-repeat;
}
.biblio-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,3,3,.92) 0%, rgba(3,3,3,.7) 45%, rgba(3,3,3,.32) 72%, rgba(3,3,3,.48) 100%),
    linear-gradient(180deg, rgba(3,3,3,.2), rgba(3,3,3,.72));
}
.biblio-hero > .scene{ position: relative; z-index: 1; width: 100%; }
.biblio-hero .entete{ text-shadow: 0 3px 24px rgba(0,0,0,.72); }
.biblio-facade{
  padding: clamp(24px, 3vw, 44px);
  border-radius: 4px;
  margin-bottom: 0;
  background: rgba(5,5,4,.78);
  box-shadow: 0 24px 70px rgba(0,0,0,.52);
  backdrop-filter: blur(8px);
}
.biblio > .scene{ padding-top: clamp(28px, 3.4vw, 54px); }
.biblio-facade .recherche-hifi{
  max-width: none;
  border: 1px solid var(--filet);
  background: linear-gradient(180deg, #050504, #100e0c);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85);
  margin-bottom: 16px;
}
.filtres{ display: flex; flex-wrap: wrap; gap: 8px; }
.puce{
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sur-laque-doux);
  border: 1px solid var(--filet-doux);
  border-radius: 2px;
  padding: 7px 11px;
  background: transparent;
  cursor: pointer;
  transition: .2s;
}
.puce:hover, .puce[aria-pressed="true"]{ color: var(--laiton); border-color: var(--filet); background: rgba(216,183,101,.07); }
/* la masse : serrée, sans légende, on scanne à l'œil comme dans un bac */
.masse{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  padding-bottom: clamp(60px, 8vw, 110px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.masse .pochette{
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s;
  filter: brightness(.88) saturate(.94);
}
.masse .pochette:hover{ transform: scale(1.14); filter: none; z-index: 2; position: relative; }
/* ==================================================== RÉVÉLATION ========== */
/* voir le bloc « révélation sûre » en fin de feuille */
.rev.vu{ opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 1080px) {
.preuves{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
.bac-fiche:nth-child(n){ padding-top: 0; }
.bac-grille{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.marche-bac{ grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.masse{ grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.rev{ opacity: 1; transform: none; }
*{ transition-duration: .01ms !important; }
}
/* ===== LA PLANCHE CONTACT, cloisonnée sous .pc ===== */
.pc{
--grain-fin:url('/brand/cave-m-grain.svg');
--grain-gros:url('/brand/cave-m-grain.svg');
--perfo:url('/brand/cave-m-grain.svg');
}
@keyframes bouillon {
  0%   { background-position:   0px   0px; }
  25%  { background-position: -71px  38px; }
  50%  { background-position:  44px -63px; }
  75%  { background-position: -29px -22px; }
  100% { background-position:  17px  55px; }
}
.pc .scene{
  position: relative;
  z-index: 1;
  width: var(--scene);
  margin: 0 auto;
}
.pc /* la grille : 14 colonnes, .pc et deux blocs voisins ne partagent jamais
   leur bord supérieur — l'œil descend en diagonale */
.plan{
  display: grid;
  /* `1fr` garde par défaut un minimum intrinsèque `auto` : un titre ou un
     rail pouvait alors élargir toute la grille au-delà de la scène. */
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.pc /* -------------------------------------------------------------- typographie */
.mono{
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.pc .titre-xl{
  font-size: clamp(3rem, 8.2vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .87;
}
.pc .titre-l{
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.032em;
  line-height: .95;
}
.pc .prose{
  max-width: 60ch;
  color: rgba(255,253,247,.74);
  font-size: 1.02rem;
}
.pc [data-ex="jour"] .prose{ color: rgba(16,16,16,.72); }
.pc .prose strong{ color: var(--craie); font-weight: 400; }
.pc .or{ color: var(--or); }
.pc :not(#exkave-typography-local):not(#exkave-typography-component).titre-xl .or{ font-weight: var(--font-weight-strong) !important; }
body.landing-page :not(#exkave-typography-local):not(#exkave-typography-component).titre-xl .or{ font-weight: var(--font-weight-strong) !important; }
.pc /* ------------------------------------------------------------- perforations
   La bande 35 mm : les trous sont réellement percés (masque alpha), .pc donc le
   fond de la page passe à travers. */
.perfo{
  height: 20px;
  background: linear-gradient(180deg, #1a1712, #0a0907);
  -webkit-mask-image: var(--perfo);
  mask-image: var(--perfo);
  -webkit-mask-size: 34px 20px;
  mask-size: 34px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.pc [data-ex="jour"] .perfo{ background: linear-gradient(180deg, #d9d4c6, #bab5a6); }
@keyframes veille { 0%,100%{opacity:.55} 50%{opacity:1} }
.pc /* ============================================================== 2. L'OUVERTURE */
.ouverture{
  position: relative;
  padding: 0 0 clamp(22px, 2.4vw, 34px);
}
.pc .ouverture .plan{ align-items: start; }
.pc #planche > .plan{
  position: relative;
  isolation: isolate;
}
/* Le rail gagne 15 % de largeur utile sans dépasser le cadre du hero. La
   répartition 51/49 remplace uniquement la grille du hero sur desktop ; les
   compositions tablette et mobile gardent leurs règles dédiées plus bas. */
@media (min-width: 901px) {
  .pc #planche > .plan {
    grid-template-columns: minmax(0, 51fr) minmax(0, 49fr);
  }
  .pc #planche .enonce { grid-column: 1; }
  .pc #planche .bande { grid-column: 2; }
}
.pc #planche > .plan::before,
.pc #planche > .plan::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pc #planche > .plan::before{
  background-image:
    url('/brand/cave-m-grain.svg'),
    url('/assets/home/village-revival-records-web2-20260819.webp');
  background-position: 0 0, 52% center;
  background-size: 180px 180px, cover;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  filter: grayscale(1) contrast(1.16) brightness(.82);
  opacity: .52;
}
.pc #planche > .plan::after{
  background:
    linear-gradient(90deg, rgba(3,4,7,.86) 0%, rgba(3,4,7,.62) 42%, rgba(3,4,7,.24) 72%, rgba(3,4,7,.4) 100%),
    linear-gradient(180deg, rgba(3,4,7,.18), rgba(3,4,7,.38));
}
.pc #planche > .plan > *{
  position: relative;
  z-index: 1;
}
.pc .enonce{ grid-column: 1 / span 8; grid-row: 1; min-width: 0; }
.pc .enonce .mono{ display: block; margin-bottom: 22px; }
.pc .enonce .titre-xl{ margin-bottom: 26px; }
.pc .enonce .prose{ margin: 0 0 34px; }
.pc .actions{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (min-width: 901px) {
  .pc .ouverture .actions { margin-top: 20px; }
  body.landing-page #planche .actions { margin-top: 54px; }
}
.pc .bouton{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .93rem;
  letter-spacing: -.01em;
  color: #16120a;
  text-decoration: none;
  background-image: var(--gloss), var(--or-degrade);
  box-shadow:
    inset 0 1px 0 rgba(255,253,247,.48),
    inset 0 -2px 0 rgba(0,0,0,.26),
    0 12px 30px rgba(0,0,0,.5);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s;
}
.pc /* en thème jour le dégradé or devient sombre : le texte du bouton plein passe en clair.
   Le bouton nu, .pc lui, .pc n'a pas de fond — il garde l'encre. */
[data-ex="jour"] .bouton:not(.bouton--nu){ color: #fffdf7; }
.pc .bouton:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,253,247,.55), 0 18px 40px rgba(0,0,0,.55); }
.pc .bouton--nu{
  background-image: none;
  background: transparent;
  color: var(--craie);
  border: 1px solid var(--trait-fort);
  box-shadow: none;
}
.pc .bouton--nu:hover{ background: var(--voile); box-shadow: none; }
.pc /* La bande reste entièrement dans la colonne du hero. Son ancien
   prolongement de 11vw coupait la dernière pochette sur les grands écrans. */
.bande{
  grid-column: 9 / span 6;
  grid-row: 1;
  margin: clamp(26px, 5.5vw, 96px) 0 0;
  min-width: 0;
}
.pc .bande-corps{
  position: relative;
  width: 100%;
  transform: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.62));
}
.pc .bande-vues{
  display: flex;
  gap: 5px;
  padding: 5px;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #16130e, #0a0908);
}
.pc [data-ex="jour"] .bande-vues{ background: linear-gradient(180deg, #e6e1d3, #cfc9b9); }
.pc .vue{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  /* la conversion Tri-X : gris, contrasté, hautes lumières lavées */
  filter: grayscale(1) contrast(1.34) brightness(.86);
  transition: filter .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.pc .vue::after{
  content: attr(data-vue);
  position: absolute;
  left: 6px; bottom: 5px;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  color: rgba(255,220,120,.82);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.pc .bande-corps:hover .vue{ filter: grayscale(1) contrast(1.2) brightness(.5); }
.pc .bande-corps .vue:hover{
  filter: grayscale(.12) contrast(1.1) brightness(1.06) sepia(.16);
  transform: scale(1.045);
  z-index: 2;
}
/* La vue suivie par le cercle doré adopte aussi l'état de survol au repos.
   Elle donne ainsi immédiatement la clé de lecture de la pellicule, y compris
   sur les appareils tactiles où le survol n'existe pas. */
.pc .bande-corps .vue.is-viewed{
  filter: grayscale(.12) contrast(1.1) brightness(1.06) sepia(.16);
  transform: scale(1.045);
  z-index: 2;
}

/* Entre la composition desktop et le hero mobile, la bande ne doit plus
   prolonger artificiellement la grille de 11vw : à 812px sa cinquième vue
   sortait du cadre visible. On conserve les cinq pochettes, mais on les fait
   tenir dans la colonne réellement disponible. La photo de fond gagne aussi
   en présence sur cette plage où les deux colonnes restent côte à côte. */
@media (min-width: 641px) and (max-width: 900px) {
  .pc #planche > .plan {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }
  .pc #planche .enonce,
  .pc #planche .bande { min-width: 0; }
  .pc #planche > .plan::before {
    filter: grayscale(1) contrast(1.12) brightness(.92);
    opacity: .68;
  }
  .pc #planche > .plan::after {
    background:
      linear-gradient(90deg, rgba(3,4,7,.82) 0%, rgba(3,4,7,.56) 42%, rgba(3,4,7,.14) 72%, rgba(3,4,7,.26) 100%),
      linear-gradient(180deg, rgba(3,4,7,.1), rgba(3,4,7,.26));
  }
  .pc .bande-corps {
    width: 100%;
    transform: none;
  }
  .pc .bande-vues {
    min-width: 0;
    overflow: hidden;
  }
  .pc .bande-vues .vue { min-width: 0; }
}
.pc /* le cercle au crayon gras : tracé main, .pc il n'entoure QU'UNE vue —
   celle que le tireur a retenue sur la planche */
.crayon{
  position: absolute;
  top: -7%;
  left: 36.5%;
  width: 27%;
  height: 114%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
  /* le trait doit rester lisible aussi bien sur une vue claire que sur le rebord */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
}
.pc .crayon path{
  fill: none;
  stroke: var(--or);
  /* en unités du viewBox, pas en pixels : `non-scaling-stroke` entre en conflit
     avec `pathLength` et ne dessinait qu'une moitié du tracé */
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tracer 1.4s cubic-bezier(.5,.05,.25,1) .8s forwards;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }
.pc /* l'annotation de planche : ce que le tireur a noté à côté du cercle */
.annotation{
  margin: clamp(34px, 4vw, 62px) 0 0 auto;
  max-width: 40ch;
  padding-left: 18px;
  border-left: 1px solid var(--trait-fort);
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255,253,247,.68);
}
.pc [data-ex="jour"] .annotation{ color: rgba(16,16,16,.7); }
.pc .annotation .mono{ display: block; margin-bottom: 8px; }
/* La légende change au survol, mais jamais la géométrie du hero. Quatre lignes
   sont réservées à chaque vue ; le texte complet reste disponible au survol
   via son attribut title. */
@media (min-width: 901px) {
  .pc #planche .annotation-texte {
    display: -webkit-box;
    block-size: calc(4 * 1.55em);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}
.pc /* ============================================================ 3. LE DÉFILANT
   Des gravures réelles de matrice, .pc au pas de la bande. */
.defilant{
  margin: clamp(26px, 4vw, 54px) 0 0;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  overflow: hidden;
  padding: 13px 0;
  background: linear-gradient(90deg, transparent, var(--voile) 20%, var(--voile) 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pc .defilant-piste{
  display: flex;
  gap: 46px;
  width: max-content;
  animation: courir 44s linear infinite;
}
.pc .defilant:hover .defilant-piste{ animation-play-state: paused; }
@keyframes courir { to { transform: translateX(-50%); } }
.pc .gravure{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  color: rgba(255,253,247,.42);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pc [data-ex="jour"] .gravure{ color: rgba(16,16,16,.5); }
.pc .gravure b{ color: var(--or); font-weight: 400; }
.pc .recherche .plan{ align-items: end; }
.pc .recherche-titre .mono{ display: block; margin-bottom: 14px; }
.pc .entete{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3vw, 46px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--trait);
}
.pc .entete .mono{ display: block; margin-bottom: 12px; }
.pc .preuve .plan{ align-items: start; }
.pc .preuve-texte .mono{ display: block; margin-bottom: 16px; }
.pc .preuve-texte .titre-l{ margin-bottom: 20px; }
.pc .contribuer .plan{ align-items: start; }
.pc .contribuer-texte .prose{ margin: 0 0 30px; }
.pc .vue-vide .mono{ color: var(--cendre); }
.pc .vue-vide[data-fait="oui"] .mono{ color: var(--or); }
.pc .guide .plan{ align-items: center; }
.pc .guide-liste .mono{ white-space: nowrap; }
.pc /* ================================================================= 9. L'ACTU */
.actu{ padding: clamp(52px, 6vw, 92px) 0 0; }
.pc .brèves{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 30px);
}
.pc .breve{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 22px 26px;
  border: 1px solid var(--trait);
  background: linear-gradient(180deg, var(--panneau-2), var(--panneau));
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.pc .breve:nth-child(even){ transform: translateY(26px); }
.pc .breve:hover{ transform: translateY(-6px); border-color: var(--trait-fort); }
.pc .breve:nth-child(even):hover{ transform: translateY(20px); }
.pc .breve .mono{ display: block; margin-bottom: 14px; }
.pc .breve h3{ font-size: 1.06rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.22; margin-bottom: 10px; }
.pc .breve h4{ font-size: 1.1875rem; }
.pc .breve p{ margin: 0; font-size: .8925rem; color: var(--cendre); line-height: 1.5; }
body.landing-page #news-breves .breve h4:not(#exkave-typography-local):not(#exkave-typography-component){ font-size: 19px !important; }
body.landing-page #news-breves .breve p:not(#exkave-typography-local):not(#exkave-typography-component){ font-size: 14.28px !important; }
.pc .brèves{ padding-bottom: 30px; }
.pc /* ================================================================== révélation */
/* voir le bloc « révélation sûre » en fin de feuille */
.pc .rev.vu{
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 901px) and (max-width: 1080px) {
.pc .annotation{ margin-left: 0; }
}
@media (max-width: 640px) {
.pc .crayon{ display: none; }
.pc .breve:nth-child(even){ transform: none; }
.pc .breve:nth-child(even):hover{ transform: translateY(-6px); }
.pc /* seule la bande déborde ; sa légende reste dans la marge */
  .bande-corps{ width: 130%; margin-left: -15%; }
}
@media (prefers-reduced-motion: reduce) {
.pc .defilant-piste{ animation: none; }
.pc .crayon path{ stroke-dashoffset: 0; animation: none; }
.pc .rev{ opacity: 1; transform: none; }
}
/* ============ AJOUTS DE L'ASSEMBLAGE ================================= */
/* 1 · Halo doré qui suit le pointeur. N'existait dans aucune des trois
   maquettes : elles n'ont pas une seule ligne de `mousemove`. L'anneau qui
   l'accompagnait a été retiré à la demande — il restait le seul objet net à
   se déplacer et attirait l'œil plus que la page. Pointeur fin seulement. */
.curseur-halo{ position: fixed; top: 0; left: 0; z-index: 9997;
  width: 340px; height: 340px; margin: -170px 0 0 -170px;
  pointer-events: none; opacity: 0; transition: opacity .35s ease; will-change: transform;
  border-radius: 50%;
  /* Pas de `mix-blend-mode: screen` : sur un élément `position: fixed`, une
     capture pleine page le compose en disque noir opaque — c'est ce qu'on a vu
     le 2026-08-16. Un dégradé doré à faible alpha rend la même lueur sur le
     fond sombre, sans dépendre du mode de fusion. */
  background: radial-gradient(circle, rgba(216,183,101,.13), rgba(216,183,101,.05) 44%, transparent 68%);
  filter: blur(6px); }
body.curseur-actif .curseur-halo{ opacity: 1; }
@media (hover: none), (pointer: coarse) {
.curseur-halo{ display: none; }
}
@media (prefers-reduced-motion: reduce) {
.curseur-halo{ display: none; }
}
@media (hover: hover) and (pointer: fine) {
.preuve, .une-image{ transition: filter .55s cubic-bezier(.2,.7,.2,1); }
.preuve:hover, .une:hover .une-image{ filter: grayscale(0) contrast(1.04) brightness(1); }
}
/* ================= RETOUCHES DEMANDÉES ================================ */
/* 3 · « Sortis du bac » : rangement aligné. Le décalage venait de trois
   `padding-top` sur nth-child(4n+2|3|4) — calés sur quatre colonnes, donc faux
   dès que la grille en rendait trois ou cinq. */
.bac-fiche, .bac-fiche:nth-child(4n+2), .bac-fiche:nth-child(4n+3),
.bac-fiche:nth-child(4n+4){ padding-top: 0; }
/* 5 · Le bac des membres : plus d'étiquette, et les pochettes partent du même
   bord haut au lieu d'être calées sur le bas. */
.marche-bac{ align-items: start; }
.marche-bac .pastille{ display: none; }
/* 6 · Fouiller : la masse tombe de moitié. Le dégradé de sortie suit, sinon
   il mangeait une grille deux fois plus courte. */
.masse{ padding-bottom: clamp(24px, 3vw, 44px);
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent);
  mask-image: linear-gradient(180deg, #000 84%, transparent); }
.biblio{ padding-bottom: clamp(40px, 5vw, 70px); }
/* 4 · L'actu musique, asymétrique : une grande, une haute, une moyenne, une
   basse. Chaque brève porte son visuel, noir et blanc au repos. */
.pc .actu-plan{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px); }
.pc .actu-carte{ display: block; text-decoration: none; color: inherit; }
.pc .actu-vue{ display: block; width: 100%; background-size: cover;
  background-position: center; filter: grayscale(1) contrast(1.24) brightness(.76); }
.pc .actu-dire{ display: block; padding-top: 14px; }
.pc .actu-dire .mono{ display: block; margin-bottom: 8px; }
.pc .actu-dire h3{ font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.24;
  letter-spacing: -.015em; margin: 0 0 7px; }
.pc .actu-dire p{ margin: 0; font-size: .9rem; line-height: 1.5; color: var(--cendre); }
.pc .actu-carte--large{ grid-column: span 7; }
.pc .actu-carte--large   .actu-vue{ aspect-ratio: 16 / 9; }
.pc .actu-carte--large   .actu-dire h3{ font-size: clamp(1.2rem, 1.7vw, 1.6rem); }
.pc .actu-carte--haute{ grid-column: span 5; }
.pc .actu-carte--haute   .actu-vue{ aspect-ratio: 4 / 5; }
.pc .actu-carte--moyenne{ grid-column: span 5; }
.pc .actu-carte--moyenne .actu-vue{ aspect-ratio: 4 / 3; }
.pc .actu-carte--basse{ grid-column: span 7; }
.pc .actu-carte--basse   .actu-vue{ aspect-ratio: 21 / 9; }
@media (max-width: 900px) {
.pc .actu-plan{ grid-template-columns: minmax(0, 1fr); }
.pc .actu-carte--large, .pc .actu-carte--haute,
  .pc .actu-carte--moyenne, .pc .actu-carte--basse{ grid-column: 1 / -1; }
.pc .actu-carte .actu-vue{ aspect-ratio: 16 / 10; }
}
@media (hover: hover) and (pointer: fine) {
.pc .actu-vue{ transition: filter .55s cubic-bezier(.2,.7,.2,1); }
.pc .actu-carte:hover .actu-vue{ filter: grayscale(0) contrast(1.04) brightness(1); }
}
/* ===========================================================================
   MOBILE — 640 px et moins.
   Le bureau ne change pas : tout est enfermé dans cette requête.

   Les règles portées de la maquette se contentaient de rétrécir les cases :
   à 390 le bac tombait à une colonne de 3 513 px, le bac des membres à
   2 937 px, et la page atteignait 14 735 px. On ne réduit pas, on change de
   geste : les murs deviennent des rails qu'on feuillette au doigt.
   =========================================================================== */
@media (max-width: 640px) {
  /* -----------------------------------------------------------------------
     Le téléphone n'est pas un bureau réduit.

     Le desktop raconte : une planche contact, des murs inclinés, des
     mosaïques asymétriques, une pellicule qu'on lit de gauche à droite. Tout
     cela demande de la place ET du temps de lecture. À 390 px, les mêmes
     mécaniques deviennent des vignettes illisibles et la page s'allonge sans
     rien montrer de plus.

     Ici on garde l'ADN — noir, laiton, textures, typographie, vraies
     pochettes, sensation de fouiller — et on change le geste : une grande
     image par idée, des rails qu'on feuillette au doigt, et rien à décoder.
     Le desktop n'est pas touché : tout est enfermé dans cette requête.
     ----------------------------------------------------------------------- */

  /* --- 1. LE HERO : un titre, deux lignes, un bouton, UNE grande pochette --
     La pellicule à cinq vues perforée est le premier réflexe à abandonner :
     compressée, elle donnait cinq timbres-poste. On garde la première vue,
     en grand, à sa place — c'est un vrai pressage, pas une illustration. */
  .pc .plan { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pc #planche > .plan::before {
    background-position: 0 0, 50% center;
    opacity: .2;
  }
  .pc #planche > .plan::after {
    background:
      linear-gradient(180deg, rgba(3,4,7,.78) 0%, rgba(3,4,7,.66) 48%, rgba(3,4,7,.46) 100%),
      linear-gradient(90deg, rgba(3,4,7,.88), rgba(3,4,7,.36));
  }
  .pc .enonce { grid-column: 1 / -1; grid-row: auto; }
  .pc .bande { grid-column: 1 / -1; grid-row: auto; margin: 4px 0 0; }
  .pc .titre-xl { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .pc .ouverture { padding: 26px 0 20px; }
  .pc .ouverture .enonce .titre-xl { margin-bottom: 14px; }
  .pc .enonce .mono { margin-bottom: 12px; }

  /* Une promesse entière, pas un paragraphe coupé. La version desktop est
     masquée et remplacée par sa phrase courte : couper au CSS donnait « La
     base mont… », ce qui ne promet rien. */
  .pc .enonce .prose { display: none; }
  .pc .enonce .prose--court {
    display: block;
    margin: 0 0 22px;
    font-size: 1rem;
    max-width: 32ch;
  }

  /* Un geste principal, plein écran. L'ajout reste atteignable, en retrait. */
  .pc .actions { display: grid; gap: 10px; }
  .pc .actions .bouton { width: 100%; justify-content: center; }
  .pc .actions .bouton--nu {
    border-color: transparent;
    background: none;
    text-decoration: underline;
    text-underline-offset: 5px;
    min-height: 40px;
  }

  /* La pellicule devient une pochette. Perforations, cercle au crayon, note
     de planche et bande de repères : tout ça décrit un dispositif desktop. */
  .pc .bande-corps {
    width: 100%;
    margin-left: 0;
    transform: none;
    aspect-ratio: 1;
    border: 1px solid var(--trait);
  }
  .pc .perfo,
  .pc .crayon,
  .pc .annotation,
  .pc .ouverture .defilant { display: none; }
  .pc .bande-vues { display: block; height: 100%; }
  .pc .bande-vues .vue { display: none; }
  .pc .bande-vues .vue:first-child {
    display: block;
    width: 100%;
    height: 100%;
    filter: none;
  }

  /* --- 2. LE PROPOS : court ---------------------------------------------- */
  .statement { padding: 22px 0 26px; }
  .statement p { font-size: clamp(1.7rem, 8vw, 2.2rem); max-width: 18ch; }
  .statement .suite { display: none; }

  /* --- 3. LE PRESSAGE VEDETTE : une grande pochette, trois faits ----------
     Les quatre emplacements de preuve (pochette, dos, macaron A, macaron B)
     disent une chose vraie mais technique : trois d'entre eux sont vides. Au
     téléphone, ils occupent une rangée pour annoncer des trous. Ils restent
     dans la fiche du pressage, où ils ont un sens. */
  .vedette { padding: 26px 0 30px; }
  .vedette-plan { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vedette-image { width: 100%; justify-self: stretch; aspect-ratio: 1; }
  .vedette-corps .titre-l { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .preuves { display: none; }
  .fiche .fiche-ligne:nth-child(n + 4) { display: none; }
  .vedette-action { gap: 8px; }
  .vedette-corps .vedette-action .bouton { width: auto; justify-content: center; margin-top: 4px; }
  .vedette-chevrons i { font-size: 1.6rem; }

  /* --- 4. LE MUR INCLINÉ : desktop seulement ------------------------------
     Une bande de pochettes penchée, pleine largeur, avec sa légende : elle
     porte le geste de la Cave sur grand écran et n'est plus lisible ici. */
  .bande-pleine { display: none; }

  /* --- 5. SORTIS DU BAC : un rail ---------------------------------------- */
  .bac { padding: 28px 0 30px; }
  .bac-grille {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px var(--gout) 12px;
    margin: 0 calc(var(--gout) * -1);
  }
  .bac-grille::-webkit-scrollbar { display: none; }
  .bac-fiche { flex: 0 0 62vw; max-width: 260px; scroll-snap-align: start; }
  .bac-fiche .pochette { transform: none; }

  /* --- 6. LA CULTURE : une grande actualité ------------------------------
     Les trois brèves sans photo répètent la fin du même flux et allongent la
     page de 300 px. La une garde l'image, le mur de l'actu prend la suite. */
  .culture { padding-bottom: 26px; }
  .une { min-height: 62vw; margin-bottom: 0; }
  .une-texte {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(5,6,8,.76);
  }
  .une-texte h3 { font-size: 1.15rem; }
  .une-texte p { display: none; }
  .breves { display: none; }

  /* --- 7. L'ACTU : un rail au lieu d'une mosaïque asymétrique ------------- */
  .pc .actu { padding: 30px 0 0; }
  .pc .actu-plan {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px var(--gout) 14px;
    margin: 0 calc(var(--gout) * -1);
    height: auto;
  }
  .pc .actu-plan::-webkit-scrollbar { display: none; }
  .pc .actu-carte {
    flex: 0 0 74vw;
    max-width: 300px;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
  }
  .pc .actu-carte p { display: none; }

  /* --- 8. LES FORMULES : un bloc, deux colonnes de texte ------------------ */
  .plus { padding: 30px 0; }
  .plus-panneau { padding: 20px 18px; }
  .plus-tete .titre-l { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .plus-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .formule { padding: 16px; }
  .formule .formule-action .bouton { width: 100%; justify-content: center; }

  /* --- 9. LE BAC DES MEMBRES : un rail ----------------------------------- */
  .marche { padding: 28px 0; }
  .marche-bac {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px var(--gout) 12px;
    margin: 0 calc(var(--gout) * -1);
  }
  .marche-bac::-webkit-scrollbar { display: none; }
  .marche-bac .article { flex: 0 0 40vw; max-width: 170px; scroll-snap-align: start; }

  /* --- 10. FOUILLER : le champ en grand, puis quelques disques ------------ */
  .biblio { padding: 0; }
  .biblio-hero { min-height: 470px; padding: 30px 0; background-position: 57% center; }
  .biblio-hero::before { background: linear-gradient(180deg, rgba(3,3,3,.68), rgba(3,3,3,.88)); }
  .biblio-facade { padding: 16px; }
  .recherche-hifi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
  }
  .recherche-hifi .mono { display: none; }
  .recherche-hifi input { padding: 10px 0; }
  .recherche-hifi .bouton { width: 100%; justify-content: center; }
  .masse {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: auto;
    grid-auto-columns: 40vw;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--gout) 10px;
    margin: 0 calc(var(--gout) * -1);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .masse::-webkit-scrollbar { display: none; }

  /* --- 11. le décor qui n'a pas de sens au doigt ------------------------- */
  .curseur-halo { display: none; }

  /* --- ce qui poussait la page hors écran -------------------------------- */
  .bande-pleine-rangee { width: 100%; }
  .une-image { width: 100%; }
}


/* ===========================================================================
   RÉVÉLATION SÛRE
   Le contenu est VISIBLE par défaut. L'animation d'apparition est une
   amélioration : elle n'existe que si le script a pu poser `rev-armee` sur
   <html>, c'est-à-dire s'il tourne, si IntersectionObserver existe et si le
   mouvement n'est pas réduit.

   Le 2026-08-16, l'inverse était vrai — `.rev { opacity: 0 }` en dur, révélé au
   défilement. Une capture pleine page, qui ne défile pas, sortait 15 blocs sur
   17 invisibles : toute la page sous la ligne de flottaison était noire. Le
   risque ne valait pas l'effet.
   =========================================================================== */
.rev { opacity: 1; transform: none; }
html.rev-armee .rev:not(.vu) { opacity: 0; transform: translateY(22px); }
html.rev-armee .rev.vu {
  opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  html.rev-armee .rev:not(.vu) { opacity: 1; transform: none; }
}


/* Le cercle au crayon suit la vue survolée : sa position horizontale vient
   d'une variable posée par le script, qui lit la géométrie réelle de la bande
   (padding et gouttières compris) plutôt que de supposer cinq fois vingt pour
   cent. `left` figé à 36,5 % le clouait sur la troisième vue. */
.pc .crayon {
  left: var(--crayon-x, 36.5%);
  transition: left .3s cubic-bezier(.2, .7, .2, 1);
}
.pc .vue { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pc .crayon { transition: none; } }
/* Le libellé de la légende est sur sa propre ligne : collé au texte, on lisait
   « Vue 9 · retenueMelissa Manchester ». */
.pc .annotation .mono { display: block; margin-bottom: 6px; }

/* ===========================================================================
   POCHETTES CLIQUABLES
   Le hero, « Fouiller » et le bac des membres montraient de vraies pochettes
   sans destination : on voyait un disque, on ne pouvait pas l'ouvrir. Leurs
   éléments deviennent des `<a>`.

   Aucun pixel ne bouge au repos : ces éléments sont enfants d'une grille ou
   d'un flex, donc déjà blocs, et on éteint la décoration de lien. Le seul
   ajout visible est l'anneau de focus — il n'apparaît qu'au clavier.
   =========================================================================== */
a.vue,
a.pochette,
a.article {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.vue:focus-visible,
a.pochette:focus-visible,
a.article:focus-visible {
  outline: 2px solid var(--laiton, #d8b765);
  outline-offset: 3px;
  z-index: 3;
}
.masse a.pochette:focus-visible { position: relative; }

/* ===========================================================================
   CORRECTIF LANDING — 17 août 2026
   Trois reproches, trois corrections. Rien n'est réordonné, aucune section
   n'apparaît ni ne disparaît : seuls des poids et un vide changent.
   =========================================================================== */

/* --- 1 · les CTA de section, en boutons dorés -----------------------------
   « Toute la base », « Toute l'actu », « Le marché » partaient d'un
   `.bouton--nu` gris sur fond carton : à droite d'un titre, ils passaient pour
   une mention légale. Ils sont maintenant pleins dès l'état normal pour être
   identifiés immédiatement comme des actions. Cadrés sur `.entete` : les
   boutons nus des formules et de la fiche vedette ne bougent pas. */
.entete .bouton--nu,
.pc .entete .bouton--nu {
  color: #16120a;
  border: 1px solid var(--laiton-clair, #f4e6b8);
  background-image: var(--lustre), var(--laiton-degrade);
  box-shadow: inset 0 1px 0 rgba(255,253,247,.5), inset 0 -2px 0 rgba(0,0,0,.24), 0 10px 26px rgba(0,0,0,.38);
  font-weight: 400;
  transition: box-shadow .22s, border-color .22s, transform .22s cubic-bezier(.2,.7,.2,1);
}
.entete .bouton--nu:hover,
.pc .entete .bouton--nu:hover {
  color: #16120a;
  border-color: var(--laiton-clair, #f4e6b8);
  background-image: var(--lustre), var(--laiton-degrade);
  box-shadow: inset 0 1px 0 rgba(255,253,247,.62), 0 16px 34px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.entete .bouton--nu:focus-visible,
.pc .entete .bouton--nu:focus-visible {
  outline: 3px solid var(--laiton-clair, #f4e6b8);
  outline-offset: 4px;
}

/* --- 2 · l'actu : le vide comblé par du texte, pas par de la matière ------
   Les quatre cartes s'étiraient à la hauteur de la plus haute : sous la grande
   photo, 240 px de fond nu. `align-items: start` rend à chaque carte sa
   hauteur, et le creux restant à gauche de la carte haute reçoit un mot
   éditorial — blanc et doré, la seule zone de texte de cette bande.

   Le placement explicite n'est posé QUE si les quatre cartes existent
   (`--complet`, décidé par le script) : un flux court reste en placement
   automatique, sans trou de grille. */
.pc .actu-plan { align-items: start; }
.pc .actu-plan--complet .actu-carte--large   { grid-column: 1 / span 7;  grid-row: 1; }
.pc .actu-plan--complet .actu-carte--haute   { grid-column: 8 / span 5;  grid-row: 1 / span 2; }
.pc .actu-plan--complet .actu-mot            { grid-column: 1 / span 7;  grid-row: 2; }
.pc .actu-plan--complet .actu-carte--moyenne { grid-column: 1 / span 5;  grid-row: 3; }
.pc .actu-plan--complet .actu-carte--basse   { grid-column: 6 / span 7;  grid-row: 3; }
.pc .actu-plan--complet .actu-carte--basse::after {
  content: "";
  display: block;
  height: clamp(54px, 6vw, 88px);
  margin-top: clamp(16px, 2vw, 26px);
  border-top: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    rgba(216, 183, 101, .28) 22px 34px,
    transparent 34px 56px
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, rgba(0, 0, 0, .72) 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, rgba(0, 0, 0, .72) 72%, transparent 100%);
  pointer-events: none;
}
.pc .actu-mot {
  align-self: end;
  border-top: 1px solid var(--trait-fort);
  padding-top: clamp(18px, 2vw, 28px);
}
.pc .actu-mot .mono { display: block; color: var(--laiton); margin-bottom: 12px; }
.pc .actu-mot p {
  margin: 0;
  max-width: 46ch;
  color: var(--craie);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
}
.pc .actu-mot p .or { color: var(--laiton); }
.pc .actu-mot .actu-action {
  display: inline-flex;
  margin-top: clamp(18px, 2vw, 28px);
  border-width: .25rem;
  font-size: 1.43rem;
  font-weight: var(--font-weight-emphasis);
}
/* Hors grille asymétrique, le mot reprend sa place dans le flux. */
@media (max-width: 900px) {
  .pc .actu-mot { grid-column: 1 / -1; align-self: start; }
  .pc .actu-plan--complet .actu-carte--basse::after { display: none; }
  .pc .actu-mot .actu-action {
    font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .pc .actu-plan,
  .pc .actu-plan.actu-plan--complet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .pc .actu-plan--complet .actu-carte--large,
  .pc .actu-plan--complet .actu-carte--haute,
  .pc .actu-plan--complet .actu-carte--moyenne,
  .pc .actu-plan--complet .actu-carte--basse {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }
  .pc .actu-plan--complet .actu-mot {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
  }
}

.recherche-action-mobile { display: none; }
@media (max-width: 900px) {
  .recherche-action-desktop { display: none; }
  .recherche-action-mobile { display: inline; }
}

/* --- 3 · Free et Plus, même bouton -----------------------------------------
   Un bouton plein contre un bouton nu, l'un plus court que l'autre : la
   colonne Free avait l'air d'un repli. Les deux prennent maintenant la même
   emprise et le même poids ; seul le remplissage distingue le rang. */
/* Le conteneur s'appelait `.action`. Ce nom est réclamé par deux autres
   sources : une règle héritée de ce fichier (`.action { border: 1px solid …;
   border-radius: 999px; min-height: 46px }`, faite pour le CTA du carrousel) et
   `exkave-mobile-skin.css`, qui repeint `.action` en `!important` avec fond,
   bordure et ombre. Résultat : une pilule dessinée AUTOUR du bouton, 557 px de
   large pour un bouton de 516 — deux pastilles emboîtées.
   Le renommer en `.formule-action` retire réellement cette emprise plutôt que
   d'empiler une cinquième couche de spécificité par-dessus. */
.formule .formule-action { display: flex; }
.formule .formule-action .bouton {
  flex: 1;
  justify-content: center;
  padding: 13px 22px;
  font-weight: 400;
  font-size: .91rem;
  /* Le bouton plein est `border: 0`, le bouton nu porte 1 px : sans cette
     bordure transparente, les deux colonnes tombaient à 49 et 51 px de haut.
     Deux pixels, mais deux pixels visibles côte à côte. */
  border: 1px solid transparent;
}
.formule .formule-action .bouton--nu {
  color: var(--laiton);
  border: 1px solid var(--laiton);
  background: linear-gradient(180deg, rgba(216, 183, 101, .14), rgba(216, 183, 101, .03));
}
.formule .formule-action .bouton--nu:hover,
.formule .formule-action .bouton--nu:focus-visible {
  color: #16120a;
  border-color: var(--laiton-clair, #f4e6b8);
  background: var(--laiton);
}

/* Les offres Plus et Pro sont annoncées mais pas encore ouvertes. Leur détail
   reste perceptible sans être lisible, et leurs CTA ne ressemblent plus à des
   actions disponibles. */
.formule--phare > ul,
.formule--pro > ul {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
}
.formule--phare .formule-action .formule-action--indisponible,
.formule--pro .formule-action .formule-action--indisponible {
  color: rgba(255, 253, 247, .38) !important;
  border-color: rgba(255, 253, 247, .18) !important;
  background: rgba(255, 253, 247, .035) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
.formule--phare .formule-action .formule-action--indisponible:hover,
.formule--phare .formule-action .formule-action--indisponible:focus-visible,
.formule--pro .formule-action .formule-action--indisponible:hover,
.formule--pro .formule-action .formule-action--indisponible:focus-visible {
  color: rgba(255, 253, 247, .38);
  border-color: rgba(255, 253, 247, .18);
  background: rgba(255, 253, 247, .035);
}

/* Le marché reste visible comme avant-goût pour les membres, mais il n'est
   consultable que par une session administrateur tant que l'ouverture n'est
   pas décidée. `inert` porte le verrou fonctionnel ; ces règles portent son
   rendu sans masquer la place de la future section. */
html:not(.exkave-admin-session) #membres > .scene {
  filter: blur(8px);
  opacity: .48;
  user-select: none;
  pointer-events: none;
}
html:not(.exkave-admin-session) #membres {
  position: relative;
}
html:not(.exkave-admin-session) #membres .marketplace-coming {
  --marketplace-coming-weight: 700;
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 8;
  margin: 0;
  color: #e4bd4f;
  /* Le plancher valait 92px : sous 657px de large, c'est lui qui gagne, et
     « Bientôt » mesurait alors 418px dans un écran de 390 — coupé des deux
     côtés. 56px le ramène dans les marges de la section (254px mesurés).
     Au-dessus de 657px c'est `14vw` qui gouverne : le bureau ne bouge pas. */
  font-size: clamp(56px, 14vw, 208px);
  font-weight: var(--marketplace-coming-weight) !important;
  opacity: .5;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 16px 54px rgba(0, 0, 0, .9), 0 0 34px rgba(216, 183, 101, .24);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html.exkave-admin-session #membres .marketplace-coming {
  display: none;
}
html:not(.exkave-admin-session) #membres .dechirure {
  opacity: .28;
}

/* --- 4 · pas de logo de section -------------------------------------------
   RETRAIT, 17 août 2026. J'avais défini `--img-exkbase` en voyant
   `.logo-section.base` réclamer un jeton indéfini, et j'en ai conclu qu'il
   manquait une image. C'était l'inverse : le jeton était indéfini PARCE QUE ce
   mot-symbole n'a pas à exister. En le posant, j'ai fait apparaître un gros
   « base » dessiné comme une marque au-dessus de « Sortis du bac ».

   La règle, désormais explicite : le seul logo autorisé est l'asset Exkave
   officiel porté par le shell. On ne retape pas la marque avec une police, on
   n'invente ni « base », ni « Exkbase », ni monogramme, et on ne récupère pas
   un pseudo-logo venu d'une maquette.

   Les trois règles `.logo-section.*` partent avec lui : elles ne servaient
   qu'à ça. `.logo-section` garde sa boîte pour ne rien casser ailleurs, mais
   sans image et sans hauteur réservée. */

/* ===========================================================================
   MARQUEUR DE FIN DE FEUILLE — NE PAS DÉPLACER, NE PAS SUPPRIMER
   Cette règle doit rester la DERNIÈRE du fichier. Le contrôle de recette
   vérifie sa présence dans `document.styleSheets[].cssRules` : si elle
   manque, c'est que le navigateur a cessé de lire la feuille avant la fin —
   syntaxe invalide, accolade orpheline — et que des règles sont ignorées en
   silence. C'est arrivé le 2026-08-17 : 41 règles perdues sans un signal.
   =========================================================================== */
:root { --ex-fin-exkave-home-v2: 1; }