/* ============================================================
   PALETTES DE DÉMONSTRATION — Charles Centre Auto
   Chaque bloc [data-palette="pN"] s'applique au site entier
   (attribut sur <html>) ou à un aperçu localisé (attribut sur
   un conteneur de la page charte). P1 = design actuel.
   Les couleurs d'ÉTAT (saisons, stock, erreurs) restent
   identiques dans toutes les palettes : elles portent du sens.
   Accents vérifiés : texte blanc lisible (contraste ≥ 4,5:1).
   ============================================================ */

/* ---------- Barre de sélection (démo) ---------- */
.palbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 20px;
  background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:32}
.palbar-lbl{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.08em;color:var(--mut)}
.palbar-btns{display:flex;gap:5px;flex-wrap:wrap}
.palbar button{min-width:34px;height:26px;padding:0 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--field);cursor:pointer;font-family:var(--mono);
  font-weight:700;font-size:11.5px;color:var(--ink2)}
.palbar button:hover{border-color:var(--ink)}
.palbar button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.palbar-link{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand);
  text-decoration:none;white-space:nowrap}
.palbar-link:hover{text-decoration:underline}
@media(max-width:700px){.palbar-link{margin-left:0}}

/* ============ P1 — Cobalt atelier (actuel) ============ */
:root[data-palette="p1"],[data-palette="p1"]{
  --bg:#E9EAEC; --paper:#FFFFFF; --line:#DCDFE4; --field:#F2F3F5;
  --brand:#1B44E5; --brand-d:#1235c2; --brand-t:#eaeeff;
  --hero-bg:#15171C; --hero-fg:#ffffff; --hero-sub:#b3bbc9; --hero-accent:#8aa0ff;
  --hero-glow:rgba(90,120,255,.20);
  --pillars-bg:#1b1f27; --pillars-fg:#fff; --pillars-sub:#aab2c2;
  --pill-ico-bg:rgba(90,120,255,.16); --pill-ico-line:rgba(140,165,255,.28); --pill-ico-fg:#8aa0ff;
  --trust-bg:rgba(255,255,255,.055); --trust-line:rgba(255,255,255,.10); --trust-fg:#aab2c2;
  --band-cap:#c9d0dc; --cta2-bg:#15171C; --cta2-fg:#fff;
}

/* ============ P2 — Rouge service (stricte, énergie du métier) ============ */
:root[data-palette="p2"],[data-palette="p2"]{
  --bg:#EFECEA; --paper:#FFFFFF; --line:#E2DCD9; --field:#F5F1EF;
  --brand:#C41E26; --brand-d:#a01218; --brand-t:#fbe9ea;
  --hero-bg:#17181C; --hero-fg:#ffffff; --hero-sub:#c3b8b6; --hero-accent:#ff8a8f;
  --hero-glow:rgba(196,30,38,.22);
  --pillars-bg:#201d1e; --pillars-fg:#fff; --pillars-sub:#b7aaa8;
  --pill-ico-bg:rgba(255,110,116,.14); --pill-ico-line:rgba(255,138,143,.30); --pill-ico-fg:#ff8a8f;
  --trust-bg:rgba(255,255,255,.05); --trust-line:rgba(255,255,255,.10); --trust-fg:#b7aaa8;
  --band-cap:#d4c8c6; --cta2-bg:#17181C; --cta2-fg:#fff;
}

/* ============ P3 — Tangerine soleil (gaie, vive, lumineuse) ============ */
:root[data-palette="p3"],[data-palette="p3"]{
  --bg:#FFF6EA; --paper:#FFFFFF; --line:#F0E2CE; --field:#FBF1E2;
  --brand:#C2410C; --brand-d:#9a3410; --brand-t:#fdebdd;
  --hero-bg:#FFEDD5; --hero-fg:#33200E; --hero-sub:#7A5C3F; --hero-accent:#C2410C;
  --hero-glow:rgba(194,65,12,.12);
  --pillars-bg:#FBE3C4; --pillars-fg:#33200E; --pillars-sub:#7A5C3F;
  --pill-ico-bg:rgba(194,65,12,.12); --pill-ico-line:rgba(194,65,12,.35); --pill-ico-fg:#C2410C;
  --trust-bg:rgba(194,65,12,.07); --trust-line:rgba(194,65,12,.18); --trust-fg:#7A5C3F;
  --band-cap:#e8d6bd; --cta2-bg:#33200E; --cta2-fg:#fff;
  --header-bg:rgba(255,251,244,.92);
}

