/*
Theme Name:  BIO Digital Thème
Theme URI:   https://bio-digital.eu
Author:      BIO Digital
Author URI:  https://bio-digital.eu
Description: Thème WordPress parent autonome pour l'agence web BIO-DIGITAL.EU — création de sites internet premium, stratégie SEO et développement de logiciels sur mesure intégrés. Landing page en 8 sections, formulaire de contact sécurisé, UI sombre, Tailwind CSS (CDN en dev / build purgé+minifié en prod).
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      8.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: biodigital
Tags:        custom-menu, featured-images, translation-ready, full-width-template
*/

/* ------------------------------------------------------------------
   Ce fichier ne porte que :
   - l'en-tête de thème obligatoire (ci-dessus)
   - un socle de styles globaux (couleurs de marque, police, a11y)
   Le reste du style provient de Tailwind (CDN en dev / dist/main.css en prod).
------------------------------------------------------------------- */

:root {
  --bd-bg: #010D1A;       /* Fond principal      */
  --bd-accent: #1AA1F4;   /* Accent / boutons    */
  --bd-surface: #0A1A2C;  /* Cartes / surfaces secondaires */
  --bd-accent-dark: #1483C4; /* Hover boutons / liens */
  --bd-text: #FFFFFF;     /* Texte               */
  /* Petite respiration au-dessus d'une section ciblée par une ancre. Le header est
     FORCÉ caché à l'arrivée d'un clic de nav (voir nav.js), donc on ne réserve PLUS
     sa hauteur ici : une valeur minimale suffit (pas de trou, titre calé en haut).
     Valeur unique desktop + mobile. */
  --bd-scroll-offset: 16px;
}

/* Socle de secours (si le CDN tarde ou échoue, la page reste lisible) */
html {
  scroll-behavior: smooth;
  /* Garde anti-débordement horizontal AU NIVEAU DU VIEWPORT (html = vrai scroller).
     `clip` (et NON `hidden`) : ne crée pas de conteneur de défilement -> ne force pas
     overflow-y:auto -> ne casse NI la FAQ sticky NI le pin processus. body seul ne
     suffit pas à bloquer le scroll horizontal du viewport. */
  overflow-x: clip;
}

body {
  background-color: var(--bd-bg);
  color: var(--bd-text);
  font-family: "Futura", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Compense le header fixe lors d'un saut vers une ancre #section */
:target {
  scroll-margin-top: var(--bd-scroll-offset);
}

/* Exception : l'onglet « Accueil » (#accueil = 1re section, hero) doit ramener
   TOUT EN HAUT de la page (scroll y = 0), pas se caler sous le header comme les
   autres ancres. #accueil débute à 5rem du haut (padding-top de #main = pt-20,
   égal à la hauteur du header h-20) ; un scroll-margin-top de 5rem annule ce
   décalage -> le saut atterrit à 0. Spécificité d'ID (1,0,0) : prime sur :target. */
#accueil {
  scroll-margin-top: 5rem;
}

/* Accessibilité : focus visible homogène aux couleurs de marque */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--bd-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------
   Widget d'avis Google (Trustindex) — habillage aux couleurs BIO Digital.
   Le wrapper .bd-reviews-widget entoure le shortcode (Section 6 de
   front-page.php). Les sélecteurs reprennent EXACTEMENT la « queue » des
   règles du preset Trustindex (dark-luxury-fame) et y ajoutent le préfixe
   .bd-reviews-widget : on conserve ainsi toujours +1 classe de spécificité
   pour gagner la cascade, même quand la feuille Trustindex est chargée
   après celle-ci.
------------------------------------------------------------------- */

