/* Styles personnalisés du thème — les tokens (couleurs, typo, espacements, ombres)
   et la mise en page (contentSize/wideSize) viennent de theme.json + tokens.css.
   Composants portés depuis le thème classique en production
   (Ben-classic-theme-blue/style.css) : neo-brutalisme (angles vifs, ombres
   décalées), bandeau défilant, cartes de service/offre, FAQ native, calendrier de RDV. */

/* Reset : FSE ne pose PAS box-sizing:border-box globalement — sans lui, un
   élément width:100% + padding déborde de son conteneur. */
*, *::before, *::after { box-sizing: border-box; }

/* Reset : la source classique retire le soulignement par défaut des liens
   (chaque contexte gère son propre soulignement via bordure/::after). */
a { text-decoration: none; }

img { max-width: 100%; height: auto; }

/* ==========================================================================
   CONTAINER FLUIDE — le thème source n'utilise PAS de max-width fixe façon WP
   (contentSize) : padding croissant par breakpoint, largeur 100% sinon.
   Appliqué via className="container" sur les groupes qui en ont besoin.
   --gutter est la gouttière commune : le header et le footer s'en servent aussi
   pour aligner le chrome sur les sections (ils gèrent leur padding vertical).
   ========================================================================== */
:root { --gutter: 1.5rem; }
@media (min-width: 768px)  { :root { --gutter: 5vw; } }
@media (min-width: 1200px) { :root { --gutter: 8vw; } }
/* max-width:none et pas 100% : sur une section alignfull, 100% se résout sur la
   boîte de contenu du parent (hors padding racine) et rognait la section de la
   largeur de ce padding, la laissant collée à gauche au lieu d'être pleine largeur.
   Le padding racine de theme.json est à 0 : la gouttière vient d'ici, et d'ici seul.
   Longhands horizontaux et JAMAIS le shorthand `padding` : le doublon
   `.container.has-global-padding` (0,2,0) sert à battre le cœur sur la gouttière,
   mais en shorthand il remettait aussi le padding VERTICAL à 0 — le héro perdait son
   padding-bottom, et le chat, ancré dessus par une marge négative, tombait de 80 px
   dans le bandeau. */
.container,
.container.has-global-padding {
  max-width: none;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Sur-titre (eyebrow) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: uppercase;
  font-size: var(--type-eyebrow-size);
  color: var(--neon-cyan-ink);
  margin: 0 0 1rem;
}
.eyebrow.on-dark { color: rgba(255, 255, 255, 0.85); }

/* Liste sans puces (footer, listes de liens) */
.list-plain { list-style: none; padding-left: 0; margin-left: 0; }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }

/* Pas d'écart entre les wp-blocs de premier niveau (en-tête/contenu/pied de
   page, et les sections dans le contenu) : WP applique par défaut un
   block-gap global (margin-block-start:24px) entre eux, via .wp-site-blocks
   et .wp-block-post-content (toutes deux en layout constrained/flow).
   On le neutralise partout, sur toutes les pages, pour que les sections se
   touchent (ex : héro → bandeau, bas de page → pied de page).
   (Le block-gap reste piloté par theme.json → styles.spacing.blockGap, et
   continue de s'appliquer normalement aux blocs imbriqués.) */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > * { margin-block-start: 0; }

.site-header {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 14px var(--gutter);
}
/* Le header est un groupe FSE en layout « flow » : le cœur pose margin-block-start:24px
   sur chacun de ses enfants sauf le premier. En flex, cette marge décale la nav vers le
   bas — son centre tombait 12px sous celui du wordmark (mesuré : 59,5 vs 47,5). Passer
   par .wp-block-group (0,2,0) : à une seule classe, la règle du cœur, servie après
   main.css en local et AVANT en prod (LiteSpeed), gagnerait dans un cas sur deux. */
.wp-block-group.site-header > * { margin-block: 0; }

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.wordmark a { color: inherit; }
/* Header seulement — le footer réutilise .wordmark, chat en moins. Y passer le lien en
   flex ferait de « Ben », « . » et « Dev » trois items séparés par le gap : le nom
   s'écrirait « Ben . Dev ». Le flex sert ici à aligner le chat sur le nom ; sur le <p>,
   il évite que la line-box du paragraphe (plus courte que le lien de 44px) ne laisse
   12px de place à descendeurs sous lui et ne décentre le contenu dans sa propre boîte. */
.site-header .wordmark { display: flex; align-items: center; line-height: 1; }
.site-header .wordmark a { display: inline-flex; align-items: center; gap: 0.5rem; }
.wordmark-dot { color: var(--accent-500); }
/* La mascotte est dessinée tournée vers la gauche (comme dans le héro) : on la
   retourne pour qu'elle regarde le nom, à sa droite. flex-shrink pour qu'elle ne
   soit pas comprimée par le flex du lien. */
.wordmark-cat {
  flex-shrink: 0;
  transform: scaleX(-1);
  color: var(--text-heading);
  shape-rendering: crispEdges;
}
@media (max-width: 900px) { .wordmark-cat { width: 36px; height: 36px; } }

.nav-cta {
  background: var(--neutral-900) !important;
  color: var(--neutral-0) !important;
  padding: 0.6rem 1.25rem !important;
  font-size: var(--text-sm) !important;
}
.nav-cta:hover { background: var(--accent-500) !important; }

/* Navigation desktop + méga-menu (CSS pur, :hover/:focus-within — pas de JS) */
.nav-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: 28px; position: relative; }
.nav-item { position: relative; display: inline-flex; }
.nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0;
  cursor: pointer;
}
.nav-link:hover { color: var(--accent-500); }
.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  background: var(--neutral-0);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 30;
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu a {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-body);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mega-menu a:hover { background: var(--surface-alt); color: var(--text-heading); }
.mega-menu a span { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }

/* Burger + panneau mobile (checkbox hack, sans JS) */
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--neutral-900); transition: transform var(--transition-base), opacity var(--transition-base); }
.mobile-nav { display: none; flex-basis: 100%; border-top: 1px solid var(--border-soft); padding: 1.25rem 0 0.75rem; }
.mobile-nav-group { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 1.25rem 0 0.5rem; }
.mobile-nav-group:first-child { margin-top: 0; }
/* Le libellé de groupe est aussi le lien du hub (/services/, /offres/) : sans ça,
   les deux pages hub sont injoignables depuis le menu mobile. */
