/* ══════════════════════════════════════════════════════════════════════════════
   animations.css — Clarity Conseil | Couche de modernisation visuelle
   ─────────────────────────────────────────────────────────────────────────────
   Feuille de style ADDITIVE. Elle ne remplace aucune classe Tailwind existante :
   elle ajoute des couches (background-image, box-shadow, transitions) ou des
   surcharges à spécificité supérieure, uniquement sous `html.cc-anim`.

   `html.cc-anim` est posé par un script inline dans <head> UNIQUEMENT si :
     • JavaScript est actif            (sinon aucun état masqué n'est appliqué)
     • prefers-reduced-motion ≠ reduce (sinon le site reste totalement statique)

   Un filet de sécurité (voir animations.js) retire `cc-anim` si le moteur ne
   démarre pas → le contenu ne peut jamais rester invisible.

   Chargée APRÈS assets/index-*.css pour gagner les égalités de spécificité.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────────
   0. LENIS 1.1.13 — feuille de style officielle, inlinée ici
   Reproduite telle quelle depuis `lenis@1.1.13/dist/lenis.css` afin d'éviter
   une requête CSS bloquante supplémentaire. La règle `scroll-behavior: auto`
   est INDISPENSABLE : le site définit `scroll-behavior: smooth` globalement,
   ce qui entrerait en conflit avec le lissage de Lenis.
   ────────────────────────────────────────────────────────────────────────────── */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Marque (existante, conservée à l'identique) */
  --cc-primary:      #40b7fe;
  --cc-primary-dark: #193cb8;

  /* Accents ajoutés — harmonie bleu + complémentaires */
  --cc-cyan:   #06b6d4;
  --cc-green:  #10b981;
  --cc-amber:  #f59e0b;

  /* Texte */
  --cc-ink:    #1f2937;
  --cc-ink-soft: #4b5563;

  /* Dégradés signature */
  --cc-grad-cta:   linear-gradient(135deg, #40b7fe 0%, #06b6d4 100%);
  --cc-grad-cta-h: linear-gradient(135deg, #56c2ff 0%, #22c9e6 100%);
  --cc-grad-ink:   linear-gradient(90deg, #40b7fe 0%, #06b6d4 55%, #10b981 100%);

  /* Courbes */
  --cc-ease:      cubic-bezier(.22, 1, .36, 1);
  --cc-ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Élévation */
  --cc-shadow-cta:  0 10px 26px -8px rgba(6, 182, 212, .55), 0 3px 10px -4px rgba(64, 183, 254, .4);
  --cc-shadow-card: 0 18px 40px -18px rgba(15, 23, 42, .18), 0 2px 8px -4px rgba(15, 23, 42, .06);

  /* Barre de progression */
  --cc-progress-h: 3px;
}

/* ──────────────────────────────────────────────────────────────────────────────
   2. ÉTATS DE REVEAL  (uniquement sous html.cc-anim)
   ────────────────────────────────────────────────────────────────────────────── */
html.cc-anim .cc-rv {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  will-change: opacity, transform;
}

/* Variantes */
html.cc-anim .cc-rv--fade  { transform: none; }
html.cc-anim .cc-rv--left  { transform: translate3d(-34px, 0, 0); }
html.cc-anim .cc-rv--right { transform: translate3d(34px, 0, 0); }
html.cc-anim .cc-rv--scale { transform: scale(.94); }

/* Cartes « atout » : montée + très léger dézoom, pour que l'arrivée se lise
   comme un dépôt sur la page plutôt qu'un simple glissement. */
html.cc-anim .cc-rv--card {
  transform: translate3d(0, 36px, 0) scale(.975);
}

/* Révélé */
html.cc-anim .cc-rv.cc-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .85s var(--cc-ease) var(--cc-d, 0ms),
    transform .95s var(--cc-ease) var(--cc-d, 0ms);
}

/* IMPORTANT — une fois l'animation terminée, animations.js retire les classes
   `cc-rv` / `cc-in`. L'élément retrouve alors son état naturel, identique à
   l'arrivée, mais SANS aucune déclaration `transform` résiduelle : les
   transitions `hover:-translate-y-1` / `group-hover:scale-105` de Tailwind
   restent donc pleinement fonctionnelles. */

/* ──────────────────────────────────────────────────────────────────────────────
   3. BARRE DE PROGRESSION DE LECTURE
   ────────────────────────────────────────────────────────────────────────────── */
.cc-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--cc-progress-h);
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--cc-grad-ink);
  box-shadow: 0 0 12px rgba(6, 182, 212, .55);
}

