/* ==========================================================================
   LCB - TAXI/VTC — composants
   ========================================================================== */

/* Boutons ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.7rem;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--bleu { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.btn--bleu:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }

.btn--blanc { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.btn--blanc:hover { background: #E9E9EE; border-color: #E9E9EE; }

.btn--contour { background: transparent; color: var(--blanc); border-color: var(--ligne-2); }
.btn--contour:hover { border-color: var(--blanc); background: rgba(255, 255, 255, .06); }

.btn--grand { padding: 1.15rem 2.1rem; font-size: .86rem; }

/* En-tête ------------------------------------------------------------------ */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(18, 18, 22, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ligne);
}

.entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 88px;
}

.entete__logo { display: block; flex: none; }
.entete__logo img { height: 48px; width: auto; }

.nav {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}
.nav a {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-2);
    padding: .5rem 0;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.nav a:hover { color: var(--blanc); }
.nav a[aria-current="page"] { color: var(--blanc); border-bottom-color: var(--bleu-clair); }

.entete__tel { flex: none; }

.burger {
    display: none;
    flex: none;
    width: 44px; height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid var(--ligne-2);
    border-radius: var(--rayon);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.burger span {
    display: block;
    height: 1.5px;
    background: var(--blanc);
    transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 1180px) {  /* 1040 jusqu'au 26 oct. 2026 : l'en-tête débordait déjà de 46 px à 1041 px (mesuré en production, WebKit) ; avec « FAQ », de 108 px. */
    .burger { display: flex; }
    .entete__tel { display: none; }
    .entete__barre { min-height: 72px; }
    .entete__logo img { height: 40px; }

    .nav {
        position: absolute;
        inset: 100% 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--panneau);
        border-bottom: 1px solid var(--ligne);
        box-shadow: var(--ombre);
        padding: .5rem var(--gouttiere) 1.25rem;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }
    .nav a {
        padding: 1rem 0;
        border-bottom: 1px solid var(--ligne);
        font-size: .9rem;
    }
    .nav a[aria-current="page"] { border-bottom-color: var(--ligne); color: var(--bleu-clair); }
    .nav .nav__tel-mobile { display: inline-flex; margin-top: 1.25rem; border: 0; padding: 1.1rem 1.5rem; }

    .entete.est-ouvert .nav { transform: none; opacity: 1; visibility: visible; }
    .entete.est-ouvert .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .entete.est-ouvert .burger span:nth-child(2) { opacity: 0; }
    .entete.est-ouvert .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}
@media (min-width: 1181px) {
    .nav__tel-mobile { display: none; }
}

/* Héros : photo pleine largeur, panneau sombre centré posé dessus ----------- */

.heros {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2rem, 5vw, 4rem);
    overflow: hidden;
}
.heros__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 60% 45%;
}
.heros::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(18, 18, 22, .55) 0%, rgba(18, 18, 22, .35) 50%, rgba(18, 18, 22, .8) 100%);
}
.heros__panneau {
    max-width: 960px;
    margin-inline: auto;
    background: rgba(27, 27, 33, .94);
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
    text-align: center;
    box-shadow: var(--ombre);
}
.heros__panneau .surtitre { justify-content: center; }
.heros__panneau .surtitre::before { display: none; }
.heros h1 { margin-bottom: 1.25rem; }
.heros h1 em { font-style: italic; color: var(--bleu-clair); }

.heros__intro {
    font-size: var(--t-lg);
    line-height: 1.65;
    color: var(--texte-2);
    max-width: 58ch;
    margin: 0 auto 2.25rem;
}

/* Le numéro de téléphone : l'élément-clé d'un site de taxi.
   ⚠️ IL NE SE COUPE JAMAIS, NI LUI NI SES HORAIRES (recette du 20 septembre 2026 : « le numéro
   s'affiche sur 2 lignes »). Un numéro coupé en deux cesse d'être lisible d'un coup d'œil, et c'est
   le seul élément de cette page que quelqu'un recopie sur un clavier de téléphone. Le remède va
   avec la CAUSE — l'espace sécable entre les groupes de chiffres — pas avec la taille. */
