/* =====================================================================
   PAGE « SOIRÉE CASINO À PARIS » (/animation-casino), 25/09/2026
   Chargée sur cette seule page (config/16-animation-casino.php, 'css'),
   portée par la classe de page body.page-casino ('classe').
   Consigne de Maikel : rester dans la direction artistique de Casino
   Événements en gardant les idées de style du site. Composants et
   grammaire v3 intacts (Plus Jakarta Sans, Instrument Serif italique,
   blocs courts, apparitions data-monte) ; la touche casino vient de la
   charte relevée dans 61-ressources.md §5 : or #d4af37 (clair #e8c84a,
   foncé #b8962e) à la place du violet et du magenta, fond sombre chaud,
   bordures or à 20 %, angles francs, ombres or diffuses, sur-titre en
   majuscules espacées à trait de 36 px. Pas de feutrine ni de jetons.
   L'en-tête et le pied gardent le style du site. Depuis le 02/10/2026
   (demande de Maikel), le bouton de devis (.v3-btn) de la page passe à
   l'or : --degrade et --sur-accent sont redéfinis sur <main>.
   ===================================================================== */

/* ----- JETONS DE COULEUR : redéfinis sur <main>, l'en-tête et le pied n'en héritent pas ----- */
.page-casino main{
  --or:#d4af37;
  --or-clair:#e8c84a;
  --or-fonce:#b8962e;
  --degrade-or:linear-gradient(120deg,var(--or-fonce),var(--or-clair));
  --sur-or:#1a160f;                                   /* texte sur l'or : 8,9:1 au plus foncé */
  --ombre-or:0 0 30px rgba(212,175,55,.06);
  --ombre-or-forte:0 0 60px rgba(212,175,55,.10);

  /* Les variables d'accent de style.css, passées à l'or (celles qui sont dérivées sur :root sont recalculées ici) */
  --accent-a:#d4af37;
  --accent-b:#e8c84a;
  --accent-clair:#d4af37;                             /* mots en italique, sur-titres : 9:1 sur le fond */
  --degrade:var(--degrade-or);                        /* bouton de devis et tout ce qui porte le dégradé, dans la page */
  --sur-accent:var(--sur-or);
  --accent-doux:rgba(212,175,55,.09);
  --ligne:rgba(212,175,55,.2);                        /* bordures or à 20 % */
  --ligne-accent:rgba(212,175,55,.4);

  /* Fond sombre légèrement chaud (noir brun du site casino, un cran plus profond) */
  --fond:#0f0c08;
  --fond-2:#18130c;
  --surface:#1d1811;
  --surface-2:#241e15;
  --encre:#f7f2e7;
  --texte:#d9d1c1;                                    /* 12:1 */
  --discret:#a69d8b;                                  /* 6,9:1 */

  /* Section claire : ivoire, accent or foncé lisible (5,4:1) */
  --creme:#faf6ec;
  --creme-2:#f2eadb;
  --creme-carte:#fffdf8;
  --creme-encre:#1a160f;
  --creme-texte:#4a4234;                              /* 9:1 */
  --creme-accent:#7d6118;
  --creme-ligne:#e4d6b3;

  --r:4px;                                            /* angles francs (--radius-md du site casino) */
  background:var(--fond);
}
.page-casino main ::selection{background:rgba(212,175,55,.35); color:#fff}

/* ----- LE BOUTON DE DEVIS À L'OR (02/10/2026) : dégradé or, texte sombre, ombre or ----- */
.page-casino main .v3-btn{box-shadow:0 12px 34px -12px rgba(212,175,55,.55)}
.page-casino main .v3-btn:hover{box-shadow:0 18px 40px -12px rgba(232,200,74,.7)}

/* Le panier flottant est posé hors de <main> : il reçoit les mêmes jetons, pour ne pas rester seul en violet sur la page. */
.page-casino .v3-panier{--degrade:linear-gradient(120deg,#b8962e,#e8c84a); --sur-accent:#1a160f; --accent-a:#d4af37; --accent-b:#e8c84a; --accent-clair:#d4af37;
  --ligne:rgba(212,175,55,.2); --ligne-accent:rgba(212,175,55,.4)}
.page-casino .v3-panier__panneau{background:rgba(29,24,17,.97)}
.page-casino .v3-panier .v3-btn{box-shadow:0 12px 34px -12px rgba(212,175,55,.55)}

/* ----- SUR-TITRE EN « KICKER » : majuscules espacées, trait or de 36 px ----- */
.page-casino .v3-surtitre{letter-spacing:.28em}
.page-casino .v3-surtitre::before,.page-casino .v3-surtitre--centre::after{width:36px; opacity:.9}

/* ----- HAUT DE PAGE : voile sombre chaud, halo or très léger ----- */
.page-casino .v3-haut__fond img{object-position:50% 72%; filter:saturate(.85)}
.page-casino .v3-haut__fond::after{
  background:linear-gradient(180deg,rgba(15,12,8,.82),rgba(15,12,8,.42) 40%,rgba(15,12,8,.95)),
             radial-gradient(55% 45% at 50% 50%,rgba(212,175,55,.07),transparent 72%),
             radial-gradient(70% 55% at 50% 55%,transparent,rgba(15,12,8,.55))}
.page-casino .v3-haut__intro{color:#efe8da}
.page-casino .v3-haut .v3-pilule{border-color:rgba(212,175,55,.55)}
.page-casino .v3-haut .v3-pilule:hover{border-color:var(--or-clair); background:rgba(212,175,55,.1); color:#fff}
.page-casino .v3-reperes li{border-color:rgba(212,175,55,.3); background:rgba(15,12,8,.5)}
/* 25/09/2026, contrôle : le premier repère du haut porte le TTC (450 € HT (540 € TTC) la table,
   croupier compris) dans le même <span> que le composant partagé rend en texte simple, sans balise
   <small class="v3-ttc-texte"> possible ; on redonne ici la taille et la couleur discrètes du TTC. */
.page-casino .v3-reperes li:first-child > span{font-size:.84em; color:var(--discret)}

/* ----- SECTIONS : filet or très discret entre deux sections sombres ----- */
.page-casino .v3-section:not(.v3-clair) + .v3-section:not(.v3-clair){border-top:1px solid rgba(212,175,55,.08)}

/* ----- BOUTONS SECONDAIRES (pilules) : contour or ----- */
.page-casino .v3-pilule{border-color:var(--ligne-accent); background:rgba(212,175,55,.04)}
.page-casino .v3-pilule:hover{border-color:var(--or); color:var(--or-clair); background:rgba(212,175,55,.08)}

/* ----- PASTILLES À L'OR : étapes 01 à 06, initiales des avis, étape active du formulaire, points des décors ----- */
.page-casino .v3-etape__no,.page-casino .v3-avis__initiale{background:var(--degrade-or); color:var(--sur-or)}
.page-casino .v3-form__etapes li.is-on .v3-etape__no{background:var(--degrade-or); color:var(--sur-or)}
.page-casino .v3-point.est-ouvert .v3-point__btn,.page-casino .v3-point.est-signale .v3-point__btn,.page-casino .v3-point__btn:focus-visible{background:var(--degrade-or)}
@media (hover:hover) and (pointer:fine){ .page-casino .v3-point:hover .v3-point__btn{background:var(--degrade-or)} }
.page-casino .v3-point__boite{background:rgba(29,24,17,.97)}
/* Six étapes sur deux rangées de trois : pas de filet qui sort de la rangée, un vrai écart entre les rangées */
.page-casino .v3-etape:nth-child(3n)::after{display:none}
.page-casino .v3-etapes{row-gap:clamp(36px,4vw,54px)}

/* Liste « compris » suivie d'un bloc et d'une phrase (section prix) : les blocs respirent */
.page-casino .v3-inclus__notes > .v3-texte:first-child{margin-top:22px}
.page-casino .v3-inclus__notes .v3-bloc + .v3-texte{margin-top:20px}

/* ----- FILETS ET PUCES LOSANGE À L'OR ----- */
.page-casino .v3-bloc{border-left-color:var(--or)}
.page-casino .v3-compris li::before{color:var(--or)}

/* ----- CARTES : fond chaud, bordure or à 20 %, ombre or diffuse ----- */
.page-casino .v3-carte{background:linear-gradient(170deg,var(--surface),rgba(29,24,17,.6)); box-shadow:var(--ombre-or)}
.page-casino .v3-oeuvre,.page-casino .v3-avis__carte,.page-casino .v3-form{box-shadow:var(--ombre-or)}
.page-casino .v3-oeuvre:hover,.page-casino a.v3-carte:hover{box-shadow:var(--ombre-or-forte)}
.page-casino .v3-clair .v3-carte{box-shadow:none}
.page-casino .v3-preuve,.page-casino .v3-form__selection,.page-casino .v3-form__statut{border-radius:var(--r)}
.page-casino .v3-form input:not([type=radio]),.page-casino .v3-form select,.page-casino .v3-form textarea{border-radius:var(--r); background:rgba(15,12,8,.6)}
.page-casino .v3-form input::placeholder,.page-casino .v3-form textarea::placeholder{color:#8a8170}

/* ----- VOS OCCASIONS (sur l'ivoire) : cinq cartes en trois puis deux ----- */
@media (min-width:981px){
  .page-casino #evenements .v3-cartes{grid-template-columns:repeat(6,minmax(0,1fr))}
  .page-casino #evenements .v3-carte{grid-column:span 2}
  .page-casino #evenements .v3-carte:nth-child(n+4){grid-column:span 3}
}
@media (min-width:701px) and (max-width:980px){
  .page-casino #evenements .v3-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-casino #evenements .v3-carte:last-child{grid-column:1 / -1}
}

/* ----- CINQ TABLES : les photos des tables du site casino, cinq colonnes au bureau ----- */
.page-casino #tables .v3-carte__media{aspect-ratio:4/5; background:#000}
.page-casino #tables .v3-carte__media img{object-position:50% 35%}
@media (min-width:1181px){
  .page-casino #tables .v3-cartes{grid-template-columns:repeat(5,minmax(0,1fr))}
  .page-casino #tables .v3-carte__corps{padding:20px 20px 22px}
  .page-casino #tables .v3-carte__sous{font-size:19.5px}
}
@media (min-width:701px) and (max-width:1180px){
  .page-casino #tables .v3-cartes{grid-template-columns:repeat(6,minmax(0,1fr))}
  .page-casino #tables .v3-carte{grid-column:span 2}
  .page-casino #tables .v3-carte:nth-child(n+4){grid-column:span 3}
  .page-casino #tables .v3-carte__media{aspect-ratio:4/3}
}
@media (max-width:700px){
  .page-casino #tables .v3-carte__media{aspect-ratio:3/2}
  .page-casino #tables .v3-carte__media img{object-position:50% 58%}
}

/* ----- RÉALISATIONS (cartes vers casinoevenements.com) : même hauteur, tables au centre des photos ----- */
.page-casino #realisations .v3-preuves{align-items:stretch}
.page-casino #realisations .v3-oeuvre__media img{object-position:50% 70%}

/* ----- AVIS GOOGLE DE CASINO ÉVÉNEMENTS : huit avis entiers, en colonnes de hauteurs libres ----- */
.page-casino .v3-avis--liste{display:block; columns:3; column-gap:clamp(14px,1.8vw,22px)}
.page-casino .v3-avis--liste .v3-avis__carte{break-inside:avoid; margin:0 0 clamp(14px,1.8vw,22px)}
@media (max-width:1100px){ .page-casino .v3-avis--liste{columns:2} }
@media (max-width:700px){ .page-casino .v3-avis--liste{columns:1} }

/* ----- DEVIS : le texte de la section « Votre devis » au-dessus du formulaire ----- */
.page-casino #devis .v3-tete__droite .v3-note{margin-top:12px}

/* ----- LA MAISON CASINO DU GROUPE : halo or, logo Casino Événements posé discrètement sous le titre ----- */
.page-casino #casino-evenements{background:radial-gradient(55% 90% at 12% 50%,rgba(212,175,55,.07),transparent 72%),var(--fond);
  border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne)}
/* Le PNG (400 × 268) a du vide autour du logo (visible de x 22 à 298, y 36 à 178) : marges négatives pour l'aligner sur le titre. */
.page-casino .v3-renvoi__logo{display:block; width:auto; height:132px; margin:6px 0 -44px -11px; opacity:.9}
@media (max-width:700px){ .page-casino .v3-renvoi__logo{height:104px; margin:2px 0 -35px -9px} }

/* ----- DEVIS : bouton « Animation casino » de l'étape 1 (option devis_besoin, 25/09/2026) ----- */
.page-casino .v3-form__selection-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.page-casino .v3-form__besoin{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:inherit; font-weight:700}
.page-casino .v3-form__besoin svg{width:15px; height:15px; flex:none}
.page-casino .v3-form__besoin.is-on{background:var(--degrade-or); color:var(--sur-or); border-color:transparent}
.page-casino .v3-form__besoin:not(.is-on) svg{display:none}