/* theme.css — visual theme rules (colors, footer visuals, accents)
   This file contains site-wide visual styles that are independent
   from layout/structure (which live in `base.css`) and from page-
   specific components (which live in each page CSS file).
*/

/* ==========================================
   DARK/LIGHT MODE THEME VARIABLES
   ========================================== */
/* Identite Kawasaki : --accent porte la MEME valeur dans les deux themes.
   Ce n'est pas une variable de theme mais un ancrage de marque, le lime KHI.
   Corollaire : #6ECD00 ne fait que 2.02:1 sur blanc, il est donc INTERDIT
   comme couleur de texte en theme clair. Le texte vert passe par
   --accent-text, les bordures par --accent-line. */
:root[data-theme="dark"] {
  --bg-primary: #0B0B0B;
  --bg-secondary: #171717;
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D4;
  --text-muted: #9A9A9A;

  /* Accent */
  --accent: #6ECD00;        /* aplats, filets, graphismes */
  --accent-ink: #0B0B0B;    /* encre posee SUR un aplat lime */
  --accent-text: #6ECD00;   /* le vert quand il est texte */
  --accent-line: #6ECD00;   /* le vert quand il est bordure */
  --accent-hover: #7BE000;  /* le contraste monte au survol, jamais l'inverse */
  --success: #6ECD00;

  /* Bloc carbone : noir bord a bord, identique dans les deux themes */
  --carbon: #171717;
  --carbon-text: #FFFFFF;

  --footer-bg: #0F0F0F;
  --footer-text: #B4B4B4;

  /* Surfaces et bordures : aplats OPAQUES, plus de degrades semi-transparents
     qui rendaient tout ratio de contraste non representatif du rendu. */
  --card-bg: #141414;
  --card-bg-hover: #1C1C1C;
  --border-color: #2E2E2E;      /* filet decoratif */
  --border-control: #6E6E6E;    /* bordure de controle, seuil 3:1 tenu */
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.3);

  /* Formulaires */
  --field-bg: #101010;
  --field-placeholder: #8F8F8F;
  --danger: #FF7A7A;

  /* Focus : anneau double, le second garantit la visibilite meme pose
     sur un aplat lime ou sur une photo */
  --focus-ring: #6ECD00;
  --focus-ring-outer: #0B0B0B;

  /* Navigation */
  --nav-active-bg: #6ECD00;
  --nav-active-fg: #0B0B0B;

  /* Surcharges des variables de base.css, pour que les deux themes soient
     symetriques : le bloc sombre ne les surchargeait pas jusqu'ici. */
  --bg: #0B0B0B;
  --text: #FFFFFF;
  --muted: #B4B4B4;
  --nav-bg: #0B0B0B;
}

:root[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F4F4F4;
  --text-primary: #0F0F0F;
  --text-secondary: #2A2A2A;
  --text-muted: #585858;

  /* Accent : meme lime pour les aplats, versions assombries pour le texte
     et les bordures, seules capables de tenir les seuils sur fond clair. */
  --accent: #6ECD00;
  --accent-ink: #0B0B0B;
  --accent-text: #3C7000;   /* 5.98:1 sur blanc */
  --accent-line: #4C8F00;   /* 4.01:1 sur blanc, seuil interface */
  --accent-hover: #5CAD00;
  --success: #3C7000;

  /* Le bloc carbone reste noir en theme clair : c'est la que l'accord
     lime sur noir de la livree survit au fond blanc. */
  --carbon: #0F0F0F;
  --carbon-text: #FFFFFF;

  --footer-bg: #0F0F0F;
  --footer-text: #B4B4B4;

  --card-bg: #F4F4F4;
  --card-bg-hover: #E9E9E9;
  --border-color: #E2E2E2;
  --border-control: #767676;
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1);

  --field-bg: #FFFFFF;
  --field-placeholder: #5F5F5F;
  --danger: #B3121C;

  --focus-ring: #3C7000;
  --focus-ring-outer: #0B0B0B;

  --nav-active-bg: #0F0F0F;
  --nav-active-fg: #FFFFFF;

  /* Override base.css variables for light mode */
  --bg: #FFFFFF;
  --text: #0F0F0F;
  --muted: #2A2A2A;
  --nav-bg: #FFFFFF;
}

/* Contexte carbone : un bloc noir inverse la polarite locale, il faut donc
   redeclarer les tokens de texte a l'interieur, pas seulement le fond.
   Sans cela, en theme clair, un surtitre vert dans un bloc carbone tombe a
   3.20:1 au lieu de 9.49:1. C'est le seul vrai piege du systeme. */
/* Cette liste ne doit contenir que les blocs carbone dans LES DEUX THEMES.
   Un bloc qui suit le theme (clair en clair, carbone en sombre) n'a rien a
   faire ici : les tokens globaux lui donnent deja la bonne polarite, et une
   redeclaration force du texte blanc sur un fond clair.
   C'est exactement ce qui est arrive aux heros : .hero, .about-hero et
   .contact-hero recevaient un degrade blanc par [data-theme="light"], et
   .gallery-hero / .stuff-hero demandaient var(--card-bg) -- que cette liste
   redeclarait a #141414 sur l'element meme, annulant l'intention. Resultat en
   theme clair : titre blanc sur blanc et cartes noires dans un heros clair.
   Verification : un selecteur n'entre ici que si aucune regle
   [data-theme="light"] ne lui donne un fond clair. */
.section--carbon,
footer,
#cookie-banner,
/* .hero est revenu dans cette liste le jour ou il a recu une photo de fond.
   Il etait sorti quand une regle [data-theme="light"] lui donnait un degrade
   blanc ; ce n'est plus le cas, la photo et son voile le rendent carbone dans
   les DEUX themes. Sans cette ligne, son titre tombe a 1.11:1 en theme clair. */
.hero,
/* Ces deux .hero-content sont, eux, reellement carbone dans les deux themes :
   essais-moto.css et guide-a2.css leur posent background: var(--carbon) sans
   contrepartie [data-theme="light"]. Le scope par page est obligatoire : en
   generique, .hero-content declarerait un contexte sombre sur la FAQ, dont le
   parent .faq-hero est clair, et on retomberait sur du blanc sur #F4F4F4. */
.essais-hero .hero-content,
.a2-hero .hero-content,
/* Les sept heros de page ont recu une photo de fond le meme jour que l'accueil,
   pour la meme raison : onze pages sur treize n'affichaient aucune des 53 photos
   du site. Ils sont donc carbone dans les DEUX themes, exactement comme .hero,
   et les regles [data-theme="light"] qui leur donnaient un aplat clair ont ete
   supprimees en meme temps (theme.css plus bas, gallery.css, stuff.css). Sans
   cette liste, leur titre passerait en #0F0F0F sur le voile sombre du bandeau. */
