/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    --color-navy-900: #0c2e5e;
    --color-navy-800: #124388;
    --color-navy-700: #185ab8;
    --color-navy-tint: #f3f6f9;
    --color-gold: #f3ae2d;
    --color-gold-dark: #be8823;
    --color-gold-light: #fadba1;
    --color-text: #16202e;
    --color-text-muted: #5b6472;
    --color-bg: #ffffff;
    --color-bg-alt: #f2f5fa;
    --color-border: #e4e9f1;

    --font-heading: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 14px rgba(15, 37, 68, 0.06);
    --shadow-md: 0 14px 34px rgba(15, 37, 68, 0.10);
    --shadow-lg: 0 24px 60px rgba(15, 37, 68, 0.16);

    --max-width: 1200px;
    --header-height: 76px;

    /* Motif "plan architectural" en filigrane (grille + silhouette de bâtiment
       + traits de cotation), opacité déjà posée à 7-8% dans le SVG lui-même
       (stroke-opacity) plutôt que via une opacity CSS externe, pour ne jamais
       risquer d'affaiblir le contraste d'un texte qui passerait par-dessus. */
    --pattern-blueprint-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23124388' stroke-opacity='0.07' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='0.5' d='M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200'/%3E%3Cpath stroke-width='1' d='M24 96L52 64L80 96M28 96V170H76V96'/%3E%3Crect x='46' y='138' width='14' height='32' stroke-width='1'/%3E%3Crect x='34' y='110' width='10' height='10' stroke-width='1'/%3E%3Crect x='62' y='110' width='10' height='10' stroke-width='1'/%3E%3Cpath stroke-width='1' d='M100 182H180M100 176V188M180 176V188'/%3E%3Ccircle cx='160' cy='36' r='14' stroke-width='1'/%3E%3Cpath stroke-width='1' d='M152 36H168M160 28V44'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-blueprint-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23F3AE2D' stroke-opacity='0.08' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='0.5' d='M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200'/%3E%3Cpath stroke-width='1' d='M24 96L52 64L80 96M28 96V170H76V96'/%3E%3Crect x='46' y='138' width='14' height='32' stroke-width='1'/%3E%3Crect x='34' y='110' width='10' height='10' stroke-width='1'/%3E%3Crect x='62' y='110' width='10' height='10' stroke-width='1'/%3E%3Cpath stroke-width='1' d='M100 182H180M100 176V188M180 176V188'/%3E%3Ccircle cx='160' cy='36' r='14' stroke-width='1'/%3E%3Cpath stroke-width='1' d='M152 36H168M160 28V44'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-navy-800);
    line-height: 1.2;
    margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/**
 * Contenu long généré par le mini éditeur riche admin (Quill) : article de
 * blog, description de service/réalisation, bio, piliers/histoire À propos.
 * Voir render_rich_text() côté PHP.
 */
.rich-content p { margin: 0 0 1em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content h2 { font-size: 1.3rem; margin-top: 1.2em; }
.rich-content h3 { font-size: 1.1rem; margin-top: 1.2em; }
.rich-content h2:first-child, .rich-content h3:first-child { margin-top: 0; }
.rich-content ul, .rich-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.rich-content li { margin-bottom: .35em; }
.rich-content a { color: var(--color-navy-700); text-decoration: underline; }
.rich-content a:hover { color: var(--color-gold-dark); }

/* Pages légales (/cgu, /confidentialite) : largeur confortable pour un long
   texte structuré, comme les autres pages de contenu simple du site. */
.legal-page__container { max-width: 760px; }

/* ==========================================================================
   Espaces publicitaires (voir helpers::ad_slot())
   ========================================================================== */
.ad-slot {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}
.ad-slot__label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin-bottom: .35rem;
}
.ad-slot img { border-radius: var(--radius-sm); }
.ad-slot a { display: block; }

/* Barre publicitaire fixe en bas d'écran, emplacement 'mobile_sticky_bottom'
   (voir helpers::ad_slot_sticky_mobile()) — masquée par défaut, réaffichée
   UNIQUEMENT ≤640px par la media query plus bas (jamais sur desktop, même si
   la classe .is-visible est présente dans le DOM). z-index 1100 : au-dessus
   du bouton WhatsApp (1000) pour rester cliquable par-dessus lui si jamais ils
   se chevauchaient malgré le décalage ci-dessous, mais sous le popup
   promotionnel (1200) qui doit toujours passer devant quand il s'affiche. */
.ad-slot-sticky {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    background: #fff;
    box-shadow: 0 -4px 14px rgba(11, 31, 58, .18);
}
.ad-slot-sticky__media { display: block; line-height: 0; }
.ad-slot-sticky__media a, .ad-slot-sticky__media img {
    display: block;
    width: 100%;
    height: 56px;
    object-fit: cover;
}
.ad-slot-sticky__label {
    position: absolute;
    top: 6px; left: 10px;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    background: rgba(11, 31, 58, .6);
    padding: 1px 7px;
    border-radius: 3px;
}
.ad-slot-sticky__close {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: none;
    color: var(--color-navy-800);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
/* Coexistence avec le popup promotionnel : le z-index (1100 < 1200) suffit à
   faire passer le popup devant, mais son fond semi-transparent laisserait la
   barre sticky visible en transparence derrière — on la masque entièrement
   tant que le popup est ouvert plutôt que de superposer deux réclames. */
body:has(#promoPopupOverlay.is-open) .ad-slot-sticky { display: none; }
/* Fermeture par l'utilisateur (voir main.js) : classe plus spécifique que la
   simple .ad-slot-sticky de la media query mobile, donc prioritaire quel que
   soit l'ordre des règles. */
.ad-slot-sticky.is-dismissed { display: none; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.bg-alt { background: var(--color-bg-alt); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    margin-bottom: .75em;
}

.section-head {
    max-width: 640px;
    margin: 0 auto 3rem;
    text-align: center;
}

.section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 800; }
.section-head .lead { color: var(--color-text-muted); font-size: 1.05rem; }

section { padding: 80px 0; }

/* ==========================================================================
   Buttons & pills
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    padding: 13px 26px;
    min-height: 44px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    line-height: 1;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-navy-900);
    box-shadow: var(--shadow-sm);
}
.btn-gold:hover { box-shadow: var(--shadow-md); }

.btn-navy {
    background: var(--color-navy-800);
    color: #fff;
}
.btn-navy:hover { background: var(--color-navy-700); }

.btn-whatsapp {
    background: #25d366;
    color: #fff;
    margin-bottom: 1.75rem;
}
.btn-whatsapp:hover { background: #1ebe5b; }

.btn-outline-white {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.btn-outline-white:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Variante contour pour fond clair (header) : même esprit que .btn-outline-white
   mais bordure/texte navy au lieu de blanc, utilisée pour les CTA secondaires
   sur les zones à fond blanc (contrairement à .btn-outline-white, réservé aux
   fonds sombres comme le hero). */
.btn-outline-navy {
    background: transparent;
    border-color: var(--color-navy-800);
    color: var(--color-navy-800);
}
.btn-outline-navy:hover { background: var(--color-navy-tint); }

.btn-sm { padding: 10px 20px; font-size: .85rem; }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-gold-dark);
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
}
.btn-link .arrow { transition: transform .15s ease; }
.btn-link:hover .arrow { transform: translateX(4px); }

.badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-navy-800);
    color: #fff;
}
.badge.badge-gold { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); color: var(--color-navy-900); }
.badge.badge-status-disponible { background: #2e9e5b; color: #fff; }
.badge.badge-status-reserve { background: #e0932b; color: #fff; }
.badge.badge-status-vendu { background: #6b7482; color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.logo {
    display: flex;
    align-items: center;
    gap: .6em;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .01em;
    color: var(--color-navy-800);
    white-space: nowrap;
}
.logo .logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--color-navy-800), var(--color-navy-900));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 1rem;
    flex-shrink: 0;
}
.logo .logo-accent { color: var(--color-gold-dark); }
.logo-img { height: 58px; width: auto; max-width: 140px; }

/* Le logo a un fond blanc opaque (JPG) : sur le footer bleu marine, on
   l'entoure d'une plaque blanche arrondie plutôt que de laisser un carré
   blanc brut coller au fond sombre. */
.footer-col--brand .logo-img {
    height: 52px;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}
.main-nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover { color: var(--color-navy-800); }
.main-nav a.is-active { color: var(--color-gold-dark); border-color: var(--color-gold-dark); }

/* ==========================================================================
   Sous-menus de navigation (À propos / Services / Actualités)
   Desktop (>992px) : ouverture au survol ou au focus clavier (:hover/
   :focus-within, aucun JS requis) ET au clic (.is-open, piloté par main.js —
   plus pratique sur trackpad/tactile hybride, permet une fermeture explicite).
   Mobile (<=992px) : accordéon au tap uniquement, voir bloc Responsive.
   ========================================================================== */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown.is-active > .nav-dropdown__trigger { color: var(--color-gold-dark); border-color: var(--color-gold-dark); }

.nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    padding: 0 0 4px;
    margin: 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-body);
    color: var(--color-text);
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.nav-dropdown__trigger:hover { color: var(--color-navy-800); }
.nav-dropdown__arrow { flex-shrink: 0; transition: transform .2s ease; }

.nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .9rem;
    min-width: 210px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    z-index: 1001;
}
/* Dernier groupe de la barre (Actualités, juste avant Contact) : son menu
   s'ouvrirait partiellement hors écran à droite si aligné à gauche comme les
   autres, vu sa position en fin de nav — aligné à droite à la place. */
.nav-dropdown--right .nav-dropdown__menu { left: auto; right: 0; }

.main-nav .nav-dropdown__menu a {
    display: block;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    border-bottom: none;
    font-size: .86rem;
    font-weight: 500;
    white-space: nowrap;
}
.main-nav .nav-dropdown__menu a:hover { background: var(--color-bg-alt); color: var(--color-navy-800); }
.main-nav .nav-dropdown__menu a.is-active { background: var(--color-navy-tint); color: var(--color-gold-dark); font-weight: 700; }

/* Comportement desktop uniquement : au-delà de 992px, la nav à plat redevient
   une rangée horizontale (voir bloc Responsive pour <=992px, qui redéfinit
   entièrement ce composant en accordéon). Isolé dans ce min-width pour ne
   jamais entrer en conflit avec le survol/focus, sans existence sur tactile,
   avec l'accordéon mobile piloté uniquement par .is-open. */
@media (min-width: 993px) {
    .nav-dropdown__menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }
    .nav-dropdown:hover .nav-dropdown__menu,
    .nav-dropdown:focus-within .nav-dropdown__menu,
    .nav-dropdown.is-open .nav-dropdown__menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .18s ease, transform .18s ease;
    }
    .nav-dropdown:hover .nav-dropdown__arrow,
    .nav-dropdown:focus-within .nav-dropdown__arrow,
    .nav-dropdown.is-open .nav-dropdown__arrow {
        transform: rotate(180deg);
    }
}

/* Le CTA du header est un peu à l'étroit entre la nav et le sélecteur de
   langue juste après le passage en hamburger (~993-1040px) : son texte passe
   alors sur 2 lignes (pas de débordement horizontal, juste un rendu moins
   soigné). Padding légèrement resserré rien que pour ce bouton précis du
   header — .btn-sm garde son padding normal partout ailleurs sur le site
   (cartes, formulaires...). */
@media (min-width: 993px) {
    .header-actions .btn-program {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px;
}
.lang-switch__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.05rem;
    line-height: 1;
    opacity: .45;
    filter: grayscale(60%);
    border: 2px solid transparent;
    transition: opacity .15s ease, filter .15s ease, border-color .15s ease, background-color .15s ease;
}
.lang-switch__flag:hover { opacity: .8; filter: grayscale(0%); }
.lang-switch__flag.is-active {
    opacity: 1;
    filter: grayscale(0%);
    background: var(--color-navy-tint);
    border-color: var(--color-navy-800);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--color-navy-800); margin: 0 auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--color-navy-900);
    overflow: hidden;
    padding: 100px 0 130px;
}
/* Couche photo isolée du voile (voir .hero__overlay ci-dessous) pour pouvoir
   lui appliquer un zoom lent façon "Ken Burns" (voir @keyframes hero-kenburns
   et main.js, qui redémarre l'animation à chaque changement de slide) sans
   jamais toucher à l'assombrissement qui garantit la lisibilité du texte. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-photo, none);
    background-size: cover;
    background-position: center;
    transform: scale(1);
}
.hero__bg.is-zooming {
    animation: hero-kenburns 5.2s ease-in-out forwards;
}
@keyframes hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__bg, .hero__bg.is-zooming {
        animation: none;
        transform: scale(1);
    }
}
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Même voile qu'avant (uniforme et opaque .92/.82 : sur mobile le texte
       occupe toute la largeur du hero, donc TOUTE la zone doit rester assez
       sombre pour rester lisible sans text-shadow) — juste déplacé de
       .hero vers cette couche dédiée, séparée de la photo zoomée. */
    background-image:
        radial-gradient(circle at 85% 20%, rgba(217, 164, 65, .18), transparent 45%),
        linear-gradient(120deg, rgba(9, 20, 41, .92), rgba(16, 42, 84, .82)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 40px);
}
@media (min-width: 993px) {
    /* .hero__content fait max-width:620px : au-delà, la moitié droite du hero
       n'a jamais de texte par-dessus. Le voile y devient beaucoup plus
       transparent (.95 → .30) pour que la photo du slider soit clairement
       visible, tout en restant aussi sombre que la version mobile côté texte
       (0-45%) pour ne rien perdre en lisibilité. */
    .hero__overlay {
        background-image:
            radial-gradient(circle at 85% 20%, rgba(217, 164, 65, .18), transparent 45%),
            linear-gradient(100deg, rgba(9, 20, 41, .93) 0%, rgba(9, 20, 41, .88) 45%, rgba(12, 30, 60, .55) 68%, rgba(16, 42, 84, .30) 100%),
            repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 40px);
    }
}

.hero .container { position: relative; z-index: 2; }
.hero__content { max-width: 620px; }

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--color-gold-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.hero__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); }

.hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: .6em;
}
.hero h1 .accent { color: var(--color-gold); }

.hero .lead {
    color: rgba(255, 255, 255, .78);
    font-size: 1.1rem;
    max-width: 480px;
    margin-bottom: 2.2rem;
}