.mobile-nav-group a { color: inherit; text-decoration: none; }
.mobile-nav-group a:hover { color: var(--accent-500); }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.mobile-nav ul a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); color: var(--text-body); border-bottom: 1px solid var(--neutral-100); }
.mobile-nav ul a span { color: var(--text-muted); font-size: var(--text-xs); }
.mobile-nav .wp-block-button { display: block; margin: 1.25rem 0 0.5rem; }
.mobile-nav .wp-block-button__link { display: block; text-align: center; }
@media (max-width: 860px) {
  .site-header { padding: 12px var(--gutter); }
  .site-nav { display: none; }
  .burger { display: flex; }
  .nav-toggle:checked ~ .mobile-nav { display: block; }
  .nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  --hero-pb: clamp(3rem, 6vw, 5rem);
  position: relative;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: var(--hero-pb);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 78% 28%, rgba(43, 228, 255, 0.14) 0%, transparent 52%),
    radial-gradient(circle at 12% 80%, rgba(43, 228, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3rem; align-items: center; position: relative; }
.hero h1 .accent { color: var(--accent-500); }
.hero-lede { max-width: 56ch; color: var(--text-body); }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.reassurance { color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; }
.hero-image { display: flex; justify-content: center; align-items: center; }

/* Le chat est POSÉ sur le bandeau : sa boîte descend jusqu'au bord bas du héro,
   la marge négative annulant le padding de celui-ci. Sans cet ancrage il était
   centré dans sa cellule et son écart au bandeau ne dépendait que du nombre de
   lignes du titre : 175px à 1024, 32px à 1440, et -12px à 1920 (donc coupé).
   Deux contraintes dans ce sélecteur, aucune n'est décorative :
   — `:has(> .cat)` : sur /a-propos/ la même cellule porte une PHOTO, qui doit
     garder le padding du héro sous elle ;
   — passer par `.hero-grid` : à une seule classe, la marge se ferait écraser par
     la règle de mise en page du cœur, servie après main.css
     (:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }). */
.hero-grid > .hero-image:has(> .cat) {
  align-items: flex-end;
  align-self: end;
  margin-bottom: calc(-1 * var(--hero-pb));
}

/* Chat pixel-art animé (yeux qui clignent) — porté depuis Ben-classic-theme-blue/assets/css/main.css.
   width:135% : la colonne image (0.7fr) est trop étroite pour les 540px du chat en
   desktop ; comme dans la maquette, il déborde donc de sa cellule (c'est max-width
   qui fixe sa taille réelle, jamais la colonne). 135 % et pas 150 % : au-delà, le
   débordement dépasse la gouttière entre 900 et 1200px et l'overflow:hidden du héro
   rogne le bout de la queue. Le viewBox du SVG couvre bien les 15 unités du dessin :
   boîte CSS = dessin, sans quoi plus rien n'est alignable. */
.cat {
  width: 135%;
  max-width: 540px;
  flex-shrink: 0;          /* sinon le flex parent le recomprime à la largeur de la colonne */
  height: auto;
  aspect-ratio: 1 / 1;
  color: var(--text-heading);
  shape-rendering: crispEdges;
  overflow: visible;
}
.cat .eyes { opacity: 0; }
.cat.a-blink .eyes { animation: catBlink 3.4s ease-in-out infinite; }
@keyframes catBlink {
  0%, 90%, 100% { opacity: 0; }
  93%, 97%      { opacity: 1; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hero-ctas { justify-content: center; }
  .hero-lede { margin-left: auto; margin-right: auto; }

  .cat { max-width: 360px; }
}

/* ==========================================================================
   MARQUEE — bandeau défilant CSS pur, contenu structurellement dupliqué (×2)
   pour la boucle infinie : pas de valeur d'édition en blocs, cf. CLAUDE.md.
   ========================================================================== */
/* Fond NOIR, pas l'accent : dans la maquette le bandeau est la seule bande sombre
   entre le héro clair et les services clairs — c'est lui qui pose la respiration.
   La variante `.marquee.is-light` existe plus bas mais n'est pas utilisée ici. */
.marquee {
  background-color: var(--neutral-900);
  color: var(--neutral-0);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.25rem 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0;
}
.marquee-track { display: flex; gap: 3rem; white-space: nowrap; animation: marqueeScroll 40s linear infinite; width: max-content; }
.marquee-item { display: inline-flex; align-items: center; gap: 3rem; }
.marquee-item::after { content: '✦'; color: rgba(255, 255, 255, 0.6); margin-left: 3rem; }
/* Séparateurs néon + glow : le bandeau est sur fond noir, c'est le seul endroit du
   haut de page où le néon PUR est autorisé. Les variantes encre (sans glow) sont
   plus bas, sur `.marquee.is-light`. */
.marquee-item:nth-child(4n+1)::after { color: var(--neon-cyan);   text-shadow: 0 0 10px var(--neon-cyan); }
.marquee-item:nth-child(4n+2)::after { color: var(--neon-yellow); text-shadow: 0 0 10px var(--neon-yellow); }
.marquee-item:nth-child(4n+3)::after { color: var(--neon-coral);  text-shadow: 0 0 10px var(--neon-coral); }
.marquee-item:nth-child(4n)::after   { color: var(--neon-lime);   text-shadow: 0 0 10px var(--neon-lime); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 1.5rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .cat * { animation: none !important; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
/* Le bloc Requête rend les posts dans un <ul class="wp-block-post-template"> :
   c'est LUI qu'il faut mettre en grille, pas le wp-block-query englobant
   (qui n'a que ce <ul> comme unique enfant direct). */
.services-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* margin-block-start:0 : neutralise le block-gap WP (margin-block-start:24px
   sur les items non-:first-child d'un is-layout-flow) qui décale les cartes
   suivantes vers le bas dans leur cellule de grille — l'espacement entre
   cartes est déjà géré par le "gap" ci-dessus, dans les deux axes. */
.services-grid .wp-block-post-template > li { list-style: none; margin-block-start: 0; }
/* Cartes de même hauteur dans une query loop : la grille étire le <li>, mais la carte
   posée DEDANS garde la hauteur de son contenu — les fonds et bordures se terminaient
   donc à trois hauteurs différentes (508 / 493 / 466 px sur l'accueil). Le <li> passe en
   flex pour que la carte remplisse sa cellule. Inutile sur les grilles statiques des
   autres pages : la carte y est l'item de grille, donc déjà étirée. */
.services-grid .wp-block-post-template > li,
.pricing-grid .wp-block-post-template > li { display: flex; }
.services-grid .wp-block-post-template > li > *,
.pricing-grid .wp-block-post-template > li > * { flex: 1; }
.service-card {
  background: var(--surface-card);
  border: 2px solid var(--neutral-900);
  padding: 2.5rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
}
.service-card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-offset-accent); }
.service-card-number {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-500);
  letter-spacing: 0.1em;
  margin: 0;
}
.service-card .wp-block-post-title { font-size: var(--text-xl); margin-bottom: 0; }
.service-card .wp-block-post-content > p { margin-bottom: 1.5rem; }
.service-card .wp-block-post-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.65rem;
}
.service-card .wp-block-post-content li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.5;
}
.service-card .wp-block-post-content li::before { content: '\2192'; position: absolute; left: 0; top: 0; color: var(--accent-500); font-weight: 700; }
.service-card .wp-block-buttons { margin-top: auto; }
.service-card .card-link { align-self: flex-start; }

/* Lien "carte" — service, offre, abonnement, routing (bloc bouton stylé en lien texte,
   pour pouvoir binder son attribut "url" — un lien brut dans un paragraphe n'a pas
   d'attribut bindable). */
.card-link .wp-block-button__link,
a.card-link {
  display: inline-block;
  background: transparent;
  color: var(--neutral-900);
  border: none;
  border-bottom: 2px solid var(--neutral-900);
  border-radius: 0;
  padding: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
}
/* Survol des liens "carte" : texte au noir (déjà la couleur au repos, donc
   inchangé), soulignement adouci en gris — au lieu d'un accent coloré. Sur
   bande sombre (.inv-dark), même logique inversée : texte blanc, gris clair —
   piloté par --link-hover-ink/--link-hover-muted, flippées par .inv-dark
   ci-dessous. Règle valable pour tout le site (voir .abo-row plus bas pour un
   lien qui n'est PAS dans une carte claire). Les cartes claires posées sur une
   bande sombre (.service-card, .pricing-card, .audela-card) réinitialisent ces
   deux variables au noir/gris : voir leurs surcharges .inv-dark plus bas. */
