/*
 * socle-site.css — saaphone.fr prend l'apparence de la maquette.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Demande de Rami (2026-09-22) : « une refonte du site web donc un peu toutes
 * les pages, CONSERVER les onglets actuels et leurs fonctionnalités, car
 * c'est fonctionnel, il ne faut pas repartir de 0, je souhaite simplement
 * faire une refonte du VISUEL. »
 *
 * Ce fichier tient cette consigne à la lettre : il ne touche à AUCUN balisage,
 * AUCUNE navigation, AUCUN script. Il fait pointer les variables que
 * `style.css` emploie déjà vers les jetons de `socle.css` — la source commune
 * avec l'app cliente — et reprend nommément les quelques effets que style.css
 * écrit en dur.
 *
 * ── Pourquoi une passerelle plutôt qu'une réécriture ─────────────────────
 * `style.css` fait ~5 000 lignes et sert 33 pages en ligne, indexées. Une
 * réécriture toucherait chaque page ; ici, une accolade. Et pour tout annuler
 * il suffit de retirer deux <link> — aucune page n'aura été modifiée
 * autrement que par l'ajout de ces deux lignes.
 *
 * ── Ordre de chargement, et il compte ────────────────────────────────────
 *     style.css  →  (feuilles de page)  →  socle.css  →  socle-site.css
 * Les sélecteurs repris ici sont les MÊMES que ceux de style.css : à
 * spécificité égale, c'est le dernier chargé qui gagne. Aucun `!important`
 * n'est nécessaire — et c'est heureux, parce qu'un `!important` global sur la
 * police casserait Font Awesome, dont les icônes SONT une famille de police.
 */

/* ════════════════ Les jetons, redirigés vers le socle ════════════════ */
:root {
  --primary: var(--rouge);
  --primary-dark: var(--accent-sombre);
  --primary-light: var(--accent-clair);
  --secondary: var(--bleu-nuit);
  /* L'or #D4AF37 n'existe pas dans la maquette : l'orange prend sa place. */
  --accent: var(--orange);

  --bg: var(--fond);
  --bg-light: var(--surface);
  --bg-soft: var(--surface);
  --bg-dark: var(--bleu-nuit);
  --bg-dark-elevated: #14304C;   /* bleu nuit ÉCLAIRCI : les blocs posés sur le
                                    bleu nuit doivent s'en détacher */
  --border: var(--trait);
  --text: var(--texte);
  --text-light: var(--doux);
  --text-on-dark: var(--carte);

  --radius: var(--r-grand);
  --radius-sm: var(--r-petit);
  --radius-lg: var(--r-carte);

  --shadow: var(--ombre);
  --shadow-lg: var(--ombre-portee);
  --shadow-luxe: var(--ombre-portee);
  /* Aucune lueur colorée dans la maquette. On neutralise au lieu de recolorer. */
  --shadow-red-glow: none;

  /* Aucun DÉGRADÉ non plus. Les « dégradés » deviennent des aplats — ils
     cessent d'en être sans qu'il faille retrouver chaque règle qui les
     emploie (onglet actif, puces, boutons, titres en dégradé…). */
  --gradient: linear-gradient(var(--rouge), var(--rouge));
  --gradient-light: linear-gradient(var(--accent-clair), var(--accent-clair));
  --gradient-luxe: linear-gradient(var(--bleu-nuit), var(--bleu-nuit));
  --gradient-dark: linear-gradient(var(--bleu-nuit), var(--bleu-nuit));

  /* La famille propre aux pages de vente (commerce.css). */
  --commerce-ink: var(--texte);
  --commerce-muted: var(--doux);
  --commerce-paper: var(--carte);
  --commerce-wash: var(--fond);
  --commerce-line: var(--trait);
}

/* ════════════════════════ La typographie ════════════════════════
 *
 * `style.css` fige 'Poppins' et 'Satoshi' dans une vingtaine de règles : une
 * variable ne les atteint pas, il faut reprendre les mêmes sélecteurs. La
 * liste vient de l'extraction de ces règles, pas d'une supposition.
 *
 * Font Awesome n'est jamais visé : ses icônes sont une famille de police, et
 * les écraser les transformerait toutes en carrés.
 */