/* Version native (aucun JS) sur les navigateurs qui la supportent */
@supports (animation-timeline: scroll()) {
  .cc-progress {
    animation: cc-progress-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes cc-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   4. HEADER — verre dépoli
   React gère déjà un état « scrollé » (bg-white/95 + backdrop-blur-md +
   shadow-sm). On n'y touche pas : la règle ci-dessous ne s'applique QU'À L'ÉTAT
   HAUT DE PAGE, où l'en-tête était un aplat gris opaque `#ebebeb`. Dès que
   React pose son propre fond, on s'efface (`:not(...)`).
   ────────────────────────────────────────────────────────────────────────────── */
header.fixed:not([class*="bg-white/95"]) {
  background-color: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(15, 23, 42, .05);
}

/* Repli si `backdrop-filter` n'est pas supporté : on garde l'aplat d'origine. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.fixed:not([class*="bg-white/95"]) { background-color: #ebebeb; }
}

/* Profondeur supplémentaire une fois la page défilée (s'ajoute à React) */
header.fixed.cc-scrolled {
  box-shadow: 0 10px 34px -20px rgba(15, 23, 42, .3);
}

/* ──────────────────────────────────────────────────────────────────────────────
   5. CTA PRINCIPAUX — dégradé signature + balayage lumineux
   Le dégradé est posé en `background-image`, qui se superpose au
   `background-color` Tailwind sans entrer en conflit de spécificité.
   ────────────────────────────────────────────────────────────────────────────── */
.cc-cta {
  position: relative;
  overflow: hidden;
  background-image: var(--cc-grad-cta);
  box-shadow: var(--cc-shadow-cta);
  transition: transform .3s var(--cc-ease),
              box-shadow .3s var(--cc-ease),
              background-image .3s var(--cc-ease-soft);
}

.cc-cta:hover,
.cc-cta:focus-visible {
  background-image: var(--cc-grad-cta-h);
  box-shadow: 0 16px 34px -10px rgba(6, 182, 212, .6), 0 4px 12px -4px rgba(64, 183, 254, .45);
}

/* Balayage lumineux au survol */
.cc-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.cc-cta:hover::after,
.cc-cta:focus-visible::after {
  animation: cc-shine .85s var(--cc-ease-soft);
}

@keyframes cc-shine {
  from { left: -60%; }
  to   { left: 130%; }
}

/* ──────────────────────────────────────────────────────────────────────────────
   6. CARTES — élévation au survol
   ────────────────────────────────────────────────────────────────────────────── */
.cc-card {
  transition: transform .4s var(--cc-ease),
              box-shadow .4s var(--cc-ease),
              border-color .4s var(--cc-ease-soft);
}

/* Spécificité volontairement > aux utilitaires `hover:-translate-y-*` de Tailwind */
html.cc-anim .cc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(64, 183, 254, .35);
  box-shadow: var(--cc-shadow-card), 0 0 0 4px rgba(64, 183, 254, .07);
}

/* Icônes de carte : pastille qui s'anime */
.cc-card .cc-ico {
  transition: transform .45s var(--cc-ease), background-color .45s var(--cc-ease-soft);
}

.cc-card:hover .cc-ico {
  transform: translateY(-2px) scale(1.08) rotate(-4deg);
}

/* ──────────────────────────────────────────────────────────────────────────────
   7. ACCENTS THÉMATIQUES (élargissement de palette, 1 section = 1 accent)
   ────────────────────────────────────────────────────────────────────────────── */

/* Vert « valeur / économie » — icônes de validation */
html.cc-anim .cc-check,
html.cc-anim .lucide-circle-check {
  color: var(--cc-green);
}

/* Ambre « premium / certification » */
html.cc-anim .cc-badge {
  color: #b45309;
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .05));
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 9999px;
  padding: 2px 10px;
  font-weight: 600;
}

/* Rythme visuel des sections — dégradés de fond très doux (aucun impact layout) */
html.cc-anim #services {
  background-image:
    radial-gradient(60rem 30rem at 12% -10%, rgba(64, 183, 254, .09), transparent 62%),
    radial-gradient(46rem 26rem at 92% 108%, rgba(16, 185, 129, .07), transparent 62%);
}

html.cc-anim #conseillers {
  background-image:
    radial-gradient(52rem 28rem at 88% -8%, rgba(6, 182, 212, .10), transparent 60%),
    radial-gradient(40rem 24rem at 4% 104%, rgba(245, 158, 11, .07), transparent 60%);
}

html.cc-anim #pourquoi-nous {
  background-image:
    radial-gradient(56rem 30rem at 6% -12%, rgba(64, 183, 254, .10), transparent 62%),
    radial-gradient(44rem 26rem at 96% 106%, rgba(16, 185, 129, .08), transparent 62%);
}

/* Bande de statistiques : carte translucide détachée.
   ─────────────────────────────────────────────────────────────────────────────
   Le style est porté par un SÉLECTEUR STRUCTUREL, et non par une classe ajoutée
   par JS après le rendu. C'est essentiel : React crée l'élément avec ce style
   déjà appliqué, donc aucun décalage de mise en page (CLS) n'est mesurable.
   Une classe ajoutée après coup produirait, elle, un saut de ~32 px. */
