/*
Theme Name: Kadence Child (Projet Pro)
Theme URI: https://kadence-theme.com/
Template: kadence
Author: Toi
Description: Thème enfant sur-mesure pour scalabilité maximale.
Version: 1.1.0
*/

/* Polices Newsreader + Inter (var(--disp)/var(--ui) ci-dessous) : chargées
   en <link> dédié via Assets::enqueue() (inc/Core/class-assets.php), pas
   via @import ici — un @import dans ce fichier retarde la découverte de la
   police par le navigateur jusqu'à ce que style.css soit entièrement
   téléchargé et parsé (gotcha réel du 17/09/2026, voir ARCHITECTURE.md). */

/* Ici on mettra ton CSS custom.
   Comme on est "Mobile First", le CSS de base ici concerne le MOBILE.
   On utilisera des @media (min-width: 768px) pour les tablettes/desktop.
*/
/* ============================================
   VARIABLES GLOBALES — charte graphique Belle Époque
   (_references/charte-belle-epoque.html, source de vérité)
   NE PAS AJOUTER de couleur hors de ce jeu de tokens.
   ============================================ */
:root {
  --bg:        #0A0D11;
  --bg-2:      #0D1117;
  --panel:     #0F1319;
  --ink:       #EAEDF0;
  --ink-2:     #9AA2AB;
  --ink-3:     #68707A;
  --ch-a:      #79818B;
  --ch-b:      #D3D9E0;
  --ch-c:      #F1F4F7;
  --ice:       #7EB4DB;
  --ice-2:     #B0D3EC;
  --mauve:     #AF8FC5;
  --line:      rgba(234,237,240,.09);
  --line-2:    rgba(234,237,240,.045);
  --glass:     rgba(10,13,17,.56);
  --disp:      'Newsreader', serif;
  --ui:        'Inter', sans-serif;
  --radius:    1px;

  /* ─── Kicker de section / H2 de section (charte §"Kicker de section" et
     §"H2 — titre de section", _references/charte-belle-epoque.html) —
     tokens partagés pour que TOUTE page qui affiche ce couple respecte
     exactement la même typo (repéré désynchronisé entre page-accueil.css
     et dream-machine.css le 17/09/2026 : chaque fichier redéfinissait ses
     propres valeurs en dur, dérive au fil des sessions). Ne jamais
     redéfinir ces valeurs en dur dans un fichier de page — référencer ces
     tokens à la place. */
  --kick-size:     .79rem;
  --kick-tracking: .2em;
  --kick-weight:   400;
  --kick-gap:      16px;   /* espace kicker → h2 */
  --h2-size:       clamp(1.95rem, 3.8vw, 3rem);
  --h2-tracking:   -.01em;
  --h2-weight:     300;
  --h2-line:       1.15;

  /* ─── Anciens tokens (Warm Editorial / Onyx métallique), conservés en
     alias le temps de reprendre chaque fichier qui les utilise encore
     (rental.css, woocommerce.css, dream-machine.css, pressotherapie.css,
     legal.css). Alias fidèles UNIQUEMENT pour les couleurs sombres/accent
     — --creme/--blanc/--texte (panneaux clairs + texte sombre de l'ancien
     système) ne sont PAS aliasés ici : le mapping mécanique casserait la
     lisibilité partout où un panneau clair existe encore. Chaque fichier
     sera repris individuellement pour adopter le système "panneau de verre
     sombre" de la charte plutôt que redéfinir ces 3 tokens à l'aveugle. */
  --noir:        var(--bg);
  --noir-doux:   var(--panel);
  --or:          var(--ice);
  --or-clair:    var(--ice-2);
}

* {
  box-sizing: border-box; font-family: var(--ui);
}
/* Lissage des polices — choix délibéré de NE PAS forcer antialiased.
   Gotcha réel (17/09/2026, voir ARCHITECTURE.md) : seule .be-home
   (page-accueil.css) posait -webkit-font-smoothing:antialiased, Dream
   Machine restait au rendu "auto" du navigateur — plus gras au même poids
   de police. Une fois homogénéisé sur antialiased partout, le rendu plus
   gras de Dream Machine a manqué → décision inverse actée : c'est ce
   rendu "auto" (par défaut, sans cette propriété) qui devient la
   référence pour tout le site. Ne pas réintroduire antialiased/grayscale
   ici ni sur une page individuelle sans validation explicite. */