.hero-photo,
.item-media{
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D4;
  --muted: #B4B4B4;
  --text-muted: #9A9A9A;
  --accent-text: #6ECD00;
  --accent-line: #6ECD00;
  --border-control: #6E6E6E;
  --focus-ring: #6ECD00;

  /* --text doit etre redeclare AUSSI : base.css pose `p { color: var(--text) }`,
     une declaration directe sur p qui bat l'heritage. Sans cette ligne, en theme
     clair, le copyright prenait #0F0F0F sur un pied de page #0F0F0F, soit 1:1. */
  --text: #FFFFFF;

  /* Les surfaces imbriquees doivent basculer en valeurs sombres elles aussi,
     sinon une carte claire se retrouve dans un bloc noir et son texte vert
     #6ECD00 tombe a 1.66:1 sur #E9E9E9. */
  --bg-secondary: #171717;
  --card-bg: #141414;
  --card-bg-hover: #1C1C1C;
  --border-color: #2E2E2E;
}

/* Apply theme colors */
body {
  background-color: var(--bg-primary, #151515);
  color: var(--text-primary, #ffffff);
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav {
  background-color: var(--bg-secondary, rgba(53, 53, 53, 0.3));
}

/* Navigation links in light mode */
[data-theme="light"] nav a {
  color: #1a1a1a;
  font-weight: 500;
}

[data-theme="light"] nav {
  background: linear-gradient(180deg, rgba(245, 245, 245, 0.95) 0%, rgba(245, 245, 245, 0.85) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] nav a:hover {
  background: var(--card-bg-hover);
  color: var(--accent-text);
}

/* Light theme adjustments for desktop nav glass buttons */
@media (min-width: 769px) {
  [data-theme="light"] .nav-menu { background: transparent; border: none; box-shadow: none; }
  [data-theme="light"] .nav-menu a { background: transparent; border-color: var(--accent-line); }
  [data-theme="light"] .nav-menu a:hover { 
    background: transparent; 
    color: var(--accent-text);
    border-color: var(--accent-line);
  }
  [data-theme="light"] .nav-menu a.actual-page { 
    background: rgba(255,255,255,0.8); 
    border-color: var(--accent-line);
    color: var(--accent-text);
  }
}

/* Light theme: mobile hamburger menu */
@media (max-width: 768px) {
  /* Hamburger button */
  [data-theme="light"] .nav-toggle span {
    background: var(--accent);
  }
  
  /* Mobile menu panel */
  [data-theme="light"] nav ul {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 245, 0.98) 100%);
    border-bottom-color: var(--accent-line);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
  
  /* Mobile menu links */
  [data-theme="light"] nav ul li a { 
    border-color: var(--accent-line);
    background: transparent;
    color: #1a1a1a;
  }
  
  [data-theme="light"] nav ul li a:hover { 
    border-color: var(--accent-line);
    background: transparent;
    color: var(--accent-text);
  }
  
  [data-theme="light"] nav ul li a.actual-page { 
    border-color: var(--accent-line);
    color: var(--accent-text);
    background: rgba(255,255,255,0.8);
  }
  
  /* Mobile page title */
  [data-theme="light"] .nav-page-title {
    color: var(--accent-text);
  }
}

[data-theme="light"] nav a.actual-page { background: transparent; color: var(--accent-text); font-weight: 600; box-shadow: none; }

/* Theme toggle button */
#theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background-color: rgba(30, 30, 30, 0.95);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] #theme-toggle {
  background-color: rgba(255, 255, 255, 0.98);
  border: 2px solid var(--accent-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #theme-toggle:hover {
  background-color: var(--card-bg-hover);
  border-color: var(--accent-line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#theme-toggle:hover {
  background-color: var(--card-bg-hover);
  transform: rotate(20deg) scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

#theme-toggle svg {
  width: 22px;
  height: 22px;
  color: var(--accent-text);
  transition: transform 0.3s ease;
}

/* Scroll to top button */
#scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--card-bg-hover);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  /* Flou d'arriere-plan RETIRE pour la fluidite du defilement.
     Un backdrop-filter sur un element FIXE rechantillonne et refloute ce
     qui passe dessous a CHAQUE image. Le site en avait huit en permanence
     a l'ecran ; avec une photo plein ecran qui defile derriere, le cout
     devient considerable. Celui de <nav> est conserve : son fond est
     reellement transparent (0.2 a 0.4), le flou s'y voit. Ici le fond est
     deja quasi opaque, le flou ne se voyait pas. */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition-property: var(--anim-proprietes);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

#scroll-to-top:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
  transform: translateY(-4px) scale(1.1);
}

#scroll-to-top svg {
  width: 24px;
  height: 24px;
  color: var(--accent-text);
  transition: transform 0.3s ease;
}

#scroll-to-top:hover svg {
  transform: translateY(-2px);
}

[data-theme="light"] #scroll-to-top {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] #scroll-to-top:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
}

[data-theme="light"] #scroll-to-top svg {
  color: var(--accent-text);
}

[data-theme="light"] #theme-toggle svg {
  color: var(--accent-text);
}

/* Mobile: reposition theme toggle below nav */
@media (max-width: 600px) {
  #theme-toggle {
    top: 90px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
  
  #theme-toggle svg {
    width: 20px;
    height: 20px;
  }
}