.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero__dots { display: flex; gap: 8px; }
.hero__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.hero__dots span.is-active { width: 26px; border-radius: var(--radius-pill); background: var(--color-gold); }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats-band {
    position: relative;
    background: var(--color-navy-900) var(--pattern-blueprint-gold) repeat;
    padding: 44px 0;
}
.stats-band[style*="--stats-photo"] {
    /* Photo administrable (voir /admin/accueil, settings.stats_background_image)
       + voile navy foncé (texte clair par-dessus, contrairement au voile clair
       de .why-us-section/.testimonials-section) pour garder chiffres/labels
       lisibles, même technique que .cta-band/.hero. */
    background-image: linear-gradient(rgba(9, 20, 41, .55), rgba(9, 20, 41, .62)), var(--stats-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--color-gold);
}
.stat-label {
    display: block;
    margin-top: .3em;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

/* ==========================================================================
   About section
   ========================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-media { position: relative; }
.about-media .media-placeholder {
    aspect-ratio: 4 / 3.2;
    border-radius: var(--radius-lg);
    background-image: var(--about-photo, none), linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-lg);
}
.about-badge {
    position: absolute;
    left: -1.5rem;
    bottom: -1.5rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 230px;
}
.about-badge .icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-navy-tint); color: var(--color-navy-800);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.about-badge strong { display: block; font-size: .88rem; color: var(--color-navy-800); }
.about-badge span { font-size: .74rem; color: var(--color-text-muted); }

.about-content p { color: var(--color-text-muted); }

.about-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.about-video iframe, .about-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: #000; }

/* ==========================================================================
   Galerie illustrative (page À propos)
   ========================================================================== */
.about-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.about-gallery-item {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.about-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.about-gallery-item figcaption {
    padding: .6rem .8rem;
    font-size: .82rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Services (home preview - icon cards)
   ========================================================================== */
.service-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.service-feature-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-feature-card__icon {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    background: var(--color-navy-tint); color: var(--color-navy-800);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem; font-size: 1.4rem;
}
.service-feature-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.service-feature-card p { color: var(--color-text-muted); font-size: .92rem; }
.service-feature-card ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.service-feature-card li {
    font-size: .85rem; color: var(--color-text-muted);
    padding-left: 1.4em; position: relative; margin-bottom: .4em;
}
.service-feature-card li::before {
    content: "\2713"; position: absolute; left: 0; color: var(--color-gold-dark); font-weight: 700;
}

.service-feature-card.is-dark {
    background: linear-gradient(150deg, var(--color-navy-800), var(--color-navy-900));
    border-color: transparent;
    color: #fff;
}
.service-feature-card.is-dark h3 { color: #fff; }
.service-feature-card.is-dark p, .service-feature-card.is-dark li { color: rgba(255, 255, 255, .72); }
.service-feature-card.is-dark .service-feature-card__icon { background: rgba(217, 164, 65, .18); color: var(--color-gold); }
.service-feature-card.is-dark li::before { color: var(--color-gold); }

/* ==========================================================================
   Nos Partenaires (accueil) — défilement continu ("marquee") en CSS pur.
   Piste dupliquée une fois ; translateX(-50%) boucle sans saut visible
   puisque les deux moitiés sont identiques.
   ========================================================================== */
.partners-section { padding: 70px 0; }
.partners-marquee { overflow: hidden; width: 100%; margin-top: 2.5rem; }
.partners-marquee__track {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: partners-marquee-scroll 36s linear infinite;
}
.partners-marquee__set { display: flex; align-items: center; gap: 4rem; flex-shrink: 0; }
.partners-marquee__item { flex-shrink: 0; height: 52px; display: flex; align-items: center; }
.partners-marquee__item a { display: flex; align-items: center; height: 100%; }
.partners-marquee__item img { height: 100%; width: auto; max-width: 170px; object-fit: contain; }

@keyframes partners-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Pause au survol, desktop uniquement (évite un survol "collant" après un
   tap sur écran tactile). */
@media (hover: hover) {
    .partners-marquee:hover .partners-marquee__track { animation-play-state: paused; }
}

/* Grille statique plutôt que défilante, la section reste utile/lisible. */
@media (prefers-reduced-motion: reduce) {
    .partners-marquee__track { animation: none; width: auto; }
    .partners-marquee__set[aria-hidden="true"] { display: none; }
    .partners-marquee__set:not([aria-hidden]) { flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; }
}

@media (max-width: 640px) {
    .partners-marquee__item { height: 40px; }
    .partners-marquee__item img { max-width: 120px; }
}

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.newsletter-band {
    position: relative;
    /* Même technique que le hero : voile uniforme et opaque par défaut (sous
       992px le grid passe en une colonne, .newsletter-content couvre alors
       toute la largeur donc TOUT le fond doit rester lisible) sur une photo
       unique (--newsletter-photo) qui remplace .newsletter-media comme
       porteuse de l'image. Repli sur navy uni si aucune photo configurée. */
    background-image:
        linear-gradient(160deg, rgba(9, 20, 41, .91), rgba(16, 42, 84, .86)),
        var(--newsletter-photo, none);
    background-color: var(--color-navy-900);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
@media (min-width: 993px) {
    /* Au-delà de 992px (grid à 2 colonnes), .newsletter-content n'occupe que
       la moitié gauche : le voile peut s'alléger à droite pour laisser la
       photo respirer, exactement comme le hero. */
    .newsletter-band {
        background-image:
            linear-gradient(100deg, rgba(9, 20, 41, .93) 0%, rgba(9, 20, 41, .85) 45%, rgba(12, 30, 60, .45) 100%),
            var(--newsletter-photo, none);
    }
}
.newsletter-content { padding: 3.5rem; color: #fff; position: relative; z-index: 1; }
.newsletter-content h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.newsletter-content h2 .accent { color: var(--color-gold); }
.newsletter-content p { color: rgba(255, 255, 255, .72); }
.newsletter-form { display: flex; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 13px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: .92rem;
}
.newsletter-form button {
    border: none;
    font-family: var(--font-heading);
}
.newsletter-note { font-size: .76rem; color: rgba(255, 255, 255, .5); }
/* Même rôle que .newsletter-note (rappel discret de la politique de
   confidentialité près d'un formulaire), mais pour un fond clair — utilisée
   sur le formulaire de dépôt d'avis (fond blanc, contrairement à la section
   newsletter qui a un fond sombre). */
.form-privacy-note { font-size: .76rem; color: var(--color-text-muted); }
.form-privacy-note a { color: inherit; text-decoration: underline; }
.newsletter-media {
    /* Colonne "vide" : la photo vit désormais sur .newsletter-band lui-même
       (voir plus haut), cet élément ne fait plus que réserver la hauteur de
       la moitié droite du grid quand aucun contenu n'y est affiché. */
    height: 100%;
    min-height: 280px;
}

/* container-outer wraps rounded band with side padding on page */
.newsletter-wrap { padding: 0 0 80px; }
.newsletter-wrap.is-first { padding-top: 80px; }

/* ==========================================================================
   Bannière de page administrable (toutes les pages publiques sauf accueil)
   ========================================================================== */
.page-banner {
    position: relative;
    padding: 90px 0;
    text-align: center;
    background-image:
        linear-gradient(150deg, rgba(12, 46, 94, .88), rgba(18, 67, 136, .82)),
        var(--banner-photo, none),
        linear-gradient(150deg, var(--color-navy-800), var(--color-navy-900));
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.page-banner h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 800;
    margin: 0;
}

/* ==========================================================================
   Page header (services / blog / generic inner pages)
   ========================================================================== */
.page-header {
    padding: 64px 0 40px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}
.page-header h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; }
.page-header .lead { color: var(--color-text-muted); max-width: 640px; font-size: 1.02rem; }
.page-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.search-box {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    min-width: 260px;
    color: var(--color-text-muted);
}
.search-box input {
    border: none; background: none; outline: none; font-family: var(--font-body);
    font-size: .9rem; flex: 1; color: var(--color-text);
}

/* ==========================================================================
   Filter pills
   ========================================================================== */
.filter-pills {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    padding: 28px 0;
    overflow-x: auto;
}
.pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.pill:hover { border-color: var(--color-navy-800); }
.pill.is-active { background: var(--color-navy-800); border-color: var(--color-navy-800); color: #fff; }
.pill { min-height: 44px; }
.filter-pills--secondary { padding-top: 0; }
.filter-pills--secondary .pill { padding: 6px 16px; min-height: 36px; font-size: .8rem; }

/* ==========================================================================
   Services grid (full listing - photo cards)
   ========================================================================== */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-bottom: 80px;
}
.service-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
}
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
@media (hover: hover) {
    .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .service-card:hover .service-card__media img { transform: scale(1.05); }
}
.service-card__media .badge { position: absolute; top: 14px; right: 14px; }
.service-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.service-card__body h2, .service-card__body h3 { font-size: 1.1rem; margin: 0; }
.service-card__body p { color: var(--color-text-muted); font-size: .9rem; margin: 0; flex: 1; }
.service-card__body .price { font-size: .84rem; color: var(--color-navy-800); font-weight: 700; }

.service-card.cta-card {
    background: linear-gradient(150deg, var(--color-navy-800), var(--color-navy-900));
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem;
}
.service-card.cta-card h2, .service-card.cta-card h3 { color: #fff; font-size: 1.25rem; }
.service-card.cta-card p { color: rgba(255, 255, 255, .72); }

/* ==========================================================================
   Construction philosophy blurb (accueil, section Services)
   ========================================================================== */
.construction-philosophy {
    max-width: 760px;
    margin: 3rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.construction-philosophy h3 { font-size: 1.2rem; }
.construction-philosophy p { color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   "Pourquoi nous choisir" (accueil) — grille simple icône + titre + texte,
   volontairement sans carte fermée pour varier visuellement des nombreuses
   grilles de cartes (services/annonces/réalisations/staff/blog) déjà utilisées
   sur la page.
   ========================================================================== */
.why-us-section {
    /* Repli motif filigrane navy si aucune image n'est configurée depuis
       /admin/accueil. */
    background-image: var(--pattern-blueprint-navy);
    background-repeat: repeat;
}
.why-us-section[style*="--why-us-photo"] {
    /* Photo administrable + voile clair (le texte de cette section reste en
       couleurs sombres, contrairement au voile foncé de .cta-band/.hero) pour
       garder titres/textes lisibles par-dessus. */
    background-image: linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)), var(--why-us-photo);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}
.why-us-item { text-align: center; }
.why-us-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--color-navy-tint);
    color: var(--color-navy-800);
}
.why-us-item h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.why-us-item p { color: var(--color-text-muted); font-size: .9rem; margin: 0; }

/* ==========================================================================
   Bandeau CTA générique (accueil) — même langage visuel que .newsletter-band
   (fond navy, accent gold) mais en une seule colonne centrée, sans formulaire.
   ========================================================================== */
.cta-band {
    position: relative;
    /* Repli dégradé navy uni si --sell-banner-photo n'est pas posée (aucune
       image configurée ni réalisation vedette disponible) ; sinon la même
       technique de voile que le hero (dégradé sombre + photo dessous). */
    background-image:
        linear-gradient(135deg, rgba(9, 20, 41, .88), rgba(16, 42, 84, .82)),
        var(--sell-banner-photo, none);
    background-color: var(--color-navy-900);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    padding: 3.5rem 2rem;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .72); max-width: 560px; margin: 0 auto 1.6rem; }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    padding: 40px 0 80px;
    align-items: start;
}

.featured-post {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background-image:
        linear-gradient(0deg, rgba(9, 20, 41, .93), rgba(9, 20, 41, .3)),
        var(--featured-photo, none),
        linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
    background-size: cover;
    background-position: center;
}
.featured-post__badge { position: absolute; top: 1.5rem; left: 1.5rem; }
.featured-post__content { padding: 2.5rem; max-width: 620px; }
.featured-post h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .4em; }
.featured-post p { color: rgba(255, 255, 255, .78); }
.featured-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
    margin: .75rem 0 1.25rem;
}
.featured-post .btn-link { color: var(--color-gold); }