/* ==================================================================================================================================
                                                             HOME PAGE
   ================================================================================================================================== */
/* ════════════════════════════════════════════
   ANIMATIONS GLOBALES
════════════════════════════════════════════ */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: none; }


/* ════════════════════════════════════════════
   NAVBAR — charte : bandeau verre + Newsreader (marque) + Inter (liens)
════════════════════════════════════════════ */
.site-header {
  position: fixed !important; top: 0; width: 100%; z-index: 100;
  padding: 0px 60px !important;
  background: rgba(10,13,17,.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
}
/* 🔴 Le header étant fixed (ci-dessus, ~81px de haut mesuré sur mobile
   comme sur desktop), tout contenu qui commence juste en dessous doit
   compenser cette hauteur, sinon il est caché derrière le bandeau. Les
   pages avec un gros hero (accueil, Dream Machine) compensent "par
   accident" grâce à leur propre padding généreux — mais les pages
   WooCommerce natives (panier, fiche produit, Mon compte, sans hero
   personnalisé) n'ont aucune compensation. Sur desktop l'espacement de
   contenu par défaut de Kadence (~112px mesuré) dépasse largement les 81px
   du header, ce qui masque le problème par coïncidence ; ce même
   espacement se réduit sur mobile (comportement responsive normal de
   Kadence, pensé pour un header qui n'est PAS fixed) et devient alors
   inférieur aux 81px du header fixe — d'où le contenu (texte, image, même
   l'emoji du panier vide) tronqué en haut, uniquement sur mobile, sur ces
   pages précises. */
@media (max-width: 767px) {
  body.woocommerce-page #main,
  body.woocommerce-account #main {
    padding-top: 100px !important;
  }
}
#masthead .site-branding, #masthead .custom-logo-link {
  font-family: var(--disp) !important;
  font-size: 1.15rem !important; font-weight: 400 !important;
  letter-spacing: 0.02em !important; text-transform: none !important;
  color: var(--ink) !important; text-decoration: none !important;
}
/* Le logo uploadé dans Réglages > Site Identity est le logo complet
   (icône + "Belle Époque" déjà écrit dans l'image, même fichier que
   assets/img/belle-epoque-logo-clair.png utilisé dans les emails) — le
   titre du site généré à côté par WordPress (.site-title) écrirait donc
   "Belle Époque" une 2e fois. Resté invisible tant que le champ Titre du
   site (Réglages > Général) était vide ; rempli le 15/09 pour corriger
   les objets de mail WooCommerce ({site_title} y apparaissait vide) — le
   texte du header a alors réapparu en double à côté du logo. Titre du
   site gardé rempli (nécessaire aux emails), affichage visuel coupé ici. */
#masthead .site-title {
  display: none !important;
}
#masthead .header-menu-container ul li a, #masthead nav ul li a {
  font-family: var(--ui) !important;
  color: var(--ink-3) !important; font-size: 0.78rem !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
  text-decoration: none !important; transition: color 0.2s !important;
}
#masthead .header-menu-container ul li a:hover, #masthead nav ul li a:hover {
  color: var(--ice-2) !important;
}
#masthead nav ul li.nav-cta a {
  font-family: var(--ui) !important;
  background: linear-gradient(118deg, var(--ch-b), var(--ch-c)) !important;
  color: #0A0D11 !important;
  padding: 10px 24px !important; font-weight: 600 !important;
  letter-spacing: normal !important;
}
#masthead nav ul li.nav-cta a:hover {
  filter: brightness(1.07);
  background: linear-gradient(118deg, var(--ch-b), var(--ch-c)) !important;
  color: #0A0D11 !important;
}
/*  ----------------- Anim logo --------------------- */
/* #masthead .site-title {
  position: relative !important;
  min-width: 120px !important;
  height: 1.4rem !important;
}

#masthead .site-title .logo-full,
#masthead .site-title .logo-short {
  position: absolute !important;
  left: 0; top: 0 !important;
  white-space: nowrap !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.4rem !important; font-weight: 600 !important;
  letter-spacing: 0.15em !important; text-transform: uppercase !important;
  color: var(--or) !important;
  will-change: opacity, transform;
}
#masthead .site-title .logo-short {
  opacity: 0;
  transform: translateX(20px);
} */
/*  ----------------- Anim logo --------------------- */

