/* ==========================================================================
   LUXE SHIELD AUTO DETAILING — surcouche de marque
   Template « Bringer » (Shadow Themes). Charge APRES config.css / style.css /
   responsive.css.

   Bringer expose toute sa palette et sa typographie en variables CSS : la
   marque se pose donc ici, sans jamais modifier les feuilles du template
   (elles restent remplacables telles quelles lors d'une mise a jour).

   Identite : noir profond + or Luxe Shield, titres en Sora, texte en Manrope.
   Distincte du hub Groupe (ivoire + or, Lora) et de la division Furniture
   (sable + teal, Poppins / Inter).
   ========================================================================== */

:root {
    /* --- Palette : le bleu du template passe a l'or du logo client --- */
    --bringer-s-body-bg: #08090B;
    --bringer-s-nav: #08090BCC;
    --bringer-s-container-bg: #14161B;
    --bringer-s-container-frosted: #14161BEE;

    --bringer-s-heading: #F7F5F0;
    --bringer-s-heading-fade: #F7F5F0C0;
    --bringer-s-text: #B9B7B1;

    --bringer-s-accent: #C9A227;
    --bringer-button-hover-bg: #E6C766;
    --bringer-s-text-accent: #E6C766;
    --bringer-s-accented-text: #14161B;

    --bringer-s-border: #C9A22733;
    --bringer-s-border-accent: #C9A22780;
    --bringer-s-border-mute: #F7F5F00D;
    --bringer-s-border-highlight: #C9A22740;
    --bringer-s-backlight: #C9A22714;
    --bringer-s-box-shadow: #00000040;

    /* --- Typographie --- */
    --bringer-t-heading-ff: 'Sora', 'Helvetica Neue', Arial, sans-serif;
    --bringer-t-heading-fw: 600;
    --bringer-t-content-ff: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --bringer-t-content-fw: 400;

    /* Sora est plus large qu'Inter : on desserre le crenage des grands titres,
       sinon les capitales se touchent. */
    --bringer-t-h1-ls: -0.035em;
    --bringer-t-h2-ls: -0.03em;
    --bringer-t-h3-ls: -0.025em;
    --bringer-t-h4-ls: -0.02em;

    /* --- Marque --- */
    --ls-gold: #C9A227;
    --ls-gold-light: #E6C766;
    --ls-ink: #08090B;
}

/* Le texte sur fond or doit rester lisible : Bringer part du principe que
   l'accent est fonce, le notre est clair. */
.bringer-button,
button[type="submit"],
.bringer-square-button {
    color: var(--bringer-s-accented-text);
    font-weight: 600;
}

/* ... mais le bouton secondaire a un fond transparent : lui appliquer la meme
   couleur sombre rendait le libelle illisible sur le fond noir. */
a.bringer-button.is-secondary,
.bringer-button.is-secondary,
.bringer-square-button.is-secondary {
    color: var(--bringer-s-heading);
    border-color: var(--bringer-s-border-accent);
    /* Le gabarit ne rend transparent que `a.bringer-button.is-secondary` : un
       <button> portant les memes classes gardait le fond or du bouton
       principal, et les deux boutons devenaient indiscernables. */
    background: transparent;
}

a.bringer-button.is-secondary:hover,
.bringer-button.is-secondary:hover {
    color: var(--ls-ink);
    background: var(--ls-gold);
    border-color: var(--ls-gold);
}

.bringer-accent,
.bringer-highlight {
    color: var(--ls-gold);
}

/* --- Filet de securite sur les animations d'apparition ---
   Bringer met tout `[data-appear]` a `opacity: 0` et compte sur son JS pour
   ajouter `.in-view`. Si ce JS ne s'execute pas (erreur, blocage, connexion
   coupee), la page reste blanche. On rend donc le contenu visible par defaut
   tant que le template n'a pas signale qu'il a pris la main (`body.is-loaded`),
   et un filet cote JS repasse derriere apres quelques secondes. */
html.no-js [data-appear],
html.no-js [data-split-appear] {
    opacity: 1 !important;
    transform: none !important;
}