/* Footer visuals */
footer {
  /* Le fond etait fige en sombre alors que la couleur du texte suivait le
     theme : en theme clair on obtenait du quasi noir sur gris fonce (1.44:1). */
  background: var(--footer-bg, #2d2d2d);
  color: var(--footer-text, #ffffff);
  margin-top: 40px;
  padding: 30px 30px 20px 30px;
  border-top: 2px solid var(--accent-line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

@media (max-width: 768px) {
  footer {
    padding: 24px 16px;
    margin-top: 24px;
  }
  
  footer p {
    font-size: 14px;
  }
}

footer p {
  font-size: 16px;
  max-width: none;
  margin: 0 auto;
}

/* Links (visual treatment) */
a { color: var(--text-muted, rgba(255, 255, 255, 0.6)); }
a:hover, a:focus { color: var(--text-primary, #ffffff); }

/* Accent / brand color */
.marque { color: var(--accent-text); font-weight: bold; }

/* Small helper for accessible focus outlines */
a:focus { outline: 3px solid var(--accent-line); outline-offset: 2px; }
[data-theme="light"] a:focus { outline-color: var(--accent-line); }

/* Refined focus-visible overrides for light theme & key interactive elements */
[data-theme="light"] a:focus-visible,
[data-theme="light"] button:focus-visible,
[data-theme="light"] input:focus-visible,
[data-theme="light"] textarea:focus-visible,
[data-theme="light"] select:focus-visible,
[data-theme="light"] [role="button"]:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 3px;
}

/* Dark theme explicit focus-visible reinforcement */
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] select:focus-visible,
:root[data-theme="dark"] [role="button"]:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 3px;
}

/* Component-specific focus visibility */
#cookie-banner button:focus-visible,
.cookie-preferences-content button:focus-visible,
#cookie-settings-btn:focus-visible,
#theme-toggle:focus-visible,
#scroll-to-top:focus-visible,
#dev-notice-close:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 4px;
}
[data-theme="light"] #cookie-banner button:focus-visible,
[data-theme="light"] .cookie-preferences-content button:focus-visible,
[data-theme="light"] #cookie-settings-btn:focus-visible,
[data-theme="light"] #theme-toggle:focus-visible,
[data-theme="light"] #scroll-to-top:focus-visible,
[data-theme="light"] #dev-notice-close:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 4px;
}

/* Reduced motion additions (complement base.css) */
@media (prefers-reduced-motion: reduce) {
  /* Disable decorative underline expansion */
  h1::after, h2::after, h3::after { transition-duration: 0.15s !important; }
  h1:hover::after,
  h2:hover::after,
  h3:hover::after { width: 0 !important; }
  /* Les transformations au survol sont neutralisees ici pour les COMMANDES
   FLOTTANTES et les boutons, pas pour les cartes de contenu.
   Les cartes en ont ete retirees : elles portent desormais une ombre et un
   leger soulevement au survol, definis plus bas. Ce !important les annulait
   quelle que soit la feuille, c'etait la cause du rendu plat.
   #dev-notice-close a disparu avec la pop-up de developpement. */
#theme-toggle:hover,
#scroll-to-top:hover,
.cta-btn:hover,
#cookie-banner button:hover,
#cookie-settings-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}
  /* Ensure essential elements can still animate lightly */
  .anim-essential,
  [data-anim="essential"] {
    transition-duration: 0.15s !important;
    animation-duration: 0.15s !important;
  }
}

/* Complement: restore subtle transitions for cards under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .identity-card,
  .content-card,
  .social-card,
  .gallery-card,
  .series-card {
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  .identity-card:active,
  .content-card:active,
  .social-card:active,
  .gallery-card:active,
  .series-card:active { transform: translateY(2px) !important; }
}

/* Titres : plus de centrage force ni de soulignement au survol.
   Le `width: fit-content` + marges auto centrait TOUS les titres du site sur un
   axe unique, et le `::after` qui grandissait au survol faisait reagir un
   element non interactif, ce que `cursor: default` contredisait deja.
   Remplace par un filet lime STATIQUE, hierarchise par la taille du bloc. */
h1, h2, h3 {
  position: relative;
  display: block;
}

/* Barre de course sous les titres principaux */
h1::after,
h2::after {
  content: '';
  display: block;
  background: var(--accent);
}

h1::after {
  width: 72px;
  height: 8px;
  margin-top: var(--space-4);
}

h2::after {
  width: 48px;
  height: 4px;
  margin-top: var(--space-3);
}

/* Normalized main page title (same as About)
   Apply by adding class="page-title" to the page's main H1 */
.page-title {
  font-size: 2.5rem;
  margin: 2rem auto; /* same space above and below */
  text-align: center;
  width: fit-content; /* keep underline to text width */
}

.page-title .title-text {
  color: var(--text-primary);
}

/* Hover animation for paragraphs (subtle scale without underline) */
p {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: default;
}

p:not(.hero-subtitle):hover {
  transform: scale(1.01);
  color: rgba(255, 255, 255, 0.95);
}

/* :not() indispensable. Ce selecteur vaut (0,2,1) et battait
   .hero-photo .hero-subtitle (0,2,0) QUEL QUE SOIT l'ordre des feuilles : au
   survol, le sous-titre des huit bandeaux passait en noir sur le voile sombre,
   soit environ 1.3:1, donc invisible. La couleur etant un litteral, le bloc de
   contexte carbone ne pouvait pas la rattraper. */
[data-theme="light"] p:not(.hero-subtitle):hover {
  color: rgba(0, 0, 0, 0.9);
}

/* Social sidebar visuals */
.social-bar a {
  background-color: rgba(59, 59, 59, 0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  transition: background-color .2s ease, transform .2s ease, color .2s ease;
}

[data-theme="light"] .social-bar a {
  background-color: rgba(245, 245, 245, 0.95);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.social-bar a:hover,
.social-bar a:focus {
  background-color: var(--card-bg-hover);
  color: var(--accent-text);
  transform: translateY(-2px);
}

[data-theme="light"] .social-bar a:hover,
[data-theme="light"] .social-bar a:focus {
  background-color: var(--card-bg-hover);
  color: var(--accent-text);
  border-color: var(--accent-line);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Social icons sizing */
.social-bar a svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* Scroll to top button */
#scroll-to-top {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(30, 30, 30, 0.95);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9997;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] #scroll-to-top {
  background-color: rgba(255, 255, 255, 0.98);
  border: 2px solid var(--accent-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#scroll-to-top:hover {
  background-color: var(--card-bg-hover);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] #scroll-to-top:hover {
  background-color: var(--card-bg-hover);
  border-color: var(--accent-line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

#scroll-to-top svg {
  width: 24px;
  height: 24px;
  fill: var(--accent-text);
  transition: transform 0.3s ease;
}

[data-theme="light"] #scroll-to-top svg {
  fill: var(--accent-text);
}

#scroll-to-top:hover svg {
  transform: translateY(-2px);
}

/* .visible AJOUTE ici : scripts/features.js pose la classe 'visible' sur ce
   bouton au dela de 300px de defilement, alors que cette regle -- la seule
   qui retablisse display -- n'attendait que 'show', posee par aucun script
   du site. Le bouton restait donc en display: none EN PERMANENCE, sur
   toutes les pages : il n'a jamais fonctionne. */
#scroll-to-top.show,
#scroll-to-top.visible {
  display: flex;
  animation: fadeInButton 0.3s ease;
}

@keyframes fadeInButton {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cookie consent banner */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Surface tokenisee et non degrade : un background-image se peint PAR-DESSUS
     background-color, donc la regle de theme clair plus bas, qui ne redefinit
     que la couleur, ne pouvait pas l'effacer. */
  background: var(--carbon);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 2px solid var(--accent-line);
  padding: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 9999;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  animation: slideUpSmooth 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpSmooth {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Le bandeau reste CARBONE en theme clair, comme le pied de page : c'est un
   parti pris de la direction, l'accord lime sur noir rejoue au milieu d'une
   page claire. Le fond blanc qui etait impose ici contredisait en plus le bloc
   de tokens carbone, qui declare un contexte sombre pour ce bandeau : les
   boutons enfants heritaient de surfaces sombres posees sur un fond blanc. */
[data-theme="light"] #cookie-banner {
  background-color: var(--carbon);
  border-top: 4px solid var(--accent);
  box-shadow: none;
}

#cookie-banner p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  max-width: 600px;
}

[data-theme="light"] #cookie-banner p {
  /* Contexte carbone : le texte reste clair, comme en theme sombre. */
  color: var(--text-secondary);
}

