/**
 * Accueil — maquette Figma « Scala_Webdesign_Home_0926 » (1440 px).
 *
 * Typographies relevées dans le mode Dev de Figma (18/09) — pas à l'œil :
 * Termina pour les titres, Orbitron pour les libellés, dates et boutons,
 * Montserrat pour le texte courant (voir scala-fonts.css). La section
 * « Typographies de la maquette » en fin de fichier porte les valeurs.
 */

:root {
    --scrh-rouge:   #d60407;
    --scrh-noir:    #000;
    --scrh-gris:    #f4f4f4;
    --scrh-trait:   #ececec;
    --scrh-texte:   #111;
    --scrh-doux:    #7b7b7b;
    --scrh-display: var(--scr-f-label);
    --scrh-titre:   var(--scr-f-titre);
    --scrh-corps:   var(--scr-f-corps);
    --scrh-rayon:   16px;
}

.scrh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: content-box; }
.scrh-section { padding: 90px 0 0; }
.scrh-centre { text-align: center; }
.scrh-icone { flex: none; line-height: 1; font-size: 1.1em; }

.scrh-surtitre {
    margin: 0 0 12px; padding: 0;
    font-family: var(--scrh-display); font-size: 14px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--scrh-rouge);
}
.scrh-titre {
    margin: 0; padding: 0;
    font-family: var(--scrh-display); font-weight: 700; font-size: 48px; line-height: 1.02;
    text-transform: uppercase; letter-spacing: .01em; color: var(--scrh-texte);
}
.scrh-titre-clair { color: #fff; }

.scrh-bouton {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 28px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--scrh-rouge); color: #fff !important; text-decoration: none;
    font-family: var(--scrh-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    transition: filter .15s ease, transform .15s ease;
}
.scrh-bouton:hover { filter: brightness(1.1); transform: translateY(-1px); }
.scrh-bouton .scrh-icone { font-size: 18px; }

.scrh-section-bas { display: none; justify-content: center; margin-top: 26px; }

.scrh-lien-rouge {
    font-family: var(--scrh-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--scrh-rouge) !important; text-decoration: none; padding-bottom: 6px;
    border-bottom: 1px solid var(--scrh-rouge);
}

/* ── 1. Hero (maquette Home 0926, retours du 21/10) ───────────────
 *   Carte 1205 × 355, rayon 15, à 13 px sous la barre ; vidéo voilée.
 *   Contour du mot SCALA (1495 × 245, filet rouge 2 px) PAR-DESSUS la
 *   carte, débordant de 2 % de chaque côté de l'écran, 48 px sous son haut.
 *   Surtitre Montserrat 400/14px rouge, titre Termina 700/80px/80px blanc.
 *   Chiffres : Termina 700/40px rouge + libellé Montserrat 300/14px/16px,
 *   séparés par des filets verticaux de 62 px, à 31 px sous la carte. */
.scrh-hero {
    position: relative; overflow: hidden; background: var(--scrh-noir);
    /* Vidéo collée au filet rouge de la barre (retours du 29/10). */
    padding: 0 24px; text-align: center;
}
.scrh-hero-carte {
    position: relative; max-width: 1205px; height: 355px; margin: 0 auto;
    /* Coins du haut droits, sous la barre du site (retours du 27/10). */
    border-radius: 0 0 15px 15px; overflow: hidden; background: #111 center / cover no-repeat;
}
.scrh-hero-carte .scr-video-fond { border-radius: 0 0 15px 15px; }
/* Voile allégé (retours du 29/10 : vidéo trop foncée), plus de texte à détacher. */
.scrh-hero-voile { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .18); pointer-events: none; }
.scrh-hero-contour {
    position: absolute; z-index: 2; top: 48px; left: 50%; transform: translateX(-50%);
    /* Hauteur plafonnée à 300 px (17 % de la largeur d'écran sinon) : sur un
       grand écran le mot grandissait jusqu'à déborder sous la carte, sur les
       chiffres (retours du 27/10). 48 + 300 < 355 : il reste dans la carte. */
    width: auto; max-width: none; height: min(calc(100vw * 245 / 1440), 300px); pointer-events: none; user-select: none;
    /* Mi-opacité (retours du 23/10) ; le tracé se dessine comme jadis en pied
       de page (retours du 27/10) — .scrf-trace, scala-footer.css. Le
       logotype seul est plus serré que l'ancien contour (1206 × 198 contre
       1495 × 245) : même hauteur de lettres, à 81 %. */
    opacity: .5; aspect-ratio: 1206 / 198;
    --scrh-h: min(calc(100vw * 245 / 1440), 300px);
    height: calc(var(--scrh-h) * .81); top: calc(48px + var(--scrh-h) * .095);
}
.scrh-hero-contour-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scrh-hero-contour.is-dessine .scrf-trace { stroke-dashoffset: 0; transition: stroke-dashoffset 3.2s cubic-bezier(.65, 0, .35, 1) .3s; }
/* Le contour déborde la carte jusqu'aux bords de l'écran : la carte ne le rogne pas. */
.scrh-hero-carte { overflow: visible; }
.scrh-hero-carte > .scr-video-fond, .scrh-hero-voile { border-radius: 0 0 15px 15px; overflow: hidden; }
.scrh-hero-texte {
    position: relative; z-index: 3; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.scrh-hero .scrh-surtitre {
    margin: 0 0 6px; font-family: var(--scrh-corps); font-weight: 400; font-size: 14px; line-height: 20px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--scrh-rouge);
}
.scrh-hero .scrh-hero-titre {
    margin: 0; padding: 0; font-family: var(--scrh-titre); font-weight: 700; font-size: 80px; line-height: 80px;
    text-transform: uppercase; color: #fff;
}
.scrh-chiffres {
    display: flex; align-items: center; justify-content: center; gap: 72px;
    margin: 72px 0 0; padding: 0; list-style: none;
}
.scrh-chiffres li { list-style: none !important; margin: 0; padding: 0; }
.scrh-chiffre { display: flex; align-items: center; gap: 14px; text-align: left; }
.scrh-chiffre-valeur { font-family: var(--scrh-titre); font-weight: 700; font-size: 40px; line-height: 47px; color: var(--scrh-rouge); white-space: nowrap; }
.scrh-chiffre-libelle {
    max-width: 135px; font-family: var(--scrh-corps); font-weight: 300; font-size: 14px; line-height: 16px;
    letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.scrh-chiffres-sep { width: 1px; height: 62px; background: rgba(255, 255, 255, .45); }

/* Rouleaux de chiffres (retours du 23/10) : une colonne par chiffre, piste
   de 0 à 9 répétée deux fois, défilant de bas en haut jusqu'à la valeur —
   courbe « expo.out » de GSAP. Le fantôme (invisible) donne à la colonne la
   largeur et la hauteur du chiffre final ; clip-path rogne en hauteur
   seulement, un 0 plus large qu'un 1 ne se fait pas couper sur les côtés. */
.scrh-odo-col {
    position: relative; display: inline-block; vertical-align: top; height: var(--scrh-odo-h);
    clip-path: inset(0 -0.4em); --scrh-odo-i: 0;
}
.scrh-odo-fantome { visibility: hidden; }
.scrh-odo-piste {
    position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center;
    transform: translate(-50%, calc(-1 * var(--scrh-odo-i) * var(--scrh-odo-h)));
    transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); transition-delay: inherit;
}
.scrh-odo-piste > span { display: block; height: var(--scrh-odo-h); line-height: var(--scrh-odo-h); }
.scrh-odo-car { display: inline-block; }
/* Départ : préfixe, libellés et filets cachés sous leur ligne. */
.scrh-chiffres.is-pret .scrh-odo-car,
.scrh-chiffres.is-pret .scrh-chiffre-libelle { opacity: 0; transform: translateY(70%); }
.scrh-chiffres.is-pret .scrh-chiffres-sep { transform: scaleY(0); transform-origin: bottom; }
.scrh-chiffres.is-joue .scrh-odo-car,
.scrh-chiffres.is-joue .scrh-chiffre-libelle {
    opacity: 1; transform: none;
    transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.scrh-chiffres.is-joue .scrh-odo-car { transition-delay: calc(.15s + var(--scrh-odo-delai, 0s)); }
.scrh-chiffres.is-joue .scrh-chiffre-libelle { transition-delay: calc(.55s + var(--scrh-odo-delai, 0s)); }
.scrh-chiffres.is-joue .scrh-chiffres-sep { transform: scaleY(1); transition: transform 1s cubic-bezier(.16, 1, .3, 1) .35s; }

.scrh-recherche {
    position: relative; z-index: 3; box-sizing: border-box; flex: 0 1 591px;
    display: grid; grid-template-columns: repeat(3, 1fr) 168px; align-items: center; gap: 4px;
    width: 591px; max-width: 100%; height: 68px; margin: 0; padding: 7px 7px 7px 18px;
    border: 1px solid var(--scrh-rouge); border-radius: 80px; background: rgba(214, 4, 7, .1);
}
.scrh-champ { display: block; margin: 0; }
.scrh-champ select {
    width: 100%; height: 54px; padding: 0 8px; border: 0 !important; background: transparent !important;
    color: #fff !important; text-align: center; text-align-last: center; cursor: pointer;
    font-family: var(--scrh-corps) !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 1px !important;
    text-transform: uppercase; -webkit-appearance: none; appearance: none; box-shadow: none !important;
}
.scrh-champ select:disabled { opacity: .45; cursor: default; }
.scrh-champ select option { color: #111; text-transform: none; }
.scrh-recherche .scrh-bouton {
    justify-content: center; height: 54px; padding: 0 18px;
    font-family: var(--scrh-corps) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 1px !important;
}

/* ── 2. Voitures d'occasion (maquette Home 0926) ───────────────
 *   En-tête sur fond noir : surtitre Montserrat 700/14px rouge, titre
 *   Termina 700/40px blanc sur deux lignes, recherche, « Tout voir »
 *   Montserrat 900/12px rouge souligné (86 px). Cartes 330 × 426, #F5F5F5,
 *   rayon 15, photo 275 px ; le noir s'arrête 155 px sous leur haut. */
.scrh-vos { position: relative; overflow: hidden; padding-bottom: 20px; }
.scrh-vos-bandeau { background: var(--scrh-noir); padding: 110px 0 197px; margin-top: -1px; border-top: 1px solid var(--scrh-noir); }
.scrh-vos .scrh-wrap { max-width: 1205px; }
.scrh-entete { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.scrh-vos .scrh-surtitre {
    margin: 0 0 4px; font-family: var(--scrh-corps); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 1px;
}
.scrh-vos .scrh-titre { font-size: 40px !important; line-height: 40px !important; }
.scrh-vos .scrh-lien-entete {
    flex: none; position: relative; padding: 0 0 12px; border: 0;
    font-family: var(--scrh-corps); font-weight: 900; font-size: 12px; letter-spacing: 1px;
}
.scrh-vos .scrh-lien-entete::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 86px; height: 1px; transform: translateX(-50%); background: var(--scrh-rouge); }
.scrh-vos > .scrh-wrap { margin-top: -155px; }
/* Les carrousels débordent à droite jusqu'au bord de l'écran, comme sur la
   maquette. La feuille de Swiper pose `.swiper { overflow: hidden }` : il
   faut plus de spécificité qu'une simple classe pour l'emporter. */
.scrh-vos .swiper.scrh-vo-swiper,
.scrh-univers .swiper.scrh-cartes-swiper { overflow: visible; }
.scrh-vo-swiper .swiper-slide { height: auto; }
/* Ordinateur : le carrousel VO tient dans la largeur du site, cartes
   entières et centrées (retours du 29/10) ; marge interne pour l'ombre et
   le soulèvement au survol, que le rognage couperait sinon. */
/* Retours du 30/10 : le carrousel VO occupe toute la largeur de l'écran et
   défile seul (scala-home.js). Cartes de largeur fixe, marge interne pour
   l'ombre et le soulèvement au survol, que le rognage couperait sinon. */
.scrh-vos > .scrh-wrap.scrh-vos-defile { max-width: none; padding: 0; }
.scrh-vos .swiper.scrh-vo-swiper { overflow: hidden; padding: 6px 24px 30px; margin: -6px 0 -30px; }
.scrh-vo-swiper .swiper-slide { width: 330px; }
.scrh-vo-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(.45, 0, .2, 1); }
@media (max-width: 1023px) { .scrh-vo-swiper .swiper-slide { width: 300px; } }
@media (max-width: 767px)  {
    .scrh-vos .swiper.scrh-vo-swiper { padding: 6px 16px 30px; }
    .scrh-vo-swiper .swiper-slide { width: 78vw; max-width: 300px; }
}

.scrh-vo {
    display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
    background: #f5f5f5; border-radius: 15px; overflow: hidden;
    text-decoration: none; color: #000 !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.scrh-vo:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.12); }
/* Photos du flux en 4:3 avec deux bandeaux incrustés (marque en haut,
   scala-auto.com en bas, ~8 % chacun) : un cadre en 16:10 les rogne. */
.scrh-vo-img { display: block; aspect-ratio: 16 / 10; height: auto !important; background: #ddd; overflow: hidden; border-radius: 15px 15px 0 0; }
.scrh-vo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrh-vo-corps { display: flex; flex-direction: column; padding: 18px 30px 22px; }
.scrh-vo-detail i { font-style: normal; color: var(--scrh-rouge); padding: 0 2px; }

/* ── 3. Le groupe ────────────────────────────────────────── */
.scrh-groupe {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
    min-height: 620px; padding: 90px 90px 80px; box-sizing: border-box;
    border-radius: var(--scrh-rayon); overflow: hidden;
    background: #222 center / cover no-repeat;
}
.scrh-groupe::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.62) 100%);
}
/* Vidéo de fond (scala-design.css) sous le voile sombre, contenus au-dessus. */
.scrh-groupe::before { z-index: 1; }
.scrh-groupe > * { position: relative; z-index: 2; }
.scrh-groupe > .scr-video-fond { position: absolute; z-index: 0; }
.scrh-groupe-texte { max-width: 420px; }
.scrh-groupe-texte p { margin: 20px 0 30px; padding: 0; color: #fff; font-family: var(--scrh-corps); font-size: 17px; line-height: 1.45; }
.scrh-groupe-liens { list-style: none; margin: 0; padding: 0; min-width: 350px; }
.scrh-groupe-liens li { list-style: none !important; margin: 0; padding: 0; }
.scrh-groupe-liens a {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 14px 20px 12px; border-bottom: 1px solid var(--scrh-rouge);
    font-family: var(--scrh-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--scrh-rouge) !important; text-decoration: none; transition: padding .2s ease, color .2s ease;
}
.scrh-groupe-liens a:hover { padding-left: 28px; color: #fff !important; }
.scrh-groupe-liens .scrh-icone { font-size: 18px; }

/* ── 4. Marques / concessions / carte ────────────────────── */
.scrh-univers-barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.scrh-onglets { display: flex; gap: 50px; }
.scrh-onglets button {
    padding: 0 0 8px; border: 0; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; color: var(--scrh-texte);
    font-family: var(--scrh-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.scrh-onglets button.is-actif { color: var(--scrh-rouge); border-color: var(--scrh-rouge); }
.scrh-onglets button:focus-visible { outline: 2px solid var(--scrh-rouge); outline-offset: 4px; }
.scrh-pilules { display: flex; gap: 12px; }
.scrh-pilule {
    display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px;
    border-radius: 999px; background: var(--scrh-gris); color: var(--scrh-texte) !important; text-decoration: none;
    font-family: var(--scrh-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease;
}
.scrh-pilule:hover { background: var(--scrh-rouge); color: #fff !important; }
.scrh-pilule .scrh-icone { font-size: 18px; }

.scrh-panneau[hidden] { display: none !important; }
.scrh-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .scrh-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .scrh-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.scrh-univers { overflow: hidden; }
.scrh-carte {
    position: relative; display: block; height: 280px; border-radius: var(--scrh-rayon); overflow: hidden;
    background: #1b1b1b; text-decoration: none;
}
/* Dégradé noir du bas vers le haut : lisibilité du nom et des logos sur toutes les photos. */
.scrh-carte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 80%); }
.scrh-carte-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.scrh-carte:hover .scrh-carte-img { transform: scale(1.05); }
.scrh-carte-legende {
    position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1;
    display: flex; align-items: center; gap: 16px;
    font-family: var(--scrh-display); font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.scrh-carte-logo { height: 34px; width: auto; flex: none; }
.scrh-carte-legende-ville { justify-content: space-between; }
.scrh-carte-logos { display: flex; gap: 12px; align-items: center; }
.scrh-carte-logos img { height: 22px; width: auto; flex: none; }

.scrh-nav {
    position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--scrh-texte); box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.scrh-nav-prec { left: -14px; }
.scrh-nav-suiv { right: -14px; }
.scrh-nav.swiper-button-disabled { opacity: 0; pointer-events: none; }
.scrh-nav .scrh-icone { font-size: 18px; }
.scrh-panneau .scr-map { height: 460px; border-radius: var(--scrh-rayon); }

/* ── 5. Bandeau défilant ─────────────────────────────────── */
.scrh-bandeau { padding: 110px 0 0; overflow: hidden; }
.scrh-bandeau-piste { display: flex; width: max-content; animation: scrh-defile 40s linear infinite; }
.scrh-bandeau:hover .scrh-bandeau-piste { animation-play-state: paused; }
.scrh-bandeau-suite { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.scrh-bandeau-item {
    font-family: var(--scrh-display); font-weight: 700; font-size: 72px; line-height: 1;
    text-transform: uppercase; white-space: nowrap; color: var(--scrh-rouge);
}
.scrh-bandeau .scrh-icone { font-size: 56px; color: var(--scrh-rouge); }
@keyframes scrh-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .scrh-bandeau-piste { animation: none; } }

/* ── 6. Actualités ───────────────────────────────────────── */
.scrh-actus { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 20px; }
.scrh-une {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 690px; padding: 40px; box-sizing: border-box; border-radius: var(--scrh-rayon); overflow: hidden;
    background: #111 center / cover no-repeat; text-decoration: none; color: #fff !important;
}
.scrh-une::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.85) 100%); }
.scrh-une > * { position: relative; }
.scrh-badge {
    align-self: flex-start; padding: 8px 16px; border: 1px solid var(--scrh-rouge); border-radius: 999px;
    background: rgba(0,0,0,.35); color: #fff;
    font-family: var(--scrh-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.scrh-une-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.scrh-une time {
    display: block; margin-bottom: 12px; color: var(--scrh-rouge);
    font-family: var(--scrh-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
}
.scrh-une-titre { display: block; max-width: 520px; font-family: var(--scrh-display); font-weight: 700; font-size: 28px; line-height: 1.12; }
.scrh-rond {
    flex: none; width: 70px; height: 70px; border-radius: 50%; border: 1.5px solid var(--scrh-rouge);
    display: flex; align-items: center; justify-content: center; color: var(--scrh-rouge);
    transition: background-color .2s ease, color .2s ease;
}
.scrh-une:hover .scrh-rond { background: var(--scrh-rouge); color: #fff; }
.scrh-rond .scrh-icone { font-size: 24px; }

.scrh-actus-liste { display: flex; flex-direction: column; gap: 20px; }
.scrh-actu {
    display: flex; align-items: center; gap: 20px; flex: 1;
    padding: 12px; border: 1px solid var(--scrh-trait); border-radius: 12px;
    background: #fff; text-decoration: none; color: var(--scrh-texte) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.scrh-actu:hover { border-color: var(--scrh-rouge); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.scrh-actu-img { flex: none; width: 150px; height: 104px; border-radius: 8px; overflow: hidden; background: var(--scrh-gris); }
.scrh-actu-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrh-actu time {
    display: block; margin-bottom: 8px; color: var(--scrh-doux);
    font-family: var(--scrh-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.scrh-actu-titre { display: block; font-family: var(--scrh-display); font-weight: 700; font-size: 17px; line-height: 1.15; }

/* ── 7. Suivez-nous ──────────────────────────────────────── */
.scrh-social { padding-bottom: 90px; }
.scrh-social .scrh-titre { margin-bottom: 44px; }
.scrh-mur { columns: 4; column-gap: 20px; margin-bottom: 44px; }
.scrh-mur-photo { break-inside: avoid; margin: 0 0 20px; border-radius: 8px; overflow: hidden; }
.scrh-mur-photo img { display: block; width: 100%; height: auto; }
.scrh-insta { margin-bottom: 44px; }
.scrh-insta iframe { display: block; width: 100%; border: 0; overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .scrh-groupe { flex-direction: column; align-items: stretch; padding: 60px 40px; }
    .scrh-groupe-liens { min-width: 0; }
    .scrh-actus { grid-template-columns: 1fr; }
    .scrh-une { min-height: 480px; }
    .scrh-mur { columns: 3; }
}
@media (max-width: 767px) {
    .scrh-wrap { padding: 0 16px; }
    .scrh-section { padding-top: 60px; }
    .scrh-titre { font-size: 32px; }
    .scrh-recherche .scrh-bouton { justify-content: center; width: 100%; }
    /* En-têtes de section : le lien quitte l'en-tête et se retrouve centré en
       bas de la section (voir .scrh-section-bas). */
    .scrh-entete .scrh-lien-entete { display: none; }
    .scrh-section-bas { display: flex; }
    .scrh-vo-prix { font-size: 24px; }
    .scrh-groupe { min-height: 0; padding: 40px 24px; }
    /* Onglets remplacés par la liste déroulante (scala-design.css). */
    .scrh-onglets { display: none; }
    .scrh-univers-barre { gap: 16px; }
    /* Onglets : une seule ligne qui défile plutôt que des libellés coupés en deux. */
    .scrh-onglets { gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; width: calc(100% + 32px); }
    .scrh-onglets button { font-size: 11px; letter-spacing: .04em; }
    .scrh-onglets::-webkit-scrollbar { display: none; }
    .scrh-onglets button { white-space: nowrap; flex: none; }
    .scrh-pilules { width: 100%; }
    .scrh-pilule { flex: 1; justify-content: center; padding: 14px 16px; }
    .scrh-carte { height: 220px; }
    .scrh-carte-legende { font-size: 20px; left: 20px; right: 20px; bottom: 20px; }
    .scrh-nav { display: none; }
    .scrh-bandeau { padding-top: 60px; }
    .scrh-bandeau-item { font-size: 40px; }
    .scrh-bandeau .scrh-icone { font-size: 32px; }
    .scrh-une { padding: 24px; min-height: 380px; }
    .scrh-une-titre { font-size: 22px; }
    .scrh-rond { width: 52px; height: 52px; }
    .scrh-actu-img { width: 100px; height: 80px; }
    .scrh-actu-titre { font-size: 14px; }
    .scrh-mur { columns: 2; column-gap: 10px; }
    .scrh-mur-photo { margin-bottom: 10px; }
}

/* ── Typographies de la maquette (mode Dev Figma, 18/09) ─────────────
 * Libellés (Orbitron) : surtitres 700/14px ; onglets, boutons, recherche
 * 900/12px ; dates 700/12px. Titres (Termina) : hero 700/120px, sections
 * 700/40px, prix 700/30px, cartes de marque 500/25px, actu à la une
 * 700/25px, actus 700/16px. Texte courant : Montserrat 400/12px. */
.scrh-surtitre { font-family: var(--scrh-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; }
/* Le CSS personnalisé du site force « h2 { font-size: 40px !important } » : sans !important
   la taille mobile est ignorée et l'interlignage se retrouve plus court que les lettres. */
.scrh-titre { font-family: var(--scrh-titre); font-weight: 700; font-size: 40px !important; line-height: 44px !important; letter-spacing: 0; }
.scrh-bouton, .scrh-lien-rouge, .scrh-onglets button, .scrh-pilule, .scrh-champ select, .scrh-badge,
.scrh-groupe-liens a {
    font-family: var(--scrh-display); font-weight: 900; font-size: 12px; letter-spacing: 1px;
}
.scrh-vo-marque { font-family: var(--scrh-corps); font-weight: 700; font-size: 20px; line-height: 21px; letter-spacing: 1px; text-transform: uppercase; color: var(--scrh-rouge); }
.scrh-vo-modele, .scrh-vo-detail { font-family: var(--scrh-corps); font-weight: 400; font-size: 12px; line-height: 19px; color: #020000; }
.scrh-vo-modele { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.scrh-vo-prix { font-family: var(--scrh-titre); font-weight: 700; font-size: 30px; line-height: 40px; color: #020000; margin-top: 12px; }
.scrh-carte-legende { font-family: var(--scrh-titre); font-weight: 500; font-size: 25px; letter-spacing: 0; }
.scrh-bandeau-item { font-family: var(--scrh-titre); font-weight: 700; }
.scrh-une time { font-family: var(--scrh-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.scrh-actu time { font-family: var(--scrh-display); font-weight: 700; font-size: 12px; line-height: 19px; color: #999; letter-spacing: 0; }
.scrh-une-titre { font-family: var(--scrh-titre); font-weight: 700; font-size: 25px; line-height: 29px; }
.scrh-actu-titre { font-family: var(--scrh-titre); font-weight: 700; font-size: 16px; line-height: 19px; }
.scrh-groupe-texte p { font-family: var(--scrh-corps); }
.scrh-icone { width: 1em; height: 1em; }
@media (max-width: 767px) {
    .scrh-titre { font-size: 28px !important; line-height: 34px !important; }
    .scrh-vo-prix { font-size: 24px; }
    .scrh-carte-legende { font-size: 20px; }
    .scrh-une-titre { font-size: 20px; line-height: 26px; }
    .scrh-actu-titre { font-size: 14px; line-height: 19px; }
}

/* Cartes concessions : nom de ville un peu plus petit, logos des marques sur leur propre ligne
   en dessous (jusqu'à huit marques à Perpignan : ils passent à la ligne si besoin). */
.scrh-carte-legende-ville { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; font-size: 20px; }
.scrh-carte-logos { gap: 8px 14px; flex-wrap: wrap; justify-content: flex-start; }
.scrh-carte-logos img { height: 20px; }
@media (max-width: 767px) {
    .scrh-carte-legende-ville { font-size: 17px; gap: 10px; }
    .scrh-carte-logos img { height: 18px; }
}

/* Téléphone : les trois onglets doivent tenir dans la largeur sans rogner le dernier.
   Placé après le bloc « Typographies de la maquette », qui fixe leur graisse et leur taille. */
@media (max-width: 767px) {
    .scrh-onglets button { font-size: 10px; letter-spacing: .02em; }
}

/* ── Cartes portrait retournables (retours client du 15/10) ──────
 * Lignes de cinq ; recto = visuel, verso = liens. Survol (souris) ou
 * focus clavier retournent la carte ; au toucher : .is-retourne (JS). */
.scrh-grille.scrh-grille-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .scrh-grille.scrh-grille-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .scrh-grille.scrh-grille-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.scrh-flip { aspect-ratio: 3 / 4; perspective: 1200px; }
.scrh-flip-in { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
@media (hover: hover) { .scrh-flip:hover .scrh-flip-in { transform: rotateY(180deg); } }
.scrh-flip:focus-within .scrh-flip-in, .scrh-flip.is-retourne .scrh-flip-in { transform: rotateY(180deg); }
.scrh-flip-recto, .scrh-flip-verso {
    position: absolute; inset: 0; border-radius: var(--scrh-rayon); overflow: hidden;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.scrh-flip-recto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: #151515; cursor: pointer; transform: translateZ(1px); }
.scrh-flip-fond { position: absolute; inset: 0; background: linear-gradient(165deg, var(--scrh-marque, #3a3a3a) 0%, #141414 78%); }
.scrh-flip-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrh-flip-recto:has(.scrh-flip-photo)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.28)); }
.scrh-flip-logo { position: relative; z-index: 1; width: 62%; max-height: 38%; object-fit: contain; filter: brightness(0) invert(1); }
/* Les anneaux Audi n'occupent qu'un bandeau de leur SVG carré : à 62 % ils
   paraissaient tassés (retours du 29/10). Taille moyenne. */
.scrh-flip-logo.scrh-flip-logo-audi { width: 86%; max-height: 60%; }
.scrh-flip-nom, .scrh-flip-ville {
    position: relative; z-index: 1; color: #fff; text-align: center;
    font-family: var(--scr-f-titre, var(--scrh-display)); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15;
}
.scrh-flip-logos { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.scrh-flip-logos img { height: 20px; width: auto; max-width: 64px; object-fit: contain; filter: brightness(0) invert(1); }
.scrh-flip-verso {
    /* translateZ(1px), ici et au recto : les faces et le plan de la carte
       étaient coplanaires, le navigateur attribuait les clics au hasard
       (logo du recto, plan de la carte) et la moitié des villes n'étaient
       ni cliquables ni rouges au survol (retours du 27/10). */
    transform: rotateY(180deg) translateZ(1px); display: flex; flex-direction: column; justify-content: center; gap: 10px;
    padding: 24px 22px; background: #fff; border: 1px solid #e3e3e3; color: #161616;
}
.scrh-flip-titre { margin: 0 0 4px; font-family: var(--scr-f-titre, var(--scrh-display)); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: #161616; }
.scrh-flip-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.scrh-flip-liens a, .scrh-flip-liens span { display: block; padding: 5px 0; border-bottom: 1px solid #ececec; color: #161616 !important; text-decoration: none; font-size: 15px; }
.scrh-flip-liens a:hover, .scrh-flip-liens a:focus-visible { color: var(--scrh-rouge, #d60407) !important; }
.scrh-flip-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--scrh-rouge, #d60407) !important; font-weight: 700; text-decoration: none; font-size: 14px; }
.scrh-flip-cta .scrh-icone { width: 14px; height: 14px; }
.scrh-flip-toutes {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 3 / 4;
    border-radius: var(--scrh-rayon); background: var(--scrh-rouge, #d60407); color: #fff !important; text-decoration: none; text-align: center; padding: 24px;
    font-family: var(--scr-f-titre, var(--scrh-display)); font-size: 20px; text-transform: uppercase; letter-spacing: .04em; transition: filter .2s;
}
.scrh-flip-toutes:hover { filter: brightness(1.1); }
.scrh-flip-toutes .scrh-icone { width: 34px; height: 34px; }
.scrh-univers-cta { margin: 28px 0 0; }
@media (max-width: 640px) {
    .scrh-flip-nom, .scrh-flip-ville { font-size: 17px; }
    .scrh-flip-verso { padding: 16px 14px; }
    .scrh-flip-liens a, .scrh-flip-liens span { font-size: 14px; padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) { .scrh-flip-in { transition: none; } }

/* ── Mur Instagram : maçonnerie sur deux lignes (retours du 15/10) ──
 * Six colonnes de deux photos ; la ligne de partage alterne d'une colonne à
 * l'autre (60/40, 40/60, 50/50…). Téléphone : trois colonnes, six photos. */
.scrh-mur {
    columns: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
    height: clamp(380px, 34vw, 520px); max-width: 1180px; margin: 0 auto 40px;
}
.scrh-mur-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.scrh-mur-photo { margin: 0; flex: 1 1 0; min-height: 0; aspect-ratio: auto; border-radius: 8px; overflow: hidden; }
.scrh-mur-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.scrh-mur-photo:hover img { transform: scale(1.04); }
.scrh-mur-col:nth-child(3n+1) .scrh-mur-photo:first-child { flex-grow: 1.5; }
.scrh-mur-col:nth-child(3n+2) .scrh-mur-photo:last-child  { flex-grow: 1.5; }
.scrh-mur-col:nth-child(3n)   .scrh-mur-photo:first-child { flex-grow: 1.15; }
@media (max-width: 1100px) { .scrh-mur { grid-template-columns: repeat(4, minmax(0, 1fr)); } .scrh-mur-col:nth-child(n+5) { display: none; } }
@media (max-width: 767px) {
    .scrh-mur { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: 92vw; max-height: 420px; }
    .scrh-mur-col { gap: 6px; }
    .scrh-mur-col:nth-child(n+4) { display: none; }
}

/* ── Verso v2 (retours du 15/10) : logo, libellé, pastilles, bouton ──
 * La liste à filets en deux colonnes coupait « Saint-Gaudens » et se lisait
 * mal : pastilles cliquables qui passent à la ligne, jamais coupées. */
.scrh-flip-verso { padding: 20px 18px 18px; gap: 10px; }
.scrh-flip-titre-logo { margin: 0; line-height: 0; }
.scrh-flip-entete-logo { display: block; height: 30px; width: 110px; max-width: 70%; object-fit: contain; object-position: left center; } /* SVG sans dimensions : boîte explicite */
.scrh-flip-libelle {
    margin: 2px 0 0; font-family: var(--scr-f-label, inherit); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a;
}
.scrh-flip-pastilles, .scrh-flip-liens:has(li:nth-child(6)).scrh-flip-pastilles {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; grid-template-columns: none;
    list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.scrh-flip-pastilles li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.scrh-flip-pastilles li::before, .scrh-flip-pastilles li::marker { content: none !important; display: none !important; }
.scrh-flip-pastilles a, .scrh-flip-pastilles span,
.scrh-flip-liens:has(li:nth-child(6)) a, .scrh-flip-liens:has(li:nth-child(6)) span {
    display: inline-block; padding: 6px 11px !important; border: 1px solid #e1e1e1; border-radius: 999px;
    font-size: 13px !important; line-height: 1.2; white-space: nowrap; background: #fff;
    transition: background-color .15s, border-color .15s, color .15s;
}
.scrh-flip-pastilles a:hover, .scrh-flip-pastilles a:focus-visible {
    background: #d60407; border-color: #d60407; color: #fff !important;
}
.scrh-flip-cta {
    margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 11px 14px; border-radius: 6px; background: #d60407; color: #fff !important;
    font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: filter .15s, transform .15s;
}
.scrh-flip-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.scrh-flip-cta .scrh-icone { width: 14px; height: 14px; }
@media (max-width: 640px) {
    .scrh-flip-verso { padding: 14px 12px 12px; gap: 8px; }
    .scrh-flip-pastilles a, .scrh-flip-pastilles span { padding: 5px 9px !important; font-size: 12px !important; }
    .scrh-flip-cta { padding: 9px 10px; font-size: 13px; }
}
/* Huit à neuf pastilles doivent tenir sans défiler dans une carte de 226 px. */
.scrh-flip-verso { padding: 16px 14px 14px; gap: 8px; }
.scrh-flip-entete-logo { height: 26px; }
.scrh-flip-pastilles { gap: 5px; }
.scrh-flip-pastilles a, .scrh-flip-pastilles span,
.scrh-flip-liens:has(li:nth-child(6)).scrh-flip-pastilles a, .scrh-flip-liens:has(li:nth-child(6)).scrh-flip-pastilles span {
    padding: 4px 9px !important; font-size: 12px !important;
}
.scrh-flip-cta { padding: 10px 12px; font-size: 13px; }
.scrh-flip-verso { gap: 6px; }
.scrh-flip-pastilles { gap: 4px; }
.scrh-flip-pastilles a, .scrh-flip-pastilles span,
.scrh-flip-liens:has(li:nth-child(6)).scrh-flip-pastilles a, .scrh-flip-liens:has(li:nth-child(6)).scrh-flip-pastilles span { padding: 3px 8px !important; }
.scrh-flip-verso { padding-top: 14px; padding-bottom: 12px; }
.scrh-flip-libelle { margin: 0; font-size: 10px; }
.scrh-flip-cta { padding: 9px 10px; }

/* ── Retours du 29/10 : survol fiable, verso qui défile ──────────────
 * Carte retournée : le recto ne capte plus le pointeur (il prenait parfois
 * le survol, d'où des pastilles qui ne passaient pas au rouge). Survol des
 * pastilles et du bouton à contraste franc, réservé aux souris : au toucher,
 * l'état de survol restait collé et rendait les libellés illisibles. */
.scrh-flip.is-retourne .scrh-flip-recto, .scrh-flip:focus-within .scrh-flip-recto { pointer-events: none; }
@media (hover: hover) { .scrh-flip:hover .scrh-flip-recto { pointer-events: none; } }
.scrh-flip .scrh-flip-pastilles a:hover, .scrh-flip .scrh-flip-pastilles a:focus-visible {
    background: #d60407 !important; border-color: #d60407 !important; color: #fff !important;
}
.scrh-flip .scrh-flip-cta:hover, .scrh-flip .scrh-flip-cta:focus-visible { filter: none; background: #161616; color: #fff !important; }
@media (hover: none) {
    .scrh-flip .scrh-flip-pastilles a:hover { background: #fff !important; border-color: #e1e1e1 !important; color: #161616 !important; }
    .scrh-flip .scrh-flip-pastilles a:active { background: #d60407 !important; border-color: #d60407 !important; color: #fff !important; }
    .scrh-flip .scrh-flip-cta:hover { background: #d60407; transform: none; }
}
/* Verso trop petit pour sa liste (téléphone, marques à nombreuses villes) :
   la liste défile, le bouton « Découvrir … » reste toujours visible. */
.scrh-flip-verso { justify-content: flex-start; }
.scrh-flip-verso .scrh-flip-pastilles {
    flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; align-content: flex-start; scrollbar-width: thin;
}
.scrh-flip-verso .scrh-flip-cta { flex: none; }

/* Titre du bloc marques / concessions (retours du 16/10), même typo que « Voitures d'occasion ». */
.scrh-univers-tete { margin: 0 0 28px; }
@media (max-width: 767px) { .scrh-univers-tete { margin-bottom: 20px; } }
/* Header blanc dans le flux sur l'accueil (16/10) : le hero n'a plus à réserver sa hauteur. */

/* ── Hero et VO de la maquette Home 0926 : tablette et téléphone ── */
@media (max-width: 1100px) {
    .scrh-entete { flex-wrap: wrap; }
    .scrh-recherche { order: 3; flex-basis: 100%; width: 100%; }
    .scrh-chiffres { gap: 36px; }
}
@media (max-width: 767px) {
    .scrh-hero { padding: 0 16px; }
    .scrh-hero-carte { height: 260px; }
    .scrh-hero-contour { top: calc(70px + var(--scrh-h) * .095); }
    .scrh-hero .scrh-hero-titre { font-size: 48px; line-height: 50px; }
    .scrh-chiffres { gap: 14px; margin-top: 44px; }
    .scrh-chiffres-sep { height: 44px; }
    .scrh-chiffre { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .scrh-chiffre-valeur { font-size: 26px; line-height: 30px; }
    .scrh-chiffre-libelle { font-size: 10px; line-height: 13px; letter-spacing: .5px; }
    .scrh-vos-bandeau { padding: 64px 0 140px; }
    .scrh-vos > .scrh-wrap { margin-top: -110px; }
    .scrh-recherche { grid-template-columns: 1fr; height: auto; border-radius: 24px; padding: 10px; }
    .scrh-recherche .scrh-bouton { width: 100%; }
    .scrh-vo { min-height: 0; }
    .scrh-vo-prix { font-size: 24px; }
}

/* Titre lisible sur le voile allégé (29/10). */
.scrh-hero .scrh-hero-titre { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
/* Surtitre « Le groupe » rouge, plus petit, au-dessus de SCALA (30/10). */
.scrh-hero .scrh-surtitre {
    margin: 0 0 10px; font-weight: 700; font-size: 18px; line-height: 22px; letter-spacing: 4px;
    color: var(--scrh-rouge); text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .8), 0 0 22px rgba(0, 0, 0, .7);
}
@media (max-width: 767px) { .scrh-hero .scrh-surtitre { font-size: 13px; letter-spacing: 3px; margin-bottom: 6px; } }