/* ═══════════════════════════════════════════════════════════════════════════
   L’IDÉAL SAUNA — design system du site
   ---------------------------------------------------------------------------
   Traduit les maquettes Page_*.png et la charte « planche logo.png » du client.
   Les couleurs ne sont PAS écrites ici : elles arrivent de assets/brand.css
   (--marque-*), généré par apply-brand.ps1 depuis client.json. Ce fichier ne
   fait que les mettre en scène.

   HISTORIQUE — deux jeux de maquettes coexistaient : l’un avec RÉSERVER +
   Galerie/Règlement (Accueil, Avis, Contact), l’autre avec « Ambiance » et une
   newsletter (Le Club, Tarifs). On a retenu le PREMIER : il couvre 3 maquettes
   sur 5 dont l’accueil, et c’est le seul cohérent avec la charte, qui dessine
   explicitement le bouton « Réserver ». À rebasculer si le client tranche autrement.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Fonds — la charte donne #1A1A1A comme neutre sombre ; les maquettes posent le
     contenu sur un noir plus profond et réservent #1A1A1A aux surfaces. */
  --fond-page:      #0a0a0c;
  --fond-surface:   var(--marque-fond, #1a1a1a);
  --fond-carte:     #121215;
  --fond-carte-alt: #17171c;

  --rose:        var(--marque-primaire,   #ff007a);
  --rose-fonce:  var(--marque-secondaire, #c2005c);
  --violet:      var(--marque-accent,     #7a00ff);
  --or:          #d4af37;
  --blanc:       var(--marque-texte, #ffffff);
  --gris:        #b9b4bb;
  --gris-fonce:  #8b8590;

  --trait:        rgba(255, 0, 122, .22);
  --trait-discret:rgba(255, 255, 255, .08);
  --halo:         0 0 24px rgba(255, 0, 122, .35);

  --font-titre:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-corps:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', 'Segoe Script', cursive;

  --large:  1180px;
  --rayon:  12px;
  --entete: 74px;          /* hauteur de l’en-tête fixe */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--fond-page);
  color: var(--blanc);
  font-family: var(--font-corps);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
img.ideal-deco { height: fit-content; }
a   { color: var(--rose); text-decoration: none; }
a:hover { color: var(--blanc); }

:focus-visible{
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 3px;
}

.ideal-conteneur{ width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 22px; }

/* Lien d’évitement (accessibilité clavier) */
.ideal-evitement{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rose); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.ideal-evitement:focus{ left: 0; }

/* ─────────────────────────── Titres ─────────────────────────── */

h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 600; margin: 0; line-height: 1.15; }

/* Titre de section : « – NOS ESPACES – », un court tiret rose de chaque côté du titre
   (maquettes), puis un lotus centré posé sur le filet. */
.ideal-titre-section{
  /* flex-wrap indispensable : sans lui, un titre en deux morceaux (« Nos rendez-vous »
     + l’accent « réguliers ») refuse de passer à la ligne et déborde en mobile. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 18px;
  text-align: center;
  font-size: clamp(1.5rem, 2.9vw, 2.05rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
}
.ideal-titre-section::before, .ideal-titre-section::after{
  content: ""; width: 22px; height: 1px; background: var(--rose); flex: none;
}
.ideal-titre-section .accent{ color: var(--rose); }

.ideal-filet{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 auto 2.4rem; max-width: 380px;
}
.ideal-filet::before, .ideal-filet::after{
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,0,122,.55), transparent);
}
.ideal-filet img{ width: 50px; height: auto; }
.ideal-reseaux a:first-of-type { border: none; }
.ideal-reseaux img:first-of-type { height: 50px; width: 50px; }

.ideal-sur-titre{
  display: block; text-align: center;
  font-family: var(--font-corps); font-size: .72rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: var(--rose);
  margin-bottom: .9rem;
}

/* Lignes manuscrites des maquettes.
   HISTORIQUE — rendues d’abord en Playfair italique, parce que la planche de charte
   ne liste que deux familles. Résultat : ça ne ressemblait pas aux maquettes. Or les
   5 maquettes ET l’affiche tarifs du club emploient bien une écriture manuscrite —
   elle fait donc partie de l’identité réelle. On la déclare dans client.json
   (typographies.script) pour rester remplaçable si le client préfère une autre. */
.ideal-script{
  font-family: var(--font-script);
  font-weight: 600;
  color: var(--rose);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.25;
}

/* ─────────────────────────── Boutons (charte) ─────────────────────────── */

.ideal-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-corps); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .95rem 1.7rem; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align: center;
}
.ideal-btn img{ width: 35px; height: auto; flex: none; }

.ideal-btn-plein{
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-fonce) 100%);
  color: #fff; box-shadow: 0 6px 22px rgba(255, 0, 122, .28);
}
/* Les icônes de la charte sont en trait ROSE : sur un bouton rose plein, elles
   disparaissent. On les repeint en blanc (brightness(0) écrase la couleur, invert
   la remonte en blanc) — le tracé et son halo restent intacts. */
.ideal-btn-plein img{ filter: brightness(0) invert(1); }
.ideal-btn-plein:hover{ color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 0, 122, .42); }

.ideal-btn-vide{
  background: transparent; color: var(--blanc);
  border-color: rgba(255, 255, 255, .35);
}
.ideal-btn-vide:hover{ border-color: var(--rose); color: var(--rose); transform: translateY(-2px); }

/* Variante contour ROSE (bouton « Découvrir le club » du panneau de présentation). */
.ideal-btn-contour{
  background: transparent; color: var(--rose); border-color: var(--rose);
}
.ideal-btn-contour:hover{
  background: rgba(255, 0, 122, .1); color: var(--rose); transform: translateY(-2px);
}

/* ─────────────────────────── En-tête ─────────────────────────── */

.ideal-entete{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--entete);
  display: flex; align-items: center;
  background: rgba(10, 10, 12, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ideal-entete.est-defile{
  background: rgba(10, 10, 12, .96);
  border-bottom-color: var(--trait);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}
/* Hauteur FIXE du conteneur : c’est elle qui permet au logo de déborder vers le bas
   sans entraîner la barre avec lui. Sans ça, le conteneur prend la hauteur du logo et
   le débordement se répartit également en haut et en bas — le médaillon remonte alors
   hors de l’écran au lieu de plonger dans la bannière. */
.ideal-entete .ideal-conteneur{
  display: flex; align-items: center; gap: 1.4rem;
  height: var(--entete);
}

/* Logo en médaillon blanc débordant SOUS l’en-tête.
   Mesuré sur Page_Accueil.png (maquette large de 1024 px) : barre de 73 px, médaillon
   de 111 px posé à 16 px du haut, donc 54 px sous la barre — la moitié du logo.
   On garde ce rapport : ~1,6 fois la hauteur de barre, calé en haut et non centré. */
.ideal-logo{
  flex: none; display: block; line-height: 0; align-self: flex-start; margin-top: 12px;
  /* Au-dessus du menu mobile ouvert (z-index 99) : sans ça le panneau tranche le
     médaillon en deux, puisque celui-ci déborde sous la barre. */
  position: relative; z-index: 101;
}
.ideal-logo img{
  width: 120px; height: 120px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 0, 122, .35);
  transition: width .25s ease, height .25s ease;
}
/* Au défilement le médaillon se resserre, mais continue de déborder : c’est lui qui
   signe l’en-tête. */