/* --- Bandeau promotionnel --- */
.ls-promo-ribbon {
    position: relative;
    z-index: 20;
    background: var(--ls-gold);
    color: var(--ls-ink);
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.ls-promo-ribbon a { color: var(--ls-ink); text-decoration: underline; }

/* --- Selecteur de langue (liste deroulante) --- */
.ls-lang { position: relative; }

.ls-lang > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    list-style: none;
    cursor: pointer;
    padding: 7px 12px;
    border: 1px solid var(--bringer-s-border-mute);
    border-radius: 999px;
    font-size: 13px;
    color: var(--bringer-s-heading);
    transition: border-color .25s, background-color .25s;
    user-select: none;
}

.ls-lang > summary::-webkit-details-marker { display: none; }
.ls-lang > summary:hover { border-color: var(--ls-gold); }

.ls-lang-code { letter-spacing: .08em; font-weight: 600; }

.ls-lang-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ls-gold);
    transition: transform .25s;
}

.ls-lang[open] > summary { border-color: var(--ls-gold); background: var(--bringer-s-container-bg); }
.ls-lang[open] .ls-lang-caret { transform: rotate(180deg); }

.ls-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bringer-s-container-frosted);
    border: 1px solid var(--bringer-s-border-mute);
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
    backdrop-filter: blur(12px);
}

.ls-lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--bringer-s-text);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.ls-lang-menu a:hover { background: var(--bringer-s-backlight); color: var(--bringer-s-heading); }
.ls-lang-menu a.is-active { color: var(--ls-gold); font-weight: 600; }
.ls-lang-flag { font-size: 15px; line-height: 1; }

/* --- Logo : le logo client est un blason haut, pas un mot-symbole large --- */
.bringer-logo img { width: auto; height: 48px; max-width: none; }
.bringer-logo.footer-logo img { height: 96px; }

@media (max-width: 991px) {
    .bringer-logo img { height: 40px; }
    .bringer-logo.footer-logo img { height: 76px; }
}

/* --- Prix : « sur devis » ne doit pas ressembler a un tarif barre --- */
.ls-price-quote {
    color: var(--bringer-s-heading-fade);
    font-family: var(--bringer-t-content-ff);
    font-size: 20px;
    letter-spacing: 0;
}

/* --- Grille de tarifs par gabarit de vehicule --- */
.ls-tier-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-top: 1px solid var(--bringer-s-border-mute);
}

.ls-tier-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bringer-s-border-mute);
}

.ls-tier-list span { color: var(--bringer-s-text); font-size: 14px; }
.ls-tier-list b { color: var(--bringer-s-heading); font-weight: 600; }

/* --- Galerie --- */
.ls-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ls-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--bringer-s-border-mute);
}

.ls-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ls-gallery-item:hover img { transform: scale(1.05); }

.ls-gallery-caption {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--bringer-s-heading-fade);
}

@media (max-width: 1024px) { .ls-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ls-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Boutique --- */
.ls-product-media {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--bringer-s-container-bg);
}

.ls-product-media img { width: 100%; height: 100%; object-fit: cover; }

.ls-cart-table { width: 100%; border-collapse: collapse; }

.ls-cart-table th,
.ls-cart-table td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--bringer-s-border-mute);
    text-align: left;
    vertical-align: middle;
}

.ls-cart-table th { color: var(--bringer-s-heading); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.ls-cart-table .is-right { text-align: right; }
.ls-cart-table img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }

/* --- Encart d'avertissement (devis, absence de paiement en ligne) --- */
.ls-note {
    background: var(--bringer-s-container-bg);
    border-left: 2px solid var(--ls-gold);
    border-radius: 8px;
    padding: 18px 22px;
    color: var(--bringer-s-text);
}

