/*
 * Scala Réseau — header global (layout TB 116), retours client du 15/10/2026.
 */

/* ── Logo SCALA seul (tracé officiel, sans « auto.com ») ───────────── */
.scr-logo-scala { display: inline-flex; align-items: center; line-height: 0; color: #fff !important; text-decoration: none; }
.scr-logo-scala-svg { display: block; width: 125px; height: auto; }
/* Le logo, plus bas que haut, se centre sur la hauteur de la barre d'accès rapide. */
@media (min-width: 981px) {
    .et-l--header .et_pb_row_0_tb_header { display: flex; align-items: center; }
}
@media (max-width: 767px) { .scr-logo-scala-svg { width: 100px; } }

/* ── Défilement horizontal : `clip` plutôt que `hidden` ──────────────
 * Le CSS additionnel Divi met html et body en overflow-x: hidden !important :
 * body devient alors un conteneur de défilement qui ne défile jamais, et
 * tous les position: sticky du site restaient inertes (barre du haut, menu
 * des villes de « Nos concessions et marques », retours du 27/10). `clip`
 * rogne pareil sans créer de conteneur de défilement. */
html:root, html body { overflow-x: clip !important; overflow-y: visible !important; }

/* Téléphone : rangées Divi à 95 % de l'écran au lieu de 80 % (retours du
   27/10). Une rangée réglée sur une autre largeur dans Divi garde la sienne
   (.et_pb_row_N.et_pb_row, plus spécifique). */
@media (max-width: 767px) { body .et_pb_row { width: 95%; } }

/* ── Header des pages classiques (maquette Home 0926, retours du 21/10) ──
 * Barre FIXE de 90 px, menu textuel : Montserrat 300/12px en capitales
 * (le lien « Airbags Takata » est devenu un objet du formulaire Contact,
 * retours du 27/10). Sur l'accueil, la barre est noire en haut de page et passe en
 * fondu au blanc dès qu'on défile (classe posée par scala-header.js) ;
 * ailleurs elle est blanche d'emblée, filet rouge dessous.
 * `:not(.scr-page-reseau)` : les pages du réseau gardent leur barre marque,
 * et ce cran de spécificité l'emporte sur le fond noir de scala-reseau.css
 * (body:not(.home) .et-l--header), chargé après nous. */
body.scr-header-clair:not(.scr-page-reseau) .et-l--header {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 9990;
    background: transparent;
}
body.admin-bar.scr-header-clair:not(.scr-page-reseau) .et-l--header { top: var(--wp-admin--admin-bar--height, 32px); }
body.scr-header-clair:not(.scr-page-reseau) #et-main-area { padding-top: 90px; }
body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_section_0_tb_header {
    background-color: #fff !important; border-bottom: 3px solid #d60407; box-shadow: 0 1px 10px rgba(0, 0, 0, .06);
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.scr-header-clair .et-l--header .et_pb_section_0_tb_header::before { display: none !important; }
/* Accueil, haut de page : noir, sans filet — le fondu vers le blanc suit le défilement. */
body.scr-header-sombre.scr-header-clair:not(.scr-header-defile) .et-l--header .et_pb_section_0_tb_header {
    background-color: #000 !important; border-bottom-color: #000; box-shadow: none;
}

/* Couleurs : sombres sur fond blanc, claires sur le noir de l'accueil. */
body.scr-header-clair .et-l--header .scr-logo-scala { color: #161616 !important; transition: color .35s ease; }
body.scr-header-clair .acces-rapide a:not([style]) { color: #161616 !important; font-weight: 500 !important; transition: color .35s ease; }
/* Le 300 de la maquette ne vaut que sur le noir : sur la barre blanche il
   paraissait trop maigre (retours du 23/10), d'où 500 ci-dessus. */
body.scr-header-sombre.scr-header-clair:not(.scr-header-defile) .acces-rapide a:not([style]) { font-weight: 300 !important; }
body.scr-header-clair .acces-rapide a:not([style]):hover { color: #d60407 !important; }
body.scr-header-clair:not(:has(.menu-overlay.open)) .et-l--header .menu-line { background-color: #161616 !important; transition: background-color .35s ease; }
body.scr-header-sombre.scr-header-clair:not(.scr-header-defile) .et-l--header .scr-logo-scala,
body.scr-header-sombre.scr-header-clair:not(.scr-header-defile) .acces-rapide a:not([style]) { color: #fff !important; }
body.scr-header-sombre.scr-header-clair:not(.scr-header-defile):not(:has(.menu-overlay.open)) .et-l--header .menu-line { background-color: #fff !important; }

/* Pages du Groupe : la barre se pose sur le bandeau texturé (aucune réserve
   de hauteur), en dégradé noir vers transparent comme sur la maquette. */
body.scr-header-superpose.scr-header-clair:not(.scr-page-reseau) #et-main-area { padding-top: 0 !important; }
body.scr-header-superpose.scr-header-clair:not(.scr-header-defile) .et-l--header .et_pb_section_0_tb_header {
    background-color: transparent !important; border-bottom-color: transparent;
    background-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) !important;
}

@media (min-width: 981px) {
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header {
        padding-top: 0 !important; padding-bottom: 0 !important; min-height: 87px;
    }
    /* Logo et burger à leur taille, le menu prend le reste. */
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header > .et_pb_column {
        height: auto; width: auto !important; flex: 0 0 auto; margin-right: 0 !important;
    }
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header > .et_pb_column_1_tb_header { flex: 1 1 auto; min-width: 0; }
    /* Colonnes latérales de même largeur : le menu se centre sur la page, comme sur la maquette. */
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header > .et_pb_column_0_tb_header,
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header > .et_pb_column_2_tb_header { flex: 0 0 160px; }
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header > .et_pb_column_2_tb_header { display: flex; justify-content: flex-end; }
    /* Centrage vertical sur l'axe du menu (43,5 px, filet exclu) : le burger
       gardait le décalage de l'ancien header (traits centrés à 34 px), le
       logo restait 2 à 3 px trop haut (retours du 23/10). */
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_column_2_tb_header .menu { top: 20px !important; }
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .scr-logo-scala { margin-top: 3px; }
    body.scr-header-clair .acces-rapide { display: flex; align-items: center; justify-content: safe center; gap: 0 38px; }
    body.scr-header-clair .acces-rapide i { display: none !important; }
    body.scr-header-clair .acces-rapide a {
        position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 30px 0 !important; margin: 0 !important;
        background: none !important; border-radius: 0 !important;
        font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 12px !important; font-weight: 300; line-height: 22px;
        text-transform: uppercase; white-space: nowrap; text-decoration: none;
    }
    body.scr-header-clair .acces-rapide a:not([style]):hover::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: #d60407;
    }
}
@media (min-width: 981px) and (max-width: 1240px) {
    body.scr-header-clair .acces-rapide { gap: 0 18px; }
    body.scr-header-clair .acces-rapide a { font-size: 11px !important; }
}
/* Téléphone et tablette : barre compacte de 67 px (filet compris), comme la
   barre des pages marques ; la colonne du burger (61 px) l'allongeait à 92. */
@media (max-width: 980px) {
    body.scr-header-clair:not(.scr-page-reseau) #et-main-area { padding-top: 67px; }
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_row_0_tb_header { padding-top: 12px !important; padding-bottom: 12px !important; }
    body.scr-header-clair:not(.scr-page-reseau) .et-l--header .et_pb_column_2_tb_header { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    body.scr-header-clair .et-l--header .et_pb_section_0_tb_header,
    body.scr-header-clair .et-l--header .scr-logo-scala,
    body.scr-header-clair .acces-rapide a { transition: none; }
}

/* ── Overlay du menu burger ───────────────────────────────────────── */
/* L'overlay du menu s'ouvre en `z-index: -1` : le header (z-index 10) lui
   passait devant, et la barre marque aussi. On le remonte au-dessus de tout.
   Ce n'était pas possible tant que le seul bouton de fermeture vivait dans le
   header — il devenait alors inatteignable ; notre bouton étant désormais
   DANS l'overlay (voir scala-reseau.js), il reste accessible. */
body .menu-overlay.open { z-index: 99990 !important; }
/* Le panneau rouge démarrait 27 px sous le haut (marge haute de la rangée
   Divi) et se faisait rogner d'autant en bas : bande sombre au-dessus du
   panneau (retours du 23/10). Rangée sans marge, panneau sur toute la hauteur. */
body .menu-overlay > .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; min-height: 100vh; min-height: 100dvh; }
body .menu-overlay > .et_pb_row > .et_pb_column { margin-top: 0 !important; margin-bottom: 0 !important; }
body .menu-overlay > .et_pb_row > .et_pb_column:last-child { min-height: 100vh; min-height: 100dvh; }

/* Le panneau rouge glisse depuis la droite à l'ouverture et repart vers la
   droite à la fermeture (retours du 23/10). Fermé, Divi masque l'overlay par
   opacity / visibility / z-index : à la fermeture, ces trois-là attendent la
   fin du glissement, sinon le panneau disparaîtrait avant d'avoir bougé. */
body .menu-overlay {
    transition: opacity .3s ease .3s, visibility 0s linear .6s, z-index 0s linear .6s !important;
}
body .menu-overlay.open {
    transition: opacity .25s ease, visibility 0s linear 0s, z-index 0s linear 0s !important;
}
body .menu-overlay > .et_pb_row > .et_pb_column:last-child {
    transform: translateX(100%); transition: transform .6s cubic-bezier(.77, 0, .18, 1) !important; will-change: transform;
}
body .menu-overlay.open > .et_pb_row > .et_pb_column:last-child { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    body .menu-overlay, body .menu-overlay.open, body .menu-overlay > .et_pb_row > .et_pb_column:last-child { transition: none !important; }
}
/* Menu Divi de l'overlay : interligne de 14 px pour des liens de 27 px —
   invisible sur une ligne, mais « Rejoignez la Communauté Scala » passe à
   la ligne sur téléphone et ses deux lignes se chevauchaient. */
@media (max-width: 767px) {
    body .menu-overlay .et-menu a { line-height: 1.05 !important; }
    /* Menu plus haut que l'écran (« Nos marques » déplié) : l'overlay défile. */
    body .menu-overlay.open { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Le bouton qui ferme le menu EST le bouton burger, logé dans le header. Le
   header étant rendu au flux, ce bouton sort de l'écran dès qu'on a défilé —
   et l'ancrer en `fixed` ne suffit pas, un ancêtre transformé fausse alors
   son référentiel. On pose donc notre propre bouton DANS l'overlay (voir
   scala-reseau.js), qui relaie le clic vers celui du thème. */
.scr-menu-close {
    position: absolute; top: 24px; right: 32px; z-index: 5;
    width: 46px; height: 46px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%; color: #fff; transition: background-color .15s ease, transform .15s ease;
}
.scr-menu-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }
.scr-menu-close svg { width: 22px; height: 22px; }
/* Le burger du thème reste le mécanisme (notre bouton lui relaie le clic),
   mais on l'efface pendant l'ouverture : sans cela deux croix se
   chevauchent tant que la page n'a pas défilé. Effacé, pas retiré — un
   `display: none` l'empêcherait de recevoir le clic relayé. */
body:has(.menu-overlay.open) .et-l--header .menu-link { opacity: 0; pointer-events: none; }

/* ── « Nos marques » en tête du menu burger ─────────────────────────── */
.scr-nos-marques { margin: 0 0 6px; text-align: left; }
/* Le module code qui la porte était centré à 75 % (rangée de logos) : aligné sur le menu. */
.menu-overlay .et_pb_code:has(.scr-nos-marques) { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.scr-nos-marques-btn {
    display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer;
    color: #fff; font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 35px; font-weight: 500; line-height: 1.5;
}
.scr-nos-marques-btn svg { width: 30px; height: 30px; transition: transform .25s; }
.scr-nos-marques.is-ouvert .scr-nos-marques-btn svg { transform: rotate(180deg); }
.scr-nos-marques-btn:hover, .scr-nos-marques-btn:focus-visible { color: #e3e3e3; }
.scr-nos-marques-liste {
    list-style: none !important; margin: 4px 0 16px 6px !important; padding: 0 0 0 20px !important;
    border-left: 2px solid rgba(255, 255, 255, .55);
}
.scr-nos-marques-liste[hidden] { display: none; }
.scr-nos-marques-liste li { list-style: none !important; margin: 0; padding: 0; }
.scr-nos-marques-liste li::before { content: none !important; }
.scr-nos-marques-liste a {
    display: block; padding: 3px 0; color: #fff !important; text-decoration: none;
    font-family: Montserrat, Helvetica, Arial, sans-serif; font-size: 22px; line-height: 1.45;
}
.scr-nos-marques-liste a:hover, .scr-nos-marques-liste a:focus-visible { color: #e3e3e3 !important; text-decoration: underline; }
@media (max-width: 767px) {
    .scr-nos-marques-btn { font-size: 27px; }
    .scr-nos-marques-btn svg { width: 24px; height: 24px; }
    .scr-nos-marques-liste a { font-size: 19px; }
}

/* Téléphone et tablette : Divi empile les trois colonnes ; celle du burger
 * gardait 61 px sous le logo (le burger, lui, est positionné ailleurs) →
 * une seule ligne, logo à gauche, burger à droite. */
@media (max-width: 980px) {
    body.scr-header-clair .et-l--header .et_pb_row_0_tb_header {
        display: flex; align-items: center; justify-content: space-between; padding-top: 14px !important; padding-bottom: 14px !important;
    }
    body.scr-header-clair .et-l--header .et_pb_column_1_tb_header { display: none; }
    body.scr-header-clair .et-l--header .et_pb_column_0_tb_header { width: auto !important; margin: 0 !important; }
    body.scr-header-clair .et-l--header .et_pb_column_2_tb_header { width: auto !important; margin: 0 0 0 auto !important; }
    /* Le thème remonte le burger de 25 px (ancien header posé sur le hero) : recentré sur le logo ; les traits du burger dépassent à droite de leur boîte : -30 px. */
    body.scr-header-clair .et-l--header .et_pb_column_2_tb_header .menu { top: 8px !important; left: -30px !important; }
}

/* ── Page Omoda & Jaecoo : son en-tête propre ([menu-spe], texte blanc)
 * était transparent en haut de page, sur la barre blanche ci-dessus :
 * illisible. Noir d'emblée, sans la barre blanche (retours du 27/10). */
body.scr-header-clair .et-l--header:has(.menu-spe) .et_pb_section { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.scr-header-clair .et-l--header:has(.menu-spe) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.menu-spe { background-color: #000 !important; }

/* ── Bandeau noir des pages intérieures (snippet « header-interne ») ──
 * Retours du 29/10 : il était très gros (50 vh, titre 70 px). Affiné et
 * aligné sur la DA de l'accueil : surtitre rouge, titre Termina capitales
 * blanc, comme « Voitures d'occasion ». La page Communauté garde son
 * bandeau propre (règles .page-id-11741, plus spécifiques). */
body .header-interne, body .header-interne.ken-burn-image-wrap, body .header-interne img.ken-burn {
    height: clamp(220px, 32vh, 300px);
}
body .header-interne h1 {
    margin: 0; padding: 0 !important; color: #fff !important;
    font-family: var(--scr-f-titre, 'termina', sans-serif) !important; font-weight: 700 !important;
    font-size: 40px !important; line-height: 44px !important; text-transform: uppercase; letter-spacing: 0;
}
body .header-interne .sous-titre {
    margin: 0 0 8px; color: #d60407 !important; font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 14px !important; line-height: 20px !important; letter-spacing: 1px; text-transform: uppercase;
}
@media (max-width: 767px) {
    body .header-interne, body .header-interne.ken-burn-image-wrap, body .header-interne img.ken-burn { height: 200px; }
    body .header-interne h1 { font-size: 26px !important; line-height: 30px !important; }
    body .header-interne .sous-titre { font-size: 12px !important; }
}
/* Le zoom « Ken Burns » (x1,3 à x1,5) rognait fortement les photos d'un
   bandeau désormais plus bas : zoom léger. */
@keyframes scrKenBurns { 0% { transform: scale(1.04); } 100% { transform: scale(1.12); } }
body .header-interne img.ken-burn { animation-name: scrKenBurns; }

/* Images coupées (retours du 29/10).
 * Véhicules neufs (snippet « Véhicules Neufs ») : les voitures proposées
 * étaient recadrées en `cover` sur 190 px — vue entière, sur fond clair. */
.smvn-slide-img { object-fit: contain !important; background: #f4f4f4; padding: 10px; box-sizing: border-box; }
/* Scala & moi : vignettes en hauteur fixe (300 px, 500 px sur téléphone)
   qui tronquaient les photos — proportion fixe à la place. */
.link-page-image img { height: auto !important; aspect-ratio: 16 / 9; }
@media (max-width: 768px) {
    .link-page-image img { aspect-ratio: 4 / 3; }
    /* Image moins haute : l'encart passe sous elle, en chevauchement léger, au lieu de flotter à 65 %. */
    .link-page-info { position: relative !important; top: auto !important; margin: -36px auto 0 !important; }
}