/*
Theme Name: Benjamin Liégeois Child
Theme URI: https://benjaminliegeois.fr
Description: Thème enfant GeneratePress pour le site de Benjamin Liégeois, consultant SEO/SEA premium sur la Côte d'Azur. Design system agency-grade : palette restreinte, fluid typography, grille 8px, transitions soyeuses.
Author: Benjamin Liégeois
Author URI: https://benjaminliegeois.fr
Template: generatepress
Version: 2.0.0
Requires at least: 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: iron-link-child
*/

/* ==========================================================================
   01 · DESIGN TOKENS
   Palette restreinte WCAG AAA + grille 8px + fluid typo + easing soyeux
   ========================================================================== */

:root {

    /* --- Palette chromatique (8 couleurs significatives) ----------------- */

    --c-ink:          #0f1830;    /* texte principal — bleu nuit off-black */
    --c-ink-2:        #2d3a5a;    /* sub-text / titres muted */
    --c-ink-3:        #4a5168;    /* tertiaire (AAA sur paper) */
    --c-paper:        #faf9f6;    /* background — off-white chaud */
    --c-paper-2:      #f3f1ec;    /* surface secondaire */
    --c-paper-3:      #ffffff;    /* blanc pur — cards uniquement */
    --c-line:         rgba(15, 24, 48, 0.08);
    --c-line-strong:  rgba(15, 24, 48, 0.14);

    --c-accent:        #f4ce5a;   /* jaune signature — bg + borders */
    --c-accent-bright: #f7da82;   /* jaune lighten — hover sur bg accent */
    --c-accent-deep:   #5c4a0a;   /* texte sur fond clair — AAA 7:1 sur paper */
    --c-accent-glow:   #f9e091;   /* sur fond sombre (eyebrow, glow) */
    --c-accent-tint:   rgba(244, 206, 90, 0.12); /* highlight subtle */
    --c-accent-halo:   rgba(244, 206, 90, 0.22); /* halo focus ring */

    --c-success:      #2d6a4f;
    --c-success-tint: rgba(45, 106, 79, 0.12);

    /* --- Palette "Mer" (skin homepage — fond dégradé bleu profond → azur) - */
    --c-sea-abyss:   #061230;    /* nuit / profondeurs */
    --c-sea-deep:    #0c2349;    /* océan profond */
    --c-sea-medium:  #143d77;    /* méditerranée */
    --c-sea-azur:    #1d56a8;    /* azur lumineux */
    --c-sea-shallow: #2d6cb8;    /* hauts-fonds */

    --bl-sea-gradient: linear-gradient(180deg,
        var(--c-sea-abyss)  0%,
        var(--c-sea-deep)   28%,
        var(--c-sea-medium) 60%,
        var(--c-sea-azur)   100%);

    /* --- Aliases legacy (préservent les sélecteurs existants) ------------ */

    --bl-primary:        var(--c-ink);
    --bl-primary-dark:   #07101f;
    --bl-primary-light:  var(--c-ink-2);
    --bl-accent:         var(--c-accent);
    --bl-accent-dark:    var(--c-accent-deep);
    --bl-accent-light:   var(--c-accent-glow);
    --bl-background:     var(--c-paper);
    --bl-surface:        var(--c-paper-2);
    --bl-text-primary:   var(--c-ink);
    --bl-text-secondary: var(--c-ink-3);
    --bl-border:         var(--c-line);

    /* --- Typographies ---------------------------------------------------- */

    --ff-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --bl-font-heading: var(--ff-heading);
    --bl-font-body:    var(--ff-body);

    /* --- Fluid typography scale (clamp partout, zéro breakpoint) -------- */

    --fs-1:  clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);  /* 12 -> 13 */
    --fs-2:  clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);  /* 13 -> 14 */
    --fs-3:  clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);      /* 15 -> 16 */
    --fs-4:  clamp(1rem,     0.96rem + 0.22vw, 1.125rem);   /* 16 -> 18 */
    --fs-5:  clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem);  /* 18 -> 21 */
    --fs-6:  clamp(1.25rem,  1.13rem + 0.6vw,  1.625rem);   /* 20 -> 26 */
    --fs-7:  clamp(1.5rem,   1.28rem + 1.1vw,  2.125rem);   /* 24 -> 34 */
    --fs-8:  clamp(1.875rem, 1.5rem + 1.88vw,  2.875rem);   /* 30 -> 46 */
    --fs-9:  clamp(2.25rem,  1.65rem + 3vw,    4rem);       /* 36 -> 64 */
    --fs-10: clamp(2.75rem,  1.85rem + 4.5vw,  5.25rem);    /* 44 -> 84 */

    /* Aliases legacy */
    --bl-fs-body:      var(--fs-4);
    --bl-lh-body:      1.65;
    --bl-lh-heading:   1.1;

    /* --- Grille modulaire 8px (système strict) --------------------------- */

    --s-0: 0;
    --s-1: 0.25rem;  /* 4  */
    --s-2: 0.5rem;   /* 8  */
    --s-3: 1rem;     /* 16 */
    --s-4: 1.5rem;   /* 24 */
    --s-5: 2rem;     /* 32 */
    --s-6: 3rem;     /* 48 */
    --s-7: 4rem;     /* 64 */
    --s-8: 6rem;     /* 96 */
    --s-9: 8rem;     /* 128 */
    --s-10: 10rem;   /* 160 */

    /* Aliases legacy (préservent les espacements existants) */
    --bl-space-1: var(--s-2);
    --bl-space-2: var(--s-3);
    --bl-space-3: var(--s-4);
    --bl-space-4: var(--s-5);
    --bl-space-5: var(--s-6);
    --bl-space-6: var(--s-7);
    --bl-space-7: var(--s-8);
    --bl-space-8: var(--s-9);

    /* --- Layout (max-widths) -------------------------------------------- */

    --w-narrow: 720px;   /* lecture confortable */
    --w-base:   1200px;  /* container standard */
    --w-wide:   1360px;  /* container large */
    --w-prose:  640px;   /* prose / long form */

    --bl-container:        var(--w-base);
    --bl-container-wide:   var(--w-wide);
    --bl-container-narrow: var(--w-narrow);

    /* --- Radius (échelle compacte) --------------------------------------- */

    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-4: 20px;
    --r-pill: 999px;

    --bl-radius-sm: var(--r-1);
    --bl-radius-md: var(--r-2);
    --bl-radius-lg: var(--r-3);
    --bl-radius-full: var(--r-pill);

    /* --- Ombres (premium, multi-layered) -------------------------------- */

    --shadow-1: 0 1px 2px rgba(15, 24, 48, 0.04),
                0 1px 1px rgba(15, 24, 48, 0.03);
    --shadow-2: 0 4px 12px rgba(15, 24, 48, 0.06),
                0 2px 4px rgba(15, 24, 48, 0.04);
    --shadow-3: 0 12px 28px rgba(15, 24, 48, 0.10),
                0 6px 10px rgba(15, 24, 48, 0.05);
    --shadow-4: 0 24px 48px rgba(15, 24, 48, 0.14),
                0 12px 18px rgba(15, 24, 48, 0.06);
    --shadow-gold: 0 12px 32px rgba(244, 206, 90, 0.28);

    --bl-shadow-sm: var(--shadow-1);
    --bl-shadow-md: var(--shadow-2);
    --bl-shadow-lg: var(--shadow-3);

    /* --- Courbes d'accélération (soyeuses) ------------------------------- */

    --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);     /* signature: out-expo */
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);     /* symétrique soft */
    --ease-snap:    cubic-bezier(0.16, 1.08, 0.4, 1);   /* léger overshoot */
    --ease-fast:    cubic-bezier(0.4, 0, 0.2, 1);       /* material soft */

    /* --- Durées ---------------------------------------------------------- */

    --t-instant: 120ms;
    --t-fast:    200ms;
    --t-base:    320ms;
    --t-slow:    520ms;
    --t-glide:   720ms;

    --bl-transition-fast: var(--t-fast)  var(--ease-out);
    --bl-transition-base: var(--t-base)  var(--ease-out);
    --bl-transition-slow: var(--t-slow)  var(--ease-out);

    /* --- Z-index scale --------------------------------------------------- */

    --z-base:     1;
    --z-elevated: 10;
    --z-sticky:   80;
    --z-float:    90;
    --z-header:   100;
    --z-backdrop: 105;
    --z-drawer:   110;
    --z-toggle:   120;
    --z-modal:    200;
}

/* ==========================================================================
   02 · RESET & BASE
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-4);
    line-height: 1.65;
    color: var(--c-ink);
    background-color: var(--c-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    min-width: 320px;
    font-feature-settings: "kern", "liga", "ss01";
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

/* ==========================================================================
   03 · TYPOGRAPHY
   Hiérarchie fluide via clamp(), letter-spacing optimisé serif/sans
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    font-weight: 500;
    line-height: 1.12;
    color: var(--c-ink);
    letter-spacing: -0.018em;
    text-wrap: balance;
}

h1, .h1 {
    font-size: var(--fs-9);
    line-height: 1.04;
    letter-spacing: -0.025em;
}

h2, .h2 {
    font-size: var(--fs-8);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h3, .h3 {
    font-size: var(--fs-6);
    line-height: 1.2;
    letter-spacing: -0.012em;
}

h4 { font-size: var(--fs-5); }
h5 { font-size: var(--fs-4); }
h6 { font-size: var(--fs-3); }

p { margin-bottom: var(--s-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--c-ink); }

em, i { font-style: italic; }

a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--t-fast) var(--ease-out),
                text-decoration-color var(--t-fast) var(--ease-out);
}

a:hover {
    color: var(--c-accent-deep);
    text-decoration-color: var(--c-accent-deep);
}

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-4); }
li { margin-bottom: var(--s-1); }

::selection { background-color: var(--c-accent); color: var(--c-ink); }

/* ==========================================================================
   04 · LAYOUT — CONTAINERS & GRIDS
   Padding inline fluide, jamais de scroll horizontal
   ========================================================================== */

.bl-container,
.bl-container-wide,
.bl-container-narrow {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 0.7rem + 1.2vw, 2rem);
}

.bl-container        { max-width: var(--w-base); }
.bl-container-wide   { max-width: var(--w-wide); }
.bl-container-narrow { max-width: var(--w-narrow); }

.bl-main {
    min-height: 60vh;
    isolation: isolate;
}

.bl-main:focus { outline: none; }

/* --- Grilles modulaires ----------------------------------------------- */

.bl-grid {
    display: grid;
    gap: var(--s-4);
}

.bl-grid-2,
.bl-grid-3,
.bl-grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .bl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .bl-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .bl-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .bl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .bl-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .bl-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.bl-grid-loose { gap: var(--s-5); }

/* ==========================================================================
   05 · BUTTONS
   Système unifié — hover lift GPU-accelerated, focus ring soyeux
   ========================================================================== */

.bl-btn {
    --btn-bg:     var(--c-ink);
    --btn-color:  var(--c-paper);
    --btn-border: var(--c-ink);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    min-height: 44px;
    font-family: var(--ff-body);
    font-size: var(--fs-3);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-1);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    will-change: transform;
    transition: background-color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}

.bl-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.bl-btn:active {
    transform: translateY(0);
    box-shadow: none;
    transition-duration: 80ms;
}

.bl-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

/* Variantes */

.bl-btn-primary {
    --btn-bg:     var(--c-ink);
    --btn-color:  var(--c-paper);
    --btn-border: var(--c-ink);
}

.bl-btn-primary:hover {
    --btn-bg:     var(--c-accent);
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-accent);
}

.bl-btn-gold {
    --btn-bg:     var(--c-accent);
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-accent);
    font-weight: 600;
}

/* Hover natural — garde l'identité or, lighten subtil + glow */
.bl-btn-gold:hover {
    --btn-bg:     var(--c-accent-bright);
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-accent-bright);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(244, 206, 90, 0.42),
                0 0 0 4px var(--c-accent-halo);
}

.bl-btn-gold:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(244, 206, 90, 0.3);
}

.bl-btn-outline {
    --btn-bg:     transparent;
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-ink);
}

.bl-btn-outline:hover {
    --btn-bg:     var(--c-ink);
    --btn-color:  var(--c-paper);
}

.bl-btn-secondary {
    --btn-bg:     transparent;
    --btn-color:  var(--c-accent-deep);
    --btn-border: var(--c-accent);
}