.card-link .wp-block-button__link:hover,
a.card-link:hover {
  color: var(--link-hover-ink, var(--neutral-900));
  border-color: var(--link-hover-muted, var(--text-muted));
}

/* ==========================================================================
   HELLO / À PROPOS (fond bleu plein écran)
   ========================================================================== */
.hello-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
/* La colonne (1fr) est plus large que la photo/les boutons ne doivent l'être :
   on les contraint à une largeur raisonnable et on les centre dans leur moitié. */
.hello-media { max-width: 300px; margin: 0 auto; }
/* Même cadre que .apropos-hero-img (bague sombre + ombre décalée accent),
   à l'échelle d'une photo plus petite : l'ancienne bague blanche 20 % était
   pensée pour un fond sombre et devenait invisible depuis le passage de
   cette bande en clair (voir "Hello : bande redevenue CLAIRE" plus bas). */
.profile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  border: 3px solid var(--neutral-900);
  box-shadow: 6px 6px 0 var(--accent-500);
  display: block;
}
.profile-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Pas d'opacité sur le texte : à 0,85 il tombait à 3,95:1 sur le fond accent
   (échec WCAG AA) ; en blanc pur il passe à 4,92:1. */
.hello-meta {
  margin-top: 1rem;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 900px) {
  .hello-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hello-container .profile-img { max-width: 260px; margin: 0 auto; }
}

/* ==========================================================================
   OFFRES (packs) — cartes prix
   ========================================================================== */
.pricing-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-grid .wp-block-post-template > li { list-style: none; margin-block-start: 0; }
.pricing-card {
  background: var(--surface-card);
  border: 2px solid var(--border-soft);
  padding: 2rem 1.5rem;
  transition: all var(--transition-base);
  position: relative;
}
.pricing-card:hover { border-color: var(--neutral-900); transform: translateY(-4px); }
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-500);
  color: var(--neutral-0);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  margin: 0;
}
.pricing-badge:empty { display: none; }
.pricing-card:has(.pricing-badge:not(:empty)) { border-color: var(--accent-500); background: var(--surface-alt); }
.pricing-emoji { font-size: 1.9rem; line-height: 1; margin: 0 0 0.85rem; }
.pricing-card .wp-block-post-title { font-size: var(--text-lg); margin-bottom: 0.5rem; }
.pricing-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent-600); letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.pricing-target { font-size: var(--text-sm); color: var(--text-body); margin: 0 0 1.5rem; }
.pricing-footnote { text-align: center; font-size: var(--text-sm); color: var(--text-muted); }

/* ==========================================================================
   AU-DELÀ — offres hors périmètre (e-commerce, existant)
   ========================================================================== */
.audela-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); max-width: 980px; margin: 0 auto; }
.audela-card { background: var(--surface-card); border: 1px solid var(--border-soft); padding: 2rem; transition: all var(--transition-base); }
.audela-card:hover { border-color: var(--neutral-900); box-shadow: var(--shadow-sm); }
.audela-icon { font-size: 1.75rem; line-height: 1; margin: 0 0 1.25rem; }
.audela-card h3 { font-size: var(--text-xl); margin: 0 0 0.75rem; }
.audela-card p { color: var(--text-body); margin: 0 0 1.25rem; }
@media (max-width: 780px) { .audela-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

/* ==========================================================================
   ABONNEMENTS (bande sombre)
   ========================================================================== */
.abo-list .wp-block-post-template {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.abo-list .wp-block-post-template > li { list-style: none; }
.abo-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.abo-row:last-child { border-bottom: none; }
.abo-emoji { font-size: 1.75rem; line-height: 1; margin: 0; }
.abo-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}
.abo-info .wp-block-post-title { order: 1; font-size: var(--text-lg); margin: 0; color: var(--neutral-0); }
.abo-info .wp-block-post-content { order: 3; flex-basis: 100%; }
.abo-row .wp-block-post-content p { margin: 0.25rem 0 0; opacity: 0.85; font-size: var(--text-sm); }
.abo-badge {
  order: 2;
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-0);
  background: var(--accent-500);
  padding: 0.15rem 0.5rem;
  margin: 0;
}
.abo-badge:empty { display: none; }
.abo-price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--neutral-0); margin: 0; text-align: right; }
/* Pas de surcharge de couleur sur les liens des lignes d'abonnement : la bande
   est CLAIRE (.abo-wrap.is-light), donc la règle générique .card-link (noir au
   repos, noir + soulignement gris au survol) convient telle quelle — et elle
   suivra automatiquement si la bande repasse un jour en .inv-dark.
   Historique : ces liens forçaient --text-accent-on-dark (cyan néon #2BE4FF),
   hérité de l'époque où la bande était sombre. Sur le fond blanc actuel ça
   tombait à 1,54:1 de contraste, donc illisible. */

@media (max-width: 640px) {
  .abo-row { grid-template-columns: 1fr; text-align: center; gap: 0.5rem; }
  .abo-price { text-align: center; }
}

/* ==========================================================================
   FAQ — bloc natif core/details
   ========================================================================== */
.wp-block-details {
  border-bottom: 1px solid var(--border-soft);
  padding: 1.5rem 0;
}
.wp-block-details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary:hover { color: var(--accent-500); }
.wp-block-details > summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-500);
  flex-shrink: 0;
  transition: transform var(--transition-base);
  line-height: 1;
}
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 1rem; color: var(--text-body); line-height: 1.7; }

/* ==========================================================================
   BOUTONS — variantes sur fond sombre (section Hello)
   ========================================================================== */
.btn-full { width: 100%; }
.btn-full .wp-block-button__link { width: 100%; text-align: center; justify-content: center; }
.is-style-on-dark .wp-block-button__link {
  background-color: var(--neutral-0);
  color: var(--accent-500);
  border: 2px solid var(--neutral-0);
  border-radius: 0;
}
.is-style-on-dark .wp-block-button__link:hover { background-color: transparent; color: var(--neutral-0); }
.is-style-ghost-on-dark .wp-block-button__link {
  background-color: transparent;
  color: var(--neutral-0);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
}
.is-style-ghost-on-dark .wp-block-button__link:hover { background-color: var(--neutral-0); color: var(--accent-500); border-color: var(--neutral-0); }

/* Bouton par défaut (primaire, noir) : effet de survol — soulèvement + ombre,
   comme la source classique (.btn-primary:hover). */
.wp-block-button:not(.is-style-outline):not(.is-style-on-dark):not(.is-style-ghost-on-dark):not(.card-link) > .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   CONTACT / RDV (dégradé bleu nuit → noir)
   ========================================================================== */
