/* =========================================================================
   Vauban Vitrine — Socle commun
   Chargé sur toutes les pages vitrine.
   - Tokens de design (couleurs de marque, typographie, rayons)
   - Base typographique scopée à .vauban-vitrine
   - Animation d'apparition au scroll (.vauban-reveal), partagée par les sections
   Les styles propres à chaque page vivent dans leur fichier dédié (ex. accueil.css).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Polices de repli MÉTRIQUES (anti-CLS, v8.4.566+).
   Ces familles ne s'affichent JAMAIS telles quelles : elles servent uniquement
   à réserver, le temps que la vraie police (Inter / Playfair Display) charge,
   EXACTEMENT la même place (hauteur de ligne + largeur). Au swap, plus aucun
   décalage de mise en page (CLS). Inter et Playfair restent les polices
   réellement rendues (déclarées EN PREMIER dans --vb-font-* ci-dessous).
   Calibrage des overrides : métriques type next/font (Arial → Inter, Times →
   Playfair). À affiner si Lighthouse signale un CLS résiduel sur les titres. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

@font-face {
  font-family: "Playfair Fallback";
  src: local("Times New Roman"), local("Times");
  ascent-override: 96.75%;
  descent-override: 22.2%;
  line-gap-override: 0%;
  size-adjust: 111.51%;
}

:root {
  /* Typographie — la police réelle EN PREMIER, le repli métrique juste après
     (calage invisible anti-CLS), puis les replis système. */
  --vb-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vb-font-serif: "Playfair Display", "Playfair Fallback", Georgia, serif;

  /* Couleurs de marque — accent indigo→violet (aligné sur la page /tarifs/) */
  --vb-primary: #4f46e5;
  --vb-primary-strong: #4338ca;
  --vb-primary-stronger: #3730a3;
  --vb-primary-soft: #8b5cf6;
  --vb-accent-soft: #eef0fe;

  /* Dégradé de marque — appliqué à tous les boutons principaux */
  --vb-primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --vb-primary-gradient-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);

  /* Neutres — palette tarifs (fond bleu-clair, texte slate profond) */
  --vb-bg: #f6f7fb;
  --vb-text: #334155;
  --vb-text-soft: #5b6677;
  --vb-heading: #0f172a;
  --vb-eyebrow: #4f46e5;

  /* Bordure de carte douce (bleu-gris, comme tarifs) */
  --vb-card-border: #e7eaf1;

  /* Carte unifiée — un seul style de carte sur tout le site (fond blanc,
     ombre très subtile, même rayon). Source unique : jamais redéfini par module. */
  --vb-card-bg: #ffffff;
  --vb-card-radius: 18px;
  --vb-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --vb-card-shadow-hover: 0 24px 48px -20px rgba(15, 23, 42, 0.26);

  /* Carte de hero (le bloc qui chevauche l'image d'en-tête) — identique partout */
  --vb-hero-card-bg: rgba(255, 255, 255, 0.92);
  --vb-hero-card-border: #e7eaf1;
  --vb-hero-card-radius: var(--vb-card-radius);
  --vb-hero-card-shadow: 0 20px 48px rgba(38, 30, 55, 0.10);

  /* Rayons */
  --vb-radius: 18px;
  --vb-radius-lg: 24px;

  /* Rythme vertical des sections — respiration harmonisée (équilibré aéré).
     Source unique : toute section consomme ce token (jamais de valeur en dur).
     Plancher mobile rehaussé (52px) pour plus d'air entre les sections sur
     petit écran, sans alourdir le desktop (plafond proche de l'existant). */
  --vb-section-y: clamp(56px, 6vw, 68px);

  /* Gouttière entre cartes d'une même grille. */
  --vb-section-gap: clamp(22px, 2.4vw, 30px);

  /* Largeur de contenu de référence */
  --vb-maxw: 1240px;

  /* Animations — douces et homogènes (jamais sèches).
     --vb-ease : courbe d'amorti partagée. --vb-transition : survols/micro-interactions.
     --vb-reveal-duration : apparition au scroll. */
  --vb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vb-transition: 0.35s;
  --vb-reveal-duration: 0.9s;

  /* Hauteur du header sticky — mise à jour dynamiquement par vitrine-animations.js.
     Valeur initiale = mesure Astra desktop (~90 px). Sert au scroll-padding-top et
     à compenser le header transparent (body.ast-transparent-header). */
  --vb-header-h: 90px;

  /* --- Couche « épuré » (refonte UX 2026) -------------------------------------
     Filets fins et surfaces très douces pour remplacer les cartes encadrées
     partout : on désencombre, on aère, on hiérarchise par le vide plutôt que
     par des boîtes. À utiliser à la place d'un hex en dur. */
  --vb-line: rgba(15, 23, 42, 0.08);          /* filet/hairline standard */
  --vb-line-soft: rgba(15, 23, 42, 0.05);     /* filet très discret */
  --vb-surface-muted: #fbfbfe;                /* aplat subtil (inset, bandes) */
  --vb-surface-tint: #f3f4fd;                 /* aplat teinté indigo très léger */

  /* Rayon des médias cadrés (photos de hero, vignettes) — plus généreux. */
  --vb-radius-media: 22px;

  /* Rythme vertical ample pour les blocs majeurs (hero, sections phares).
     Plancher mobile rehaussé (72px) pour une respiration franche en haut de page. */
  --vb-section-y-lg: clamp(72px, 7vw, 108px);

  /* Largeur d'une colonne de lecture confortable (texte éditorial). */
  --vb-reading: 720px;

  /* Halo dégradé discret derrière les heros (touche « produit IA »). */
  --vb-glow: radial-gradient(60% 60% at 80% 0%, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0) 70%);

  /* Splashs chromatiques — halos derrière les blocs médias (service-zigzag) */
  --vb-splash-1: radial-gradient(ellipse at 50% 50%, rgba(79, 70, 229, 0.13) 0%, rgba(99, 102, 241, 0.05) 55%, transparent 80%);
  --vb-splash-2: radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.11) 0%, rgba(139, 92, 246, 0.04) 55%, transparent 80%);
  --vb-splash-3: radial-gradient(ellipse at 50% 50%, rgba(55, 48, 163, 0.14) 0%, rgba(79, 70, 229, 0.05) 55%, transparent 80%);
}