.ideal-entete.est-defile .ideal-logo{ margin-top: 8px; }
.ideal-entete.est-defile .ideal-logo img{ width: 92px; height: 92px; }

.ideal-nav{ margin-left: auto; }
.ideal-nav ul{ display: flex; align-items: center; gap: 1.9rem; margin: 0; padding: 0; list-style: none; }
.ideal-nav a{
  color: var(--blanc); font-size: .74rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .4rem 0; position: relative; white-space: nowrap;
}
.ideal-nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--rose); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.ideal-nav a:hover{ color: var(--rose); }
.ideal-nav a:hover::after,
.ideal-nav .current-menu-item > a::after,
.ideal-nav .current_page_item > a::after{ transform: scaleX(1); }
.ideal-nav .current-menu-item > a,
.ideal-nav .current_page_item > a{ color: var(--rose); }

/* HISTORIQUE — l’en-tête portait un bouton « Réserver », comme sur les maquettes.
   Le client l’a fait retirer : la barre ne contient plus que le logo et le menu.
   (Les appels à l’action de fin de page, eux, restent.) */

/* Bouton hamburger (mobile) — pictogrammes de la charte */
.ideal-burger{
  display: none; flex: none; margin-left: auto;
  background: none; border: 0; padding: .4rem; cursor: pointer; line-height: 0;
}
.ideal-burger img{ width: 26px; height: auto; }
.ideal-burger .ico-fermer{ display: none; }
.ideal-burger[aria-expanded="true"] .ico-menu{ display: none; }
.ideal-burger[aria-expanded="true"] .ico-fermer{ display: block; }

/* ─────────────────────────── Bannières de page ─────────────────────────── */

.ideal-hero{
  position: relative; min-height: 660px;
  display: flex; align-items: center;
  /* Le retrait haut doit dégager le médaillon, qui plonge de ~58 px sous la barre :
     sinon le titre vient buter dessus. */
  padding: calc(var(--entete) + 5.5rem) 0 3.4rem;
  overflow: hidden;
}
/* HISTORIQUE — la photo occupait TOUTE la largeur, la moitié gauche disparaissant sous
   un dégradé. Gâchis : sur un écran de 1920 px elle était étirée à 1920 (×2,65 en
   densité 2) alors que le fichier ne fait que 1448 px de large — d’où un rendu flou.
   On ne l’étale donc plus que sur la partie DROITE, celle qu’on voit réellement, ce
   qui divise d’autant la largeur demandée. C’est aussi le cadrage de la maquette. */
.ideal-hero-fond{
  position: absolute; top: 0; right: 0; bottom: 0; left: auto;
  width: 68%; z-index: 0;
}
.ideal-hero-fond img{ width: 100%; height: 100%; object-fit: cover; }

/* Le dégradé part maintenant du bord GAUCHE de la photo et s’éteint avant son milieu :
   aucune couture visible avec le fond de page, et le cliché reste en pleine lumière. */
.ideal-hero-fond::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      var(--fond-page) 0%,
      rgba(10,10,12,.88) 12%,
      rgba(10,10,12,.42) 30%,
      rgba(10,10,12,0)   52%),
    linear-gradient(180deg, rgba(10,10,12,.75) 0%, rgba(10,10,12,0) 22%);
}
.ideal-hero .ideal-conteneur{ position: relative; z-index: 1; }
.ideal-hero-texte{ max-width: 560px; }

/* Le titre de la maquette occupe ~6 vw et ses deux lignes sont très serrées. */
.ideal-hero h1{
  font-size: clamp(3rem, 6.2vw, 5.6rem);
  line-height: .92;
  letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.ideal-hero h1 .ligne2{ display: block; color: var(--rose); font-weight: 500; }
.ideal-hero .sous-titre{
  font-size: clamp(.82rem, 1.45vw, 1.08rem); font-weight: 400;
  letter-spacing: .19em; text-transform: uppercase; color: var(--blanc);
  margin: 0 0 1.1rem;
}
.ideal-hero .ideal-script{ display: flex; align-items: center; gap: .8rem; margin: 0 0 .2rem; }
.ideal-hero .ideal-script img{ width: 30px; }
.ideal-hero .trait-script{
  width: 230px; height: 1px; margin-bottom: 1.7rem;
  background: linear-gradient(90deg, var(--rose), rgba(255,0,122,.05));
}
.ideal-hero .accroche{ color: #d8d3da; max-width: 42ch; margin: 0 0 1.9rem; font-size: 1rem; }
.ideal-hero-actions{ display: flex; flex-wrap: wrap; gap: .8rem; }

/* Variante compacte pour les pages intérieures */
.ideal-hero.est-page{ min-height: 480px; }
.ideal-hero.est-page h1{ font-size: clamp(2.3rem, 4.8vw, 4rem); }

/* Repères sous la bannière (Ouvert 7j/7, Discrétion…) */
.ideal-hero-reperes{
  display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.2rem;
}
.ideal-hero-reperes li{ display: flex; align-items: center; gap: .7rem; list-style: none; }
.ideal-hero-reperes img{ width: 26px; }
.ideal-hero-reperes strong{ display: block; color: var(--rose); font-size: .82rem; font-weight: 600; }
.ideal-hero-reperes span{ color: var(--gris); font-size: .78rem; }
.ideal-hero-reperes ul{ display: contents; margin: 0; padding: 0; }

/* ─────────────────────────── Blocs & cartes ─────────────────────────── */

.ideal-section{ padding: 4.6rem 0; }
.ideal-section.est-serree{ padding: 2.6rem 0; }

.ideal-panneau{
  background: var(--fond-carte);
  border: 1px solid var(--trait-discret);
  border-radius: var(--rayon);
  overflow: hidden;
}

/* Bandeau de réassurance : colonnes séparées par un filet (maquette accueil) */
.ideal-atouts{
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--fond-carte);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 2.6rem 1rem 2.4rem;
}
/* Chaque colonne est une pile : icône (hauteur fixe) / titre / texte. Sans ça, une
   icône plus basse que sa voisine décale tout le bloc et la rangée part en escalier. */
.ideal-atouts > li{
  list-style: none; text-align: center; padding: 0 1.1rem; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.ideal-atouts > li + li::before{
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px;
  background: var(--trait-discret);
}
/* Icônes nettement plus grandes que dans ma 1re version : sur la maquette elles font
   ~6 % de la largeur de page et portent visuellement tout le bandeau. */
.ideal-atouts img{
  width: auto; max-width: 60px; height: 58px; object-fit: contain;
  margin: 0 auto 1.1rem;
}
.ideal-atouts h3{
  font-family: var(--font-corps); font-size: .95rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .55rem;
}
.ideal-atouts p{ margin: 0; color: var(--gris); font-size: .8rem; line-height: 1.65; }

/* Bloc 2 colonnes texte + photo. Sur la maquette la photo occupe environ DEUX TIERS
   du panneau — c’est elle qui porte le bloc, pas le texte. */
.ideal-duo{
  display: grid; grid-template-columns: .58fr 1fr; gap: 0;
  align-items: stretch;
}
.ideal-duo-texte{ padding: 2.8rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.ideal-duo-texte h2{ font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; }
.ideal-duo-texte h2 .accent{ display: block; color: var(--rose); }
.ideal-duo-texte .trait{ width: 54px; height: 2px; background: var(--rose); margin: 1.1rem 0 1.4rem; }
.ideal-duo-texte p{ color: var(--gris); margin: 0 0 1rem; font-size: .93rem; }
.ideal-duo-texte .ideal-btn{ align-self: flex-start; margin-top: .8rem; }
.ideal-duo-photo{ position: relative; min-height: 380px; }
.ideal-duo-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fondu sur le bord intérieur : la photo se raccorde au texte au lieu de le heurter. */
.ideal-duo-photo::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--fond-carte) 0%, rgba(18,18,21,0) 22%);
}
.ideal-duo.est-inverse .ideal-duo-texte{ order: 2; }
.ideal-duo.est-inverse .ideal-duo-photo::after{
  background: linear-gradient(270deg, var(--fond-carte) 0%, rgba(18,18,21,0) 22%);
}