.tel-geant {
    display: inline-flex;
    align-items: baseline;
    gap: .9rem;
    white-space: nowrap;
    font-family: var(--sans);
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1;
    color: var(--blanc);
    padding-bottom: .22em;
    border-bottom: 1px solid var(--ligne-2);
    transition: border-color var(--transition), color var(--transition);
}
.tel-geant:hover { border-color: var(--blanc); }
.tel-geant small {
    white-space: nowrap;
    font-size: var(--t-sm);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--texte-2);
}

.heros__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
}

@media (max-width: 720px) {
    .heros { padding-block: 0 2rem; }
    .heros__fond { position: static; height: 260px; }
    .heros::before { display: none; }
    /* ⚠️ LE CHEVAUCHEMENT ANNULAIT EXACTEMENT LE RETRAIT DU PANNEAU : `margin-top: -3rem` contre
       un `padding-top` qui vaut 3rem à cette largeur, donc le surtitre touchait le bas de la photo
       (recette : « la vignette est trop collée à l'image »). On garde le chevauchement — c'est la
       mise en page voulue — et on rend le retrait plus petit que le rembourrage. */
    .heros__panneau {
        margin-top: -2rem;
        margin-inline: var(--gouttiere);
        padding-top: 3.5rem;
        box-shadow: none;
    }
    /* Le numéro passe AU-DESSUS de ses horaires : côte à côte, la ligne dépasse la largeur d'un
       téléphone et se coupe là où elle peut. La taille suit la largeur réelle de l'écran. */
    .tel-geant {
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        font-size: clamp(1.35rem, 7.4vw, 2rem);
    }
}

/* Faits (barre de confiance) ---------------------------------------------- */

.faits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid var(--ligne);
}
.faits__item {
    padding: 1.75rem 1.75rem 1.75rem 0;
    border-right: 1px solid var(--ligne);
}
.faits__item + .faits__item { padding-left: 1.75rem; }
.faits__item:last-child { border-right: 0; }
.faits__item strong {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: .4rem;
}
.faits__item span { color: var(--texte-2); font-size: var(--t-sm); line-height: 1.6; }

@media (max-width: 860px) {
    .faits { grid-template-columns: 1fr 1fr; }
    .faits__item:nth-child(2) { border-right: 0; }
    .faits__item:nth-child(3) { padding-left: 0; border-top: 1px solid var(--ligne); }
    .faits__item:nth-child(4) { border-top: 1px solid var(--ligne); }
}
@media (max-width: 480px) {
    .faits { grid-template-columns: 1fr; }
    .faits__item { border-right: 0 !important; padding-inline: 0 !important; }
    .faits__item + .faits__item { border-top: 1px solid var(--ligne); }
}

/* Bloc éditorial : photo d'un côté, panneau texte de l'autre ---------------- */

.bloc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--panneau);
}
.bloc__visuel { position: relative; min-height: 380px; }
.bloc__visuel img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.bloc__texte {
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bloc__texte h2 { font-size: var(--t-2xl); }
.bloc__texte p { color: var(--texte-2); max-width: 52ch; }
.bloc__texte .btn { align-self: flex-start; margin-top: 1rem; }
.bloc--inverse .bloc__visuel { order: 2; }

/* Variante avec visuel détouré (la Tesla) sur aplat */
.bloc__visuel--detoure {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--panneau-2);
}
.bloc__visuel--detoure img { position: static; width: 100%; max-width: 560px; height: auto; object-fit: contain; }
.bloc__visuel--detoure::before {
    content: "";
    position: absolute;
    left: 20%; right: 20%; bottom: 24%;
    height: 14%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%);
    filter: blur(10px);
}

.bloc__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--ligne);
}
.bloc__specs div {
    padding: .9rem 0;
    border-bottom: 1px solid var(--ligne);
}
.bloc__specs strong {
    display: block;
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 400;
}
.bloc__specs span { font-size: var(--t-sm); color: var(--texte-2); }

@media (max-width: 860px) {
    .bloc { grid-template-columns: 1fr; }
    .bloc__visuel { min-height: 0; aspect-ratio: 16 / 10; }
    .bloc--inverse .bloc__visuel { order: 0; }
    .bloc__visuel--detoure { aspect-ratio: auto; }
}

/* Prestations ------------------------------------------------------------- */

