/* ==========================================================================
   REFONTE VISUELLE PAGE D'ACCUEIL - 25 juillet 2026
   Charge APRES le CSS critique inline : ce fichier ecrase les regles existantes.
   Pour revenir en arriere : voir _INTERNE-NE-PAS-DEPLOYER/backup-refonte-2026-07-25/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS DE DESIGN
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces : une vraie echelle, du fond le plus profond a la carte survolee.
       Volontairement plus claires que le premier jet (25/07) : le site paraissait
       trop sombre, on remonte tout d'environ 10 points de luminosite. */
    --bg-primary: #272a2e;
    --bg-secondary: #30333a;
    --bg-tertiary: #3a3e45;
    --bg-card: #363a41;
    --bg-card-hover: #42474f;
    --bg-glass: rgba(255, 255, 255, .08);

    --border-subtle: rgba(255, 255, 255, .12);
    --border-glass: rgba(255, 255, 255, .18);
    --border-strong: rgba(255, 255, 255, .28);

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, .86);
    --text-tertiary: rgba(255, 255, 255, .7);

    --accent: #E31E24;
    --accent-light: #ff3d43;
    --accent-soft: rgba(227, 30, 36, .12);
    --accent-line: rgba(227, 30, 36, .32);

    --font-display: 'Archivo', 'Inter', 'Inter Fallback', -apple-system, sans-serif;

    /* Rythme vertical unique pour toute la page */
    --section-y: 96px;
    --section-x: 48px;
    --header-gap: 56px;

    --radius-card: 18px;
    --radius-sm: 10px;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .45);
}

@media (max-width: 768px) {
    :root {
        --section-y: 64px;
        --section-x: 20px;
        --header-gap: 40px;
    }
}

body {
    background: var(--bg-primary);
    /* Le curseur personnalise faisait date et genait la lecture : on remet celui du systeme */
    cursor: auto;
}

.cursor,
.cursor-dot {
    display: none !important;
}

a,
button {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHIE - Archivo pour les titres, Inter pour le texte
   -------------------------------------------------------------------------- */
h1, h2, h3,
.hero-title,
.section-title,
.ps-header h2,
.faq-category-title,
.service-title,
.reviews-section-title h2 {
    font-family: var(--font-display);
    letter-spacing: -.025em;
}

.hero-title {
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .95;
}

.section-title,
.ps-header h2,
.reviews-section-title h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.02;
    margin-bottom: 14px;
}

.section-subtitle,
.ps-subtitle,
.reviews-section-title p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-tertiary);
    max-width: 560px;
    margin: 0 auto;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.section-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--accent);
    flex: none;
}

.section-header,
.ps-header {
    margin-bottom: var(--header-gap);
}

/* --------------------------------------------------------------------------
   3. RYTHME VERTICAL - fin des trous de 400 px
   -------------------------------------------------------------------------- */
.problem-solution,
.services-section,
.reviews-section,
.faq-section,
.contact-section,
.pl-section {
    padding: var(--section-y) var(--section-x);
}

/* overflow:hidden transformait ces sections en conteneurs de defilement, ce qui
   cassait les colonnes sticky. overflow:clip rogne sans creer de scrollport. */
.problem-solution,
.faq-section,
.services-section,
.contact-section,
.reviews-section,
.pl-section {
    overflow: clip;
}

/* Les halos radiaux geants creaient des zones vides : on les calme */
.problem-solution::before,
.faq-section::before,
.contact-section::before,
.reviews-section::before {
    opacity: .35;
}

/* Alternance des fonds : une section sur deux respire differemment */
/* Toutes les sections a photo partagent le meme fond : c'est lui qu'on voit
   dans la bande qui separe deux photos, il doit etre identique partout. */
.problem-solution { background: var(--bg-primary); }
.services-section { background: var(--bg-primary); }
.pl-section       { background: var(--bg-primary); position: relative; }
.reviews-section  { background: var(--bg-primary); }
.faq-section      { background: var(--bg-primary); }
.contact-section  { background: var(--bg-primary); }
.zone-section     { background: var(--bg-primary); }

