/* ==========================================================================
   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: 1040px) {
    .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: 1041px) {
    .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; }