/* --- Messages de formulaire --- */
.ls-alert { border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; }
.ls-alert-success { background: #1B2A1E; color: #BFE5C6; border: 1px solid #2F6B3A; }
.ls-alert-error { background: #2A1B1B; color: #F0C2C2; border: 1px solid #6B2F2F; }
.ls-alert ul { margin: 0; padding-left: 18px; }

/* --- Formulaires : Bringer stylise deja input/textarea, on ajoute le select --- */
.bringer-form-content select {
    width: 100%;
    background: var(--bringer-s-container-bg);
    border: 1px solid var(--bringer-s-border-mute);
    border-radius: 8px;
    color: var(--bringer-s-heading);
    font-family: var(--bringer-t-content-ff);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.bringer-form-content .ls-field-error { color: #F0A0A0; font-size: 13px; margin: -10px 0 14px; }

/* --- Contenu editorial (descriptions riches, pages legales) --- */
.ls-rich-text h3 { margin-top: 40px; }
.ls-rich-text ul { padding-left: 20px; }
.ls-rich-text li { margin-bottom: 8px; }
.ls-rich-text a { color: var(--ls-gold); }

/* --- Avis clients --- */
.ls-stars {
    display: inline-flex;
    gap: 3px;
    font-size: 17px;
    line-height: 1;
    margin-bottom: 16px;
}

/* Vert : c'est le code couleur que le public associe aux avis (Google,
   Trustpilot). L'or de la marque servirait mal ici, il se confondrait avec les
   accents de la page. */
.ls-stars span { color: rgba(245, 247, 250, .22); }
.ls-stars span.is-on { color: #2FBF71; }

.ls-review-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--bringer-s-border-mute);
}

.ls-review-author img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--bringer-s-border);
}

.ls-review-author h6 { margin: 0 0 2px; font-size: 16px; }

.ls-review-source {
    display: block;
    font-size: 12px;
    color: var(--bringer-s-heading-fade);
    letter-spacing: .04em;
}

/* --- Photo de prestation au survol (liste detaillee de l'accueil) ---
   Le template occupe deja ::before et ::after de chaque <li> (halo et filet) :
   l'image vit donc dans un element dedie. --- */
.bringer-detailed-list li { overflow: hidden; }

.ls-service-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .45s ease, transform .6s ease;
    pointer-events: none;
}

/* Voile degrade : sans lui, le titre blanc passe sur les zones claires de la
   photo et devient illisible. */
.ls-service-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 9, 11, .94) 0%, rgba(8, 9, 11, .82) 45%, rgba(8, 9, 11, .62) 100%);
}

.bringer-detailed-list li:hover .ls-service-bg {
    opacity: 1;
    transform: scale(1);
}

/* Le contenu et le lien de la ligne restent au-dessus de l'image. */
.bringer-detailed-list li > div { position: relative; z-index: 1; }
.bringer-detailed-list li > a { z-index: 2; }

@media (hover: none) {
    /* Sur ecran tactile il n'y a pas de survol : on montre l'image en continu,
       tres attenuee, plutot que de la rendre inaccessible. */
    .ls-service-bg { opacity: .35; transform: none; }
}

/* Le menu de langues est une <ul> : on neutralise les puces et marqueurs que
   le template applique globalement aux listes. */
.ls-lang-menu,
.ls-lang-menu li {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
}

.ls-lang-menu li::before,
.ls-lang-menu li::marker {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   PIED DE PAGE — debordement, moyens de paiement, signature
   ========================================================================== */

/* L'adresse e-mail (38 caracteres sans espace) ne peut pas etre coupee par le
   navigateur : elle depassait de sa colonne et se superposait a l'adresse
   postale voisine. On autorise la cesure, et on empeche par principe tout
   contenu du pied de page de deborder de sa colonne. */
#bringer-footer .bringer-menu-widget a,
#bringer-footer .bringer-info-description,
#bringer-footer .ls-footer-bottom {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#bringer-footer .bringer-widget { min-width: 0; }

/* --- Barre du bas : trois groupes sur une ligne, empiles sur mobile --- */
.ls-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
}

.ls-footer-bottom-center { display: flex; justify-content: center; }

.ls-footer-bottom-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-left: auto;
}

.ls-footer-sep { opacity: .45; }

@media (max-width: 767px) {
    .ls-footer-bottom { justify-content: center; text-align: center; }
    .ls-footer-bottom-right { margin-left: 0; justify-content: center; }
}

/* --- Marques Visa / Mastercard ---
   Pastille blanche : les chartes des deux reseaux interdisent de poser leurs
   logos directement sur un fond sombre. */
.ls-pay { display: inline-flex; align-items: center; gap: 8px; }

.ls-pay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 27px;
    padding: 3px 5px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.ls-pay-chip svg { display: block; width: 100%; height: 100%; }

/* --- Signature Rezolu Soft --- */
.ls-credit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.ls-credit-by { opacity: .55; }

/* Le bleu marine du logo disparaitrait sur ce pied de page noir : la marque
   herite donc de la couleur du texte (ivoire ici), l'orange reste identique. */