/* Grand panneau qui enveloppe une grille de cartes (maquette « Nos espaces ») : le
   titre de section vient chevaucher son bord haut, d’où la marge négative. */
.ideal-panneau-grille{
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: rgba(255, 255, 255, .012);
  padding: 1.5rem;
}

/* Grille de cartes (espaces, valeurs…) */
.ideal-grille{ display: grid; gap: 1.4rem; }
.ideal-grille.col-2{ grid-template-columns: repeat(2, 1fr); }
.ideal-grille.col-3{ grid-template-columns: repeat(3, 1fr); }
.ideal-grille.col-4{ grid-template-columns: repeat(4, 1fr); }
.ideal-grille.col-5{ grid-template-columns: repeat(5, 1fr); }
.ideal-grille.col-6{ grid-template-columns: repeat(6, 1fr); }

.ideal-carte{
  background: var(--fond-carte);
  border: 1px solid var(--trait-discret);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ideal-carte:hover{
  transform: translateY(-5px);
  border-color: var(--trait);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
/* Sur la maquette la photo est INCRUSTÉE dans la carte avec une marge tout autour,
   pas collée aux bords : c’est ce liseré sombre qui donne l’effet « cadre ». */
.ideal-carte-photo{
  aspect-ratio: 4 / 3; overflow: hidden;
  margin: 10px 10px 0; border-radius: 8px;
}
.ideal-carte-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ideal-carte:hover .ideal-carte-photo img{ transform: scale(1.06); }
.ideal-carte-corps{ padding: 1.1rem 1.1rem 1.4rem; text-align: center; }
.ideal-carte-corps h3{
  font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem;
  font-family: var(--font-corps); font-weight: 500;
  padding-bottom: .6rem; position: relative;
}
/* Court filet rose sous le titre de carte (maquette « Nos espaces »). */
.ideal-carte-corps h3::after{
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 38px; height: 1px; background: var(--rose);
}
.ideal-carte-corps p{ margin: 0; color: var(--gris); font-size: .82rem; line-height: 1.65; }

/* Carte « icône » (espaces du club, esprit de la maison) */
.ideal-carte-ico{ text-align: center; padding: 2rem 1.2rem; }
.ideal-carte-ico img{ margin: 0 auto 1rem; width: 46px; }
.ideal-carte-ico h3{ font-size: 1.05rem; margin-bottom: .55rem; }
.ideal-carte-ico p{ margin: 0; color: var(--gris); font-size: .82rem; }

/* Bandeau citation avec fumée décorative */
.ideal-devise{
  position: relative; overflow: hidden;
  border: 1px solid var(--trait-discret); border-radius: var(--rayon);
  background: var(--fond-carte);
  padding: 3rem 1.5rem; text-align: center;
}
/* 240 px = la définition exacte de la découpe. Au-delà elle serait agrandie, donc
   floue : la fumée n’est pas vectorisée (un dégradé ne se retrace pas au trait). */
.ideal-devise .fumee{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 240px; opacity: .55; pointer-events: none;
}
.ideal-devise .fumee.gauche{ left: -30px; }
.ideal-devise .fumee.droite{ right: -30px; transform: translateY(-50%) scaleX(-1); }
/* Les trois mots sont en BLANC sur la maquette, seuls les cœurs sont roses. */
.ideal-devise-mots{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem;
  position: relative; z-index: 1;
  color: var(--blanc);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
}
.ideal-devise-mots img{ width: 20px; }
.ideal-devise .sous{
  position: relative; z-index: 1; margin: .9rem 0 0;
  color: var(--rose); font-size: .84rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
}

/* ─────────────────────────── Galerie ─────────────────────────── */

.ideal-galerie{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ideal-galerie a{
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--trait-discret);
}
.ideal-galerie img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.ideal-galerie a:hover img{ transform: scale(1.07); opacity: .85; }

/* ─────────────────────────── Galerie par pièce (page Le Club) ─────────────────────────── */

.ideal-galerie-intro{
  text-align: center; color: var(--gris); margin: -1.2rem 0 1.8rem; font-size: .88rem;
}

/* Sommaire : la galerie est longue, on doit pouvoir viser une pièce directement. */
.ideal-galerie-sommaire{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-bottom: 2.6rem;
}
.ideal-galerie-sommaire a{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 40px;
  border: 1px solid var(--trait-discret); color: var(--gris);
  font-size: .76rem; letter-spacing: .06em;
  transition: border-color .2s ease, color .2s ease;
}
.ideal-galerie-sommaire a:hover{ border-color: var(--rose); color: var(--rose); }
.ideal-galerie-sommaire a span{
  background: rgba(255, 0, 122, .16); color: var(--rose);
  border-radius: 20px; padding: .05rem .45rem; font-size: .68rem; font-weight: 600;
}

/* scroll-margin : sans lui, un saut depuis le sommaire glisse le titre de la pièce
   sous l'en-tête fixe. La marge dégage aussi le médaillon, qui déborde. */
.ideal-galerie-piece{ margin-bottom: 2.8rem; scroll-margin-top: calc(var(--entete) + 4.5rem); }
.ideal-galerie-piece h3{
  font-size: 1.15rem; letter-spacing: .06em; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .9rem;
}
.ideal-galerie-piece h3::after{
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,0,122,.45), transparent);
}