.prestations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--ligne);
    border: 1px solid var(--ligne);
}
.prestation {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    background: var(--nuit);
    color: var(--texte);
    transition: background var(--transition);
}
.prestation:hover { background: var(--panneau); }
.prestation__icone {
    width: 40px; height: 40px;
    color: var(--bleu-clair);
}
.prestation__icone svg { width: 100%; height: 100%; }
.prestation h3 { margin: 0; font-size: var(--t-xl); }
.prestation p { color: var(--texte-2); font-size: var(--t-sm); line-height: 1.7; }
.prestation__lien {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blanc);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .25rem;
}
.prestation__lien::after {
    content: "";
    width: 1.6rem; height: 1px;
    background: var(--bleu-clair);
    transition: width var(--transition);
}
.prestation:hover .prestation__lien::after { width: 2.6rem; }

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

/* Zone d'intervention : sur la photo du Théâtre antique d'Orange ----------- */

.zone {
    position: relative;
    isolation: isolate;
    padding-block: var(--section);
    overflow: hidden;
}
.zone__fond {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.zone::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(18, 18, 22, .94) 0%, rgba(18, 18, 22, .84) 45%, rgba(18, 18, 22, .5) 100%);
}

.zone__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

/* Tableau des communes, façon panneau de départ */
.tableau {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.tableau caption {
    text-align: left;
    font-family: var(--serif);
    font-size: var(--t-lg);
    padding-bottom: .75rem;
    color: var(--blanc);
}
.tableau th, .tableau td {
    padding: .65rem 0;
    border-bottom: 1px solid var(--ligne);
    text-align: left;
    vertical-align: baseline;
}
.tableau th {
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-3);
}
.tableau td:first-child { font-weight: 400; color: var(--blanc); }
.tableau td:last-child, .tableau th:last-child { text-align: right; white-space: nowrap; }
.tableau td:nth-child(2) { color: var(--texte-2); font-size: var(--t-sm); }

.zone__note { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--texte-3); }
.zone__credit {
    position: absolute;
    right: var(--gouttiere); bottom: .6rem;
    font-size: .68rem;
    color: var(--texte-3);
}

@media (max-width: 860px) {
    .zone__grille { grid-template-columns: 1fr; }
    .zone::before { background: rgba(18, 18, 22, .92); }
}

/* Étapes (parcours de réservation) ---------------------------------------- */

.etapes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    counter-reset: etape;
}
.etape {
    position: relative;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ligne);
}
.etape::before {
    counter-increment: etape;
    content: "0" counter(etape);
    display: block;
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    color: var(--bleu-clair);
    margin-bottom: 1rem;
}
.etape h3 { font-size: var(--t-lg); margin: 0 0 .5rem; }
.etape p { color: var(--texte-2); font-size: var(--t-sm); }

@media (max-width: 720px) {
    .etapes { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Appel à l'action final : le seul aplat bleu du site ---------------------- */

.appel {
    background: var(--bleu-fonce);
    color: var(--blanc);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.appel__grille {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem 4rem;
    align-items: center;
}
.appel h2 { margin: 0 0 .75rem; }
.appel p { color: rgba(255, 255, 255, .82); max-width: 52ch; }
.appel__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}
.appel .tel-geant { font-size: clamp(1.7rem, 3.6vw, 2.4rem); border-color: rgba(255, 255, 255, .45); }
.appel .tel-geant small { color: rgba(255, 255, 255, .75); }
.appel .btn--blanc { color: var(--bleu-fonce); }

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

/* En-tête de page intérieure ---------------------------------------------- */

.page-tete {
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--ligne);
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(36, 52, 181, .28), rgba(36, 52, 181, 0) 70%),
        var(--nuit);
}
.page-tete__fil {
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-3);
    margin-bottom: 1.5rem;
}
.page-tete__fil a:hover { color: var(--blanc); }
.page-tete__fil span { margin-inline: .6rem; }
.page-tete h1 { max-width: 22ch; font-size: var(--t-3xl); }
.page-tete p { font-size: var(--t-lg); color: var(--texte-2); max-width: 60ch; }
.page-tete__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Contenu éditorial des pages prestations --------------------------------- */