#cookie-banner .cookie-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

#cookie-banner button {
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  font-family: var(--police-titre);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

#cookie-banner button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

#cookie-banner button:hover::before {
  width: 300px;
  height: 300px;
}

#cookie-accept {
  background: var(--accent);
  color: var(--accent-ink);
}

#cookie-accept:hover {
  background: var(--accent-hover);
  transform: translateY(-3px) scale(1.05);
}

#cookie-decline {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Sur un bandeau carbone, le bouton secondaire suit les tokens du contexte
   sombre : un fond noir a 6% et un texte #1a1a1a auraient donne du sombre
   sur sombre des que le bandeau est repasse en carbone. */
[data-theme="light"] #cookie-decline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-control);
}

#cookie-decline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

[data-theme="light"] #cookie-decline:hover {
  background-color: var(--card-bg-hover);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

/* Floating cookie settings button */
#cookie-settings-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  /* Idem : ce degrade sombre se peignait par-dessus le blanc de la regle de
     theme clair, qui ne pose qu'une background-color. Le bouton restait donc
     noir en theme clair, avec son libelle vert fonce a 2.48:1. */
  background: var(--card-bg);
  border: 2px solid var(--accent-line);
  color: var(--accent-text);
  padding: 14px 20px;
  border-radius: 999px;
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  z-index: 9998;
  /* Flou d'arriere-plan RETIRE pour la fluidite du defilement.
     Un backdrop-filter sur un element FIXE rechantillonne et refloute ce
     qui passe dessous a CHAQUE image. Le site en avait huit en permanence
     a l'ecran ; avec une photo plein ecran qui defile derriere, le cout
     devient considerable. Celui de <nav> est conserve : son fond est
     reellement transparent (0.2 a 0.4), le flou s'y voit. Ici le fond est
     deja quasi opaque, le flou ne se voyait pas. */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  display: none;
}

[data-theme="light"] #cookie-settings-btn {
  background-color: rgba(255, 255, 255, 0.98);
  border: 2px solid var(--accent-line);
  color: var(--accent-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#cookie-settings-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
  transform: translateX(8px) scale(1.08);
}

[data-theme="light"] #cookie-settings-btn:hover {
  background-color: var(--card-bg-hover);
  border-color: var(--accent-line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

#cookie-settings-btn:active {
  transform: translateY(0);
}

/* Responsive cookie banner */
@media (max-width: 768px) {
  #cookie-settings-btn {
    bottom: 80px;
    left: 16px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  #cookie-banner {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  #cookie-banner p {
    text-align: center;
    font-size: 13px;
  }
  
  #cookie-banner .cookie-buttons {
    width: 100%;
    justify-content: center;
  }
  
  #cookie-banner button {
    flex: 1;
    max-width: 150px;
  }
}

/* Development notice pop-up */
#dev-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

#dev-notice-content {
  background: linear-gradient(135deg, rgba(35, 35, 35, 0.98), rgba(45, 45, 45, 0.98));
  border: 2px solid var(--accent-line);
  border-radius: 20px;
  padding: 48px 56px;
  max-width: 550px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: popInBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popInBounce {
  0% { opacity: 0; transform: scale(0.7) translateY(-40px) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}

#dev-notice-content h2 {
  color: var(--accent-text);
  font-size: clamp(22px, 4vw, 28px);
  margin: 0 0 20px 0;
  font-weight: 700;
}

#dev-notice-content p {
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px 0;
}

#dev-notice-close {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 16px 40px;
  border-radius: 12px;
  font-family: var(--police-titre);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

#dev-notice-close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

#dev-notice-close:hover::before {
  width: 300px;
  height: 300px;
}

#dev-notice-close:hover {
  background: var(--accent-hover);
  transform: translateY(-4px) scale(1.08);
}

#dev-notice-close:active {
  transform: translateY(0);
}

/* Responsive dev notice */
@media (max-width: 700px) {
  #dev-notice-content {
    padding: 30px 25px;
    max-width: 90%;
  }
  
  #dev-notice-content h2 {
    font-size: 22px;
  }
  
  #dev-notice-content p {
    font-size: 14px;
  }
}

/* ==========================================
   LIGHT MODE: PAGE-SPECIFIC OVERRIDES
   ========================================== */

/* Hero sections (all pages) */
/* .hero a ete RETIRE de cette liste : depuis l'ajout de la photo d'accueil, il
   est carbone dans les deux themes (photo sombre + voile a 0.80-0.94). Ce
   degrade blanc etait de toute facon invisible, cache derriere la couche de
   l'image, mais il faussait la polarite : le titre prenait #0F0F0F sur un fond
   composite #1A1A1A, soit 1.11:1. Le heros figure desormais dans le bloc de
   contexte carbone en haut de ce fichier. */
/* .about-hero et .contact-hero ont ete RETIRES de cette regle pour la meme
   raison que .hero avant eux : ils portent desormais une photo de fond et son
   voile, donc ils sont carbone dans les deux themes. Leur laisser ce degrade
   blanc ne l'aurait pas rendu visible, il est cache sous la couche image, mais
   il faussait la polarite des tokens et le titre serait retombe en sombre sur
   sombre. Ils figurent maintenant dans le bloc de contexte carbone en haut.
   La regle est donc supprimee : elle n'avait plus aucun sujet. Ne pas la
   recycler sur .faq-hero, qui se gere seul dans faq.css avec var(--card-bg) et
   dont le commentaire dit explicitement qu'il refuse la regle claire globale. */

/* Token et non litteral : ces titres vivent souvent DANS un bloc carbone, qui
   reste noir en theme clair. Un #0a0a0a en dur y donnait 1.03:1, un titre
   litteralement invisible sur essais-moto. Le token vaut #0F0F0F sur fond
   clair et #FFFFFF dans un contexte carbone. */
[data-theme="light"] .hero-title,
[data-theme="light"] .cta-title,
[data-theme="light"] .section-title {
  color: var(--text-primary);
}

