/* ============================================
   GÉNÉRALE CARROSSERIE AUTO CHABI DJAFAR
   Feuille de style. Les valeurs (couleurs, tailles)
   sont reprises de la maquette « Chabi v3 ».
   ============================================ */

/* --------------------------------------------
   PALETTE — écrite UNE fois ici, appelée
   ailleurs avec var(--nom).
-------------------------------------------- */
:root {
    --bleu: #16283f;           /* bleu profond : titres, contact, boutons */
    --bleu-nuit: #222a3c;      /* fond du hero */
    --bleu-logo: #2f4b68;      /* le nom du magasin dans l'en-tête */
    --bleu-clair: #8ea4c2;     /* accent : 2e ligne du slogan, eyebrow, icônes */
    --encre: #1c2430;          /* texte principal */
    --encre-douce: #3d4756;    /* liens du menu, étiquettes */
    --gris-fond: #eef0f3;      /* fond de la page */
    --gris-carte: #e8ecf2;     /* fonds neutres des blocs */
    --gris-doux: #f5f6f9;      /* fond des boutons au survol */
    --gris-zebre: #fafbfc;     /* une ligne sur deux du tableau de la fiche */
    --bordure-douce: #e6e9ee;  /* contour discret (tableau de la fiche) */
    --gris-texte: #6b7684;
    --gris-clair: #8b95a3;
    --blanc: #ffffff;
    --bordure: #dfe3e9;
    --vert: #2e7d54;           /* pastille "en stock" + bouton devis */
    --vert-fond: #e2efe5;
    --whatsapp: #25d366;       /* le vert officiel de la marque WhatsApp */
    --whatsapp-encre: #073b25; /* le texte posé DESSUS (vert très foncé) */
    --ambre: #8a6a1f;          /* pastille "sur commande" */
    --ambre-fond: #f2ead6;

    --ombre-carte: 0 16px 36px rgba(22, 40, 63, 0.14);
    --ombre-forte: 0 22px 48px rgba(22, 40, 63, 0.22);
}

/* La largeur inclut bordures et padding : sans ça les boîtes débordent. */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;   /* défilement doux depuis le menu */
}

body {
    font-family: "Archivo", Arial, sans-serif;
    background-color: var(--gris-fond);
    color: var(--encre);
    margin: 0;
    line-height: 1.5;
}

/* Les titres prennent la police d'affichage épaisse */
h1, h2, h3 {
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-weight: 800;
}

a, button, select, input {
    transition: all 0.2s ease;
}

/* Le lien d'évitement : rangé au-dessus de l'écran, il redescend dès
   qu'il reçoit le focus (première pression sur Tab). */
.lien-evitement {
    position: absolute;
    left: 12px;
    top: -60px;                /* hors de l'écran tant qu'on ne l'appelle pas */
    z-index: 100;              /* au-dessus de tout, même du header */
    background-color: var(--bleu);
    color: var(--blanc);
    padding: 12px 18px;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: top 0.2s;
}

.lien-evitement:focus {
    top: 0;
}

/* Contour de focus pour la navigation au clavier.
   « :focus-visible » ne se déclenche QUE si le navigateur juge que
   l'utilisateur est au clavier : la souris ne provoque donc pas de
   contour disgracieux, mais la touche Tab reste toujours suivable. */
:focus-visible {
    outline: 3px solid var(--bleu-clair);
    outline-offset: 2px;
}

/* Deux largeurs réutilisées partout : le contenu ne s'étale jamais
   au-delà, et reste centré (margin auto). */
.conteneur {
    max-width: 1200px;
    margin: 0 auto;
}

.conteneur-etroit {
    max-width: 900px;
    margin: 0 auto;
}


/* --------------------------------------------
   1. EN-TÊTE — fond BLANC
-------------------------------------------- */
header {
    background-color: transparent; /* on voit le fond gris de la page autour */
    padding: 14px 20px;        /* l'air qui détache la carte des bords */
    position: sticky;          /* reste collé en haut quand on descend */
    top: 0;
    z-index: 40;
}

/* Trois colonnes : menu | enseigne | actions.
   Les colonnes des bords valent « 1fr » chacune, donc elles font
   toujours la MÊME largeur : l'enseigne du milieu reste parfaitement
   centrée dans la page, même si le menu et les boutons n'ont pas la
   même taille (c'est ce qu'un simple flex ne sait pas faire). */
.entete-inner {
    background-color: var(--blanc);
    border-radius: 22px;       /* les coins bien ronds de la maquette */
    box-shadow: 0 6px 22px rgba(22, 40, 63, 0.08);  /* ombre très douce */
    padding: 14px 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

/* Nom + tagline empilés l'un sous l'autre, au centre */
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1;
}

/* La ligne « métier » est la plus grosse : c'est elle qu'on lit de
   loin, comme sur la devanture du magasin. clamp() la rétrécit tout
   seul sur les écrans étroits (min 17px, idéal 2.2 % de la largeur,
   max 25px) pour qu'elle ne pousse jamais le menu ni les boutons. */
.logo-tagline {
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-size: clamp(17px, 2.2vw, 25px);
    font-weight: 800;
    letter-spacing: 1.5px;     /* espace les lettres */
    color: var(--bleu-logo);
    margin-bottom: 4px;
    white-space: nowrap;       /* l'enseigne tient sur une seule ligne */
}

/* Le nom propre passe en second : plus petit, plus clair, très espacé */
.logo-nom {
    display: flex;             /* pour poser un trait de chaque côté */
    align-items: center;       /* traits à mi-hauteur du texte */
    gap: 10px;                 /* espace entre le trait et le texte */
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--encre-douce);
}