.article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.article__corps h2 { font-size: var(--t-2xl); margin-top: 2.75rem; }
.article__corps h2:first-child { margin-top: 0; }
.article__corps h3 { font-size: var(--t-lg); margin-top: 1.75rem; }
.article__corps p, .article__corps li { max-width: 66ch; }
.article__corps ul { margin: 1rem 0 1.5rem; display: grid; gap: .6rem; }
.article__corps ul li {
    position: relative;
    padding-left: 1.6rem;
}
.article__corps ul li::before {
    content: "";
    position: absolute;
    left: 0; top: .85em;
    width: .8rem; height: 1px;
    background: var(--bleu-clair);
}
.article__corps a { color: var(--bleu-clair); font-weight: 400; }
.article__corps a:hover { text-decoration: underline; }

.encart {
    position: sticky;
    top: 112px;
    background: var(--panneau);
    border: 1px solid var(--ligne);
    padding: 2rem;
}
.encart h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.encart p { font-size: var(--t-sm); color: var(--texte-2); }
.encart .tel-geant { font-size: 1.6rem; margin: .75rem 0 1.25rem; }
.encart .btn { width: 100%; }
.encart__liste {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ligne);
    display: grid;
    gap: .6rem;
    font-size: var(--t-sm);
}
.encart__liste a { color: var(--texte-2); }
.encart__liste a:hover, .encart__liste a[aria-current="page"] { color: var(--bleu-clair); }

@media (max-width: 900px) {
    .article { grid-template-columns: 1fr; }
    .encart { position: static; }
}

/* Contact ----------------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.coordonnees { display: grid; gap: 1.75rem; }
.coordonnees__bloc { padding-left: 1.25rem; border-left: 1px solid var(--bleu-clair); }
.coordonnees__bloc h3 { font-size: var(--t-lg); margin-bottom: .35rem; }
.coordonnees__bloc p { color: var(--texte-2); font-size: var(--t-sm); }
.coordonnees__bloc a { color: var(--blanc); border-bottom: 1px solid var(--ligne-2); }
.coordonnees__bloc a:hover { border-color: var(--blanc); }

/* Champs soulignés, comme sur la référence : discrets, alignés sur le texte */
.formulaire { display: grid; gap: 1.5rem; }
.formulaire label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-2);
    margin-bottom: .3rem;
}
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="date"],
.formulaire select,
.formulaire textarea {
    width: 100%;
    font: inherit;
    font-size: var(--t-md);
    font-weight: 300;
    color: var(--blanc);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ligne-2);
    border-radius: 0;
    padding: .7rem 0;
    transition: border-color var(--transition);
}
.formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--texte-3); }
.formulaire select { color-scheme: dark; }
/* ⚠️ `color-scheme: dark` NE SUFFIT PAS, ET C'EST MESURÉ (capture d'Alexandre, 20 septembre
   2026) : la liste « Type de trajet » s'ouvrait en blanc sur blanc ALORS QUE la ligne
   ci-dessus était déjà là. Chrome sur Windows peint la liste native depuis le
   `background: transparent` du select — rendu blanc — et chaque <option> hérite du texte
   blanc. Seule une règle EXPLICITE sur `option` tient. Le même défaut, corrigé le même
   jour sur webergeron.com, y était masqué par `color-scheme` sur certains navigateurs :
   ne pas conclure de l'un sur l'autre. */