.sidebar-card {
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.sidebar-card--dark {
    background: var(--color-navy-900);
    color: #fff;
}
.sidebar-card--dark h3 { color: #fff; }
.sidebar-card--dark p { color: rgba(255, 255, 255, .7); font-size: .88rem; }
.sidebar-card--light {
    background: var(--color-bg-alt);
}
.cat-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: #fff;
    color: var(--color-navy-800);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-bottom: 40px;
}
.blog-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
@media (hover: hover) {
    .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .blog-card:hover .blog-card__media img { transform: scale(1.05); }
}
.blog-card__tag {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(9, 20, 41, .78);
    color: #fff;
    font-size: .72rem;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}
.blog-card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.blog-card__meta { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-gold-dark); }
.blog-card__body h3 { font-size: 1.05rem; margin: 0; }
.blog-card__body p { color: var(--color-text-muted); font-size: .88rem; flex: 1; margin: 0; }
.blog-card__footer { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--color-text-muted); padding-top: .5rem; border-top: 1px solid var(--color-border); }

.blog-card.cta-card {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-navy-900);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.blog-card.cta-card h3 { color: var(--color-navy-900); }
.blog-card.cta-card p { color: rgba(11, 31, 58, .75); }

/* Liste secondaire "façon magazine" (page /blog uniquement) : miniature à
   gauche sur desktop/tablette, en haut sur mobile. */
.blog-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-bottom: 40px;
}
.blog-list-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-list-card__media {
    position: relative;
    flex: 0 0 140px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
}
.blog-list-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
@media (hover: hover) {
    .blog-list-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .blog-list-card:hover .blog-list-card__media img { transform: scale(1.05); }
}
.blog-list-card__tag {
    position: absolute;
    left: 8px;
    top: 8px;
    background: rgba(9, 20, 41, .82);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.blog-list-card__body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    min-width: 0;
}
.blog-list-card__body h3 { font-size: .98rem; margin: 0; line-height: 1.35; }
.blog-list-card__meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; color: var(--color-text-muted); }

.blog-list-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-navy-900);
    border-radius: var(--radius-md);
    padding: 2rem;
    margin-top: .5rem;
}
.blog-list-cta h3 { color: var(--color-navy-900); margin-bottom: .3em; }
.blog-list-cta p { color: rgba(11, 31, 58, .75); margin: 0; }

/* ==========================================================================
   Fiche article individuelle (blog/show) : fil d'ariane, partage, réactions,
   bio auteur, article précédent, commentaires.
   ========================================================================== */
.breadcrumb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.breadcrumb-nav a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--color-navy-800); text-decoration: underline; }
.breadcrumb-nav span[aria-current] { color: var(--color-text); font-weight: 600; }
.breadcrumb-nav__sep { color: var(--color-border); }