/* ============ P4 — Forêt boréale (profonde, rassurante, nature) ============ */
:root[data-palette="p4"],[data-palette="p4"]{
  --bg:#EEF4F0; --paper:#FFFFFF; --line:#DCE7E0; --field:#F2F7F4;
  --brand:#15803D; --brand-d:#0f632e; --brand-t:#e4f3ea;
  --hero-bg:#0F2E1E; --hero-fg:#ffffff; --hero-sub:#A8C5B4; --hero-accent:#7BD9A2;
  --hero-glow:rgba(52,168,109,.20);
  --pillars-bg:#143726; --pillars-fg:#fff; --pillars-sub:#A8C5B4;
  --pill-ico-bg:rgba(123,217,162,.13); --pill-ico-line:rgba(123,217,162,.30); --pill-ico-fg:#7BD9A2;
  --trust-bg:rgba(255,255,255,.05); --trust-line:rgba(255,255,255,.11); --trust-fg:#A8C5B4;
  --band-cap:#c2d8ca; --cta2-bg:#0F2E1E; --cta2-fg:#fff;
}

/* ============ P5 — Marine institutionnelle (stricte, corporative) ============ */
:root[data-palette="p5"],[data-palette="p5"]{
  --bg:#EDF1F7; --paper:#FFFFFF; --line:#DCE3EE; --field:#F2F5FA;
  --brand:#1D4ED8; --brand-d:#153ba8; --brand-t:#e4ebfb;
  --hero-bg:#101C33; --hero-fg:#ffffff; --hero-sub:#A9B4C9; --hero-accent:#7C9BFF;
  --hero-glow:rgba(76,110,245,.20);
  --pillars-bg:#16233D; --pillars-fg:#fff; --pillars-sub:#A9B4C9;
  --pill-ico-bg:rgba(124,155,255,.14); --pill-ico-line:rgba(124,155,255,.30); --pill-ico-fg:#7C9BFF;
  --trust-bg:rgba(255,255,255,.05); --trust-line:rgba(255,255,255,.10); --trust-fg:#A9B4C9;
  --band-cap:#c4cfdf; --cta2-bg:#101C33; --cta2-fg:#fff;
}

/* ============ P6 — Terre cuite (chaude, accueillante, artisanale) ============ */
:root[data-palette="p6"],[data-palette="p6"]{
  --bg:#F7EFE6; --paper:#FFFDF9; --line:#EADFD1; --field:#F6EEE3;
  --brand:#9A3412; --brand-d:#7c2a0e; --brand-t:#f6e7dc;
  --hero-bg:#26160F; --hero-fg:#FFF9F4; --hero-sub:#C9AE9E; --hero-accent:#E29C6B;
  --hero-glow:rgba(226,156,107,.16);
  --pillars-bg:#2E1B12; --pillars-fg:#FFF9F4; --pillars-sub:#C9AE9E;
  --pill-ico-bg:rgba(226,156,107,.14); --pill-ico-line:rgba(226,156,107,.32); --pill-ico-fg:#E29C6B;
  --trust-bg:rgba(255,249,244,.05); --trust-line:rgba(255,249,244,.11); --trust-fg:#C9AE9E;
  --band-cap:#dcc7b8; --cta2-bg:#26160F; --cta2-fg:#FFF9F4;
  --header-bg:rgba(255,253,249,.92);
}

