/* ==========================================================================
   Burnout Fuel — feuille de style de marque (le SEUL CSS personnalisé)
   --------------------------------------------------------------------------
   Tout le reste vient de Bootstrap 5.3 : thème sombre natif grâce à
   <html data-bs-theme="dark">, grille, composants et classes utilitaires.
   Ici on ne règle que l'IDENTITÉ DE MARQUE :
     1. les couleurs  (noir chaud, rouge Burnout, une teinte par goût)
     2. la typographie (Fullerton pour les grands titres, Montserrat pour le reste)
     3. quelques détails de style (cartes, boutons, menu)
   Les polices elles-mêmes sont déclarées dans polices.css.
   ========================================================================== */

/* 1. COULEURS ---------------------------------------------------------------- */
:root {
  --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bf-font-titre: "Fullerton", "Montserrat", Georgia, serif;

  --rouge: #d62839;         /* fonds et boutons (texte blanc dessus : contraste 5:1)  */
  --rouge-texte: #ff5468;   /* rouge pour le texte sur fond sombre (contraste 6:1)   */

  /* une teinte par goût, lisible sur fond sombre */
  --gamme-inferno: #f2556b;  /* Inferno Berry      */
  --gamme-citrus:  #9bd66b;  /* Dark Citrus Shock  */
  --gamme-solar:   #f5a54c;  /* Solar Ember        */
  --gamme-frost:   #5cc6f2;  /* Frost Riot         */
  --gamme-pink:    #f4b3d2;  /* Pink Fury (rose pâle) */
  --gamme-abyss:   #a6a2f2;  /* Abyss Surge        */
  --gamme-or:      #e8b94a;  /* touche dorée (baril) */
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0a0a0b;          --bs-body-bg-rgb: 10, 10, 11;
  --bs-body-color: #f3f1ec;       --bs-body-color-rgb: 243, 241, 236;
  --bs-secondary-color: rgba(243, 241, 236, .7);
  --bs-secondary-bg: #1a1a1d;     --bs-secondary-bg-rgb: 26, 26, 29;
  --bs-tertiary-bg: #131315;      --bs-tertiary-bg-rgb: 19, 19, 21;
  --bs-border-color: #2a2a2e;

  /* tout ce que Bootstrap dérive de sa couleur « primary » passe au rouge Burnout */
  --bs-primary: #d62839;          --bs-primary-rgb: 214, 40, 57;
  --bs-primary-text-emphasis: #ff5468;
  --bs-primary-bg-subtle: #2a1014;
  --bs-primary-border-subtle: #6e1c27;
  --bs-link-color: #ff5468;       --bs-link-color-rgb: 255, 84, 104;
  --bs-link-hover-color: #ff8795; --bs-link-hover-color-rgb: 255, 135, 149;
  --bs-focus-ring-color: rgba(214, 40, 57, .45);
}

/* La couleur du goût (--gamme) est posée par les classes gamme-… sur un bloc
   et reprise par tout ce qu'il contient. */
.gamme-inferno { --gamme: var(--gamme-inferno); }
.gamme-citrus  { --gamme: var(--gamme-citrus); }
.gamme-solar   { --gamme: var(--gamme-solar); }
.gamme-frost   { --gamme: var(--gamme-frost); }
.gamme-pink    { --gamme: var(--gamme-pink); }
.gamme-abyss   { --gamme: var(--gamme-abyss); }
.gamme-or      { --gamme: var(--gamme-or); }

/* 2. TYPOGRAPHIE ------------------------------------------------------------- */
/* Fullerton : marque et titres h1 à h3 (grands formats). Menu, boutons, textes : Montserrat. */
h1, h2, h3, .font-titre, .navbar-brand {
  font-family: var(--bf-font-titre);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .02em;
}
.font-texte { font-family: var(--bs-font-sans-serif); letter-spacing: normal; }
.surtitre   { text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 600; color: var(--rouge-texte); }
.texte-gamme { color: var(--gamme, var(--rouge-texte)); }