.bl-btn-secondary:hover {
    --btn-bg:     var(--c-accent);
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-accent);
}

/* Sur fond sombre */
.bl-section-dark .bl-btn-outline {
    --btn-color:  var(--c-paper);
    --btn-border: rgba(250, 249, 246, 0.5);
}

.bl-section-dark .bl-btn-outline:hover {
    --btn-bg:     var(--c-paper);
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-paper);
}

/* Tailles */
.bl-btn-large {
    padding: var(--s-3) var(--s-5);
    font-size: var(--fs-4);
    min-height: 52px;
}

/* ==========================================================================
   06 · SECTIONS
   Padding-block fluide pour rythme vertical naturel
   ========================================================================== */

.bl-section {
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
    position: relative;
}

.bl-section-tight { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }

.bl-section-dark {
    background-color: var(--c-ink);
    color: rgba(250, 249, 246, 0.88);
}

.bl-section-dark h1,
.bl-section-dark h2,
.bl-section-dark h3,
.bl-section-dark h4,
.bl-section-dark h5,
.bl-section-dark h6 { color: var(--c-paper); }

.bl-section-dark strong { color: var(--c-paper); }

.bl-section-dark a {
    color: var(--c-accent-glow);
    text-decoration-color: var(--c-accent);
}

.bl-section-dark a:hover { color: var(--c-accent); }

/* Boutons solides : ne pas hériter de la couleur lien dorée */
.bl-section-dark a.bl-btn-gold,
.bl-section-dark a.bl-btn-gold:hover { color: var(--c-ink); }
.bl-section-dark a.bl-btn-ghost,
.bl-section-dark a.bl-btn-outline { color: var(--c-paper); }
.bl-section-dark a.bl-btn-ghost:hover,
.bl-section-dark a.bl-btn-outline:hover { color: var(--c-ink); }

.bl-section-cream { background-color: var(--c-paper-2); }

.bl-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--s-6);
}

.bl-section-header p {
    color: var(--c-ink-3);
    font-size: var(--fs-5);
    margin-top: var(--s-2);
}

.bl-section-dark .bl-section-header p { color: rgba(250, 249, 246, 0.75); }

/* ==========================================================================
   07 · BADGES (pills uppercase, tracking étendu)
   ========================================================================== */

.bl-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.875rem;
    border-radius: var(--r-pill);
    font-family: var(--ff-body);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    background-color: var(--c-paper-2);
    color: var(--c-ink);
}

.bl-badge-popular   { background-color: var(--c-accent); color: var(--c-ink); }
.bl-badge-roi       { background-color: var(--c-success); color: var(--c-paper); }
.bl-badge-tendance  { background-color: var(--c-ink-2); color: var(--c-paper); }
.bl-badge-cote-azur { background-color: var(--c-accent-glow); color: var(--c-ink); }
.bl-badge-outline   {
    background-color: transparent;
    color: var(--c-accent-deep);
    border: 1px solid var(--c-accent);
}

/* ==========================================================================
   08 · CARDS
   Lift au hover via transform — toujours GPU
   ========================================================================== */

.bl-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
    will-change: transform;
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out);
}

.bl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
    border-color: var(--c-line-strong);
}

.bl-card > :last-child { margin-bottom: 0; }
.bl-card h3 { margin-bottom: var(--s-2); }

/* Card service */
.bl-card-service { height: 100%; }

.bl-card-icon {
    width: 44px;
    height: 44px;
    color: var(--c-accent);
    margin-bottom: var(--s-2);
}

.bl-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
}

.bl-card-list li {
    position: relative;
    padding-left: var(--s-4);
    margin-bottom: var(--s-1);
    color: var(--c-ink-3);
    font-size: var(--fs-3);
    line-height: 1.55;
}

.bl-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 2px;
    background-color: var(--c-accent);
    border-radius: 2px;
}

.bl-card-cta {
    margin-top: auto;
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-3);
    transition: gap var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-card-cta:hover {
    color: var(--c-accent-deep);
    gap: var(--s-2);
}

/* Card testimonial */
.bl-card-testimonial {
    background-color: var(--c-paper-2);
    border: none;
}

.bl-card-testimonial blockquote {
    margin: 0 0 var(--s-3);
    padding: 0;
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    font-style: italic;
    line-height: 1.5;
}

.bl-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-3);
    color: var(--c-ink-3);
}

.bl-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--c-ink-2);
    flex-shrink: 0;
}

/* Card vertical */
.bl-card-vertical { border-left: 3px solid var(--c-accent); }

/* Card case study */
.bl-card-case-study {
    padding: var(--s-5);
    gap: var(--s-3);
    background-color: var(--c-paper-2);
}

.bl-card-case-study:hover { background-color: var(--c-paper-3); }

.bl-case-logo {
    height: 48px;
    display: flex;
    align-items: center;
    margin-bottom: var(--s-2);
}

.bl-case-logo-text {
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    color: var(--c-ink);
    letter-spacing: 0.04em;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
}

/* Logo client officiel (image) dans les cards études de cas */
.bl-case-logo-img {
    display: block;
    max-width: 160px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Mobile : réduire la taille des logos textes pour éviter le débordement */
@media (max-width: 639.98px) {
    .bl-case-logo-text { font-size: var(--fs-4); letter-spacing: 0.02em; }
    .bl-case-logo { height: auto; min-height: 40px; }
}

/* Garantir que les cards case-study ne débordent jamais de leur grid cell */
.bl-card-case-study {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ==========================================================================
   09 · FORMS
   ========================================================================== */

.bl-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
    min-width: 0;
}

.bl-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    min-width: 0;
}

.bl-form-row > * { min-width: 0; }
.bl-form-row .bl-form-field { margin-bottom: 0; }

@media (min-width: 768px) {
    .bl-form-row { grid-template-columns: 1fr 1fr; }
}

.bl-form-label {
    font-size: var(--fs-2);
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: 0.02em;
}

.bl-form-required { color: var(--c-accent-deep); }

.bl-form-field input,
.bl-form-field select,
.bl-form-field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-1);
    font-family: var(--ff-body);
    font-size: var(--fs-3);
    color: var(--c-ink);
    line-height: 1.5;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}

.bl-form-field select {
    -webkit-appearance: menulist;
    appearance: menulist;
}

.bl-form-field input:focus,
.bl-form-field select:focus,
.bl-form-field textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-tint);
}

.bl-form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.bl-form-note {
    background-color: var(--c-accent-tint);
    border-left: 3px solid var(--c-accent);
    padding: 0.75rem 1rem;
    font-size: var(--fs-2);
    color: var(--c-ink-3);
    margin-bottom: var(--s-3);
    border-radius: 0 var(--r-1) var(--r-1) 0;
}

.bl-form-rgpd {
    font-size: var(--fs-1);
    color: var(--c-ink-3);
    margin: var(--s-2) 0 0;
    line-height: 1.5;
}

/* ==========================================================================
   10 · UTILITIES & ANIMATIONS
   Animations 100% GPU (transform / opacity uniquement)
   ========================================================================== */

.bl-text-center    { text-align: center; }
.bl-text-balance   { text-wrap: balance; }

.bl-eyebrow {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--c-accent-deep);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: var(--s-2);
}

.bl-section-dark .bl-eyebrow { color: var(--c-accent-glow); }

/* Skip link */
.bl-skip-link:focus {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: var(--z-modal);
    width: auto;
    height: auto;
    padding: 0.75rem 1.25rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    background-color: var(--c-ink);
    color: var(--c-paper);
    text-decoration: none;
    border-radius: var(--r-1);
    box-shadow: var(--shadow-3);
}

/* Visually hidden */
.bl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fade-up animation */
.bl-fade-up {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
    will-change: opacity, transform;
}

.bl-fade-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .bl-fade-up { opacity: 1; transform: none; }
}

/* ==========================================================================
   11 · HEADER
   Sticky soyeux, dropdown sophistiqué, logo affirmé
   ========================================================================== */

.bl-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    background-color: transparent;
    transition: padding-block var(--t-base) var(--ease-out),
                background-color var(--t-base) var(--ease-out);
}

/* Mobile / tablette : pill flottant frosted au scroll (parité desktop) */
@media (max-width: 1023.98px) {
    .bl-header {
        top: var(--s-3);
        margin-top: var(--s-3);
    }

    .bl-header.is-scrolled .bl-header-inner {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        background-color: rgba(15, 24, 48, 0.35);
        backdrop-filter: saturate(180%) blur(28px);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-pill);
        box-shadow: var(--shadow-3);
        padding-block: var(--s-2);
        padding-inline: var(--s-3);
        gap: var(--s-4);
    }

    .bl-header.is-scrolled .bl-logo,
    .bl-header.is-scrolled .bl-logo-name {
        color: var(--c-paper);
    }

    .bl-header.is-scrolled .bl-logo-tagline {
        color: rgba(255, 255, 255, 0.65);
    }

    .bl-header.is-scrolled .bl-menu-toggle-icon span {
        background-color: var(--c-paper);
    }
}

@media (min-width: 1024px) {
    .bl-header.is-scrolled {
        padding-block: var(--s-3);
        padding-inline: var(--s-5);
    }
}

.bl-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block: var(--s-3);
    flex-wrap: nowrap;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    transition: background-color var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out),
                border-radius var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                padding var(--t-base) var(--ease-out),
                max-width var(--t-base) var(--ease-out);
}

@media (min-width: 1024px) {
    .bl-header-inner { padding-block: var(--s-4); }

    /* ---- Scrolled state : pill flottant (contracté, verre dépoli) ---- */
    .bl-header.is-scrolled .bl-header-inner {
        background-color: rgba(15, 24, 48, 0.35);
        backdrop-filter: saturate(180%) blur(28px);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-pill);
        box-shadow: var(--shadow-3);
        padding-block: var(--s-2);
        padding-inline: var(--s-4);
        max-width: 1080px;
    }

    .bl-header.is-scrolled .bl-logo,
    .bl-header.is-scrolled .bl-nav-link {
        color: var(--c-paper);
    }

    .bl-header.is-scrolled .bl-logo-tagline {
        color: rgba(255, 255, 255, 0.65);
    }
}

/* Logo */
.bl-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--c-ink);
    line-height: 1;
    flex-shrink: 0;
    transition: opacity var(--t-fast) var(--ease-out),
                color var(--t-base) var(--ease-out);
}

.bl-logo:hover { opacity: 0.7; color: var(--c-ink); }

.bl-logo-name {
    font-family: var(--ff-heading);
    font-size: clamp(1.3125rem, 1.25rem + 0.32vw, 1.625rem);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.05;
    white-space: nowrap;
}

.bl-logo-tagline {
    font-family: var(--ff-body);
    font-size: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem);
    font-weight: 500;
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--t-base) var(--ease-out);
}

/* Nav desktop */
.bl-nav-desktop { display: none; }

@media (min-width: 1024px) {
    .bl-nav-desktop {
        display: block;
        flex: 1;
        margin-inline: var(--s-5);
    }
}

.bl-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bl-nav-list li { margin: 0; }

.bl-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-3);
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    padding-block: var(--s-2);
    transition: color var(--t-fast) var(--ease-out);
}

.bl-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--c-accent);
    transform: translateX(-50%);
    transition: width var(--t-base) var(--ease-out);
}

.bl-nav-link:hover { color: var(--c-accent-deep); }
.bl-nav-link:hover::after,
.bl-nav-item.bl-nav-has-children:hover .bl-nav-link::after,
.bl-nav-item:focus-within .bl-nav-link::after { width: 100%; }

/* Dropdown */
.bl-nav-has-children { position: relative; }

.bl-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-3);
    list-style: none;
    margin: 0;
    padding: var(--s-1);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -8px, 0);
    transition: opacity var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out),
                visibility var(--t-base);
    z-index: var(--z-elevated);
    will-change: opacity, transform;
}

.bl-nav-has-children:hover > .bl-nav-dropdown,
.bl-nav-has-children:focus-within > .bl-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.bl-nav-dropdown li { margin: 0; }

.bl-nav-dropdown a {
    display: block;
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-3);
    color: var(--c-ink);
    text-decoration: none;
    border-radius: var(--r-1);
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-nav-dropdown a:hover {
    background-color: var(--c-paper-2);
    color: var(--c-accent-deep);
}

/* Header CTA */
.bl-header-cta { display: none; }

@media (min-width: 1024px) {
    .bl-header-cta {
        display: inline-flex;
        font-size: var(--fs-3);
        padding: var(--s-2) var(--s-4);
        border-radius: var(--r-pill);
    }
}

