/*
 * assets/css/responsive.css — Media queries Mobile First pour NVI Facility
 *
 * Breakpoints :
 *   ≤ 480px  → Mobile S/M (smartphones)
 *   ≤ 768px  → Tablette portrait (sans header-top)
 *   ≤ 1024px → Tablette paysage : layout contenu
 *   ≤ 1200px → Desktop étroit : hamburger activé, nav desktop masquée
 *   ≤ 1280px → Desktop intermédiaire : compression header + footer 2 cols
 *   ≥ 1440px → Grand desktop
 *
 * Approche : max-width pour réduire, min-width pour élargir.
 * Les styles desktop "par défaut" sont dans main.css.
 */

/* ==========================================================================
   ≤ 1280px — Desktop intermédiaire : compression nav (visible entre 1200-1280px)
   ========================================================================== */

@media (max-width: 1280px) {

    /* Réduit le gap grid entre logo / nav / actions */
    .header-main__inner {
        gap: 16px;
    }

    /* Liens nav plus compacts */
    .nvif-nav__link {
        padding: 8px 8px;
        font-size: 0.88rem;
        letter-spacing: 0;
    }

    /* Bouton CTA header plus compact */
    .header-cta {
        padding: 10px 18px;
        font-size: 0.82rem;
        letter-spacing: 0;
    }

    /* Dark toggle pill plus compact */
    .nvif-dark-toggle {
        padding: 6px 10px 6px 9px;
        font-size: 0.7rem;
        gap: 5px;
    }

    .dark-toggle__label {
        display: none;   /* Icône seule entre 1200–1280px */
    }

    /* Footer : passage de 4 à 2+2 colonnes dès 1280px */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Mega-menu : largeur réduite sur desktop étroit (1200-1280px) */
    .nvif-nav__item--mega > .nvif-dropdown {
        min-width: 580px;
    }
}

/* ==========================================================================
   ≤ 1200px — Hamburger activé, nav desktop masquée
   Protège contre l'overflow au zoom (110–125% sur écrans 1366–1440px)
   ========================================================================== */