.share-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.share-buttons__label { font-size: .82rem; font-weight: 600; color: var(--color-text-muted); margin-right: .25rem; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    width: 36px; height: 36px; padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: #fff; color: var(--color-navy-800);
    cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.share-btn:hover { background: var(--color-navy-800); color: #fff; border-color: var(--color-navy-800); }
.share-btn--copy { width: auto; padding: 0 14px; }
.share-btn__copy-text { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.share-btn--copy.is-copied { background: var(--color-gold); color: var(--color-navy-900); border-color: var(--color-gold); }

.reactions-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.reaction-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: #fff; font-family: var(--font-body); font-size: .88rem; color: var(--color-text);
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.reaction-btn:hover { border-color: var(--color-gold); }
.reaction-btn.is-active { background: var(--color-navy-tint); border-color: var(--color-navy-800); color: var(--color-navy-800); font-weight: 600; }
.reaction-btn__count { color: var(--color-text-muted); font-size: .82rem; }
.reaction-btn.is-active .reaction-btn__count { color: inherit; }

.author-bio {
    display: flex; align-items: center; gap: 1rem;
    margin-top: 2.5rem; padding: 1.25rem 1.5rem;
    background: var(--color-bg-alt); border-radius: var(--radius-md);
}
.author-bio__avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--color-navy-tint); color: var(--color-navy-800);
}
.author-bio__label { margin: 0; font-size: .78rem; color: var(--color-text-muted); }
.author-bio__name { margin: 0; font-weight: 700; color: var(--color-navy-900); }

.prev-post-card {
    display: flex; align-items: center; gap: 1rem;
    margin-top: 1.5rem; padding: 1rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    text-decoration: none; color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.prev-post-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.prev-post-card img { width: 76px; height: 76px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.prev-post-card__label { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: .2em; }
.prev-post-card h3 { margin: 0; font-size: .98rem; line-height: 1.35; }

.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.comment-list__item { padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.comment-list__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.comment-list__author { font-weight: 700; color: var(--color-navy-900); }
.comment-list__date { font-size: .78rem; color: var(--color-text-muted); }
.comment-list__content { margin: 0; white-space: pre-line; }

.comment-form__notice { font-size: .82rem; color: var(--color-text-muted); margin: -.25rem 0 0; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding-bottom: 40px; }
.page-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .88rem;
}
.page-btn.is-active { background: var(--color-navy-800); border-color: var(--color-navy-800); color: #fff; }

/* ==========================================================================
   About page (pillars, team, brand quote, testimonial)
   ========================================================================== */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.pillar-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
.pillar-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-navy-tint);
    color: var(--color-navy-800);
    font-family: var(--font-heading);
    font-weight: 800;
    margin-bottom: 1.1rem;
}
.pillar-card h2, .pillar-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.pillar-card .rich-content { color: var(--color-text-muted); font-size: .9rem; }
.pillar-card p { color: var(--color-text-muted); font-size: .9rem; }

/* Page /a-propos#recompenses : grille complète (voir aussi .award-card--compact
   plus bas pour la variante vedette de l'accueil, en carrousel horizontal). */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.award-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.award-card__photo {
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.1rem;
    background: var(--color-navy-tint);
}
.award-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.award-card__icon {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--color-navy-tint);
    color: var(--color-gold-dark);
    margin: 0 auto 1.1rem;
}
.award-card__title { font-size: 1.02rem; margin-bottom: .3rem; }
.award-card__recipient { display: block; font-weight: 600; color: var(--color-navy-800); font-size: .88rem; }
.award-card__date { display: block; color: var(--color-text-muted); font-size: .8rem; margin-bottom: .7rem; }
.award-card__description { color: var(--color-text-muted); font-size: .88rem; margin: 0; }

/* ==========================================================================
   Carrousel de récompenses (accueil) — même mécanisme JS que le carrousel de
   témoignages (initPagedCarousel(), voir main.js) et même carte .award-card
   que /a-propos#recompenses (aucun nouveau composant visuel, juste un
   .award-slide qui sert de cellule flex sans style propre). Défilement
   horizontal garanti à TOUTE largeur — y compris à 1 carte visible en mobile,
   volontairement jamais une simple grille qui repasserait en 1 colonne
   empilée (voir consigne explicite du chantier).
   ========================================================================== */
.awards-carousel { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 3.25rem; }
.awards-viewport { overflow: hidden; }
.awards-track { display: flex; gap: 1.5rem; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
    .awards-track { transition: none; }
}

.award-slide { flex: 0 0 calc((100% - 1.5rem * 2) / 3); min-width: 0; display: flex; }
.award-slide .award-card { width: 100%; }
.award-card--compact .award-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.awards-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy-800);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.awards-nav:hover { background: var(--color-gold); color: var(--color-navy-900); border-color: var(--color-gold); }
.awards-nav--prev { left: 0; }
.awards-nav--next { right: 0; }
.awards-nav:disabled { opacity: .35; cursor: default; }
.awards-nav:disabled:hover { background: #fff; color: var(--color-navy-800); border-color: var(--color-border); }

.awards-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.awards-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.awards-dots button.is-active { background: var(--color-gold); transform: scale(1.3); }

@media (max-width: 992px) {
    .award-slide { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
    .awards-carousel { padding: 0 2.75rem; }
    .award-slide { flex: 0 0 100%; }
    .awards-nav { width: 36px; height: 36px; }
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 640px;
    margin: 0 auto;
}
.team-card { text-align: center; }
.team-card__photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
    margin-bottom: 1.2rem;
    transition: box-shadow .3s ease;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
@media (hover: hover) {
    .team-card:hover .team-card__photo { box-shadow: var(--shadow-md); }
    .team-card:hover .team-card__photo img { transform: scale(1.05); }
}
.team-card h2, .team-card h3 { font-size: 1.05rem; margin-bottom: .2em; }
.team-card span { color: var(--color-gold-dark); font-weight: 600; font-size: .88rem; }
.team-card .rich-content { color: var(--color-text-muted); font-size: .88rem; margin-top: .8rem; }
.team-grid--wide { max-width: 960px; grid-template-columns: repeat(3, 1fr); }

/* Page /staff : membres groupés par service/bureau (branch), voir
   TeamMember::getAllGroupedByBranch(). Chaque groupe garde le style de
   carte .team-card existant, seul le regroupement + son titre sont nouveaux. */
.staff-branch { margin-bottom: 4rem; }
.staff-branch:last-child { margin-bottom: 0; }
.staff-branch__heading {
    text-align: center;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    color: var(--color-navy-900);
    margin: 0 0 2.2rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid var(--color-border);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.brand-quote {
    background: var(--color-navy-900);
    color: #fff;
    text-align: center;
    padding: 5rem 0;
}
.brand-quote blockquote {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.5;
}
.brand-quote blockquote .accent { color: var(--color-gold); }

.testimonials-section { background-image: var(--pattern-blueprint-navy); background-repeat: repeat; }
.testimonials-section[style*="--testimonials-photo"] {
    /* Photo administrable + voile clair, même technique que .why-us-section
       (le titre de cette section reste en texte sombre). */
    background-image: linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)), var(--testimonials-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Carrousel de témoignages (accueil) — remplace l'ancien empilement vertical
   de .testimonial-card (une carte de 720px centrée par avis, l'une sous
   l'autre : correct avec 1 avis, grossier dès qu'il y en a 4). Défilement PAR
   PAGE (flèches + points, voir main.js) plutôt qu'un simple marquee continu
   comme .partners-marquee : ce contenu doit être lu, pas juste reconnu comme
   un logo au passage. 3 avis visibles en desktop, 2 en tablette, 1 en mobile
   (voir media queries plus bas) — cohérent avec .service-grid/.review-card
   ailleurs sur le site (fond blanc, coins arrondis, ombre légère).
   ========================================================================== */
.testimonials-carousel { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 3.25rem; }
.testimonials-viewport { overflow: hidden; }
.testimonials-track { display: flex; gap: 1.5rem; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
    .testimonials-track { transition: none; }
}

.testimonial-slide {
    position: relative;
    overflow: hidden;
    flex: 0 0 calc((100% - 1.5rem * 2) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.85rem 1.65rem 1.6rem;
    box-shadow: var(--shadow-sm);
}
/* Gros guillemet en filigrane (même esprit "motif discret en fond de carte"
   que les autres effets décoratifs du site) : purement ornemental, jamais lu
   par un lecteur d'écran (aria-hidden), toujours sous le contenu réel (z-index). */
.testimonial-slide__quote-mark {
    position: absolute;
    top: -1.1rem;
    right: .75rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6.5rem;
    line-height: 1;
    color: var(--color-navy-tint);
    z-index: 0;
}
.testimonial-slide__head { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.testimonial-slide__avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
    background: var(--color-navy-tint); color: var(--color-navy-800);
}
.testimonial-slide__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-slide__identity { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.testimonial-slide__author {
    font-family: var(--font-heading); font-weight: 700; color: var(--color-navy-800);
    font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testimonial-slide__stars { color: var(--color-gold); font-size: .85rem; letter-spacing: .1em; }
.testimonial-slide__badge { flex-shrink: 0; }
.testimonial-slide__content {
    position: relative;
    z-index: 1;
    font-style: italic;
    color: var(--color-text);
    font-size: .93rem;
    line-height: 1.55;
    margin: 0 0 .6rem;
    /* Troncature propre au-delà de 5 lignes (repli sur affichage intégral si
       le navigateur ne supporte pas line-clamp, contenu déjà limité en amont
       par $testimonialsLongThreshold côté PHP pour le lien "Lire la suite"). */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonial-slide__more { position: relative; z-index: 1; font-size: .84rem; font-weight: 600; margin-top: auto; align-self: flex-start; }

.testimonials-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy-800);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.testimonials-nav:hover { background: var(--color-gold); color: var(--color-navy-900); border-color: var(--color-gold); }
.testimonials-nav--prev { left: 0; }
.testimonials-nav--next { right: 0; }
.testimonials-nav:disabled { opacity: .35; cursor: default; }
.testimonials-nav:disabled:hover { background: #fff; color: var(--color-navy-800); border-color: var(--color-border); }

.testimonials-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.testimonials-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.testimonials-dots button.is-active { background: var(--color-gold); transform: scale(1.3); }

@media (max-width: 992px) {
    .testimonial-slide { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
    .testimonials-carousel { padding: 0 2.75rem; }
    .testimonial-slide { flex: 0 0 100%; }
    .testimonials-nav { width: 36px; height: 36px; }
}

/* Page /engagement-social : une carte par association, photo + citation de
   remerciement mise en avant comme un témoignage (bordure dorée), même esprit
   visuel que .testimonial-slide mais en carte horizontale (contenu plus long). */
.social-action-grid { display: flex; flex-direction: column; gap: 2rem; max-width: 900px; margin: 0 auto; }
.social-action-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
.social-action-card__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-navy-tint); }
.social-action-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.social-action-card__name { font-size: 1.15rem; margin-bottom: .2em; }
.social-action-card__date { display: block; color: var(--color-text-muted); font-size: .82rem; margin-bottom: .9rem; }
.social-action-card__quote {
    font-style: italic;
    font-size: 1.02rem;
    color: var(--color-text);
    border-left: 3px solid var(--color-gold);
    padding-left: 1.2rem;
}
@media (max-width: 640px) {
    .social-action-card { grid-template-columns: 1fr; text-align: center; }
    .social-action-card__photo { max-width: 180px; margin: 0 auto; }
    .social-action-card__quote { border-left: none; border-top: 3px solid var(--color-gold); padding-left: 0; padding-top: 1rem; text-align: left; }
}

/* Section vedette "Notre Engagement Social" (accueil) : même carte que
   /engagement-social (.social-action-card), juste un agencement compact —
   photo au-dessus du texte plutôt que côte à côte, réutilisant exactement la
   mise en page déjà prévue pour le mobile de la page dédiée (voir media query
   ci-dessus) mais appliquée à toutes les tailles ici, puisque la carte est
   nettement plus étroite dans une grille à 3 colonnes qu'en pleine largeur. */
.social-action-grid--home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: none;
}
.social-action-card--compact { grid-template-columns: 1fr; text-align: center; }
.social-action-card--compact .social-action-card__photo { max-width: 160px; margin: 0 auto; }
.social-action-card--compact .social-action-card__quote {
    border-left: none;
    border-top: 3px solid var(--color-gold);
    padding-left: 0;
    padding-top: 1rem;
    text-align: left;
    font-size: .92rem;
    /* Troncature propre (citation la plus longue actuellement en base : 264
       caractères) plutôt qu'une carte qui s'étire indéfiniment dans une grille
       où toutes les cartes doivent rester alignées. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 992px) {
    .social-action-grid--home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .social-action-grid--home { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Galerie publique + lightbox
   ========================================================================== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.media-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 100%;
    transition: box-shadow .3s ease;
}
.media-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
@media (hover: hover) {
    .media-card:hover { box-shadow: var(--shadow-md); }
    .media-card:hover img { transform: scale(1.05); }
}
.media-card__video-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: rgba(11, 31, 58, .35);
}
.media-card__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .6rem .8rem;
    background: linear-gradient(0deg, rgba(11,31,58,.82), transparent);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    opacity: 0;
    transition: opacity .2s ease;
}
.media-card:hover .media-card__caption { opacity: 1; }

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, .92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox-video-wrap {
    display: none;
    width: min(100%, 960px);
    aspect-ratio: 16 / 9;
}
.lightbox-video-wrap.is-active { display: block; }
.lightbox-video-wrap iframe,
.lightbox-video-wrap video {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    background: #000;
}
.lightbox-video-wrap iframe.is-active,
.lightbox-video-wrap video.is-active { display: block; }
.lightbox-close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ==========================================================================
   Modal "Demander un devis" (header) — champs générés depuis /admin/devis
   ========================================================================== */
.quote-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, .55);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.quote-modal-overlay.is-open { display: flex; }
.quote-modal {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2rem 2rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}
.quote-modal h2 { margin-bottom: .3em; }
.quote-modal__subtitle { color: var(--color-text-muted); font-size: .92rem; margin-bottom: 1.5rem; }
.quote-modal__close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}
.quote-modal__close:hover { background: var(--color-border); }
.quote-modal__field { display: flex; flex-direction: column; gap: .4rem; }
.quote-modal__field-error { color: #b3261e; font-size: .82rem; }
.quote-modal-form .form-actions { margin-top: .5rem; }

/* Effet "brillance" discret sur le bouton CTA du header (ex "Demander un
   devis", transféré à "Souscrire à un programme" depuis le retrait du bouton
   devis — seul CTA restant, il doit rester bien visible) : un dégradé
   lumineux balaie le bouton toutes les 3-4s, puis s'immobilise hors champ
   jusqu'au prochain passage — pas d'animation continue/agressive. */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-20deg);
    animation: btn-shine-sweep 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btn-shine-sweep {
    0%   { left: -60%; }
    18%  { left: 130%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-shine::after { animation: none; display: none; }
}

/* CTA du header ("Souscrire à un programme") : icône masquée, texte seul à
   toutes les largeurs (le bouton "Demander un devis" qui justifiait
   auparavant un repli en pastille icône sous la largeur tablette a été
   retiré — plus assez à l'étroit pour en avoir besoin). */
.btn-program__icon { display: none; flex-shrink: 0; }

/* ==========================================================================
   Popup promotionnel (voir /admin/parametres) — offre mise en avant après un
   court délai (main.js), cohérent avec la charte navy/or : ombre marquée et
   animation d'entrée douces, mais pas de style "pub agressive" (typographie
   soignée, espacement généreux, palette de marque uniquement).
   ========================================================================== */
.promo-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, .55);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.promo-popup-overlay.is-open {
    display: flex;
    animation: promo-popup-fade-in .3s ease;
}
.promo-popup {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 162, 39, .22);
    /* Ombre à deux couches : une portée large et douce (profondeur "premium")
       + une plus resserrée qui détache nettement le popup du fond assombri. */
    box-shadow: 0 24px 60px -12px rgba(11, 31, 58, .45), 0 4px 14px rgba(11, 31, 58, .18);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    animation: promo-popup-scale-in .3s ease;
}
@keyframes promo-popup-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes promo-popup-scale-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .promo-popup-overlay.is-open, .promo-popup { animation: none; }
}
.promo-popup__close {
    position: absolute;
    top: .75rem; right: .75rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: var(--color-navy-800);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    z-index: 2;
    transition: background-color .15s ease;
}
.promo-popup__close:hover { background: #fff; }
/* overflow:hidden : nécessaire pour que le ruban diagonal (débordant
   volontairement du cadre avant rotation) reste coupé net aux coins arrondis
   de l'image plutôt que de déborder du popup. */
.promo-popup__media { position: relative; line-height: 0; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.promo-popup__img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Léger fondu en bas de l'image vers le blanc du corps du popup : adoucit la
   jonction image/texte au lieu d'une coupe nette, sans dépendre du contenu de
   la photo (fonctionne quelle que soit l'image fournie par l'admin). */
.promo-popup__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(0deg, rgba(11, 31, 58, .32), transparent);
    pointer-events: none;
}
/* Ruban doré en coin, en diagonale — plus travaillé qu'un simple badge posé à
   plat : bande pivotée à 45°, débordant volontairement de chaque côté du
   coin (right:-42px + width:170px) pour former un vrai ruban sans bord visible,
   coupé net par overflow:hidden sur .promo-popup__media. */
.promo-popup__badge {
    position: absolute;
    top: 18px;
    right: -42px;
    width: 170px;
    z-index: 1;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: var(--color-navy-900);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    box-shadow: 0 3px 8px rgba(11, 31, 58, .3);
    transform: rotate(45deg);
}
/* Variante sans image (badge affiché en ligne dans le texte) : reste une
   pilule classique, un ruban diagonal n'aurait pas de sens hors d'un cadre. */
.promo-popup__badge--inline {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    width: auto;
    padding: 6px 14px;
    transform: none;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
    box-shadow: none;
}
.promo-popup__badge--inline::before {
    content: '★';
    font-size: .85em;
}
.promo-popup__body { padding: 2rem 1.85rem 2.1rem; }
.promo-popup__title {
    margin: 0 0 .55em;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--color-navy-900);
    letter-spacing: -.01em;
}
.promo-popup__text {
    color: var(--color-text-muted);
    margin: 0 0 1.75rem;
    line-height: 1.6;
    font-size: 1rem;
}
.promo-popup__cta { display: inline-flex; width: 100%; justify-content: center; }
@media (max-width: 480px) {
    .promo-popup { max-width: 100%; border-radius: var(--radius-md); }
    .promo-popup__media { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .promo-popup__img { height: 170px; }
    .promo-popup__title { font-size: 1.35rem; }
    .promo-popup__text { font-size: .94rem; margin-bottom: 1.4rem; }
    .promo-popup__body { padding: 1.5rem 1.25rem 1.75rem; }
    .promo-popup__badge { top: 14px; right: -46px; width: 160px; font-size: .66rem; padding: 5px 0; }
}

/* ==========================================================================
   Generic content pages (service detail, contact, etc.)
   ========================================================================== */
.page-simple { padding: 60px 0 80px; }
.alert { padding: 14px 20px; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: .92rem; }
.alert-success { background: #e7f6ed; color: #1e7a41; }
.alert-error { background: #fdecec; color: #b3261e; }
.alert-error ul { margin: 0; padding-left: 1.2em; }

.contact-form, .service-request-form, .quote-modal-form, .custom-form {
    display: flex; flex-direction: column; gap: 1rem; max-width: 560px;
}
/* Le moteur de formulaires personnalisés (Cité Mendo Zé et au-delà) occupe
   une largeur généreuse sur desktop plutôt que le container étroit standard
   du site : un formulaire long (coordonnées + choix + documents) se lit mal
   compressé sur 560px de large. */
.custom-form-page__container { max-width: 960px; }
.custom-form {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
}
.custom-form__field--full, .custom-form__section-divider, .custom-form > button[type="submit"] {
    grid-column: 1 / -1;
}
.custom-form__section-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    width: 100%;
    margin: .5rem 0 1rem;
}
@media (max-width: 640px) {
    .custom-form { grid-template-columns: 1fr; gap: 1.25rem; }
}
.contact-form label, .service-request-form label, .quote-modal-form label, .custom-form label { font-weight: 600; font-size: .88rem; }
.contact-form input, .contact-form textarea,
.service-request-form input, .service-request-form textarea,
.quote-modal-form input, .quote-modal-form textarea, .quote-modal-form select,
.custom-form input[type="text"], .custom-form input[type="email"], .custom-form input[type="tel"],
.custom-form textarea, .custom-form select {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: .95rem;
    min-height: 44px;
    box-sizing: border-box;
}
.contact-form textarea, .service-request-form textarea, .quote-modal-form textarea, .custom-form textarea { min-height: 120px; }

/* ==========================================================================
   Formulaire dynamique (App\Controllers\CustomFormController) — champs
   supplémentaires que .contact-form/.service-request-form n'avaient pas
   encore besoin de styler : groupe de radios, case à cocher, upload.
   ========================================================================== */
.custom-form__field { display: flex; flex-direction: column; gap: .4rem; }
.custom-form__help { font-size: .8rem; color: var(--color-text-muted); margin: 0; }
.custom-form__field-error { font-size: .82rem; color: #b3261e; margin: 0; }
.custom-form__radio-group { display: flex; flex-direction: column; gap: .6rem; }
.custom-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 400;
    font-size: .92rem;
    cursor: pointer;
}
.custom-form__checkbox input { margin-top: .2rem; flex-shrink: 0; }

/* Cartes de choix pour les champs radio (voir custom-forms/show.php) : le
   radio natif reste dans le DOM (accessible clavier, coché réellement) mais
   visuellement caché — c'est le <label> entier qui devient la carte
   cliquable, avec un état visuel piloté par :has() sur l'input:checked. */
.custom-form__radio-group--cards { gap: .75rem; }
.custom-form__radio-card {
    display: flex;
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.custom-form__radio-card:hover { border-color: var(--color-gold); }
.custom-form__radio-card:has(input:checked) {
    border-color: var(--color-gold);
    border-width: 2px;
    padding: 13px 17px;
    background: color-mix(in srgb, var(--color-gold) 8%, #fff);
    box-shadow: var(--shadow-sm);
}
.custom-form__radio-card:has(input:focus-visible) { outline: 2px solid var(--color-navy-800); outline-offset: 2px; }
/* Radio natif : caché visuellement mais toujours présent/fonctionnel/focusable
   (contrairement à display:none ou visibility:hidden, qui casseraient la
   navigation clavier et la lecture au lecteur d'écran). */
.custom-form__radio-card input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.custom-form__radio-card-body { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.custom-form__radio-card-simple { font-size: .92rem; }
.custom-form__radio-card-title { font-weight: 700; font-family: var(--font-heading); font-size: .98rem; }
.custom-form__radio-card-price { font-weight: 700; color: var(--color-gold); font-size: .92rem; }
.custom-form__radio-card-composition { display: flex; flex-direction: column; gap: .15rem; margin-top: .2rem; }
.custom-form__radio-card-composition-line { font-size: .86rem; color: var(--color-text-muted); }

.custom-form input[type="file"] {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: .88rem;
    background: var(--color-bg-alt);
    box-sizing: border-box;
}

.form-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Badge indicatif téléphonique auto-affiché par main.js quand un champ 'country'
   et un champ tel coexistent dans le même formulaire (voir data-country-field). */
.custom-form__dial-code-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-navy-tint);
    color: var(--color-navy-800);
    font-size: .8rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

/* ==========================================================================
   Page Contact (redesign)
   ========================================================================== */
.contact-main { padding: 56px 0 80px; background: var(--color-bg-alt); }

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
    gap: 2rem;
    align-items: start;
}

/* --- Colonne gauche : coordonnées + carte --- */
.contact-info-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}
.contact-info-card h2 { font-size: 1.2rem; margin-bottom: 1.5rem; }
.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.contact-info-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--color-navy-tint);
    color: var(--color-navy-800);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-info-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: .25em;
}
.contact-info-value { display: block; font-size: .94rem; color: var(--color-text); line-height: 1.5; }
.contact-info-sep { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }

.contact-social-icons { display: flex; gap: .6rem; margin-top: .75rem; }
.contact-social-icons a {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-navy-800);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background-color .15s ease;
}
.contact-social-icons a:hover { background: var(--color-navy-700); }

.contact-map-card {
    margin-top: 1.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    line-height: 0;
}
.contact-map-card iframe { display: block; width: 100%; height: 280px; border: 0; }

/* Plusieurs bureaux : un bloc (libellé + adresse + carte) par bureau. */
.contact-office-block { margin-top: 1.5rem; }
.contact-office-block__label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-navy-800);
    margin: 0 0 .6rem;
}
.contact-info-card--office { padding: 1.5rem; }
.contact-info-card--office .contact-info-row { margin-bottom: 0; }