/* --------------------------------------------------------------------------
   3 bis. FONDS PHOTO REELS (extraits des videos d'intervention)
   Volontairement tres sombres : ils donnent de la matiere, pas du spectacle.
   Le texte doit rester parfaitement lisible par-dessus.
   -------------------------------------------------------------------------- */
.problem-solution .section-bg,
.services-section .section-bg,
.pl-section .section-bg,
.reviews-section .section-bg,
.faq-section .section-bg,
.contact-section .section-bg {
    display: block;
    position: absolute;
    /* La photo ne touche pas les bords de sa section : il reste une bande du
       fond du site en haut et en bas, donc deux photos qui se suivent sont
       nettement detachees l'une de l'autre. */
    inset: 24px 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.problem-solution .section-bg img,
.services-section .section-bg img,
.pl-section .section-bg img,
.reviews-section .section-bg img,
.faq-section .section-bg img,
.contact-section .section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    filter: grayscale(.22) contrast(1.03) brightness(1.25);
}

/* Voile sombre UNIFORME : la photo se voit partout, y compris derriere le texte,
   mais le contraste des titres blancs reste au-dessus des seuils d'accessibilite.
   Les degrades haut/bas fondent la photo dans la section suivante. */
.problem-solution .section-bg::after,
.services-section .section-bg::after,
.pl-section .section-bg::after,
.reviews-section .section-bg::after,
.faq-section .section-bg::after,
.contact-section .section-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Voile UNIFORME, sans fondu haut/bas : chaque photo s'arrete net au bord
       de sa section. La separation se fait par le trait ci-dessous, pas par un
       degrade qui melangeait deux photos l'une dans l'autre. */
    background: rgba(34, 37, 41, .48);
}

/* La bande de fond fait deja la separation : plus besoin de trait blanc en
   travers, sauf pour detacher le footer et la zone d'intervention. */
.zone-section,
.footer {
    border-top: 1px solid var(--border-subtle);
}

/* On alterne la densite du voile d'une bande a l'autre : deux photos qui se
   suivent n'ont jamais la meme profondeur, donc l'oeil comprend tout de suite
   qu'il change de bloc, meme sans regarder le trait. */
.services-section .section-bg::after { background: rgba(30, 33, 37, .58); }
.reviews-section .section-bg::after  { background: rgba(30, 33, 37, .58); }
.contact-section .section-bg::after  { background: rgba(30, 33, 37, .54); }

.problem-solution .section-bg::after { background: rgba(30, 33, 37, .68); } /* assombri (2 sept. 2026) */
.pl-section .section-bg::after       { background: rgba(38, 41, 46, .4); }
.faq-section .section-bg::after      { background: rgba(38, 41, 46, .42); }

/* Reglage par photo : les sources n'ont pas la meme luminosite au depart.
   Objectif : que chaque fond se voie au meme niveau d'un bout a l'autre de la page. */

/* Reglage photo par photo : les sources n'ont pas la meme luminosite au depart. */

/* Valise OBD au plancher : source tres sombre, on remonte fort */
.contact-section .section-bg img { filter: grayscale(.18) contrast(1.04) brightness(2.15); }

/* Carrosserie blanche en plein soleil : sources tres claires, on descend */
.problem-solution .section-bg img { filter: grayscale(.28) contrast(1.03) brightness(.95); }
.reviews-section .section-bg img { filter: grayscale(.28) contrast(1.03) brightness(1); }

/* Pieces au sol en atelier : gris uniforme */
/* Cabine de camion blanche en plein jour : source claire, on descend */
.pl-section .section-bg img { filter: grayscale(.3) contrast(1.04) brightness(.88); }
.faq-section .section-bg img { filter: grayscale(.34) contrast(1.03) brightness(1.02); }

.problem-solution > .container,
.services-section > .container,
.pl-section > .container,
.reviews-section > .container,
.faq-section > .container,
.contact-section > .container {
    position: relative;
    z-index: 1;
}

/* Les halos rouges d'origine se superposaient mal aux photos */
.problem-solution::before,
.faq-section::before,
.contact-section::before,
.reviews-section::before {
    display: none;
}