/* Les 2 traits : du vide (content: "") de 26 px de large et 1 px de
   haut, coloré comme les bordures. Ce ne sont PAS des images. */
.logo-nom::before,
.logo-nom::after {
    content: "";
    width: 26px;
    height: 1px;
    background-color: var(--bordure);
}

/* Le menu est collé à GAUCHE de sa colonne, les actions à DROITE
   de la leur : les deux poussent vers l'extérieur de l'en-tête. */
nav {
    display: flex;
    gap: 26px;
    justify-self: start;
}

nav a {
    color: var(--encre-douce);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
}

nav a:hover {
    color: var(--bleu);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 10px;
}

/* Les 2 boutons ont la même hauteur (44px) pour s'aligner parfaitement */
.lang-btn,
.cart-btn {
    height: 44px;
    border-radius: 10px;
    background-color: var(--blanc);
    color: var(--bleu);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    white-space: nowrap;       /* jamais de retour à la ligne dedans */
}

.lang-btn {
    border: 1.5px solid var(--bordure);
    padding: 0 16px;
    font-weight: 700;
}

.lang-btn:hover {
    border-color: var(--bleu);
}

/* Le panier a une bordure foncée : c'est l'action importante */
.cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--bleu);
    padding: 0 18px;
    font-weight: 600;
}

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

/* Petit sursaut du panier quand on vient d'ajouter une pièce :
   le JS pose la classe « ajout » un court instant. */
.cart-btn.ajout {
    animation: sursaut 0.35s;
}

@keyframes sursaut {
    50% { transform: scale(1.12); }
}


/* --------------------------------------------
   2. ACCUEIL (hero)
-------------------------------------------- */
.hero {
    background-color: var(--bleu-nuit);
    color: var(--blanc);
    /* 100vh = toute la hauteur de l'écran, moins la hauteur de l'en-tête */
    min-height: calc(100vh - 119px);
    display: flex;
    align-items: center;       /* centre le bloc verticalement */
    padding: 52px 28px 32px;
}

.hero .conteneur {
    width: 100%;
}

.hero-centre {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* Eyebrow avec un petit trait de chaque côté (dessiné en CSS) */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bleu-clair);
}

.hero-eyebrow::before,
.hero-eyebrow::after {
    content: "";               /* crée les 2 traits */
    width: 26px;
    height: 2px;
    background-color: var(--bleu-clair);
}

/* Ville du magasin, juste sous l'eyebrow */
.hero-lieu {
    display: flex;             /* flex tout court = prend sa propre ligne */
    justify-content: center;   /* ...donc il faut recentrer son contenu */
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #cdd8e6;
}

.hero h1 {
    /* clamp = min, valeur idéale, max → grossit avec la largeur de l'écran */
    font-size: clamp(42px, 5.2vw, 68px);
    line-height: 1.07;
    letter-spacing: -1px;
    margin: 18px 0 0;
}

/* Slogan bicolore : chaque span occupe sa propre ligne */
.slogan-1,
.slogan-2 {
    display: block;
}

.slogan-1 { color: #dfe7f2; font-weight: 700; }
.slogan-2 { color: var(--bleu-clair); font-weight: 800; }

.hero-sous-titre {
    max-width: 52ch;           /* limite à ~52 caractères par ligne */
    margin: 20px auto 30px;
    color: #9db0c7;
    font-size: 17px;
    line-height: 1.62;
}

.hero-boutons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 440px;          /* garde les 2 boutons côte à côte, pas trop larges */
    margin: 0 auto;
}

.bouton-blanc,
.bouton-contour {
    flex: 1;                   /* les 2 boutons se partagent la largeur à égalité */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 36px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}

.bouton-blanc {
    background-color: var(--blanc);
    border: 1.5px solid var(--blanc);
    color: var(--bleu);
    font-weight: 700;
}

.bouton-blanc:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.bouton-contour {
    background-color: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: var(--blanc);
    font-weight: 600;
    gap: 9px;
}

.bouton-contour:hover {
    border-color: var(--blanc);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Bandeau de réassurance sous les boutons : « Livraison dans les
   58 wilayas ». Une pastille claire, discrète mais lisible sur le
   fond bleu nuit. inline-flex = la pastille ne fait que la largeur
   de son texte, au lieu de barrer tout l'écran. */
.hero-livraison {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 24px auto 0;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.06);
    font-size: 13.5px;
    font-weight: 600;
    color: #cdd8e6;
}

/* Bande "grandes marques", séparée par un filet clair */
/* Le titre était À CÔTÉ de la liste des marques : ça tenait tant
   qu'il n'y en avait que 4. Avec 26, la liste étranglait le titre
   dans un coin. On les empile : le titre sur sa ligne, la liste
   sur toute la largeur en dessous. */
.hero-marques {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.hero-marques-titre {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.45);
}

/* Deux écarts différents : 10px entre les LIGNES (au cas où la
   bande replie sur un écran étroit) et 22px entre les MOTS d'une
   même ligne. Avec 7 noms elle tient sur une seule ligne. */
.hero-marques-liste {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    align-items: baseline;
}

.hero-marques-liste span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.42);
}

/* « et 19 autres » : c'est une note, pas une marque. Plus discret
   et sans majuscules forcées, pour qu'on ne le lise pas comme un
   nom de constructeur de plus. */
.hero-marques-autres {
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    color: rgba(255, 255, 255, 0.28) !important;
    font-style: italic;
}