.rdv-wrap { background: linear-gradient(120deg, #06222A 0%, #0A0A0A 58%); }
/* La colonne du calendrier est PLAFONNÉE (et non `1fr`) : à 1fr le widget faisait
   565 px de large sur 1440 px, donc des cases de jour de 74 px (elles sont carrées)
   et une boîte de 600 px de haut aux trois quarts vide. Le texte prend la place
   rendue. */
.rdv-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 3.5rem; align-items: start; }
.contact-block-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--neutral-0); margin: 1.5rem 0 0.85rem; }
.contact-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.contact-checklist li { position: relative; padding-left: 1.75rem; color: rgba(255, 255, 255, 0.85); font-size: var(--text-base); }
.contact-checklist li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--accent-500); font-weight: 700; }
.contact-checklist.is-after li::before { color: #22C55E; }
/* Le WIDGET lui-même (.rdv-widget, .cal-*, .rdv-facade*) est habillé par l'extension
   « Ben.Dev — Rendez-vous » (bendev-rdv/assets/css/calendrier.css), chargée AVANT cette
   feuille : le thème n'a donc qu'à surcharger ce qui relève de SON identité, sans monter
   en spécificité. Le socle du plugin lit ses couleurs dans des variables --rdv-*, qui
   retombent d'elles-mêmes sur les tokens du thème (--accent-500, --neon-cyan…) : la carte
   sort déjà aux bonnes couleurs, filet noir de 2 px compris, sans rien redéclarer ici. */
/* Sur bande sombre, un filet noir se fond dans le fond : il passe au cyan néon, avec
   le halo réservé aux fonds sombres — même traitement que la carte tarif « populaire ». */
.rdv-wrap:not(.is-light) .rdv-widget {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 30px rgba(43, 228, 255, 0.22);
}
@media (max-width: 900px) {
  /* Le widget garde son plafond de 400 px, centré : plein écran, ses cases carrées
     redeviendraient énormes sur une tablette. */
  .rdv-container { grid-template-columns: 1fr; gap: 2.5rem; }
  .rdv-widget { max-width: 400px; width: 100%; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer .wp-block-columns { gap: 3rem; }
.site-footer .wordmark { color: var(--text-heading); }
.footer-tagline {
  color: var(--text-body);
  margin: 1rem 0 0;
  max-width: 280px;
}
/* Sans ça, la couleur de lien du thème (accent) peint tout le footer en bleu :
   la source ne met l'accent qu'au survol. */
.site-footer .list-plain a { color: var(--text-body); }
.site-footer .list-plain a:hover { color: var(--accent-500); }
.site-footer .footer-social a { color: var(--text-heading); }
.footer-col-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
/* Rangée d'icônes : le flex venait du bloc wp:group ; la rangée est passée en
   wp:html (SVG inline des logos), il est donc porté ici. */
.footer-social { display: flex; flex-wrap: nowrap; gap: 10px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-soft);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
}
.footer-social a:hover { background: var(--neutral-900); color: var(--neutral-0); border-color: var(--neutral-900); }

/* ==========================================================================
   PORTAGE GROUPE A — pages hub (À propos, Services, Offres, Contact)
   Composants portés depuis Ben-classic-theme-blue (style.css + assets/css/main.css),
   tokens adaptés : --brand-blue→--accent-500, --base-black→--neutral-900,
   --base-white→--neutral-0, --gray-*→--neutral-*/--border-soft, --transition→--transition-base.
   ========================================================================== */

/* Boutons « classiques » — utilisés DANS les blocs wp:html (tableau comparatif,
   bouton d'envoi du formulaire), là où wp:button natif n'est pas disponible.
   Les blocs wp:button natifs restent stylés via theme.json + les règles plus haut. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.btn-primary { background-color: var(--neutral-900); color: var(--neutral-0); border-color: var(--neutral-900); }
.btn-primary:hover { background-color: var(--accent-500); border-color: var(--accent-500); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-outline { background-color: transparent; color: var(--neutral-900); border-color: var(--neutral-900); }
.btn-outline:hover { background-color: var(--neutral-900); color: var(--neutral-0); transform: translateY(-2px); }

/* Utilitaires */
.text-center { text-align: center; }
/* Réassurance en spans distincts (héros à propos / contact) */
.reassurance span { display: inline-block; margin-right: 1rem; }

/* Héro centré (pages hub : services, offres) */
.hero-content--center { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-content--center .hero-lede { margin-left: auto; margin-right: auto; }

/* En-tête de section (eyebrow + titre + chapô, centré) */
.services-header { max-width: 700px; margin: 0 auto 4rem; text-align: center; }
.services-header h2 { margin-bottom: 1rem; }
/* :not(.eyebrow) — sans ça cette règle (0,1,1) bat `.eyebrow` (0,1,0) et repeint
   l'eyebrow en gris de corps de texte au lieu de l'encre cyan du design. */
.services-header p:not(.eyebrow) { color: var(--text-body); }

/* ---- Grilles de cartes en contenu STATIQUE (pages hub) --------------------
   Le rendu via CPT passe par .wp-block-post-template (voir sections SERVICES /
   OFFRES plus haut) ; ici les cartes sont enfants directs de la grille. */
.services-grid:not(:has(> .wp-block-post-template)),
.pricing-grid:not(:has(> .wp-block-post-template)) {
  display: grid;
  gap: var(--grid-gap);
}
.services-grid:not(:has(> .wp-block-post-template)) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pricing-grid:not(:has(> .wp-block-post-template)) { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* Tablette & mobile : une colonne, cartes étirées sur toute la largeur de la
   gouttière. L'auto-fit laissait sinon 2 colonnes à 768px, donc une 3e carte
   orpheline à mi-largeur collée à gauche ; et sous 400px la piste minimale
   (280px) était plus large que le conteneur, qui débordait alors à droite.
   Vaut pour les deux rendus, CPT (.wp-block-post-template) et statique. */
@media (max-width: 900px) {
  .services-grid .wp-block-post-template,
  .pricing-grid .wp-block-post-template,
  .services-grid:not(:has(> .wp-block-post-template)),
  .pricing-grid:not(:has(> .wp-block-post-template)) {
    grid-template-columns: 1fr;
  }
}
/* Neutralise le block-gap WP (margin-block-start) sur les items de grille. */
.services-grid > *, .pricing-grid > * { margin-block-start: 0; }
/* Carte service en statique (titre/paragraphe/liste natifs, pas de post-content). */
.service-card > .wp-block-heading { font-size: var(--text-xl); margin-bottom: 0; }
.service-card > p:not(.service-card-number) { color: var(--text-body); margin-bottom: 1.5rem; }
.service-card .wp-block-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.service-card .wp-block-list li { position: relative; padding-left: 1.6rem; font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }
.service-card .wp-block-list li::before { content: '\2192'; position: absolute; left: 0; top: 0; color: var(--accent-500); font-weight: 700; }

/* Cartes tarifs : nom (statique), variante « featured », cartes entièrement cliquables. */
.pricing-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0 0 0.5rem; }
.pricing-card.featured { border-color: var(--accent-500); background: var(--surface-alt); }
.pricing-card.featured::before {
  content: 'POPULAIRE';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-500);
  color: var(--neutral-0);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem;
}
a.pricing-card { display: block; text-decoration: none; color: inherit; }
/* Bloc tarif resserré (2 cartes centrées) — sections « Tarif » des pages packs. */
.pricing-grid--narrow { max-width: 800px; margin-left: auto; margin-right: auto; }

/* ---- Aiguillage (routing-panel) : cartes-liens vers pages dédiées ---------- */
.routing-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.routing-card {
  display: block;
  background: var(--surface-card);
  border: 2px solid var(--border-soft);
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-base);
}
.routing-card:hover { border-color: var(--neutral-900); transform: translateY(-4px); }
.routing-card .routing-emoji { font-size: 1.75rem; }
.routing-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0.5rem 0 0.4rem; }
.routing-card p { font-size: var(--text-sm); color: var(--text-body); margin: 0; }
.routing-card .routing-link { display: inline-block; margin-top: 0.75rem; font-weight: 600; color: var(--accent-500); }