/* ════════════════════════════════════════════
   BOUTONS GLOBAUX — charte : .solid (chrome) / .ghost (contour)
════════════════════════════════════════════ */
.btn-primary {
  font-family: var(--ui) !important;
  background: linear-gradient(118deg, var(--ch-b), var(--ch-c)) !important;
  color: #0A0D11 !important;
  padding: 13px 26px !important; font-size: 0.9rem !important;
  font-weight: 600 !important; letter-spacing: normal !important;
  text-transform: none !important; border: none !important;
  text-decoration: none !important; border-radius: var(--radius) !important;
  position: relative !important; overflow: hidden !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: filter .25s !important;
}
.btn-primary:hover { filter: brightness(1.07) !important; }
.btn-primary::after { content: none !important; }

.btn-outline {
  font-family: var(--ui) !important;
  background: transparent !important; color: var(--ink) !important;
  padding: 13px 26px !important; font-size: 0.9rem !important;
  letter-spacing: normal !important; text-transform: none !important;
  border: 1px solid var(--line) !important; text-decoration: none !important;
  transition: border-color .25s, color .25s !important; border-radius: var(--radius) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.btn-outline:hover { border-color: var(--ice) !important; color: var(--ice-2) !important; }

/* ════════════════════════════════════════════════════════════
   "COMMENT ÇA MARCHE" — composant partagé accueil + Dream Machine
   (17/09/2026). Centralisé ici (pas dans page-accueil.css /
   dream-machine.css) : les deux pages affichent le même contenu, un
   composant CSS partagé évite qu'il redérive comme le kicker/H2 avant
   lui (voir ARCHITECTURE.md). Sélecteurs non préfixés (pas de nesting
   sous .be-home) : doivent s'appliquer identiquement sur les deux pages.
   ════════════════════════════════════════════════════════════ */
/* Aucun encadrement ni panneau "glass" (demande explicite du 17/09/2026,
   2e retour) — 3 colonnes nues, sans trait ni fond, comme la version
   d'origine de la page Dream Machine. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 32px; } }
/* !important nécessaire sur ce padding (et sur les margin de .stepnum/
   .stepn plus bas) : `.be-home *{margin:0;padding:0}` (page-accueil.css)
   a EXACTEMENT la même spécificité (0,1,0) qu'un sélecteur à une seule
   classe comme .step, et se charge après style.css dans le <head> — à
   spécificité égale, c'est la règle la plus tardive qui gagne. Ce reset
   ne s'applique qu'à l'intérieur de .be-home (donc uniquement sur
   l'accueil, jamais sur Dream Machine) : c'était la vraie cause de la
   différence entre les 2 pages malgré un CSS en apparence identique
   (17/09/2026, voir ARCHITECTURE.md). */
.step { padding: 34px 30px 34px 28px !important; position: relative; }
/* Trait lumineux reliant le centre du 1er cercle (colonne 1/3, donc à
   1/6 = 16.666% de la largeur totale) au centre du dernier (5/6 =
   83.333%) — recalculé en % (pas en px) parce que les cercles sont
   maintenant centrés dans leur colonne, pas calés à gauche. Masqué sous
   860px : les cartes s'empilent, un trait horizontal n'a plus de sens. */
.steps::before {
  content: ''; position: absolute; top: 53px; left: 47px; right: 47px; height: 1px; z-index: 0;
  background: rgba(126,180,219,.15);
}
/* Pulsation lumineuse qui parcourt lentement ce trait, de 01 vers 03, en
   boucle — la "progression" demandée, pas un simple dégradé statique. */
.steps::after {
  content: ''; position: absolute; top: 53px; left: 47px; width: 60px; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--ice-2), var(--ice), var(--ice-2), transparent);
  animation: steps-progress 6s ease-in-out infinite;
}
@media (max-width: 860px) { .steps::before, .steps::after { display: none; } }
/* Le chiffre, encerclé et lumineux, centré au-dessus de son libellé
   (CHOISISSEZ/EXPLOREZ/DÉCIDEZ) — remplace l'ancien point discret en
   coin de carte ET l'ancien format "01 — CHOISISSEZ" en un seul bloc. */