/* --------------------------------------------
   3. CATALOGUE
-------------------------------------------- */
/* Le 1er chiffre = l'espace AU-DESSUS. Il sépare le bloc bleu de
   l'accueil du catalogue : sans lui, les deux se touchaient et le
   catalogue semblait collé au bas de l'écran d'accueil. 76px
   faisaient trop : le titre « Catalogue » arrivait bien après le
   bord du bleu, on croyait la page vide en descendant. */
#catalogue {
    padding: 44px 28px 80px;
}

/* Titre à gauche, compteur à droite, sur la même ligne */
.catalogue-entete {
    display: flex;
    align-items: baseline;     /* aligne sur la ligne d'écriture, pas les boîtes */
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.catalogue-entete h2 {
    color: var(--bleu);
    font-size: 32px;
    margin: 0;
}

.compteur {
    font-size: 14px;
    color: var(--gris-texte);
}

/* --------------------------------------------
   4 bis. LE SÉLECTEUR DE VÉHICULE

   C'est le premier — et pendant un moment le seul — bloc du
   catalogue. Il doit donc se suffire à lui-même : la question
   en gros, les marques en vignettes, et rien d'autre à l'écran
   pour distraire.

   ⚠️ Pas de « display » sur .selecteur ni sur #resultats :
   sinon l'attribut hidden du HTML n'arriverait plus à les
   cacher, et les deux moitiés s'afficheraient en même temps.
-------------------------------------------- */

.selecteur {
    background-color: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 26px;
}

/* Le fil du haut : « Étape 1 sur 2 », et dès l'étape 2 le bouton
   Retour suivi de la marque déjà retenue. */
.selecteur-fil {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--gris-texte);
}

/* Le rappel de la marque choisie (« Renault »).

   C'est un vrai <button> : il ramène à l'étape 1, pour que le
   client qui s'est trompé de marque n'ait pas à tout reprendre.
   Il faut donc effacer l'apparence que le navigateur donne aux
   boutons, tout en gardant le curseur main qui annonce le clic. */
.selecteur-choisi {
    border: none;
    font-family: inherit;
    font-size: inherit;
    background-color: var(--gris-carte);
    color: var(--bleu);
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 100px;
    cursor: pointer;
}

.selecteur-choisi:hover {
    background-color: var(--bordure);
}

.selecteur-retour {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bleu);
    cursor: pointer;
    text-decoration: underline;
}

/* La question de l'étape en cours. Elle est la plus grosse chose
   de la page à ce moment-là : c'est la seule action possible. */
.selecteur-question {
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-weight: 700;
    font-size: 23px;
    color: var(--bleu);
    margin: 0 0 6px;
}

/* La phrase qui dit ce qui se passera après le clic. Sans elle,
   le client ne sait pas pourquoi on lui demande sa voiture avant
   de lui montrer quoi que ce soit. */
.selecteur-aide {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--gris-texte);
}

/* Même principe que la grille du catalogue : autant de colonnes
   que la largeur permet. */
.selecteur-choix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 12px;
}

/* Une vignette = un vrai <button> (donc utilisable au clavier,
   sans rien avoir à ajouter). */
.vignette-choix {
    background-color: var(--blanc);
    border: 1.5px solid var(--bordure);
    border-radius: 14px;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;    /* pictogramme, puis nom, puis nombre */
    align-items: center;       /* centré de gauche à droite… */
    justify-content: center;   /* …et de haut en bas : la vignette sans
                                  pictogramme reste alignée avec les autres */
    gap: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;          /* noms sur 2 lignes : elles se serrent */
    color: var(--encre);
    cursor: pointer;
    text-align: center;
}

.vignette-choix:hover {
    border-color: var(--bleu);
    transform: translateY(-3px);
    box-shadow: var(--ombre-carte);
}

.vignette-icone {
    font-size: 27px;
    line-height: 1;
}

.vignette-nombre {
    font-size: 12px;
    font-weight: 500;
    color: var(--gris-texte);
}

/* Étape 1, marque AVEC logo : le dessin est posé dans un carré de
   56 px, sur un gris très clair. Les logos sont des SVG à fond
   transparent : ce gris n'est plus là pour rattraper un fond mal
   détouré, il sert à donner à toutes les marques la MÊME pastille.
   Sans lui, un logo noir (Renault, Peugeot) écraserait un logo
   clair (Volvo, Toyota), et la grille perdrait son unité.

   Le « padding » est ce qui sépare une grille propre d'une grille
   qui déborde : sans lui, les logos carrés (BMW, Mercedes)
   toucheraient les bords pendant que les logos larges (Iveco,
   Jeep, Land Rover) resteraient perdus au milieu. Avec 6 px,
   tous respirent de la même façon.

   « contain » garde le logo entier, jamais déformé, quelles que
   soient ses proportions d'origine. */
.vignette-logo .vignette-icone {
    width: 56px;
    height: 56px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    border-radius: 13px;
    overflow: hidden;
}

.vignette-logo .vignette-icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Marque ou modèle dont AUCUNE pièce n'est encore en ligne.

   La vignette reste cliquable — le magasin commande sur demande,
   et le client a le droit de demander — mais elle s'efface pour
   que l'œil aille d'abord vers ce qui est disponible tout de
   suite. Au survol, elle redevient pleinement lisible : rien
   n'est barré, rien n'est interdit. */
.vignette-vide {
    opacity: 0.55;
}

.vignette-vide:hover {
    opacity: 1;
}

/* Étape 3, une année ou une génération (« 2013+ », « Clio 4 »).

   Pas de pictogramme à cette étape : l'année EST le dessin. Elle
   est donc écrite plus grand que le nom d'un modèle, et la
   vignette est moins haute — une grille d'années tient ainsi sur
   un écran de téléphone sans faire défiler. */
