/* ================================================================
   CanigouIA — global.css
   Shared site styles — every page links to this file.
   RULE: Never set html/body background here — each page owns its own bg.
   NOTE: We copy the :root tokens from brand_assets/colors_and_type.css
   instead of @importing it, because that file sets body{background:#0A0A0A}
   which would break light-background pages.
   ================================================================ */

/* Google Fonts (shared across all pages) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* ----------------------------------------------------------------
   Brand tokens — mirrored from brand_assets/colors_and_type.css
   Source of truth: brand_guidelines_canigouia_v1.0.md (CEO 2026-03-31)
   ABSOLUTE RULE: No dark blue. Anywhere. Ever.
   ---------------------------------------------------------------- */
:root {
  /* Palette */
  --color-rouge:        #ED0C35;
  --color-rouge-dark:   #C8242A;
  --color-rouge-light:  #F5E8E8;
  --color-or:           #F8C240;
  --color-or-circuit:   #C9A84C;
  --color-or-light:     #FDF6E3;
  --color-noir:         #0A0A0A;
  --color-fond-mid:     #1A1A1A;
  --color-acier:        #8C8C8C;
  --color-acier-light:  #D4D4D4;
  --color-blanc-chaud:  #F9F6F0;

  /* Semantic surface + text */
  --bg-hero:            var(--color-noir);
  --bg-section-dark:    var(--color-noir);
  --bg-section-mid:     var(--color-fond-mid);
  --bg-section-light:   var(--color-blanc-chaud);
  --bg-card-dark:       var(--color-fond-mid);
  --bg-card-light:      #FFFFFF;
  --fg-on-dark:         var(--color-blanc-chaud);
  --fg-on-dark-muted:   var(--color-acier);
  --fg-on-light:        var(--color-noir);
  --fg-on-light-muted:  #4A4A4A;
  --border-subtle:      rgba(212,212,212,0.16);
  --border-premium:     var(--color-or-circuit);
  --accent-primary:     var(--color-rouge);
  --accent-secondary:   var(--color-or);

  /* Typography */
  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Courier New', Courier, monospace;

  /* Type scale */
  --text-h1:    clamp(32px, 5vw, 56px);
  --text-h2:    clamp(28px, 4vw, 40px);
  --text-h3:    clamp(20px, 3vw, 28px);
  --text-h4:    18px;
  --text-body:  16px;
  --text-sm:    14px;
  --text-xs:    13px;
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* Spacing (8px base) */
  --space-1: 4px;   --space-2: 8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 24px; --space-6: 32px;
  --space-7: 48px;  --space-8: 64px; --space-9: 96px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Shadows & glow */
  --shadow-card:      0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.35);
  --shadow-card-lg:   0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(0,0,0,0.45);
  --shadow-light-card: 0 1px 2px rgba(10,10,10,0.06), 0 8px 24px rgba(10,10,10,0.08);
  --glow-rouge: 0 0 0 1px rgba(237,12,53,0.35), 0 0 24px rgba(237,12,53,0.35), 0 0 60px rgba(237,12,53,0.18);
  --glow-or:    0 0 0 1px rgba(248,194,64,0.35), 0 0 24px rgba(248,194,64,0.28), 0 0 60px rgba(248,194,64,0.16);

  /* Motion */
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in:       cubic-bezier(.4,0,1,1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ----------------------------------------------------------------
   Reset
   ---------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* background intentionally omitted — set per page */
}

body {
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* background intentionally omitted — set per page */
}

/* ----------------------------------------------------------------
   Scrollbar
   Arbitrage de Thierry du 16/08/2026 : la gouttiere est supprimee.

   Pourquoi. La barre faisait 6 px et sa piste etait peinte en
   blanc chaud. Or cette gouttiere vit HORS de la boite de contenu :
   clientWidth valait 1434 quand la fenetre en faisait 1440. Une
   section en pleine largeur s'arretait donc a 1434 et ne pouvait
   jamais peindre les 6 px restants, qui affichaient le fond du
   canevas, c'est a dire celui de html. Invisible sur une section
   creme, cela produisait une bande claire sur toute la hauteur des
   4 sections sombres de formations.html, et se lisait comme un
   contenu qui n'atteint pas le bord de l'ecran.

   Une piste transparente ne corrige rien, la gouttiere peint le
   canevas et non la piste : verifie par capture le 16/08/2026.
   Seule la suppression de la gouttiere resout le defaut.

   Contrepartie assumee : plus d'indicateur de position ni de prise
   pour faire glisser. Le defilement molette, tactile et clavier
   reste entier, la page n'est ni figee ni tronquee.

   Pour revenir en arriere : retablir width: 6px et les deux regles
   de piste et de curseur supprimees ici.
   ---------------------------------------------------------------- */