/* Hamburger toggle */
.bl-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.bl-menu-toggle:hover,
.bl-menu-toggle:focus,
.bl-menu-toggle:focus-visible,
.bl-menu-toggle:active {
    background: transparent;
    outline: none;
}

@media (min-width: 1024px) {
    .bl-menu-toggle { display: none; }
}

.bl-menu-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 18px;
    position: relative;
}

.bl-menu-toggle-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-ink);
    border-radius: 2px;
    transition: transform var(--t-base) var(--ease-out),
                opacity var(--t-base) var(--ease-out),
                background-color var(--t-base) var(--ease-out);
    transform-origin: center;
}

body.bl-menu-open .bl-menu-toggle-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.bl-menu-open .bl-menu-toggle-icon span:nth-child(2) { opacity: 0; }
body.bl-menu-open .bl-menu-toggle-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.bl-menu-open .bl-menu-toggle {
    z-index: var(--z-toggle);
    position: relative;
}

/* Mobile drawer */
.bl-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 100%);
    height: 100vh;
    height: 100dvh;
    background-color: var(--c-paper);
    box-shadow: var(--shadow-4);
    transform: translate3d(100%, 0, 0);
    transition: transform var(--t-slow) var(--ease-out);
    z-index: var(--z-drawer);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--s-5) + 60px) var(--s-5) var(--s-5);
    visibility: hidden;
    touch-action: pan-y;
    will-change: transform;
}

.bl-mobile-drawer.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

.bl-drawer-close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-1);
    color: var(--c-ink);
    cursor: pointer;
    padding: 0;
    z-index: 1;
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}

.bl-drawer-close:hover,
.bl-drawer-close:focus-visible {
    background-color: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
    outline: none;
}

.bl-menu-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 24, 48, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--z-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out),
                visibility var(--t-base);
    cursor: pointer;
}

.bl-menu-backdrop.is-open { opacity: 1; visibility: visible; }

body.bl-menu-open { overflow: hidden; }

.bl-mobile-nav .bl-mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bl-mobile-nav .bl-mobile-item {
    margin: 0;
    border-bottom: 1px solid var(--c-line);
}

.bl-mobile-nav .bl-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--s-3) 0;
    color: var(--c-ink);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-3);
    font-weight: 500;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out);
}

.bl-mobile-nav .bl-mobile-link:hover,
.bl-mobile-nav .bl-mobile-link:focus-visible {
    color: var(--c-accent-deep);
    outline: none;
}

/* Accordéon Services — parité visuelle avec le dropdown desktop :
   le sous-menu se déploie comme une "carte élevée" (paper-3, border, r-2)
   et chaque item adopte le même langage que les rows du dropdown desktop. */
.bl-mobile-chevron {
    display: inline-block;
    font-size: 0.85em;
    line-height: 1;
    color: var(--c-accent-deep);
    transition: transform var(--t-base) var(--ease-out);
}

.bl-mobile-toggle[aria-expanded="true"] .bl-mobile-chevron {
    transform: rotate(180deg);
}

/* État actif du parent quand son sous-menu est ouvert
   (équivalent du hover desktop sur l'item parent) */
.bl-mobile-has-children.is-open > .bl-mobile-toggle {
    color: var(--c-accent-deep);
}

.bl-mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0 var(--s-1);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: var(--c-paper-3);
    border: 1px solid transparent;
    border-radius: var(--r-2);
    transition: max-height var(--t-slow) var(--ease-out),
                padding var(--t-base) var(--ease-out),
                margin var(--t-base) var(--ease-out),
                opacity var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out);
}

.bl-mobile-has-children.is-open .bl-mobile-submenu {
    max-height: 720px;
    padding: var(--s-1);
    margin: 0 0 var(--s-3);
    opacity: 1;
    border-color: var(--c-line);
}

.bl-mobile-submenu li {
    margin: 0;
}

.bl-mobile-submenu a {
    display: block;
    padding: var(--s-2) var(--s-3);
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--fs-3);
    font-weight: 400;
    border-radius: var(--r-1);
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-mobile-submenu a:hover,
.bl-mobile-submenu a:focus-visible {
    background-color: var(--c-paper-2);
    color: var(--c-accent-deep);
    outline: none;
}

.bl-mobile-cta {
    width: 100%;
    margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   Drawer mobile — carte flottante centrée (parité visuelle avec la pill).
   Le drawer contient son propre logo + croix, qui animent avec lui.
   Le header de page est masqué le temps que le drawer soit ouvert.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .bl-mobile-drawer {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: auto;
        max-height: calc(100dvh - 2 * var(--s-3));
        margin: var(--s-3);
        background-color: rgba(15, 24, 48, 0.55);
        backdrop-filter: saturate(180%) blur(28px);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-4);
        padding: var(--s-4);
        transform: translate3d(0, -12px, 0);
        opacity: 0;
        transition: transform var(--t-base) var(--ease-out),
                    opacity var(--t-base) var(--ease-out),
                    visibility var(--t-base);
    }

    .bl-mobile-drawer.is-open {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    /* Bandeau supérieur dans le drawer : logo + croix */
    .bl-drawer-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        margin-bottom: var(--s-3);
    }

    .bl-drawer-logo,
    .bl-drawer-logo:hover { color: var(--c-paper); }

    .bl-drawer-logo .bl-logo-tagline { color: rgba(255, 255, 255, 0.65); }

    /* Croix : repositionnée dans le flux du bandeau (plus en absolute) */
    .bl-drawer-close {
        position: static;
        top: auto;
        right: auto;
        color: var(--c-paper);
        border-color: rgba(255, 255, 255, 0.22);
        flex-shrink: 0;
    }

    .bl-drawer-close:hover,
    .bl-drawer-close:focus-visible {
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--c-paper);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Le header de la page disparaît tant que le menu est ouvert. */
    body.bl-menu-open .bl-header { visibility: hidden; }

    /* Items du menu : blanc sur fond sombre */
    .bl-mobile-nav .bl-mobile-link { color: var(--c-paper); }

    .bl-mobile-nav .bl-mobile-item {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .bl-mobile-nav .bl-mobile-item:last-of-type { border-bottom: 0; }

    .bl-mobile-nav .bl-mobile-link:hover,
    .bl-mobile-nav .bl-mobile-link:focus-visible {
        color: var(--c-accent);
    }

    .bl-mobile-chevron { color: rgba(255, 255, 255, 0.65); }

    .bl-mobile-has-children.is-open > .bl-mobile-toggle {
        color: var(--c-accent);
    }

    .bl-mobile-submenu { background-color: rgba(255, 255, 255, 0.04); }

    .bl-mobile-has-children.is-open .bl-mobile-submenu {
        border-color: rgba(255, 255, 255, 0.10);
    }

    .bl-mobile-submenu a { color: rgba(255, 255, 255, 0.85); }

    .bl-mobile-submenu a:hover,
    .bl-mobile-submenu a:focus-visible {
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--c-accent);
    }
}

/* ==========================================================================
   12 · FOOTER
   ========================================================================== */

.bl-footer {
    background-color: var(--c-ink);
    color: rgba(250, 249, 246, 0.78);
    padding-block: var(--s-7) var(--s-4);
    margin-top: 0;
}

.bl-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid rgba(250, 249, 246, 0.08);
}

@media (min-width: 640px) {
    .bl-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .bl-footer-grid {
        grid-template-columns: 1.3fr 1fr 1.1fr 1.4fr;
        gap: var(--s-5);
    }
}

.bl-footer-col p { margin-bottom: var(--s-2); color: rgba(250, 249, 246, 0.78); }

.bl-footer-logo {
    font-family: var(--ff-heading);
    font-size: var(--fs-6);
    color: var(--c-paper);
    margin-bottom: 0.2rem;
    line-height: 1.1;
}

.bl-footer-tagline {
    font-size: var(--fs-2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-accent-glow);
    margin-bottom: var(--s-4);
}

.bl-footer-col-title {
    font-family: var(--ff-body);
    font-size: var(--fs-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-accent-glow);
    margin-bottom: var(--s-3);
}

.bl-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bl-footer-col ul li { margin-bottom: var(--s-1); }

.bl-footer-col a {
    color: rgba(250, 249, 246, 0.78);
    text-decoration: none;
    font-size: var(--fs-3);
    transition: color var(--t-fast) var(--ease-out);
}

.bl-footer-col a strong,
.bl-footer-col strong { color: inherit; font-weight: 600; }

.bl-footer-col a:hover { color: var(--c-accent); }

/* Lien GMB */
.bl-footer-gmb {
    display: inline-flex !important;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-1);
    color: var(--c-accent-glow) !important;
    text-decoration: none;
    font-size: var(--fs-2);
    margin-top: var(--s-2);
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-footer-gmb:hover {
    background-color: var(--c-accent);
    color: var(--c-ink) !important;
}

.bl-footer-gmb-icon { flex-shrink: 0; }

/* Sous-sections villes */
.bl-footer-subtitle {
    font-family: var(--ff-body);
    font-size: var(--fs-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-accent-glow);
    margin: var(--s-3) 0 var(--s-1);
}

.bl-footer-col .bl-footer-subtitle:first-of-type { margin-top: 0; }

.bl-footer-city-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
}

.bl-footer-city-list li { margin: 0 !important; }

.bl-footer-city-list a {
    font-size: var(--fs-2);
    color: rgba(250, 249, 246, 0.7) !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}

.bl-footer-city-list a:hover {
    color: var(--c-accent) !important;
    border-bottom-color: var(--c-accent);
}

/* Footer bottom */
.bl-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding-top: var(--s-4);
    font-size: var(--fs-2);
    color: rgba(250, 249, 246, 0.55);
}

@media (min-width: 768px) {
    .bl-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.bl-footer-legal { margin: 0; color: rgba(250, 249, 246, 0.55); }

.bl-footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.bl-footer-legal-links li { margin: 0; }

.bl-footer-legal-links a {
    color: rgba(250, 249, 246, 0.55) !important;
    font-size: var(--fs-2);
    text-decoration: none;
}

.bl-footer-legal-links a:hover { color: var(--c-accent-glow) !important; }

/* WhatsApp float — masqué en haut de page, apparaît après ~200px de scroll */
.bl-whatsapp-float {
    position: fixed;
    bottom: var(--s-4);
    right: var(--s-4);
    z-index: var(--z-float);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--c-paper-3);
    color: #25D366;
    border-radius: 50%;
    box-shadow: var(--shadow-3);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.85);
    pointer-events: none;
    transition: transform var(--t-base) var(--ease-snap),
                box-shadow var(--t-base) var(--ease-out),
                opacity var(--t-base) var(--ease-out),
                visibility var(--t-base);
    will-change: transform, opacity;
}

body.bl-scrolled-far .bl-whatsapp-float {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.bl-whatsapp-float:hover {
    transform: scale(1.08);
    color: #128C7E;
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.32);
}

.bl-whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: rgba(37, 211, 102, 0.3);
    z-index: -1;
    animation: none;
}

body.bl-scrolled-far .bl-whatsapp-float::before {
    animation: bl-pulse 2.4s ease-out infinite;
}

@keyframes bl-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-whatsapp-float::before { animation: none; }
}

/* ==========================================================================
   13 · HOMEPAGE — HERO
   ========================================================================== */

.bl-hero {
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 7rem) clamp(3rem, 1.8rem + 5.5vw, 8rem);
    background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper-2) 100%);
}

.bl-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
}

@media (min-width: 1024px) {
    .bl-hero-grid {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--s-7);
    }
}

.bl-hero-badge { margin-bottom: var(--s-3); }

.bl-hero-title {
    font-size: var(--fs-10);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: var(--s-4);
    color: var(--c-ink);
}

.bl-hero-title em {
    font-style: italic;
    color: var(--c-accent-deep);
    display: block;
}

.bl-hero-subtitle {
    font-size: var(--fs-5);
    color: var(--c-ink-3);
    line-height: 1.55;
    margin-bottom: var(--s-5);
    max-width: 38em;
}

.bl-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.bl-hero-trust {
    font-size: var(--fs-2);
    color: var(--c-ink-3);
    margin: 0;
}

.bl-hero-visual {
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
    position: relative;
    isolation: isolate;
}