.ls-credit-mark {
    display: inline-block;
    width: 30px;
    color: var(--bringer-s-heading-fade, #F7F5F0C0);
}

.ls-credit-mark svg { display: block; width: 100%; height: auto; }

.ls-credit-name { font-weight: 600; letter-spacing: .2px; }
.ls-credit-name-1 { color: #F5A623; }
.ls-credit-name-2 { color: var(--bringer-s-heading, #F7F5F0); }
.ls-credit-dot { color: #F5A623; }

/* ==========================================================================
   PAGE CONTACT — formulaire
   ========================================================================== */

.lsa-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 30px;
}

.lsa-fieldset:last-of-type { margin-bottom: 22px; }

/* Le titre de groupe porte le filet : il separe les deux blocs sans ajouter
   un trait decoratif de plus. */
.lsa-legend {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    font-family: var(--bringer-t-content-ff);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bringer-s-accent);
}

.lsa-legend::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--bringer-s-border-mute);
}

.lsa-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}

.lsa-field { display: flex; flex-direction: column; min-width: 0; }

/* Le gabarit met une marge basse de 24px sur tout input/textarea qui n'est
   pas le dernier enfant de son parent : combinee au row-gap de la grille,
   l'ecart doublait. La grille porte deja l'espacement, le champ n'en a plus
   besoin. */
.lsa-field-grid input,
.lsa-field-grid select { margin-bottom: 0; }

/* Le gabarit definit `.ls-field-error` avec une marge negative pensee pour
   l'ancienne mise en page (un seul champ par ligne) : dans la grille a deux
   colonnes, elle collait le message d'erreur contre le champ suivant. */
.lsa-field .ls-field-error,
.lsa-fieldset > .lsa-field .ls-field-error {
    margin: 6px 0 0;
}

.lsa-req { color: var(--bringer-s-accent); }

/* Le select n'est plus enveloppe dans `.bringer-form-content` (ce wrapper
   causait le bug de largeur decrit plus haut) : sa regle de style doit donc
   etre reportee ici, sur le nouveau conteneur de champ. */
.lsa-field select {
    width: 100%;
    background: var(--bringer-s-container-bg);
    border: 1px solid var(--bringer-s-border-mute);
    border-radius: var(--bringer-input-br);
    color: var(--bringer-s-heading);
    font-family: var(--bringer-t-content-ff);
    font-size: var(--bringer-t-input-fs);
    padding: var(--bringer-input-spacing);
}

/* Etat d'erreur : la couleur seule ne suffit pas — le message existant
   (`.ls-field-error`) est desormais lie au champ par aria-describedby. */
input.is-invalid,
textarea.is-invalid {
    border-color: #B3453E;
}

.lsa-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 4px;
}

.lsa-form-foot button { margin: 0; }

.lsa-form-note {
    margin: 0;
    font-size: 13px;
    color: var(--bringer-s-text);
}

@media (max-width: 767px) {
    .lsa-field-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE DEVIS — selecteur de prestations et champ photo
   ========================================================================== */

/* Grille de cases a cocher illustrees : chaque prestation est une carte
   entiere cliquable (le <label> englobe la case), pas juste la petite case
   elle-meme — plus facile a viser au doigt sur mobile. */
.lsa-service-picks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lsa-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--bringer-s-border-mute);
    border-radius: var(--bringer-input-br);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.lsa-pick:hover { border-color: var(--bringer-s-accent); }

.lsa-pick.is-selected {
    border-color: var(--bringer-s-accent);
    background: color-mix(in srgb, var(--bringer-s-accent) 8%, transparent);
}

/* La vraie case a cocher reste dans le flux (accessible au clavier), juste
   redimensionnee : c'est `.lsa-pick-check` qui porte l'etat visuel. */
.lsa-pick input[type="checkbox"] {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--bringer-s-accent);
}

.lsa-pick-media {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: calc(var(--bringer-input-br) - 2px);
    background-color: var(--bringer-s-container-bg);
    background-size: cover;
    background-position: center;
    margin-left: 22px;
}

.lsa-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lsa-pick-cat {
    font-family: var(--bringer-t-content-ff);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bringer-s-text);
}

.lsa-pick-name {
    font-family: var(--bringer-t-heading-ff);
    font-size: 14px;
    color: var(--bringer-s-heading);
    line-height: 1.3;
}