html { scrollbar-width: none; }                /* Firefox */
::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome, Edge, Safari */

/* ----------------------------------------------------------------
   Ascenseur personnalise
   Demande de Thierry du 16/08/2026 : un ascenseur a la charte,
   en or, plutot qu'aucun ascenseur du tout.

   Contrainte structurante : il ne doit RIEN prendre a la mise en
   page. Une piste native, meme repeinte, reduit clientWidth et
   recreerait exactement la bande claire corrigee au dessus. Cet
   ascenseur est donc en position fixed, superpose au contenu, et
   la scrollbar native reste a largeur nulle.

   La barre elle-meme ne recoit pas les evenements, seul le curseur
   les prend : le contenu situe sous le rail reste cliquable.

   Reglage de visibilite du 16/08/2026. La premiere version faisait
   6 px de large a 0,85 d'opacite, sans gouttiere dessinee : Thierry
   ne la remarquait pas en haut de la page d'accueil. La cause est un
   ecart de luminance, l'or #F8C240 sur le blanc chaud #F9F6F0 donne
   un rapport de contraste voisin de 1,3. Trois leviers appliques :
   une gouttiere peinte qui donne sa longueur a l'element et le fait
   lire comme un ascenseur, un curseur porte a 10 px pleine opacite,
   et un liset sombre nettement plus marque qui porte le contraste
   sur fond clair. Sur fond noir c'est l'or lui-meme qui porte, le
   liset s'y efface et le halo chaud prend le relais.
   ---------------------------------------------------------------- */
.scroll-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18px;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.scroll-rail.is-ready { opacity: 1; }

/* Gouttiere dessinee. Elle est peinte PAR-DESSUS le contenu et ne
   prend aucune largeur de mise en page : la contrainte du bloc
   au-dessus reste tenue. Sa teinte est un or translucide, jamais un
   blanc : sur une section noire un voile clair se lirait comme la
   bande claire corrigee le meme jour. */
.scroll-rail::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 6px;
  width: 6px;
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.18);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.24);
}

.scroll-rail__thumb {
  position: absolute;
  right: 4px;
  width: 10px;
  /* Egale au plancher du calcul JS dans partials/header.html.
     Si les deux divergent, min-height l'emporte sur la hauteur posee
     en ligne et le glisser se decale. */
  min-height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-or) 0%, var(--color-or-circuit) 100%);
  /* Trois ombres, chacune pour un fond. Le liset sombre detache la
     pilule du blanc chaud, l'ombre portee lui donne du relief, le
     halo or la fait ressortir sur le noir. */
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.34),
    0 2px 6px rgba(10, 10, 10, 0.26),
    0 0 14px rgba(248, 194, 64, 0.55);
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  transition: width 0.18s ease, right 0.18s ease, box-shadow 0.18s ease;
}

/* Trois stries au centre du curseur. C'est la marque qui distingue
   une prise a saisir d'un simple filet decoratif. */
.scroll-rail__thumb::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 9px;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.32) 0 1px,
    transparent 1px 4px,
    rgba(10, 10, 10, 0.32) 4px 5px,
    transparent 5px 8px,
    rgba(10, 10, 10, 0.32) 8px 9px
  );
}

.scroll-rail__thumb:hover,
.scroll-rail.is-dragging .scroll-rail__thumb {
  width: 14px;
  right: 2px;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.40),
    0 2px 8px rgba(10, 10, 10, 0.30),
    0 0 20px rgba(248, 194, 64, 0.75);
}
.scroll-rail.is-dragging .scroll-rail__thumb { cursor: grabbing; }

/* Sur mobile le defilement est tactile et les navigateurs posent deja
   leur propre indicateur en superposition. Le rail n'apporte rien et
   genererait un conflit avec les gestes de bord. */
@media (max-width: 767px) {
  .scroll-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-rail,
  .scroll-rail__thumb { transition: none; }
}

/* ----------------------------------------------------------------
   Grain overlay
   ---------------------------------------------------------------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ----------------------------------------------------------------
   Constellation canvas
   Pilote par js/effets-souris.js. Regle mutualisee ici : elle etait
   recopiee a l'identique dans le <style> en ligne de 4 pages.
   ---------------------------------------------------------------- */
#constellation-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Cursor spotlight
   ---------------------------------------------------------------- */