.vignette-annee {
    padding: 14px 10px;
    font-size: 18px;
    letter-spacing: 0.2px;
}

/* Étape 1, marque SANS logo : on dessine un rond bleu avec son
   initiale, en attendant son propre fichier. */
.vignette-marque .vignette-icone {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--bleu);
    color: var(--blanc);
    font-size: 23px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --------------------------------------------
   4 ter. LES RÉSULTATS D'UNE VOITURE
-------------------------------------------- */

/* Le bandeau qui rappelle la voiture retenue. Bleu plein : c'est
   la réponse du site à la question qu'il vient de poser, et elle
   doit rester sous les yeux pendant toute la visite. */
.barre-vehicule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background-color: var(--bleu);
    color: var(--blanc);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.barre-vehicule-textes {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.barre-vehicule-titre {
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bleu-clair);
}

.barre-vehicule-nom {
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-size: 21px;
    font-weight: 800;
}

/* « Changer de véhicule » : un bouton à contour clair sur le
   bandeau bleu. Discret, mais toujours là — se tromper de
   voiture ne doit jamais être un cul-de-sac. */
.btn-changer {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: none;
    color: var(--blanc);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-changer:hover {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: var(--blanc);
}

/* La carte blanche de la recherche par mot : le champ et son
   bouton sur la même ligne, le champ prenant toute la place qui
   reste. */
.barre-filtres {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
}

.champ-recherche {
    position: relative;        /* repère pour poser la loupe par-dessus */
    flex: 1;
    min-width: 0;              /* sans ça, le champ refuse de rétrécir */
}

.icone-loupe {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.barre-filtres input {
    width: 100%;
    padding: 13px 43px;        /* 43px à gauche : la place de la loupe */
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    font-size: 14.5px;
    font-family: inherit;
    color: #222b38;
    background-color: #f5f6f9;
}

/* On ne remet PAS « outline: none » ici : cela effacerait le contour de
   focus au clavier défini plus haut. La bordure bleue vient EN PLUS. */
.barre-filtres input:focus {
    border-color: var(--bleu);
    background-color: var(--blanc);
}

/* Les familles de pièces, en pastilles. Elles remplacent le menu
   déroulant : sur un téléphone, une rangée de pastilles se lit et
   se tape mieux qu'une liste qu'il faut d'abord ouvrir. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1.5px solid var(--bordure);
    border-radius: 100px;
    background-color: var(--blanc);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
}

.chip:hover {
    border-color: var(--bleu);
}

/* La famille en cours. Le fond plein suffit à la distinguer :
   aria-pressed dit la même chose à qui n'y voit pas. */
.chip-actif {
    background-color: var(--bleu);
    border-color: var(--bleu);
    color: var(--blanc);
}

.chip-icone {
    font-size: 15px;
    line-height: 1;
}

/* Le nombre de pièces de la famille, en plus discret : c'est un
   renseignement, pas le nom du bouton. */
.chip-nombre {
    font-size: 12px;
    font-weight: 500;
    color: var(--gris-texte);
}

.chip-actif .chip-nombre {
    color: var(--bleu-clair);
}

/* Bouton "Rechercher" : lance la recherche saisie dans la barre.
   Bleu plein pour qu'on le reconnaisse comme LE bouton d'action. */
.btn-recherche {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border: 1.5px solid var(--bleu);
    border-radius: 10px;
    background-color: var(--bleu);
    color: var(--blanc);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-recherche:hover {
    background-color: #0e1b2e;
    border-color: #0e1b2e;
}

/* Message affiché quand la recherche ne donne rien */
.aucun-resultat {
    background-color: var(--blanc);
    border: 1px dashed var(--bordure);
    border-radius: 14px;
    padding: 36px 20px;
    text-align: center;
    color: var(--gris-texte);
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

/* LES FICHES PRODUIT, LES UNES SOUS LES AUTRES.

   Une fiche est LARGE, pas carrée : elle tient sur toute la
   largeur du catalogue et se lit en deux colonnes
   (caractéristiques / disponibilité). Une seule fiche par ligne,
   donc — le regard descend, il ne balaye pas. */
.grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* ---------- LA FICHE ---------- */
.carte-piece {
    background-color: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 18px;
    padding: 22px;
    display: grid;
    /* LA FICHE EN DEUX COLONNES : trois quarts pour ce qui se lit
       (le nom, le tableau), un quart pour l'achat.

       Ce ne sont pas des largeurs en pixels mais des PARTS
       (« fr ») : la fiche garde les mêmes proportions sur un
       écran de 1 200 px comme de 950 px.

       La 2ᵉ part ne descend jamais sous 288 px : c'est ce qu'il
       faut au sélecteur de quantité et au bouton « Ajouter au
       panier » posés côte à côte. */
    grid-template-columns: minmax(0, 3fr) minmax(288px, 1fr);
    gap: 26px;
    align-items: start;
}

.carte-piece:hover {
    box-shadow: var(--ombre-carte);
}

/* --- Colonne 1 : le nom et les caractéristiques --- */
.carte-titre {
    margin: 0;
    font-family: "Bricolage Grotesque", "Archivo", sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.22;
    color: var(--bleu);
}

/* La précision qui suit le nom (« jeu de 4 — essieu avant ») */
.carte-variante {
    color: var(--gris-texte);
    font-size: 14.5px;
    margin-top: 6px;
}

.carte-ref {
    color: var(--gris-clair);
    font-size: 13.5px;
    margin-top: 4px;
}

/* Le petit tableau : une ligne = une caractéristique. L'étiquette
   à gauche en gris, la valeur à droite en gras — l'œil descend la
   colonne de droite et trouve sa voiture d'un coup. */
.specs {
    margin-top: 16px;
    border: 1px solid var(--bordure-douce);
    border-radius: 13px;
    overflow: hidden;
}

.specs-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 15px;
    border-bottom: 1px solid #f0f2f5;
    background-color: var(--blanc);
}

.specs-ligne:nth-child(even) { background-color: var(--gris-zebre); }
.specs-ligne:last-child      { border-bottom: none; }

.specs-label {
    color: var(--gris-texte);
    font-size: 13.5px;
}

.specs-valeur {
    color: var(--encre);
    font-size: 13.5px;
    font-weight: 700;
    text-align: end;
}

/* --- Colonne 2 : disponibilité et achat --- */
.carte-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* La disponibilité n'est plus une pastille à fond coloré mais une
   PUCE : un point de couleur suivi du mot. Plus discret, et le
   point se repère aussi vite qu'un feu tricolore. */
.stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.stock-point {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.stock.en-stock                  { color: var(--vert); }
.stock.en-stock .stock-point     { background-color: var(--vert); }
.stock.sur-commande              { color: var(--ambre); }
.stock.sur-commande .stock-point { background-color: var(--ambre); }

.carte-dispo {
    color: var(--gris-texte);
    font-size: 13.5px;
}

/* Le sélecteur de quantité : − 1 + dans un seul cadre arrondi. */
.quantite {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    overflow: hidden;
    flex: none;
}

.quantite button {
    width: 36px;
    height: 48px;
    border: none;
    background-color: var(--blanc);
    color: var(--encre-douce);
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
}

.quantite button:hover { background-color: var(--gris-doux); }

.quantite output {
    width: 38px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--bleu);
}

.carte-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.btn-panier {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    background-color: var(--bleu);
    color: var(--blanc);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1;
}

.btn-panier:hover { background-color: #0e1b2e; }

/* Juste après le clic, le bouton devient vert et affiche « Ajouté ».
   C'est le retour le plus immédiat : il se produit sous le doigt,
   là où la personne regarde. Le JS enlève la classe au bout de
   1,5 s et le bouton redevient normal. */
.btn-panier.ajoute,
.btn-panier.ajoute:hover {
    background-color: var(--whatsapp);
    color: var(--whatsapp-encre);
}

/* ---------- LA FICHE SUR ÉCRAN ÉTROIT ----------

   Deux paliers, repris de la maquette :
     • sous 900px, la colonne d'achat passe SOUS le texte,
       séparée par un filet ;
     • sous 560px, la fiche s'empile et les marges se resserrent. */
@media (max-width: 900px) {
    .carte-piece {
        /* La colonne d'achat est passée dessous : il ne reste que
           le texte, sur toute la largeur. */
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .carte-aside {
        grid-column: 1 / -1;
        border-top: 1px solid #f0f2f5;
        padding-top: 16px;
    }

    .carte-actions { max-width: 340px; }
}

@media (max-width: 560px) {
    .carte-piece {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 18px;
    }

    .carte-titre { font-size: 19px; }
}


/* --------------------------------------------
   4. CONTACT
-------------------------------------------- */
#contact {
    background-color: var(--bleu);
    padding: 64px 28px;
    text-align: center;
}

#contact h2 {
    color: var(--blanc);
    font-size: 32px;
    margin: 0 0 32px;
}

/* 3 cartes d'infos côte à côte */
.contact-infos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.info-carte {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 16px;
}

.info-carte svg {
    margin-bottom: 10px;
}

.info-carte h3 {
    color: var(--blanc);
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 4px;
}

.info-carte p {
    color: #9db0c7;
    font-size: 13.5px;
    margin: 0;
}

/* ---- LES 3 BOUTONS D'ACTION (appel, WhatsApp, e-mail) ----

   Ils partagent tout ce qui fait leur forme (.btn-contact) ;
   seules les couleurs changent d'un bouton à l'autre. */
.contact-boutons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    /* min-width : les 3 boutons gardent la même largeur mini, sinon
       « E-mail » serait riquiqui à côté de « Appeler le magasin ». */
    min-width: 236px;
    padding: 13px 20px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    text-decoration: none;
    text-align: left;
    /* La couleur, la position et l'ombre bougent en douceur au survol */
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, border-color 0.2s ease;
}

/* La pastille ronde qui porte le logo */
.btn-contact-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;            /* ne s'écrase jamais, même à l'étroit */
    border-radius: 12px;
}

/* Les deux lignes de texte, empilées */
.btn-contact-textes {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.btn-contact-titre {
    font-weight: 700;
    font-size: 15px;
}

/* La 2e ligne : plus petite et plus discrète (opacité) */
.btn-contact-detail {
    font-size: 12.5px;
    font-weight: 500;
    opacity: 0.72;
    margin-top: 2px;
}

/* Au survol : le bouton se soulève et son ombre s'agrandit.
   :focus-visible = même effet quand on arrive au clavier. */
.btn-contact:hover,
.btn-contact:focus-visible {
    transform: translateY(-3px);
}

/* Au clic, il redescend : ça donne la sensation d'appuyer */
.btn-contact:active {
    transform: translateY(-1px);
}

/* 1. APPEL — blanc plein : c'est l'action la plus directe */
.btn-appel {
    background-color: var(--blanc);
    color: var(--bleu);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-appel .btn-contact-icone {
    background-color: rgba(22, 40, 63, 0.09);
    color: var(--bleu);
}

.btn-appel:hover,
.btn-appel:focus-visible {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

/* 2. E-MAIL — verre dépoli : un voile blanc très léger posé sur le
      bleu, avec un liseré clair. Discret, mais plus lisible que
      l'ancien bouton entièrement transparent. */
.btn-mail {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--blanc);
}

.btn-mail .btn-contact-icone {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--blanc);
}

.btn-mail:hover,
.btn-mail:focus-visible {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

/* En arabe, le texte des boutons s'aligne à droite */
[dir="rtl"] .btn-contact {
    text-align: right;
}


/* --------------------------------------------
   5. LE PANIER (volet qui glisse depuis la droite)
-------------------------------------------- */

/* Le voile sombre : il couvre la page quand le panier est ouvert.
   « visibility » évite qu'il reste cliquable une fois transparent. */
.panier-fond {
    position: fixed;
    inset: 0;                  /* colle aux 4 bords de l'écran */
    background-color: rgba(22, 40, 63, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 55;               /* au-dessus du header (40) */
}

.panier-fond.ouvert {
    opacity: 1;
    visibility: visible;
}

/* Le volet lui-même : rangé hors de l'écran à droite (100%),
   il revient à 0 quand il reçoit la classe « ouvert ». */
.panier-volet {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 88vw;           /* jamais plus large que l'écran du téléphone */
    background-color: var(--blanc);
    box-shadow: var(--ombre-forte);
    transform: translateX(100%);
    transition: transform 0.3s;
    z-index: 60;
    display: flex;
    flex-direction: column;    /* entête / liste / pied empilés */
}

.panier-volet.ouvert {
    transform: translateX(0);
}

.panier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 12px;
}

.panier-entete h2 {
    margin: 0;
    font-size: 20px;
    color: var(--bleu);
}

.panier-fermer {
    border: none;
    background: none;
    font-size: 18px;
    color: var(--gris-texte);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.panier-fermer:hover {
    background-color: var(--gris-fond);
    color: var(--encre);
}

.panier-note {
    margin: 0 20px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gris-texte);
    background-color: var(--gris-fond);
    padding: 10px 12px;
    border-radius: 10px;
}

/* La zone qui défile : elle contient la liste des pièces PUIS le
   formulaire de livraison. C'est elle, et non la liste seule, qui
   prend toute la hauteur restante et qui défile — sinon un panier
   bien rempli cacherait les champs d'adresse. */
.panier-corps {
    flex: 1;                   /* prend toute la hauteur restante */
    overflow-y: auto;          /* défile tout seul si ça déborde */
}

/* La liste des pièces */
.panier-liste {
    list-style: none;          /* pas de puces */
    margin: 0;
    padding: 0 20px;
}

.panier-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bordure);
}

.panier-ligne-infos {
    flex: 1;                   /* pousse le bouton retirer à droite */
    min-width: 0;              /* autorise le texte long à se couper */
}

.panier-ligne-nom {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}

.panier-ligne-detail {
    display: block;
    font-size: 12px;
    color: var(--gris-clair);
    margin-top: 2px;
}

/* La quantité : « ×2 » quand la pièce est ajoutée plusieurs fois */
.panier-ligne-quantite {
    font-size: 13px;
    font-weight: 700;
    color: var(--bleu);
    background-color: var(--gris-fond);
    padding: 3px 9px;
    border-radius: 100px;
    flex: none;
}

.panier-retirer {
    border: 1.5px solid var(--bordure);
    background: none;
    color: var(--gris-texte);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex: none;
}

.panier-retirer:hover {
    border-color: #b03030;
    color: #b03030;
}

/* Message quand le panier est vide */
.panier-vide {
    text-align: center;
    color: var(--gris-clair);
    font-size: 14px;
    padding: 32px 10px;
    line-height: 1.6;
}

/* ---- LE FORMULAIRE DE LIVRAISON ----

   Il vient juste sous la liste des pièces, séparé par un trait :
   d'abord CE QUE je commande, ensuite OÙ le livrer. */
.panier-livraison {
    padding: 18px 20px 4px;
    border-top: 1px solid var(--bordure);
    margin-top: 4px;
}

.panier-livraison h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--bleu);
}