.vauban-vitrine {
  font-family: var(--vb-font-sans);
  color: var(--vb-text);
  /* Fond de page unique : les sections n'ont plus chacune leur teinte. */
  background: var(--vb-bg);
  /* Contient les halos et « splashs » décoratifs (::before/::after en inset
     négatif) qui débordent latéralement, surtout en mobile, et provoquaient un
     défilement horizontal vers une zone vide. « clip » coupe l'axe horizontal
     sans créer de conteneur de défilement ni casser position: sticky, et laisse
     l'axe vertical visible. */
  overflow-x: clip;
}

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

/* Reset global des liens vitrine : aucun lien n'est souligné par défaut.
   Le soulignement reste réservé aux états explicites (ex. :hover du footer,
   corps d'article « Guides » qui, lui, est hors socle .vauban-vitrine). */
.vauban-vitrine a {
  text-decoration: none;
}

/* ---------- Apparition au scroll (mutualisée) ----------
   Le masquage initial n'est appliqué QUE si le JS est actif (classe .vauban-js
   posée sur <html> dès le <head>). Sans JS — JS différé, échec, ou éditeur —
   le contenu reste visible par défaut (robustesse + accessibilité + SEO). */
.vauban-js .vauban-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--vb-reveal-duration) var(--vb-ease),
    transform var(--vb-reveal-duration) var(--vb-ease);
  will-change: opacity, transform;
}

.vauban-js .vauban-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vauban-js .vauban-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Ancres internes : le header sticky ne masque pas le début de la cible. */
html {
  scroll-padding-top: calc(var(--vb-header-h) + 12px);
}

/* Repli --vb-header-h pour la plage mobile/tablette (≤ 921 px) où le header
   actif est .vbm-header (sticky, dans le flux). Ces valeurs correspondent aux
   hauteurs réelles du vbm-header définies dans vitrine-mobile-nav.css :
   72 px de 544px à 921px, 64 px en dessous de 544px. Le JS (updateHeaderVar)
   mesure le header visible et met la valeur à jour dès que le DOM est prêt ;
   ces replis CSS ne s'appliquent que durant le court instant pré-JS. */
@media (max-width: 921px) {
  :root {
    --vb-header-h: 72px;
  }
}

@media (max-width: 544px) {
  :root {
    --vb-header-h: 64px;
  }
}