/* --- Colonne droite : formulaires à onglets --- */
.contact-tabs-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.contact-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}
.contact-tab {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.1rem 1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .88rem;
    color: var(--color-text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}
.contact-tab:hover { color: var(--color-navy-800); }
.contact-tab.is-active { color: var(--color-navy-800); font-weight: 700; border-bottom-color: var(--color-gold); }

.contact-tab-panels { padding: 2rem; }
.contact-tab-panel { display: none; }
.contact-tab-panel.is-active { display: block; }

.contact-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-form-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.contact-form-row label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.contact-form-row input,
.contact-form-row select,
.contact-form-row textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: .95rem;
    min-height: 44px;
    color: var(--color-text);
    background: #fff;
}
.contact-form-row textarea { min-height: 120px; resize: vertical; }
.contact-form-row select { appearance: auto; cursor: pointer; }

.contact-consent-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.5rem;
    font-size: .86rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.contact-consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: .15em;
    accent-color: var(--color-navy-800);
}
.contact-consent-row a { color: var(--color-navy-800); font-weight: 600; }

/* --- Badges de confiance --- */
.contact-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.trust-badge {
    background: var(--color-navy-tint);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
}
.trust-badge svg { color: var(--color-navy-800); margin-bottom: .6rem; }
.trust-badge span {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-navy-800);
}