/* Les deux choix « livrer / retirer », côte à côte et de même
   largeur (flex: 1 chacun). */
.mode-livraison {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

/* Chaque option est un <label> : cliquer n'importe où dessus
   coche le bouton radio. Sur téléphone, ça fait une cible large
   au lieu d'un minuscule rond. */
.mode-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre-douce);
    cursor: pointer;
    text-align: center;
    line-height: 1.25;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.mode-option:hover {
    border-color: var(--bleu-clair);
}

/* « :has() » veut dire « ce label QUI CONTIENT un radio coché ».
   Le cadre se colore donc tout seul, sans une ligne de JavaScript. */
.mode-option:has(input:checked) {
    border-color: var(--bleu);
    background-color: var(--blanc);
    color: var(--bleu);
    box-shadow: inset 0 0 0 1px var(--bleu);
}

.mode-option input {
    accent-color: var(--bleu);  /* le rond coché prend le bleu du site */
    margin: 0;
    flex: none;
}

/* L'étiquette au-dessus de chaque champ */
.champ-libelle {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--encre-douce);
    margin-bottom: 5px;
}

/* Les champs eux-mêmes : tous la même allure, qu'il s'agisse
   d'un input, d'un select ou d'un textarea. */
.champ-form {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    background-color: var(--blanc);
    font-family: inherit;      /* sinon les champs gardent la police du système */
    font-size: 14px;
    color: var(--encre);
}