.bl-hero-image-placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 72% 28%, var(--c-accent-glow) 0%, transparent 56%),
        linear-gradient(135deg, var(--c-ink) 0%, var(--c-ink-2) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 0 6px rgba(250, 249, 246, 0.06),
        0 0 60px rgba(244, 206, 90, 0.25),
        var(--shadow-4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
}

.bl-hero-image-placeholder::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.bl-hero-image-text {
    font-family: var(--ff-heading);
    font-size: clamp(3.5rem, 11vw, 8rem);
    font-weight: 400;
    color: var(--c-accent-glow);
    line-height: 1;
    letter-spacing: 0.04em;
    opacity: 0.92;
}

.bl-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-4);
    display: block;
}

/* ==========================================================================
   14 · HOMEPAGE — STATS, TOOLS, METHODOLOGY, EXPERTISE, CERTS
   ========================================================================== */

/* Stats band (clair) */
.bl-stats-band {
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}

.bl-stats-band-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
}

/* Marquee horizontal — uniquement sur mobile. Desktop = grille 3 colonnes fixe. */
.bl-stats-marquee {
    width: 100%;
}

.bl-stats-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.bl-stats-marquee .bl-stat-item {
    flex-shrink: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Mobile / tablette : défilement infini avec fondu sur les bords --- */
@media (max-width: 1023.98px) {
    .bl-stats-marquee {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }

    .bl-stats-marquee-track {
        gap: clamp(2.5rem, 8vw, 4rem);
        width: max-content;
        animation: bl-marquee 28s linear infinite;
    }

    .bl-stats-marquee:hover .bl-stats-marquee-track {
        animation-play-state: paused;
    }

    .bl-stats-marquee .bl-stat-item { padding-inline: var(--s-2); }

    @keyframes bl-marquee {
        from { transform: translate3d(0, 0, 0); }
        /* -50% car la séquence est dupliquée : boucle sans couture */
        to   { transform: translate3d(-50%, 0, 0); }
    }
}

/* --- Desktop : grille 3 colonnes fixe, on masque les doublons --- */
@media (min-width: 1024px) {
    .bl-stats-marquee-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-3);
        max-width: var(--w-wide);
        margin-inline: auto;
        padding-inline: clamp(1rem, 0.7rem + 1.2vw, 2rem);
    }

    .bl-stats-marquee .bl-stat-item[aria-hidden="true"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-stats-marquee-track { animation: none; }
}

@media (min-width: 640px) {
    .bl-stats-band-grid { grid-template-columns: repeat(3, 1fr); }
}

.bl-stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bl-stat-value {
    font-family: var(--ff-heading);
    font-size: var(--fs-7);
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.05;
    letter-spacing: -0.018em;
}

.bl-stat-label {
    font-size: var(--fs-2);
    color: var(--c-ink-3);
}

/* Tools grid */
.bl-tools-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
}

@media (min-width: 640px) { .bl-tools-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .bl-tools-grid { grid-template-columns: repeat(8, 1fr); } }

.bl-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 96px;
    padding: var(--s-3) var(--s-2);
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-1);
    font-family: var(--ff-body);
    font-size: var(--fs-2);
    font-weight: 500;
    color: var(--c-ink-3);
    text-align: center;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    margin: 0;
    will-change: transform;
}

.bl-tool-card:hover {
    border-color: var(--c-accent);
    color: var(--c-ink);
    transform: translateY(-2px);
}

.bl-tool-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform var(--t-base) var(--ease-out);
}

.bl-tool-card:hover .bl-tool-icon {
    transform: scale(1.1);
}

/* Stats band (sombre) */
.bl-stats-dark .bl-stats-dark-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    text-align: center;
}

@media (min-width: 768px) {
    .bl-stats-dark .bl-stats-dark-grid { grid-template-columns: repeat(4, 1fr); }
}

.bl-stat-dark-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
}

.bl-stat-dark-value {
    font-family: var(--ff-heading);
    font-size: var(--fs-8);
    font-weight: 500;
    color: var(--c-accent-glow);
    line-height: 1.05;
    letter-spacing: -0.018em;
}

.bl-stat-dark-label {
    font-size: var(--fs-3);
    color: rgba(250, 249, 246, 0.75);
    letter-spacing: 0.02em;
}

/* Méthodologie */
/* Timeline verticale avec ligne de progression qui se remplit au scroll. */
.bl-method-timeline {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    position: relative;
    padding-left: 76px;
}

/* Ligne grise de fond — toute la hauteur du timeline */
.bl-method-timeline::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background-color: var(--c-line-strong);
    border-radius: 2px;
}

/* Ligne dorée qui se remplit au scroll (hauteur pilotée en JS) */
.bl-method-timeline::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 12px;
    width: 2px;
    height: var(--bl-timeline-progress, 0%);
    background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-glow) 100%);
    border-radius: 2px;
    transition: height 0.15s linear;
    will-change: height;
}

.bl-method-step {
    position: relative;
    padding: var(--s-3) 0 var(--s-4);
    margin: 0;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s var(--ease-out),
                transform 0.6s var(--ease-out);
    will-change: opacity, transform;
}

.bl-method-step + .bl-method-step {
    margin-top: var(--s-4);
    border-top: 1px solid var(--c-line);
    padding-top: var(--s-5);
}

.bl-method-step.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Pastille numérotée — sur la ligne, centrée à gauche */
.bl-method-step-num {
    position: absolute;
    left: -76px;
    top: var(--s-3);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--c-paper);
    border: 2px solid var(--c-line-strong);
    display: grid;
    place-items: center;
    font-family: var(--ff-heading);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--c-ink-3);
    line-height: 1;
    letter-spacing: 0.02em;
    transition: border-color 0.4s var(--ease-out),
                color 0.4s var(--ease-out),
                background-color 0.4s var(--ease-out),
                transform 0.4s var(--ease-out),
                box-shadow 0.4s var(--ease-out);
}

.bl-method-step.is-visible .bl-method-step-num {
    border-color: var(--c-accent);
    color: var(--c-accent-deep);
    background-color: var(--c-paper-3);
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(244, 206, 90, 0.15);
}

.bl-method-step + .bl-method-step .bl-method-step-num {
    top: var(--s-5);
}

/* Variante grid horizontal (pages services + single études) :
   le badge doit être DANS la card, pas à -76px comme dans la timeline
   verticale de la home. Couvre .bl-method-step et .bl-card-vertical. */
.bl-grid .bl-method-step {
    padding: var(--s-4);
}
.bl-grid .bl-method-step + .bl-method-step {
    margin-top: 0;
    border-top: none;
    padding-top: var(--s-4);
}
.bl-grid .bl-method-step .bl-method-step-num,
.bl-grid .bl-card-vertical .bl-method-step-num,
.bl-card-vertical > .bl-method-step-num {
    position: static;
    margin-bottom: var(--s-3);
    width: 44px;
    height: 44px;
    font-size: 1rem;
    background-color: var(--c-paper-3);
    border: 2px solid var(--c-accent);
    color: var(--c-accent-deep);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-family: var(--ff-heading);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}
.bl-grid .bl-method-step + .bl-method-step .bl-method-step-num { top: auto; }

.bl-method-step h3 {
    font-size: var(--fs-5);
    margin-bottom: var(--s-2);
    color: var(--c-ink);
}

.bl-method-step p {
    color: var(--c-ink-3);
    font-size: var(--fs-3);
    margin: 0;
    line-height: 1.6;
}

/* Mobile : pastille plus petite, padding gauche réduit */
@media (max-width: 639.98px) {
    .bl-method-timeline {
        padding-left: 56px;
    }

    .bl-method-timeline::before,
    .bl-method-timeline::after {
        left: 19px;
    }

    .bl-method-step-num {
        left: -56px;
        width: 40px;
        height: 40px;
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-method-step {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .bl-method-timeline::after {
        transition: none;
    }
}

/* Expertise */
.bl-expertise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}

@media (min-width: 1024px) {
    .bl-expertise-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

.bl-expertise-text p {
    font-size: var(--fs-4);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.bl-expertise-benefits .bl-card { padding: var(--s-3); }
.bl-expertise-benefits .bl-card h3 { font-size: var(--fs-5); color: var(--c-ink); }
.bl-expertise-benefits .bl-card p { font-size: var(--fs-3); color: var(--c-ink-3); margin: 0; }

/* Certifications */
.bl-cert-card { align-items: flex-start; }

.bl-cert-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--c-ink);
    color: var(--c-accent);
    font-family: var(--ff-heading);
    font-size: var(--fs-6);
    font-weight: 600;
}

.bl-cert-card h3 { font-size: var(--fs-5); color: var(--c-ink); }
.bl-cert-card p  { font-size: var(--fs-3); color: var(--c-ink-3); margin: 0; }

/* Logo officiel (Google Ads, GA, etc.) — remplace .bl-cert-mark texte */
.bl-cert-logo-img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: var(--s-2);
}

/* Clients */
.bl-clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
}

@media (min-width: 768px) {
    .bl-clients-grid { grid-template-columns: repeat(4, 1fr); }
}

.bl-client-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--s-3);
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    text-align: center;
    text-decoration: none;
    color: var(--c-ink-3);
    transition: border-color var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
    gap: var(--s-1);
    will-change: transform;
}

.bl-client-card-feature {
    background-color: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}

.bl-client-card-feature .bl-client-name {
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    font-weight: 500;
    color: var(--c-accent-glow);
    letter-spacing: 0.04em;
}

.bl-client-card-feature .bl-client-meta {
    font-size: var(--fs-1);
    color: rgba(250, 249, 246, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bl-client-card-empty {
    border-style: dashed;
    font-size: var(--fs-2);
    transition: all var(--t-base) var(--ease-out);
}

.bl-client-card-empty:hover {
    color: var(--c-accent-deep);
    border-color: var(--c-accent);
    background-color: var(--c-accent-tint);
    transform: translateY(-2px);
}

/* ==========================================================================
   Bloc "Besoin d'un site ?" — design éditorial avec accent gold
   ========================================================================== */
.bl-web-block {
    position: relative;
    margin-top: var(--s-6);
    padding: var(--s-5);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-4);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Accent gold thin line en haut — signature visuelle */
.bl-web-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--c-accent) 30%,
        var(--c-accent) 70%,
        transparent 100%);
}

.bl-web-block-eyebrow {
    display: inline-block;
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-accent-glow);
    margin-bottom: var(--s-3);
    font-weight: 500;
}

.bl-web-block-inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .bl-web-block-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
    }
}

.bl-web-block-text { max-width: 480px; }

.bl-web-block-text h3 {
    font-size: var(--fs-6);
    margin: 0 0 var(--s-2);
    color: inherit;
    line-height: 1.15;
}

.bl-web-block-text p {
    margin: 0;
    font-size: var(--fs-3);
    line-height: 1.55;
    opacity: 0.78;
}

.bl-web-block-text em {
    font-style: italic;
    color: var(--c-accent-glow);
    font-weight: 500;
}

.bl-web-block-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .bl-web-block-side {
        align-items: flex-end;
    }
}

.bl-web-cms-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.bl-web-cms-label {
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.55;
    font-weight: 500;
}

.bl-web-cms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--s-2);
    align-items: center;
}

.bl-web-cms-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.85rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-pill);
    font-size: var(--fs-2);
    font-weight: 500;
    transition: background-color var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
}

.bl-web-cms-list li:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(244, 206, 90, 0.4);
    transform: translateY(-1px);
}

.bl-web-cms-list img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Sur la home : CTA gold qui pop */
body.bl-body .bl-web-block .bl-btn-gold {
    white-space: nowrap;
}


/* Marquee logos — défilement continu sans interruption */
.bl-logos-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.bl-logos-marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    width: max-content;
    animation: bl-logos-scroll 28s linear infinite;
}

.bl-logos-marquee:hover .bl-logos-marquee-track {
    animation-play-state: paused;
}

.bl-logos-marquee-logo {
    flex-shrink: 0;
    height: clamp(28px, 2.5vw, 38px);
    width: auto;
    max-width: none;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--t-base) var(--ease-out);
}

.bl-logos-marquee-logo:hover {
    opacity: 1;
}

/* Sur la home : trust band sur le bleu, logos en blanc, couleur d'origine au hover */
body.bl-body .bl-trust-band .bl-logos-marquee-logo {
    filter: brightness(0) invert(1);
    opacity: 0.75;
    transition: filter var(--t-base) var(--ease-out),
                opacity var(--t-base) var(--ease-out);
}