/* ============ P7 — Ardoise épurée (stricte, sobre, monochrome) ============ */
:root[data-palette="p7"],[data-palette="p7"]{
  --bg:#EDEFF2; --paper:#FFFFFF; --line:#DFE3E9; --field:#F3F5F7;
  --brand:#1F2937; --brand-d:#111827; --brand-t:#e7eaee;
  --hero-bg:#0F172A; --hero-fg:#ffffff; --hero-sub:#9AA5B5; --hero-accent:#94A3B8;
  --hero-glow:rgba(148,163,184,.12);
  --pillars-bg:#172033; --pillars-fg:#fff; --pillars-sub:#9AA5B5;
  --pill-ico-bg:rgba(148,163,184,.13); --pill-ico-line:rgba(148,163,184,.28); --pill-ico-fg:#B9C4D4;
  --trust-bg:rgba(255,255,255,.05); --trust-line:rgba(255,255,255,.09); --trust-fg:#9AA5B5;
  --band-cap:#bec8d6; --cta2-bg:#0F172A; --cta2-fg:#fff;
}

/* ============ P8 — Turquoise atelier moderne (gaie, fraîche, techno) ============ */
:root[data-palette="p8"],[data-palette="p8"]{
  --bg:#EFF7F6; --paper:#FFFFFF; --line:#DBEBE9; --field:#F1F8F7;
  --brand:#0F766E; --brand-d:#0b5d57; --brand-t:#e0f2f0;
  --hero-bg:#0B3B38; --hero-fg:#ffffff; --hero-sub:#9FC6C1; --hero-accent:#5EEAD4;
  --hero-glow:rgba(94,234,212,.14);
  --pillars-bg:#10433F; --pillars-fg:#fff; --pillars-sub:#9FC6C1;
  --pill-ico-bg:rgba(94,234,212,.12); --pill-ico-line:rgba(94,234,212,.28); --pill-ico-fg:#5EEAD4;
  --trust-bg:rgba(255,255,255,.05); --trust-line:rgba(255,255,255,.11); --trust-fg:#9FC6C1;
  --band-cap:#bcd9d5; --cta2-bg:#0B3B38; --cta2-fg:#fff;
}

/* ============ P9 — Magenta audace (vive, distinctive, mémorable) ============ */
:root[data-palette="p9"],[data-palette="p9"]{
  --bg:#F8F1F5; --paper:#FFFFFF; --line:#EFDCE7; --field:#F8F0F4;
  --brand:#BE185D; --brand-d:#9a124b; --brand-t:#f9e4ee;
  --hero-bg:#220F1D; --hero-fg:#ffffff; --hero-sub:#C7A3B8; --hero-accent:#F472B6;
  --hero-glow:rgba(244,114,182,.16);
  --pillars-bg:#2B1426; --pillars-fg:#fff; --pillars-sub:#C7A3B8;
  --pill-ico-bg:rgba(244,114,182,.13); --pill-ico-line:rgba(244,114,182,.30); --pill-ico-fg:#F472B6;
  --trust-bg:rgba(255,255,255,.05); --trust-line:rgba(255,255,255,.10); --trust-fg:#C7A3B8;
  --band-cap:#dcc0d0; --cta2-bg:#220F1D; --cta2-fg:#fff;
}

/* ============ P10 — Crème & noir (haut de gamme, boutique) ============ */
:root[data-palette="p10"],[data-palette="p10"]{
  --bg:#F5F1E8; --paper:#FFFEFA; --line:#E4DDD0; --field:#F3EEE3;
  --brand:#1A1A1A; --brand-d:#000000; --brand-t:#ece7de;
  --hero-bg:#141414; --hero-fg:#FAF6EE; --hero-sub:#B9B2A6; --hero-accent:#D6B87E;
  --hero-glow:rgba(214,184,126,.10);
  --pillars-bg:#1D1B17; --pillars-fg:#FAF6EE; --pillars-sub:#B9B2A6;
  --pill-ico-bg:rgba(214,184,126,.12); --pill-ico-line:rgba(214,184,126,.34); --pill-ico-fg:#D6B87E;
  --trust-bg:rgba(250,246,238,.05); --trust-line:rgba(250,246,238,.11); --trust-fg:#B9B2A6;
  --band-cap:#cfc5b2; --cta2-bg:#141414; --cta2-fg:#FAF6EE;
  --header-bg:rgba(255,254,250,.92);
}