.champ-form:focus {
    border-color: var(--bleu);
    outline: none;             /* le trait bleu ci-dessus suffit */
}

.champ-form::placeholder {
    color: var(--gris-clair);
}

/* Le textarea : on interdit l'agrandissement latéral, qui
   ferait déborder le volet. Vertical seulement. */
textarea.champ-form {
    resize: vertical;
    min-height: 58px;
}

/* Le message d'erreur : rouge, discret, et seulement quand il
   y a quelque chose à corriger (le JS enlève « hidden »). */
.form-erreur {
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background-color: #fbe9e9;
    color: #96201f;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.panier-pied {
    padding: 16px 20px;
    border-top: 1px solid var(--bordure);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- LES 2 BOUTONS D'ENVOI DU DEVIS ----

   Ils ont la même forme : logo à gauche, texte à droite, tout
   centré. Seules les couleurs les distinguent. */
.btn-devis,
.btn-devis-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    border-radius: 11px;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 14.5px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Le bouton principal : le vert officiel de WhatsApp, avec du
   texte vert très foncé (du blanc serait illisible sur ce vert). */
.btn-devis {
    background-color: var(--whatsapp);
    color: var(--whatsapp-encre);
    font-weight: 700;
}

.btn-devis:hover:not(:disabled) {
    background-color: #2ee06f;
}

/* Le second choix : contour bleu, sans fond. Il reste visible mais
   ne concurrence pas le bouton vert du dessus. */
.btn-devis-mail {
    background-color: var(--blanc);
    border-color: var(--bordure);
    color: var(--bleu);
    font-weight: 600;
}

.btn-devis-mail:hover:not(:disabled) {
    border-color: var(--bleu);
    background-color: var(--gris-fond);
}

/* Un bouton désactivé (panier vide) doit se voir : grisé, non cliquable */
.btn-devis:disabled,
.btn-devis-mail:disabled {
    background-color: var(--bordure);
    border-color: transparent;
    color: var(--gris-clair);
    cursor: not-allowed;
}

.btn-vider {
    background: none;
    border: none;
    color: var(--gris-texte);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
}

.btn-vider:hover {
    color: #b03030;
    text-decoration: underline;
}


/* --------------------------------------------
   6. CONFORT VISUEL
-------------------------------------------- */

/* Apparition au défilement : le bloc part légèrement plus bas et
   transparent, puis se remet en place quand il entre dans l'écran
   (c'est le JS qui pose la classe « visible »). */
.revele {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.revele.visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------
   LE PANIER FLOTTANT

   Un rond bleu toujours accessible en bas à droite, avec le
   nombre de pièces. Il n'apparaît QUE si le panier contient
   quelque chose (le JS pose la classe « visible »).
-------------------------------------------- */
.panier-flottant {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--bleu);
    color: var(--blanc);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(22, 40, 63, 0.38);
    z-index: 50;               /* sous le panier ouvert (55/60) */

    /* caché par défaut, et non cliquable tant qu'il est caché */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.85);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s,
                background-color 0.2s;
}