.ideal-galerie-grille{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .8rem; grid-auto-flow: dense;
}

/* La vignette est un <button> : ouvrir une visionneuse est une action, pas un lien —
   elle est donc au clavier et annoncée correctement d’office. */
.ideal-vignette{
  position: relative; display: block; padding: 0; margin: 0; cursor: pointer;
  background: var(--fond-carte); border: 1px solid var(--trait-discret);
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color .2s ease, transform .2s ease;
}
.ideal-vignette:hover{ border-color: var(--rose); transform: translateY(-3px); }
.ideal-vignette img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.ideal-vignette:hover img{ transform: scale(1.06); }

/* Les panoramiques prennent deux colonnes, les portraits deux rangées : à l’étroit
   dans une case carrée, elles ne montreraient qu’une tranche de la pièce. */
.ideal-vignette.est-pano{ grid-column: span 2; aspect-ratio: 2.4 / 1; }
.ideal-vignette.est-portrait{ aspect-ratio: 3 / 4; }

.ideal-vignette .legende{
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .7rem .6rem; text-align: left;
  font-family: var(--font-corps); font-size: .72rem; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.ideal-vignette:hover .legende,
.ideal-vignette:focus-visible .legende{ opacity: 1; transform: none; }

/* ─────────────────────────── Visionneuse ─────────────────────────── */

.ideal-visionneuse{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.5rem;
  background: rgba(6, 6, 8, .96); backdrop-filter: blur(6px);
}
.ideal-visionneuse[hidden]{ display: none; }
.ideal-visionneuse figure{ margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.ideal-visionneuse img{
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: 10px; border: 1px solid var(--trait);
}
.ideal-visionneuse figcaption{
  margin-top: .9rem; color: var(--gris); font-size: .84rem; letter-spacing: .04em;
}
.ideal-visionneuse button{
  flex: none; background: transparent; border: 1px solid var(--trait-discret);
  border-radius: 50%; width: 48px; height: 48px;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.ideal-visionneuse button:hover{ border-color: var(--rose); background: rgba(255,0,122,.1); }
.ideal-visionneuse button img{ width: 20px; border: 0; border-radius: 0; }
.ideal-visionneuse .fermer{ position: absolute; top: 1.2rem; right: 1.2rem; }

/* Ruban d’aperçu (bande horizontale de photos, maquette Le Club) */
.ideal-ruban{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ideal-ruban img{ width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ─────────────────────────── Grille des tarifs ─────────────────────────── */

.ideal-tarifs-cadre{
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-carte); overflow: hidden;
}
.ideal-tarifs{ width: 100%; border-collapse: collapse; font-size: .92rem; }
.ideal-tarifs th, .ideal-tarifs td{
  padding: .95rem .8rem; text-align: center;
  border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait);
}
.ideal-tarifs th:last-child, .ideal-tarifs td:last-child{ border-right: 0; }
.ideal-tarifs tr:last-child td{ border-bottom: 0; }

.ideal-tarifs thead th{
  font-family: var(--font-corps); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blanc);
  background: rgba(255, 255, 255, .03); padding: 1.1rem .8rem;
}
.ideal-tarifs thead th img{ margin: 0 auto .4rem; width: 22px; }

.ideal-tarifs .cel-jour{ text-align: left; min-width: 190px; }
.ideal-tarifs .cel-jour strong{
  display: block; color: var(--rose); font-size: .92rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.ideal-tarifs .cel-jour .ambiance{ display: block; color: var(--blanc); font-size: .78rem; }
.ideal-tarifs .cel-jour .creneau{
  display: flex; align-items: center; gap: .35rem;
  color: var(--gris-fonce); font-size: .74rem; margin-top: .2rem;
}
.ideal-tarifs .cel-jour .creneau img{ width: 12px; }

.ideal-tarifs td{ font-size: 1.05rem; font-weight: 500; }
.ideal-tarifs td.est-gratuit{ color: var(--rose); font-weight: 700; letter-spacing: .04em; }
.ideal-tarifs td.est-ferme{ color: var(--gris-fonce); }
/* L’affiche officielle code les colonnes par couleur, pas seulement les gratuités :
   « Trans / Trav » en bleu, « Femme seule » en rose, sur TOUTES leurs valeurs. */
.ideal-tarifs td.col-trans{ color: #6aa8ff; }
.ideal-tarifs td.col-femme{ color: var(--rose); }
.ideal-tarifs td.col-trans.est-ferme,
.ideal-tarifs td.col-femme.est-ferme{ color: var(--gris-fonce); }

.ideal-peignoir{
  display: inline-flex; align-items: center; gap: .8rem;
  margin: 2rem auto 0; padding: .8rem 1.6rem;
  border: 1px solid var(--trait); border-radius: 40px;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.ideal-peignoir img{ width: 24px; }
.ideal-peignoir .prix{
  background: var(--rose); color: #fff; border-radius: 30px;
  padding: .18rem .8rem; font-size: .95rem;
}
.ideal-mention{ text-align: center; color: var(--gris-fonce); font-size: .8rem; margin-top: 1rem; }

/* ─────────────────────────── Avis ─────────────────────────── */

.ideal-avis-vide{
  text-align: center; padding: 3rem 1.5rem;
  border: 1px dashed var(--trait); border-radius: var(--rayon); background: var(--fond-carte);
}
.ideal-avis-vide p{ color: var(--gris); max-width: 62ch; margin: 0 auto 1.4rem; }

.ideal-avis{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.ideal-avis article{
  background: var(--fond-carte); border: 1px solid var(--trait-discret);
  border-radius: var(--rayon); padding: 1.3rem 1.4rem; position: relative;
}
.ideal-avis .tete{ display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.ideal-avis .pastille{
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--trait); color: var(--rose);
  font-weight: 600; font-size: .82rem;
}
.ideal-avis .auteur{ color: var(--rose); font-weight: 600; font-size: .92rem; }
.ideal-avis .date{ color: var(--gris-fonce); font-size: .74rem; }
.ideal-avis .texte{ margin: 0; color: var(--gris); font-size: .85rem; }
.ideal-avis .reponse{
  margin-top: .9rem; padding: .8rem 1rem;
  border: 1px solid var(--trait); border-radius: 8px; background: rgba(255, 0, 122, .04);
}
.ideal-avis .reponse strong{ display: block; color: var(--rose); font-size: .74rem; margin-bottom: .3rem; }
.ideal-avis .reponse p{ margin: 0; color: var(--gris); font-size: .82rem; }

/* ─────────────────────────── Contact ─────────────────────────── */

.ideal-contact{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.4rem; align-items: start; }

/* .ideal-bloc = panneau titré générique ; .ideal-coord ajoute la liste de coordonnées.
   HISTORIQUE : les deux panneaux du bas (plan, aperçu photo) portaient .ideal-coord —
   du coup la règle des icônes rabotait AUSSI les photos de la galerie à 26 px. Les
   sélecteurs de la liste sont donc désormais ancrés sur « li ». */
.ideal-bloc, .ideal-coord{ padding: 2rem 1.8rem; }
.ideal-bloc h2, .ideal-coord h2, .ideal-form h2{
  font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rose);
  font-family: var(--font-corps); font-weight: 600; margin-bottom: .4rem;
}
.ideal-bloc .trait, .ideal-coord .trait, .ideal-form .trait{
  width: 54px; height: 2px; background: var(--rose); margin-bottom: 1.6rem;
}
.ideal-coord ul{ margin: 0; padding: 0; }
.ideal-coord li{ display: flex; gap: 1rem; list-style: none; margin-bottom: 1.4rem; }
.ideal-coord li img{ width: 40px; flex: none; margin-top: .15rem; }
.ideal-coord li strong{ display: block; color: var(--rose); font-size: .88rem; }
/* Chaque information sur sa ligne : sinon l’horaire et son lien se collent bout à bout. */
.ideal-coord li span{ display: block; color: var(--gris); font-size: .86rem; }
.ideal-coord li a{ color: var(--gris); font-size: .86rem; }
.ideal-coord li a:hover{ color: var(--rose); }
.ideal-coord li .precision{ color: var(--gris-fonce); font-size: .76rem; margin-top: .2rem; }
.ideal-coord li .precision a{ color: var(--rose); font-size: .76rem; }

.ideal-form{ padding: 2rem 1.8rem; }
.ideal-form .champs{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ideal-form .pleine{ grid-column: 1 / -1; }
.ideal-form input, .ideal-form textarea, .ideal-form select{
  width: 100%; padding: .9rem 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--trait-discret); border-radius: 8px;
  color: var(--blanc); font-family: var(--font-corps); font-size: .85rem;
}
.ideal-form input::placeholder, .ideal-form textarea::placeholder{
  color: var(--gris-fonce); letter-spacing: .1em; text-transform: uppercase; font-size: .74rem;
}
.ideal-form input:focus, .ideal-form textarea:focus{ outline: none; border-color: var(--rose); }
.ideal-form textarea{ min-height: 150px; resize: vertical; }
.ideal-form .confidentialite{
  display: flex; align-items: center; gap: .5rem;
  color: var(--gris-fonce); font-size: .76rem; margin: 1rem 0 1.2rem;
}
.ideal-form .confidentialite img{ width: 15px; }
.ideal-form .ideal-btn{ width: 100%; }
/* Piège à robots : invisible pour l’humain, rempli par les automates. */
.ideal-piege{ position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.ideal-alerte{
  padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.2rem; font-size: .85rem;
  border: 1px solid var(--trait); background: rgba(255, 0, 122, .06);
}
.ideal-alerte.est-ok{ border-color: rgba(120, 220, 150, .4); background: rgba(120, 220, 150, .07); }

.ideal-carte-plan{
  display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--trait-discret); position: relative;
  background: var(--fond-carte-alt);
}
.ideal-carte-plan iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }

/* ─────────────────────────── Règlement ─────────────────────────── */

.ideal-regles{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.ideal-regle{
  display: flex; gap: 1.1rem; padding: 1.4rem 1.5rem;
  background: var(--fond-carte); border: 1px solid var(--trait-discret); border-radius: var(--rayon);
}
.ideal-regle img{ width: 34px; flex: none; }
.ideal-regle h3{ font-size: 1rem; margin-bottom: .4rem; }
.ideal-regle p{ margin: 0; color: var(--gris); font-size: .85rem; }

.ideal-encart-important{
  display: flex; gap: 1.2rem; align-items: flex-start;
  border: 1px solid var(--rose); border-radius: var(--rayon);
  background: rgba(255, 0, 122, .06); padding: 1.6rem 1.8rem; margin-top: 2rem;
}
.ideal-encart-important img{ width: 40px; flex: none; }
.ideal-encart-important h3{ color: var(--rose); font-size: 1.05rem; margin-bottom: .5rem; }
.ideal-encart-important p{ margin: 0; color: var(--gris); }

/* ─────────────────────────── Appel final ─────────────────────────── */

.ideal-appel{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem; position: relative; overflow: hidden;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: linear-gradient(100deg, rgba(255, 0, 122, .14), rgba(122, 0, 255, .10));
  padding: 2.4rem 2.6rem;
}
/* 120 px : la palme decoupee de la planche fait 98 px de large, c'est tout ce que
   la charte contient. Au-dela elle serait agrandie, donc molle. */
.ideal-appel .palme{ position: absolute; left: -20px; bottom: -30px; width: 120px; opacity: .35; }
.ideal-appel-texte{ position: relative; z-index: 1; }
.ideal-appel h2{ font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .3rem; }
.ideal-appel p{ margin: 0; color: var(--rose); font-size: .88rem; }
.ideal-appel .actions{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ─────────────────────────── Pied de page ─────────────────────────── */

.ideal-pied{
  border-top: 1px solid var(--trait-discret);
  background: var(--fond-carte);
  margin-top: 3rem;
}
.ideal-pied-haut{
  display: grid; grid-template-columns: 1.5fr 1.1fr .9fr .9fr;
  gap: 2.4rem; padding: 3rem 0 2.4rem;
}
.ideal-pied h3{
  font-family: var(--font-corps); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rose);
  margin-bottom: 1.3rem;
}
.ideal-pied-marque{ display: flex; gap: 1.4rem; align-items: flex-start; }
.ideal-pied-marque img.logo{
  width: 116px; height: 116px; border-radius: 50%; background: #fff; flex: none;
}
.ideal-pied-marque p{ margin: 0; color: var(--gris); font-size: .84rem; }
.ideal-pied-marque .coeur{ width: 24px; margin-top: .9rem; }

.ideal-pied ul{ margin: 0; padding: 0; list-style: none; }
.ideal-pied-infos li{ display: flex; gap: .8rem; margin-bottom: 1.1rem; }
/* align-self : sans lui, l’icône s’étire sur toute la hauteur d’un bloc à 3 lignes
   (comportement par défaut d’un enfant de flex) et l’horloge devient un ovale. */
.ideal-pied-infos img{
  width: 20px; height: 20px; object-fit: contain;
  flex: none; align-self: flex-start; margin-top: .2rem;
}
.ideal-pied-infos span, .ideal-pied-infos a{ color: var(--gris); font-size: .84rem; }
.ideal-pied-infos a:hover{ color: var(--rose); }
.ideal-pied-infos .precision{ display: block; color: var(--gris-fonce); font-size: .74rem; font-style: italic; }

.ideal-pied-liens li{ margin-bottom: .55rem; }
.ideal-pied-liens a{
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--gris); font-size: .84rem;
}
.ideal-pied-liens a::before{ content: "›"; color: var(--rose); font-size: 1rem; line-height: 1; }
.ideal-pied-liens a:hover{ color: var(--rose); }

/* Les pastilles réseaux de la maquette sont franches : ~54 px, cerclées de rose. */
.ideal-reseaux{ display: flex; gap: .9rem; }
.ideal-reseaux a{
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rose); transition: transform .2s ease, box-shadow .2s ease;
}
.ideal-reseaux a:hover{ transform: translateY(-3px); box-shadow: var(--halo); }
.ideal-reseaux img{ width: 26px; }
/* Réseau sans pictogramme dans la charte (Wyylde) : on écrit le nom plutôt que d’inventer
   un logo. Pastille allongée, pour ne pas déformer les cercles des autres. */
.ideal-reseaux a.est-texte{
  width: auto; height: 40px; padding: 0 1.05rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose); align-self: center;
}

.ideal-pied-bas{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--trait-discret);
  color: var(--gris-fonce); font-size: .76rem;
}
.ideal-pied-bas nav{ display: flex; flex-wrap: wrap; gap: 1.6rem; }
.ideal-pied-bas .ideal-legal{
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin: 0; padding: 0; list-style: none;
}
.ideal-pied-bas a{ display: inline-flex; align-items: center; gap: .5rem; color: var(--gris-fonce); }
/* Chevron rose devant chaque mention, comme dans la barre basse de la maquette. */
.ideal-pied-bas a::before{ content: "›"; color: var(--rose); font-size: 1rem; line-height: 1; }
.ideal-pied-bas a:hover{ color: var(--rose); }
.ideal-pied-bas .mineurs{
  display: flex; align-items: center; gap: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris);
}
/* La pastille 18+ est une mention légale : elle doit se voir, pas se deviner. */
.ideal-pied-bas .mineurs img{ width: 34px; filter: brightness(1.5); }

