/* ═══════════════════════════════════════════════════════════════════════════
   PÉTANQUE BELGE — direction « SABLE »

   Le gravier clair d'un boulodrome au soleil, une boule d'acier posée dessus,
   et de l'air. Rien d'autre. Cette feuille remplace « Soir de terrain » : elle
   pose sur Émail & Acier (app.css) une lecture épurée, à la manière des pages
   produit d'Apple — de très grands titres, des marges généreuses, des cartes
   blanches sans bordure qui flottent d'une ombre longue et douce, des photos
   pleine largeur aux angles ronds, et une seule couleur d'accent : l'or, pour
   ce qui se touche.

   Trois règles, tenues partout :
     1. Le sable est le fond ; le blanc est ce qui se lit ; la nuit est l'écran
        de la buvette. Pas de quatrième surface.
     2. Aucune bordure porteuse : la profondeur vient de l'ombre et du contraste
        entre le sable et le blanc.
     3. Un titre par écran domine tout ; le reste se tait (Archivo 15–17 px,
        gris ardoise, interligne 1.6).

   Le calque « sable » est déclaré APRÈS socle / composants / pages /
   utilitaires : il gagne sans toucher à leur code.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer sable;

@layer sable {

/* ═════════════════════════════════════════════════════════ 1. LES JETONS ══ */