/* ---- Intégration thème Astra ----
   Astra ajoute margin-top:4em (≈64px) + margin-bottom:1.5em sur .entry-header
   quand le titre de page est visible, et margin:0 quand il est masqué
   (ast-header-without-markup). Cette asymétrie créait un décalage de ~88px
   entre les pages ayant le titre activé et celles ne l'ayant pas.
   Sur les pages vitrine le hero porte déjà le <h1> de référence ; le
   .entry-header Astra est donc masqué pour une cohérence parfaite.
   Idem pour la vignette à la une qui s'affiche parfois au-dessus du contenu. */
article:has(.vauban-vitrine) > .entry-header,
article:has(.vauban-vitrine) > .ast-article-single-img,
article:has(.vauban-vitrine) > .post-thumbnail {
  display: none;
}

/* Astra/layout applique un padding sur .site-content : latéral (marge parasite
   sur les bords) ET vertical incohérent selon la page (mesuré : padding-top de
   90 px sur accueil/faq/contact, 0 sur qui-sommes-nous/simulateur — il provient
   d'un réglage d'espacement PAR PAGE côté admin Astra, pas du CSS plugin). On
   neutralise TOUT le padding ici, source unique, pour ne plus dépendre d'un
   réglage admin par page : la vitrine est ainsi homogène d'une page à l'autre.
   Le dégagement nécessaire sous le header Astra (position: fixed) n'est donc plus
   porté par .site-content mais par le hero de chaque page, via le token unique
   --vb-header-h (cf. .vauban-hero ci-dessous et dans vitrine-components.css). On
   porte aussi le fond de page (--vb-bg) sur .site-content afin que tout le
   conteneur soit uniforme, sans bande d'une autre couleur autour de la vitrine.
   Spécificité renforcée (body + .site-content dédoublée → 0,3,1) pour battre une
   éventuelle règle source plus spécifique, même en !important. */
body .site-content.site-content:has(.vauban-vitrine) {
  padding: 0 !important;
  background: var(--vb-bg);
}

/* Astra applique sur l'article conteneur de page (.ast-article-single) un padding
   interne — mesuré à ~32 px en haut et 20 px sur les côtés en desktop. Sur les
   pages vitrine ce padding est purement parasite : chaque hero gère lui-même son
   dégagement vertical (.vauban-hero__inner) et chaque section sa gouttière
   latérale, si bien que ce padding ne fait qu'ajouter une bande vide en haut et
   un léger retrait latéral. On le neutralise à TOUTES les tailles (le bloc mobile
   ci-dessous ne le faisait que sous 921 px, laissant le retrait visible en
   desktop). La bordure de l'article est également retirée. */
body article.ast-article-single:has(.vauban-vitrine) {
  padding: 0 !important;
  border: 0;
}

/* Page « offre » (/service-de-conciergerie-lille/) : layout Astra par défaut, à HTML
   FIGÉ en base, dont le HTML stocké contient un caractère BOM (U+FEFF) parasite en
   tête d'.entry-content. Ce caractère « zéro largeur » génère malgré tout une line-box
   (≈ une hauteur de ligne, ~24 px) qui pousse le hero vers le bas (bande trop grande
   sous le header, surtout flagrante en mobile). Le BOM étant figé dans le HTML stocké,
   on ne peut pas le retirer côté template ; on annule donc sa line-box en CSS :
   line-height:0 sur le conteneur (la line-box du BOM tombe à 0), puis on rétablit la
   line-height normale (≈1.65, valeur héritée mesurée) sur la vitrine pour ne pas
   toucher au texte. Scopé à offre pour ne pas modifier les autres pages. */
.entry-content:has(> .vauban-vitrine--offre) {
  line-height: 0;
}

.entry-content > .vauban-vitrine--offre {
  line-height: 1.65;
}

/* Mobile/tablette : en plus du padding de .site-content (déjà neutralisé ci-dessus
   pour toutes les tailles), Astra contraint .ast-container (max-width + gouttière)
   et applique une marge sur #primary/#main, ce qui crée une gouttière d'environ
   20 px autour des pages vitrine. On lève ces contraintes en mobile ; les sections
   Vauban conservent leurs propres gouttières internes. */
@media (max-width: 921px) {
  body .site-content.site-content:has(.vauban-vitrine) > .ast-container {
    max-width: none;
    padding: 0 !important;
  }

  body .site-content.site-content:has(.vauban-vitrine) #primary,
  body .site-content.site-content:has(.vauban-vitrine) #main {
    margin: 0 !important;
    padding: 0 !important;
  }
}