/* Thème : polices, couleurs et fonds.
   Mode sombre (par défaut) : fond vert très foncé avec feuillage posé une fois en haut de page, bandeau vert sous-bois,
   cartes vert forêt à texte clair. Mode clair : fond crème avec feuillage clair posé une fois en haut de page,
   bandeau vert, cartes crème à texte vert.
   Pour changer d'habillage, remplacer ce fichier (le reste du CSS est sans couleur propre). */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  /* palette de marque */
  --shakapa-vert-fonce: #244936;    /* eucalyptus forêt */
  --shakapa-vert-profond: #315B47;  /* eucalyptus profond */
  --shakapa-vert-clair: #E5EDE5;    /* vert crème */
  --shakapa-sous-bois: #294536;     /* vert sous-bois : bandeau (thème sombre) */
  --shakapa-or-vegetal: #997342;    /* or végétal (ancien) */

  /* thème clair (21/10/2026) */
  --shakapa-header: #3D5D49;        /* bandeau */
  --shakapa-cards: #ECEDE1;         /* cartes */
  --shakapa-titles: #365B49;        /* titres */
  --shakapa-text: #607969;          /* texte */
  --shakapa-gold: #A47C42;          /* or : accents et icônes (copié dans site/assets/icons/*.svg) */
  --shakapa-background: #E3E9DA;    /* fond de page */
  --shakapa-card-hover: #F5F4E9;    /* cartes au survol */
  --shakapa-text-on-dark: #F0F0E3;  /* texte sur bandeau et pied de page */
  --shakapa-border: #D0D8C9;        /* bordure des cartes */

  --font-body: 'Jost', system-ui, sans-serif;
  --font-display: 'Jost', system-ui, sans-serif;

  /* page, mode sombre (défaut) */
  --bg: #112217;
  --bg-alt: #344E3B;
  --ink: #F0F0E3;
  --ink-soft: #D6E0CF;
  --gold: #C8A66A;
  --gold-deep: #C8A66A;
  --green: #D6E0CF;
  --green-deep: #F0F0E3;
  --on-accent: #112217;
  --overlay: rgba(6, 16, 10, 0.65);
  --border: #69806A;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
  --header-bg: var(--shakapa-sous-bois);
  --text-panel: rgba(17, 34, 23, 0.58);   /* fond léger des textes posés sur la photo */

  /* cartes et blocs de texte (cartes, menus, fenêtres) */
  --surface: #344E3B;
  --card-hover: #405D47;
  --card-title: #F0F0E3;
  --card-ink: #F0F0E3;
  --card-ink-soft: #D6E0CF;
  --card-gold: #C8A66A;
  --card-gold-deep: #C8A66A;
  --card-green: #C8A66A;
  --card-on-accent: #112217;
  --card-border: #69806A;
  --card-input-bg: #243a2b;
  --card-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.6);
  --card-radius: 20px;
  --card-error: #ffb4a2;
}

:root[data-theme="light"] {
  /* page, mode clair : fond crème avec feuillage posé une fois en haut de page, texte vert */
  --bg: var(--shakapa-background);
  --bg-alt: var(--shakapa-cards);
  --ink: var(--shakapa-titles);
  --ink-soft: var(--shakapa-text);
  --gold: var(--shakapa-gold);
  --gold-deep: #8f6c32;
  --green: var(--shakapa-titles);
  --green-deep: var(--shakapa-titles);
  --on-accent: #ffffff;
  --overlay: rgba(10, 24, 16, 0.45);
  --border: rgba(54, 91, 73, 0.2);
  --shadow: 0 14px 34px -22px rgba(54, 91, 73, 0.45);
  --header-bg: var(--shakapa-header);
  --text-panel: rgba(236, 237, 225, 0.62);

  --surface: var(--shakapa-cards);
  --card-hover: var(--shakapa-card-hover);
  --card-title: var(--shakapa-titles);
  --card-ink: var(--shakapa-titles);
  --card-ink-soft: var(--shakapa-text);
  --card-gold: var(--shakapa-gold);
  --card-gold-deep: #8f6c32;
  --card-green: var(--shakapa-titles);
  --card-on-accent: #ffffff;
  --card-border: var(--shakapa-border);
  --card-input-bg: #ffffff;
  --card-shadow: 0 14px 34px -22px rgba(54, 91, 73, 0.5);
  --card-radius: 20px;
  --card-error: #9c2f1f;
}
/* surfaces (cartes, blocs, menus, fenêtres) : leurs couleurs viennent des variables --card-* du mode courant */
.axis-card,
.brand-card,
.tool-card,
.plan-card,
.notice,
.legal,
.faq,
.about-block,
.theme-list,
.modal,
.desc-menu-list,
.desc-menu-toggle,
.nav-panel,
.presentation,
.consultation-description,
.rdv-dialog,
.shop-filters,
.shop-product-info {
  --bg: var(--card-input-bg);
  --bg-alt: var(--surface);
  --ink: var(--card-ink);
  --ink-soft: var(--card-ink-soft);
  --gold: var(--card-gold);
  --gold-deep: var(--card-gold-deep);
  --green: var(--card-green);
  --green-deep: var(--card-title);
  --on-accent: var(--card-on-accent);
  --border: var(--card-border);
  --shadow: var(--card-shadow);
  --error: var(--card-error);
  color: var(--ink);
}