body.bl-body .bl-trust-band .bl-logos-marquee-logo:hover {
    filter: none;
    opacity: 1;
}

.bl-logos-marquee-logo:hover {
    opacity: 1;
}

@keyframes bl-logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bl-logos-marquee-track { animation: none; }
}


/* Case studies (cards sur la home) */
.bl-case-studies .bl-card-case-study {
    background-color: var(--c-paper-3);
    border-color: var(--c-line);
}

.bl-case-studies .bl-card-case-study:hover {
    border-color: var(--c-accent);
}

/* ==========================================================================
   15 · FAQ
   Details/summary natifs avec toggle élégant
   ========================================================================== */

.bl-faq-list {
    max-width: 800px;
    margin-inline: auto;
}

.bl-faq-item {
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    margin-bottom: var(--s-2);
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease-out);
}

.bl-faq-item[open] { border-color: var(--c-accent); }

.bl-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    font-weight: 500;
    color: var(--c-ink);
    transition: background-color var(--t-fast) var(--ease-out);
}

.bl-faq-item summary::-webkit-details-marker { display: none; }
.bl-faq-item summary::marker { content: ''; }
.bl-faq-item summary:hover { background-color: var(--c-paper-2); }

.bl-faq-question { flex: 1; }

.bl-faq-toggle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--c-paper-2);
    color: var(--c-accent-deep);
    font-size: var(--fs-5);
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--t-base) var(--ease-out),
                background-color var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out);
    will-change: transform;
}

.bl-faq-item[open] .bl-faq-toggle {
    transform: rotate(45deg);
    background-color: var(--c-accent);
    color: var(--c-ink);
}

.bl-faq-answer {
    padding: 0 var(--s-4) var(--s-4);
    color: var(--c-ink-3);
}

.bl-faq-answer p { line-height: 1.7; }

/* ==========================================================================
   16 · CTA FINAL
   ========================================================================== */

.bl-cta-final {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(244, 206, 90, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(244, 206, 90, 0.06) 0%, transparent 55%),
        var(--c-ink);
}

.bl-cta-final h2 {
    font-size: var(--fs-8);
    margin-bottom: var(--s-4);
}

.bl-cta-final-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5);
    display: grid;
    gap: var(--s-2);
    text-align: left;
    max-width: 480px;
    margin-inline: auto;
}

.bl-cta-final-benefits li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-4);
    color: rgba(250, 249, 246, 0.9);
    margin: 0;
}

.bl-cta-final-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--c-accent);
    color: var(--c-ink);
    font-size: var(--fs-1);
    font-weight: 700;
    flex-shrink: 0;
}

.bl-cta-final-tagline {
    font-size: var(--fs-4);
    color: rgba(250, 249, 246, 0.82);
    max-width: 540px;
    margin: 0 auto var(--s-5);
    line-height: 1.55;
}

/* ==========================================================================
   17 · CONTACT FORM (section homepage + page contact)
   ========================================================================== */

.bl-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    min-width: 0;
}

@media (min-width: 768px) { .bl-contact-grid { gap: var(--s-5); } }
/* Plus de 2 colonnes : le bloc info à droite a été retiré */
@media (min-width: 1024px) { .bl-contact-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } }

.bl-contact-grid > * { min-width: 0; }

.bl-contact-form {
    background-color: var(--c-paper-2);
    padding: var(--s-4);
    border-radius: var(--r-2);
    border: 1px solid var(--c-line);
    min-width: 0;
}

/* Liens dans le formulaire (RGPD, etc.) : doivent contraster avec le fond cream */
.bl-contact-form a {
    color: var(--c-accent-deep);
    text-decoration: underline;
    text-decoration-color: rgba(146, 116, 14, 0.4);
}
.bl-contact-form a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }
.bl-contact-form .bl-form-rgpd { color: var(--c-ink-3); }
.bl-contact-form em { color: var(--c-ink-3); }

@media (min-width: 480px) { .bl-contact-form { padding: var(--s-5); } }
@media (min-width: 768px) { .bl-contact-form { padding: var(--s-6); } }

.bl-contact-form button[type="submit"] {
    width: 100%;
    margin-top: var(--s-2);
}

.bl-contact-info {
    background-color: var(--c-ink);
    color: var(--c-paper);
    padding: var(--s-4);
    border-radius: var(--r-2);
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

@media (min-width: 480px) { .bl-contact-info { padding: var(--s-5); } }
@media (min-width: 768px) { .bl-contact-info { padding: var(--s-6); } }

.bl-contact-info h3 {
    color: var(--c-paper);
    margin-bottom: var(--s-4);
}

.bl-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5);
}

.bl-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    color: rgba(250, 249, 246, 0.82);
    font-size: var(--fs-3);
    min-width: 0;
}

.bl-contact-list li > div {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    flex: 1;
}

.bl-contact-list strong {
    color: var(--c-accent-glow);
    font-weight: 500;
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.bl-contact-list a {
    color: rgba(250, 249, 246, 0.92);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-decoration-thickness: 1px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.bl-contact-list a:hover { color: var(--c-accent); }

.bl-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(250, 249, 246, 0.08);
    flex-shrink: 0;
    font-size: var(--fs-2);
    color: var(--c-accent-glow);
}

.bl-contact-info .bl-btn-secondary {
    width: 100%;
    --btn-bg:     transparent;
    --btn-color:  var(--c-accent-glow);
    --btn-border: var(--c-accent);
}

.bl-contact-info .bl-btn-secondary:hover {
    --btn-bg:     var(--c-accent);
    --btn-color:  var(--c-ink);
    --btn-border: var(--c-accent);
}

/* ==========================================================================
   18 · SERVICES — Pages individuelles & hub
   ========================================================================== */

.bl-service-hero {
    background: linear-gradient(180deg, var(--c-paper-2) 0%, var(--c-paper) 100%);
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 6rem) clamp(3rem, 1.8rem + 5vw, 7rem);
}

.bl-service-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .bl-service-hero-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: var(--s-7);
    }
}

.bl-service-hero-content .bl-badge { margin-bottom: var(--s-3); }

.bl-service-hero-title {
    font-size: var(--fs-9);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
}

.bl-service-hero-subtitle {
    font-size: var(--fs-5);
    line-height: 1.55;
    color: var(--c-ink-3);
    margin-bottom: var(--s-5);
    max-width: 38em;
}

.bl-service-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* Aside meta */
.bl-service-hero-meta {
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    padding: var(--s-4);
    box-shadow: var(--shadow-1);
}

.bl-service-meta-title {
    font-family: var(--ff-body);
    font-size: var(--fs-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-accent-deep);
    margin-bottom: var(--s-3);
}

.bl-service-hero-meta ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-3);
}

.bl-service-hero-meta ul li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-3);
    color: var(--c-ink-3);
    margin: 0;
}

.bl-service-hero-meta ul li:last-child { border-bottom: none; }

.bl-service-hero-meta ul li strong {
    color: var(--c-ink);
    margin-right: var(--s-1);
}

.bl-service-hero-meta .bl-btn { width: 100%; }

/* Section "Pourquoi" */
.bl-service-intro p {
    font-size: var(--fs-4);
    line-height: 1.7;
    margin-bottom: var(--s-3);
    color: var(--c-ink);
}

/* Livrables */
.bl-deliverables-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
}

.bl-deliverables-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-1);
    font-size: var(--fs-3);
    color: var(--c-ink);
    margin: 0;
    transition: border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    will-change: transform;
}

.bl-deliverables-list li:hover {
    border-color: var(--c-accent);
    transform: translateX(4px);
}

.bl-deliverables-list li::before {
    content: "✓";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--c-accent);
    color: var(--c-ink);
    font-size: var(--fs-2);
    font-weight: 700;
}

/* Hub services */
.bl-service-hub-hero {
    background: linear-gradient(180deg, var(--c-paper-2) 0%, var(--c-paper) 100%);
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 6rem);
}

.bl-service-hub-hero h1 {
    font-size: var(--fs-9);
    margin-bottom: var(--s-3);
}

/* Card vertical sur fond cream */
.bl-section-cream .bl-card-vertical { background-color: var(--c-paper-3); }
.bl-section-cream .bl-card-vertical h3 { font-size: var(--fs-5); color: var(--c-ink); }
.bl-section-cream .bl-card-vertical p { color: var(--c-ink-3); margin: 0; }

/* ==========================================================================
   19 · PAGES VILLES
   ========================================================================== */

.bl-ville-hero {
    background: linear-gradient(180deg, var(--c-paper-2) 0%, var(--c-paper) 100%);
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 6rem) clamp(3rem, 1.8rem + 5vw, 7rem);
}

.bl-ville-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .bl-ville-hero-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: var(--s-7);
    }
}

.bl-ville-hero-content .bl-badge { margin-bottom: var(--s-3); }

.bl-ville-hero-title {
    font-size: var(--fs-9);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
}

.bl-ville-hero-subtitle {
    font-size: var(--fs-5);
    line-height: 1.55;
    color: var(--c-ink-3);
    margin-bottom: var(--s-5);
    max-width: 38em;
}

.bl-ville-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.bl-ville-hero-card {
    background-color: var(--c-ink);
    color: var(--c-paper);
    padding: var(--s-4);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
}

.bl-ville-hero-card .bl-eyebrow {
    color: var(--c-accent-glow);
    margin-bottom: var(--s-3);
    display: block;
}

.bl-ville-hero-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bl-ville-hero-card li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid rgba(250, 249, 246, 0.08);
    font-size: var(--fs-3);
    color: rgba(250, 249, 246, 0.82);
    margin: 0;
}

.bl-ville-hero-card li:last-child { border-bottom: none; }

.bl-ville-hero-card li strong {
    color: var(--c-accent-glow);
    font-weight: 500;
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: inline-block;
    min-width: 110px;
}

.bl-ville-market p,
.bl-ville-why p {
    font-size: var(--fs-4);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.bl-ville-market strong,
.bl-ville-why strong { color: var(--c-ink); }

/* Liste verticaux */
.bl-verticals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
}

@media (min-width: 768px) {
    .bl-verticals-list { grid-template-columns: repeat(2, 1fr); }
}

.bl-verticals-list li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-1);
    font-size: var(--fs-3);
    color: var(--c-ink);
    margin: 0;
    transition: transform var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    will-change: transform;
}

.bl-verticals-list li:hover {
    transform: translateY(-2px);
    border-color: var(--c-accent-glow);
    border-left-color: var(--c-accent);
}

/* ==========================================================================
   20 · CASE STUDIES — Pages détaillées
   ========================================================================== */

.bl-case-study-hero {
    background: linear-gradient(180deg, var(--c-paper-2) 0%, var(--c-paper) 100%);
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 6rem);
}

.bl-back-link {
    display: inline-block;
    font-size: var(--fs-2);
    color: var(--c-ink-3);
    text-decoration: none;
    margin-bottom: var(--s-3);
    transition: color var(--t-fast) var(--ease-out);
}

.bl-back-link:hover { color: var(--c-accent-deep); }

.bl-case-study-logo {
    display: inline-flex;
    align-items: center;
    padding: var(--s-2) var(--s-3);
    background-color: var(--c-ink);
    color: var(--c-accent-glow);
    border-radius: var(--r-2);
    margin-bottom: var(--s-3);
}

.bl-case-study-logo-text {
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    letter-spacing: 0.05em;
}

/* Logo client officiel dans le hero d'une single étude */
.bl-case-study-logo-img {
    display: block;
    max-width: 220px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Si on a un logo image, on retire le padding sombre du wrapper */
.bl-case-study-logo:has(.bl-case-study-logo-img) {
    background: var(--c-paper-3);
    padding: var(--s-3);
    border: 1px solid var(--c-line);
}

.bl-case-study-hero-title {
    font-size: var(--fs-9);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: var(--s-2) 0 var(--s-4);
}

.bl-case-study-hero-subtitle {
    font-size: var(--fs-5);
    line-height: 1.55;
    color: var(--c-ink-3);
    max-width: 38em;
    margin-bottom: var(--s-3);
}

.bl-case-anonymous-notice {
    background-color: var(--c-accent-tint);
    border-left: 3px solid var(--c-accent);
    padding: var(--s-3);
    border-radius: 0 var(--r-1) var(--r-1) 0;
    font-size: var(--fs-3);
    color: var(--c-ink-3);
    max-width: 38em;
}

.bl-case-study-text p {
    font-size: var(--fs-4);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.bl-case-study-placeholder {
    background-color: transparent !important;
    border-style: dashed !important;
}

/* Placeholder card sur fond bleu : tout le texte doit virer en clair.
   !important nécessaire pour battre les règles globales body.bl-body .bl-card */
body.bl-body .bl-case-study-placeholder h3,
body.bl-body .bl-case-study-placeholder .bl-case-logo-text { color: var(--c-paper) !important; }
body.bl-body .bl-case-study-placeholder p { color: rgba(250, 249, 246, 0.82) !important; }
body.bl-body .bl-case-study-placeholder .bl-badge-outline { color: var(--c-accent-glow); border-color: rgba(244, 206, 90, 0.6); }
body.bl-body .bl-case-study-placeholder a { color: var(--c-accent-glow) !important; }
body.bl-body .bl-case-study-placeholder a:hover { color: var(--c-accent) !important; }

/* ==========================================================================
   21 · ABOUT PAGE
   ========================================================================== */

.bl-about-hero {
    background: linear-gradient(180deg, var(--c-paper-2) 0%, var(--c-paper) 100%);
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 6rem);
}

.bl-about-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
}