.lsa-photo-field input[type="file"] {
    width: 100%;
    background: var(--bringer-s-container-bg);
    border: 1px dashed var(--bringer-s-border-mute);
    border-radius: var(--bringer-input-br);
    color: var(--bringer-s-text);
    font-family: var(--bringer-t-content-ff);
    font-size: 13px;
    padding: 14px;
}

.lsa-photo-field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 0;
    border-radius: calc(var(--bringer-input-br) - 2px);
    background: var(--bringer-s-accent);
    color: #08090B;
    font-family: var(--bringer-t-content-ff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .lsa-service-picks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE 404
   Le disque de polissage remplace le zero et tourne lentement ; un reflet
   balaie les chiffres. Tout est en CSS : une page d'erreur doit s'afficher
   meme quand le reste du site va mal, elle ne telecharge donc aucune image.
   ========================================================================== */

.ls-404 {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 20px 60px;
    padding: 60px 0 90px;
}

/* --- Les chiffres --- */
.ls-404-art {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.ls-404-digit {
    font-family: var(--bringer-t-heading-ff);
    font-weight: 700;
    font-size: clamp(88px, 13vw, 180px);
    line-height: .9;
    color: var(--bringer-s-heading);
    letter-spacing: -.04em;
}

.ls-404-pad {
    width: clamp(78px, 11.5vw, 158px);
    aspect-ratio: 1;
    display: block;
    animation: ls-404-spin 9s linear infinite;
}

.ls-404-pad svg { display: block; width: 100%; height: 100%; }

.ls-404-pad-rim { fill: #1A1D23; }
.ls-404-pad-face { fill: var(--bringer-s-accent); }
.ls-404-pad-inner { fill: #E6C766; }
.ls-404-pad-hub { fill: #14161B; }

.ls-404-pad-grooves {
    stroke: rgba(20, 22, 27, .35);
    stroke-width: 3;
    stroke-linecap: round;
}

/* Le reflet : une bande claire qui traverse les chiffres en diagonale. */
.ls-404-art::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -60%;
    width: 40%;
    height: 140%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .16), transparent);
    transform: skewX(-18deg);
    animation: ls-404-gloss 5.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ls-404-spin {
    to { transform: rotate(360deg); }
}

@keyframes ls-404-gloss {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}

/* --- Le texte --- */
.ls-404-title {
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.15;
    margin: 0 0 14px;
    text-wrap: balance;
}

.ls-404-lead {
    font-size: 17px;
    color: var(--bringer-s-text);
    max-width: 52ch;
    margin: 0 0 28px;
}

.ls-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}

.ls-404-actions .bringer-button { margin: 0; }

.ls-404-links {
    border-top: 1px solid var(--bringer-s-border-mute);
    padding-top: 22px;
}

.ls-404-links .bringer-label { display: block; margin-bottom: 12px; }

.ls-404-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
}

/* Le gabarit pose `list-style: disc` sur le `li` lui-meme : le neutraliser
   sur le `ul` ne suffit pas. */
.ls-404-links li { list-style: none; }

.ls-404-links a {
    color: var(--bringer-s-heading-fade);
    transition: color .25s ease;
}

.ls-404-links a:hover,
.ls-404-links a:focus-visible { color: var(--bringer-s-accent); }

.ls-404-report {
    margin: 0;
    padding-top: 22px;
    font-size: 14px;
    color: var(--bringer-s-text);
}

.ls-404-report a { color: var(--bringer-s-accent); text-underline-offset: 3px; }

@media (max-width: 991px) {
    .ls-404 {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 0 70px;
    }
}

/* Une page d'erreur ne doit surtout pas provoquer de gene : ni rotation ni
   reflet des que le systeme demande a limiter les animations. */
@media (prefers-reduced-motion: reduce) {
    .ls-404-pad { animation: none; }
    .ls-404-art::after { animation: none; opacity: 0; }
}

/* --- Selecteur de langue mobile (bug corrige) ---
   `.bringer-header-inner` (qui porte le selecteur de langue) passe a
   `display:none` sous 960px, et le JS du menu mobile ne clone que les <li>
   du menu principal dans le tiroir : la langue restait donc impossible a
   changer sur telephone. Cette seconde instance vit dans la barre mobile
   elle-meme, a cote du bouton hamburger, toujours visible. */
.ls-mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}