/* Photo reelle dans la colonne "Pourquoi nous choisir" */
.ps-photo {
    margin: 36px 0 0;
    max-width: 420px;
}

.ps-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-card);
    filter: brightness(1.14) contrast(1.06) saturate(1.06);
}

.ps-photo figcaption {
    margin-top: 10px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-tertiary);
    padding-left: 12px;
    border-left: 2px solid var(--accent);
}

@media (max-width: 900px) {
    .ps-photo { max-width: none; margin-top: 28px; }
}

.reviews-section .container > #google-reviews-container { margin-top: 8px; }

/* Le CSS du widget Google se charge apres celui-ci : on remonte la specificite */
.reviews-section .reviews-section-title {
    margin-bottom: 40px;
    text-align: center;
}

.reviews-section .reviews-section-title .section-eyebrow {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: .6875rem;
    letter-spacing: .18em;
}

.reviews-section .reviews-section-title p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero { min-height: 92vh; }

/* Le hero passe d'une image de synthese a un montage de vraies interventions.
   L'ancien reglage (brightness 1.5) etait cale sur une image sombre : il crame
   les rushes. On revient a un rendu naturel, l'assombrissement est fait par le
   voile ci-dessous pour garder le titre lisible. */
.hero-bg img,
.hero-bg video {
    opacity: 1;
    filter: saturate(1.08) contrast(1.03) brightness(1.05);
    /* L'ancien scale(1.05) rognait encore 5 % de l'image : on montre le
       cadrage entier, les plans sont deja assez serres comme ca. */
    transform: none;
}

.hero-bg img.loaded { opacity: 1; }

.hero-bg::after {
    background:
        radial-gradient(78% 62% at 50% 40%, rgba(24, 26, 30, .6) 0%, rgba(24, 26, 30, .26) 100%),
        linear-gradient(180deg, rgba(26, 28, 32, .42) 0%, rgba(26, 28, 32, .38) 35%, rgba(26, 28, 32, .74) 80%, var(--bg-primary) 100%);
}

.hero-eyebrow {
    font-family: var(--font-display);
    letter-spacing: .18em;
}

/* Une seule barre de stats au lieu de 4 pastilles disjointes */
.hero-stats {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    background: rgba(10, 10, 12, .62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 4px;
    box-shadow: var(--shadow-card);
}

.hero-stat {
    background: none !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 12px 24px;
    position: relative;
}

.hero-stat + .hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--border-subtle);
}

/* Les pastilles rouges pleines alourdissaient la barre : simple glyphe accent */
.hero-stat-icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 22px;
    height: 22px;
}

.hero-stat-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
}

.hero-stat-value {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: none !important;
}

@media (max-width: 620px) {
    .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .hero-stat + .hero-stat::before { display: none; }
    .hero-stat { padding: 10px 14px; }
}

/* --------------------------------------------------------------------------
   5. SECTION "POURQUOI NOUS CHOISIR" - colonne fixe + parcours numerote
   Remplace la 3e grille de cartes identiques par une mise en page en 2 temps.
   -------------------------------------------------------------------------- */
.ps-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 72px;
    align-items: start;
}

.ps-aside {
    position: sticky;
    top: 110px;
}

.ps-aside h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.032em;
    margin-bottom: 18px;
}

.ps-aside h2 span { color: var(--accent); }

.ps-aside p {
    color: var(--text-tertiary);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 42ch;
}

.ps-aside-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .9375rem;
    padding: 15px 26px;
    border-radius: var(--radius-sm);
    transition: background .2s ease, transform .2s ease;
}

.ps-aside-cta:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.ps-aside-note {
    margin-top: 16px;
    font-size: .875rem;
    color: var(--text-tertiary);
}

.ps-aside-note strong { color: var(--text-primary); }

.ps-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ps-steps::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(180deg, var(--accent-line), var(--border-subtle));
}

.ps-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 26px;
    padding: 0 0 44px;
    position: relative;
}

.ps-step:last-child { padding-bottom: 0; }

.ps-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-tertiary);
    position: relative;
    z-index: 1;
}