.stepnum {
  display: inline-flex; align-items: center; justify-content: center; margin: 0 0 16px !important;
  width: 38px; height: 38px; border-radius: 50%; position: relative; z-index: 1;
  border: 1px solid var(--ice); box-shadow: 0 0 14px -2px var(--ice), inset 0 0 10px -3px rgba(126,180,219,.5);
  font-family: var(--disp); font-size: .98rem; color: var(--ice-2); background: var(--bg);
}
.stepn { font-family: var(--disp); font-size: .88rem; color: var(--ice-2); letter-spacing: .14em; margin-bottom: 14px !important; text-align: left; }
@keyframes steps-progress {
  0%   { left: 47px; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: calc(100% - 107px); opacity: 0; } /* centre du 3e cercle (right:47px) moins la largeur du halo (60px) */
}
.step h3 { font-family: var(--disp); font-weight: 400; font-size: 1.4rem; margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: .91rem; font-weight: 300; }
/* Note qui suit la liste — reprend le style de .step p (paragraphe du
   dessus), plus un espacement au-dessus (demande explicite 18/09/2026 :
   avant en style .stepn/kicker, désormais alignée sur le paragraphe
   descriptif). !important sur margin : même gotcha .be-home * que les
   autres composants single-class ci-dessus. */
.step p.stepnote { margin: 14px 0 0 !important; font-size: 1rem !important; }
.step ul { list-style: none; margin-top: 14px; font-size: .82rem; color: var(--ink-3); }
.step li { margin-bottom: 6px; padding-left: 13px; position: relative; }
.step li::before { content: '·'; position: absolute; left: 0; color: var(--ch-a); }
/* Lien discret déclenchant la popup "À savoir" (pointillé plutôt que
   souligné plein, pour rester visuellement mineur dans la phrase). */
.dep-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  /* !important : .be-home a{color:inherit;text-decoration:none} (page-accueil.css)
     est plus spécifique (classe+élément) qu'un simple .dep-link (classe seule)
     et écrasait le pointillé, uniquement sur l'accueil — même famille de
     piège que .be-home * pour margin/padding, déjà documenté. */
  color: inherit !important;
  text-decoration: underline dotted !important; text-underline-offset: 3px; text-decoration-color: var(--ink-3); transition: .25s;
  -webkit-appearance: none; appearance: none; }
.dep-link:hover { color: var(--ice-2); text-decoration-color: var(--ice-2); }

/* [AJOUT 21/09/2026] Reset défensif du surlignage natif du navigateur sur
   tous les déclencheurs de popup — demande explicite : "pas de gros
   surlignage jaune au survol", un discret changement de couleur suffit.
   Le surlignage natif (tap-highlight mobile, outline focus par défaut,
   variable selon navigateur/OS) n'était piloté par aucune règle du site,
   d'où le besoin d'un reset explicite plutôt qu'une simple correction de
   couleur. S'applique à tous les triggers de popup existants et futurs. */
.dep-link, .js-certif-trigger, .dm-hw-star, .rental-offer-popup-trigger {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
  outline: none;
}
.dep-link:active, .js-certif-trigger:active, .dm-hw-star:active, .rental-offer-popup-trigger:active {
  background: none !important; color: var(--ice-2);
}
.dep-link:focus-visible, .js-certif-trigger:focus-visible, .dm-hw-star:focus-visible, .rental-offer-popup-trigger:focus-visible {
  outline: 1px solid rgba(126,180,219,.4);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════
   TAG PILIER — partagé accueil (carte collection) + Dream Machine
   (pilier du hero), 17/09/2026. Icône qui brille + pilier principal
   (bleu intense) + piliers "se combine avec" (bleu doux), pour
   comprendre la combinaison en un coup d'œil.
   !important sur margin : gotcha .be-home * à spécificité égale,
   voir ARCHITECTURE.md (17/09/2026). ════════════════════════════════════════════════════════════ */
.tag { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: .74rem; letter-spacing: .1em; margin: 0 0 9px !important; }
.tag-icon { width: 16px; height: 16px; color: var(--ice); filter: drop-shadow(0 0 5px var(--ice)); flex-shrink: 0; }
.tag-icon svg { width: 100%; height: 100%; display: block; }
.tag-main { color: var(--ice); font-weight: 600; text-transform: uppercase; }
.tag-soft { color: var(--ice-2); opacity: .68; text-transform: uppercase; }
.tag-sep { color: var(--ink-3); }

/* Séparateur lumineux fin — vertical par défaut (aligné dans un flex/grid
   avec align-self:stretch), horizontal sous 900px. Partagé entre
   plusieurs cartes/panneaux sur l'accueil et Dream Machine. */
.idiv { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--ice-2) 20%, var(--ice-2) 80%, transparent); opacity: .35; }
@media (max-width: 900px) { .idiv { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--ice-2) 20%, var(--ice-2) 80%, transparent); } }