.formulaire select option { background: var(--panneau); color: var(--blanc); }
.formulaire input[type="date"] { color-scheme: dark; }
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
    outline: none;
    border-bottom-color: var(--bleu-clair);
}
.formulaire textarea { min-height: 130px; resize: vertical; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.formulaire__case { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-sm); color: var(--texte-2); }
.formulaire__case input { margin-top: .3rem; flex: none; accent-color: var(--bleu-clair); }
.formulaire__case label { font-size: var(--t-sm); font-weight: 300; letter-spacing: 0; text-transform: none; margin: 0; }
.formulaire__erreur { color: #FF8A80; font-size: var(--t-sm); margin-top: .35rem; }
.formulaire__erreur:empty { display: none; }
.formulaire__erreur ul { list-style: none; }
.formulaire .btn { justify-self: start; }
.formulaire__note { font-size: var(--t-xs); color: var(--texte-3); }
.formulaire__note a { color: var(--texte-2); text-decoration: underline; }

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

/* Messages flash ----------------------------------------------------------- */

.flash {
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--bleu-clair);
    background: var(--panneau);
    color: var(--texte);
    margin-bottom: 1.5rem;
}
.flash a { color: var(--blanc); text-decoration: underline; }
.flash--success { border-color: #5DD39E; }
.flash--error { border-color: #FF8A80; }

/* Pied de page -------------------------------------------------------------- */

.pied {
    background: #0C0C0F;
    color: var(--texte-2);
    border-top: 1px solid var(--ligne);
    padding-block: 4rem 2rem;
    font-size: var(--t-sm);
}
.pied__grille {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
}
.pied__marque img { height: 56px; width: auto; margin-bottom: 1.25rem; }
.pied__marque p { max-width: 36ch; }
.pied h3 {
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blanc);
    margin-bottom: 1rem;
}
.pied ul { display: grid; gap: .55rem; }
.pied a:hover { color: var(--blanc); }
.pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 2rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ligne);
    font-size: var(--t-xs);
    color: var(--texte-3);
}

@media (max-width: 860px) {
    .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .pied__grille { grid-template-columns: 1fr; }
}

/* Pages légales -------------------------------------------------------------- */

.legal { max-width: 72ch; }
.legal h2 { font-size: var(--t-xl); margin-top: 2.5rem; }
.legal h3 { font-size: var(--t-lg); margin-top: 1.5rem; }
.legal a { color: var(--bleu-clair); text-decoration: underline; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0 1rem; }

/* Questions fréquentes (/questions-frequentes) -------------------------------
   Lot LCB-FAQ, 26 octobre 2026. Même grammaire que le reste du site : panneaux
   anthracite, filets, Playfair pour les titres, le bleu en accent seulement.
   Les réponses sont des <details> natifs : elles s'ouvrent sans JavaScript, et
   leur texte est dans le HTML servi (Google le lit, fermé ou ouvert). */

/* ⚠️ Le h1 garde le romain : l'italique de Playfair est une police de plus (38 Ko) à attendre
   AVANT le premier affichage, et Lighthouse mobile le payait 2 points (94 contre 96 aux pages
   voisines, LCP 2,7 s contre 2,4 s). Plus bas dans la page, l'italique ne retarde plus rien. */
.page-tete h1 em { font-style: normal; color: var(--bleu-clair); }
.faq-reponse-courte h2 em { font-style: italic; color: var(--bleu-clair); }

.faq-sommaire {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2.25rem;
}
.faq-sommaire a {
    display: inline-flex;
    align-items: baseline;
    gap: .6rem;
    padding: .7rem 1.1rem;
    border: 1px solid var(--ligne-2);
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--texte);
    background: rgba(255, 255, 255, .02);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.faq-sommaire a span {
    font-family: var(--serif);
    font-style: italic;
    color: var(--bleu-clair);
}
.faq-sommaire a:hover { border-color: var(--bleu-clair); color: var(--blanc); background: rgba(143, 160, 255, .06); }

.faq-reponse-courte { padding-bottom: clamp(1rem, 3vw, 2rem); }
.faq-reponse-courte .bloc__texte h2 { font-size: var(--t-2xl); }

/* Le visuel de la réponse courte : le CHIFFRE sur téléphone, la photo derrière lui sur
   ordinateur. ⚠️ La photo n'est déclarée QUE dans la media query large : c'est ce qui l'empêche
   d'être téléchargée sur téléphone (voir le gabarit). */