.cursor-spotlight {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, rgba(237,12,53,0.02) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* ----------------------------------------------------------------
   Navigation — pill
   ---------------------------------------------------------------- */
.nav-pill {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  background: rgba(249,246,240,0.88);
  border: 1px solid rgba(201,168,76,0.2);
  transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
}
.nav-pill:hover { border-color: rgba(201,168,76,0.25); }

/* ----------------------------------------------------------------
   Navigation — bandeau pleine largeur
   La pilule flottante était translucide : le contenu qui défilait
   derrière restait visible au travers. Le bandeau devient une bande
   opaque sur toute la largeur, collée en haut, qui masque le contenu.
   Deux variantes de balisage couvertes : header[role=banner] et nav#main-nav.
   ---------------------------------------------------------------- */
header[role="banner"],
nav#main-nav {
  padding: 0;
  background: var(--color-blanc-chaud);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  box-shadow: 0 1px 12px rgba(0,0,0,0.04);
}

header[role="banner"] .nav-pill,
nav#main-nav .nav-pill {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 1400px;
  padding: 12px 24px;
}

.nav-link {
  position: relative;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3A3A3A;
  padding: 6px 10px;
  border-radius: 9999px;
  transition: color 0.4s cubic-bezier(0.32,0.72,0,1),
              transform 0.4s cubic-bezier(0.32,0.72,0,1);
  text-decoration: none;
  display: inline-block;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 1px;
  background: var(--color-rouge);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.32,0.72,0,1);
}
.nav-link:hover       { color: var(--color-noir); }
.nav-link:hover::after { opacity: 0.45; }
.nav-link.active,
.nav-link.is-active   { color: var(--color-rouge); font-weight: 600; }
.nav-link.is-active::after { opacity: 1; }
.nav-link.magnetic    { will-change: transform; }

/* Ancres ciblees par le menu (services.html#novvah, #avie,
   #personnalisation) et par le CTA interne du chapeau NOVVAH
   (#novvah-demo). Le bandeau est en position: fixed : sans ce
   decalage, le clic amene le titre de section masque dessous. */
#novvah,
#avie,
#personnalisation,
#novvah-demo {
  scroll-margin-top: 100px;
}

/* ----------------------------------------------------------------
   Resserrage du bandeau entre 1024 et 1279 px
   Mesure du 16/08/2026, apres l'ajout du lien Accueil : la rangee de
   9 liens, le logo et le bouton reclament 1032 px pour 992 disponibles
   a 1024 px de large (1024 moins les 32 px de px-4). Sans ce reglage,
   A propos et le bouton se replient sur deux lignes et le bandeau
   passe de 68 a 83 px de haut.
   Le resserrage rend 54 px sur les liens et 12 px sur le bouton, soit
   26 px de marge. Il ne s'applique QUE sur cette bande : au-dela de
   1280 px le reglage d'origine reprend la main, le rendu valide sur
   grand ecran n'est pas touche. En dessous de 1024 px c'est le menu
   plein ecran qui sert.
   Pas de white-space: nowrap ici a dessein. Si une police de secours
   plus large elargissait les libelles, un repli sur deux lignes reste
   preferable a un bouton d'appel a l'action sorti de l'ecran.
   ---------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  #main-nav .nav-link { padding-left: 7px; padding-right: 7px; }
  #main-nav .nav-link::after { left: 7px; right: 7px; }
  #main-nav .nav-cta { padding-left: 18px; padding-right: 18px; }
}

.nav-cta {
  background: var(--color-rouge);
  color: var(--color-blanc-chaud);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.32,0.72,0,1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-cta:hover  { background: var(--color-rouge-dark); transform: scale(1.03); }
.nav-cta:active { transform: scale(0.97) translateY(1px); }

/* ----------------------------------------------------------------
   Mobile menu
   ---------------------------------------------------------------- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.32,0.72,0,1);
}
.mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }

/* ----------------------------------------------------------------
   Tenue du menu plein ecran a 10 entrees
   Mesure du 16/08/2026, apres l'ajout du lien Accueil : le contenu
   reclame 848 px de haut sur un ecran de 844, 796 sur un 360x740 et
   759 sur un iPhone SE de 667. Accueil sortait par le haut et le
   bouton d'appel a l'action par le bas.

   Le piege : un conteneur en justify-content: center qui deborde
   rogne SES DEUX extremites, et le defilement ne les ramene pas, la
   marge negative du haut n'etant pas atteignable. C'est pourquoi un
   simple overflow-y: auto ne suffit pas. Le mot-cle safe bascule le
   centrage en alignement au debut des l'instant ou ca deborde, et
   rend alors les deux extremites atteignables.
   Le resserrage typographique sur les ecrans courts evite d'en
   arriver la dans la quasi-totalite des cas.
   ---------------------------------------------------------------- */