/* --- Parcours en 3 temps : la couleur porte le sens ---------------------
   Rouge = le probleme, ambre = ca s'aggrave, vert = la solution.
   Seule entorse assumee a la palette rouge/blanc : ici la couleur informe
   au lieu de decorer, on lit la progression d'un coup d'oeil. */
.ps-step .mot-cle { font-weight: 800; }

.ps-step.is-probleme .mot-cle { color: #ff4d52; }
.ps-step.is-empire   .mot-cle { color: #f0a02a; }
.ps-step.is-solution .mot-cle { color: #35c98a; }

/* La pastille numerotee reprend la meme couleur */
.ps-step.is-probleme .ps-step-num {
    color: #ff4d52;
    border-color: rgba(255, 77, 82, .5);
    background: rgba(255, 77, 82, .1);
}

.ps-step.is-empire .ps-step-num {
    color: #f0a02a;
    border-color: rgba(240, 160, 42, .5);
    background: rgba(240, 160, 42, .1);
}

.ps-step.is-solution .ps-step-num {
    background: #35c98a;
    border-color: #35c98a;
    color: #10231c;
    box-shadow: 0 0 0 6px rgba(53, 201, 138, .16);
}

/* Le fil vertical suit la meme progression */
.ps-steps::before {
    background: linear-gradient(180deg, #ff4d52 0%, #f0a02a 50%, #35c98a 100%);
    opacity: .55;
}

.ps-step h3 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 12px 0 10px;
    color: var(--text-primary);
}

.ps-step p {
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    max-width: 54ch;
}

@media (max-width: 900px) {
    .ps-split { grid-template-columns: 1fr; gap: 44px; }
    .ps-aside { position: static; }
    .ps-step { grid-template-columns: 46px 1fr; gap: 18px; padding-bottom: 34px; }
    .ps-step-num { width: 46px; height: 46px; font-size: .875rem; }
    .ps-steps::before { left: 22px; }
    .ps-step h3 { font-size: 1.1875rem; margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   6. CARTES SERVICES - hauteurs egales, boutons alignes, un seul systeme
   -------------------------------------------------------------------------- */
.services-grid { align-items: stretch; gap: 20px; }

.service-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.service-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.service-card.featured {
    border-color: var(--accent-line);
    background: linear-gradient(180deg, rgba(227, 30, 36, .07), transparent 220px), var(--bg-card);
}

.service-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    box-shadow: none;
    margin-bottom: 20px;
}

.service-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    filter: none;
}

.service-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

.service-desc {
    color: var(--text-tertiary);
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: 22px;
}

.service-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.service-price-label {
    font-size: .75rem;
    color: var(--text-tertiary);
    margin-right: 2px;
}

.service-price-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--text-primary);
}

.service-price-currency {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-tertiary);
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border: none;
    font-size: .9375rem;
    color: var(--text-secondary);
}

.service-features li svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: var(--accent);
}

/* Pousse le bas de carte contre le bas : tous les boutons s'alignent */
.service-cta-spacer { display: none; }

.service-card-footer { margin-top: auto; }

.klarna-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .75rem;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    background: none;
    padding: 0;
}

.klarna-name {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: .6875rem;
}

.service-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.service-cta:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--border-strong);
}

.service-card.featured .service-cta,
.service-cta.service-cta-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.service-card.featured .service-cta:hover,
.service-cta.service-cta-primary:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

/* Le bouton vert sortait de la palette : lien discret, la hierarchie reste sur "Devis" */
.service-cta-secondary {
    background: none !important;
    border: none !important;
    color: var(--accent) !important;
    padding: 0 0 12px !important;
    justify-content: flex-start !important;
    font-size: .875rem !important;
    text-decoration: none;
}

.service-cta-secondary:hover { color: var(--accent-light) !important; }

/* Le liseré colore des cartes 01/02/03 : tout en rouge, plus de jaune/vert */
.ps-card::before,
.service-card::after { background: var(--accent) !important; }

/* --------------------------------------------------------------------------
   7. POIDS LOURDS - bandeau chiffre + liste horizontale (pas une 2e grille)
   -------------------------------------------------------------------------- */