@media (min-width: 1024px) {
    .bl-about-hero-grid { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
}

.bl-about-photo {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
}

.bl-about-photo-placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 72% 28%, var(--c-accent-glow) 0%, transparent 56%),
        linear-gradient(135deg, var(--c-ink) 0%, var(--c-ink-2) 100%);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--c-accent-glow);
    position: relative;
    overflow: hidden;
}

.bl-about-photo-placeholder::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--r-4) - 6px);
    pointer-events: none;
}

.bl-about-photo-caption {
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    margin-top: var(--s-3);
}

.bl-about-photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--r-4);
    box-shadow: var(--shadow-4);
    display: block;
}

.bl-about-story p {
    font-size: var(--fs-4);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.bl-about-story strong { color: var(--c-ink); }
.bl-about-story em { color: var(--c-accent-deep); font-style: italic; }

/* ==========================================================================
   22 · CONTACT PAGE — iframes
   ========================================================================== */

.bl-calendly-wrapper,
.bl-map-wrapper {
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--r-2);
}

.bl-calendly-wrapper iframe,
.bl-map-wrapper iframe {
    display: block;
    max-width: 100%;
    width: 100%;
}

.bl-calendly-wrapper iframe {
    height: 600px;
    min-height: 480px;
}

@media (max-width: 767px) {
    .bl-calendly-wrapper iframe { height: 720px; }
    .bl-map-wrapper iframe      { height: 340px; }
}

.bl-map-note {
    text-align: center;
    margin-top: var(--s-2);
    font-size: var(--fs-2);
    color: var(--c-ink-3);
}

.bl-map-note a { color: var(--c-accent-deep); }

/* ==========================================================================
   23 · BLOG / LEGAL / SITEMAP
   ========================================================================== */

.bl-empty-state {
    text-align: center;
    padding: var(--s-6);
    background-color: var(--c-paper-3);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-2);
    max-width: 640px;
    margin-inline: auto;
}

.bl-empty-state p { color: var(--c-ink-3); margin-bottom: var(--s-3); }

.bl-legal-content,
.bl-sitemap { max-width: 720px; }

.bl-legal-content h2,
.bl-sitemap h2 {
    font-size: var(--fs-6);
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-1);
    border-bottom: 2px solid var(--c-accent);
    display: inline-block;
}

.bl-legal-content h2:first-child,
.bl-sitemap h2:first-child { margin-top: 0; }

.bl-legal-content p,
.bl-legal-content ul,
.bl-sitemap ul {
    font-size: var(--fs-3);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.bl-legal-content strong { color: var(--c-ink); }

.bl-legal-update {
    margin-top: var(--s-6);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
    font-size: var(--fs-2);
    color: var(--c-ink-3);
}

.bl-sitemap ul { list-style: none; padding: 0; }

.bl-sitemap ul li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-line);
    margin: 0;
}

.bl-sitemap ul li:last-child { border-bottom: none; }

.bl-sitemap ul li a {
    color: var(--c-ink);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out),
                padding-left var(--t-fast) var(--ease-out);
    display: inline-block;
}

.bl-sitemap ul li a:hover {
    color: var(--c-accent-deep);
    padding-left: var(--s-2);
}

/* ==========================================================================
   24 · VERTICAL & CHALLENGES (résidu archi, conservé pour rétrocompat)
   ========================================================================== */

.bl-vertical-market p,
.bl-vertical-why p,
.bl-vertical-cases p {
    font-size: var(--fs-4);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

/* ==========================================================================
   25 · CRÉATION / REFONTE SITE
   ========================================================================== */

.bl-stack-cards { margin-top: var(--s-4); }

.bl-card-stack {
    background-color: var(--c-paper-3);
    text-align: left;
    padding: var(--s-4);
    gap: var(--s-2);
}

.bl-stack-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--r-2);
    background-color: var(--c-ink);
    color: var(--c-accent-glow);
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: var(--s-2);
}

.bl-stack-logo-shopify {
    background-color: var(--c-success);
    color: var(--c-paper);
}

/* Logo image (WP/Shopify officiels) — taille uniforme */
.bl-stack-logo-img {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: var(--s-3);
    object-fit: contain;
}

.bl-card-stack h3 { font-size: var(--fs-6); color: var(--c-ink); margin-bottom: var(--s-2); }
.bl-card-stack .bl-card-list li { color: var(--c-ink); font-size: var(--fs-3); }

/* Méthodologie 5 étapes — 1->2->3->5 cols */
.bl-grid-creation-method {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
}

@media (min-width: 640px)  { .bl-grid-creation-method { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .bl-grid-creation-method { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .bl-grid-creation-method { grid-template-columns: repeat(5, 1fr); } }

/* Tarification */
.bl-grid-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
}

@media (min-width: 640px)  { .bl-grid-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bl-grid-pricing { grid-template-columns: repeat(4, 1fr); } }

.bl-card-pricing {
    background-color: var(--c-paper-3);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    position: relative;
}

.bl-card-pricing h3 {
    font-size: var(--fs-5);
    color: var(--c-ink);
    margin-bottom: 0;
}

.bl-pricing-price {
    font-family: var(--ff-heading);
    font-size: var(--fs-7);
    font-weight: 500;
    color: var(--c-accent-deep);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.018em;
}

.bl-pricing-desc {
    font-size: var(--fs-3);
    color: var(--c-ink-3);
    margin: 0;
    line-height: 1.55;
}

.bl-card-pricing-featured {
    border-color: var(--c-accent);
    border-width: 2px;
    background: linear-gradient(180deg, var(--c-accent-tint) 0%, var(--c-paper-3) 100%);
    box-shadow: var(--shadow-gold);
}

.bl-card-pricing-featured .bl-pricing-price { color: var(--c-ink); }

.bl-card-pricing .bl-badge-popular {
    position: absolute;
    top: -12px;
    right: var(--s-4);
}

/* Cards villes */
.bl-grid-cities {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
}

@media (min-width: 640px)  { .bl-grid-cities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bl-grid-cities { grid-template-columns: repeat(4, 1fr); } }

.bl-card-city {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--s-3) var(--s-4);
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    text-decoration: none;
    color: var(--c-ink);
    transition: border-color var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
    position: relative;
    will-change: transform;
}

.bl-card-city:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    color: var(--c-ink);
}

.bl-card-city-action {
    font-size: var(--fs-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-accent-deep);
}

.bl-card-city-name {
    font-family: var(--ff-heading);
    font-size: var(--fs-5);
    color: var(--c-ink);
}

.bl-card-city-arrow {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    color: var(--c-accent);
    font-size: var(--fs-4);
    transition: transform var(--t-base) var(--ease-out);
}

.bl-card-city:hover .bl-card-city-arrow { transform: translateX(4px); }

/* ==========================================================================
   26 · PRINT
   ========================================================================== */

/* ==========================================================================
   XX · HOMEPAGE — SKIN "MER PROFONDE → AZUR"
   Grand dégradé bleu en fond, sections claires en punch-out, accent jaune
   = soleil. Scopé à `body.bl-body` pour ne pas impacter le reste du site.
   ========================================================================== */

body.bl-body {
    background: var(--bl-sea-gradient);
    background-attachment: fixed;
    background-color: var(--c-sea-deep); /* fallback iOS où fixed peut bug */
    color: var(--c-paper);
}

/* Header transparent en initial : on flippe logo + tagline + hamburger en
   clair sur le fond bleu (la nav desktop également). */
body.bl-body .bl-logo,
body.bl-body .bl-logo-name { color: var(--c-paper); }
body.bl-body .bl-logo-tagline { color: rgba(250, 249, 246, 0.65); }
body.bl-body .bl-menu-toggle-icon span { background-color: var(--c-paper); }
body.bl-body .bl-nav-link { color: var(--c-paper); }
body.bl-body .bl-nav-link:hover { color: var(--c-accent-glow); }
body.bl-body .bl-nav-link::after { background-color: var(--c-accent-glow); }

/* Le <main> est transparent. Seules les sections SANS modifier (ni cream
   ni dark) deviennent transparentes pour laisser remonter le dégradé. */
body.bl-body .bl-main { background-color: transparent; }

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) {
    background-color: transparent;
}

/* Hero — le dégradé du body fait office de fond. Texte clair. */
body.bl-body .bl-hero,
body.bl-body .bl-service-hero,
body.bl-body .bl-service-hub-hero,
body.bl-body .bl-ville-hero,
body.bl-body .bl-case-study-hero,
body.bl-body .bl-about-hero { background: transparent; }

/* Force la typo en clair sur les heros des sous-pages (sur dégradé bleu) */
body.bl-body .bl-service-hero-title,
body.bl-body .bl-service-hub-hero-title,
body.bl-body .bl-ville-hero-title,
body.bl-body .bl-case-study-hero-title,
body.bl-body .bl-about-hero-title {
    color: var(--c-paper);
}

body.bl-body .bl-service-hero-subtitle,
body.bl-body .bl-service-hub-hero-subtitle,
body.bl-body .bl-ville-hero-subtitle,
body.bl-body .bl-case-study-hero-subtitle,
body.bl-body .bl-about-hero-subtitle {
    color: rgba(250, 249, 246, 0.82);
}

/* "En bref" card du service hero — passe en glass card */
body.bl-body .bl-service-hero-meta {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--c-paper);
}

body.bl-body .bl-service-meta-title { color: var(--c-accent-glow); }
body.bl-body .bl-service-hero-meta strong { color: var(--c-paper); }
body.bl-body .bl-service-hero-meta li { color: rgba(250, 249, 246, 0.85); }

/* Bouton dans la card "En bref" — solidify gold + ink text */
body.bl-body .bl-service-hero-meta .bl-btn-secondary,
body.bl-body .bl-service-hero-meta .bl-btn-secondary:hover {
    --btn-bg: var(--c-accent);
    --btn-color: var(--c-ink);
    --btn-border: var(--c-accent);
    background-color: var(--c-accent);
    color: var(--c-ink);
    border-color: var(--c-accent);
    font-weight: 600;
}

body.bl-body .bl-service-hero-meta .bl-btn-secondary:hover {
    --btn-bg: var(--c-accent-bright);
    background-color: var(--c-accent-bright);
    border-color: var(--c-accent-bright);
}

/* Badges sombres (bl-badge-tendance) → forcer en gold sur fond bleu */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-badge-tendance {
    background-color: var(--c-accent);
    color: var(--c-ink);
}