[data-theme="light"] .hero-title .title-text,
[data-theme="light"] .cta-title .title-text,
[data-theme="light"] .section-title .title-text {
  /* Meme regle qu'en sombre : le titre est en couleur pleine, le lime est
     reserve a la barre de course. */
  color: var(--text-primary);
}

[data-theme="light"] .hero-subtitle,
[data-theme="light"] .section-description {
  /* Meme raison : sous-titre de heros carbone, il tombait a 1.1:1. */
  color: var(--text-secondary);
}

/* Stats and badges */
[data-theme="light"] .stat-item {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
}

[data-theme="light"] .stat-number {
  color: var(--text-primary);
}

[data-theme="light"] .stat-label {
  color: var(--text-muted);
}

[data-theme="light"] .video-badge,
[data-theme="light"] .spec-badge {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

/* Heart badge (dark + light)
   Aplat opaque et non degrade translucide : a 0.45 d'alpha sur fond clair, le
   rouge remontait a rgb(255,190,190) et le libelle blanc tombait a 1.57:1.
   #B3121C tient 6.95:1 avec du blanc, dans les deux themes. */
.spec-badge.badge-heart,
.item-badge.badge-heart {
  background: #B3121C;
  border: 1px solid #8E0E16;
  color: #fff;
  text-shadow: none;
}

/* Tooltip system for badges */
.spec-badge[data-tooltip],
.item-badge[data-tooltip] {
  position: relative;
  cursor: help;
}

.spec-badge[data-tooltip]::before,
.item-badge[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 10px 14px;
  background: rgba(20, 20, 20, 0.98);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  max-width: none;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent-line);
  backdrop-filter: blur(8px);
}

.spec-badge[data-tooltip]::after,
.item-badge[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: rgba(20, 20, 20, 0.98);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1000;
}

.spec-badge[data-tooltip]:hover::before,
.item-badge[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.spec-badge[data-tooltip]:hover::after,
.item-badge[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Light mode tooltips */
[data-theme="light"] .spec-badge[data-tooltip]::before,
[data-theme="light"] .item-badge[data-tooltip]::before {
  background: rgba(255, 255, 255, 0.98);
  color: #0a0a0a;
  border-color: var(--accent-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .spec-badge[data-tooltip]::after,
[data-theme="light"] .item-badge[data-tooltip]::after {
  border-top-color: rgba(255, 255, 255, 0.98);
}

/* Mobile adjustments: center tooltip on screen */
@media (max-width: 600px) {
  .spec-badge[data-tooltip]::before,
  .item-badge[data-tooltip]::before {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50% !important;
    right: auto;
    transform: translate(-50%, -50%);
    display: block;
    width: calc(100vw - 40px);
    max-width: 320px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    padding: 14px 18px;
    box-sizing: border-box;
    margin: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .spec-badge[data-tooltip]:hover::before,
  .item-badge[data-tooltip]:hover::before {
    transform: translate(-50%, -50%);
  }

  .spec-badge[data-tooltip]::after,
  .item-badge[data-tooltip]::after {
    display: none;
  }

  [data-theme="light"] .spec-badge[data-tooltip]::after {
    display: none;
  }
}

/* Narrow desktop/tablette: autoriser retour à la ligne et largeur limitée */
@media (min-width: 601px) and (max-width: 900px) {
  .spec-badge[data-tooltip]::before,
  .item-badge[data-tooltip]::before {
    white-space: normal;
    max-width: 320px;
    text-align: center;
    line-height: 1.45;
  }
}

/* Cards (all pages: video, review, contact, about, stuff) */
[data-theme="light"] .video-card,
[data-theme="light"] .review-card,
[data-theme="light"] .identity-card,
[data-theme="light"] .content-card,
[data-theme="light"] .social-card,
[data-theme="light"] .equipment-card,
[data-theme="light"] .method-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 254, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .video-card:hover,
[data-theme="light"] .review-card:hover,
[data-theme="light"] .identity-card:hover,
[data-theme="light"] .content-card:hover,
[data-theme="light"] .social-card:hover,
[data-theme="light"] .equipment-card:hover,
[data-theme="light"] .method-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .video-title,
[data-theme="light"] .review-title,
[data-theme="light"] .card-title,
[data-theme="light"] .content-title,
[data-theme="light"] .social-title,
[data-theme="light"] .equipment-title,
[data-theme="light"] .method-title {
  color: #0a0a0a;
}

[data-theme="light"] .video-description,
[data-theme="light"] .review-description,
[data-theme="light"] .content-card p,
[data-theme="light"] .social-card p,
[data-theme="light"] .equipment-card p,
[data-theme="light"] .method-card p {
  color: rgba(0, 0, 0, 0.7);
}

/* Icons in cards */
[data-theme="light"] .card-icon,
[data-theme="light"] .content-icon,
[data-theme="light"] .social-icon,
[data-theme="light"] .equipment-icon,
[data-theme="light"] .method-icon {
  filter: none;
}

/* CTA sections */
[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 252, 0.98));
  border-color: var(--accent-line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cta-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 252, 0.98));
  border-color: var(--accent-line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cta-description {
  color: var(--text-secondary);
}

[data-theme="light"] .cta-btn.primary,
[data-theme="light"] .cta-button {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent-line);
}

[data-theme="light"] .cta-btn.primary:hover,
[data-theme="light"] .cta-button:hover {
  background: var(--accent-hover);
}

[data-theme="light"] .cta-btn.secondary {
  background: var(--card-bg-hover);
  color: var(--accent-text);
  border-color: var(--accent-line);
}

[data-theme="light"] .cta-btn.secondary:hover {
  background: var(--card-bg-hover);
}

/* Form elements (contact page) */
/* Ces surcharges de theme clair, anterieures au systeme de tokens, ecrasaient
   --border-control et --field-placeholder et faisaient chuter le contraste :
   la bordure du champ tombait a 1.41:1 contre un seuil de 3:1, et le
   placeholder a 2.85:1 contre 4.5:1. Mesure faite en compositant l'alpha sur
   le blanc reel de la page. La bordure etant le seul indice qu'il s'agit d'un
   champ, elle etait quasi invisible.
   Les tokens s'appliquent desormais dans les deux themes : --border-control
   vaut #767676 en clair, soit 4.54:1, et --field-placeholder #5F5F5F, 6.39:1. */

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus {
  border-color: var(--accent-line);
}

[data-theme="light"] .form-group label {
  color: var(--muted);
}

[data-theme="light"] .submit-btn {
  background: var(--accent);
  color: var(--accent-ink);
}

[data-theme="light"] .submit-btn:hover {
  background: var(--accent-hover);
}

/* Social handles and links */
[data-theme="light"] .social-handle {
  color: var(--accent-text);
}

[data-theme="light"] .social-handle:hover {
  color: var(--accent-text);
}

/* Special text classes */
[data-theme="light"] .highlight {
  color: var(--accent-text);
}

[data-theme="light"] .warning {
  color: #d97706;
}

[data-theme="light"] .teaser {
  color: var(--accent-text);
}

/* 404 page */
[data-theme="light"] .error-container {
  color: #0a0a0a;
}

[data-theme="light"] .error-code {
  color: var(--accent-text);
}

[data-theme="light"] .error-message {
  color: #0a0a0a;
}

[data-theme="light"] .error-description {
  color: rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .error-btn.error-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

[data-theme="light"] .error-btn.error-btn-primary:hover {
  background: var(--accent-hover);
}

[data-theme="light"] .error-btn.error-btn-secondary {
  background: var(--card-bg-hover);
  color: var(--accent-text);
  border-color: var(--accent-line);
}

[data-theme="light"] .error-btn.error-btn-secondary:hover {
  background: var(--card-bg-hover);
}

/* Cookie Preferences Modal */
#cookie-preferences {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

/* Hidden state for the modal. Uses a class instead of an inline style attribute
   so pages that declare style-src 'self' (no unsafe-inline) can still hide it.
   The id is repeated to beat the specificity of #cookie-preferences above. */
#cookie-preferences.is-hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cookie-preferences-content {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.98) 0%, rgba(25, 25, 25, 0.98) 100%);
  border: 2px solid var(--accent-line);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

[data-theme="light"] .cookie-preferences-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--accent-line);
}

.cookie-preferences-content h2 {
  margin: 0 0 16px 0;
  color: var(--accent-text);
  font-size: 24px;
  font-weight: 700;
}

[data-theme="light"] .cookie-preferences-content h2 {
  color: var(--accent-text);
}

.cookie-preferences-content > p {
  margin: 0 0 24px 0;
  color: #e0e0e0;
  font-size: var(--text-base);
  line-height: 1.6;
}

[data-theme="light"] .cookie-preferences-content > p {
  color: #1a1a1a;
}

.cookie-category {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--card-bg-hover);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
}

[data-theme="light"] .cookie-category {
  background: var(--card-bg-hover);
  border-color: var(--accent-line);
}

.cookie-category label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #fff;
  font-size: var(--text-base);
}