@media (max-width: 1200px) {

    /* Affiche le hamburger */
    .nvif-hamburger {
        display: flex;
    }

    /* Cache nav desktop et CTA header
       !important requis : .header-main__inner .header-nav { display:flex } en main.css
       a une spécificité (0,2,0) qui l'emporte sur .header-nav (0,1,0) sans !important */
    .header-nav,
    .header-cta,
    .nvif-dark-toggle {
        display: none !important;
    }

    /* Hamburger à gauche, logo à droite */
    .header-main__inner {
        justify-content: space-between;
    }

    /* Hamburger au bord gauche — order:-1 le place avant le logo dans le flux flex */
    .header-main__inner .header-actions {
        margin-left: 0 !important;
        order: -1;
    }

    /* Affiche le FAB dark mode sur mobile (toggle header masqué) */
    .nvif-fab--dark {
        display: flex;
    }

    /* Body : header-top(38px) + header-main(80px) = 118px */
    body {
        padding-top: 118px;
    }

    /* Homepage : pas de padding-top (hero plein écran) */
    body.home {
        padding-top: 0;
    }

    /* Cache la localisation dans le bandeau supérieur */
    .header-top__location {
        display: none;
    }

    /* ── Logo : empêche le débordement sur les écrans étroits
       width: auto + max-height permet de conserver les proportions
       sans que le logo pousse le hamburger hors du header. */
    .header-logo img,
    .header-logo .nvif-logo-img,
    .header-logo .custom-logo {
        max-width: 160px;
        height: auto;
        max-height: 48px;
    }

    /* Footer : 2 colonnes */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

/* ==========================================================================
   ≤ 1024px — Tablette paysage : layout du contenu (grilles, cartes, hero)
   ========================================================================== */

@media (max-width: 1024px) {

    /* Hero — désactiver parallax CSS sur tablette */
    .nvif-hero {
        background-attachment: scroll;
    }

    /* ---- P04 sections ---- */

    /* Services : 3 colonnes → 2 colonnes */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pourquoi NVI : 3 col → 2 col, 7e item recentré auto */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-item:last-child {
        grid-column: auto;
    }

    /* Process : 6 col → 3 col (2 lignes) */
    .process-timeline {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Chiffres : 4 col → 2 col */
    .chiffres-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Témoignages : 3 cartes visibles → 2 */
    .temoignage-card {
        min-width: calc(50% - 12px);
    }
}

/* ==========================================================================
   ≤ 768px — Tablette portrait : plus de bandeau supérieur
   ========================================================================== */

@media (max-width: 768px) {

    /* Cache tout le bandeau supérieur */
    .header-top {
        display: none;
    }

    /* Ajuster le padding-top : header-main uniquement (80px) */
    body {
        padding-top: 80px;
    }

    /* Homepage : pas de padding-top (hero plein écran) */
    body.home {
        padding-top: 0;
    }

    /* Header main moins haut */
    .header-main {
        height: 68px;
    }

    /* Sticky moins haut aussi */
    .nvif-header.is-sticky .header-main {
        height: 60px;
    }

    /* Menu mobile padding-top aligné */
    .header-mobile-menu {
        padding-top: 68px;
    }

    /* Footer : 1 colonne */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-bottom__links {
        justify-content: center;
    }

    /* Sections */
    .section {
        padding: 56px 0;
    }

    /* Hero mobile */
    .nvif-hero {
        height: auto;
        min-height: 100svh;
        max-height: none;
        padding: 90px 0 56px;
        background-attachment: scroll;
    }

    .hero-content {
        padding-top: 0; /* La section .nvif-hero gère le padding-top sur mobile */
    }

    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 32px;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 40px;
    }

    .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .hero-wave svg {
        height: 40px;
    }

    /* ---- P04 sections ---- */

    /* Padding de section réduit sur mobile */
    .nvif-section {
        padding: 56px 0;
    }

    /* En-tête de section moins espacé */
    .section-header {
        margin-bottom: 32px;
    }

    /* Services : 2 col → 1 col */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Pourquoi NVI : 1 col, 7e item normal */
    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-item:last-child {
        grid-column: auto;
    }

    /* Process : 3 col → 2 col + masque ligne horizontale */
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .process-timeline::before {
        display: none;
    }

    /* Chiffres : reste 2 col */
    .chiffres-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Témoignages : carrousel mobile optimisé
       - gap réduit à 12px (était 24px)
       - carte = viewport - 2×padding container (24px) - hint suivante (20px)
       - max-width bloque les débordements de contenu
       - overflow: hidden + overflow-wrap empêchent tout texte qui dépasse */
    .temoignages-carousel {
        gap: 12px;
    }

    .temoignage-card {
        min-width: calc(100vw - 68px); /* 100vw - 48px (container) - 20px (peek) */
        max-width: calc(100vw - 68px);
        padding: 20px;
        overflow: hidden;
    }

    .temoignage-texte {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* ── Sécurité globale : empêche tout débordement horizontal parasite ──
       Force tous les éléments directs du body à ne pas dépasser le viewport.
       Utile pour les images sans width explicite ou les éléments positionnés. */
    main > *,
    .nvif-section > .container > * {
        max-width: 100%;
    }

    /* Mobile menu : empêche le débordement des items longs (e-mail, URL) */
    .mobile-menu__contacts a {
        word-break: break-all;
    }

    /* CTA devis : boutons empilés */
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-lg {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   ≤ 480px — Smartphones
   ========================================================================== */

@media (max-width: 480px) {

    .container {
        padding: 0 16px;
    }

    /* Logo texte plus petit */
    .logo-text {
        font-size: 1.25rem;
    }

    /* Menu mobile inner spacing */
    .mobile-menu__inner {
        padding: 24px 16px 40px;
    }

    /* Boutons plein largeur sur mobile */
    .nvif-btn {
        width: 100%;
        justify-content: center;
    }

    /* Sections encore moins de padding */
    .section {
        padding: 40px 0;
    }

    /* Logo encore plus compact sur très petits écrans */
    .header-logo img,
    .header-logo .nvif-logo-img,
    .header-logo .custom-logo {
        max-width: 120px;
        max-height: 40px;
    }

    /* Masque contacts header-top si visible */
    .header-top__contacts {
        gap: 12px;
    }

    .header-top__link {
        font-size: 0.72rem;
    }

    /* Hero badge plus compact */
    .hero-badge {
        font-size: 0.68rem;
        padding: 5px 12px;
        letter-spacing: 0.05em;
    }

    /* ---- P04 sections ---- */

    /* Padding minimal */
    .nvif-section {
        padding: 40px 0;
    }

    /* Grilles services et why : gap réduit */
    .services-grid,
    .why-grid {
        gap: 12px;
    }

    /* Process : 2 col → 1 col sur très petits écrans */
    .process-timeline {
        grid-template-columns: 1fr;
    }

    /* Chiffres : 2 col compact */
    .chiffres-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Témoignages : smartphones — container padding passe à 16px
       viewport - 2×16px (container) - 16px (peek) = 100vw - 48px */
    .temoignage-card {
        min-width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        padding: 16px;
    }

    /* Titre de section réduit */
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

/* ==========================================================================
   ≥ 1440px — Grand desktop
   ========================================================================== */

@media (min-width: 1440px) {
    .container {
        padding: 0 40px;
    }
}

/* ==========================================================================
   PAGE À PROPOS — RESPONSIVE (P06)
   ========================================================================== */

@media (max-width: 1024px) {
    .about-intro-grid {
        gap: 40px;
    }

    .mv-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Séparateur horizontal sur tablette */
    .mv-separator {
        flex-direction: row;
        justify-content: center;
    }

    .mv-sep-line {
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    }

    .mv-card { padding: 32px 28px; }
}

@media (max-width: 768px) {
    /* Hero interne */
    .nvif-hero-interne {
        padding: calc(var(--nvif-header-h, 119px) + 40px) 0 70px;
        min-height: 260px;
    }

    .hero-interne-titre {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .hero-interne-sous-titre {
        font-size: 0.95rem;
    }

    /* Intro 1 colonne, visuel en premier */
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-intro-visual {
        order: -1; /* Image d'abord sur mobile */
    }

    .about-visual-card img,
    .about-visual-placeholder {
        height: 280px;
    }

    .about-h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    /* Valeurs : 2 colonnes sur tablette mobile */
    .valeurs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .valeur-card {
        padding: 28px 16px;
    }
}

@media (max-width: 480px) {
    /* Hero interne */
    .hero-breadcrumb {
        font-size: 0.75rem;
    }

    /* Intro */
    .about-cta-wrap .nvif-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Valeurs : 1 colonne sur très petit */
    .valeurs-grid {
        grid-template-columns: 1fr;
    }

    /* Mission/Vision */
    .mv-card {
        padding: 24px 18px;
    }

    .mv-titre {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   HUBS FM & RH — RESPONSIVE (P07)
   ========================================================================== */

@media (max-width: 1280px) {

    /* FM : 4 col → 3 col à partir de 1280px */
    .hub-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {

    /* FM services : 3 col → 2 col */
    .hub-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Orbit : masqué sur tablette (items absolus calibrés pour 380px desktop) */
    .hub-orbit-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hub-orbit-visual {
        display: none;
    }

    /* Why FM : 4 col → 2 col */
    .hub-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    /* FM services : 2 col → 1 col */
    .hub-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Orbit : masqué sur mobile, section orbit → simple texte */
    .hub-orbit-visual {
        display: none;
    }

    /* Orbit layout : full width texte seul */
    .hub-orbit-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Why FM : 1 col */
    .hub-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* RH services : 1 col */
    .rh-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .rh-service-card {
        padding: 32px 24px;
    }

    /* Synergie card : 1 col */
    .synergie-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 28px;
    }

    .synergie-plus {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    /* Hub service card : padding réduit */
    .hub-service-card {
        padding: 22px 16px;
    }

    /* Synergie card : padding minimal */
    .synergie-card {
        padding: 28px 20px;
    }

    .synergie-result {
        padding: 22px 20px;
    }
}

/* ==========================================================================
   SERVICE TEMPLATE — Responsive (P08)
   ========================================================================== */

/* ---- ≤ 1024px : grille 2-col présentation passe en 1 col ---- */
@media (max-width: 1024px) {

    .service-pres-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-img-main,
    .service-img-placeholder {
        height: 300px;
    }

    /* Prestations : 2 colonnes */
    .prestations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Connexes : 2 colonnes */
    .connexes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- ≤ 768px ---- */
@media (max-width: 768px) {

    .nvif-service-pres,
    .nvif-service-prestations,
    .nvif-service-cible,
    .nvif-connexes {
        padding: 56px 0;
    }

    .service-pres-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-pres-cta .nvif-btn {
        width: 100%;
        justify-content: center;
    }

    /* Cible inner : passe en colonne */
    .cible-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px 24px;
        gap: 24px;
    }

    /* Prestations : 1 colonne */
    .prestations-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Badge image : repositionné */
    .service-img-badge {
        bottom: -12px;
        right: -8px;
        width: 48px;
        height: 48px;
    }

    /* Connexes : 1 colonne */
    .connexes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .connexe-card-img {
        height: 180px;
    }

    .connexe-card-img img {
        height: 180px;
    }
}

/* ---- ≤ 480px ---- */
@media (max-width: 480px) {

    .service-pres-title {
        font-size: 1.5rem;
    }

    .cible-inner {
        padding: 28px 20px;
    }

    .prestation-item {
        padding: 14px 16px;
    }
}

/* ==========================================================================
   NOS SERVICES — Responsive (P08B)
   ========================================================================== */

/* ---- ≤ 1024px : 2-col → 1-col ---- */
@media (max-width: 1024px) {

    .nos-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .nos-card-image {
        height: 200px;
    }

    .pourquoi-ext-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* ---- ≤ 768px ---- */
@media (max-width: 768px) {

    .nos-card-body {
        padding: 22px 20px 20px;
    }

    .nos-card-image {
        height: 180px;
    }

    .nos-card-title {
        font-size: 1.15rem;
    }

    .pourquoi-ext-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pourquoi-ext-item {
        padding: 28px 20px;
    }
}

/* ---- ≤ 480px ---- */
@media (max-width: 480px) {

    .nos-card-image {
        height: 160px;
    }

    .nos-card-body {
        padding: 18px 16px 16px;
        gap: 10px;
    }

    .pourquoi-ext-icon {
        width: 56px;
        height: 56px;
    }
}

/* ==========================================================================
   PAGE À PROPOS — Responsive (P09)
   ========================================================================== */

/* ---- ≤ 1024px : passage en 1 colonne + encart NVI empilé ---- */
@media (max-width: 1024px) {

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-title-left {
        text-align: center;
    }

    .about-mission-text {
        text-align: center;
    }

    .about-intro-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nvi-encart-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px;
    }

    .nvi-encart-content {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-left: 0;
        padding-top: 28px;
    }

    [data-theme="dark"] .nvi-encart-content {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .nvi-encart-logo {
        flex-direction: row;
        min-width: unset;
        justify-content: flex-start;
    }

    .nvi-identity {
        text-align: left;
    }

    .nvi-encart-cta {
        display: flex;
        justify-content: flex-start;
    }
}

/* ---- ≤ 768px : valeurs 1 col, liste NVI 1 col, badge repositionné ---- */
@media (max-width: 768px) {

    .about-visual-image img {
        height: 300px;
    }

    .about-badge-float {
        left: 12px;
        bottom: 16px;
    }

    .about-visual-strip {
        display: none;
    }

    .about-valeurs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nvi-services-list {
        grid-template-columns: 1fr;
    }

    .nvif-about-vision {
        padding: 60px 20px;
    }

    .vision-quote p {
        font-size: 1.15rem;
    }
}

/* ---- ≤ 480px : ajustements finaux ---- */
@media (max-width: 480px) {

    .about-visual-image img {
        height: 240px;
    }

    .nvi-encart-inner {
        padding: 24px 20px;
    }

    .nvi-logo-placeholder {
        width: 60px;
        height: 60px;
    }

    .nvi-logo-letters {
        font-size: 1.4rem;
    }

    .btn-outline-navy {
        width: 100%;
        justify-content: center;
    }

    .badge-number {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   PAGE POURQUOI NVI FACILITY — P10
   Stats · Arguments · Comparatif · FAQ
   ========================================================================== */

/* ---- ≤ 1024px : passage tablette ---- */
@media (max-width: 1024px) {

    .pourquoi-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pourquoi-visuel-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pourquoi-visuel-img img {
        height: 360px;
    }

    .pourquoi-visuel-content .section-title {
        font-size: 1.75rem;
    }

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

/* ---- ≤ 768px : tablette portrait / grand mobile ---- */
@media (max-width: 768px) {

    .pourquoi-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .comparatif-table {
        font-size: 0.85rem;
    }

    .comp-critere,
    .comp-nvif,
    .comp-other {
        padding: 14px 14px;
    }

    .faq-question {
        padding: 18px 20px;
    }

    .faq-answer-inner {
        padding: 0 20px 20px;
    }
}

/* ---- ≤ 480px : mobile S/M ---- */
@media (max-width: 480px) {

    .pourquoi-stats-grid {
        grid-template-columns: 1fr;
    }

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

    .pourquoi-visuel-img img {
        height: 280px;
    }

    .pourquoi-visuel-badge {
        bottom: 16px;
        left: 16px;
        padding: 12px 16px;
    }

    .pvb-number {
        font-size: 1.5rem;
    }

    .faq-q-text {
        font-size: 0.92rem;
    }

    .faq-question {
        padding: 16px 18px;
        gap: 12px;
    }
}

/* ==========================================================================
   PAGE RÉFÉRENCES & SECTEURS — P10B
   Intro · Logos · Secteurs · Témoignages masonry
   ========================================================================== */

/* ---- ≤ 1280px : réduction logos 5→4 col ---- */
@media (max-width: 1280px) {

    .logos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- ≤ 1024px : passage tablette ---- */
@media (max-width: 1024px) {

    .refs-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .refs-intro-photo {
        min-height: 320px;
    }

    .refs-intro-photo img {
        min-height: 320px;
    }

    .logos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .temoignages-masonry {
        columns: 2;
    }

    .refs-band-quote {
        font-size: 1.2rem;
    }
}

/* ---- ≤ 768px : tablette portrait / grand mobile ---- */
@media (max-width: 768px) {

    .refs-intro-grid {
        gap: 28px;
    }

    .refs-intro-photo {
        min-height: 260px;
    }

    .refs-intro-photo img {
        min-height: 260px;
        height: 260px;
    }

    .refs-intro-right {
        gap: 28px;
    }

    .refs-chiffres {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .rci-nombre {
        font-size: 1.75rem;
    }

    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .logos-placeholder-msg {
        padding: 32px 24px;
    }

    .temoignages-masonry {
        columns: 1;
    }

    .refs-band-content {
        padding: 52px 0;
    }

    .refs-band-quote {
        font-size: 1.0625rem;
    }
}

/* ---- ≤ 480px : mobile S/M ---- */
@media (max-width: 480px) {

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

    .secteur-card {
        padding: 24px 20px;
    }

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

    .ref-chiffre-item {
        padding: 20px 16px;
    }

    .refs-band-content {
        padding: 40px 0;
    }

    .refs-band-quote {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .nvif-refs-photo-band::before {
        background-attachment: scroll; /* désactiver parallax sur mobile */
    }

    .rci-nombre {
        font-size: 1.5rem;
    }

    .temoignage-masonry-card {
        padding: 22px 18px;
    }
}

/* ==========================================================================
   P11 — PAGE CARRIÈRES — Responsive
   ========================================================================== */

/* ---------- ≤ 1024px : tablette paysage ---------- */
@media (max-width: 1024px) {

    /* Avantages : 2 colonnes */
    .carrieres-avantages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* Culture : empilé */
    .culture-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .culture-img-wrap img {
        height: 380px;
    }

    /* Candidature : empilé */
    .candidature-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ---------- ≤ 768px : tablette portrait ---------- */
@media (max-width: 768px) {

    /* Avantages : 1 colonne */
    .carrieres-avantages-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }

    .carrieres-avantage-card {
        min-height: 320px;
    }

    /* Culture photo */
    .culture-img-wrap img {
        height: 280px;
    }

    /* Offres : tags wrappent proprement */
    .offre-header {
        padding: 16px 18px;
    }

    .offre-titre {
        font-size: 1rem;
    }

    .offre-meta {
        gap: 6px;
    }

    /* Formulaire : double row → 1 col */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .candidature-form-wrap {
        padding: 28px 20px;
    }

    /* Filtres offres */
    .offres-filtres {
        gap: 8px;
    }

    .filtre-btn {
        padding: 7px 16px;
        font-size: .8125rem;
    }
}

/* ---------- ≤ 480px : mobile S/M ---------- */
@media (max-width: 480px) {

    .carrieres-pourquoi {
        padding-bottom: 60px;
    }

    .carrieres-avantage-card {
        min-height: 280px;
        border-radius: 16px;
    }

    .av-content {
        padding: 24px 20px 20px;
    }

    .av-titre {
        font-size: 1.125rem;
    }

    .culture-img-wrap img {
        height: 220px;
    }

    .culture-badge {
        bottom: 16px;
        left: 16px;
        padding: 10px 14px;
    }

    .offre-header {
        padding: 14px 16px;
    }

    .offre-tag {
        font-size: .75rem;
        padding: 2px 8px;
    }

    .offre-details-inner {
        padding: 16px 16px 24px;
    }

    .offres-vides-inner {
        padding: 36px 24px;
    }

    .candidature-form-wrap {
        padding: 24px 16px;
    }
}


/* ==========================================================================
   P12 — BLOG / ACTUALITÉS — Responsive
   ========================================================================== */

/* ---------- ≤ 1024px : tablette paysage ---------- */
@media (max-width: 1024px) {

    /* Grille → 2 colonnes */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-card--featured {
        grid-column: span 2;
    }

    /* Single : empilé */
    .single-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .single-sidebar {
        position: static;
    }

    /* Articles similaires */
    .blog-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- ≤ 768px : tablette portrait ---------- */
@media (max-width: 768px) {

    /* Grille → 1 colonne */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card--featured {
        grid-column: span 1;
    }

    .blog-card--featured .blog-card-img-wrap {
        height: 240px;
    }

    /* Filtres */
    .blog-filtres {
        gap: 8px;
    }

    /* Navigation prev/next → 1 colonne */
    .single-nav {
        grid-template-columns: 1fr;
    }

    .single-nav-link.next {
        text-align: left;
    }

    /* Partage */
    .single-partage {
        gap: 8px;
    }

    /* Articles similaires */
    .blog-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ---------- ≤ 480px : mobile S/M ---------- */
@media (max-width: 480px) {

    .blog-filtre-btn {
        padding: 6px 14px;
        font-size: .8125rem;
    }

    .blog-card-content {
        padding: 16px;
    }

    .single-meta {
        gap: 8px;
    }

    .single-body h2 {
        font-size: 1.35rem;
    }

    .single-body h3 {
        font-size: 1.1rem;
    }

    .blog-vide {
        padding: 48px 24px;
    }

    .sw-cta-inner {
        padding: 20px 16px;
    }

    .partage-btn {
        padding: 6px 12px;
        font-size: .75rem;
    }
}


/* ==========================================================================
   P13-v2 — CONFIGURATEUR DE BESOINS 6 ÉTAPES — Responsive
   ========================================================================== */

/* ---------- ≤ 1200px : grands tablettes / petits laptops ---------- */
@media (max-width: 1200px) {

    .config-services-grid       { grid-template-columns: repeat(4, 1fr); }
    .config-structure-grid--8   { grid-template-columns: repeat(4, 1fr); }
    .config-horaire-grid        { grid-template-columns: repeat(5, 1fr); }
    .config-budget-grid         { grid-template-columns: repeat(3, 1fr); }
    .config-priorite-grid       { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≤ 1024px : tablette paysage ---------- */
@media (max-width: 1024px) {

    .configurateur-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .configurateur-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .config-aside-benefices { grid-column: span 2; }

    .config-services-grid       { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .config-structure-grid--8   { grid-template-columns: repeat(4, 1fr); }
    .config-frequence-grid      { grid-template-columns: repeat(4, 1fr); }
    .config-zone-grid           { grid-template-columns: repeat(3, 1fr); }
    .config-horaire-grid        { grid-template-columns: repeat(5, 1fr); }
    .config-budget-grid         { grid-template-columns: repeat(3, 1fr); }
    .config-situation-grid      { grid-template-columns: repeat(2, 1fr); }
    .config-priorite-grid       { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≤ 768px : tablette portrait ---------- */
@media (max-width: 768px) {

    .config-services-grid       { grid-template-columns: repeat(2, 1fr); }
    .config-structure-grid      { grid-template-columns: repeat(2, 1fr); }
    .config-structure-grid--8   { grid-template-columns: repeat(2, 1fr); }
    .config-frequence-grid      { grid-template-columns: repeat(2, 1fr); }
    .config-zone-grid           { grid-template-columns: 1fr; }
    .config-horaire-grid        { grid-template-columns: repeat(3, 1fr); }
    .config-budget-grid         { grid-template-columns: repeat(2, 1fr); }
    .config-situation-grid      { grid-template-columns: 1fr; }
    .config-priorite-grid       { grid-template-columns: repeat(2, 1fr); }
    .config-details-grid        { grid-template-columns: 1fr; }
    .config-contact-grid        { grid-template-columns: 1fr; }
    .config-field--full         { grid-column: span 1; }
    .configurateur-aside        { grid-template-columns: 1fr; }
    .config-aside-benefices     { grid-column: span 1; }

    .config-step        { padding: 24px 20px; }
    .config-progress    { padding: 18px 20px 14px; }

    .recap-kv           { flex-direction: column; gap: 2px; }
    .recap-kv .recap-value { text-align: left; }

    .config-success-actions { flex-direction: column; align-items: center; }
}

/* ---------- ≤ 480px : mobile ---------- */
@media (max-width: 480px) {

    .config-services-grid       { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .config-structure-grid      { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .config-structure-grid--8   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .config-frequence-grid      { grid-template-columns: 1fr 1fr; gap: 8px; }
    .config-zone-grid           { grid-template-columns: 1fr; gap: 10px; }
    .config-horaire-grid        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .config-budget-grid         { grid-template-columns: 1fr; gap: 8px; }
    .config-situation-grid      { grid-template-columns: 1fr; gap: 8px; }
    .config-priorite-grid       { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    .config-step-titre          { font-size: 1.25rem; }

    /* Barre de progression 6 étapes mobile : labels masqués */
    .step-dot-label             { display: none; }
    .config-steps-nav--6 .config-step-dot { flex: none; width: 32px; }

    .config-actions             { flex-direction: column-reverse; gap: 10px; }
    .config-actions .nvif-btn   { width: 100%; justify-content: center; }
    #config-submit              { min-width: unset; width: 100%; }

    .config-steps-nav           { justify-content: center; gap: 4px; }
    .config-step-dot            { flex: none; }
}


/* ==========================================================================
   P14 — PAGE CONTACT — Responsive
   ========================================================================== */

/* ---------- ≤ 1024px : tablette ---------- */
@media (max-width: 1024px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-aside {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

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

/* ---------- ≤ 768px : tablette portrait ---------- */
@media (max-width: 768px) {

    .contact-fields-grid {
        grid-template-columns: 1fr;
    }

    .contact-field--full {
        grid-column: span 1;
    }

    .contact-aside {
        grid-template-columns: 1fr;
    }

    .contact-form-header,
    .contact-form {
        padding: 20px;
    }

    .contact-map-container {
        height: 220px;
    }

    .contact-submit-btn {
        width: 100%;
    }
}

/* ---------- ≤ 480px : mobile ---------- */
@media (max-width: 480px) {

    .contact-rapide-grid {
        grid-template-columns: 1fr;
    }

    .contact-rapide-item {
        padding: 24px 16px;
    }

    .contact-info-card {
        padding: 18px;
    }
}


/* ==========================================================================
   P15 — ZONES D'INTERVENTION — Responsive
   ========================================================================== */

@media (max-width: 1280px) {

    /* Périmètres 5 col → 3 col sur tablettes larges */
    .perimetres-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {

    .zones-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .zones-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
    .zones-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
    .zones-stat:nth-last-child(-n+2) { border-bottom: none; }

    .zones-liste-grid { grid-template-columns: repeat(2, 1fr); }

    .zones-cta-inner { flex-direction: column; text-align: center; }
    .zones-cta-content { text-align: center; }
    .zones-cta-actions { justify-content: center; }

    /* Périmètres : 3 col → 2 col sur tablette
       max-width/margin reset : overrides la règle 1fr+520px de main.css */
    .perimetres-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {

    .zones-map-container { height: 420px; }

    .zones-legende {
        position: static;
        max-width: 100%;
        margin-top: 12px;
        border-radius: 12px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .zl-titre { grid-column: span 2; }

    .zones-carte-counter { font-size: 0.72rem; }

    .zones-filtres { gap: 6px; }
    .zones-filtre-btn { font-size: 0.74rem; padding: 6px 12px; }

    .zones-liste-grid { grid-template-columns: 1fr; }

    .zones-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Périmètres : 2 col → 1 col sur mobile */
    .perimetres-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .perimetre-card { padding: 20px 16px; }
    .perimetre-badge { font-size: 0.65rem; padding: 3px 10px; }
    .perimetre-titre { font-size: 1rem; }
}

/* ==========================================================================
   NVI — Nouvelle Vision Intérim (page RH & Intérim) — Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .nvi-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nvi-brand-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .nvi-brand-visual {
        order: -1;
    }
    .nvi-brand-badge {
        max-width: 240px;
    }
    .nvi-brand-badge__sigle {
        font-size: 3.5rem;
    }
    .nvi-why-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nvi-brand-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .zones-map-container { height: 320px; }
    .zs-number { font-size: 2rem; }
    .zs-label {
        font-size: 0.72rem;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .zones-cta-inner { padding: 24px 20px; }
    .zones-cta-actions { flex-direction: column; width: 100%; }
    .zones-cta-actions .nvif-btn { justify-content: center; }

    /* Périmètres : 1 col sur très petits écrans */
    .perimetres-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .perimetre-quartiers { gap: 4px; }
    .perimetre-quartier { font-size: 0.72rem; }
}


/* ==========================================================================
   P16 — PAGE 404 RESPONSIVE
   ========================================================================== */

/* Tablette (≤ 1024px) */
@media (max-width: 1024px) {
    .error404-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .error404-contact-inner {
        padding: 32px;
    }
}

/* Mobile large (≤ 768px) */
@media (max-width: 768px) {
    .error404-hero {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .error404-links-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .e4-link-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .e4-link-icon {
        font-size: 1.6rem;
        flex-shrink: 0;
    }

    .e4-link-arrow {
        margin-left: auto;
    }

    .error404-contact-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 20px;
    }

    .error404-contact-actions {
        width: 100%;
    }

    .error404-contact-actions .nvif-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
    .error404-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .error404-actions .nvif-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   P18 — PAGES LÉGALES
   ========================================================================== */

/* Tablette paysage : TOC plus étroite */
@media (max-width: 1100px) {
    .legal-layout {
        grid-template-columns: 200px 1fr;
        gap: 32px;
    }
}

/* Tablette portrait : TOC cachée (nav interne masquée) */
@media (max-width: 1024px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc {
        display: none;
    }

    .legal-content {
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .legal-body h2 {
        font-size: 1.25rem;
        padding-bottom: 10px;
        margin-top: 32px;
    }

    .legal-body h3 {
        font-size: 1.05rem;
    }

    .legal-body table {
        font-size: 0.8rem;
    }

    .legal-cta-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .legal-cta-text {
        font-size: 1rem;
    }

    .legal-back-top {
        text-align: center;
    }
}

/* ==========================================================================
   P19 — HOMEPAGE UPGRADE (services photo, flip cards, split, secteurs)
   ========================================================================== */

/* ── ≤ 1280px : grilles 3→2 cols ── */
@media (max-width: 1280px) {
    .why-grid--flip {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Repositionner la 2e rangée flip (4e & 5e item) */
    .why-grid--flip .why-flip-wrap:nth-child(4) { grid-column: auto; }
    .why-grid--flip .why-flip-wrap:nth-child(5) { grid-column: 1; }
    .why-grid--flip .why-flip-wrap:nth-child(6) { grid-column: 2; }
    .why-grid--flip .why-flip-wrap:nth-child(7) { grid-column: 3; }
}

/* ── ≤ 1100px : split en colonne ── */
@media (max-width: 1100px) {
    .approche-split-inner {
        grid-template-columns: 1fr;
    }

    .approche-photo-col {
        min-height: 380px;
    }

    .approche-photo {
        object-position: center center;
    }

    .approche-badge {
        bottom: 20px;
    }

    .approche-text-col {
        padding: 48px 40px;
    }
}

/* ── ≤ 1024px : grilles 3→2 cols, flip wrap ── */
@media (max-width: 1024px) {
    .services-grid--photo {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .why-grid--flip {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Réinitialiser le positionnement grid sur tablette */
    .why-grid--flip .why-flip-wrap:nth-child(n) {
        grid-column: auto;
    }

    .why-flip {
        height: 240px;
    }
}

/* ── ≤ 768px : colonnes uniques, flip statique ── */
@media (max-width: 768px) {
    .services-grid--photo {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Empêche le débordement des items dans les grilles CSS Grid */
    .services-grid--photo > *,
    .secteurs-grid > *,
    .hub-services-grid > *,
    .nos-services-grid > * {
        min-width: 0;
    }

    .service-card--photo {
        min-height: 260px;
    }

    /* Sur mobile : description toujours visible */
    .sc-desc {
        max-height: 80px;
        opacity: 1;
        transform: translateY(0);
    }

    .approche-text-col {
        padding: 40px 24px;
    }

    .approche-title {
        font-size: 1.4rem;
    }

    .approche-photo-col {
        min-height: 300px;
    }

    .secteurs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Annule le centrage du 7e item (sinon crée une colonne implicite sur mobile) */
    .secteurs-grid .secteur-card:nth-child(7):last-child {
        grid-column: auto;
    }

    .why-grid--flip {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Flip cards → affichage plat sur mobile (hover inexistant) */
    .why-flip-wrap {
        min-height: auto;
        perspective: none;
    }

    .why-flip {
        transform-style: flat;
        height: auto;
        position: relative;
    }

    /* Bloque la rotation et affiche le recto + verso en pile */
    .why-flip-wrap:hover .why-flip,
    .why-flip-wrap.is-flipped .why-flip {
        transform: none;
    }

    .why-flip__front,
    .why-flip__back {
        position: relative;
        inset: auto;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        border-radius: 0;
        padding: 20px 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
    }

    .why-flip__front {
        border-bottom: none;
        border-radius: 12px 12px 0 0;
    }

    .why-flip__back {
        transform: none;
        border-radius: 0 0 12px 12px;
        margin-top: 0;
    }

    .wf-num { display: none; }
    .wf-hint { display: none; }

    .wf-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .wf-icon--sm {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .wf-titre { font-size: 0.95rem; margin: 0; }
    .wf-titre--back { font-size: 0.88rem; margin: 0 0 6px; }
    .wf-desc { font-size: 0.82rem; }

    .why-flip-wrap {
        margin-bottom: 16px;
        border-radius: 12px;
        overflow: hidden;
    }

    .why-flip-wrap:last-child {
        margin-bottom: 0;
    }
}

/* ── ≤ 480px ── */
@media (max-width: 480px) {
    .sc-content { padding: 20px; }
    .sc-title { font-size: 1rem; }

    .approche-text-col { padding: 32px 20px; }
    .approche-eng-item { font-size: 0.88rem; }

    .secteur-card { padding: 24px 20px 20px; }
}

/* ==========================================================================
   P30 — PAGE À PROPOS : RESPONSIVE
   ========================================================================== */

/* ≤ 1100px : timeline 3+2 */
@media (max-width: 1100px) {
    .about-timeline {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 40px;
    }

    .tl-track {
        display: none; /* trop complexe en multi-rangée */
    }

    .about-galerie {
        grid-template-columns: 1fr;
    }

    .ag-main { min-height: 360px; }

    .ag-secondary {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }

    .ag-small { min-height: 200px; }
}

/* ≤ 1024px : mini stats 2×2 */
@media (max-width: 1024px) {
    .about-mini-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ams-item:nth-child(2) { border-right: none; }
    .ams-item:nth-child(3),
    .ams-item:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .ams-item:nth-child(4) { border-right: none; }

    .about-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≤ 768px : mobile */
@media (max-width: 768px) {
    .about-mini-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ams-num { font-size: 2rem; }

    .about-timeline {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tl-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
    }

    .tl-dot-wrap { margin-bottom: 0; margin-top: 4px; flex-shrink: 0; }
    .tl-dot { width: 28px; height: 28px; }
    .tl-card { border-radius: 10px; padding: 16px; }
    .tl-card { text-align: left; }

    .ag-secondary {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 200px);
    }

    .ag-overlay { opacity: 1; } /* Toujours visible sur mobile */
}

/* ≤ 480px */
@media (max-width: 480px) {
    .about-mini-stats {
        grid-template-columns: 1fr 1fr;
    }

    .about-mini-stats-section { padding: 28px 0; }

    .ag-main { min-height: 280px; }
}

/* ==========================================================================
   P31 — SERVICES UPGRADE VISUEL : RESPONSIVE
   Hub Nos Services (configurateur, pourquoi-ext, badge, bouton)
   Pages service individuelles (stats, engagements, cibles, FAQ)
   ========================================================================== */

/* ── ≤ 1100px : pourquoi-ext passe en 2 colonnes ── */
@media (max-width: 1100px) {

    .pourquoi-ext-grid--enriched {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-engagements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-cible-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA configurateur : vertical sur desktop étroit */
    .hub-config-cta {
        flex-wrap: wrap;
        gap: 20px;
    }

    .hub-config-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ── ≤ 768px : tablette portrait ── */
@media (max-width: 768px) {

    /* Pourquoi-ext : 1 colonne */
    .pourquoi-ext-grid--enriched {
        grid-template-columns: 1fr;
    }

    /* Stats service : 2 colonnes */
    .svc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 18px 16px;
    }

    .svc-stat-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .svc-stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .svc-stat-num {
        font-size: 1.8rem;
    }

    /* Engagements : 2 colonnes */
    .svc-engagements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Cibles : 2 colonnes */
    .svc-cible-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* FAQ : réduit padding */
    .svc-faq-list {
        margin-top: 32px;
    }

    .svc-faq-question {
        padding: 16px 18px;
    }

    .svc-faq-answer {
        padding: 0 18px 18px;
    }

    /* Configurateur CTA */
    .hub-config-cta {
        padding: 24px 22px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── ≤ 480px : mobile S/M ── */
@media (max-width: 480px) {

    /* Stats service : 1 colonne */
    .svc-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .svc-stat-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Engagements et cibles : 1 colonne */
    .svc-engagements-grid {
        grid-template-columns: 1fr;
    }

    .svc-cible-grid {
        grid-template-columns: 1fr 1fr;
    }

    .svc-cible-card {
        padding: 20px 12px;
    }

    .svc-cible-icon {
        font-size: 2rem;
    }

    /* Eng card plus compact */
    .svc-eng-card {
        padding: 20px 16px;
    }

    /* FAQ question texte */
    .svc-faq-q-text {
        font-size: 0.9rem;
    }

    /* Hub config icon caché sur très petit écran */
    .hub-config-icon {
        display: none;
    }
}

/* ==========================================================================
   ACRONYME NVI FACILITY — Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .nvif-acronyme-block {
        padding: 28px 24px;
    }

    .acronyme-cards {
        gap: 0;
        justify-content: center;
    }

    .acr-card {
        padding: 14px 16px;
        min-width: 80px;
    }

    .acr-letter {
        font-size: 2.4rem;
    }

    .acr-word {
        font-size: 0.9rem;
    }

    .acr-def {
        font-size: 0.72rem;
    }
}

@media (max-width: 640px) {
    /* Cartes N, V, I sur une ligne / FACILITY en dessous */
    .acronyme-cards {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0;
    }

    /* Plus et FACILITY passent sur la 2e ligne, centrés */
    .acr-plus {
        grid-column: 1 / -1;
        text-align: center;
        padding: 8px 0 0;
    }

    .acr-card--facility {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 2px solid rgba(26, 188, 222, 0.25);
        padding-top: 16px;
    }

    .acr-dot {
        font-size: 1.6rem;
        padding: 0 2px;
    }

    .acronyme-full-name {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .acr-equals {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   FAB GROUP — Ajustements responsive
   ========================================================================== */

/* Tablette : FABs légèrement plus petits, évite chevauchement avec scrollbar */
@media (max-width: 768px) {
    .nvif-fab-group {
        bottom: 20px;
        right: 16px;
        gap: 12px;
    }

    .nvif-fab {
        width: 50px;
        height: 50px;
    }

    /* Tooltip masqué sur mobile (espace insuffisant) */
    .nvif-fab__tooltip {
        display: none;
    }
}

/* Mobile S : FABs encore plus compacts */
@media (max-width: 480px) {
    .nvif-fab-group {
        bottom: 16px;
        right: 12px;
        gap: 10px;
    }

    .nvif-fab {
        width: 46px;
        height: 46px;
    }
}

/* ==========================================================================
   PRINT — Masque les éléments non essentiels à l'impression
   ========================================================================== */

@media print {
    .nvif-header,
    .nvif-footer,
    .nvif-floating-buttons,
    .nvif-fab-group,
    .nvif-popup-overlay,
    .header-mobile-menu,
    .nvif-loader {
        display: none !important;
    }

    body {
        padding-top: 0 !important;
    }
}