/* ─────────────────────────── Bandeau cookies ─────────────────────────── */

.cn-cookie{
  position: fixed; inset: auto 0 0 0; z-index: 200;
  background: rgba(10, 10, 12, .97); border-top: 1px solid var(--trait);
  backdrop-filter: blur(10px);
}
.cn-cookie-in{
  max-width: var(--large); margin: 0 auto; padding: 1rem 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; justify-content: space-between;
}
.cn-cookie-txt{ margin: 0; color: var(--gris); font-size: .8rem; flex: 1 1 340px; }
.cn-cookie-btns{ display: flex; gap: .6rem; }
.cn-cookie-ok, .cn-cookie-ghost{
  font-family: var(--font-corps); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .65rem 1.2rem; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
}
.cn-cookie-ok{ background: var(--rose); color: #fff; }
.cn-cookie-ghost{ background: transparent; color: var(--gris); border-color: var(--trait-discret); }

/* ─────────────────────────── Apparition au défilement ─────────────────────────── */

/* Le masquage n'existe QUE si le JavaScript a posé .js-anim sur <html> (cf. header.php).
   Sans lui — script bloqué, erreur, robot d'indexation, mode lecture — les blocs
   restent visibles : une animation ne doit jamais pouvoir effacer le contenu. */
.js-anim .ideal-apparait{ opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .ideal-apparait.est-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .js-anim .ideal-apparait{ opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────── Contenu éditorial (page.php, article) ─────────────────────────── */

.ideal-contenu{ max-width: 760px; margin: 0 auto; }
.ideal-contenu h2{ font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.ideal-contenu h3{ font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
.ideal-contenu p, .ideal-contenu li{ color: var(--gris); }
.ideal-contenu ul, .ideal-contenu ol{ padding-left: 1.2rem; }
.ideal-contenu li{ margin-bottom: .5rem; }
.ideal-contenu a{ text-decoration: underline; text-underline-offset: 3px; }

.ideal-note-manquante{
  border: 1px dashed var(--trait); border-radius: 10px;
  background: rgba(255, 0, 122, .05); padding: 1.2rem 1.4rem; color: var(--gris);
  font-size: .86rem;
}

/* ─────────────────────────── Carte sans photo ───────────────────────────
   Le club n’a pas fourni de vue de la cabine sauna. Plutôt qu’une image
   d’ambiance trompeuse, la carte affiche l’icône de la charte sur un fond
   dégradé : ça reste dessiné, et ça n’affirme rien de faux. */
.ideal-carte-sans-photo{
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 0, 122, .16), transparent 65%),
    linear-gradient(160deg, #17171c, #0e0e11);
}
.ideal-carte-sans-photo img{ width: 62px; opacity: .95; }

/* ─────────────────────────── En-tête des pages secondaires ─────────────────────────── */

.ideal-entete-page{
  padding: calc(var(--entete) + 5.5rem) 0 2.6rem;
  text-align: center;
  border-bottom: 1px solid var(--trait-discret);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 0, 122, .12), transparent 60%),
    var(--fond-page);
}
.ideal-entete-page img{ width: 34px; margin: 0 auto 1rem; }
.ideal-entete-page h1{
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: .06em; text-transform: uppercase;
}
.ideal-entete-page p{ margin: .8rem 0 0; color: var(--gris); }

/* ─────────────────────────── Soirées ─────────────────────────── */

/* Carte « jour de la semaine » du programme */
.ideal-soiree{
  background: var(--fond-carte);
  border: 1px solid var(--trait-discret); border-radius: var(--rayon);
  padding: 1.4rem 1.3rem;
  transition: border-color .22s ease, transform .22s ease;
}
.ideal-soiree:hover{ border-color: var(--trait); transform: translateY(-4px); }
.ideal-soiree header{ margin-bottom: .6rem; }
.ideal-soiree .jour{
  display: block; color: var(--rose);
  font-family: var(--font-titre); font-size: 1.25rem; letter-spacing: .04em;
}
.ideal-soiree .ambiance{
  display: inline-block; margin-top: .25rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanc);
}
.ideal-soiree .creneau{
  display: flex; align-items: center; gap: .4rem;
  color: var(--gris-fonce); font-size: .78rem; margin: 0 0 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--trait-discret);
}
.ideal-soiree .creneau img{ width: 14px; }
.ideal-soiree .tarifs-jour{ margin: 0; padding: 0; list-style: none; }
.ideal-soiree .tarifs-jour li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .8rem; padding: .28rem 0;
}
.ideal-soiree .tarifs-jour span{ color: var(--gris); }
.ideal-soiree .tarifs-jour strong{ font-weight: 600; }
.ideal-soiree .tarifs-jour strong.est-gratuit{ color: var(--rose); }
.ideal-soiree .tarifs-jour strong.est-ferme{ color: var(--gris-fonce); }
.ideal-soiree .tarifs-jour strong.col-trans{ color: #6aa8ff; }
.ideal-soiree .tarifs-jour strong.col-trans.est-ferme{ color: var(--gris-fonce); }

/* ── Fiches de soirée : l’affiche à gauche, le texte à droite ──
   Format volontairement large et non pas en grille de vignettes : une soirée porte un
   nom, une date, un horaire et un texte. Serrée dans une carte carrée, elle devient
   illisible. C’est aussi ce que fait Wyylde, où le club publie déjà ses soirées. */
.ideal-soirees{ display: grid; gap: 1.2rem; }

.ideal-soiree-fiche{
  display: grid; grid-template-columns: 300px 1fr;
  background: var(--fond-carte);
  border: 1px solid var(--trait-discret); border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease;
}
.ideal-soiree-fiche:hover{ border-color: var(--trait); transform: translateY(-3px); }

.ideal-soiree-fiche .affiche{
  display: block; position: relative; overflow: hidden;
  background: var(--fond-carte-alt);
  aspect-ratio: 4 / 5;
}
.ideal-soiree-fiche .affiche img{
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
.ideal-soiree-fiche:hover .affiche img{ transform: scale(1.05); }
/* Pas d’affiche fournie : le lotus plutôt qu’un cadre vide. */
.ideal-soiree-fiche .sans-affiche{
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 0, 122, .16), transparent 65%),
    linear-gradient(160deg, #17171c, #0e0e11);
}
.ideal-soiree-fiche .sans-affiche img{ width: 74px; height: auto; }

.ideal-soiree-fiche .corps{ padding: 1.6rem 1.8rem; display: flex; flex-direction: column; }
.ideal-soiree-fiche h3{ font-size: 1.35rem; margin: 0 0 .7rem; line-height: 1.25; }
.ideal-soiree-fiche h3 a{ color: var(--blanc); }
.ideal-soiree-fiche h3 a:hover{ color: var(--rose); }

.ideal-soiree-fiche .quand{
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 .9rem; font-size: .85rem;
}
.ideal-soiree-fiche .quand img{ width: 17px; flex: none; margin-top: .2rem; }
.ideal-soiree-fiche .quand strong{ display: block; color: var(--rose); font-weight: 600; }
.ideal-soiree-fiche .quand em{ display: block; color: var(--gris); font-style: normal; font-size: .82rem; }
.ideal-soiree-fiche .quand .prochaine{
  display: inline-block; margin-top: .3rem;
  color: var(--gris-fonce); font-size: .76rem;
}
.ideal-soiree-fiche .texte{ color: var(--gris); font-size: .88rem; margin: 0 0 .6rem; }
.ideal-soiree-fiche .ideal-lien-suite{ margin-top: auto; align-self: flex-start; }

@media (max-width: 860px){
  .ideal-soiree-fiche{ grid-template-columns: 1fr; }
  .ideal-soiree-fiche .affiche{ aspect-ratio: 16 / 10; }
  .ideal-soiree-fiche .corps{ padding: 1.3rem 1.3rem 1.5rem; }
  .ideal-soiree-fiche h3{ font-size: 1.15rem; }
}

/* Étiquettes de la charte (Soirée à thème, Prochaine soirée, Nouveauté, Important) */
.ideal-badge{
  display: inline-block; margin-bottom: .7rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .38rem .9rem; border-radius: 5px; border: 1px solid transparent;
}
.ideal-badge.est-theme{ background: var(--rose); color: #fff; }
.ideal-badge.est-prochaine{ background: transparent; color: var(--blanc); border-color: var(--rose); }
.ideal-badge.est-nouveaute{ background: transparent; color: var(--or); border-color: var(--or); }
.ideal-badge.est-important{ background: var(--rose-fonce); color: #fff; }

.ideal-soiree-quand{
  display: flex; align-items: center; gap: .45rem;
  color: var(--rose); font-size: .8rem; margin: 0 0 .6rem;
}
.ideal-soiree-quand img{ width: 15px; }

.ideal-lien-suite{
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .8rem; font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.ideal-lien-suite::after{ content: "›"; font-size: 1.05rem; line-height: 1; }

/* Le lotus d’en-tête seulement : sans le « > », cette règle écrasait aussi la taille
   des icônes des boutons placés dans ce bloc (le téléphone y passait à 64 px). */
.ideal-avis-vide > img{ width: 64px; margin: 0 auto 1.4rem; }

/* ─────────────────────────── Pagination ─────────────────────────── */

.ideal-pagination{ margin-top: 2.4rem; text-align: center; }
.ideal-pagination .page-numbers{
  display: inline-grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 .6rem; margin: 0 .18rem;
  border: 1px solid var(--trait-discret); border-radius: 6px;
  color: var(--gris); font-size: .82rem;
}
.ideal-pagination .page-numbers:hover{ border-color: var(--rose); color: var(--rose); }
.ideal-pagination .page-numbers.current{ background: var(--rose); border-color: var(--rose); color: #fff; }
.ideal-pagination .screen-reader-text{ display: none; }

/* ═══════════════════════════ Adaptatif ═══════════════════════════ */

@media (max-width: 1080px){
  .ideal-nav{ display: none; }
  .ideal-burger{ display: block; }

  /* Menu déroulant plein écran.
     HISTORIQUE — c’était « inset: var(--entete) 0 0 0 ». Le panneau ne faisait alors que
     64 px de haut et les cinq liens débordaient hors du cadre. En cause : l’en-tête porte
     un backdrop-filter, et un filtre d’arrière-plan fait de l’élément le BLOC CONTENEUR de
     ses descendants en position fixed. Le « bottom: 0 » se calait donc sur le bas de la
     barre, pas sur celui de l’écran. On donne une hauteur explicite, qui ne dépend plus du
     bloc conteneur. dvh avant tout : sur mobile, la barre d’adresse ampute vh. */
  .ideal-nav.est-ouvert{
    display: block; position: fixed;
    top: var(--entete); left: 0; right: 0;
    height: calc(100vh - var(--entete));
    height: calc(100dvh - var(--entete));
    z-index: 99;
    background: rgba(10, 10, 12, .98); backdrop-filter: blur(16px);
    /* Retrait haut calé sur le médaillon : marge 12 px + logo 120 px = 132 px depuis le
       haut de l’écran ; le panneau commence à 64 px, il reste donc 68 px à dégager. */
    padding: 5.4rem 22px 2rem; overflow-y: auto;
    /* Le pouce doit pouvoir défiler jusqu’au dernier lien même sur un petit écran. */
    -webkit-overflow-scrolling: touch;
  }
  .ideal-nav.est-ouvert ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .ideal-nav.est-ouvert li{ border-bottom: 1px solid var(--trait-discret); }
  .ideal-nav.est-ouvert a{ display: block; padding: 1.1rem 0; font-size: .88rem; }
  .ideal-nav.est-ouvert a::after{ display: none; }

  .ideal-atouts{ grid-template-columns: repeat(3, 1fr); gap: 1.6rem 0; }
  .ideal-atouts > li:nth-child(3n+1)::before{ display: none; }
  .ideal-grille.col-5, .ideal-grille.col-6{ grid-template-columns: repeat(3, 1fr); }
  .ideal-contact{ grid-template-columns: 1fr; }
  .ideal-ruban{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px){
  /* En colonne unique, le texte passe SUR la photo : elle reprend toute la largeur et
     le voile redevient vertical. (Le fichier n’est jamais agrandi à ces largeurs-là.) */
  .ideal-hero-fond{ width: 100%; left: 0; }
  .ideal-hero-fond::after{
    background:
      linear-gradient(180deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.5) 42%, rgba(10,10,12,.94) 100%);
  }

  .ideal-duo{ grid-template-columns: 1fr; }
  .ideal-duo.est-inverse .ideal-duo-texte{ order: 0; }
  .ideal-duo-texte{ padding: 2.2rem 1.6rem; }
  .ideal-duo-photo{ min-height: 260px; order: -1; }
  .ideal-grille.col-4{ grid-template-columns: repeat(2, 1fr); }
  .ideal-avis, .ideal-regles{ grid-template-columns: 1fr; }
  .ideal-galerie-grille{ grid-template-columns: repeat(3, 1fr); }
  .ideal-pied-haut{ grid-template-columns: 1fr 1fr; }
  .ideal-galerie{ grid-template-columns: repeat(2, 1fr); }

  /* La grille des tarifs ne se casse pas : elle défile horizontalement. */
  .ideal-tarifs-cadre{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ideal-tarifs{ min-width: 640px; }
}

@media (max-width: 600px){
  :root{ --entete: 64px; }
  /* Même rapport qu’en grand écran : le médaillon déborde d’environ la moitié. */
  .ideal-logo{ margin-top: 9px; }
  .ideal-logo img{ width: 96px; height: 96px; }
  .ideal-entete.est-defile .ideal-logo{ margin-top: 7px; }
  .ideal-entete.est-defile .ideal-logo img{ width: 74px; height: 74px; }
  .ideal-section{ padding: 3rem 0; }
  .ideal-hero{ min-height: 560px; }
  .ideal-hero-actions .ideal-btn{ flex: 1 1 100%; }
  .ideal-atouts{ grid-template-columns: repeat(2, 1fr); }
  .ideal-atouts > li::before{ display: none; }
  .ideal-grille.col-3, .ideal-grille.col-4,
  .ideal-grille.col-5, .ideal-grille.col-6{ grid-template-columns: repeat(2, 1fr); }
  .ideal-pied-haut{ grid-template-columns: 1fr; }
  .ideal-form .champs{ grid-template-columns: 1fr; }
  .ideal-appel{ padding: 1.8rem 1.4rem; }
  .ideal-devise .fumee{ display: none; }
  .ideal-hero-reperes{ gap: 1.2rem; }
  .ideal-ruban{ grid-template-columns: repeat(2, 1fr); }

  .ideal-galerie-grille{ grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  /* En deux colonnes, un panoramique sur toute la largeur passe très bien. */
  .ideal-vignette.est-pano{ grid-column: span 2; }
  /* Sur un écran tactile il n’y a pas de survol : la légende reste visible. */
  .ideal-vignette .legende{ opacity: 1; transform: none; font-size: .66rem; }
  .ideal-galerie-sommaire a{ font-size: .7rem; padding: .45rem .8rem; }

  .ideal-visionneuse{ padding: .8rem; gap: .4rem; }
  .ideal-visionneuse button{ width: 40px; height: 40px; }
  .ideal-visionneuse img{ max-height: 68vh; }
}

/* Signature de l’agence, sous la barre des mentions. Discrète : c’est un crédit,
   pas un appel à l’action — il ne doit pas concurrencer les liens du client. */
.ideal-signature{
  margin: 0; padding: .9rem 0 1.4rem;
  border-top: 1px solid var(--trait-discret);
  text-align: center; color: var(--gris-fonce); font-size: .72rem; letter-spacing: .06em;
}
.ideal-signature a{ color: var(--gris); border-bottom: 1px solid var(--trait); }
.ideal-signature a:hover{ color: var(--rose); border-bottom-color: var(--rose); }

/* ─────────────────────────── Page d’une soirée ─────────────────────────── */

.ideal-soiree-detail{ display: grid; grid-template-columns: 420px 1fr; gap: 2.4rem; align-items: start; }
.ideal-soiree-detail .affiche{
  position: relative; border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--trait); background: var(--fond-carte-alt);
}
.ideal-soiree-detail .affiche img{ width: 100%; height: auto; display: block; }
.ideal-soiree-detail .sans-affiche{
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 0, 122, .16), transparent 65%),
    linear-gradient(160deg, #17171c, #0e0e11);
}
.ideal-soiree-detail .sans-affiche img{ width: 90px; }

.ideal-soiree-detail .reperes{ margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.ideal-soiree-detail .reperes li{ display: flex; gap: .9rem; margin-bottom: 1rem; }
.ideal-soiree-detail .reperes img{ width: 19px; height: 19px; flex: none; align-self: flex-start; margin-top: .2rem; }
.ideal-soiree-detail .reperes strong{ display: block; color: var(--rose); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.ideal-soiree-detail .reperes span{ color: var(--gris); font-size: .9rem; }
.ideal-soiree-detail .reperes em{ display: block; color: var(--gris-fonce); font-size: .8rem; font-style: normal; margin-top: .15rem; }

.ideal-soiree-detail .texte-soiree{ max-width: none; margin: 0 0 1.6rem; }
.ideal-soiree-detail .titre-tarifs{ font-size: 1.05rem; margin: 1.8rem 0 .8rem; }
.ideal-soiree-detail .tarifs-jour{ margin: 0; padding: 0; list-style: none; max-width: 380px; }
.ideal-soiree-detail .tarifs-jour li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .88rem; padding: .45rem 0; border-bottom: 1px solid var(--trait-discret);
}
.ideal-soiree-detail .tarifs-jour span{ color: var(--gris); }
.ideal-soiree-detail .tarifs-jour strong.est-gratuit{ color: var(--rose); }
.ideal-soiree-detail .tarifs-jour strong.est-ferme{ color: var(--gris-fonce); }
.ideal-soiree-detail .tarifs-jour strong.col-trans{ color: #6aa8ff; }
.ideal-soiree-detail .tarifs-jour strong.col-trans.est-ferme{ color: var(--gris-fonce); }

.ideal-soiree-detail .actions{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

@media (max-width: 860px){
  .ideal-soiree-detail{ grid-template-columns: 1fr; gap: 1.4rem; }
  .ideal-soiree-detail .actions .ideal-btn{ flex: 1 1 100%; }
}