html.cc-anim #pourquoi-nous div[class*="border-t"][class*="grid-cols-2"] {
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(64, 183, 254, .16);
  box-shadow: 0 20px 50px -30px rgba(15, 23, 42, .35);
  padding: 2.5rem 1.5rem;
}

/* Chiffres à chasse fixe : la valeur animée ne fait pas « respirer » la ligne.
   Appliqué structurellement, donc sans coût de CLS. */
html.cc-anim #pourquoi-nous div[class*="border-t"][class*="grid-cols-2"] p,
html.cc-anim .gz-stat-val {
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────────────
   8. MÉDIA — révélation « rideau » sur les conteneurs d'image
   On n'anime PAS l'image elle-même (elle porte `group-hover:scale-105`) : un
   volet glisse vers le haut au-dessus d'elle. Le `box-shadow` du conteneur
   n'est jamais rogné, contrairement à une approche par clip-path.
   ────────────────────────────────────────────────────────────────────────────── */
html.cc-anim .cc-media {
  position: relative;
}

html.cc-anim .cc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%);
  transform: scaleY(1);
  transform-origin: 50% 0;
  will-change: transform;
  transition: transform 1.05s var(--cc-ease) var(--cc-d, 0ms);
}

html.cc-anim .cc-media.cc-in::after {
  transform: scaleY(0);
}

/* ──────────────────────────────────────────────────────────────────────────────
   9. TITRES — révélation mot par mot
   Les mots sont injectés par JS dans les nœuds texte existants uniquement.
   ────────────────────────────────────────────────────────────────────────────── */

/* Neutralise l'animation `animate-fade-in-up` du titre dont les mots prennent
   le relais. Sans JS, la règle n'existe pas (tout est sous `html.cc-anim`) et
   l'animation d'origine reprend ses droits. */
html.cc-anim .cc-takeover { animation: none !important; }

html.cc-anim .cc-w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 26px, 0) rotate(2deg);
  transition:
    opacity .7s var(--cc-ease) var(--cc-d, 0ms),
    transform .8s var(--cc-ease) var(--cc-d, 0ms);
}