/* Tous les H1 et subtitles dans sections par défaut (bleu) → forcer en clair.
   Utile pour les pages sans classes spécifiques de hero (about, contact, etc.) */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) h1,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-hero-subtitle {
    color: var(--c-paper);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-hero-subtitle {
    color: rgba(250, 249, 246, 0.82);
}

/* ==========================================================================
   FALLBACK GLOBAL : paragraphes et listes dans sections bleues (default).
   Couvre tous les cas où le contenu n'est pas dans un .bl-card / .bl-container
   spécifique déjà géré. Exclut tout ce qui est DANS une .bl-card pour
   préserver la typo des cards blanches.
   ========================================================================== */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container p:not([class*="bl-card"] p),
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container-wide p,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container-narrow p,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container li,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container-wide li,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container-narrow li {
    color: rgba(250, 249, 246, 0.85);
}

/* Mais protéger les cards blanches/sombres qui ont leur propre treatment.
   Exclut .bl-card-service et .bl-post-card qui sont translucides bleues dans
   le body skin (typographie gérée par leurs règles dédiées ci-dessous). */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-card:not(.bl-card-service):not(.bl-post-card) p,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-card:not(.bl-card-service):not(.bl-post-card) li,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-deliverables-list li,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-verticals-list li,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-card-testimonial p,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-card-case-study p,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-card-case-study li {
    color: var(--c-ink-3);
}

/* Listes de cards blanches : forcer ink (texte fort) car les items sont des cards blanches */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-deliverables-list li,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-verticals-list li {
    color: var(--c-ink);
}

/* Strong/em dans sections bleues : blanc */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container-wide strong,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container-narrow strong,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-container strong {
    color: var(--c-paper);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-card strong {
    color: var(--c-ink);
}

/* ==========================================================================
   FALLBACK GLOBAL : paragraphes dans sections CREAM.
   Couvre tous les <p> qui ne sont pas dans un override spécifique.
   ========================================================================== */
body.bl-body .bl-section-cream .bl-container p,
body.bl-body .bl-section-cream .bl-container-wide p,
body.bl-body .bl-section-cream .bl-container-narrow p,
body.bl-body .bl-section-cream .bl-container li,
body.bl-body .bl-section-cream .bl-container-wide li,
body.bl-body .bl-section-cream .bl-container-narrow li {
    color: var(--c-ink-3);
}

body.bl-body .bl-section-cream .bl-container strong,
body.bl-body .bl-section-cream .bl-container-wide strong,
body.bl-body .bl-section-cream .bl-container-narrow strong {
    color: var(--c-ink);
}

/* ==========================================================================
   Page 404 — h1 et tous les texts en clair sur le dégradé bleu
   ========================================================================== */
body.bl-body.error404 h1,
body.bl-body .error-404 h1 {
    color: var(--c-paper);
}

body.bl-body.error404 p,
body.bl-body .error-404 p {
    color: rgba(250, 249, 246, 0.85);
}

body.bl-body.error404 .search-field,
body.bl-body .error-404 .search-field {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--c-paper);
}

body.bl-body.error404 .search-field::placeholder,
body.bl-body .error-404 .search-field::placeholder {
    color: rgba(250, 249, 246, 0.5);
}

/* ==========================================================================
   Wrappers GeneratePress (blog, archives, single-post) — neutraliser leurs
   bg opaques pour laisser remonter le dégradé bleu du body.
   ========================================================================== */
body.bl-body .inside-article,
body.bl-body .site-content,
body.bl-body .content-area,
body.bl-body .site-main {
    background-color: transparent;
}

/* Sur le blog/archives sans .bl-section : forcer la typo en clair pour
   que ce soit lisible sur le dégradé bleu */
body.bl-body .blog .entry-title,
body.bl-body .blog h1,
body.bl-body .archive .entry-title,
body.bl-body .archive h1,
body.bl-body .search-no-results h1,
body.bl-body .no-results h1 {
    color: var(--c-paper);
}

body.bl-body .blog .entry-content,
body.bl-body .blog .entry-content p,
body.bl-body .archive .entry-content,
body.bl-body .archive .entry-content p,
body.bl-body .no-results p {
    color: rgba(250, 249, 246, 0.82);
}

body.bl-body .blog .entry-content a:not(.bl-btn),
body.bl-body .archive .entry-content a:not(.bl-btn),
body.bl-body .no-results a:not(.bl-btn) {
    color: var(--c-accent-glow);
}

body.bl-body .bl-hero-title { color: var(--c-paper); }
body.bl-body .bl-hero-title em { color: var(--c-accent-glow); }
body.bl-body .bl-hero-subtitle { color: rgba(250, 249, 246, 0.82); }
body.bl-body .bl-hero-trust { color: rgba(250, 249, 246, 0.6); }

/* Hero compact — tient en viewport au chargement */
body.bl-body .bl-hero {
    padding-block: clamp(1rem, 0.5rem + 1.5vw, 2.5rem) clamp(1.5rem, 0.8rem + 2vw, 3rem);
    min-height: 100dvh;
    display: flex;
    align-items: center;
}

body.bl-body .bl-hero > .bl-container-wide { width: 100%; }

body.bl-body .bl-hero-title {
    font-size: var(--fs-8);
    line-height: 1.05;
    margin-bottom: var(--s-3);
}

body.bl-body .bl-hero-badge { margin-bottom: var(--s-2); }

body.bl-body .bl-hero-subtitle {
    font-size: var(--fs-4);
    margin-bottom: var(--s-4);
}

body.bl-body .bl-hero-ctas { margin-bottom: var(--s-2); }

body.bl-body .bl-hero-visual { max-width: 360px; }

/* ========================================================================
   Mobile hero — design éditorial : photo centrée présente, typographie
   aérée, hiérarchie claire, CTA principal isolé + lien secondaire discret.
   ======================================================================== */
@media (max-width: 1023.98px) {
    body.bl-body .bl-hero {
        min-height: calc(100svh - 80px);
        padding-block: var(--s-4);
        justify-content: center;
        text-align: center;
    }

    body.bl-body .bl-hero-grid {
        gap: var(--s-4);
        justify-items: center;
    }

    body.bl-body .bl-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }

    /* Photo — focale visuelle, généreuse mais pas envahissante */
    body.bl-body .bl-hero-visual {
        order: -1;
        max-width: 200px;
        margin-bottom: 0;
    }

    /* Badge — discret, lettres espacées comme un eyebrow magazine */
    body.bl-body .bl-hero-badge {
        margin-bottom: var(--s-3);
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
        padding: 0.4rem 0.9rem;
    }

    /* H1 — impact + em en sous-ligne italique dorée plus petite */
    body.bl-body .bl-hero-title {
        font-size: clamp(1.625rem, 4vw + 1rem, 2.25rem);
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin-bottom: var(--s-4);
        max-width: 15ch;
    }

    body.bl-body .bl-hero-title em {
        display: block;
        font-size: 0.7em;
        margin-top: var(--s-2);
        font-weight: 400;
        letter-spacing: -0.005em;
        line-height: 1.2;
    }

    /* Subtitle — confort de lecture, largeur contenue */
    body.bl-body .bl-hero-subtitle {
        font-size: 0.9375rem;
        line-height: 1.55;
        margin-bottom: var(--s-5);
        max-width: 32ch;
        margin-inline: auto;
        color: rgba(250, 249, 246, 0.75);
    }

    /* CTAs — primary isolé en haut, secondary en lien text en-dessous */
    body.bl-body .bl-hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: var(--s-2);
        margin-bottom: var(--s-3);
        width: 100%;
        max-width: 280px;
    }

    body.bl-body .bl-hero-ctas .bl-btn-gold {
        width: 100%;
        padding: 0.85rem var(--s-4);
        font-size: 0.9375rem;
        letter-spacing: 0.01em;
    }

    /* Le second CTA devient un lien text élégant, plus de bordure */
    body.bl-body .bl-hero-ctas .bl-btn-outline {
        background: transparent;
        border: 0;
        padding: var(--s-2);
        font-size: 0.875rem;
        color: rgba(250, 249, 246, 0.7);
        text-decoration: underline;
        text-decoration-color: rgba(250, 249, 246, 0.3);
        text-underline-offset: 4px;
        font-weight: 400;
    }

    body.bl-body .bl-hero-ctas .bl-btn-outline:hover {
        background: transparent;
        color: var(--c-accent-glow);
        text-decoration-color: var(--c-accent-glow);
    }

    /* Trust line — micro-info délicate */
    body.bl-body .bl-hero-trust {
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
        opacity: 0.55;
        margin-top: var(--s-2);
    }
}

/* Section headers (eyebrow + h2 + p) directs des sections transparentes :
   on bypass tout ce qui est À L'INTÉRIEUR d'une .bl-card (carte blanche)
   pour préserver la typographie d'origine de ces cartes. */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-eyebrow:not(.bl-card .bl-eyebrow):not(.bl-card-vertical .bl-eyebrow) {
    color: var(--c-accent-glow);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) > .bl-container-wide > .bl-section-header h2,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) > .bl-container-wide > h2,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) > .bl-container-wide > .bl-section-header h3 {
    color: var(--c-paper);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) > .bl-container-wide > .bl-section-header p,
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) > .bl-container-wide > p {
    color: rgba(250, 249, 246, 0.82);
}

/* Protection : les sections cream n'ont pas de couleur de texte explicite et
   héritaient du body (ink). Le body.bl-body en paper casse cet héritage → on
   restore les couleurs originales pour que les cream restent lisibles. */
body.bl-body .bl-section-cream { color: var(--c-ink); }

body.bl-body .bl-section-cream h1,
body.bl-body .bl-section-cream h2,
body.bl-body .bl-section-cream h3,
body.bl-body .bl-section-cream h4,
body.bl-body .bl-section-cream h5,
body.bl-body .bl-section-cream h6 { color: var(--c-ink); }

body.bl-body .bl-section-cream p,
body.bl-body .bl-section-cream li,
body.bl-body .bl-section-cream .bl-section-header p { color: var(--c-ink-3); }

body.bl-body .bl-section-cream strong { color: var(--c-ink); }

body.bl-body .bl-section-cream .bl-eyebrow { color: var(--c-accent-deep); }

/* Protection : les cards blanches (bl-card) doivent garder leur typographie
   d'origine (texte ink), peu importe le body.color clair de la home.
   Exclut .bl-card-service et .bl-post-card (translucides bleues, texte clair). */
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) { color: var(--c-ink); }

body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) h2,
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) h3,
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) h4,
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) h5,
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) h6 { color: var(--c-ink); }

body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) p,
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) li,
body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) span:not(.bl-badge):not(.bl-badge-popular):not(.bl-badge-roi):not(.bl-badge-tendance):not(.bl-badge-cote-azur) {
    color: var(--c-ink-3);
}

body.bl-body .bl-card:not(.bl-card-service):not(.bl-post-card) strong { color: var(--c-ink); }

/* ==========================================================================
   Section Contact — cream avec le bloc "Mes coordonnées" en dégradé bleu
   ========================================================================== */
body.bl-body .bl-contact-section .bl-contact-info {
    background: linear-gradient(180deg, var(--c-sea-medium) 0%, var(--c-sea-deep) 60%, var(--c-sea-abyss) 100%);
}

/* ==========================================================================
   Cards services SEO/SEA/GEO — design éditorial harmonisé avec le bloc
   "Besoin d'un site ?" : translucide blanc + accent gold top + texte clair.
   ========================================================================== */
body.bl-body .bl-card-service {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
    color: var(--c-paper);
    position: relative;
    overflow: hidden;
}

/* Accent gold thin line en haut — signature */
body.bl-body .bl-card-service::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--c-accent) 30%,
        var(--c-accent) 70%,
        transparent 100%);
}

body.bl-body .bl-card-service h3 {
    color: var(--c-paper);
    font-size: var(--fs-6);
    margin-bottom: var(--s-3);
}

body.bl-body .bl-card-service .bl-card-icon { color: var(--c-accent-glow); }

body.bl-body .bl-card-service .bl-card-list li {
    color: rgba(250, 249, 246, 0.78);
}

body.bl-body .bl-card-service .bl-card-list li::before {
    background-color: var(--c-accent-glow);
}

body.bl-body .bl-card-service .bl-card-cta {
    color: var(--c-accent-glow);
    font-weight: 500;
}

body.bl-body .bl-card-service .bl-card-cta:hover {
    color: var(--c-accent);
    gap: var(--s-2);
}

body.bl-body .bl-card-service:hover {
    border-color: rgba(244, 206, 90, 0.35);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 24, 48, 0.25);
}