/* ==========================================================================
   Témoignages (page publique /temoignages + formulaire de dépôt accueil)
   ========================================================================== */
.reviews-summary { text-align: center; margin-bottom: 3rem; }
.reviews-summary__score {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3.4rem;
    color: var(--color-navy-800);
    line-height: 1;
}
.reviews-summary__stars { color: var(--color-gold); font-size: 1.5rem; letter-spacing: .1em; margin: .5rem 0; }
.reviews-summary__count { display: block; color: var(--color-text-muted); font-size: .95rem; }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-bottom: 40px;
}
.review-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.review-card__stars { color: var(--color-gold); font-size: 1.1rem; letter-spacing: .1em; margin-bottom: .75rem; }
.review-card__content { color: var(--color-text); font-style: italic; margin-bottom: 1rem; }
.review-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.review-card__identity { display: flex; align-items: center; gap: .6rem; min-width: 0; }
/* Avatar rond de l'auteur : photo si renseignée (author_photo), sinon repli sur
   une icône générique (même silhouette que .author-bio__avatar sur le blog) —
   jamais de case vide, contrairement à .team-card__photo (carte plus grande,
   le vide y est déjà acceptable visuellement). */
.review-card__avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background: var(--color-navy-tint); color: var(--color-navy-800);
}
.review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card__author { font-family: var(--font-heading); font-weight: 700; color: var(--color-navy-800); font-size: .92rem; }
.review-card__badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .76rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.review-form-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.5rem;
}
.review-form { display: flex; flex-direction: column; gap: 1.25rem; }

.star-rating { display: flex; gap: .25rem; }
.star-rating__star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--color-border);
    padding: .2rem;
    min-width: 44px;
    min-height: 44px;
    transition: color .1s ease;
}
.star-rating__star.is-selected { color: var(--color-gold); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--color-navy-900);
    color: rgba(255, 255, 255, .75);
    padding: 64px 0 0;
    margin-top: 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-col--brand .logo { color: #fff; }
.footer-col--brand p { font-size: .88rem; margin: 1rem 0 1.5rem; color: rgba(255, 255, 255, .6); }
.footer-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 1.1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.footer-links a { text-decoration: none; color: rgba(255, 255, 255, .68); font-size: .9rem; }
.footer-links a:hover { color: #fff; }
.footer-links li { display: flex; align-items: flex-start; gap: .5em; font-size: .9rem; color: rgba(255, 255, 255, .68); }

.social-icons { display: flex; gap: .6rem; }
.social-icons a {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none;
}
.social-icons a:hover { background: var(--color-gold); color: var(--color-navy-900); }

.footer-bottom {
    padding: 1.5rem 0;
    text-align: center;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
}
/* Compteur de visites : discret par design (pas de widget façon "compteur des
   années 2000") — même taille/couleur que le reste du copyright, juste un
   point de séparation, aucune mise en avant visuelle particulière. */
.footer-bottom__visits { opacity: .85; white-space: nowrap; }

/* ==========================================================================
   WhatsApp float
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    /* Vert WhatsApp officiel (#25D366, déjà utilisé par .btn-whatsapp) plutôt
       que le doré de la charte : ce bouton doit être reconnu instantanément
       comme "WhatsApp" par le visiteur, avant même de lire l'icône — la
       cohérence de palette cède le pas à cette convention universelle. */
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); background: #1ebe5b; }
.whatsapp-float svg { width: 30px; height: 30px; color: #fff; }

/* ==========================================================================
   Admin login (kept minimal, on-brand)
   ========================================================================== */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy-900);
    font-family: var(--font-body);
}
.admin-login-box {
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
}
.admin-login-box h1 { font-size: 1.3rem; }
.admin-login-box form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.admin-login-box label { font-weight: 600; font-size: .85rem; }
.admin-login-box input {
    padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: .92rem;
}
.admin-login-box .btn { justify-content: center; margin-top: .5rem; }

/* ==========================================================================
   FAQ (/faq) — accordéon JS pur, voir main.js
   ========================================================================== */
.faq-category-title { margin: 2.5rem 0 1rem; font-size: 1.25rem; }
.faq-category-title:first-child { margin-top: 0; }
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-navy-800);
    cursor: pointer;
    /* Zone tactile confortable sur mobile malgré le padding vertical réduit. */
    min-height: 44px;
}
.faq-item__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-navy-tint);
    color: var(--color-navy-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    transition: transform .2s ease;
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.faq-item.is-open .faq-item__answer { max-height: 1000px; }
.faq-item__answer-inner { padding: 0 0 1.25rem; color: var(--color-text-muted); }

/* Réduit les effets de survol des cartes (services/réalisations, blog, staff,
   galerie) au strict changement d'ombre : le zoom d'image et le léger
   soulèvement de carte sont tous deux des transform, retirés ici — seule
   l'ombre (un changement de peinture, pas de mouvement) est conservée. */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .blog-card,
    .blog-list-card,
    .service-card__media img,
    .blog-card__media img,
    .blog-list-card__media img,
    .team-card__photo,
    .team-card__photo img,
    .media-card,
    .media-card img {
        transition: box-shadow .15s ease;
    }
    .service-card:hover,
    .blog-card:hover,
    .blog-list-card:hover {
        transform: none;
    }
    .service-card:hover .service-card__media img,
    .blog-card:hover .blog-card__media img,
    .blog-list-card:hover .blog-list-card__media img,
    .team-card:hover .team-card__photo img,
    .media-card:hover img {
        transform: none;
    }
}

/* ==========================================================================
   Fade-in au scroll (IntersectionObserver, voir main.js)
   ========================================================================== */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Léger décalage entre les cartes d'une même grille. */
.fade-in-scroll:nth-child(2) { transition-delay: .08s; }
.fade-in-scroll:nth-child(3) { transition-delay: .16s; }
.fade-in-scroll:nth-child(4) { transition-delay: .24s; }
.fade-in-scroll:nth-child(5) { transition-delay: .32s; }
.fade-in-scroll:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
    .fade-in-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Petit trait doré qui se dessine sous chaque titre de section (accueil
   uniquement, voir body.page-home posé par layouts/public.php) au moment où
   il entre dans le viewport — réutilise directement .fade-in-scroll.is-visible
   (déjà posée par le même IntersectionObserver), aucun JS supplémentaire. */
.page-home .fade-in-scroll h2::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    margin-top: .55em;
    background: var(--color-gold);
    border-radius: var(--radius-pill);
    transition: width .7s ease .15s;
}
.page-home .fade-in-scroll.is-visible h2::after { width: 56px; }
/* .cta-band est centré (text-align:center) : le trait doit l'être aussi,
   contrairement aux autres titres (dont .newsletter-content, aligné à
   gauche) qui gardent l'alignement par défaut du bloc ::after. */
.page-home .cta-band h2::after { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
    .page-home .fade-in-scroll h2::after { transition: none; width: 56px; }
}