html.cc-anim .cc-w.cc-in {
  opacity: 1;
  transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────────
   10. ACCESSIBILITÉ — focus visible cohérent
   ────────────────────────────────────────────────────────────────────────────── */
.cc-cta:focus-visible,
.cc-card:focus-visible {
  outline: 2px solid var(--cc-primary-dark);
  outline-offset: 3px;
}

::selection {
  background: rgba(64, 183, 254, .26);
  color: var(--cc-ink);
}

/* ──────────────────────────────────────────────────────────────────────────────
   11. GARDE-FOUS — mouvement réduit / impression
   Priorité absolue : tout doit être lisible et statique.
   ────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.cc-anim .cc-rv,
  html.cc-anim .cc-rv.cc-in,
  html.cc-anim .cc-w,
  html.cc-anim .cc-w.cc-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  html.cc-anim .cc-media::after { display: none !important; }

  .cc-progress { display: none !important; }

  .cc-cta::after { display: none !important; }

  .cc-cta,
  .cc-card,
  .cc-card .cc-ico {
    transition: none !important;
  }

  .cc-card:hover { transform: none !important; }
}

@media print {
  .cc-progress { display: none !important; }
  html.cc-anim .cc-rv,
  html.cc-anim .cc-w {
    opacity: 1 !important;
    transform: none !important;
  }
  html.cc-anim .cc-media::after { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────────
   12. CORRECTIF DE MISE EN PAGE — rythme vertical du hero
   ─────────────────────────────────────────────────────────────────────────────
   ⚠ Défaut PRÉEXISTANT, sans lien avec la couche d'animation.

   Les décalages négatifs du hero (bandeau-titre rotatif en `-mt-96`, section
   suivante en `md:-mt-24 lg:-mt-40`) sont des valeurs FIXES, alors que la
   hauteur du hero vaut `100vh`. Sur tout écran de moins de ~1050 px de haut,
   la composition se comprime et la section suivante — fond blanc opaque en
   `z-20`, donc au-dessus du hero en `z-10` — recouvre :

     • les boutons d'action du hero (« Obtenir un conseil gratuit »),
     • les 3 cartes d'information (Assurances / Prévoyance / Immobilier),
     • les 6 badges cantonaux injectés par seo-inject.js pour le référencement
       local (Vaud, Genève, Fribourg, Valais, Neuchâtel, Jura).

   Mesures sur la version d'origine :
     1440×900  → section suivante à 628 px, 9 éléments du hero recouverts
     1440×768  → boutons, cartes et badges recouverts
     1536×730  → boutons, cartes et badges recouverts
     1680×1050 → aucun recouvrement (rendu conforme)

   Correctif : on garantit une hauteur MINIMALE du hero. Tous les décalages
   internes étant relatifs à cette hauteur, la composition « grand écran »
   (celle pour laquelle le site a été dessiné) est alors reproduite à
   l'identique sur les écrans courts, sans recouvrement.

   Sur les écrans de 1140 px de haut et plus, `max()` retient `100vh` : le
   rendu d'origine y est strictement inchangé.
   ────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  html.cc-anim section[class*="hero-gradient"] {
    min-height: max(100vh, 1140px);
  }
}

/* Sur mobile, le contenu du hero occupe déjà toute la hauteur disponible : la
   marge négative de -20rem ne peut que faire chevaucher le bandeau rotatif avec
   les cartes d'information. On le laisse s'écouler normalement après le hero. */
@media (max-width: 767px) {
  html.cc-anim div[class*="-mt-80"][class*="md:-mt-96"] {
    margin-top: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   13. CIRCUIT LUMINEUX — la lueur circule de bloc en bloc
   ─────────────────────────────────────────────────────────────────────────────
   Reprend l'effet du badge « néon » (SVG masqué + dégradé radial + `offset-path`)
   mais le fait CIRCULER entre les 6 cartes d'atout de « Pourquoi nous choisir »,
   au lieu de rester au-dessus du titre.

   Le tracé est calculé à l'exécution depuis la position réelle des cartes
   (voir planCircuit, dans animations.js) : il suit donc la grille en 3, 2 ou
   1 colonne sans aucune valeur codée en dur.

   Trois couches, dans cet ordre :
     1. le tracé du circuit, en filigrane permanent ;
     2. l'étincelle, qui parcourt ce tracé et laisse son sillage ;
     3. le halo de chaque carte, qui s'allume quand l'étincelle l'atteint.
   ────────────────────────────────────────────────────────────────────────────── */

/* La grille devient le repère de positionnement du tracé, et les cartes passent
   au-dessus de lui : le circuit est donc masqué par les cartes et n'apparaît
   que dans les interstices — c'est ce qui donne l'impression qu'il passe
   DANS chaque bloc. */
html.cc-anim .cc-circuit-grille { position: relative; }

.cc-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Le tracé du circuit, en filigrane permanent. Il doit rester lisible dans les
   interstices (32 px) tout en ne concurrençant pas les cartes : c'est un repère
   qui rend le déplacement de l'étincelle compréhensible. */
.cc-circuit-track {
  fill: none;
  stroke: rgba(6, 182, 212, .30);
}

.cc-circuit-spark {
  offset-rotate: 0deg;
  animation: cc-circuit-travel var(--cc-circuit-duree, 7s) linear infinite,
             cc-circuit-fade var(--cc-circuit-duree, 7s) linear infinite;
}

@keyframes cc-circuit-travel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Entrée et sortie en fondu : le trajet étant une boucle, sans cela l'étincelle
   sauterait brutalement de la fin au début. */
@keyframes cc-circuit-fade {
  0%, 4%    { opacity: 0; }
  11%       { opacity: 1; }
  89%       { opacity: 1; }
  96%, 100% { opacity: 0; }
}

html.cc-anim .cc-circuit-carte {
  position: relative;
  z-index: 1;
}

/* Le halo de la carte, au passage de l'étincelle. On passe par un pseudo-élément
   et non par `box-shadow` sur la carte elle-même : une déclaration animée
   l'emporterait sur le `box-shadow` du survol et casserait l'élévation. */
html.cc-anim .cc-circuit-carte::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(6, 182, 212, .75);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, .16),
              0 0 22px rgba(6, 182, 212, .40),
              inset 0 0 24px rgba(6, 182, 212, .07);
  opacity: 0;
  pointer-events: none;
  animation: cc-circuit-glow var(--cc-circuit-duree, 7s) linear infinite;
  animation-delay: var(--cc-circuit-delai, 0ms);
}

/* Le halo s'allume à l'arrivée de l'étincelle, puis s'éteint : la carte
   s'illumine une fraction du cycle, jamais en même temps que sa voisine. */
@keyframes cc-circuit-glow {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  15%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Repli : sans `offset-path`, l'étincelle resterait figée dans un coin. On la
   masque, ainsi que le halo qu'elle déclenche. Le tracé en filigrane demeure. */
@supports not (offset-path: path("M 0 0")) {
  .cc-circuit-spark { display: none; }
  html.cc-anim .cc-circuit-carte::after { display: none; }
}

/* Mouvement réduit : le circuit n'existe que pour animer, il disparaît
   entièrement. Les cartes et leur contenu restent inchangés. */
@media (prefers-reduced-motion: reduce) {
  .cc-circuit { display: none !important; }
}

@media print {
  .cc-circuit { display: none !important; }
}