/* 3. DÉTAILS DE STYLE ---------------------------------------------------------- */
.fond-gamme { background-color: var(--gamme, var(--rouge)); color: #0a0a0b; }
.pastille   { display: inline-block; padding: .25em .75em; border: 1px solid color-mix(in srgb, var(--gamme, #888) 55%, transparent); border-radius: 50rem; color: var(--gamme, var(--bs-secondary-color)); font-size: .8rem; font-weight: 500; }
.avatar     { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }

/* carte : fond légèrement plus clair que la page, filet fin ; « accent » ajoute un trait de la couleur du goût */
.carte-marque { background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.accent-haut  { border-top: 3px solid var(--gamme, var(--rouge)); }
.trait-marque { width: 3rem; height: 3px; margin: 1rem auto; border: 0; opacity: 1; background: var(--rouge); }

/* en-tête de page : photo assombrie */
.voile-hero { background: linear-gradient(180deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, .8) 70%, var(--bs-body-bg) 100%); }

/* frise de l'histoire */
.frise       { border-left: 2px solid var(--bs-border-color); }
.point-marque { background-color: var(--rouge); }

/* 4. COMPOSANTS BOOTSTRAP RECOLORÉS ------------------------------------------- */
/* menu */
.navbar { border-bottom: 1px solid var(--bs-border-color); }
.navbar-brand { font-size: 1.9rem; }
.navbar .nav-link { position: relative; font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
.navbar .nav-link::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .1rem; height: 2px; background: var(--rouge); transform: scaleX(0); transition: transform .2s ease; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link.active { color: var(--bs-body-color); }

/* boutons : rouge Burnout plein, texte blanc */
.btn { font-weight: 600; }
.btn-primary {
  --bs-btn-bg: #d62839;       --bs-btn-border-color: #d62839;
  --bs-btn-hover-bg: #bd1f2f; --bs-btn-hover-border-color: #bd1f2f;
  --bs-btn-active-bg: #a31a28; --bs-btn-active-border-color: #a31a28;
  --bs-btn-disabled-bg: #d62839; --bs-btn-disabled-border-color: #d62839;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 214, 40, 57;
}
.btn-outline-light { --bs-btn-border-color: rgba(243, 241, 236, .4); }

/* dans un goût : les boutons prennent la teinte du goût (texte noir : contraste > 8:1) */
.gamme .btn-primary {
  --bs-btn-bg: var(--gamme);   --bs-btn-border-color: var(--gamme);
  --bs-btn-hover-bg: color-mix(in srgb, var(--gamme) 80%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--gamme) 80%, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--gamme) 65%, #fff); --bs-btn-active-border-color: color-mix(in srgb, var(--gamme) 65%, #fff);
  --bs-btn-disabled-bg: var(--gamme); --bs-btn-disabled-border-color: var(--gamme);
  --bs-btn-color: #0a0a0b; --bs-btn-hover-color: #0a0a0b; --bs-btn-active-color: #0a0a0b;
}
.gamme .btn-outline-light { --bs-btn-active-bg: var(--gamme); --bs-btn-active-border-color: var(--gamme); --bs-btn-active-color: #0a0a0b; }

/* onglets des goûts */
.nav-pills .nav-link {
  --bs-nav-pills-link-active-bg: var(--gamme); --bs-nav-pills-link-active-color: #0a0a0b;
  color: var(--bs-body-color); font-weight: 600; font-size: .9rem;
  border: 1px solid var(--bs-border-color); border-radius: 50rem;
}
.nav-pills .nav-link.active { border-color: var(--gamme); }

/* formulaires, cases à cocher, accordéon : le bleu de Bootstrap devient rouge */
.form-control:focus, .form-select:focus { border-color: var(--rouge-texte); box-shadow: 0 0 0 .2rem rgba(214, 40, 57, .3); }
.form-check-input:checked { background-color: var(--rouge); border-color: var(--rouge); }
.form-check-input:focus { border-color: var(--rouge-texte); box-shadow: 0 0 0 .25rem rgba(214, 40, 57, .3); }
.accordion-button { font-family: var(--bs-font-sans-serif); font-weight: 600; letter-spacing: normal; }
.accordion {
  --bs-accordion-bg: var(--bs-tertiary-bg);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-active-bg: #1c1214;
  --bs-accordion-active-color: #ff5468;
  --bs-accordion-btn-focus-border-color: var(--rouge-texte);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(214, 40, 57, .3);
}

/* les liens d'ancre (#boissons…) ne passent pas sous le menu collant */
section[id] { scroll-margin-top: 4.5rem; }

/* 5. MOUVEMENT — uniquement si le visiteur n'a pas demandé « réduire les animations » */
@media (prefers-reduced-motion: no-preference) {
  .survol { transition: transform .2s ease, border-color .2s ease; }
  .survol:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gamme, var(--rouge)) 70%, var(--bs-border-color)); }
}