/* Carte d'avis : fond de marque + bordure discrète (remplace #222 + bordure or) */
.bd-reviews-widget .ti-widget.ti-goog .ti-review-item > .ti-inner {
  background-color: var(--bd-surface) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Nom de l'auteur */
.bd-reviews-widget .ti-widget.ti-goog .ti-widget-container .ti-name {
  color: var(--bd-text) !important;
}

/* Date de l'avis (texte secondaire) */
.bd-reviews-widget .ti-widget.ti-goog .ti-widget-container .ti-date {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Texte de l'avis */
.bd-reviews-widget .ti-widget.ti-goog .ti-review-item > .ti-inner .ti-review-content,
.bd-reviews-widget .ti-widget.ti-goog .ti-review-item > .ti-inner .ti-review-text-container {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Lien « Lire la suite » + son icône -> accent de marque */
.bd-reviews-widget .ti-widget.ti-goog .ti-read-more span {
  color: var(--bd-accent) !important;
  opacity: 1 !important;
}
.bd-reviews-widget .ti-widget.ti-goog .ti-read-more:after {
  background: var(--bd-accent) !important;
}

/* Flèches du slider : fond de marque, contour + chevron en accent */
.bd-reviews-widget .ti-widget.ti-goog .ti-controls .ti-next,
.bd-reviews-widget .ti-widget.ti-goog .ti-controls .ti-prev {
  background-color: var(--bd-surface) !important;
  outline-color: var(--bd-accent) !important;
}
.bd-reviews-widget .ti-widget.ti-goog .ti-controls .ti-next:before,
.bd-reviews-widget .ti-widget.ti-goog .ti-controls .ti-prev:before {
  border-color: var(--bd-accent) !important;
}

/* Barre / puces de pagination -> accent de marque */
.bd-reviews-widget .ti-widget.ti-goog .ti-controls-line .dot {
  background: var(--bd-accent) !important;
}

/* =============================================================================
   SECTION HERO (#accueil) — Arrière-plan animé "Slow Infinite Flow" v6.7
   Adapté du preset Elementor au thème custom BIO Digital (Tailwind, sans Elementor).
   Couche 1 = grille + diamants (#accueil::before), Couche 2 = nœuds (#accueil::after),
   Couche 3 = flux de données (.bd-hero-flow, div dédié). Le contenu est en z-10.
   NB : les animations sont neutralisées par le bloc prefers-reduced-motion plus haut.
============================================================================= */
#accueil {
  background:
    radial-gradient(circle at 50% 32%, rgba(20, 45, 85, 0.98) 0%,
                    #0a1a2f 22%,
                    #08111f 42%,
                    #050c18 65%,
                    #03080f 88%,
                    #02060c 100%) !important;
  position: relative;
  overflow: hidden;
}

/* ====================== COUCHE 1 : GRILLE + DIAMANTS — TRÈS LENT ====================== */
#accueil::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(100, 190, 255, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 190, 255, 0.038) 1px, transparent 1px),
    linear-gradient(rgba(100, 190, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 190, 255, 0.022) 1px, transparent 1px),
    linear-gradient(45deg, transparent 49.65%, rgba(125, 215, 255, 0.029) 50%, transparent 50.35%),
    linear-gradient(135deg, transparent 49.65%, rgba(125, 215, 255, 0.029) 50%, transparent 50.35%),
    linear-gradient(45deg, transparent 49.4%, rgba(145, 230, 255, 0.016) 50%, transparent 50.6%),
    linear-gradient(135deg, transparent 49.4%, rgba(145, 230, 255, 0.016) 50%, transparent 50.6%);
  background-size:
    56px 56px, 56px 56px,
    88px 88px, 88px 88px,
    235px 235px, 235px 235px,
    415px 415px, 415px 415px;
  background-position: center 0;
  opacity: 0.96;
  z-index: 1;
  pointer-events: none;
  animation: infiniteDownwardDrift 65s linear infinite;
}

@keyframes infiniteDownwardDrift {
  0%   { background-position: center 0; }
  100% { background-position: center 1800px; }
}

/* ====================== COUCHE 2 : POINTS / NŒUDS ====================== */
#accueil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #6ed8ff 1.35px, transparent 0);
  background-size: 74px 74px;
  background-position: center 0;
  opacity: 0.165;
  z-index: 2;
  pointer-events: none;
  animation: refinedNodesPulse 13s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
             infiniteDownwardDrift 65s linear infinite;
}

@keyframes refinedNodesPulse {
  0%, 100% { opacity: 0.165; }
  50%      { opacity: 0.245; }
}

/* ====================== COUCHE 3 : FLUX DE DONNÉES — TRÈS LENT ====================== */
.bd-hero-flow {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 0%, #67d4ff 1.8px, transparent 3.8px),
    linear-gradient(135deg, transparent 0%, #67d4ff 1.2px, transparent 3.4px),
    linear-gradient(45deg, transparent 0%, #67d4ff 1px, transparent 3px);
  background-size: 190px 190px, 300px 300px, 250px 250px;
  background-position: center 0;
  opacity: 0.085;
  z-index: 3;
  pointer-events: none;
  animation: infiniteDownwardFlow 52s linear infinite;
}

@keyframes infiniteDownwardFlow {
  0%   { background-position: center 0; }
  100% { background-position: center 2400px; }
}

/* ====================== MOBILE ====================== */
@media (max-width: 768px) {
  #accueil::before, #accueil::after { animation-duration: 58s; }
  .bd-hero-flow { animation-duration: 46s; }
}

/* =============================================================================
   SECTION 7 — FAQ : accordéon mono-ouverture aux couleurs BIO Digital.
   Réinitialise le style natif du <button> et force les couleurs de texte claires
   (!important strictement limité au préfixe .bd-faq) pour rester lisible sur fond
   sombre malgré le rendu natif du bouton et d'éventuels utilitaires Tailwind.
============================================================================= */
/* Mise en page 2 colonnes : accroche (gauche) + accordéon existant (droite). */
.bd-faq{display:grid;grid-template-columns:0.8fr 1.2fr;gap:40px;align-items:start;max-width:1000px;margin:4rem auto 0}
.bd-faq-side{position:sticky;top:132px}
.bd-faq-title{color:#fff;font-size:32px;font-weight:700;line-height:1.25;margin:0 0 14px}
.bd-faq-text{color:rgba(255,255,255,.65);font-size:14px;line-height:1.6;margin:0 0 20px}
.bd-faq-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:999px;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.5);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .35s,color .35s,transform .35s}
.bd-faq-btn:hover{background:#fff;color:#02101c;transform:translateY(-2px)}
.bd-faq-btn svg{transition:transform .35s}
.bd-faq-btn:hover svg{transform:translateX(3px)}
.bd-faq-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:768px){
	.bd-faq{grid-template-columns:1fr;gap:24px;margin-top:24px}
	.bd-faq-side{position:static;order:2}
	.bd-faq-list{order:1}
}
@media (prefers-reduced-motion:reduce){.bd-faq-btn{transition:none}}
.bd-faq-item{border:1px solid rgba(26,161,244,.18);border-radius:12px;background:#0a1726;margin-bottom:12px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.bd-faq-item:hover{transform:translateY(-2px);border-color:rgba(26,161,244,.55);box-shadow:0 8px 22px rgba(26,161,244,.12)}
.bd-faq-item.is-open{border-color:#1AA1F4}
.bd-faq-h{margin:0}
.bd-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;-webkit-appearance:none;appearance:none;background:transparent;border:0;font-size:1rem;font-weight:600;text-align:left;cursor:pointer;font-family:inherit}
.bd-faq .bd-faq-q,
.bd-faq .bd-faq-q > span{color:#ffffff !important}
.bd-faq-q:focus-visible{outline:2px solid #1AA1F4;outline-offset:3px;border-radius:8px}
.bd-faq-ic{flex:0 0 auto;display:flex;align-items:center;color:#1AA1F4;transition:transform .35s ease}
.bd-faq .bd-faq-ic{color:#1AA1F4 !important}
.bd-faq-ic svg{width:20px;height:20px;stroke:#1AA1F4}
.bd-faq-item.is-open .bd-faq-ic{transform:rotate(180deg)}
.bd-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.bd-faq-item.is-open .bd-faq-a{grid-template-rows:1fr}
.bd-faq-a-in{overflow:hidden}
.bd-faq-a p{margin:0;padding:0 20px 20px;line-height:1.65}
.bd-faq .bd-faq-a p{color:rgba(255,255,255,.82) !important}
@media (prefers-reduced-motion:reduce){.bd-faq-item,.bd-faq-ic,.bd-faq-a{transition:none}}

/* =============================================================================
   SECTION 5 — RÉALISATIONS : apparition en cascade des cartes au scroll.
   La classe .is-visible est ajoutée par assets/js/reveal.js (IntersectionObserver)
   quand la carte entre dans le viewport. Délais progressifs = effet d'escalier.
   Le mouvement est neutralisé si l'utilisateur préfère un mouvement réduit.
============================================================================= */
.bd-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.bd-reveal.is-visible{opacity:1;transform:none}
.bd-reveal:nth-child(1){transition-delay:.05s}
.bd-reveal:nth-child(2){transition-delay:.15s}
.bd-reveal:nth-child(3){transition-delay:.25s}
.bd-reveal:nth-child(4){transition-delay:.35s}
.bd-reveal:nth-child(5){transition-delay:.45s}
.bd-reveal:nth-child(6){transition-delay:.55s}
@media (prefers-reduced-motion:reduce){.bd-reveal{opacity:1;transform:none;transition:none}}

/* =============================================================================
   SECTION 5 — RÉALISATIONS : halo "spotlight" suivant le curseur (effet premium).
   Les variables --mx/--my sont mises à jour au pointermove par assets/js/nav.js
   (uniquement sur pointeur fin / souris, jamais en tactile). Le halo est un
   pseudo-élément ::before clippé par le overflow-hidden de la carte, posé en z-5 :
   le footer (relative z-10), l'overlay « Voir le site » (z-10) et le lien étiré
   (z-20) restent AU-DESSUS ; le halo a pointer-events:none → n'intercepte aucun
   clic. Entièrement désactivé sous prefers-reduced-motion.
============================================================================= */
.bd-spot{--mx:50%;--my:50%}
.bd-spot::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,255,255,.2),transparent 60%);opacity:0;transition:opacity .4s ease}
.bd-spot:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){.bd-spot::before{display:none}}

/* =============================================================================
   NAVIGATION ONE-PAGE (header) — voir assets/js/nav.js
   - Lien actif (scrollspy) : .is-active posée sur le lien .bd-navlink de la
     section visible. Surlignage en couleur d'accent + soulignement accent.
   - Menu mobile (drawer) : panneau plein écran .bd-mobile-menu glissant depuis
     la droite, ouvert via body.bd-menu-open ; voir bloc dédié plus bas.
   NB : le scroll fluide et l'offset des ancres sont déjà gérés plus haut
   (html{scroll-behavior} + :target{scroll-margin-top}) — non dupliqués ici.
============================================================================= */
.bd-navlink{position:relative}
.bd-navlink.is-active{color:var(--bd-accent)}
.bd-navlink.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--bd-accent)}

/* -------- Header hide-on-scroll-down / show-on-scroll-up --------
   Le header (#bd-header, position:fixed z-50 — inchangé) se cache en fondu +
   glissement vers le haut quand on scrolle vers le BAS, et réapparaît au scroll
   HAUT. La classe .bd-header-hidden est posée/retirée par assets/js/nav.js.
   pointer-events:none en état caché => pas de clic fantôme sur un header invisible.
   La translation s'applique PAR-DESSUS le positionnement fixed existant. */
#bd-header{transition:transform .35s ease,opacity .35s ease;will-change:transform,opacity}
#bd-header.bd-header-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#bd-header{transition:none}}

/* -------- Menu mobile : PLEIN ÉCRAN immersif (fond sombre + halo) --------
   État ouvert : classe .is-open sur #bd-mobile-menu ET .bd-menu-open sur <body>
   (anim du burger) — les deux posées par assets/js/nav.js.
   Verrou de scroll : classe .bd-no-scroll sur <html>.
   Visible sous le breakpoint xl (1280px : mobile, tablette ET grande tablette) : masqué en desktop via
   sélecteur d'ID (voir plus bas) — le menu desktop n'est pas affecté. */

/* Empêche tout débordement horizontal (transform d'apparition du menu). */
/* Filet secondaire : clip (sticky-safe) plutôt que hidden (qui rendrait body
   scroll-container via overflow-y:auto). La vraie garde est sur html ci-dessus. */
body{overflow-x:clip}

/* Verrou de défilement de la page quand le menu est ouvert (renfort du lock JS
   position:fixed appliqué au <body> par nav.js). overscroll-behavior:none coupe
   la propagation/chaînage du scroll (défense supplémentaire, notamment tactile). */
.bd-no-scroll{overflow:hidden;overscroll-behavior:none}

/* Burger : 3 barres qui se transforment en croix (×). */
.bd-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:2.75rem;height:2.75rem;padding:.5rem;position:relative;z-index:60}
.bd-burger-bar{display:block;width:24px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease,opacity .3s ease}
body.bd-menu-open .bd-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.bd-menu-open .bd-burger-bar:nth-child(2){opacity:0}
body.bd-menu-open .bd-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Conteneur plein écran, fond sombre + HALO lumineux bleu en HAUT (radial haut) — style A
   immersif d'origine. Caché par défaut. inset:0 en position:fixed => hauteur = viewport.
   min-height:100vh (fallback) puis min-height:100dvh (hauteur d'écran dynamique mobile) =
   filet de sécurité anti-coupure sur petits écrans (additif, non prévu au spec).
   overflow-y:auto = SCROLL DE SECOURS : sur écrans courants tout tient sans scroll ; sur très
   petits écrans un léger défilement interne garde chaque bouton accessible (jamais coupé).
   Structure (conforme au spec) : .bd-mm-close (croix, align-self flex-end) + .bd-mm-links
   (nav en cascade) + .bd-mm-actions (ancrée BAS, margin-top:auto) + .bd-mm-socials. */
.bd-mobile-menu{position:fixed;inset:0;z-index:9000;
  background:radial-gradient(circle at 50% 18%,rgba(26,161,244,0.18),transparent 55%),#040e1a;
  display:flex;flex-direction:column;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s ease,visibility .35s ease,transform .35s ease;
  overscroll-behavior:none;
  /* Hauteur STABLE : position:fixed + inset:0 ancre déjà haut/bas au viewport.
     On n'utilise PLUS 100dvh (dynamique : varie quand la barre d'URL mobile
     apparaît/disparaît -> faisait « sauter » .bd-mm-actions). 100vh (grand
     viewport, statique) en repli, puis 100svh (small viewport, STABLE lui aussi)
     -> la hauteur ne change plus au scroll, le bloc boutons reste fixe. */
  overflow:hidden;min-height:100vh;min-height:100svh}
.bd-mobile-menu.is-open{opacity:1;visibility:visible;transform:none}

/* Croix de fermeture, ancrée en haut à droite. */
.bd-mm-close{align-self:flex-end;background:none;border:none;color:#fff;font-size:26px;
  cursor:pointer;padding:6px;line-height:1}

/* Liens de nav (grande typo ~26px), apparition en cascade. */
.bd-mm-links{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.bd-mm-links a{color:#fff;font-size:22px;font-weight:700;text-decoration:none;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  opacity:0;transform:translateX(-12px);transition:opacity .3s ease,transform .3s ease}
.bd-mm-links a:last-child{border-bottom:none}
.bd-mobile-menu.is-open .bd-mm-links a{opacity:1;transform:none}
/* apparition en cascade des liens */
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(1){transition-delay:.09s}
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(2){transition-delay:.18s}
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(3){transition-delay:.27s}
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(4){transition-delay:.36s}
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(5){transition-delay:.45s}
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(6){transition-delay:.54s}
.bd-mobile-menu.is-open .bd-mm-links a:nth-child(7){transition-delay:.63s}
/* Lien actif (scrollspy) : accent, cohérent avec le desktop. */
.bd-mm-links a.is-active{color:#1AA1F4}

/* Actions ancrées en BAS (margin-top:auto) : devis (plein) + réserver un appel (contour). */
.bd-mm-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:24px}
.bd-mm-cta{text-align:center;padding:14px;border-radius:999px;
  background:linear-gradient(135deg,#1AA1F4,#0d7fce);color:#fff;font-weight:700;font-size:15px;
  text-decoration:none;box-shadow:0 10px 28px -8px rgba(26,161,244,.6)}
.bd-mm-ghost{text-align:center;padding:12px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,0.35);background:none;color:#fff;font-weight:600;
  font-size:14px;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .3s,color .3s}
.bd-mm-ghost:hover{background:#fff;color:#02101c}

/* Rangée réseaux (frère de .bd-mm-actions) : pastilles rondes + séparateur + étoile jaune (avis Google). */
.bd-mm-socials{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:20px}
.bd-mm-socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:border-color .3s,color .3s}
.bd-mm-socials a:hover{border-color:#1AA1F4;color:#1AA1F4}
.bd-mm-socials svg{width:18px;height:18px}
.bd-mm-sep{width:1px;height:24px;background:rgba(255,255,255,0.18);margin:0 2px}
/* Bouton avis = icône ronde étoile JAUNE à droite de LinkedIn. */
.bd-mm-star{color:#FACC15 !important;border-color:rgba(250,204,21,0.35) !important}
.bd-mm-star:hover{border-color:#FACC15 !important;color:#FACC15 !important}

/* TABLETTE & GRANDE TABLETTE (768–1279.98px) : le menu plein écran ne s'étire plus
   sur toute la largeur. On limite le CONTENU (liens, actions, socials) à ~480px
   centré ; la croix .bd-mm-close reste ancrée en haut à droite. Structure inchangée
   (1 colonne de liens, boutons empilés, socials en ligne). Mobile (<768) et
   desktop (>=1280, menu masqué) inchangés — aligné sur BD_BP_DESKTOP (nav.js). */
@media (min-width:768px) and (max-width:1279.98px){
  .bd-mm-links,.bd-mm-actions,.bd-mm-socials{max-width:480px;width:100%;margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  .bd-mobile-menu,.bd-mm-links a{transition:none}
  .bd-mobile-menu.is-open .bd-mm-links a{transition-delay:0s}
}

/* Desktop (≥ xl 1280px) : le menu plein écran reste caché, le menu desktop prend
   le relais. Sélecteur d'ID (spécificité 1,0,0) → prime sur .xl:hidden (Tailwind
   CDN injecté après style.css), sans !important. */
/* Frontière desktop du HEADER = xl (1280px) : source de vérité CSS, alignée sur
   BD_BP_DESKTOP dans assets/js/nav.js. Sous 1280 (mobile, tablette ET grande tablette)
   le menu plein écran reste disponible ; à >=1280 il cède la place à la nav desktop.
   NB : ne concerne QUE le header ; le corps (footer/réalisations/expertises) garde lg=1024. */
@media (min-width:1280px){
  #bd-mobile-menu.bd-mobile-menu{display:none}
}
/* -------- Hero (#accueil) : padding-top réduit --------
   Équivaut à .py-24 { padding-top:3.2rem; padding-bottom:6rem }, mais scopé au
   hero et en spécificité d'ID pour primer sur Tailwind CDN (injecté après
   style.css). Limité à < lg : au-delà, lg:py-32 garde la main (inchangé). */
@media (max-width: 1023.98px) {
  #accueil .py-24 { padding-top: 3.2rem; padding-bottom: 6rem; }
}

/* Desktop (>= lg) : padding-top du hero réduit (lg:py-32 = 8rem par défaut).
   Bas inchangé à 8rem. Spécificité d'ID pour primer sur Tailwind CDN. */
@media (min-width: 1024px) {
  #accueil .lg\:py-32 { padding-top: 6.5rem; padding-bottom: 8rem; }
}

/* -------- Hero (#accueil) : PLEIN ÉCRAN en TABLETTE (768-1023.98px) --------
   Le hero n'a AUCUNE hauteur définie : sa hauteur = contenu + padding. Sur un
   viewport portrait de tablette (haut, ~1024px+), contenu+padding reste très
   inférieur à l'écran -> la section 2 (#pourquoi) remonte dans le 1er écran.
   On force le wrapper de contenu (.z-10) à couvrir le viewport SOUS le header
   fixe (h-20 = 5rem) : min-height:calc(100svh - 5rem). Unité svh (small viewport,
   STABLE) + repli vh -- cohérent avec .bd-mobile-menu (le thème a écarté dvh, qui
   « saute » avec les barres du navigateur). min-height (pas height) => si le
   contenu dépassait, le hero grandit sans scroll interne. Le contenu est RÉPARTI
   verticalement (justify-content:space-between sur .max-w-4xl) : texte en haut,
   CTA en bas -> occupe toute la hauteur sans vide central. Alignement horizontal
   à gauche conservé.
   Mobile (<768) et desktop (>=1024) NON concernés -> pas de régression. */
@media (min-width:768px) and (max-width:1023.98px){
  #accueil > .z-10{
    min-height:calc(100vh - 5rem);
    min-height:calc(100svh - 5rem);
    display:flex;
    flex-direction:column;
    /* Padding vertical SYMÉTRIQUE : annule le 3.2rem/6rem asymétrique (ligne ~453)
       pour une répartition propre, sans coller au header ni au bas de l'écran. */
    padding-top:2.5rem;
    padding-bottom:2.5rem;
  }
  /* RÉPARTITION verticale (au lieu de justify-content:center) : le bloc de contenu
     occupe toute la hauteur et écarte ses 2 groupes -> texte (badge+H1+accroche =
     .bd-hero-top) vers le HAUT, CTA vers le BAS, l'espace distribué entre les deux.
     .max-w-4xl reste un BLOC en mobile/desktop (flex ici uniquement) : pilule du
     badge et retours à la ligne du H1/paragraphe intacts. */
  #accueil > .z-10 > .max-w-4xl{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
}

/* -------- Hero (#accueil) : REMPLISSAGE par la TAILLE du texte — iPad mini (744x1133)
   & iPad 11" (820x1180) en PORTRAIT (borne 740-900 pour inclure le mini, qui fait 744 <768) --------
   Cible restreinte (portrait, 740-900px) : IGNORE l'iPad 13" (1024, >900) et les phones
   (aucun < 740 n'existe en portrait dans cette plage -> mobile intact). Bloc GROUPÉ (pas
   de space-between), calé à GAUCHE en largeur limitée (36rem) -> le titre passe sur plus
   de lignes et gagne en hauteur. H1 & accroche FLUIDES (clamp en vh) : grossissent avec la
   hauteur du viewport pour remplir mini(1133) ET 11"(1180) sans déborder. Centré vertical
   -> petites marges égales, jamais de gros vide ni de scroll interne.
   Règle AUTONOME : le mini (744) étant <768, la règle 768-1023.98 ne l'atteint pas. */
@media (min-width:740px) and (max-width:900px) and (orientation:portrait){
  #accueil > .z-10{
    min-height:calc(100vh - 5rem);
    min-height:calc(100svh - 5rem);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:2.5rem;
    padding-bottom:2.5rem;
  }
  /* Bloc GROUPÉ (annule flex:1/space-between de la règle 768-1023.98) : bloc normal
     -> espacements mt-* naturels, pilule du badge et wrapping H1/accroche intacts. */
  #accueil > .z-10 > .max-w-4xl{
    flex:none;
    display:block;
    max-width:36rem;
  }
  /* H1 FLUIDE : grossit selon la hauteur (vh), clamp(min, vh, max) calibré pour remplir
     1133-1180 sans dépasser sur le mini (le plus court). Line-height compact. */
  #accueil h1{
    font-size:clamp(2.7rem, 5.6vh, 4.2rem);
    line-height:1.12;
  }
  /* Accroche FLUIDE, un cran au-dessus de text-lg, lisible. */
  #accueil .max-w-3xl{
    font-size:clamp(1.1rem, 2.1vh, 1.4rem);
    line-height:1.55;
  }
}

/* =============================================================================
   SECTION 5 — RÉALISATIONS (variante « C ») : cartes COMPACTES + grille 4 col.
   Au repos chaque carte montre une ligne meta (2 puces SECTEUR · PRESTATION),
   le nom du client, puis le domaine TOUJOURS visible. Au survol de la carte
   (.group sur l'<article>, Tailwind group/group-hover) : le domaine passe en
   accent, la flèche se décale, un trait se trace sous le domaine. L'image et ses
   effets, le halo .bd-spot et le lien étiré restent inchangés.
   Grille : 2 colonnes en mobile, 4 colonnes dès md (≥768px, tablette/desktop).
   Système « Voir plus » : seules les data-visible (=4) premières cartes sont
   affichées ; le reste est masqué (.is-hidden) jusqu'au clic ; piloté par
   assets/js/portfolio.js et évolutif (compte les .bd-pf-card, pas de nombre câblé).
============================================================================= */
.bd-pf-card{border-radius:13px}
.bd-pf-body{padding:12px}
.bd-pf-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.bd-pf-chip{font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15);border-radius:6px;
  padding:2px 6px;line-height:1.4}
.bd-pf-chip-acc{color:#1AA1F4;border-color:rgba(26,161,244,.4);background:rgba(26,161,244,.08)}
.bd-pf-name{color:#fff;font-size:14px;font-weight:700;margin:0}
.bd-pf-link{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.5);
  font-size:10.5px;font-weight:600;margin-top:6px;transition:color .35s ease}
.group:hover .bd-pf-link{color:#1AA1F4}
.bd-pf-link svg{transition:transform .35s ease}
.group:hover .bd-pf-link svg{transform:translate(3px,-3px)}
.bd-pf-linktext{position:relative}
.bd-pf-linktext::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:#1AA1F4;transition:width .4s ease}
.group:hover .bd-pf-linktext::after{width:100%}
/* Zone repliable « Voir plus » : les réalisations au-delà de data-visible (=4)
   sont rendues dans .bd-pf-extra. Ouverture ANIMÉE par grid-template-rows
   0fr -> 1fr (hauteur fluide, sans saut display) ; .bd-pf-extra-in clippe en
   overflow-hidden. Bascule via la classe .is-open posée sur .bd-pf-wrap par
   assets/js/portfolio.js. Neutralisé sous prefers-reduced-motion. */
.bd-pf-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.bd-pf-wrap.is-open .bd-pf-extra{grid-template-rows:1fr}
.bd-pf-extra-in{overflow:hidden;min-height:0}
/* Voir plus / Voir moins — bouton DISCRET : libellé + chevron en gris atténué
   qui passe en accent au survol ; le chevron pivote à l'ouverture. */
.bd-pf-more{display:flex;justify-content:center;margin-top:24px}
.bd-pf-morebtn{display:inline-flex;align-items:center;gap:6px;background:transparent;
  color:rgba(255,255,255,.5);border:0;border-radius:999px;padding:6px 12px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:color .3s ease}
.bd-pf-morebtn:hover{color:#1AA1F4}
.bd-pf-morebtn svg{opacity:.8;transition:transform .3s ease}
.bd-pf-morebtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.bd-pf-more[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .bd-pf-link,.bd-pf-link svg,.bd-pf-linktext::after{transition:none}
  .bd-pf-morebtn,.bd-pf-morebtn svg{transition:none}
  .bd-pf-extra{transition:none}
}
/* --- MOBILE Section 5 (< 640px, aligné sur le « sm » Tailwind) ---------------
   Objectif mobile UNIQUEMENT : remplacer le « Voir plus » par un CARROUSEL
   horizontal à défilement tactile + accroche (scroll-snap), même principe que le
   carrousel d'avis Trustindex (on swipe les cartes une par une).

   Les 5 cartes vivent dans DEUX conteneurs (.bd-pf-grid = 4, .bd-pf-extra-grid =
   1). Pour les réunir dans UNE seule piste sans toucher au markup ni au desktop,
   on aplatit ces conteneurs en display:contents : chaque carte devient enfant
   direct de .bd-pf-wrap, qui devient la piste de défilement. Préfixe .bd-pf-wrap
   pour primer sur les utilitaires Tailwind (CDN). Tablette/desktop (>=640px) :
   STRICTEMENT inchangés (4 colonnes + « Voir plus »). */
@media (max-width:639px){
  /* .bd-pf-wrap = piste du carrousel (défilement horizontal + snap). */
  .bd-pf-wrap{
    display:flex;flex-wrap:nowrap;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; /* garde l'élan dans le carrousel (pas de swipe-retour) */
    /* Marge latérale = (100% - largeur carte)/2 = (100-90)/2 = 5% : centre la
       carte active avec un léger aperçu symétrique des voisines. */
    padding:0 5% 4px;
    scrollbar-width:none;-ms-overflow-style:none; /* barre masquée (swipe) */
  }
  .bd-pf-wrap::-webkit-scrollbar{display:none}
  /* Aplatissement : toutes les cartes (visibles + « extra ») deviennent des
     slides directs de la piste ; neutralise le repli grid-template-rows. */
  .bd-pf-wrap .bd-pf-grid,
  .bd-pf-wrap .bd-pf-extra,
  .bd-pf-wrap .bd-pf-extra-in,
  .bd-pf-wrap .bd-pf-extra-grid{display:contents}
  /* Chaque carte = un slide (largeur réglée juste en dessous). Monter vers 100%
     = slide pleine largeur ; descendre = on voit davantage les voisines. La marge
     latérale de la piste doit valoir (100 - largeur)/2 pour un centrage net. */
  .bd-pf-wrap .bd-pf-card{
    flex:0 0 90%;max-width:90%; /* AJUSTABLE : largeur d'un slide (90% = cartes élargies) */
    /* snap au centre SANS arrêt forcé : on peut « flicker » à travers plusieurs
       cartes avec l'inertie, puis ça s'accroche en douceur (déplacement fluide). */
    scroll-snap-align:center;
    margin-top:0; /* .mt-4 de .bd-pf-extra-grid ne s'applique plus (display:contents) */
    /* Empêche la sélection de texte de « capturer » le geste : on peut désormais
       faire défiler le carrousel en glissant AUSSI sur le bas (texte) de la carte. */
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  }
  /* Plus de bouton « Voir plus » en mobile : le carrousel donne accès à tout. */
  .bd-pf-wrap .bd-pf-more{display:none}
  /* Mobile : PAS d'effet de survol (le :hover « colle » au tap) -> on ramène chaque
     effet de survol à son état de base. L'état « allumé » est piloté à la place par
     .is-active (carte centrée du carrousel), avec une transition douce (héritée des
     utilitaires) quand la carte arrive au centre. */
  .bd-pf-wrap .bd-pf-card:hover{transform:none;border-color:rgba(255,255,255,.1);box-shadow:none}
  .bd-pf-wrap .bd-pf-card:hover img{transform:none;filter:brightness(.8) saturate(.9)}
  .bd-pf-wrap .bd-spot:hover::before{opacity:0}
  .bd-pf-wrap .group:hover .bd-pf-link{color:rgba(255,255,255,.5)}
  .bd-pf-wrap .group:hover .bd-pf-link svg{transform:none}
  .bd-pf-wrap .group:hover .bd-pf-linktext::after{width:0}

  /* Carte ACTIVE = centrée -> « allumée » (équivalent du survol desktop) : bordure
     accent, halo, image avivée, lien + soulignement en accent. */
  .bd-pf-wrap .bd-pf-card.is-active{border-color:rgba(26,161,244,.5);
    box-shadow:none}
  .bd-pf-wrap .bd-pf-card.is-active::before{opacity:1}
  .bd-pf-wrap .bd-pf-card.is-active img{filter:brightness(1.05) saturate(1.1)}
  .bd-pf-wrap .bd-pf-card.is-active .bd-pf-link{color:#1AA1F4}
  .bd-pf-wrap .bd-pf-card.is-active .bd-pf-linktext::after{width:100%}
  .bd-pf-wrap .bd-pf-card.is-active .bd-pf-link svg{transform:translate(3px,-3px)}
}

/* --- TABLETTE PORTRAIT (768–1023px) : RÉALISATIONS en « 3 + 2 » ÉQUILIBRÉ -----
   Problème : les 5 cartes vivent dans DEUX grilles (.bd-pf-grid = 4 cartes,
   .bd-pf-extra-grid = 1). En 3 colonnes, la 1re grille donne 3+1 (4e carte collée
   à gauche) et la 5e s'ajoute dans une grille séparée -> jamais « 3+2 ».
   Solution (CSS seul) : on APLATIT les conteneurs (display:contents), comme le fait
   déjà le carrousel mobile, pour que les 5 cartes deviennent enfants directs de
   .bd-pf-wrap, transformé en FLEX centré : 3 cartes par rangée, la DERNIÈRE rangée
   (2 cartes) est CENTRÉE (pas collée à gauche, pas de vide à droite). Le « Voir
   plus » masque/révèle les cartes au-delà de 3 -> replié = 3 (rangée pleine),
   ouvert = 3 + 2. Mobile (<640) et desktop (>=1024) STRICTEMENT inchangés. */
@media (min-width:768px) and (max-width:1023px){
  .bd-pf-wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:flex-start}
  .bd-pf-wrap .bd-pf-grid,
  .bd-pf-wrap .bd-pf-extra,
  .bd-pf-wrap .bd-pf-extra-in,
  .bd-pf-wrap .bd-pf-extra-grid{display:contents}
  .bd-pf-wrap .bd-pf-card{
    flex:0 0 calc((100% - 2rem) / 3);   /* 3 cartes/rangée (2 gaps de 1rem) */
    max-width:calc((100% - 2rem) / 3);
    margin-top:0;                        /* neutralise le .mt-4 de .bd-pf-extra-grid */
  }
  /* Replié : seules 3 cartes visibles (rangée pleine équilibrée). La 4e (dans
     .bd-pf-grid) et la/les carte(s) « extra » sont masquées jusqu'au clic. */
  .bd-pf-wrap:not(.is-open) .bd-pf-grid .bd-pf-card:nth-child(n+4),
  .bd-pf-wrap:not(.is-open) .bd-pf-extra .bd-pf-card{display:none}
  /* « Voir plus » : sa propre rangée pleine largeur, centré, toujours fonctionnel
     (au clic .is-open -> révèle les cartes -> rendu final 3 + 2). */
  .bd-pf-wrap .bd-pf-more{flex:0 0 100%}
}

/* =========================================================================
 * Boutons CTA premium — halos & ombres (non pratiques en pur utilitaire).
 * hover du bouton 1 : bd-accent-dark (#1483C4) pour cohérence avec le thème.
 * ====================================================================== */
.bd-cta-primary{box-shadow:0 6px 18px -4px rgba(26,161,244,.5)}
.bd-cta-primary:hover{box-shadow:0 12px 26px -6px rgba(26,161,244,.7);background-color:#1483C4}
.bd-cta-ghost{box-shadow:inset 0 0 12px rgba(26,161,244,.15)}
.bd-cta-ghost:hover{box-shadow:0 0 22px rgba(26,161,244,.45),inset 0 0 16px rgba(26,161,244,.25)}
@media (prefers-reduced-motion:reduce){
  .bd-cta-primary,.bd-cta-ghost,.bd-cta-primary *,.bd-cta-ghost *{transition:none!important}
}

/* =========================================================================
 * CTA principal premium « Point pulsant + brillance + flèche » (.bd-cta-d)
 * ====================================================================== */
.bd-cta-d{background:linear-gradient(120deg,#1AA1F4,#1284cf);
  box-shadow:0 5px 14px -5px rgba(26,161,244,.45)}
/* hover : soulèvement discret (géré par Tailwind -translate-y-px) + ombre LÉGÈREMENT
   plus marquée mais douce */
.bd-cta-d:hover{box-shadow:0 8px 18px -6px rgba(26,161,244,.5)}
/* point blanc qui pulse */
.bd-cta-dot{width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:bdctapulse 2s infinite}
@keyframes bdctapulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
/* brillance qui balaye au survol */
.bd-cta-d::before{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .6s ease;z-index:1}
.bd-cta-d:hover::before{left:130%}
@media (prefers-reduced-motion:reduce){
  .bd-cta-d,.bd-cta-d *,.bd-cta-d::before{transition:none!important;animation:none!important}
}

/* =========================================================================
 * Section 2 (#pourquoi) — cascade « équation visuelle ».
 * Les .bd-reveal y sont entrecoupés de « + » (spans) et le RÉSULTAT vit dans
 * un parent distinct : les délais globaux :nth-child désordonneraient la
 * cascade. On cible donc précisément les 3 piliers <article> + le résultat
 * (seul .bd-reveal non-<article> de la section), pour finir par le résultat.
 * ====================================================================== */
#pourquoi article.bd-reveal:nth-of-type(1){transition-delay:.05s}
#pourquoi article.bd-reveal:nth-of-type(2){transition-delay:.15s}
#pourquoi article.bd-reveal:nth-of-type(3){transition-delay:.25s}
#pourquoi .bd-reveal:not(article){transition-delay:.4s}

/* =========================================================================
 * Section 2 (#pourquoi) — bloc RÉSULTAT « aurore + double faisceau comète ».
 * Empilement : aurore z0 < voile z1 < faisceau z2 < contenu z3.
 * overflow-hidden (utilitaire) clippe l'aurore floue aux coins arrondis ;
 * le faisceau est un anneau (mask) laissant le centre transparent.
 * ====================================================================== */
@property --bd-fx-a{syntax:'<angle>';initial-value:0deg;inherits:true}
.bd-result-fx{position:relative;background:#08182a;
  box-shadow:0 0 30px -10px rgba(26,161,244,.4);
  animation:bdFxRotate 8s linear infinite}
/* AURORE : dégradé conique NET (angle fixe 0deg) qui PIVOTE en bloc via transform, flouté.
   C'est le transform qui tourne (effet balayage d'origine), piloté par la variable. */
.bd-fx-aurora{position:absolute;inset:-50%;z-index:0;
  background:conic-gradient(from 0deg,#0c6dc4,#1AA1F4,#093f74,#1AA1F4,#0c6dc4);
  filter:blur(30px);opacity:.18;
  transform:rotate(var(--bd-fx-a));transform-origin:50% 50%}
.bd-fx-veil{position:absolute;inset:0;z-index:1;background:rgba(3,16,30,.6);border-radius:inherit}
/* FAISCEAU : l'angle anime le point de départ du conic (circule sur la bordure) */
.bd-fx-beam{position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--bd-fx-a),
    transparent 0deg,rgba(26,161,244,.15) 18deg,#1AA1F4 42deg,#9bdcff 50deg,transparent 62deg,
    transparent 180deg,rgba(26,161,244,.15) 198deg,#1AA1F4 222deg,#9bdcff 230deg,transparent 242deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(26,161,244,.8));pointer-events:none}
@keyframes bdFxRotate{to{--bd-fx-a:360deg}}
@supports not (background:conic-gradient(from var(--bd-fx-a),#000,#000)){
  .bd-result-fx{animation:none}
  .bd-fx-aurora{transform:none;background:radial-gradient(circle at 50% 30%,#0c6dc4,#08182a 70%)}
  .bd-fx-beam{background:none;border:1.5px solid rgba(26,161,244,.6)}
}
@media (prefers-reduced-motion:reduce){.bd-result-fx{animation:none}.bd-fx-aurora{transform:none}}

/* Section 2 (#pourquoi) — bloc résultat : allègement des effets GPU sous 640px
 * (on garde l'aurore + le faisceau animés, juste moins coûteux). Surcharge les
 * valeurs desktop des règles .bd-fx-aurora / .bd-fx-beam ci-dessus. */
@media (max-width: 640px){
  .bd-fx-aurora{filter:blur(18px);opacity:.14}
  .bd-fx-beam{padding:1.5px;filter:drop-shadow(0 0 3px rgba(26,161,244,.7))}
}
/* ==========================================================================
   Select cohérent avec les inputs (Section 8 — formulaire de contact)
   Réinitialise l'apparence native et ajoute un chevron accent #1AA1F4.
   ========================================================================== */
.bd-select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231AA1F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.85rem center;
  background-size:1.1rem;
  padding-right:2.5rem;            /* place pour la flèche, pas de texte dessous */
  line-height:1.5;                 /* aligne la hauteur sur les inputs */
}
/* l'option déroulée garde un fond sombre lisible (certains navigateurs) */
.bd-select option{background-color:#010D1A;color:#fff}
/* ==========================================================================
   Fond « double halo latéral » FIGÉ (Sections 2, 6, 8) — remplace les orbes
   animés .bd-amb (filter:blur animé, coûteux) par un simple background dégradé :
   deux lueurs bleues sur les côtés gauche/droite, sur le fond sombre #010D1A.
   Aucun élément, aucun blur animé -> performances allégées. Classe commune
   posée sur les 3 <section>. (Couleurs/positions ajustables.)
   NB : les anciennes définitions .bd-amb* / @keyframes bdAmb* ont été retirées
   (plus aucune section ne les utilise). Le result-fx de la S2 (aurora/comète)
   est un bloc SÉPARÉ, non concerné.
   ========================================================================== */
.bd-bg-sides{
  /* Lueurs latérales DIFFUSES en dégradé LINÉAIRE horizontal (et non radial) :
     le fondu est droit, depuis chaque bord G/D vers le centre -> AUCUNE courbe,
     donc plus d'« arcs » visibles. Deux bandes de lumière douces sur les côtés,
     fondu progressif (paliers) jusqu'à transparent vers ~40%. */
  background:
    linear-gradient(to right, rgba(26,161,244,0.10), rgba(26,161,244,0.03) 16%, transparent 40%),
    linear-gradient(to left,  rgba(26,161,244,0.08), rgba(26,161,244,0.024) 16%, transparent 40%),
    #010D1A;
}
/* Mobile (<640px) : luminosite des lueurs laterales reduite de ~30% (desktop et
   tablette inchanges). Base #010D1A conservee. */
@media (max-width:639.98px){
  .bd-bg-sides{
    background:
      linear-gradient(to right, rgba(26,161,244,0.07), rgba(26,161,244,0.021) 16%, transparent 40%),
      linear-gradient(to left,  rgba(26,161,244,0.056), rgba(26,161,244,0.017) 16%, transparent 40%),
      #010D1A;
  }
}
/* --- Mobile (<640px) : piliers et bloc résultat à hauteur uniforme, contenu centré --- */
@media (max-width:640px){
  #pourquoi .bd-reveal.bg-bd-surface,
  #pourquoi .bd-result-fx{
    min-height:120px;
    display:flex;flex-direction:column;justify-content:center;
  }
  /* piliers : texte à gauche conservé, seul le centrage vertical est imposé */
  #pourquoi .bd-reveal.bg-bd-surface{align-items:flex-start;text-align:left}
  #pourquoi .bd-result-fx{align-items:flex-start;text-align:left}
}

/* =========================================================================
 * Section 3 (#services) — disposition « liste + visuel » (style agence) :
 * à gauche la liste des 3 expertises (boutons / onglets), à droite un panneau
 * (.bd-exp-stage) qui affiche le détail de l'expertise active (survol/focus/clic,
 * piloté par assets/js/expertise.js). 1re active par défaut. Empilé <1024px :
 * liste masquée, panneaux empilés en flux (jusqu'à 1023.98px, tablette incluse ;
 * 2-col interactif réservé au desktop >=1024). Couleurs explicites (pas de bd-accent/NN).
 * ====================================================================== */
.bd-exp{display:grid;grid-template-columns:0.9fr 1.1fr;gap:32px;align-items:stretch;
  max-width:960px;margin:48px auto 0}
.bd-exp-left{display:flex;flex-direction:column}
.bd-exp-menu{display:flex;flex-direction:column;flex:1;justify-content:center}
.bd-exp-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  -webkit-appearance:none;appearance:none;background:none;border:none;
  border-bottom:1px solid rgba(255,255,255,.1);padding:18px 4px;cursor:pointer;
  font-family:inherit;-webkit-tap-highlight-color:transparent;transition:padding-left .3s}
.bd-exp-menu .bd-exp-item:last-child{border-bottom:none}
/* AUCUN fond dans aucun état (le bg natif du <button> est neutralisé) ; on
   GARDE uniquement le passage du libellé en blanc + le léger décalage. */
.bd-exp-item:hover,.bd-exp-item:focus,.bd-exp-item:focus-visible,
.bd-exp-item.is-active,.bd-exp-item:active{background:none;background-color:transparent}
.bd-exp-item:focus-visible{outline:2px solid rgba(26,161,244,.6);outline-offset:2px;background:none}
.bd-exp-mn{font-size:15px;font-weight:800;
  background:linear-gradient(160deg,#1AA1F4,#0d4d7a);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bd-exp-mt{font-size:17px;font-weight:700;color:rgba(255,255,255,.5);
  transition:color .3s,transform .3s}
.bd-exp-item:hover .bd-exp-mt,.bd-exp-item.is-active .bd-exp-mt{color:#fff;transform:translateX(3px)}
.bd-exp-ar{margin-left:auto;color:#1AA1F4;opacity:0;transition:opacity .3s,transform .3s}
.bd-exp-item.is-active .bd-exp-ar{opacity:1;transform:translateX(3px)}
/* Stage : empilement en GRID (tous les panneaux dans la MÊME cellule) -> le
   conteneur prend la hauteur du plus grand panneau, plus de coupure du contenu. */
.bd-exp-stage{position:relative;border-radius:18px;
  background:linear-gradient(160deg,#0e2237,#0a1726);border:1px solid rgba(26,161,244,.28);
  overflow:hidden;box-shadow:0 18px 40px -18px rgba(26,161,244,.45);display:grid}
.bd-exp-stage::after{content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;
  border-radius:50%;background:rgba(26,161,244,.18);filter:blur(50px);pointer-events:none;z-index:0}
.bd-exp-pane{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;
  padding:30px;opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;position:relative;z-index:1}
.bd-exp-pane.is-active{opacity:1;transform:none;pointer-events:auto}
.bd-exp-pn{font-size:46px;font-weight:800;line-height:1;margin-bottom:6px;
  background:linear-gradient(160deg,#1AA1F4,#5fb3f0);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bd-exp-h{color:#fff;font-size:18px;font-weight:700;margin:0 0 8px;line-height:1.3}
.bd-exp-p{color:rgba(255,255,255,.72);font-size:13px;margin:0 0 14px;line-height:1.55}
.bd-exp-ben{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bd-exp-ben li{display:flex;gap:9px;align-items:flex-start;color:rgba(255,255,255,.85);font-size:12.5px}
.bd-exp-chk{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(26,161,244,.18);
  color:#1AA1F4;display:flex;align-items:center;justify-content:center;font-size:9px;margin-top:1px}
/* CTA intégré DANS la colonne gauche, sous la liste (séparé par un trait, bien
   espacé pour ne pas paraître orphelin sous le dernier titre). */
.bd-exp-cta{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.bd-exp-cta-title{color:#fff;font-size:32px;font-weight:700;line-height:1.25;margin:0 0 4px}
.bd-exp-cta-sub{color:rgba(255,255,255,.6);font-size:14.5px;margin:0 0 14px;line-height:1.5}
.bd-exp-cta-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;
  border-radius:999px;padding:11px 22px;color:#fff;background:transparent;
  border:1.5px solid rgba(255,255,255,.5);text-decoration:none;cursor:pointer;
  transition:background .35s,color .35s,transform .35s}
.bd-exp-cta-btn:hover{background:#fff;color:#02101c;transform:translateY(-2px)}
.bd-exp-cta-btn svg{transition:transform .35s}
.bd-exp-cta-btn:hover svg{transform:translateX(3px)}
.bd-exp-cta-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* MOBILE & TABLETTE (<1024px) : pas de survol utile -> tout empilé, panneaux en
   flux (borne alignée sur BD_BP_DESKTOP=1024) ; la liste
   interactive est masquée, le CTA reste visible UNE fois, sous les panneaux. */
@media (max-width:1023.98px){
  .bd-exp{grid-template-columns:1fr;gap:14px}
  .bd-exp-menu{display:none}
  .bd-exp-left{order:2}                 /* CTA après les panneaux */
  .bd-exp-stage{order:1;position:static;min-height:0;background:none;border:none;box-shadow:none;
    display:flex;flex-direction:column;gap:14px}
  .bd-exp-stage::after{display:none}
  .bd-exp-pane{grid-area:auto;position:static;opacity:1;transform:none;pointer-events:auto;
    border:1px solid rgba(26,161,244,.28);border-radius:16px;
    background:linear-gradient(160deg,#0e2237,#0a1726);padding:22px}
  .bd-exp-cta{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .bd-exp-pane,.bd-exp-mt,.bd-exp-ar,.bd-exp-cta-btn{transition:none}
}

/* =========================================================================
 * Section 4 « Notre processus » — processus en 4 étapes ÉPINGLÉ au scroll
 *  - Base/fallback (mobile, OU desktop sans JS, OU mouvement réduit) : flux
 *    normal, cartes empilées, HUD masqué.
 *  - Mode épinglé : appliqué UNIQUEMENT quand assets/js/process.js a posé la
 *    classe .is-pinned sur .bd-proc (donc desktop + JS actif). Pin sticky,
 *    cartes superposées (une .is-active à la fois), HUD visible en bas.
 * ====================================================================== */

/* ---- base / fallback (mobile ET desktop-sans-JS) : flux normal ---- */
.bd-proc{margin-top:7rem;margin-bottom:7rem}
.bd-proc-scroll{position:relative}
.bd-proc-pin{position:relative}
.bd-proc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.bd-proc-hud{display:none}
.bd-proc-step{position:relative}
.bd-proc-header{margin-bottom:2rem} /* espacement en-tête ↔ cartes (mobile / fallback) */

/* Carte — dimensions DESKTOP (≈1,75x). Le fallback mobile est réduit plus bas. */
.bd-proc-card{background:var(--bd-surface,#0a1726);border:1px solid rgba(26,161,244,.4);
  border-radius:20px;padding:40px 34px;box-shadow:0 0 30px -12px rgba(26,161,244,.5);
  max-width:720px;margin:0 auto}
.bd-proc-top{display:flex;align-items:center;gap:18px}
.bd-proc-ic{position:relative;flex:none;width:72px;height:72px;border-radius:18px;
  background:rgba(26,161,244,.12);border:1px solid rgba(26,161,244,.3);color:#1AA1F4;
  display:flex;align-items:center;justify-content:center}
.bd-proc-ic svg{width:42px;height:42px}
.bd-proc-badge{position:absolute;top:-9px;right:-9px;width:28px;height:28px;border-radius:50%;
  background:#1AA1F4;color:#02101c;font-weight:800;font-size:14px;display:flex;
  align-items:center;justify-content:center;border:2px solid var(--bd-surface,#0a1726)}
.bd-proc-eyebrow{color:rgba(255,255,255,.4);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase}
.bd-proc-title{color:#fff;font-size:24px;font-weight:700;line-height:1.2}
.bd-proc-divider{height:1px;background:rgba(255,255,255,.08);margin:26px 0}
.bd-proc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.bd-proc-list li{display:flex;align-items:flex-start;gap:12px;color:rgba(255,255,255,.82);font-size:16px}
.bd-proc-chk{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(26,161,244,.15);
  color:#1AA1F4;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bd-proc-chk svg{width:16px;height:16px}
.bd-proc-prog{display:flex;gap:8px;justify-content:center}
.bd-proc-seg{height:4px;width:42px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .4s}
.bd-proc-seg.on{background:#1AA1F4;box-shadow:0 0 10px -1px rgba(26,161,244,.7)}
.bd-proc-counter{color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;text-align:center}

/* ===== MODE ÉPINGLÉ (desktop, classe .is-pinned posée par le JS) ===== */
.bd-proc.is-pinned .bd-proc-scroll{height:380vh}            /* longueur de scroll, ajustable */
.bd-proc.is-pinned .bd-proc-pin{
  position:sticky;
  top:var(--bd-proc-top, var(--bd-header-h, 0px));          /* top de centrage calculé en JS (repli = sous le header) */
  min-height:auto;                                          /* le bloc fait la hauteur de son contenu (pas plein écran) */
  display:flex; flex-direction:column; align-items:center;  /* centrage vertical assuré par --bd-proc-top */
  /* Halo « centre éclairci » SOLIDAIRE du bloc épinglé : comme .bd-proc-pin est
     sticky (reste à l'écran) et centré, ce radial reste FIXE derrière la carte
     pendant tout le défilement des étapes (au lieu de défiler avec #processus).
     Simple background -> aucun overflow/z-index/transform, sticky intact.
     Transparent hormis le centre bleuté -> ne masque pas le contenu (au-dessus). */
  background:radial-gradient(ellipse 72% 58% at 50% 50%, rgba(26,161,244,0.20), transparent 70%);
}
.bd-proc.is-pinned .bd-proc-header{
  margin:0 auto 2.5rem;                                     /* ÉCART FIXE titre<->carte (40px) */
}
.bd-proc.is-pinned .bd-proc-steps{
  position:relative; width:100%; max-width:720px;
  min-height:340px;                                         /* ~ hauteur carte (padding/espacements augmentés) ; ajustable */
}
.bd-proc.is-pinned .bd-proc-step{
  position:absolute; inset:0;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.bd-proc.is-pinned .bd-proc-step.is-active{
  opacity:1; transform:none; pointer-events:auto;
}
.bd-proc.is-pinned .bd-proc-hud{
  display:flex; flex-direction:column; align-items:center;
  margin-top:1.25rem;                                       /* HUD juste sous la carte (20px) */
}

/* ===== FALLBACK (<1024px : pas de pin) ===== */
@media (max-width:1023px){
  .bd-proc{margin-top:5rem;margin-bottom:5rem} /* mobile : marges réduites (desktop = 7rem/7rem) */
  .bd-proc.is-pinned .bd-proc-scroll,
  .bd-proc.is-pinned .bd-proc-pin{height:auto; min-height:0; position:static; padding-top:0}
  /* Hors mode épinglé (mobile/sans-JS) : pas de pin -> on neutralise le halo
     (sinon il se poserait sur le bloc statique, mal placé). */
  .bd-proc.is-pinned .bd-proc-pin{background:none}
  .bd-proc.is-pinned .bd-proc-steps{min-height:0}
  .bd-proc.is-pinned .bd-proc-step{position:static; opacity:1; transform:none; pointer-events:auto}
  .bd-proc.is-pinned .bd-proc-header{margin-bottom:2rem}
  .bd-proc.is-pinned .bd-proc-hud{display:none}

  /* La carte agrandie (desktop) est réduite pour rester lisible et ne pas déborder. */
  .bd-proc-card{max-width:100%;padding:22px 22px;border-radius:16px}
  .bd-proc-top{gap:14px}
  .bd-proc-ic{width:58px;height:58px;border-radius:14px}
  .bd-proc-ic svg{width:32px;height:32px}
  .bd-proc-badge{width:24px;height:24px;font-size:12px;top:-7px;right:-7px}
  .bd-proc-title{font-size:19px}
  .bd-proc-divider{margin:16px 0}
  .bd-proc-list{gap:10px}
  .bd-proc-list li{font-size:14px}
  .bd-proc-chk{width:22px;height:22px}
  .bd-proc-chk svg{width:14px;height:14px}
}

/* --- Hero « bloc résultat » : ligne titre (override de sm:text-2xl du CDN) ----
   En mode CDN, l'utilitaire .sm\:text-2xl (1.5rem / 2rem) est injecté à la volée
   et prime sur le thème ; on repasse par la spécificité d'ID pour fixer la taille. */
@media (min-width: 640px) {
  #bd-result-baseline.sm\:text-2xl {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }
}

/* --- Hero « bloc résultat » : séparateur « est égal à » (override de my-8 du CDN) ---
   .my-8 (2rem) est injecté à la volée par le CDN ; spécificité d'ID pour ajuster. */
#bd-result-sep.my-8 {
  margin-top: 2.3rem;
  margin-bottom: 2.3rem;
}

/* --- Hero « bloc résultat » : sous-titre (override de sm:text-lg du CDN) ---
   .sm\:text-lg (1.125rem) est injecté à la volée par le CDN ; spécificité d'ID
   pour réduire la taille sur ce seul élément (sans toucher les autres sm:text-lg). */
@media (min-width: 640px) {
  #bd-result-baseline-sub.sm\:text-lg {
    font-size: 0.9rem;
    line-height: 1.75rem;
  }
}

/* --- Hero « bloc résultat » : sous-titre en mobile (override de text-xs du CDN) ---
   .text-xs (0.75rem) est injecté à la volée par le CDN ; spécificité d'ID, scopé
   sous 640px pour ne toucher que le mobile (au-delà, c'est sm:text-lg qui prime). */
@media (max-width: 639.98px) {
  #bd-result-baseline-sub.text-xs {
    font-size: 0.875rem;
    line-height: 1rem;
  }
}

/* --- Hero « bloc résultat » : padding horizontal mobile (override de px-5 du CDN) ---
   .px-5 (1.25rem) est injecté par le CDN ; double classe pour primer, scopé sous
   640px (au-delà, sm:px-6 gouverne). */
@media (max-width: 639.98px) {
  .bd-result-fx.px-5 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* --- Section FAQ : sous-titre (override de mt-4 du CDN) ---
   .mt-4 (1rem) injecte par le CDN ; specificite d'ID pour ajouter un espace
   sous le sous-titre, sans toucher les autres .mt-4 du site. */
#faq .mt-4 {
  margin-top: 1rem;
  margin-bottom: 2.3rem;
}

/* --- Section FAQ : reponses riches (listes a puces dans certaines reponses).
   Tailwind CDN (preflight) reinitialise les <ul> ; on retablit puces + espacement. */
.bd-faq-a-in ul{list-style:disc;margin:0;padding:0 20px 20px 40px}
.bd-faq-a-in li{margin:0 0 6px;line-height:1.55;color:rgba(255,255,255,.82)}
.bd-faq-a-in li:last-child{margin-bottom:0}