[data-theme="light"] .cookie-category label {
  color: #1a1a1a;
}

.cookie-category input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent);
}

.cookie-category input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cookie-desc {
  margin: 8px 0 0 32px;
  color: #999;
  font-size: 13px;
  line-height: 1.5;
}

[data-theme="light"] .cookie-desc {
  color: #666;
}

.cookie-preferences-content .cookie-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.cookie-preferences-content button {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-family: var(--police-titre);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#cookie-save-prefs {
  background: var(--accent);
  color: var(--accent-ink);
}

#cookie-save-prefs:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

#cookie-cancel-prefs {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="light"] #cookie-cancel-prefs {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.1);
}

#cookie-cancel-prefs:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

[data-theme="light"] #cookie-cancel-prefs:hover {
  background: rgba(0, 0, 0, 0.08);
}

#cookie-customize {
  background: var(--card-bg-hover);
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
}

[data-theme="light"] #cookie-customize {
  background: var(--card-bg-hover);
  color: var(--accent-text);
  border-color: var(--accent-line);
}

#cookie-customize:hover {
  background: var(--card-bg-hover);
  transform: translateY(-2px);
}

[data-theme="light"] #cookie-customize:hover {
  background: var(--card-bg-hover);
}

/* Cookie banner link */
#cookie-banner a {
  color: var(--accent-text);
  text-decoration: underline;
  transition: opacity 0.2s;
}

#cookie-banner a:hover {
  opacity: 0.8;
}

[data-theme="light"] #cookie-banner a {
  color: var(--accent-text);
}

/* Footer legal links - positioned bottom right */
footer a {
  /* Ces liens faisaient 17px de haut, quasi impossibles a viser au doigt.
     Une seule declaration de display : il y en avait deux, inline-flex puis
     inline-block, et la seconde gagnait, ce qui rendait align-items inerte. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  font-size: var(--text-sm, 14px);
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 400;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
  margin: 0 4px;
}

footer a:hover {
  text-decoration: underline;
}

[data-theme="light"] footer a {
  color: var(--accent-text);
}

footer span {
  /* 11px etait le plus petit texte du site, et l'opacite de 0.5 ramenait le
     contraste a 2.12:1. La hierarchie passe par la couleur, pas par l'opacite. */
  font-size: var(--text-sm, 14px);
  color: var(--text-muted, #9a9a9a);
  user-select: none;
  margin: 0 4px;
}

footer p {
  margin: 0 0 12px 0;
}

@media (max-width: 768px) {
  .cookie-preferences-content {
    padding: 24px;
  }
  
  .cookie-preferences-content h2 {
    font-size: 20px;
  }
  
  .cookie-preferences-content .cookie-buttons {
    flex-direction: column;
  }
  
  #cookie-banner {
    flex-direction: column;
    padding: 20px;
    gap: 16px;
  }
  
  #cookie-banner .cookie-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  #cookie-banner button {
    width: 100%;
  }
  
  footer nav {
    position: static;
    justify-content: center;
    margin-top: 16px;
    font-size: 12px;
    flex-direction: column;
    gap: 8px;
  }
  
  footer nav span {
    display: none;
  }
}



/* ==========================================================================
   PROFONDEUR DES CARTES
   Place ici et non dans la feuille de la page d'accueil : ces cartes existent
   sur toutes les pages, les laisser plates ailleurs creerait une incoherence
   pire que les deux extremes.
   Annule l'appauvrissement d'une passe precedente, ou 48 "box-shadow: none"
   avaient ete poses au nom de la sobriete. Une ombre mesuree ne nuit ni au
   contraste ni a la retenue : elle dit que l'element occupe un espace.
   ========================================================================== */
/* --------------------------------------------------------------------------
   3. LA PROFONDEUR RENDUE AUX CARTES
   J'avais pose box-shadow: none partout. Une ombre portee mesuree ne nuit ni
   au contraste ni a la sobriete : elle dit simplement que l'element existe
   dans l'espace.
   -------------------------------------------------------------------------- */

.video-card,
.review-card,
.method-card,
.identity-card,
.content-card,
.equipment-card {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}