.pl-roi {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    background: linear-gradient(100deg, rgba(227, 30, 36, .14), rgba(227, 30, 36, .04));
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-card);
    padding: 28px 32px;
    margin-bottom: 48px;
}

.pl-roi-figure {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .9;
    color: var(--accent);
    white-space: nowrap;
}

.pl-roi-figure small {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 8px;
}

.pl-roi-text {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
}

.pl-roi-text span {
    display: block;
    font-size: .875rem;
    color: var(--text-tertiary);
    margin-top: 6px;
}

.pl-roi-cta {
    background: var(--accent);
    color: #fff;
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: .9375rem;
    white-space: nowrap;
    transition: background .2s ease;
}

.pl-roi-cta:hover { background: var(--accent-light); }

@media (max-width: 860px) {
    .pl-roi { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
    .pl-roi-cta { justify-self: start; }
}

.pl-list {
    border-top: 1px solid var(--border-subtle);
}

.pl-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 26px 4px;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: background .2s ease, padding .2s ease;
}

.pl-row:hover {
    background: rgba(255, 255, 255, .03);
    padding-left: 14px;
    padding-right: 14px;
}

.pl-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.pl-row-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

.pl-row-body h3 {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-primary);
    margin: 0 0 5px;
}

.pl-row-body p {
    margin: 0;
    color: var(--text-tertiary);
    font-size: .9375rem;
    line-height: 1.55;
    max-width: 68ch;
}

.pl-row-link {
    color: var(--accent);
    font-weight: 700;
    font-size: .875rem;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .pl-row { grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
    .pl-row-icon { margin-top: 2px; }
    .pl-row-link { grid-column: 2; margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   8. PASTILLES (marques PL, zones d'intervention, marques du footer)
   -------------------------------------------------------------------------- */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill-group.center { justify-content: center; }

.pill {
    display: inline-block;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 9px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pill:hover {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--text-primary);
}

.pl-brands-label {
    font-family: var(--font-display);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-tertiary);
    margin: 40px 0 16px;
    text-align: center;
}

.pl-all-link {
    display: inline-block;
    margin-top: 28px;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   9. FAQ - colonne fixe a gauche, questions alignees a gauche
   -------------------------------------------------------------------------- */
.faq-split {
    display: grid;
    grid-template-columns: .8fr 1.4fr;
    gap: 72px;
    align-items: start;
}

.faq-aside {
    position: sticky;
    top: 110px;
}

.faq-aside h2 {
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.032em;
    margin-bottom: 14px;
}

.faq-aside > p {
    color: var(--text-tertiary);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 34ch;
}

.faq-help {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 22px;
}

.faq-help p {
    margin: 0 0 14px;
    font-size: .9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.faq-help a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--accent);
    text-decoration: none;
}

.faq-help a svg { width: 17px; height: 17px; }

.faq-wrapper { max-width: none; }

.faq-category { margin-bottom: 40px; }
.faq-category:last-child { margin-bottom: 0; }

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 0;
    border: none;
}

.faq-category-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    box-shadow: none;
}

.faq-category-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--accent);
    fill: none;
}

.faq-category-title {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-tertiary);
    margin: 0;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease;
}

.faq-item:hover { border-color: var(--border-glass); }

.faq-item.active {
    background: var(--bg-card-hover);
    border-color: var(--accent-line);
}

.faq-question {
    display: grid;
    grid-template-columns: 30px 1fr 24px;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 17px 20px;
}

.faq-question h3 {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    font-size: .9875rem;
    font-weight: 600;
    text-align: left;
    margin: 0;
    letter-spacing: 0;
}