/* « :root » en tête : les règles passent devant celles de style.css, chargé après ce fichier */
:root .axis-card,
:root .brand-card,
:root .tool-card,
:root .plan-card,
:root .notice,
:root .legal,
:root .faq,
:root .about-block,
:root .theme-list,
:root .modal,
:root .desc-menu-list,
:root .nav-panel,
:root .presentation,
:root .consultation-description,
:root .rdv-dialog,
:root .shop-filters,
:root .shop-product-info {
  border-radius: var(--card-radius);
}

:root .axis-card,
:root .brand-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.3s ease;
}

:root .axis-card:hover,
:root .brand-card:hover {
  background-color: var(--card-hover);
}

/* identité : nom du site en capitales grasses */
:root .wordmark {
  text-transform: uppercase;
  font-weight: 700;
}

/* bandeau d'en-tête : fond distinct de la page, texte clair */
:root .site-header {
  --ink: #F0F0E3;
  --ink-soft: #D6E0CF;
  --gold: #C8A66A;
  --gold-deep: #E3D2A8;
  --green: #D6E0CF;
  --green-deep: #F0F0E3;
  --on-accent: #112217;
  --border: rgba(240, 240, 227, 0.32);
  background: var(--header-bg);
  color: var(--ink);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.6);
}

/* icônes du thème sombre : l'or des icônes (#A47C42) est éclairci vers #C8A66A */
:root:not([data-theme="light"]) .axis-icon {
  filter: brightness(1.28) saturate(0.75);
}

/* fond sombre : couleur unie portée par <html>, feuillage posé une seule fois en haut de page (sans répétition),
   fondu vers la couleur de fond sur ses derniers 22 % */
:root:not([data-theme="light"]) {
  background-color: var(--bg);
}

:root:not([data-theme="light"]) body {
  position: relative;
  background: none;
}

:root:not([data-theme="light"]) body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: min(1672px, 100%);
  background-image: url('bg-dark-v2.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
  pointer-events: none;
}

/* fond clair : couleur unie portée par <html>, feuillage posé une seule fois en haut de page (1672 px de haut, pleine largeur),
   fondu vers la couleur de fond sur ses derniers 22 % */
:root[data-theme="light"] {
  background-color: var(--bg);
}

:root[data-theme="light"] body {
  position: relative;
  background: none;
}

:root[data-theme="light"] body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(1672px, 100%);
  background-image: url('bg-light-v2.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
  pointer-events: none;
}

/* coins des cartes : 16 px sur téléphone */
@media (max-width: 768px) {
  :root,
  :root[data-theme="light"] {
    --card-radius: 16px;
  }
}

/* thème clair : survol des cartes (fond plus clair, ombre douce, léger soulèvement) */
:root[data-theme="light"] .axis-card:hover,
:root[data-theme="light"] .brand-card:hover {
  background-color: var(--card-hover);
  box-shadow: 0 8px 24px rgba(54, 91, 73, 0.12);
  transform: translateY(-3px);
}

/* thème clair : le pied de page est un bandeau de la couleur du header, texte clair */
:root[data-theme="light"] .site-header {
  --gold-deep: #ffffff;
}

:root[data-theme="light"] .site-footer {
  --ink: var(--shakapa-text-on-dark);
  --ink-soft: var(--shakapa-text-on-dark);
  --gold-deep: #ffffff;
  --border: rgba(240, 240, 227, 0.35);
  background-color: var(--header-bg);
  color: var(--shakapa-text-on-dark);
}

/* mobile : le feuillage clair garde sa hauteur et se recadre au centre */
@media (max-width: 768px) {
  :root[data-theme="light"] body::before {
    background-size: auto 1672px;
    background-position: top center;
  }
}

/* animations réduites si le visiteur le demande */
@media (prefers-reduced-motion: reduce) {
  :root .axis-card,
  :root .brand-card {
    transition: none;
  }

  :root .axis-card:hover,
  :root .brand-card:hover,
  :root[data-theme="light"] .axis-card:hover,
  :root[data-theme="light"] .brand-card:hover {
    transform: none;
  }
}

/* textes posés directement sur la photo (titres de page, introduction, notes) : surlignage léger, ligne par ligne, sur le texte seul
   (le <span class="hl"> pose le fond ; les blocs eux-mêmes n'ont pas de fond) */
:root .hl {
  background-color: var(--text-panel);
  padding: 0.12em 0.6em;
  border-radius: 0.55em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.75;
}

:root .sort-toggle-btn:not(.is-active) {
  background-color: var(--text-panel);
}