/* Petit tag lumineux (mot-clé mis en valeur) — partagé accueil (.imeta)
   + Dream Machine (.dm-hero-tags). !important sur padding : même gotcha
   .be-home * que .tag ci-dessus. */
.kwtag {
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ice-2);
  border: 1px solid rgba(126,180,219,.55); background: rgba(126,180,219,.08); border-radius: 8px;
  box-shadow: 0 0 16px -3px rgba(126,180,219,.65); padding: 5px 10px !important; display: inline-block;
  width: 128px; text-align: center;
}

/* ════════════════════════════════════════════════════════════
   MODALE "À SAVOIR" — composant partagé, repris de la page Dream
   Machine (classes .dm-modal-* conservées telles quelles : renommer
   n'apportait rien et aurait cassé la traçabilité avec l'historique du
   fichier). Un déclencheur/id différent par page (chacune sa propre
   petite IIFE JS), mais un seul CSS pour les deux.
   ════════════════════════════════════════════════════════════ */
/* [MODIFIÉ 21/09/2026] "align-items:center" + contenu plus haut que
   l'écran (texte long de la décharge Dream Machine, notamment sur
   mobile) rend le haut de la popup (titre + croix de fermeture)
   inaccessible : le centrage flexbox déborde des deux côtés sans qu'un
   simple overflow:auto sur ce conteneur suffise à faire défiler jusqu'au
   début du contenu débordant — gotcha CSS connu du centrage flex avec
   overflow. "align-items:flex-start" + overflow-y:auto corrige : la
   popup part toujours du haut (jamais coupée) et défile normalement si
   son contenu dépasse la hauteur d'écran. */
.dm-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10,13,17,.72); z-index: 100;
  align-items: flex-start; justify-content: center; padding: 20px; backdrop-filter: blur(4px);
  overflow-y: auto;
}
.dm-modal-overlay.open { display: flex; }
.dm-modal { background: var(--bg-2) !important; padding: 30px; max-width: 440px; width: 100%; position: relative; }
.dm-modal-close {
  position: absolute; top: 14px; right: 16px; font-size: 16px; cursor: pointer; transition: color .2s;
  color: var(--ink-3) !important; background: none !important; border: none !important; box-shadow: none !important;
}
.dm-modal-close:hover { color: var(--ice-2) !important; }
.dm-modal-title { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 400; color: var(--ink); font-size: 1.05rem; margin-bottom: 16px; }
.dm-modal-title svg { color: var(--ice); }
.dm-modal p { font-family: var(--ui); font-size: .88rem; color: var(--ink-2); font-weight: 300; line-height: 1.65; margin: 0 0 12px; }
.dm-modal-line { display: flex; gap: 8px; font-family: var(--ui); font-size: .84rem; color: var(--ink-2); font-weight: 300; margin-bottom: 10px; line-height: 1.55; }
.dm-modal-line span:first-child { color: var(--ice-2); flex-shrink: 0; }
.dm-link { font: inherit; font-size: .84rem; color: var(--ice-2); border: none; border-bottom: 1px solid transparent; background: none; padding: 0; cursor: pointer; display: inline-block; transition: border-color .25s; text-decoration: none; }
.dm-link:hover { border-color: var(--ice-2); }