.video-card:hover,
.review-card:hover,
.method-card:hover,
.identity-card:hover,
.content-card:hover,
.equipment-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48),
              0 0 0 1px rgba(110, 205, 0, 0.22);
}

[data-theme="light"] .video-card,
[data-theme="light"] .review-card,
[data-theme="light"] .method-card,
[data-theme="light"] .identity-card,
[data-theme="light"] .content-card,
[data-theme="light"] .equipment-card {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .video-card:hover,
[data-theme="light"] .review-card:hover,
[data-theme="light"] .method-card:hover,
[data-theme="light"] .identity-card:hover,
[data-theme="light"] .content-card:hover,
[data-theme="light"] .equipment-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16),
              0 0 0 1px rgba(76, 143, 0, 0.30);
}

/* La vignette video se rapproche quand on survole sa carte : le mouvement
   vient du contenu, pas d'un effet plaque par-dessus. */
.video-card .video-thumbnail img,
.video-card .yt-lite {
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.video-card:hover .video-thumbnail img,
.video-card:hover .yt-lite {
  transform: scale(1.045);
}


/* La contrepartie obligatoire : ce qui bouge doit pouvoir s'arreter. Place ici
   et non dans la feuille de l'accueil, puisque ces cartes vivent sur les treize
   pages. */
@media (prefers-reduced-motion: reduce) {
  .video-card, .review-card, .method-card,
  .identity-card, .content-card, .equipment-card {
    transition: none;
  }

  .video-card:hover, .review-card:hover, .method-card:hover,
  .identity-card:hover, .content-card:hover, .equipment-card:hover {
    transform: none;
  }

  .video-card:hover .video-thumbnail img,
  .video-card:hover .yt-lite {
    transform: none;
  }
}
/* ==========================================================================
   FINITION

   Ce qui separe un site dessine d'un site par defaut ne tient pas a une
   grande idee, mais a une dizaine de details que le navigateur decide pour
   vous si on ne les decide pas soi-meme : la barre de defilement, la couleur
   de selection, l'anneau de focus, les courbes d'acceleration.
   ========================================================================== */

/* Les ancres restent adoucies meme quand le script de molette est inactif
   (tactile, mouvement reduit) : un saut d'ancre est un deplacement voulu, pas
   un mouvement subi. La regle est neutralisee plus bas si l'utilisateur a
   demande la reduction des animations. */
html {
  scroll-behavior: smooth;
  /* Une ancre visee ne doit pas se retrouver sous la barre de navigation
     fixe, qui mesure --nav-height, ni collee contre elle : d'ou les 16px. */
  scroll-padding-top: calc(var(--nav-height, 80px) + 16px);
}

/* Barre de defilement : la barre par defaut de Windows est claire et large,
   elle tranche sur un site carbone. On la fait discrete et on l'accorde au
   theme. Firefox n'accepte que les deux proprietes standard, les navigateurs
   Chromium prennent la version detaillee : les deux sont declarees. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-control, #6E6E6E) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-control, #6E6E6E);
  border-radius: var(--radius-pill, 999px);
  /* La bordure transparente creuse une gouttiere : le curseur parait plus fin
     que la zone reellement cliquable, qui garde ses 10px. */
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #6ECD00);
  background-clip: content-box;
}

/* Selection : le bleu par defaut du navigateur n'appartient a aucune charte.
   Encre noire sur lime, c'est-a-dire la meme paire que les boutons primaires. */