/* Le sous-titre de la section Services (et autres sections avec .bl-section-header p)
   doit basculer en clair sur fond bleu — déjà géré ci-dessus mais on renforce
   au cas où la structure ne match pas exactement le > direct. */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-section-header p {
    color: rgba(250, 249, 246, 0.82);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-section-header .bl-eyebrow {
    color: var(--c-accent-glow);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-section-header h2 {
    color: var(--c-paper);
}

/* Stats band — sur fond bleu, valeurs blanches, libellés clairs */
body.bl-body .bl-stats-band {
    border-top-color: rgba(255, 255, 255, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.bl-body .bl-stat-value { color: var(--c-paper); }
body.bl-body .bl-stat-label { color: rgba(250, 249, 246, 0.7); }

/* Les sections cream + dark gardent leur fond opaque : elles "flottent" sur
   le dégradé bleu. On adoucit juste les transitions visuelles. */
body.bl-body .bl-section-cream {
    /* léger halo blanc pour qu'elle se détache franchement sur le bleu */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Les sections dark conservent leur identité (ink), elles se fondent
   naturellement dans la palette bleue. Pas d'override nécessaire. */

/* FAQ / Case studies / autres sections par défaut : harmonisation */
body.bl-body .bl-faq summary,
body.bl-body .bl-faq details { color: var(--c-paper); }

/* Override : sur fond bleu, le hover cream rend le texte blanc invisible.
   On utilise un wash blanc translucide à la place. */
body.bl-body .bl-faq-item summary:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.bl-body .bl-faq details {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.04);
}

body.bl-body .bl-faq details[open] {
    background-color: rgba(255, 255, 255, 0.07);
}

body.bl-body .bl-faq details p,
body.bl-body .bl-faq details li {
    color: rgba(250, 249, 246, 0.85);
}

/* FAQ dans section cream → texte ink dark (pas paper blanc invisible) */
body.bl-body .bl-section-cream .bl-faq summary,
body.bl-body .bl-section-cream .bl-faq details,
body.bl-body .bl-section-cream.bl-faq summary,
body.bl-body .bl-section-cream.bl-faq details { color: var(--c-ink); }

body.bl-body .bl-section-cream .bl-faq details,
body.bl-body .bl-section-cream.bl-faq details {
    border-color: var(--c-line);
    background-color: var(--c-paper-3);
}

body.bl-body .bl-section-cream .bl-faq details[open],
body.bl-body .bl-section-cream.bl-faq details[open] {
    background-color: var(--c-paper-3);
    border-color: var(--c-accent);
}

body.bl-body .bl-section-cream .bl-faq details p,
body.bl-body .bl-section-cream .bl-faq details li,
body.bl-body .bl-section-cream.bl-faq details p,
body.bl-body .bl-section-cream.bl-faq details li {
    color: var(--c-ink-3);
}

body.bl-body .bl-section-cream .bl-faq-item summary:hover,
body.bl-body .bl-section-cream.bl-faq .bl-faq-item summary:hover {
    background-color: var(--c-paper-2);
}

/* Liens inline sur fond bleu : or pour le contraste */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) a:not(.bl-btn):not(.bl-card-cta) {
    color: var(--c-accent-glow);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) a:not(.bl-btn):not(.bl-card-cta):hover {
    color: var(--c-accent);
}

/* Boutons outline sur fond bleu : bordure + texte clairs */
body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-btn-outline {
    color: var(--c-paper);
    border-color: rgba(255, 255, 255, 0.4);
}

body.bl-body .bl-section:not(.bl-section-cream):not(.bl-section-dark) .bl-btn-outline:hover {
    --btn-bg: var(--c-accent);
    --btn-color: var(--c-ink);
    --btn-border: var(--c-accent);
    background-color: var(--c-accent);
    color: var(--c-ink);
    border-color: var(--c-accent);
}

@media print {
    .bl-header,
    .bl-footer,
    .bl-whatsapp-float,
    .bl-mobile-drawer,
    .bl-menu-backdrop,
    .bl-cta-final,
    .bl-skip-link { display: none !important; }

    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
    .bl-card, .bl-section { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}

/* ==========================================================================
   BLOG — Index (home.php) avec grille cards éditoriales
   ========================================================================== */

.bl-blog-hero {
    background: transparent;
    padding-block: clamp(2.5rem, 1.4rem + 5vw, 5rem);
}

body.bl-body .bl-blog-hero h1 { color: var(--c-paper); }
body.bl-body .bl-blog-hero .bl-hero-subtitle { color: rgba(250, 249, 246, 0.85); }

.bl-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}

@media (min-width: 768px)  { .bl-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .bl-blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card article — design éditorial moderne, fond translucide cohérent avec
   le body skin bleu. */
.bl-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}

.bl-post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 206, 90, 0.40);
    box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.35);
}

/* Vignette (featured image) */
.bl-post-card-thumb-link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

.bl-post-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow) var(--ease-out);
}

.bl-post-card:hover .bl-post-card-thumb {
    transform: scale(1.04);
}

.bl-post-card-thumb-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(244, 206, 90, 0.15), rgba(244, 206, 90, 0.05));
    color: var(--c-accent-glow);
    font-family: var(--ff-heading);
    font-size: 4rem;
    font-weight: 500;
}

/* Body de la card */
.bl-post-card-body {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
}

.bl-post-card-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 500;
    color: rgba(250, 249, 246, 0.78);
}

.bl-post-card-cat {
    color: var(--c-accent-glow);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}

.bl-post-card-cat:hover { color: var(--c-accent); }

.bl-post-card-sep { opacity: 0.45; }

.bl-post-card-title {
    font-size: var(--fs-5);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--c-paper);
}

.bl-post-card-title a {
    color: var(--c-paper);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}

.bl-post-card-title a:hover { color: var(--c-accent-glow); }

.bl-post-card-excerpt {
    margin: 0;
    font-size: var(--fs-3);
    line-height: 1.55;
    color: rgba(250, 249, 246, 0.92);
    flex: 1;
}

.bl-post-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--c-accent-glow);
    font-size: var(--fs-3);
    font-weight: 500;
    text-decoration: none;
    margin-top: var(--s-2);
    transition: color var(--t-fast) var(--ease-out),
                gap var(--t-fast) var(--ease-out);
}

.bl-post-card-cta:hover {
    color: var(--c-accent);
    gap: var(--s-2);
}

/* Pagination */
.bl-pagination {
    margin-top: var(--s-6);
    display: flex;
    justify-content: center;
}

.bl-pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.bl-pagination-list .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--s-2);
    border-radius: var(--r-1);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(250, 249, 246, 0.85);
    text-decoration: none;
    font-size: var(--fs-3);
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-pagination-list .page-numbers:hover {
    background: rgba(244, 206, 90, 0.12);
    border-color: rgba(244, 206, 90, 0.40);
    color: var(--c-accent-glow);
}

.bl-pagination-list .page-numbers.current {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-ink);
    font-weight: 600;
}

/* Empty state */
.bl-empty-state {
    padding: var(--s-6) 0;
}

body.bl-body .bl-empty-state p { color: rgba(250, 249, 246, 0.82); }

/* ==========================================================================
   BLOG — Single post (article individuel)
   ========================================================================== */

body.bl-body.single-post .entry-header,
body.bl-body.single-post .entry-content {
    color: var(--c-ink);
}

/* ==========================================================================
   BLOG — Single article (page d'un post)
   ========================================================================== */

.bl-single-post { display: block; }

/* Hero : bleu, meta + titre + featured image en dessous */
.bl-single-hero {
    padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.bl-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin: 0 0 var(--s-3);
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 500;
    color: rgba(250, 249, 246, 0.65);
}

.bl-single-meta-cat {
    color: var(--c-accent-glow);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}
.bl-single-meta-cat:hover { color: var(--c-accent); }
.bl-single-meta-sep { opacity: 0.4; }

body.bl-body .bl-single-title {
    color: var(--c-paper);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
    line-height: 1.10;
    letter-spacing: -0.025em;
    margin: 0 0 var(--s-3);
}

body.bl-body .bl-single-lede {
    color: rgba(250, 249, 246, 0.85);
    font-size: var(--fs-5);
    line-height: 1.55;
    margin: 0;
    max-width: 38em;
}

.bl-single-hero-image {
    margin: var(--s-5) auto 0;
    max-width: 720px;
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.45);
    background-color: rgba(0, 0, 0, 0.15);
}

.bl-single-hero-image-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Body de l'article (section cream pour lisibilité maximale) */
.bl-single-body-section {
    padding-block: clamp(2.5rem, 1.4rem + 4vw, 5rem);
}

.bl-single-body {
    color: var(--c-ink);
    font-size: var(--fs-4);
    line-height: 1.75;
    max-width: 740px;
    margin-inline: auto;
}

.bl-single-body p {
    color: var(--c-ink-2, var(--c-ink));
    margin: 0 0 var(--s-3);
    font-size: var(--fs-4);
    line-height: 1.75;
}

.bl-single-body strong { color: var(--c-ink); font-weight: 600; }
.bl-single-body em { color: var(--c-ink-3); }

.bl-single-body h2 {
    color: var(--c-ink);
    font-family: var(--ff-heading);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    line-height: 1.20;
    letter-spacing: -0.018em;
    margin: var(--s-6) 0 var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
}

.bl-single-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.bl-single-body h3 {
    color: var(--c-ink);
    font-family: var(--ff-heading);
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.25;
    margin: var(--s-5) 0 var(--s-2);
}

.bl-single-body h4 {
    color: var(--c-ink);
    font-size: var(--fs-5);
    margin: var(--s-4) 0 var(--s-2);
}

.bl-single-body ul,
.bl-single-body ol {
    margin: 0 0 var(--s-4);
    padding-left: var(--s-4);
}

.bl-single-body li {
    color: var(--c-ink-3);
    margin-bottom: var(--s-2);
    line-height: 1.65;
}

.bl-single-body li::marker { color: var(--c-accent-deep); }

.bl-single-body a {
    color: var(--c-accent-deep);
    text-decoration: underline;
    text-decoration-color: rgba(146, 116, 14, 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-single-body a:hover {
    color: var(--c-accent);
    text-decoration-color: var(--c-accent);
}

/* Blockquotes : encadrés "Vu sur le terrain" / "À faire correctement" */
.bl-single-body blockquote,
.bl-single-body .wp-block-quote {
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    background: linear-gradient(135deg, rgba(244, 206, 90, 0.10), rgba(244, 206, 90, 0.04));
    border-left: 4px solid var(--c-accent);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-style: normal;
}

.bl-single-body blockquote p,
.bl-single-body .wp-block-quote p {
    margin: 0;
    color: var(--c-ink);
    font-size: var(--fs-4);
    line-height: 1.65;
}

.bl-single-body blockquote p + p,
.bl-single-body .wp-block-quote p + p { margin-top: var(--s-2); }

/* Buttons (Gutenberg wp-block-button) */
.bl-single-body .wp-block-buttons {
    margin: var(--s-5) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.bl-single-body .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    background-color: var(--c-accent);
    color: var(--c-ink);
    border-radius: var(--r-1);
    font-size: var(--fs-3);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
    box-shadow: 0 6px 20px -8px rgba(244, 206, 90, 0.55);
}

.bl-single-body .wp-block-button__link:hover {
    background-color: var(--c-accent-bright);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -10px rgba(244, 206, 90, 0.70);
}

/* Images dans le body */
.bl-single-body img,
.bl-single-body .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-2);
    margin: var(--s-4) 0;
}

/* Tags en bas d'article */
.bl-single-tags {
    list-style: none;
    padding: 0;
    margin: var(--s-6) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    max-width: 740px;
    margin-inline: auto;
}

.bl-single-tags a {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: var(--c-paper-3);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-ink-3);
    font-size: var(--fs-2);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.bl-single-tags a:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-deep);
}

/* Mobile : ajustements */
@media (max-width: 639.98px) {
    .bl-single-hero-image { margin-top: var(--s-4); border-radius: var(--r-2); }
    .bl-single-body { font-size: var(--fs-3); }
}

/* ==========================================================================
   BLOG POST CARDS — OVERRIDES PRIORITAIRES
   Pour battre toute règle globale qui pourrait écraser les couleurs claires
   des cards de blog (.bl-post-card est translucide bleue, pas blanche).
   ========================================================================== */
body.bl-body .bl-post-card .bl-post-card-title,
body.bl-body .bl-post-card .bl-post-card-title a { color: var(--c-paper); }

body.bl-body .bl-post-card .bl-post-card-excerpt { color: rgba(250, 249, 246, 0.92); }

body.bl-body .bl-post-card .bl-post-card-meta { color: rgba(250, 249, 246, 0.82); }

body.bl-body .bl-post-card .bl-post-card-cat { color: var(--c-accent-glow); }
body.bl-body .bl-post-card .bl-post-card-cat:hover { color: var(--c-accent); }

body.bl-body .bl-post-card .bl-post-card-cta { color: var(--c-accent-glow); }
body.bl-body .bl-post-card .bl-post-card-cta:hover { color: var(--c-accent); }

body.bl-body .bl-post-card .bl-post-card-title a:hover { color: var(--c-accent-glow); }