/* ---- Tableau comparatif des packs (offres) -------------------------------- */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem;
  border: 2px solid var(--border-soft);
}
table.compare {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--surface-card);
  font-size: var(--text-sm);
}
table.compare th, table.compare td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.compare thead th { font-family: var(--font-display); font-size: var(--text-base); border-bottom: 2px solid var(--neutral-900); background: var(--surface-alt); }
table.compare thead th.is-featured { background: var(--accent-500); color: var(--neutral-0); }
table.compare th[scope="row"] { font-weight: 600; color: var(--text-body); white-space: nowrap; }
table.compare td:not(:first-child) { text-align: center; }
table.compare .compare-price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--accent-500); }
table.compare tbody tr:last-child td, table.compare tbody tr:last-child th { border-bottom: none; }
table.compare .yes { color: var(--accent-500); font-weight: 700; }
table.compare .no { color: var(--neutral-300); }
.compare-hint { display: none; text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 1rem; }
@media (max-width: 760px) { .compare-hint { display: block; } }

/* ---- Section humanisante (À propos, formulaire Contact) — fond accent ------
   .hello-section utilise le preset de fond « accent » (bleu, cf. --surface-hero) ;
   texte blanc via has-white-color. .hello-container (1fr 1fr) est défini plus haut. */
.hello-section { position: relative; overflow: hidden; }
.hello-section .hello-container { position: relative; }
/* Séparateur vertical central entre profil et contenu (pas en mode formulaire). */
.hello-section .hello-container:not(.hello-container--form)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.hello-container--form { grid-template-columns: 1fr 1.2fr; align-items: start; }
.hello-profile { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 320px; margin: 0 auto; }
.hello-content h2 { margin-bottom: 1.5rem; }
.hello-content p { opacity: 0.95; }
.skills-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; }
.skill-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; }
.skill-tags li { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; padding: 0.35rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); }
@media (max-width: 900px) {
  .hello-section .hello-container:not(.hello-container--form)::after { display: none; }
  .hello-container--form { grid-template-columns: 1fr; }
}

/* ---- Frise verticale du parcours (À propos) — blocs natifs ----------------- */
.timeline { position: relative; max-width: 760px; margin: 3rem auto 0; padding: 0; }
.timeline > * { margin-block-start: 0; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border-soft); }
.timeline-item { position: relative; padding: 0 0 2.5rem 2.75rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-500);
  border: 4px solid var(--surface-page);
  box-shadow: 0 0 0 2px var(--accent-500);
}
.timeline-date { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-500); margin: 0; }
.timeline-item h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0.35rem 0 0.5rem; }
.timeline-item p { color: var(--text-body); margin: 0; }
.wp-block-buttons.timeline-cta { justify-content: center; max-width: 760px; margin: 2.5rem auto 0; }

/* Image héro « À propos » (ronde, ombre décalée) — la classe est sur la <figure>. */
.apropos-hero-img { max-width: 320px; margin: 0 auto; }
.apropos-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--neutral-900);
  box-shadow: 8px 8px 0 var(--accent-500);
}
@media (max-width: 640px) { .apropos-hero-img { max-width: 240px; } }

/* ---- Champs de formulaire (page Contact + formulaire du calendrier) ---------
   Les deux formulaires partagent ces règles : le calendrier de prise de RDV pose les
   mêmes .form-field / .form-rgpd, il hérite donc du même habillage. */
.contact-form-card { background: var(--surface-card); color: var(--text-heading); padding: 2.5rem 2rem; }
.contact-form-card .form-field,
.cal-form .form-field { margin-bottom: 1.25rem; }
.contact-form-card label,
.cal-form label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea,
.cal-form input,
.cal-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border-soft);
  font-family: inherit;
  font-size: 1rem;
  background: var(--surface-card);
  color: var(--text-heading);
}
.contact-form-card textarea,
.cal-form textarea { resize: vertical; }
/* Firefox rend les placeholders à opacity .54 : sans ce rappel, ils passeraient sous le
   contraste AA. Le gris est explicite pour qu'on ne les confonde pas avec une saisie. */
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder,
.cal-form input::placeholder,
.cal-form textarea::placeholder { color: var(--text-muted); opacity: 1; }
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus,
.cal-form input:focus,
.cal-form textarea:focus { outline: none; border-color: var(--accent-500); }
.contact-form-card .form-rgpd,
.cal-form .form-rgpd { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-body); }
.contact-form-card .form-rgpd input,
.cal-form .form-rgpd input { width: auto; margin-top: 0.3rem; flex-shrink: 0; }
.contact-form-card .form-rgpd label,
.cal-form .form-rgpd label { display: inline; font-family: var(--font-body); font-weight: 400; font-size: inherit; margin: 0; }
.contact-form-card .form-rgpd a,
.cal-form .form-rgpd a { color: var(--accent-500); text-decoration: underline; }
.contact-form-card .btn-full { width: 100%; }
/* Message de confirmation / erreur après envoi (bordure franche, néo-brutalisme). */
.form-notice { padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; font-weight: 600; font-size: 0.95rem; border: 2px solid; }
.form-notice--ok { color: #0F5132; border-color: #0F5132; background: rgba(34, 197, 94, 0.12); }
.form-notice--ko { color: #842029; border-color: #842029; background: rgba(220, 53, 69, 0.1); }

/* ---- Cartes « méthode / inclus » sur fond accent (pages service, groupe B) --
   Les .service-card placées dans une section .hello-section (fond bleu) : texte
   clair, bordure translucide. Remplace les styles inline du thème classique. */
.hello-section .service-card { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); }
.hello-section .service-card .service-card-number,
.hello-section .service-card .wp-block-heading { color: var(--neutral-0); }
.hello-section .service-card > p:not(.service-card-number) { color: rgba(255, 255, 255, 0.85); }
.hello-section .service-card:hover { box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.25); }

/* ---- Pages légales (mentions légales, politique de confidentialité) ---------
   Colonne de lecture étroite (820 px comme la maquette du thème classique) :
   ces pages sont rendues par singular.html, dont le .container laisse le texte
   s'étaler jusqu'à 1180 px — illisible pour du texte juridique au long cours.
   Largeur et marges posées à 2 composantes (`.legal.wp-block-group`) : le cœur
   sert `:root :where(.is-layout-constrained) > *` (max-width = contentSize,
   margin auto) à spécificité (0,1,0) — à égalité, c'est l'ordre des feuilles qui
   tranche, et LiteSpeed l'inverse en prod (le CSS du thème passe AVANT celui du
   cœur). Sans ces 2 composantes, la colonne repasserait à 1180 px, centrée,
   uniquement en production. */
.legal.wp-block-group { max-width: 820px; margin-inline: 0; color: var(--text-body); line-height: 1.8; }
.legal .wp-block-heading { margin: 2.5rem 0 1rem; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 1rem 0; padding-left: 1.5rem; list-style: disc; }
.legal li { margin-bottom: 0.5rem; }
.legal .legal-date { color: var(--text-muted); font-size: var(--text-sm); }