.panier-flottant.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.panier-flottant:hover {
    background-color: #0e1b2e;
}

/* La pastille du nombre, accrochée en haut à droite du rond */
.panier-flottant-pastille {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    border-radius: 12px;
    border: 2.5px solid var(--gris-fond);
    background-color: var(--whatsapp);
    color: var(--whatsapp-encre);
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
}

/* Petit rebond quand on ajoute une pièce (classe posée par le JS) */
.panier-flottant.ajout {
    animation: sursaut 0.35s;
}

[dir="rtl"] .panier-flottant           { right: auto; left: 20px; }
[dir="rtl"] .panier-flottant-pastille  { right: auto; left: -3px; }


/* --------------------------------------------
   LE MESSAGE « AJOUTÉ AU PANIER » (toast)

   Une bulle blanche en bas de l'écran. Elle glisse vers le
   haut en apparaissant, et repart en glissant vers le bas.
-------------------------------------------- */
.toast {
    position: fixed;
    /* left + right + margin auto = centré, mais jamais plus large
       que l'écran sur un petit téléphone. */
    left: 14px;
    right: 14px;
    bottom: 88px;              /* au-dessus du panier flottant */
    margin: 0 auto;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 14px;
    background-color: var(--blanc);
    box-shadow: 0 18px 40px rgba(22, 40, 63, 0.3);
    z-index: 70;               /* au-dessus de tout, même du volet panier */

    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.toast.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Le rond vert avec la coche */
.toast-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--whatsapp);
    color: var(--whatsapp-encre);
    font-size: 15px;
    font-weight: 800;
}

.toast-textes {
    display: flex;
    flex-direction: column;
    min-width: 0;              /* autorise le texte à se couper (voir ci-dessous) */
    flex-grow: 1;
    line-height: 1.25;
}

.toast-titre {
    font-size: 14px;
    color: var(--encre);
}

/* Un nom de pièce trop long est coupé par « … » plutôt que de
   faire grossir la bulle. */