.mobile-menu-overlay nav {
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: safe center;
  /* 72 px en haut degagent le bouton de fermeture, place a 24 px du
     bord et haut de 40 px. */
  padding: 72px 16px 24px;
}

/* Ecart vertical entre entrees, moitie de l'ancien gap-4 de 16 px.
   Le selecteur compte une classe et un type, il l'emporte sur
   l'utilitaire gap-4 de Tailwind qui n'a qu'une classe. */
.mobile-menu-overlay nav { gap: 8px; }

.mobile-menu-link {
  font-family: var(--font-display);
  /* Demande de Thierry du 16/08/2026 : menu plein ecran de moitie.
     2rem devenait envahissant, d'autant que le menu compte 10 entrees
     depuis l'ajout d'Accueil. 1rem, avec l'ecart vertical passe de 16
     a 8 px, divise l'encombrement par deux.
     Le pave tactile, lui, ne suit PAS la division : min-height le
     maintient a 44 px, le plancher recommande. Le texte a maigri,
     la cible du doigt non. */
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blanc-chaud);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 14px;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.32,0.72,0,1),
              opacity   0.6s cubic-bezier(0.32,0.72,0,1);
}
.mobile-menu-overlay.active .mobile-menu-link              { transform: translateY(0); opacity: 1; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(1) { transition-delay: 0.10s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(3) { transition-delay: 0.20s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(7) { transition-delay: 0.40s; }
/* Le menu compte 10 entrees. Sans ces trois lignes, les trois
   dernieres entraient sans decalage et cassaient la cascade. */
.mobile-menu-overlay.active .mobile-menu-link:nth-child(8)  { transition-delay: 0.45s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(9)  { transition-delay: 0.50s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(10) { transition-delay: 0.55s; }

/* ----------------------------------------------------------------
   Hamburger
   ---------------------------------------------------------------- */
.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--color-noir);
  transition: all 0.4s cubic-bezier(0.32,0.72,0,1);
  display: block;
}
.hamburger.active .hamburger-line:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px);  }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ----------------------------------------------------------------
   Section eyebrow
   ---------------------------------------------------------------- */
.section-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-or-circuit);
  padding: 6px 16px;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 9999px;
  display: inline-block;
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.hero-btn-primary {
  background: var(--color-rouge);
  color: var(--color-blanc-chaud);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.hero-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  border-radius: inherit;
}
.hero-btn-primary:hover {
  background: var(--color-rouge-dark);
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(237,12,53,0.25);
}
.hero-btn-primary:active { transform: scale(0.98) translateY(1px); }

.hero-btn-secondary {
  color: var(--color-noir);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 9999px;
  border: 1px solid rgba(201,168,76,0.4);
  background: transparent;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-btn-secondary:hover {
  border-color: var(--color-or-circuit);
  background: rgba(201,168,76,0.08);
  transform: scale(1.02);
}
.hero-btn-secondary:active { transform: scale(0.98); }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.footer-link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-acier);
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
  padding: 4px 0;
}
.footer-link:hover { color: var(--color-blanc-chaud); }

/* ----------------------------------------------------------------
   Scroll reveal
   ---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity  0.8s cubic-bezier(0.32,0.72,0,1),
              transform 0.8s cubic-bezier(0.32,0.72,0,1);
}
.reveal.visible  { opacity: 1; transform: translateY(0); }
.reveal-delay-1  { transition-delay: 0.1s; }
.reveal-delay-2  { transition-delay: 0.2s; }
.reveal-delay-3  { transition-delay: 0.3s; }
.reveal-delay-4  { transition-delay: 0.4s; }

/* ----------------------------------------------------------------
   Page Services — NOVVAH audio player
   ---------------------------------------------------------------- */
.novvah-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-lg);
}
.novvah-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-rouge);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.novvah-play-btn:hover  { background: var(--color-rouge-dark); transform: scale(1.06); }
.novvah-play-btn:active { transform: scale(0.96); }
.novvah-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 36px;
}
.novvah-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--color-rouge);
  height: 6px;
  transition: height 80ms ease;
  flex-shrink: 0;
}
.novvah-bar.accent { background: var(--color-or-circuit); }
.novvah-timer {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-acier);
  flex-shrink: 0;
  min-width: 44px;
  text-align: right;
}