.faq-visuel {
    display: flex;
    align-items: flex-end;
    padding: clamp(1.75rem, 4vw, 3rem);
    background:
        radial-gradient(80% 90% at 0% 100%, rgba(36, 52, 181, .55), rgba(36, 52, 181, 0) 70%),
        radial-gradient(60% 60% at 100% 0%, rgba(143, 160, 255, .14), rgba(143, 160, 255, 0) 70%),
        var(--panneau-2);
    overflow: hidden;
}
.faq-visuel__chiffre {
    position: relative;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(4.5rem, 16vw, 7.5rem);
    line-height: .9;
    color: var(--blanc);
    letter-spacing: -.02em;
}
.faq-visuel__chiffre small {
    display: block;
    max-width: 22ch;
    margin-top: 1rem;
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--texte-2);
}
@media (min-width: 861px) {
    .faq-visuel {
        background:
            linear-gradient(180deg, rgba(18, 18, 22, 0) 35%, rgba(18, 18, 22, .88) 100%),
            var(--photo) center / cover no-repeat,
            var(--panneau-2);
    }
    .faq-visuel__chiffre small { color: rgba(255, 255, 255, .8); }
}
@media (max-width: 860px) {
    .faq-reponse-courte .bloc__visuel { aspect-ratio: auto; min-height: 15rem; }
}

.faq-rubrique {
    padding-block: clamp(3rem, 7vw, 5.5rem);
    scroll-margin-top: 88px;
}
.faq-rubrique + .faq-rubrique { border-top: 1px solid var(--ligne); }
.faq-rubrique__grille {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    gap: clamp(2rem, 6vw, 5.5rem);
    align-items: start;
}
.faq-rubrique__tete { position: sticky; top: 120px; }
.faq-rubrique__numero {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(3rem, 6vw, 4.75rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(143, 160, 255, .55);
    margin-bottom: 1.25rem;
}
.faq-rubrique__tete h2 { font-size: var(--t-2xl); }
.faq-rubrique__tete p { color: var(--texte-2); max-width: 38ch; }
.faq-rubrique__tete .prestation__lien { margin-top: 1.25rem; }
.faq-rubrique__tete .prestation__lien:hover::after { width: 2.6rem; }

.faq-liste { border-top: 1px solid var(--ligne); }
.faq-question {
    border-bottom: 1px solid var(--ligne);
    scroll-margin-top: 104px;
}
.faq-question summary {
    position: relative;
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 1.4rem 3.25rem 1.4rem 0;
}
.faq-question summary::-webkit-details-marker { display: none; }
.faq-question summary h3 {
    margin: 0;
    font-size: var(--t-lg);
    line-height: 1.35;
    transition: color var(--transition);
}
.faq-question summary:hover h3 { color: var(--bleu-clair); }
/* Le signe + qui devient − : deux filets, le vertical se couche à l'ouverture. */
.faq-question summary::before,
.faq-question summary::after {
    content: "";
    position: absolute;
    right: .9rem;
    top: 50%;
    width: 16px;
    height: 1.5px;
    background: var(--bleu-clair);
    transition: transform var(--transition), opacity var(--transition);
}
.faq-question summary::after { transform: rotate(90deg); }
.faq-question[open] summary::after { transform: rotate(0deg); opacity: 0; }
.faq-question summary:focus-visible { outline-offset: -2px; }

.faq-question__reponse {
    padding: 0 3.25rem 1.6rem 0;
    color: var(--texte-2);
}
.faq-question__reponse p { max-width: 64ch; }
.faq-question__reponse a { color: var(--bleu-clair); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.faq-question__reponse strong { color: var(--blanc); }
.faq-question[open] { background: linear-gradient(90deg, rgba(36, 52, 181, .08), rgba(36, 52, 181, 0) 70%); }
.faq-question[open] .faq-question__reponse { animation: faq-ouverture 220ms ease; }
@keyframes faq-ouverture {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.faq-sources { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.faq-sources p {
    max-width: 78ch;
    padding: 1.25rem 1.5rem;
    border-left: 1px solid var(--bleu-clair);
    background: var(--panneau);
    font-size: var(--t-sm);
    color: var(--texte-2);
}

@media (max-width: 900px) {
    .faq-rubrique__grille { grid-template-columns: 1fr; gap: 1.5rem; }
    .faq-rubrique__tete { position: static; }
    .faq-rubrique__numero { font-size: 3rem; margin-bottom: .75rem; }
}
@media (max-width: 520px) {
    .faq-sommaire { flex-direction: column; align-items: stretch; }
    .faq-sommaire a { border-radius: var(--rayon); }
    .faq-question summary { padding-right: 2.5rem; }
    .faq-question summary::before, .faq-question summary::after { right: .25rem; }
    .faq-question__reponse { padding-right: 0; }
}