body,
h1, h2, h3, h4, h5, h6, .section-title, .logo, .hero h1,
.btn,
.form-group input, .form-group select, .form-group textarea,
.filter-btn, .back-to-brands, .model-search, .find-tab, .model-select,
.stock-info-banner, .showcase-title, .showcase-tab,
.boutique-photo-card figcaption,
.intervene-mode h3, .zone-service h3, .zone-info-card h3,
.zone-why-item h3, .zone-faq-item summary, .zone-card h3 {
  font-family: var(--police);
}

/* La page est GRISE, les cartes sont blanches — l'inversion de la maquette.
   Une carte ne flotte que si le fond est plus sombre qu'elle. */
body { background: var(--fond); color: var(--texte); }

/* ═══════════════════ Les boutons ═══════════════════
 *
 * Le site les dessinait en dégradé rouge avec un halo rouge porté ; la
 * maquette les veut en aplat, sans ombre. Ces deux effets sont écrits en dur
 * dans style.css (`rgba(220, 38, 38, …)`, l'ANCIEN rouge) : rediriger une
 * variable ne les atteint pas.
 *
 * ⚠️ `.pro-page` est EXCLU de la couleur. L'espace réparateurs porte un violet
 * (#6d28d9) choisi par Adhem, avec son contraste mesuré. Aligner une palette
 * ne donne pas le droit d'effacer une décision de couleur prise ailleurs.
 */
body:not(.pro-page) .btn-primary {
  background: var(--rouge);
  background-image: none;
  color: var(--sur-accent);
}
.btn-primary {
  box-shadow: none;
  border-radius: 14px;
  font-weight: 700;
}
/* Le soulèvement au survol reste : c'est un geste de SOURIS, que le site a et
   que l'app n'a pas puisqu'elle se touche au doigt. Il perd juste son halo. */
.btn-primary:hover { box-shadow: none; filter: brightness(0.94); }
.btn-primary:active { transform: none; filter: brightness(0.92); }
.btn-outline { border-width: 2px; border-radius: 14px; font-weight: 700; }

/* ═══════════════════ Les surfaces ═══════════════════
 *
 * Le site alterne des bandes — bandeau de titre rosé, bande blanche, section
 * grise. À l'écran, ça découpe la page en tranches que la maquette n'a pas :
 * elle pose UNE page grise et n'y dépose que des cartes. Ces fonds sont
 * écrits en dur, hors variable.
 */
.page-header,
.shop-filter, .shop-section, .shop-section-alt,
.services-preview, .why-us, .reviews-section, .zones-preview {
  background: var(--fond);
}
.product-card, .service-card, .review-card, .zone-card {
  background: var(--carte);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre);
}

/* La barre haute a DÉMÉNAGÉ le 2026-09-23 vers `css/entete-site.css`, qui est
   chargé par les 786 pages portant une navigation — pas seulement par les 32
   qui reçoivent cette passerelle. Un en-tête commun ne peut pas dépendre d'une
   feuille que la plupart des pages ne chargent pas. */

/* ═══════════════════ Les gommettes ═══════════════════
 *
 * Neuf = jaune, occasion = bleu, reconditionné = vert. Ce sont les ÉTIQUETTES
 * PHYSIQUES collées sur les téléphones en boutique : le site parle le langage
 * du comptoir, comme l'app. Sur le jaune, le texte passe en bleu nuit — du
 * blanc sur ce jaune serait illisible.
 */
.badge-reconditionne, .product-badge--reconditionne { background: var(--gommette-recond); color: var(--bleu-nuit); }
.badge-occasion, .product-badge--occasion { background: var(--gommette-occasion); color: var(--bleu-nuit); }
.badge-neuf, .product-badge--neuf { background: var(--gommette-neuf); color: var(--bleu-nuit); }

/* ═══════════════════ Le bouton secondaire illisible ═══════════════════
 *
 * Défaut ANTÉRIEUR à la refonte : `compte.html` réutilise la classe
 * `zone-hero-ctas`, écrite pour le bandeau SOMBRE des pages de zone locale, à
 * l'intérieur d'un bloc clair. Le bouton « Nous écrire » y était blanc sur
 * blanc — et l'était déjà avant. Rouge SOMBRE et non rouge d'action : mesuré,
 * le rouge d'action ne donne que 4,34 : 1 sur ce gris, sous le seuil AA ; le
 * sombre monte à 7,2 : 1.
 */
.zone-hero-ctas .btn-outline { color: var(--accent-sombre); border-color: var(--accent-sombre); }
.zone-hero-ctas .btn-outline:hover { background: var(--carte); border-color: var(--accent-sombre); }