:root {
  /* Le sable : quatre valeurs, du plus clair au plus chaud. */
  --sable-50:  #FBF8F1;
  --sable-100: #F5EFE3;
  --sable-200: #EFE6D3;
  --sable-300: #E4D7BC;
  --sable-400: #CDBB97;

  --s-rayon-s: 16px;
  --s-rayon:   24px;
  --s-rayon-l: 32px;

  --s-ease:       cubic-bezier(.2, 0, 0, 1);
  --s-ease-magie: cubic-bezier(.65, 0, .35, 1);
  --s-ease-sortie: cubic-bezier(0, 0, 0, 1);
  --s-dur-1: 160ms;
  --s-dur-2: 300ms;
  --s-dur-3: 600ms;
  --s-dur-4: 1000ms;

  --s-or-rgb: 245, 180, 28;
  --s-nuit-rgb: 11, 17, 40;

  /* Surfaces et encres — palette claire (repli universel). */
  --sol:     var(--sable-100);
  --sol-2:   var(--sable-200);
  --carte:   #FFFFFF;
  --carte-2: var(--sable-50);
  --encre:   #0F1733;
  --encre-2: #5C6378;
  --encre-3: #8A90A3;
  --trait:   rgba(15, 23, 51, .07);
  --trait-2: rgba(15, 23, 51, .2);

  --s-ombre-1: 0 1px 2px rgba(15, 23, 51, .04), 0 12px 32px -18px rgba(15, 23, 51, .22);
  --s-ombre-2: 0 2px 4px rgba(15, 23, 51, .04), 0 28px 60px -28px rgba(15, 23, 51, .32);
  --s-ombre-3: 0 4px 10px rgba(15, 23, 51, .05), 0 50px 100px -40px rgba(15, 23, 51, .42);
  --s-ombre-or: 0 14px 34px -14px rgba(var(--s-or-rgb), .6);
  --s-lumiere-haut: rgba(255, 255, 255, .8);
  --s-verre: rgba(245, 239, 227, .78);
  --s-verre-bord: rgba(15, 23, 51, .08);
  --s-encre-nav: #0F1733;
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    --sol:     light-dark(var(--sable-100), #0B1128);
    --sol-2:   light-dark(var(--sable-200), #0F1733);
    --carte:   light-dark(#FFFFFF, #151D3F);
    --carte-2: light-dark(var(--sable-50), #1B244B);
    --encre:   light-dark(#0F1733, #F3EEE3);
    --encre-2: light-dark(#5C6378, #A9B0C9);
    --encre-3: light-dark(#8A90A3, #7C849F);
    --trait:   light-dark(rgba(15, 23, 51, .07), rgba(255, 255, 255, .07));
    --trait-2: light-dark(rgba(15, 23, 51, .2), rgba(255, 255, 255, .22));
    /* PAS de --s-ombre-1 ici : light-dark() n'accepte que des couleurs. Une
       ombre écrite dedans est stockée telle quelle, puis invalide à l'usage —
       et « box-shadow: …, var(--s-ombre-1) » tombait à none sur TOUTES les
       cartes du thème clair. La valeur claire est déclarée au-dessus ; les
       blocs de nuit, plus bas, la remplacent. */
    --s-lumiere-haut: light-dark(rgba(255, 255, 255, .8), rgba(255, 255, 255, .06));
    --s-verre: light-dark(rgba(245, 239, 227, .78), rgba(11, 17, 40, .78));
    --s-verre-bord: light-dark(rgba(15, 23, 51, .08), rgba(255, 255, 255, .1));
    --s-encre-nav: light-dark(#0F1733, #F3EEE3);
    /* héritage : les vues qui écrivent encore --bleu / --jaune-voile */
    --lien:        light-dark(#0F1733, var(--or-300));
    --lien-survol: light-dark(var(--or-800), var(--or-200));
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]):not([data-theme="clair"]) {
    --s-ombre-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
    --s-ombre-2: 0 2px 4px rgba(0, 0, 0, .35), 0 28px 60px -28px rgba(0, 0, 0, .7);
    --s-ombre-3: 0 4px 10px rgba(0, 0, 0, .4), 0 50px 100px -40px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="buvette"], :root[data-theme="sombre"] {
  --s-ombre-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
  --s-ombre-2: 0 2px 4px rgba(0, 0, 0, .35), 0 28px 60px -28px rgba(0, 0, 0, .7);
  --s-ombre-3: 0 4px 10px rgba(0, 0, 0, .4), 0 50px 100px -40px rgba(0, 0, 0, .8);
}

/* ══════════════════════════════════════════════════════ 2. LE SOL, LE TEXTE ══ */

body:not(.tv) {
  background-color: var(--sol);
  background-image:
    radial-gradient(1200px 700px at 100% -10%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(900px 500px at 0% 20%, rgba(var(--s-or-rgb), .08), transparent 60%);
  background-repeat: no-repeat;
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]):not([data-theme="clair"]) body:not(.tv) {
    background-image: radial-gradient(900px 500px at 0% 0%, rgba(var(--s-or-rgb), .08), transparent 60%);
  }
}

h1 { letter-spacing: -.035em; line-height: .9; }
h2:not(.surtitre):not([class*="surtitre"]) {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.03em;
}
p { max-width: 68ch; }
.enveloppe { max-width: 1160px; }
.section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.section-mince { padding-block: clamp(3rem, 6vw, 5rem); }

.surtitre {
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--or-800);
  margin-bottom: .8rem;
}
.surtitre::before { width: 22px; height: 2px; border-radius: 2px; background: var(--or-500); }

/* ═══════════════════════════════════════════════════════════ 3. L'EN-TÊTE ══
   Un verre de sable, une ligne fine, l'encre sombre : l'en-tête d'Apple, en
   plus chaud. La boule reste la marque. */

.entete {
  background: var(--s-verre);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  color: var(--s-encre-nav);
  border-bottom: 1px solid var(--s-verre-bord);
  box-shadow: none;
  transition: box-shadow var(--s-dur-3) var(--s-ease), background var(--s-dur-3) var(--s-ease);
}
.entete.est-collee { box-shadow: 0 10px 40px -30px rgba(15, 23, 51, .5); }
.entete .enveloppe { min-height: 66px; }
.bande { display: none; }

.marque .boule { --boule-taille: 32px; transition: transform var(--s-dur-4) var(--s-ease-magie); }
.marque:hover .boule { transform: rotate(180deg); }
.marque .mot {
  font-size: 1.35rem;
  letter-spacing: .01em;
  color: var(--s-encre-nav);
  text-shadow: none;
}
.marque .mot small { display: none; }

.nav a {
  padding: .5rem .85rem;
  border-radius: 999px;
  color: var(--s-encre-nav);
  font-weight: 600;
  opacity: .78;
  transition: opacity var(--s-dur-2), background var(--s-dur-2), transform var(--s-dur-2) var(--s-ease);
}
.nav a:hover { opacity: 1; background: rgba(15, 23, 51, .06); color: var(--s-encre-nav); transform: none; }
.nav a[aria-current="page"] { opacity: 1; background: rgba(15, 23, 51, .08); color: var(--s-encre-nav); box-shadow: none; }
.nav .nav-cta,
.nav .nav-cta:hover {
  margin-left: .4rem;
  opacity: 1;
  background: var(--encre);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 24px -14px rgba(15, 23, 51, .6);
}
:root[data-theme="buvette"] .nav .nav-cta, :root[data-theme="sombre"] .nav .nav-cta { background: var(--or-500); color: #0F1733; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]):not([data-theme="clair"]) .nav .nav-cta { background: var(--or-500); color: #0F1733; }
  :root:not([data-theme="cagnard"]):not([data-theme="clair"]) .nav a:hover,
  :root:not([data-theme="cagnard"]):not([data-theme="clair"]) .nav a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
}
.nav-sortie { color: var(--s-encre-nav) !important; opacity: .7; }

/* Le sélecteur de province. */
.prov { position: relative; margin-left: .5rem; }
.prov summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--s-encre-nav);
  background: rgba(15, 23, 51, .06); border: 1px solid transparent;
}
.prov summary::-webkit-details-marker { display: none; }
.prov ul {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 60; min-width: 250px; margin: 0; padding: .4rem; list-style: none;
  background: var(--carte); border-radius: var(--s-rayon-s); box-shadow: var(--s-ombre-3);
}
.prov ul a { display: block; padding: .6rem .85rem; border-radius: 10px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .92rem; }
.prov ul a:hover { background: var(--sol-2); }
.prov ul a[aria-current="true"] { color: var(--or-800); font-weight: 800; }

/* ═══════════════════════════════════════════════════════ 4. LES EN-TÊTES ══
   Une page s'ouvre sur son titre, immense, sur le sable. La photo, quand il
   y en a une, vient dans une carte aux angles ronds — jamais en aplat noir. */

.banniere-bleue,
.acc-etat,
.banniere {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  color: var(--encre);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.banniere-bleue::before,
.acc-etat::before {
  /* la boule, en filigrane, à droite : l'esprit du lieu sans un mot */
  content: "";
  position: absolute;
  right: -6vw;
  top: -10%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background-image: image-set(
    url("/assets/img/photos/boule-cochonnet-800.webp") type("image/webp"),
    url("/assets/img/photos/boule-cochonnet-800.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  opacity: .14;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 70%);
  animation: s-derive 2.4s var(--s-ease-sortie) both;
}
.banniere-bleue::after, .acc-etat::after { content: none; }
.banniere-bleue h1,
.acc-etat h1,
.banniere h1 {
  font-size: clamp(3.2rem, 9vw, 7.4rem);
  color: var(--encre);
  text-shadow: none;
}
.banniere-bleue .sous,
.acc-etat .acc-etat-sous,
.banniere .sous {
  color: var(--encre-2);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  max-width: 60ch;
  margin-top: .8rem;
}
.banniere-bleue .surtitre,
.acc-etat .acc-etat-surtitre,
.banniere .surtitre { color: var(--or-800); }
.acc-etat .acc-etat-surtitre { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.acc-phrase-jour { color: var(--encre-2); }
/* les pastilles et chiffres écrits en blanc par les feuilles de page */
.banniere-bleue .chiffre { color: var(--encre); }
.banniere-bleue .pastille-vide, .banniere-bleue .bouton-vide,
.acc-etat .bouton-vide { color: var(--encre); border-color: var(--trait-2); }
.cl-releve, .cl-banniere .carte { background: var(--carte); color: var(--encre); border: 0; box-shadow: var(--s-ombre-1); border-radius: var(--s-rayon-s); }

/* Les scènes à photo : la photo devient une grande carte sous le titre. */
:is(.scene, .bandeau-photo, .acc-scene) {
  background: transparent;
  color: var(--encre);
  overflow: visible;
  padding-block: clamp(3rem, 6vw, 5rem) 0;
}
:is(.scene, .bandeau-photo, .acc-scene)::before,
:is(.scene, .bandeau-photo, .acc-scene)::after { content: none; }
:is(.scene, .bandeau-photo, .acc-scene) > picture,
:is(.scene, .bandeau-photo, .acc-scene) > img {
  position: static;
  display: block;
  order: 2;
  width: min(100% - 2 * var(--gouttiere), 1160px);
  height: clamp(220px, 38vw, 520px);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  border-radius: var(--s-rayon-l);
  overflow: hidden;
  box-shadow: var(--s-ombre-3);
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
  filter: none;
}
:is(.scene, .bandeau-photo, .acc-scene) > picture > img { width: 100%; height: 100%; object-fit: cover; animation: s-derive 2.4s var(--s-ease-sortie) both; }
:is(.scene, .bandeau-photo, .acc-scene) { display: flex; flex-direction: column; }
:is(.scene, .bandeau-photo, .acc-scene) > .enveloppe { order: 1; min-height: 0; padding-bottom: 0; }
:is(.scene, .bandeau-photo, .acc-scene) h1,
:root:not([data-theme="buvette"]):not([data-theme="sombre"]) :is(.scene, .bandeau-photo, .acc-scene) h1 {
  font-size: clamp(3.2rem, 9vw, 7.4rem);
  color: var(--encre);
  text-shadow: none;
}
:is(.scene, .bandeau-photo, .acc-scene) :is(.sous, .acc-scene-sous),
:root:not([data-theme="buvette"]):not([data-theme="sombre"]) :is(.scene, .bandeau-photo, .acc-scene) :is(.sous, .acc-scene-sous) { color: var(--encre-2); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 500; }
:is(.scene, .bandeau-photo, .acc-scene) :is(.surtitre, .acc-scene-surtitre),
:root:not([data-theme="buvette"]):not([data-theme="sombre"]) :is(.scene, .bandeau-photo, .acc-scene) :is(.surtitre, .acc-scene-surtitre) { color: var(--or-800); }
.scene + .feuille, .bandeau-photo + .feuille { margin-top: 0; }

/* L'entrée : chaque ligne monte, dans l'ordre. */
:is(.banniere-bleue, .acc-etat, .banniere, .scene, .bandeau-photo, .acc-scene, .vit-hero) > .enveloppe > * {
  animation: s-monte var(--s-dur-4) var(--s-ease-magie) both;
}
:is(.banniere-bleue, .acc-etat, .banniere, .scene, .bandeau-photo, .acc-scene, .vit-hero) > .enveloppe > :nth-child(2) { animation-delay: 80ms; }
:is(.banniere-bleue, .acc-etat, .banniere, .scene, .bandeau-photo, .acc-scene, .vit-hero) > .enveloppe > :nth-child(3) { animation-delay: 160ms; }
:is(.banniere-bleue, .acc-etat, .banniere, .scene, .bandeau-photo, .acc-scene, .vit-hero) > .enveloppe > :nth-child(n+4) { animation-delay: 240ms; }

@keyframes s-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes s-derive { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes s-flotte { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ═════════════════════════════════════════════════════════ 5. LES CARTES ══ */

.carte {
  border: 0;
  border-radius: var(--s-rayon);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  box-shadow: inset 0 1px 0 var(--s-lumiere-haut), var(--s-ombre-1);
}
.carte-nette { border-radius: var(--s-rayon-s); }
.carte-bleue {
  background: #0F1733;
  color: #F3EEE3;
  box-shadow: var(--s-ombre-3);
}
.carte-bleue::after { content: none; }
.carte-jaune { background: var(--or-500); color: #0F1733; box-shadow: var(--s-ombre-or); }
.carte-cerclee { border: 0; box-shadow: inset 0 0 0 2px rgba(var(--s-or-rgb), .7), var(--s-ombre-1); }
.verre { border: 0; border-radius: var(--s-rayon); box-shadow: var(--s-ombre-2); }

a.carte, .carte-lien, .ligne-classement {
  transition: transform var(--s-dur-2) var(--s-ease), box-shadow var(--s-dur-2) var(--s-ease);
}
@media (hover: hover) {
  :is(a.carte, .carte-lien, .ligne-classement):hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--s-ombre-2); }
}

.ligne-classement { border: 0; border-radius: var(--s-rayon-s); box-shadow: var(--s-ombre-1); padding: .85rem 1rem; }
.ligne-classement.podium .rang { color: var(--or-800); }
.ligne-classement.podium .rang::before { width: 4px; background: var(--or-500); }
.ligne-classement.moi { background: #0F1733; box-shadow: var(--s-ombre-2); }
.ligne-classement .score .pts { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; line-height: .9; }

/* ════════════════════════════════════════════════════════ 6. LES BOUTONS ══
   Deux boutons, pas dix : l'or pour le geste, l'encre pour le second. */

.bouton {
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  background: var(--or-500);
  color: #0F1733;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--s-ombre-or);
  transition: transform var(--s-dur-2) var(--s-ease), box-shadow var(--s-dur-2) var(--s-ease), background var(--s-dur-2);
}
.bouton::after { content: none; }
@media (hover: hover) {
  .bouton:hover { filter: none; background: var(--or-400); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -14px rgba(var(--s-or-rgb), .8); }
}
.bouton:active { transform: translateY(0) scale(.98); }
.bouton-petit { padding: .5rem 1rem; }
.bouton-bleu { background: #0F1733; color: #fff; box-shadow: var(--s-ombre-1); }
.bouton-bleu:hover { background: #1B244B; color: #fff; }
.bouton-vert { background: var(--vert-500); color: #fff; box-shadow: var(--s-ombre-1); }
.bouton-danger { background: var(--rouge-500); color: #fff; box-shadow: var(--s-ombre-1); }
.bouton-vide {
  background: var(--carte);
  color: var(--encre);
  border: 0;
  box-shadow: var(--s-ombre-1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bouton-vide:hover { box-shadow: var(--s-ombre-2); }
:is(.carte-bleue, .vit-nuit, .ligne-classement.moi) .bouton-vide { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }

/* ═══════════════════════════════════════════════════ 7. PASTILLES, JETONS ══ */

.pastille { box-shadow: none; font-size: .66rem; padding: .22rem .6rem; }
.pastille-bleue { background: #0F1733; color: var(--or-300); border: 0; }
.jeton { background: #0F1733; box-shadow: 0 0 0 2px var(--carte), 0 6px 14px -6px rgba(0, 0, 0, .35); }
.jeton-or { background: var(--or-500); box-shadow: 0 0 0 2px var(--carte), 0 6px 14px -6px rgba(0, 0, 0, .35); }
.boule-acier, .marque .boule { box-shadow: var(--acier-ombre), inset 0 0 0 1px rgba(255, 255, 255, .16); }

/* ══════════════════════════════════════════════════════════ 8. LES TABLES ══ */

.defile { border: 0; border-radius: var(--s-rayon-s); background: var(--carte); box-shadow: var(--s-ombre-1); padding: .4rem .7rem; }
.tableau th { color: var(--encre-3); border-bottom: 1px solid var(--trait); padding-block: .75rem .6rem; }
.tableau td { padding-block: .75rem; border-bottom-color: var(--trait); }
.tableau tbody tr:hover { background: var(--sol); }

/* Les champs de formulaire. */
.champ, input.champ, select.champ, textarea.champ {
  border: 0;
  border-radius: 14px;
  background: var(--carte);
  box-shadow: inset 0 0 0 1px var(--trait-2);
  padding: .8rem 1rem;
  transition: box-shadow var(--s-dur-2);
}
.champ:focus, input.champ:focus, select.champ:focus, textarea.champ:focus { box-shadow: inset 0 0 0 2px var(--or-500); outline: 0; }

/* ═════════════════════════════════════════════════════ 9. LA VITRINE ══
   L'accueil des visiteurs : une phrase, l'application, la preuve. */

.vit-hero { padding-block: clamp(3.5rem, 8vw, 7rem) 0; text-align: center; }
.vit-hero .enveloppe { display: flex; flex-direction: column; align-items: center; }
.vit-hero .surtitre { justify-content: center; }
.vit-hero .surtitre::before { display: none; }
.vit-claim {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(3.6rem, 11vw, 9.5rem);
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--encre);
  margin: .6rem 0 0;
  text-wrap: balance;
  max-width: 12ch;
}
.vit-claim em { font-style: normal; color: var(--or-600); }
.vit-lead {
  margin: clamp(1.2rem, 2.5vw, 2rem) auto 0;
  max-width: 56ch;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--encre-2);
  text-wrap: pretty;
}
.vit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.vit-actions .bouton { padding: 1rem 1.7rem; font-size: 1.02rem; }

/* Les badges des magasins : Apple d'abord, Android quand il sera là. */
.vit-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
.vit-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem .55rem .8rem; border-radius: 12px;
  background: #0F1733; color: #fff; text-decoration: none; line-height: 1.05;
  box-shadow: var(--s-ombre-1);
  transition: transform var(--s-dur-2) var(--s-ease), box-shadow var(--s-dur-2);
}
.vit-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--s-ombre-2); }
.vit-badge svg { width: 22px; height: 22px; flex: none; }
.vit-badge small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .04em; opacity: .75; }
.vit-badge b { display: block; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.vit-badge.bientot { background: transparent; color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--trait-2); cursor: default; }
.vit-badge.bientot:hover { transform: none; box-shadow: inset 0 0 0 1px var(--trait-2); color: var(--encre-2); }

/* Les téléphones sur le sable. */
.vit-scene {
  position: relative;
  isolation: isolate;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(.6rem, 2vw, 1.6rem);
  padding: 0 var(--gouttiere);
}
.vit-scene::before {
  content: "";
  position: absolute;
  inset: 22% -2% -1% -2%;
  z-index: -1;
  border-radius: var(--s-rayon-l) var(--s-rayon-l) 0 0;
  background-image: image-set(
    url("/assets/img/photos/coucher-1074.webp") type("image/webp"),
    url("/assets/img/photos/coucher-1074.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 40%;
  box-shadow: var(--s-ombre-3);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.telephone {
  flex: none;
  width: clamp(120px, 22vw, 250px);
  aspect-ratio: 9 / 18.6;
  border-radius: clamp(20px, 3vw, 38px);
  padding: clamp(5px, .8vw, 9px);
  background: #0B1020;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
  animation: s-monte var(--s-dur-4) var(--s-ease-magie) both;
}
.telephone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(clamp(20px, 3vw, 38px) - clamp(5px, .8vw, 9px)); }
.telephone.grand { width: clamp(150px, 27vw, 300px); z-index: 1; animation-delay: 120ms; }
.telephone.gauche { transform: translateY(6%) rotate(-3deg); animation-delay: 240ms; }
.telephone.droite { transform: translateY(6%) rotate(3deg); animation-delay: 320ms; }
@media (max-width: 640px) { .telephone.gauche, .telephone.droite { display: none; } .telephone.grand { width: min(62vw, 260px); } }

/* Les chiffres qui parlent. */
.vit-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-top: clamp(2rem, 5vw, 4rem); width: 100%; }
.vit-chiffres .carte { text-align: center; padding: 1.4rem 1rem; }
.vit-chiffres .chiffre { font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--encre); }
.vit-chiffres small { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }

/* Une rangée : le texte et l'image, en alternance. */
.vit-rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
}
.vit-rangee.inverse > .vit-texte { order: 2; }
.vit-texte h2 { max-width: 14ch; }
.vit-texte p { margin-top: 1rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--encre-2); max-width: 44ch; }
.vit-texte ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 46ch; }
.vit-texte li { position: relative; padding-left: 1.6rem; color: var(--encre); font-weight: 500; }
.vit-texte li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--or-500); }
.vit-visuel {
  position: relative;
  border-radius: var(--s-rayon-l);
  aspect-ratio: 5 / 4;
  margin-bottom: 1.5rem;
}
.vit-visuel > picture, .vit-visuel > img.fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--s-rayon-l); overflow: hidden; box-shadow: var(--s-ombre-3); background: var(--sol-2);
}
.vit-visuel > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vit-visuel .telephone {
  position: absolute;
  right: 8%;
  bottom: -6%;
  width: clamp(120px, 34%, 230px);
  transform: rotate(-4deg);
  animation: s-flotte 4s ease-in-out infinite alternate;
}
.vit-visuel.seul { aspect-ratio: auto; background: transparent; box-shadow: none; overflow: visible; display: flex; justify-content: center; }
.vit-visuel.seul .telephone { position: static; transform: none; width: clamp(180px, 60%, 280px); animation: s-monte var(--s-dur-4) var(--s-ease-magie) both; }
@media (max-width: 760px) {
  .vit-rangee { grid-template-columns: 1fr; gap: 1.6rem; }
  .vit-rangee.inverse > .vit-texte { order: 0; }
  .vit-visuel .telephone { right: 5%; bottom: -8%; }
}

/* Trois écrans, une seule vérité. */
.vit-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.vit-trio .carte { padding: 1.6rem 1.5rem; }
.vit-trio .icone { color: var(--or-800); }
.vit-trio h3 { margin: .9rem 0 .4rem; font-size: 1.15rem; }
.vit-trio p { font-size: .98rem; color: var(--encre-2); }

/* La nuit : l'écran de la buvette, et l'appel à installer. */
.vit-nuit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--s-rayon-l);
  background: #0B1128;
  color: #F3EEE3;
  padding: clamp(2.2rem, 5vw, 4rem);
  box-shadow: var(--s-ombre-3);
}
.vit-nuit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: image-set(
    url("/assets/img/photos/boulodrome-soir-1074.webp") type("image/webp"),
    url("/assets/img/photos/boulodrome-soir-1074.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  opacity: .32;
}
.vit-nuit::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 17, 40, .95), rgba(11, 17, 40, .55) 60%, rgba(11, 17, 40, .3));
}
.vit-nuit h2 { color: #fff; }
.vit-nuit p { color: #C9D0E6; }
.vit-nuit .vit-badges { justify-content: flex-start; margin-top: 1.4rem; }
.vit-nuit .vit-badge { background: #fff; color: #0F1733; }
.vit-nuit .vit-badge:hover { color: #0F1733; }
.vit-nuit .vit-badge.bientot { background: transparent; color: #C9D0E6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.vit-qr { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.vit-qr img { width: 92px; height: 92px; border-radius: 14px; background: #fff; padding: 6px; color: #0F1733; }
.vit-qr small { font-size: .86rem; color: #C9D0E6; max-width: 26ch; }

/* En ce moment : le titre au-dessus des blocs de l'horloge. */
.vit-titre { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.vit-titre .surtitre { justify-content: center; }
.vit-titre .surtitre::before { display: none; }
.vit-titre p { margin: .6rem auto 0; color: var(--encre-2); max-width: 52ch; }

/* ═════════════════════════════════════════════════════ 10. LE PIED DE PAGE ══ */

.pied {
  background: #0B1128;
  color: #C9D0E6;
  border-top: 0;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}
.pied::before { opacity: .12; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.pied::after { content: none; }
.pied-marque { font-size: clamp(2.2rem, 3.6vw, 3rem); color: #fff; text-shadow: none; letter-spacing: -.02em; }
.pied-baseline { color: #A9B0C9; }
.pied .intitule { color: var(--or-400); }
.pied-liens a { color: #E4E8F5; }
.pied-liens a:hover { color: var(--or-300); }
.pied-app { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.pied-bas { color: #8C94B2; }
.pied-bas a { color: var(--or-300); }


/* ═══ 10 bis. LE PIED : LA GRILLE ══ */

.pied-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--r6); align-items: start; }
.pied-baseline { max-width: 44ch; margin: .8rem 0 0; font-size: .95rem; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pied-liens a { text-decoration: none; font-weight: 600; display: inline-block; transition: color var(--s-dur-1), transform var(--s-dur-2) var(--s-ease); }
.pied-liens a:hover { transform: translateX(3px); }
.pied-app { display: inline-flex; align-items: center; gap: .7rem; margin-top: var(--r4); padding: .55rem .9rem .55rem .6rem; border-radius: 14px; border: 1px solid transparent; color: #fff; text-decoration: none; font-weight: 700; }
.pied-app img { width: 40px; height: 40px; border-radius: 10px; }
.pied-app small { display: block; font-size: .68rem; font-weight: 600; color: #A9B0C9; }
.pied-reglages { display: flex; flex-wrap: wrap; gap: var(--r5) var(--r7); margin-top: var(--r6); padding-top: var(--r5); border-top: 1px solid rgba(255, 255, 255, .08); }
.pied-theme:not([hidden]), .pied-texte:not([hidden]) { margin: 0; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem var(--r5); margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; }
.pied-bas a { text-decoration: none; font-weight: 700; }
@media (max-width: 760px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-grille > :first-child { grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════ 11. LA BARRE D'ONGLETS ══ */

.barre-onglets {
  background: var(--s-verre);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--s-verre-bord);
  box-shadow: 0 -12px 34px -22px rgba(15, 23, 51, .45);
}
.barre-onglets a { color: var(--encre-2); }
.barre-onglets a[aria-current="page"] { color: var(--encre); }
.barre-onglets a[aria-current="page"] .rond { background: var(--or-500); box-shadow: 0 8px 18px -8px rgba(var(--s-or-rgb), .9); }

/* ═════════════════════════════════════════════════ 12. LE DÉVOILEMENT ══ */

.js [data-reveler] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--s-dur-4) var(--s-ease-magie), transform var(--s-dur-4) var(--s-ease-magie);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveler].est-visible { opacity: 1; transform: none; }
.message { border: 0; border-radius: var(--s-rayon-s); box-shadow: var(--s-ombre-1); animation: s-monte var(--s-dur-3) var(--s-ease-magie) both; }

/* ═══════════════════════════════════════════════ 13. MOUVEMENT RÉDUIT ══ */

@media (prefers-reduced-motion: reduce) {
  :is(.banniere-bleue, .acc-etat, .banniere, .scene, .bandeau-photo, .acc-scene, .vit-hero) > .enveloppe > *,
  .banniere-bleue::before, .acc-etat::before,
  :is(.scene, .bandeau-photo, .acc-scene) > picture > img,
  .telephone, .vit-visuel .telephone, .message { animation: none; }
  .js [data-reveler] { opacity: 1; transform: none; transition: none; }
  .marque:hover .boule { transform: none; }
}

} /* @layer sable */

/* Hors calque, exprès : les feuilles de page écrivent parfois sans @layer et
   passeraient devant. Ce bloc, plus spécifique, tient la scène photo. */
html body :is(.scene, .bandeau-photo, .acc-scene) > picture,
html body :is(.scene, .bandeau-photo, .acc-scene) > img {
  position: static;
  inset: auto;
  width: min(100% - 2 * var(--gouttiere), 1160px);
  height: clamp(220px, 38vw, 520px);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  border-radius: var(--s-rayon-l);
  overflow: hidden;
  opacity: 1;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  order: 2;
}
html body :is(.scene, .bandeau-photo, .acc-scene) > picture > img { position: static; width: 100%; height: 100%; object-fit: cover; }
html body :is(.scene, .bandeau-photo, .acc-scene) { display: flex; flex-direction: column; background: transparent; }
html body :is(.scene, .bandeau-photo, .acc-scene)::before,
html body :is(.scene, .bandeau-photo, .acc-scene)::after { content: none; }
html body :is(.scene, .bandeau-photo, .acc-scene) > .enveloppe { order: 1; min-height: 0; padding-bottom: 0; display: block; }
html body :is(.scene, .bandeau-photo, .acc-scene) h1 { color: var(--encre); text-shadow: none; }
html body :is(.scene, .bandeau-photo, .acc-scene) :is(.sous, .acc-scene-sous, .acc-phrase-jour) { color: var(--encre-2); }
html body :is(.scene, .bandeau-photo, .acc-scene) :is(.surtitre, .acc-scene-surtitre) { color: var(--or-800); }

/* Les en-têtes de page écrits pour la nuit par les feuilles de page (boutons
   et sur-titres blancs) : sur le sable, ils reprennent l'encre.
   !important assumé : ces couleurs viennent de feuilles de page sans calque
   et plus spécifiques, écrites pour un bandeau de nuit.
   Les surfaces sont des jetons (--carte, --encre), plus #fff / #0F1733 : en
   Buvette, une pilule blanche à texte sombre — et un champ blanc à texte
   clair, donc illisible — c'était le dessin de jour plaqué sur la nuit.
   L'or garde son encre sombre dans les deux thèmes ; le vert qui clôt, le
   rouge qui coûte et le marine disent ce qu'ils disent au lieu de virer à
   l'or (c'est le vocabulaire des gestes de admin/_banniere.php). */
html body :is(.banniere-bleue, .acc-etat, .banniere) :is(.bouton, .bouton-vide, .bouton-petit) { color: var(--encre) !important; background: var(--carte) !important; box-shadow: var(--s-ombre-1) !important; border-color: transparent !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .bouton:not(.bouton-vide, .bouton-vert, .bouton-danger, .bouton-bleu) { background: var(--or-500) !important; color: var(--marine-900) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .bouton.bouton-vert   { background: var(--vert) !important;       color: var(--blanc) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .bouton.bouton-danger { background: var(--rouge) !important;      color: var(--blanc) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .bouton.bouton-bleu   { background: var(--marine-900) !important; color: var(--blanc) !important; }
@media (hover: hover) {
  html body :is(.banniere-bleue, .acc-etat, .banniere) .bouton:hover { box-shadow: var(--s-ombre-2) !important; }
  html body :is(.banniere-bleue, .acc-etat, .banniere) .bouton:not(.bouton-vide, .bouton-vert, .bouton-danger, .bouton-bleu):hover { background: var(--or-400) !important; }
}
html body :is(.banniere-bleue, .acc-etat, .banniere) :is(.surtitre, .surtitre a, .acc-etat-surtitre) { color: var(--or-800) !important; opacity: 1 !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) :is(.sous, .acc-etat-sous, p, li) { color: var(--encre-2) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) :is(h1, .chiffre, strong, b) { color: var(--encre) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .pastille:not(.pastille-vide):not(.pastille-verte):not(.pastille-rouge):not(.pastille-ambre) { color: var(--marine-900) !important; background: var(--or-500) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .pastille-vide { color: var(--encre-2) !important; border-color: var(--trait-2) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) .chiffre small { color: var(--encre-3) !important; }
html body :is(.banniere-bleue, .acc-etat, .banniere) :is(input, select, textarea) { color: var(--encre) !important; background: var(--carte) !important; }

/* La boule en filigrane dépasse à droite : on coupe sans créer de défilement. */
html { overflow-x: clip; }
html body :is(.banniere-bleue, .acc-etat) { overflow: clip; }

/* La phrase du jour : de l'air sous elle, sinon les lettres du grand titre
   (interligne .9) montent sur ses descendantes. */
html body .acc-phrase-jour { font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--encre-2); margin: .3rem 0 1rem; max-width: 60ch; }
html body :is(.acc-scene, .acc-etat) h1 { padding-top: .12em; }