/* ==========================================================================
   Effets décoratifs de l'accueil — motifs filigrane (voir --pattern-blueprint-*
   dans :root et .stats-band/.why-us-section/.testimonials-section plus haut),
   blobs dorés flous, séparateurs vague/diagonale, photo de fond des bandeaux.
   Purement décoratif (aria-hidden, pointer-events:none) : ne doit jamais gêner
   le contenu ni les clics, ni réduire le contraste du texte par-dessus.
   ========================================================================== */
.decor-host { position: relative; z-index: 0; }
.decor-blob {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
    filter: blur(60px);
    opacity: .12;
    pointer-events: none;
}
.decor-blob--1 { top: -100px; left: 8%; width: 280px; height: 280px; }
.decor-blob--2 { top: -90px; right: 6%; width: 260px; height: 260px; opacity: .1; }
.decor-blob--3 { top: -90px; left: 50%; width: 300px; height: 300px; opacity: .11; transform: translateX(-50%); }
@media (max-width: 767px) {
    /* Le blur() CSS est coûteux à recalculer au scroll sur les mobiles
       d'entrée de gamme : on réduit taille + rayon de flou plutôt que de le
       supprimer entièrement, pour garder un peu de relief sans le coût. */
    .decor-blob { filter: blur(28px); }
    .decor-blob--1, .decor-blob--2, .decor-blob--3 { width: 160px; height: 160px; }
}

.wave-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    display: block;
    pointer-events: none;
}
.wave-divider--top { top: 0; transform: translateY(-99%); }
.wave-divider--bottom { bottom: 0; transform: translateY(99%); }
.wave-divider path { fill: var(--color-navy-900); }
@media (max-width: 767px) {
    .wave-divider { height: 32px; }
}

.diagonal-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    display: block;
    pointer-events: none;
    transform: translateY(-99%);
}
.diagonal-divider path { fill: var(--color-navy-800); }
@media (max-width: 767px) {
    .diagonal-divider { height: 26px; }
}
.sell-banner-section { position: relative; }
.newsletter-wrap { position: relative; }

/* ==========================================================================
   Curseur personnalisé (desktop à pointeur précis uniquement, voir main.js)
   ========================================================================== */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-gold);
    opacity: .65;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease, opacity .2s ease, background-color .2s ease;
    will-change: transform;
}
.custom-cursor.is-active-target {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 2px solid var(--color-gold);
    opacity: 1;
}
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor select,
body.has-custom-cursor textarea,
body.has-custom-cursor label,
body.has-custom-cursor [role="button"] {
    cursor: none;
}
.cursor-ripple {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%) scale(1);
    opacity: .8;
    animation: cursor-ripple-expand .5s ease-out forwards;
}
@keyframes cursor-ripple-expand {
    to { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}

/* ==========================================================================
   Transition de page en fondu (progressive enhancement, voir main.js)
   main est visible (opacity:1) par défaut : c'est le cas SANS JS, qui ne
   doit jamais bloquer sur une page blanche. Seul .js sur <html> (ajouté par
   un script synchrone tout en haut de <head>, voir layouts/public.php)
   active le fondu, piloté ensuite par main.js.
   ========================================================================== */
html.js main {
    opacity: 0;
    transition: opacity .35s ease;
}
html.js main.is-page-visible { opacity: 1; }
html.js main.is-page-leaving { opacity: 0; transition-duration: .2s; }

@media (prefers-reduced-motion: reduce) {
    html.js main { opacity: 1; transition: none; }
    html.js main.is-page-leaving { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .site-header.is-open .main-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        position: absolute;
        top: var(--header-height);
        left: 0; right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background: #fff;
        padding: 1rem 24px 1.5rem;
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
    }
    .site-header.is-open .main-nav a { padding: .8rem 0; width: 100%; border-bottom: none; font-size: .95rem; }

    /* Sous-menus À propos/Services/Actualités en accordéon mobile (tap pour
       dérouler, pas de survol tactile) : même pattern data-attribute + classe
       .is-open que l'accordéon FAQ existant (voir main.js et .faq-item). */
    .nav-dropdown { width: 100%; flex-direction: column; align-items: stretch; }
    .site-header.is-open .main-nav .nav-dropdown__trigger {
        width: 100%;
        justify-content: space-between;
        padding: .8rem 0;
        border-bottom: none;
        font-size: .95rem;
        /* Zone tactile confortable, cohérent avec .faq-item__question. */
        min-height: 44px;
    }
    .nav-dropdown__menu {
        position: static;
        margin-top: 0;
        min-width: 0;
        border: none;
        box-shadow: none;
        padding: 0 0 0 1rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .nav-dropdown.is-open .nav-dropdown__menu { max-height: 260px; }
    .nav-dropdown.is-open .nav-dropdown__arrow { transform: rotate(180deg); }
    .site-header.is-open .main-nav .nav-dropdown__menu a { padding: .6rem .5rem; font-size: .9rem; }

    /* Depuis le retrait du bouton "Demander un devis", .btn-program est
       l'unique CTA du header : il garde son texte complet même sous le
       hamburger (plus besoin du repli en pastille icône qu'imposait la
       cohabitation à 2 boutons). Le gap reste resserré pour laisser sa place
       au texte complet à côté du sélecteur de langue et du hamburger. */
    /* Sans min-width:0, un item flex ne rétrécit jamais sous la largeur
       intrinsèque de son contenu non replié (comportement par défaut de
       flexbox) : le texte complet du bouton poussait toute la chaîne de flex
       items en dépassement horizontal au lieu de passer sur 2 lignes. Les 3
       niveaux emboîtés doivent chacun avoir leur propre min-width:0 — un
       seul niveau corrigé ne suffit pas : .header-actions (flex item de
       .site-header .container), .btn-program (flex item de .header-actions),
       et son <span> de texte (flex item du bouton, lui-même en
       display:inline-flex). */
    .header-actions { gap: .5rem; min-width: 0; flex-shrink: 1; }
    .header-actions .btn-program {
        min-width: 0;
        flex-shrink: 1;
        padding-left: 14px;
        padding-right: 14px;
    }
    .header-actions .btn-program .btn-program__text {
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; }
    .about-media { margin-bottom: 3rem; }
    .service-feature-grid, .service-grid, .blog-grid, .pillars-grid, .media-grid, .team-grid--wide, .about-gallery-grid, .why-us-grid, .awards-grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter-band { grid-template-columns: 1fr; }
    .newsletter-media { min-height: 200px; }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-list { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .contact-layout { grid-template-columns: 1fr; }
    .contact-trust-grid { grid-template-columns: repeat(2, 1fr); }

    .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    section { padding: 56px 0; }
    .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .service-feature-grid, .service-grid, .blog-grid, .pillars-grid, .team-grid, .team-grid--wide, .media-grid, .about-gallery-grid, .why-us-grid, .awards-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero { padding: 80px 0 100px; min-height: auto; }
    .hero__ctas { flex-direction: column; align-items: stretch; }
    .hero__ctas .btn { justify-content: center; }
    .page-header__top { flex-direction: column; }
    .search-box { width: 100%; }

    .newsletter-content { padding: 2rem; }
    .cta-band { padding: 2.5rem 1.5rem; }
    .newsletter-form { flex-direction: column; align-items: stretch; }
    .newsletter-form input[type="email"] { min-width: 0; }
    .newsletter-form button { justify-content: center; }

    .featured-post { min-height: 320px; }
    .featured-post__content { padding: 1.75rem; }
    .featured-post__badge { top: 1rem; left: 1rem; }

    .blog-list-card { flex-direction: column; }
    .blog-list-card__media { flex: none; width: 100%; aspect-ratio: 16 / 10; }
    .blog-list-cta { flex-direction: column; text-align: center; padding: 1.5rem; }

    .about-badge { left: .75rem; bottom: -1rem; max-width: calc(100% - 1.5rem); }

    .whatsapp-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
    .whatsapp-float svg { width: 26px; height: 26px; }

    /* Emplacement publicitaire sticky : uniquement visible ≤640px, jamais sur
       desktop. Le bouton WhatsApp est remonté tant que la barre est affichée
       (classe posée sur <body> par main.js) pour ne jamais se superposer à
       elle — retiré automatiquement dès que la barre est fermée ou absente. */
    .ad-slot-sticky { display: block; }
    body.has-sticky-ad .whatsapp-float { bottom: 74px; }

    .page-banner { padding: 48px 0; }
    .contact-field-grid-2 { grid-template-columns: 1fr; }
    .contact-tab { font-size: .78rem; padding: .9rem .5rem; }
    .contact-tab-panels { padding: 1.5rem; }
    .contact-info-card, .contact-map-card { border-radius: var(--radius-md); }
    .contact-info-card { padding: 1.5rem; }
    .review-form-card { padding: 1.5rem; border-radius: var(--radius-md); }
    .reviews-summary__score { font-size: 2.6rem; }
    .contact-trust-grid { grid-template-columns: 1fr; }
}