/* ==========================================================================
   BANDEAU COOKIES & PANNEAU DE PRÉFÉRENCES
   Markup : inc/cookies.php (wp_footer) — comportement : initCookies() (main.js)
   ========================================================================== */

/* Le bandeau est servi avec l'attribut `hidden`, que le JS retire s'il faut le
   montrer. Cette ligne n'est PAS redondante avec la feuille du navigateur : dès
   qu'une règle d'auteur pose un `display`, elle l'emporte sur le `[hidden]` de
   l'UA (même spécificité, feuille plus tardive) et le bandeau s'afficherait chez
   tout le monde, y compris chez qui vient de refuser. */
.cookie-bandeau[hidden] { display: none; }

.cookie-bandeau {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;                        /* au-dessus du header collant (z-index: 100) */
  padding: var(--space-md) var(--gutter);
  background: var(--surface-page);
  border-top: 2px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.cookie-bandeau-corps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.cookie-texte {
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-body);
}
.cookie-texte strong { color: var(--text-heading); }

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* « Accepter » et « Refuser » sont STRICTEMENT identiques — même taille, même
   graisse, mêmes couleurs, même distance au texte. C'est une exigence de la CNIL
   (refuser doit être aussi simple et aussi visible qu'accepter), pas une coquetterie :
   ne pas transformer l'un des deux en bouton plein ou en lien discret. */
.cookie-btn {
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--neutral-900);
  background: transparent;
  border: 2px solid var(--neutral-900);
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-base);
}
.cookie-btn:hover { background: var(--neutral-900); color: var(--neutral-0); }

.cookie-lien {
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-lien:hover { color: var(--accent-500); }

.cookie-panneau {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: var(--space-xl);
  overflow-y: auto;
  color: var(--text-body);
  background: var(--surface-page);
  border: 2px solid var(--border-strong);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.cookie-panneau::backdrop { background: rgba(10, 10, 10, 0.55); }
.cookie-panneau a { color: var(--accent-500); }
.cookie-panneau-titre {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-heading);
}
.cookie-panneau-intro { margin: 0 0 var(--space-lg); font-size: var(--text-sm); }

.cookie-categorie { padding: var(--space-md) 0; border-top: 1px solid var(--border-soft); }
.cookie-categorie-titre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-heading);
  cursor: pointer;
}
.cookie-categorie-titre input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent-500);
  cursor: pointer;
}
.cookie-categorie-titre input:disabled { cursor: default; }
.cookie-categorie-titre em { font-style: normal; font-weight: 400; font-size: var(--text-sm); color: var(--text-muted); }
.cookie-categorie p { margin: 0.5rem 0 0 1.9rem; font-size: var(--text-sm); line-height: 1.65; }
.cookie-categorie code { padding: 0.1em 0.35em; font-size: 0.9em; background: var(--surface-alt); }

.cookie-actions--panneau { padding-top: var(--space-lg); border-top: 1px solid var(--border-soft); }
.cookie-note { margin: var(--space-md) 0 0; font-size: var(--text-xs); }

@media (max-width: 900px) {
  .cookie-bandeau-corps { flex-direction: column; align-items: stretch; gap: var(--space-md); }
}
@media (max-width: 560px) {
  .cookie-panneau { padding: var(--space-lg) var(--space-md); }
  .cookie-btn { flex: 1 1 auto; }        /* les deux boutons se partagent la ligne… */
  .cookie-lien { flex-basis: 100%; }     /* …« Personnaliser » passe en dessous */
}

/* Cibles d'ancres : dégager la hauteur du header collant (73 px mesurés, + une
   respiration). Sans cette ligne, un lien vers #cookies — celui du pied de page,
   quand le JS n'a pas pris la main — dépose le titre de section SOUS le header,
   invisible. Vaut pour toutes les ancres du site (#tarifs, #rdv, #audela…), qui
   souffraient du même décalage. */
:target { scroll-margin-top: 96px; }

/* ==========================================================================
   BANDES CLAIRES / SOMBRES — refonte cyan + néons
   Portées de la maquette Claude Design « maquettes/accueil-desktop-clair.html ».
   L'accueil alterne désormais : héro CLAIR, bandeau CLAIR, puis services et
   tarifs SOMBRES, abonnements CLAIR, au-delà SOMBRE, hello CLAIR, FAQ SOMBRE,
   contact CLAIR. Les bandes sombres ne sont plus un aplat : elles portent la
   grille « tech » (--grid-line) de la maquette.

   Deux écarts ASSUMÉS par rapport à la maquette, à ne pas « corriger » :
   — la maquette fige `padding: … 5vw` sur chaque section ; ici la gouttière
     reste `var(--gutter)` (1,5rem → 5vw → 8vw), sans quoi les bandes cesseraient
     de s'aligner sur le header et le footer au-delà de 1200 px (cf. CLAUDE.md) ;
   — la maquette rend le chat en `.pixel-cat` centré à 360 px ; le thème garde
     `.cat`, ancré au bandeau. Le chat non ancré est précisément l'état mesuré
     comme cassé à 1920 px (débord de -12 px, queue coupée).
   ========================================================================== */

/* --- Bande sombre : fond noir + grille --------------------------------- */
.inv-dark {
  background-color: var(--neutral-900);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  color: var(--text-on-dark);
  --link-hover-ink: var(--neutral-0);
  --link-hover-muted: var(--text-muted-on-dark);
}
.inv-dark .wp-block-heading { color: var(--neutral-0); }
/* Volontairement à UNE classe (0,1,1) : les cartes, qui restent claires sur la bande
   sombre, doivent pouvoir la battre à (0,2,1) juste en dessous. Une version large du
   type `.inv-dark p:not(.eyebrow):not(…)` monte à (0,4,1) et repeint en blanc le
   texte À L'INTÉRIEUR des cartes blanches — illisible, et invisible au grep. */
.inv-dark p { color: rgba(255, 255, 255, 0.75); }
.inv-dark .eyebrow,
.inv-dark .eyebrow.on-dark { color: var(--neon-cyan); text-shadow: 0 0 14px rgba(43, 228, 255, 0.4); }

/* Les cartes restent claires sur la bande sombre : on rétablit leur texte. */
.inv-dark .service-card .wp-block-heading,
.inv-dark .audela-card .wp-block-heading,
.inv-dark .pricing-card .wp-block-heading { color: var(--text-heading); }
.inv-dark .service-card p,
.inv-dark .audela-card p,
.inv-dark .pricing-card p,
.inv-dark .service-features li { color: var(--text-body); }
/* Idem pour le survol des liens "carte" DANS ces cartes claires : elles restent
   claires, donc leur lien doit garder le survol noir/gris (pas le blanc de la
   bande) — sans quoi il devient invisible sur fond blanc.
   EXCEPTION : la carte tarif « populaire » est SOMBRE ; elle re-flippe ces deux
   variables plus bas (chercher `pricing-badge:not(:empty)`). */
.inv-dark .service-card,
.inv-dark .audela-card,
.inv-dark .pricing-card {
  --link-hover-ink: var(--neutral-900);
  --link-hover-muted: var(--text-muted);
}