.faq-number {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 800;
    color: var(--text-tertiary);
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.faq-item.active .faq-number {
    color: var(--accent);
    background: none;
    border: none;
    box-shadow: none;
}

.faq-item.active .faq-question h3 { color: var(--text-primary); }

.faq-icon-wrapper {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    border: none;
    display: grid;
    place-items: center;
}

.faq-icon { width: 13px; height: 13px; }

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

.faq-answer-inner p {
    color: var(--text-secondary);
    font-size: .9375rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 960px) {
    .faq-split { grid-template-columns: 1fr; gap: 36px; }
    .faq-aside { position: static; }
    .faq-aside > p { max-width: none; }
    .faq-answer-inner { padding-left: 20px; }
}

/* --------------------------------------------------------------------------
   10. CONTACT - plus dense, une seule promesse
   -------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.contact-cards { display: grid; gap: 10px; }

.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: none;
}

.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    box-shadow: none;
    flex: none;
}

.contact-icon svg { width: 18px; height: 18px; stroke: var(--accent); }

.contact-card-content h3 {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-tertiary);
    margin: 0 0 3px;
    font-family: 'Inter', sans-serif;
}

.contact-card-content a,
.contact-card-content p {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-decoration: none;
}

.contact-highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 12px;
    padding: 16px 20px;
}

.contact-highlight-icon svg { width: 20px; height: 20px; stroke: var(--accent); }
.contact-highlight p { margin: 0; font-size: .9375rem; color: var(--text-secondary); }

.contact-cta-box {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.contact-cta-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 8px;
}

.contact-cta-header p {
    color: var(--text-tertiary);
    font-size: .9375rem;
    margin: 0 0 24px;
}

.contact-cta-buttons { display: grid; gap: 10px; }

.contact-cta-buttons .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
    border-radius: var(--radius-sm);
    font-size: .9375rem;
}

.contact-cta-reassurance {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8125rem;
    color: var(--text-tertiary);
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   11. ZONES + FOOTER
   -------------------------------------------------------------------------- */
.zone-section {
    padding: var(--section-y) var(--section-x) !important;
    max-width: none !important;
}

.zone-inner { max-width: 1000px; margin: 0 auto; text-align: center; }

.zone-inner h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em;
    margin-bottom: 10px !important;
}

.zone-inner > p {
    color: var(--text-tertiary) !important;
    margin-bottom: 28px !important;
}

/* Nav, menus et bandeaux etaient cales sur du quasi-noir : ils tranchaient
   trop une fois le reste de la page eclairci. */
.nav.scrolled {
    background: rgba(38, 41, 46, .92);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

.dropdown-menu,
.submenu-content {
    background: rgba(48, 51, 58, .98);
    border-color: var(--border-glass);
}

#cookieBanner { background: rgba(38, 41, 46, .98); }

.mobile-nav-bar { background: rgba(38, 41, 46, .96); }

.footer {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, #23262b 100%);
    border-top: 1px solid var(--border-subtle);
}

.footer-main { grid-template-columns: 1.4fr 1fr 2fr 1.2fr; gap: 44px; margin-bottom: 56px; }

.footer-column h3 {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

/* Les 30 marques en une colonne verticale : passage en grille compacte */
.footer-brands-grid ul,
ul.footer-brands-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-brands-grid li { margin: 0 !important; }

.footer-brands-grid a {
    font-size: .8125rem;
    color: var(--text-tertiary);
    text-decoration: none;
    line-height: 1.9;
    transition: color .2s ease;
}

.footer-brands-grid a:hover { color: var(--accent); }

@media (max-width: 1000px) {
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-brands-col { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .footer-main { grid-template-columns: 1fr; }
    .footer-brands-grid ul,
    ul.footer-brands-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   12. DIVERS
   -------------------------------------------------------------------------- */
/* Bandeau marques defilant : un peu plus discret, il ne doit pas voler la vedette */
.brands-marquee { padding: 22px 0; }

/* Barre de progression et bouton WhatsApp : au meme diapason que le reste */
.scroll-progress { height: 2px; }


/* Bloc villes vedettes (2 sept. 2026) : Martigues, Marseille, Aix */
.zone-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 26px; text-align: left; }
.zone-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; background: rgba(255,255,255,.035); border: 1px solid var(--border-subtle); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color .25s, transform .25s; }
.zone-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.zone-card-city { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.zone-card-text { color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.6; }
.zone-card-link { color: var(--accent); font-weight: 600; font-size: .9rem; margin-top: auto; }
.zone-more { color: rgba(255,255,255,.5); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px !important; }
@media (max-width: 820px) { .zone-featured { grid-template-columns: 1fr; } }