.toast-detail {
    font-size: 12.5px;
    color: var(--gris-texte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-voir {
    flex-shrink: 0;
    background-color: var(--bleu);
    color: var(--blanc);
    border: none;
    border-radius: 9px;
    padding: 9px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.toast-voir:hover {
    background-color: #0e1b2e;
}


/* Bouton « retour en haut » : rond, en bas à droite, il n'apparaît
   qu'une fois qu'on a descendu la page. */
.btn-haut {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background-color: var(--bleu);
    color: var(--blanc);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ombre-carte);
    z-index: 50;               /* sous le panier (55/60), au-dessus du reste */

    /* caché par défaut, sans gêner les clics */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.btn-haut.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.btn-haut:hover {
    background-color: #0e1b2e;
}

/* Quand le panier flottant est là, « retour en haut » monte d'un cran
   pour ne pas lui passer dessus. Le « ~ » veut dire : « un élément qui
   vient APRÈS dans la page, au même niveau ». */
.panier-flottant.visible ~ .btn-haut {
    bottom: 88px;
}


/* --------------------------------------------
   7. PIED DE PAGE
-------------------------------------------- */
footer {
    background-color: #0e1b2e;
    color: #7285a1;
    text-align: center;
    padding: 20px 28px;
    font-size: 13px;
}

footer p {
    margin: 0;
}

/* Le lien « Gestion du stock » : réservé au magasin, il doit se
   trouver quand on le cherche sans attirer l'œil du client. Il
   reste donc dans le ton du pied de page, et ne se souligne qu'au
   survol. inline-block sert à lui donner sa marge du dessus. */
.lien-admin {
    display: inline-block;
    margin-top: 10px;
    color: #55688a;
    font-size: 12px;
    text-decoration: none;
}

.lien-admin:hover,
.lien-admin:focus-visible {
    color: var(--bleu-clair);
    text-decoration: underline;
}


/* --------------------------------------------
   ÉCRANS ÉTROITS (téléphones)
   Les "media queries" ne changent des règles
   qu'en dessous d'une certaine largeur.
-------------------------------------------- */
/* En dessous de 900 px, les trois colonnes de l'en-tête n'ont plus la
   place de tenir côte à côte : on repasse à un empilement centré, avec
   l'enseigne en haut (order: -1 la fait remonter sans toucher au HTML). */
@media (max-width: 900px) {
    .entete-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
    }

    .logo {
        order: -1;
    }

    nav {
        justify-self: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-actions {
        justify-self: center;
    }

    /* Empilé, l'en-tête devient haut : le garder collé mangerait
       trop d'écran, on le laisse donc défiler avec la page. */
    header {
        position: static;
    }
}

@media (max-width: 700px) {
    .contact-infos {
        grid-template-columns: 1fr;              /* cartes contact empilées */
    }

    /* Les 3 boutons passent l'un sous l'autre, pleine largeur :
       plus faciles à viser au pouce que côte à côte. */
    .contact-boutons {
        flex-direction: column;
    }

    .btn-contact {
        width: 100%;
        min-width: 0;
    }

    .hero-marques {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .entete-inner {
        padding: 14px 20px;
    }

    /* Sur un écran très étroit, « GÉNÉRALE CARROSSERIE AUTO » ne tient
       plus sur une ligne : on autorise le retour à la ligne et on rend
       l'espacement des lettres plus sage pour gagner de la place. */
    .logo-tagline {
        white-space: normal;
        letter-spacing: 1px;
    }

    .logo-nom {
        letter-spacing: 2px;
    }

    .hero {
        min-height: auto;                        /* plus besoin du plein écran */
        padding: 48px 20px;
    }

    /* Le champ de recherche et son bouton passent l'un sous
       l'autre : côte à côte sur un écran étroit, il ne resterait
       au champ qu'une largeur inutilisable. */
    .barre-filtres {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-recherche {
        justify-content: center;
    }

    /* Le sélecteur : 2 marques par ligne plutôt qu'une seule. */
    .selecteur {
        padding: 16px;
    }

    .selecteur-question {
        font-size: 19px;
    }

    .selecteur-choix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .barre-vehicule {
        padding: 14px 16px;
    }

    .barre-vehicule-nom {
        font-size: 18px;
    }

    /* Catalogue : les fiches sont déjà empilées et adaptées par
       leurs propres paliers (900px / 560px, plus haut). Il reste
       à resserrer l'espace ENTRE elles et le tableau, calibrés
       pour un grand écran. */
    .grille { gap: 12px; }

    .specs-ligne  { padding: 9px 12px; gap: 12px; }
    .specs-label,
    .specs-valeur { font-size: 12.5px; }
}


/* --------------------------------------------
   ÉCRITURE ARABE (droite → gauche)

   Quand le JS met dir="rtl" sur <html>, le navigateur retourne
   DÉJÀ tout seul les flexbox, les grilles et l'alignement du
   texte. Il ne reste donc que deux choses à faire ici :
     1. la police (Archivo ne dessine pas les lettres arabes) ;
     2. les rares positions posées à la main en left/right.
-------------------------------------------- */

html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] button {
    font-family: "Cairo", "Archivo", sans-serif;
}

/* L'arabe se lit un peu plus « serré » : on aère les lignes. */
html[lang="ar"] body {
    line-height: 1.7;
}

/* Le bouton de langue affiche « Français » quand on est en arabe :
   ce mot-là doit rester dans la police latine. */
html[lang="ar"] .lang-btn[lang="fr"] {
    font-family: "Archivo", sans-serif;
}

/* Les positions absolues, à inverser une par une */
[dir="rtl"] .lien-evitement { left: auto;  right: 12px; }
[dir="rtl"] .icone-loupe    { left: auto;  right: 15px; }
[dir="rtl"] .btn-haut       { right: auto; left: 20px; }

/* Le volet du panier arrive maintenant par la GAUCHE */
[dir="rtl"] .panier-volet {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

[dir="rtl"] .panier-volet.ouvert {
    transform: translateX(0);
}

/* --------------------------------------------
   ANIMATIONS RÉDUITES (réglage du système)

   Certaines personnes désactivent les animations : mal des
   transports, vertiges, troubles de l'attention. Ce bloc doit
   rester EN DERNIER pour pouvoir tout neutraliser.
-------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Les blocs qui « apparaissent » restent simplement affichés :
       sans ça, ils resteraient invisibles pour toujours. */
    .revele {
        opacity: 1 !important;
        transform: none !important;
    }
}