::selection {
  background: var(--accent, #6ECD00);
  color: var(--accent-ink, #0A0A0A);
}

/* Anneau de focus visible AU CLAVIER seulement. :focus-visible et non :focus :
   le second dessine aussi l'anneau au clic a la souris, ce que la plupart des
   sites suppriment ensuite en bloc -- et suppriment donc aussi pour ceux qui
   naviguent au clavier, qui en ont besoin. */
:focus-visible {
  outline: 2px solid var(--focus-ring, #6ECD00);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 2px);
}

/* Capitales : sans une legere ouverture, une suite de capitales se lit mal
   parce que les lettres ont ete dessinees pour un texte en bas de casse.
   Archivo a des capitales larges, l'ouverture reste donc mesuree. */
h1, h2 {
  letter-spacing: 0.005em;
}

/* Chiffres a chasse fixe partout ou un nombre change sous les yeux : sans
   cela, chaque incrementation redessine la ligne et la fait sautiller. */
.stat-number,
.item-badge,
.badge {
  font-variant-numeric: tabular-nums;
}

/* Le texte long merite l'ajustement optique des signes de ponctuation en
   debut de ligne, et la coupure des mots trop longs plutot qu'un debordement. */
p {
  hanging-punctuation: first last;
  overflow-wrap: break-word;
}

/* Un titre ne doit jamais laisser un mot seul sur la derniere ligne. */
h1, h2, h3 {
  text-wrap: balance;
}

/* ---- Mouvement reduit ----
   Non negociable, et la premiere regle compte autant que les autres : sans
   elle, scroll-behavior: smooth continue d'animer chaque saut d'ancre pour
   quelqu'un qui a explicitement demande l'arret des animations. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   BARRE DE NAVIGATION, accordee a la nouvelle allure

   Trois choses juraient avec le reste du site :
   - le fond etait un GRIS CHAUD (rgba(59,59,59)) la ou tout le site est
     carbone ;
   - l'onglet actif etait un APLAT REMPLI, alors que la regle etablie a la
     refonte est que l'accent revient par la LIGNE et jamais par un
     remplissage : un accent qui remplit cesse d'etre un accent ;
   - la barre restait opaque PAR-DESSUS la photo plein ecran, qu'elle coupait
     en deux des l'arrivee sur la page.

   Le comportement retenu est celui qui va avec un heros plein cadre : la barre
   est TRANSPARENTE tant qu'on est en haut, et se pose des que le contenu
   commence a passer dessous. La classe .nav-posee est ajoutee par vivant.js.
   Elle n'existe que sur les pages a heros (.a-heros-fixe) : partout ailleurs
   la barre reste opaque en permanence, faute de quoi elle serait illisible.
   ========================================================================== */

nav {
  background: rgba(11, 11, 11, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
  /* Aligne sur le retrait du heros : les libelles tombent a l'aplomb du titre. */
  padding: 0 clamp(20px, 5vw, 110px);
  transition: background-color .4s ease,
              border-color .4s ease,
              backdrop-filter .4s ease;
}

/* En haut d'une page a heros : la barre s'efface et laisse la photo entiere.
   SAUF menu ouvert : sur mobile, le panneau deroulant se pose juste sous la
   barre. Une barre invisible surmontant un panneau opaque donne un bloc qui
   flotte sans attache, et le bouton de fermeture se retrouve sur la photo.
   :has() permet de traiter le cas sans toucher au script. */
.a-heros-fixe nav:not(.nav-posee):not(:has(ul.active)) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* POLARITE. Dans cet etat transparent, le fond est la photo et son voile,
   carbone dans LES DEUX themes. Les libelles doivent donc rester clairs meme
   en theme clair, ou ils valent #1a1a1a : sans cette regle, du texte sombre
   sur une photo sombre. Specificite (0,2,2), ce qui bat le (0,2,1) de
   [data-theme="light"] nav a. */
/* La MEME exclusion de menu ouvert est indispensable ici. Sans elle, en theme
   clair, la barre redevient blanche pour accueillir le panneau pendant que ses
   libelles resteraient blancs : blanc sur blanc. */
.a-heros-fixe nav:not(.nav-posee):not(:has(ul.active)) a,
.a-heros-fixe nav:not(.nav-posee):not(:has(ul.active)) .nav-page-title {
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* DANS L'ETAT TRANSPARENT, LA PAGE COURANTE RESTE BLANCHE ELLE AUSSI, et son
   FILET lime suffit a la signaler.
   J'ai d'abord essaye de lui rendre sa couleur avec var(--accent-text). C'etait
   une faute : ce jeton vaut #6ECD00 en theme sombre mais #3C7000 en theme
   clair, un lime volontairement assombri POUR UN FOND CLAIR. Or ici le fond
   n'est pas le theme, c'est la photo carbone du heros, identique dans les deux
   themes. En theme clair on obtenait donc du vert sombre sur une photo sombre.
   Forcer le #6ECD00 aurait marche, mais du lime sur une photo dont on ne
   maitrise pas la zone claire reste un pari ; le blanc, lui, tient partout, et
   le filet dit deja ou l'on se trouve. C'est exactement la regle etablie a la
   refonte : l'accent revient par la ligne, pas par le remplissage. */

/* ---- LA MARQUE ----
   La barre n'en portait aucune : rien, nulle part, ne nommait le site. C'est
   ce qui manquait le plus a un ensemble qui vise l'allure d'une agence.

   Elle garde sa casse d'origine, MaiTox, alors que les liens sont en
   capitales : c'est justement cet ecart qui la fait lire comme un logotype et
   non comme une entree de menu de plus.

   Aucune decoration : ni filet, ni pastille, ni lime sur une moitie du mot. La
   regle du site vaut ici aussi -- un accent qui remplit cesse d'etre un
   accent. La marque tient par sa graisse et son ecart de casse. */
.nav-marque {
  font-family: var(--police-titre);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  /* INDISPENSABLE : la marque est un <a> dans nav, elle heritait donc du
     text-transform: uppercase pose sur les liens de la barre et s'affichait
     MAITOX. C'est precisement l'ecart de casse avec les libelles qui la fait
     lire comme un logotype plutot que comme une entree de menu. */
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  /* Cible tactile au seuil du site (WCAG 2.5.5). Sans cette hauteur minimale
     le lien ne mesurait que 34px : le site impose --tap-min: 44px partout
     ailleurs, la marque n'avait pas de raison d'y echapper. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  padding: 0;
  transition: color .25s ease;
}

.nav-marque:hover {
  color: var(--accent-text);
  background: none;
  transform: none;
}

/* Pas de filet sous la marque : il signale la page courante parmi les liens,
   et la marque n'est pas une page parmi d'autres. */
nav .nav-marque::after {
  display: none;
}

/* La barre s'ouvre desormais sur la marque et se ferme sur le menu. */
nav {
  justify-content: space-between;
  gap: 16px;
}

/* ---- Les libelles ----
   Meme traitement que les boutons et les titres du site : Archivo, capitales,
   interlettrage ouvert. C'est ce qui raccorde la barre au reste. */
nav ul {
  gap: clamp(2px, 1vw, 14px);
}

nav a {
  position: relative;
  font-family: var(--police-titre);
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 12px;
  border-radius: 0;
  background: none;
  transition: color .25s ease;
}

/* Plus de saut au survol : le mouvement du site s'est calme partout ailleurs,
   la barre suivait encore l'ancienne regle avec son translateY(-2px). */
nav a:hover {
  background: none;
  transform: none;
  color: var(--accent-text);
}

/* L'accent par la LIGNE. Le filet part de la gauche, comme celui du titre du
   heros : c'est le meme geste, a une autre echelle. */
nav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

nav a:hover::after,
nav a:focus-visible::after {
  transform: scaleX(1);
}

nav a.actual-page {
  background: none;
  color: var(--accent-text);
}

nav a.actual-page::after {
  transform: scaleX(1);
}

/* ---- Theme clair ----
   La barre posee devient claire ; l'etat transparent, lui, est traite plus
   haut puisqu'il se trouve au-dessus d'une photo carbone. */
[data-theme="light"] nav {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ---- Mobile ----
   Sous 769px la liste devient un panneau deroulant, dont les regles propres
   vivent dans base.css. On neutralise ici le filet, qui n'a pas de sens sur
   une liste verticale ou chaque entree occupe toute la largeur. */
@media (max-width: 768px) {
  nav {
    padding: 0 16px;
  }

  /* Ordre a l'ecran : bouton de menu, puis marque, et c'est tout.
     base.css pose margin-right: auto sur le bouton, ce qui poussait tout le
     reste a droite : la marque s'y serait collee au bord. On rend cet
     ecartement a la marque, qui devient donc le dernier element cale a gauche. */
  .nav-toggle {
    margin-right: 10px;
  }

  .nav-marque {
    margin-right: auto;
  }

  /* Le titre de page disparait : la marque occupe desormais cette place, et
     afficher les deux ferait deux etiquettes concurrentes sur 390px de large.
     L'information reste disponible -- le menu signale la page courante par son
     filet, et le titre h1 de la page est juste en dessous. */
  .nav-page-title {
    display: none;
  }

  nav ul li a::after {
    left: 20%;
    right: 20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav,
  nav a,
  nav a::after {
    transition: none;
  }
}

/* ---- Mouvement reduit : elements presents sur TOUTES les pages ----
   Place ici et non dans vivant.css, qui n'est chargee que sur les 8 pages a
   heros : le bandeau cookies et la bascule de theme existent sur les 14. */
@media (prefers-reduced-motion: reduce) {
  /* Le bandeau est fixe en bas, pleine largeur, et son entree deplace un
     transform de toute sa hauteur. Aucun des blocs de mouvement reduit du site
     ne le visait : ils ne couvraient que main, nav et des survols. */
  #cookie-banner,
  #cookie-preferences {
    animation: none !important;
  }

  body {
    transition: none;
  }
}