/* =====================================================================
   Global Ricardi — thème « sombre adouci » (12/10/2026)
   ---------------------------------------------------------------------
   Même mise en page, mêmes polices, même blason. Le noir s'éclaircit vers
   un anthracite chaud, l'or perd de son éclat et se fait plus rare.
   Le build l'ajoute en DERNIER dans le <helmet> de chaque page (sauf le
   pré-rapport, dont la mise en page d'impression est fixée) : il surclasse
   les réglages de la page sans y toucher. Les éléments d'origine (orbite
   du haut de page, voyants, reflets, films) gardent leur dessin.
   Contrastes (WCAG) sur le fond #1c1f24 : texte 15,3:1 · secondaire 11:1 ·
   tertiaire 7,4:1 · or 7,9:1.
   ===================================================================== */
:root {
  --bg-page: #1c1f24;
  --bg-surface: #23262b;
  --bg-surface-raised: #2a2d33;
  --bg-inset: #2a2d33;
  --bg-ebene: #221f1b;
  --text-primary: #f4f0e7;
  --text-secondary: #cfd3d9;
  --text-tertiary: #a9b0b9;
  --accent-gold: #d2b46e;
  --accent-gold-strong: #c9a85c;
  --border-subtle: #353a42;
  --border-gold: rgba(210, 180, 110, 0.38);
  --gold-300: #dcc48b;
  --link: #d2b46e;
  --link-hover: #e2cd96;
  --focus-ring: #d2b46e;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 34px -16px rgba(0, 0, 0, 0.45);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.28), 0 24px 48px -22px rgba(0, 0, 0, 0.5);
  --shadow-gold-glow: 0 0 0 1px rgba(210, 180, 110, 0.22);
}
body { background: var(--bg-page); }
a:hover { color: var(--link-hover); }

/* En-tête et barre d'appel du bas : verre anthracite */
header { background: rgba(28, 31, 36, 0.94) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-cta-bas] { background: rgba(28, 31, 36, 0.97) !important; }

/* Rythme des sections : anthracite / anthracite relevé, filet d'or plus léger */
section[style*="background: var(--bg-surface)"] { --bg-surface: #23262b; }
section, footer { border-image: linear-gradient(90deg, rgba(210, 180, 110, 0) 8%, rgba(210, 180, 110, 0.28) 50%, rgba(210, 180, 110, 0) 92%) 1 !important; }
section[style*="background: var(--bg-paper)"] { background: #f4efe4 !important; }
footer { background: var(--bg-ebene) !important; }

/* Textes : les gris codés en dur par les pages suivent la nouvelle palette */
section p[style*="color: var(--text-secondary)"] { color: var(--text-secondary) !important; }
section:not([style*="paper"]) h2 + p:not([data-formule]) { color: #e9e5dc !important; }

/* Boutons pleins : or adouci, encre */
[style*="background: var(--accent-gold)"][style*="color: var(--ink-950)"] {
  background: #d2b46e !important; color: #171b22 !important; border-color: #d2b46e !important; }
[style*="background: var(--accent-gold)"][style*="color: var(--ink-950)"]:hover { background: #e0c789 !important; }

/* Les films de motion design ont été composés sur le noir d'origine : leur
   cadre garde donc l'écrin d'origine (fond encre, filet d'or franc), pour
   que le film ne paraisse pas posé comme un trou dans l'anthracite. */
[data-cadre-film] { background: #0a0c0f !important; border-color: #c69a34 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55) !important; }
[data-format-film] { background: #0a0c0f !important; border-color: #2b323c !important; }
[data-cadre-film] [style*="color: var(--text-tertiary)"] { color: #828b97 !important; }

/* Cartes ouvertes (sans cadre) : au survol, pas de rectangle collé au texte —
   seul le filet d'or supérieur s'illumine. */
section [data-cartes-ouvertes] > div[data-reveal]:hover,
section [data-cartes-ouvertes] > div:hover {
  box-shadow: none !important; border-color: transparent !important;
  border-top-color: var(--accent-gold) !important; }
section [data-cartes-ouvertes] > div { transition: border-color .3s var(--ease-standard), opacity 1.05s cubic-bezier(0.19, 1, 0.22, 1), transform 1.05s cubic-bezier(0.19, 1, 0.22, 1) !important; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
::selection { background: rgba(210, 180, 110, 0.35); color: #fff; }

/* ── Pastille « Espace client » du menu (12/10/2026) ──────────────────────
   Le lien vers la connexion devient une petite pastille : filet d'or fin,
   cadenas dessiné en CSS, même typographie que le reste du menu. Les pages
   ne sont pas touchées : la règle vise le lien par son adresse, dans le
   menu de l'en-tête seulement (le pied de page garde un lien simple). Le
   bandeau d'annonce, lui, porte ses propres styles (bandeau.js). */
header nav a[href="connexion.html"], header nav a[href="/connexion.html"],
header nav a[href="connexion"], header nav a[href="/connexion"] {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 8px 13px 8px 12px !important;
  border: 1px solid rgba(210, 180, 110, 0.42); border-radius: 999px;
  line-height: 1 !important;
  transition: color .24s var(--ease-standard), border-color .24s var(--ease-standard), background-color .24s var(--ease-standard);
}
header nav a[href="connexion.html"]::before, header nav a[href="/connexion.html"]::before,
header nav a[href="connexion"]::before, header nav a[href="/connexion"]::before {
  content: ""; flex: none; width: 10px; height: 12px; margin-top: -1px;
  background-color: var(--accent-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='.6' y='5.1' width='8.8' height='6.3' rx='1'/%3E%3Cpath d='M2.7 5.1V3.4a2.3 2.3 0 0 1 4.6 0v1.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='.6' y='5.1' width='8.8' height='6.3' rx='1'/%3E%3Cpath d='M2.7 5.1V3.4a2.3 2.3 0 0 1 4.6 0v1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
header nav a[href="connexion.html"]:hover, header nav a[href="/connexion.html"]:hover,
header nav a[href="connexion"]:hover, header nav a[href="/connexion"]:hover {
  border-color: var(--accent-gold); background-color: rgba(210, 180, 110, 0.08); color: var(--accent-gold) !important;
}
/* Menu déroulant (tablette, téléphone) : la pastille ne s'étire pas en
   ligne de menu ; elle se pose sous la liste, alignée à gauche. */
@media (max-width: 1279px) {
  header input[data-burger]:checked ~ div nav a[href="connexion.html"],
  header input[data-burger]:checked ~ div nav a[href="/connexion.html"],
  header input[data-burger]:checked ~ div nav a[href="connexion"],
  header input[data-burger]:checked ~ div nav a[href="/connexion"] {
    display: inline-flex !important; align-self: flex-start; width: auto !important;
    margin-top: 16px; padding: 12px 18px 12px 16px !important;
    border: 1px solid rgba(210, 180, 110, 0.42) !important; border-radius: 999px;
    line-height: 1 !important;
  }
}