/* ----------------------------------------------------------------
   AVIE — widget de chat (partagé services.html + contact.html)
   ---------------------------------------------------------------- */
.avie-chat-wrap {
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.08);
  background: #FFFFFF;
}
.avie-history {
  padding: 20px 16px;
  min-height: 220px;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FAFAFA;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
}
.avie-input-zone {
  background: #FFFFFF;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.avie-textarea {
  width: 100%;
  padding: 18px 20px 6px;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #0A0A0A;
  resize: none;
  min-height: 58px;
  max-height: 140px;
  background: transparent;
  line-height: 1.5;
}
.avie-textarea::placeholder { color: #B8B8B8; }
.avie-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 12px;
}
.avie-toolbar-left { display: flex; align-items: center; gap: 2px; }
.avie-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #5A5A5A;
  cursor: default;
  white-space: nowrap;
}
.avie-pill.model {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0A0A0A;
}
.avie-pill svg { width: 13px; height: 13px; opacity: 0.5; }
.avie-send-gold {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F8C240;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.avie-send-gold:hover  { background: #C9A84C; transform: scale(1.05); }
.avie-send-gold:active { transform: scale(0.96); }
.avie-send-gold:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.avie-send-gold svg { width: 17px; height: 17px; color: #0A0A0A; }

.avie-msg-wrap       { display: flex; flex-direction: column; }
.avie-msg-wrap.ai    { align-items: flex-start; }
.avie-msg-wrap.usr   { align-items: flex-end; }

.avie-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}
.avie-bubble.ai {
  background: #FFFFFF;
  border: 1px solid rgba(201,168,76,0.35);
  border-left: 3px solid var(--color-or-circuit);
  color: var(--color-noir);
}
.avie-bubble.usr {
  background: var(--color-rouge);
  color: var(--color-blanc-chaud);
}

/* Mise en forme du markdown limité rendu par appendAiBubble (avie-widget.js) */
.avie-bubble.ai p { margin: 0 0 8px; }
.avie-bubble.ai p:last-child { margin-bottom: 0; }
.avie-bubble.ai .avie-md-heading { font-weight: 700; margin: 10px 0 4px; }
.avie-bubble.ai .avie-md-heading:first-child { margin-top: 0; }
.avie-bubble.ai ul, .avie-bubble.ai ol { margin: 4px 0 8px; padding-left: 20px; }
.avie-bubble.ai ul { list-style: disc; }
.avie-bubble.ai ol { list-style: decimal; }
.avie-bubble.ai ul:last-child, .avie-bubble.ai ol:last-child { margin-bottom: 0; }
.avie-bubble.ai li { margin-bottom: 2px; }
.avie-bubble.ai strong { font-weight: 700; }
.avie-bubble.ai a { color: var(--color-rouge); text-decoration: underline; text-underline-offset: 2px; }
.avie-bubble.ai .avie-cta-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 8px 16px;
  background: var(--color-rouge);
  color: var(--color-blanc-chaud);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  border: none;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.avie-bubble.ai .avie-cta-btn:hover { background: #C8242A; }
.avie-bubble.ai .avie-cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.avie-bubble.ai .avie-cta-btn + .avie-cta-btn { margin-top: 6px; }

.avie-sequencer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #F5F5F5;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 11px;
  color: var(--color-acier);
  max-width: 82%;
}
.avie-seq-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.avie-seq-step.visible { opacity: 1; transform: translateY(0); }

.avie-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 16px;
  width: fit-content;
}
.avie-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-acier);
  animation: avie-dot 1.2s infinite;
}
.avie-typing span:nth-child(2) { animation-delay: 0.2s; }
.avie-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes avie-dot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ----------------------------------------------------------------
   Page Services — n8n cas d'usage cards
   ---------------------------------------------------------------- */
.n8n-card {
  background: var(--color-fond-mid);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.n8n-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,168,76,0.3);
}
.n8n-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(237,12,53,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-or-circuit);
  margin-bottom: 4px;
}
.n8n-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-rouge);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.n8n-sector {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-acier);
  font-weight: 500;
}
.n8n-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-blanc-chaud);
  line-height: 1.3;
}
.n8n-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-acier);
  line-height: 1.6;
}
.n8n-workflow-panel {
  margin: 0 0 64px;
  padding: 12px;
  background: var(--color-fond-mid);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.1), 0 24px 64px rgba(0,0,0,0.4);
}
.n8n-workflow-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-xl) - 8px);
}
.n8n-workflow-caption {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-acier);
  text-align: center;
  padding: 16px 12px 6px;
}