/* --- Héro clair -------------------------------------------------------- */
.hero.is-light {
  background-color: var(--neutral-0);
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero.is-light::before {
  background-image:
    radial-gradient(circle at 78% 28%, rgba(43, 228, 255, 0.12) 0%, transparent 52%),
    radial-gradient(circle at 12% 80%, rgba(180, 245, 45, 0.08) 0%, transparent 50%);
}
.hero.is-light h1 { color: var(--text-heading); }
.hero.is-light h1 .accent { color: var(--neon-cyan-ink); }
.hero.is-light .hero-lede { color: var(--text-body); }
.hero.is-light .reassurance { color: var(--text-muted); }
.hero.is-light .reassurance .check { color: var(--neon-lime-ink); }
.hero.is-light .cat { color: var(--text-heading); }
/* Sur fond clair le fantôme « on dark » doit redevenir foncé. */
.hero.is-light .is-style-ghost-on-dark .wp-block-button__link { color: var(--neutral-900); border-color: var(--neutral-900); }
.hero.is-light .is-style-ghost-on-dark .wp-block-button__link:hover { color: var(--neon-cyan-ink); border-color: var(--neon-cyan-ink); }

/* --- Bandeau défilant clair -------------------------------------------- */
.marquee.is-light {
  background-color: var(--neutral-0);
  color: var(--text-heading);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
/* Séparateurs ✦ : encres (pas de glow sur fond clair). */
.marquee.is-light .marquee-item:nth-child(4n+1)::after { color: var(--neon-cyan-ink); text-shadow: none; }
.marquee.is-light .marquee-item:nth-child(4n+2)::after { color: var(--neon-yellow-ink); text-shadow: none; }
.marquee.is-light .marquee-item:nth-child(4n+3)::after { color: var(--neon-coral-ink); text-shadow: none; }
.marquee.is-light .marquee-item:nth-child(4n)::after { color: var(--neon-lime-ink); text-shadow: none; }

/* --- Bouton néon (nouveau style de la maquette) ------------------------- */
.is-style-neon .wp-block-button__link {
  background: var(--neon-cyan);
  color: var(--neutral-900);
  box-shadow: var(--glow-cyan);
}
.is-style-neon .wp-block-button__link:hover {
  background: var(--neutral-0);
  color: var(--neutral-900);
  box-shadow: 0 0 34px rgba(43, 228, 255, 0.6);
  transform: translateY(-2px);
}
/* Sur fond clair, le glow diffus devient une ombre portée franche. */
.is-light .is-style-neon .wp-block-button__link { box-shadow: 0 6px 16px rgba(43, 228, 255, 0.35); }
.is-light .is-style-neon .wp-block-button__link:hover { background: var(--neutral-900); color: var(--neon-cyan); }

/* --- Accents néon par carte (cyan / corail / lime) ---------------------- */
/* ⚠️ services, tarifs et abonnements sont des BOUCLES DE REQUÊTE : chaque carte est
   fille UNIQUE de son <li>, donc `.service-card:nth-child(n)` matche toujours 1 et
   colore les trois cartes à l'identique. Le rang se lit sur le <li>. « au-delà »,
   lui, est un vrai wp:columns : ses cartes sont bien des sœurs. */
.services-grid .wp-block-post-template > li:nth-child(1) .service-card,
.audela-card:nth-child(1) { --card-accent: var(--neon-cyan);  --card-ink: var(--neon-cyan-ink); }
.services-grid .wp-block-post-template > li:nth-child(2) .service-card,
.audela-card:nth-child(2) { --card-accent: var(--neon-coral); --card-ink: var(--neon-coral-ink); }
.services-grid .wp-block-post-template > li:nth-child(3) .service-card { --card-accent: var(--neon-lime);  --card-ink: var(--neon-lime-ink); }
.service-card-number { color: var(--card-ink, var(--accent-600)); }
.service-features li::before { color: var(--card-ink, var(--accent-500)); }
.service-card:hover, .audela-card:hover {
  box-shadow: 0 0 0 2px var(--card-accent, var(--accent-500)),
              0 14px 40px color-mix(in srgb, var(--card-accent, var(--accent-500)) 32%, transparent);
}
.service-card:hover .card-link,
.audela-card:hover .card-link { color: var(--card-ink); border-color: var(--card-ink); }

/* --- Tarifs : liseré coloré, carte « populaire » sombre ----------------- */
.pricing-grid .wp-block-post-template > li:nth-child(1) .pricing-card { border-top: 4px solid var(--neon-lime-ink); }
.pricing-grid .wp-block-post-template > li:nth-child(1) .pricing-price,
.pricing-grid .wp-block-post-template > li:nth-child(1) .pricing-name { color: var(--neon-lime-ink); }
.pricing-grid .wp-block-post-template > li:nth-child(3) .pricing-card { border-top: 4px solid var(--neon-coral-ink); }
.pricing-grid .wp-block-post-template > li:nth-child(3) .pricing-price,
.pricing-grid .wp-block-post-template > li:nth-child(3) .pricing-name { color: var(--neon-coral-ink); }
.pricing-card:has(.pricing-badge:not(:empty)) {
  border: 2px solid var(--neon-cyan);
  background: var(--neutral-900);
  box-shadow: 0 0 30px rgba(43, 228, 255, 0.28);
}
.pricing-card:has(.pricing-badge:not(:empty)) .pricing-name { color: var(--neutral-0); }
.pricing-card:has(.pricing-badge:not(:empty)) .pricing-price { color: var(--neon-cyan); text-shadow: 0 0 18px rgba(43, 228, 255, 0.55); }
.pricing-card:has(.pricing-badge:not(:empty)) .pricing-target { color: rgba(255, 255, 255, 0.72); }
/* La carte « populaire » est la SEULE carte tarif au fond SOMBRE : son lien suit
   donc la logique « sur fond sombre » (cyan au repos, blanc/gris clair au survol),
   à rebours des deux autres cartes tarif, claires.
   ⚠️ Cibler aussi le <a> et pas seulement le .card-link : la règle générique
   `.card-link .wp-block-button__link` pose une `color` SUR le <a>, qui n'hérite
   donc pas de celle de son parent .card-link — sans ça le lien sort en noir sur
   fond noir, invisible (le lien avait purement disparu de la carte Croissance). */
.pricing-card:has(.pricing-badge:not(:empty)) .card-link,
.pricing-card:has(.pricing-badge:not(:empty)) .card-link .wp-block-button__link {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}
/* Le sélecteur du repos ci-dessus bat le :hover générique (plus spécifique) :
   il faut donc redonner le survol explicitement à ce niveau de spécificité. */
.pricing-card:has(.pricing-badge:not(:empty)) .card-link .wp-block-button__link:hover {
  color: var(--link-hover-ink);
  border-color: var(--link-hover-muted);
}
/* Carte sombre : elle annule la réinitialisation « carte claire » de .inv-dark. */
.pricing-card:has(.pricing-badge:not(:empty)) {
  --link-hover-ink: var(--neutral-0);
  --link-hover-muted: var(--text-muted-on-dark);
}
/* Le badge est un <p> : il doit battre `.inv-dark p` (0,1,1), d'où les deux classes. */
.inv-dark .pricing-badge,
.pricing-badge { background: var(--neon-cyan); color: var(--neutral-900); box-shadow: 0 0 14px rgba(43, 228, 255, 0.6); }

/* --- Abonnements : bande redevenue CLAIRE ------------------------------- */
/* Le liseré gauche colore la ligne ; le prix reprend la même encre. Passer par
   .abo-list pour battre la règle de mise en page du cœur sur le dernier enfant. */
.abo-wrap.is-light .abo-row { border-left: 3px solid var(--row-accent, transparent); padding-left: 1.25rem; }
.abo-wrap.is-light .wp-block-post-template > li:nth-child(1) .abo-row { --row-accent: var(--neon-cyan-ink); }
.abo-wrap.is-light .wp-block-post-template > li:nth-child(2) .abo-row { --row-accent: var(--neon-yellow-ink); }
.abo-wrap.is-light .wp-block-post-template > li:nth-child(3) .abo-row { --row-accent: var(--neon-lime-ink); }
.abo-wrap.is-light .wp-block-post-template > li:nth-child(4) .abo-row { --row-accent: var(--neon-coral-ink); }
.abo-wrap.is-light .abo-row:hover { background: color-mix(in srgb, var(--row-accent) 7%, transparent); }
/* Lien « En savoir plus » : NOIR au repos (règle générique .card-link), couleur de
   la ligne au survol — texte ET soulignement. On repointe les deux variables de
   survol sur --row-accent, donc chaque ligne prend automatiquement sa propre
   couleur (cyan / jaune / lime) sans règle par rang.
   Avant : survol noir sur repos noir, seul le soulignement virait au gris — le
   changement était invisible à l'œil. */
.abo-wrap.is-light .abo-row {
  --link-hover-ink: var(--row-accent);
  --link-hover-muted: var(--row-accent);
}
.abo-wrap.is-light .abo-info .wp-block-post-title { color: var(--text-heading); }
.abo-wrap.is-light .abo-price { color: var(--row-accent, var(--text-heading)); }
.abo-wrap.is-light .abo-badge { background: var(--neon-lime); color: var(--neutral-900); box-shadow: none; }

/* --- Hello : bande redevenue CLAIRE (fond bleu supprimé) ---------------- */
.hello-wrap.is-light .wp-block-heading { color: var(--text-heading); }
.hello-wrap.is-light .hello-meta { background: rgba(10, 10, 10, 0.04); border: 1px solid rgba(10, 10, 10, 0.15); }

/* --- Contact : bande redevenue CLAIRE (dégradé bleu supprimé) ----------- */
.rdv-wrap.is-light {
  background: var(--surface-alt);
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.rdv-wrap.is-light .wp-block-heading,
.rdv-wrap.is-light .contact-block-title { color: var(--text-heading); }
.rdv-wrap.is-light p { color: var(--text-body); }
.rdv-wrap.is-light .contact-checklist li { color: var(--text-body); }
.rdv-wrap.is-light .contact-checklist li::before { color: var(--neon-cyan-ink); }
.rdv-wrap.is-light .contact-checklist.is-after li::before { color: var(--neon-lime-ink); }
/* Le widget est une carte blanche POSÉE sur la bande : ses paragraphes ne suivent pas
   la couleur de la bande. `.rdv-wrap.is-light p` pèse (0,2,1) et écrasait sinon les
   gris et le cyan internes du calendrier (état, fuseau, signature, titres). */
.rdv-wrap.is-light .rdv-widget .cal-etat,
.rdv-wrap.is-light .rdv-widget .cal-fuseau,
.rdv-wrap.is-light .rdv-widget .cal-signature,
.rdv-wrap.is-light .rdv-widget .rdv-facade__note { color: var(--text-muted); }
.rdv-wrap.is-light .rdv-widget .cal-titre,
.rdv-wrap.is-light .rdv-widget .cal-heures-titre,
.rdv-wrap.is-light .rdv-widget .rdv-facade__title { color: var(--text-heading); }
.rdv-wrap.is-light .rdv-widget .cal-form-creneau { color: var(--neon-cyan-ink); }

/* --- FAQ : accordéon (absent du thème, porté de la maquette) ------------ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-list details { border-bottom: 1px solid var(--border-soft); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--neon-cyan-ink); }
.faq-list summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neon-cyan-ink);
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--transition-base);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > :not(summary) { margin: 0 0 1.5rem; color: var(--text-body); line-height: 1.7; max-width: 68ch; }

.inv-dark .faq-list details { border-color: rgba(255, 255, 255, 0.14); }
.inv-dark .faq-list summary { color: var(--neutral-0); }
.inv-dark .faq-list summary:hover { color: var(--neon-cyan); }
.inv-dark .faq-list summary::after { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(43, 228, 255, 0.5); }
.inv-dark .faq-list details > :not(summary) { color: rgba(255, 255, 255, 0.75); }

/* Sur une bande redevenue claire, l'eyebrow « on-dark » (blanc) disparaîtrait :
   on la ramène à l'encre cyan du design, sans glow. */
.is-light .eyebrow,
.is-light .eyebrow.on-dark { color: var(--neon-cyan-ink); text-shadow: none; }

/* --- Pied de page sombre (maquette) ------------------------------------- */
/* Partagé par les 21 gabarits : le passer en sombre change TOUT le site, ce que
   la maquette demande. Le fond ne vient plus d'un preset de bloc mais d'ici, pour
   que la grille « tech » puisse s'y superposer comme sur les bandes .inv-dark. */
.site-footer.is-dark {
  background-color: var(--neutral-900);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.8);
}
.site-footer.is-dark .wordmark,
.site-footer.is-dark .wordmark a { color: var(--neutral-0); }
.site-footer.is-dark p { color: rgba(255, 255, 255, 0.6); }
.site-footer.is-dark .list-plain a { color: rgba(255, 255, 255, 0.85); }
.site-footer.is-dark .list-plain a:hover,
.site-footer.is-dark .footer-social a:hover { color: var(--neon-cyan); }
.site-footer.is-dark .footer-col-title { color: rgba(255, 255, 255, 0.6); }
.site-footer.is-dark .footer-social a { border-color: rgba(255, 255, 255, 0.25); color: var(--neutral-0); }
.site-footer.is-dark hr { border-top-color: rgba(255, 255, 255, 0.14); }

/* --- Header : finitions de la maquette ---------------------------------- */
/* Le header était déjà collant + blur ; il manquait les accents néon. */
.site-nav a:hover,
.nav-link:hover { color: var(--neon-cyan-ink); }
.mega-menu { border-top: 2px solid var(--neon-cyan); }
.nav-cta:hover { background: var(--neon-cyan) !important; color: var(--neutral-900) !important; box-shadow: var(--glow-cyan); }

/* --- Footer sombre : un néon par colonne (comme la maquette) ------------- */
/* Sur #0A0A0A les néons purs sont tous ≥ 8:1 — le glow reste interdit ailleurs. */
.site-footer.is-dark .wp-block-column:nth-child(2) .footer-col-title { color: var(--neon-cyan); }
.site-footer.is-dark .wp-block-column:nth-child(3) .footer-col-title { color: var(--neon-yellow); }
.site-footer.is-dark .wp-block-column:nth-child(4) .footer-col-title { color: var(--neon-lime); }
.site-footer.is-dark .wp-block-column:nth-child(5) .footer-col-title { color: var(--neon-coral); }