/* =========================================================================
   La Colisserie — Animation d'ouverture (intro)
   SVG inline + Web Animations API. Overlay affiché uniquement si <html.intro-play>
   (classe posée en amont par un script de décision, avant le premier paint).
   ========================================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                 /* n'apparaît que si intro-play */
  place-items: center;
  background: var(--blanc);       /* base OPAQUE : masque la home dès le 1er paint */
  clip-path: circle(120vmax at 50% 50%);  /* pleine couverture ; se rétracte au reveal */
  will-change: clip-path;
}
html.intro-play .intro { display: grid; }

/* Le cercle jaune qui remplit l'écran (au-dessus de la base blanche, sous la frimousse). */
.intro__fill {
  position: absolute;
  inset: 0;
  background: var(--jaune);
  clip-path: circle(0vmax at 50% 50%);
  will-change: clip-path;
}

/* Sécurité : si l'utilisateur a demandé moins d'animations, aucun overlay. */
@media (prefers-reduced-motion: reduce) {
  html.intro-play .intro { display: none; }
}

.intro__face {
  position: relative;
  z-index: 1;                    /* au-dessus du remplissage jaune */
  width: min(62vmin, 520px);     /* frimousse large (composition diagonale de la source) */
  height: auto;
  overflow: visible;
}

/* Yeux : cachés au départ (scale 0 + transparent), pop en JS. transform-box → origin centré. */
.intro__eye {
  transform: scale(0);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Sourire : forme pleine identique à la source, révélée par la plume (masque) dessinée en JS.
   La plume est cachée au départ (dashoffset large) pour éviter tout flash avant le JS. */
.intro__pen {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}

/* =========================================================================
   Logotype d'en-tête (SVG) — animation d'ouverture : le texte pope,
   puis la frimousse juste au-dessus.
   ========================================================================= */
.hero__logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero__logo-svg text { font-family: var(--font-display); font-weight: 900; fill: var(--jaune); }
.hlogo-big { font-size: 349.79px; }
.hlogo-small { font-size: 209.87px; }
.hlogo-frim { fill: var(--jaune); }

/* Origine des transforms au centre de chaque groupe */
.hlogo-word, .hlogo-frim { transform-box: fill-box; transform-origin: center; }

/* Armé (caché) tant que l'intro d'ouverture doit jouer → pas de flash avant le reveal. */
html.intro-play .hlogo-word,
html.intro-play .hlogo-frim { opacity: 0; }

/* Déclenché au reveal (classe posée par intro.js) : le mot pope, la frimousse suit. */
.hero__logo.is-playing .hlogo-word {
  animation: hlogoPop 0.5s cubic-bezier(.22,1.2,.36,1) both;
}
.hero__logo.is-playing .hlogo-frim {
  animation: hlogoPopFrim 0.52s cubic-bezier(.22,1.2,.36,1) 0.34s both;
}
@keyframes hlogoPop {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hlogoPopFrim {
  from { opacity: 0; transform: translateY(-12%) scale(.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo.is-playing .hlogo-word,
  .hero__logo.is-playing .hlogo-frim { animation: none; opacity: 1; }
}

/* =========================================================================
   Chats du hero — animation d'ouverture : les 2 chats-en-boîte sortent du carton
   et popent l'un après l'autre, suivis des 2 autres.
   ========================================================================= */
.hcat-inbox { transform-box: fill-box; transform-origin: 50% 100%; } /* origine = base (la boîte) → jaillit vers le haut */
.hcat-other { transform-box: fill-box; transform-origin: center; }

/* Armés (INVISIBLES) tant que l'intro doit jouer : scale(0) → rien à l'écran,
   puis ils jaillissent d'un coup au reveal. */
html.intro-play .hcat-inbox { transform: scale(0); }
html.intro-play .hcat-other { transform: scale(0); opacity: 0; }

/* Déclenché au reveal (classe .cats-go posée par intro.js) : pop franc, l'un après l'autre,
   puis les deux autres. */
.hero.cats-go .hero__cats--l .hcat-inbox { animation: catJump 0.46s cubic-bezier(.34,1.42,.5,1) 0s both; }
.hero.cats-go .hero__cats--r .hcat-inbox { animation: catJump 0.46s cubic-bezier(.34,1.42,.5,1) 0.2s both; }
.hero.cats-go .hero__cats--l .hcat-other { animation: catPop 0.46s cubic-bezier(.34,1.42,.5,1) 0.62s both; }
.hero.cats-go .hero__cats--r .hcat-other { animation: catPop 0.46s cubic-bezier(.34,1.42,.5,1) 0.82s both; }

@keyframes catJump {
  0%   { transform: scale(0); }
  72%  { transform: scale(1.08); }   /* rebond = jaillissement */
  100% { transform: scale(1); }
}
@keyframes catPop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-play .hcat-inbox,
  html.intro-play .hcat-other { transform: none; opacity: 1; }
  .hero.cats-go .hcat-inbox, .hero.cats-go .hcat-other { animation: none; }
}

/* =========================================================================
   Illustration Problème — cartons qui s'empilent + horloge qui tourne
   (déclenché au scroll dans la vue par main.js : classe .illu-play).
   ========================================================================= */
.probleme__illu .hbox  { transform-box: fill-box; transform-origin: 50% 100%; } /* pivot = base du carton */
.probleme__illu .hhand { transform-box: view-box; transform-origin: 1170.9px 868.09px; } /* pivot = centre horloge */

/* Armé (cartons cachés) seulement quand JS va animer → sinon illustration statique. */
.probleme__illu.illu-armed .hbox { opacity: 0; }

/* Empilement séquentiel base → sommet : carton 1 → 3 → 2 → 5 → 4 */
.probleme__illu.illu-play .hbox-1 { animation: boxDrop .5s cubic-bezier(.2,1.15,.3,1) 0s   both; }
.probleme__illu.illu-play .hbox-3 { animation: boxDrop .5s cubic-bezier(.2,1.15,.3,1) .13s both; }
.probleme__illu.illu-play .hbox-2 { animation: boxDrop .5s cubic-bezier(.2,1.15,.3,1) .26s both; }
.probleme__illu.illu-play .hbox-5 { animation: boxDrop .5s cubic-bezier(.2,1.15,.3,1) .39s both; }
/* carton du sommet : chute puis oscillation d'équilibre en boucle (coin à coin) */
.probleme__illu.illu-play .hbox-4 {
  animation: boxDrop .5s cubic-bezier(.2,1.15,.3,1) .52s both,
             boxTeeter 3.2s ease-in-out 1.15s infinite;
}
/* aiguilles : rotations INDÉPENDANTES comme une horloge (seconde > minute > heure) */
.probleme__illu.illu-play .hhand-s { animation: handSpin 2.5s linear .35s infinite; }  /* trotteuse */
.probleme__illu.illu-play .hhand-m { animation: handSpin 15s  linear .35s infinite; }  /* minutes */
.probleme__illu.illu-play .hhand-h { animation: handSpin 45s  linear .35s infinite; }  /* heures */

@keyframes boxDrop {
  from { opacity: 0; transform: translateY(-16%) scale(.9); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes boxTeeter {           /* démarre et finit à 0 → boucle sans à-coup après la chute */
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2.4deg); }
  75%  { transform: rotate(-2.4deg); }
  100% { transform: rotate(0deg); }
}
@keyframes handSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .probleme__illu .hbox, .probleme__illu .hhand { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   Transition — les pattes apparaissent l'une après l'autre, puis les faciès
   se révèlent (déclenché au scroll par main.js : .transition-play).
   ========================================================================= */
.paw { transform-box: fill-box; transform-origin: center; }
/* Pivot des têtes au niveau du bord du panneau (le « cou ») → balancement naturel */
.transition__cat-head--top    { transform-origin: 50% 76.35%; }
.transition__cat-head--bottom { transform-origin: 50% 25%; }

/* Armé : pattes invisibles, têtes enfoncées derrière le panneau (masquées par la surface). */
.transition-armed .paw { transform: scale(0); opacity: 0; }
.transition-armed .transition__cat-head--top    { transform: translateY(-22%); }
.transition-armed .transition__cat-head--bottom { transform: translateY(21%); }

/* Joué : 4 pattes en pop successif, puis les 2 têtes se révèlent (montée derrière le bord). */
.transition-play .paw-1 { animation: pawPop .42s cubic-bezier(.34,1.5,.5,1) 0s   both; }
.transition-play .paw-2 { animation: pawPop .42s cubic-bezier(.34,1.5,.5,1) .16s both; }
.transition-play .paw-3 { animation: pawPop .42s cubic-bezier(.34,1.5,.5,1) .32s both; }
.transition-play .paw-4 { animation: pawPop .42s cubic-bezier(.34,1.5,.5,1) .48s both; }
/* Reveal, puis oscillation douce qui s'enchaîne pile à la fin (delais = fin du reveal) :
   les keyframes conservent le translateY de calage et partent/finissent à 0° → raccord net. */
.transition-play .transition__cat-head--top {
  animation: headRevealTop .6s cubic-bezier(.34,1.3,.5,1) .82s both,
             headSwayTop 3.6s ease-in-out 1.42s infinite;
}
.transition-play .transition__cat-head--bottom {
  animation: headRevealBottom .6s cubic-bezier(.34,1.3,.5,1) .97s both,
             headSwayBottom 3.6s ease-in-out 1.57s infinite;
}

@keyframes pawPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes headRevealTop    { from { transform: translateY(-22%); } to { transform: translateY(-76.35%); } }
@keyframes headRevealBottom { from { transform: translateY(21%);  } to { transform: translateY(75%); } }

/* Balancement latéral léger (contre-phase entre les deux têtes → plus organique) */
@keyframes headSwayTop {
  0%   { transform: translateY(-76.35%) rotate(0deg); }
  25%  { transform: translateY(-76.35%) rotate(-1.2deg); }
  75%  { transform: translateY(-76.35%) rotate(1.2deg); }
  100% { transform: translateY(-76.35%) rotate(0deg); }
}
@keyframes headSwayBottom {
  0%   { transform: translateY(75%) rotate(0deg); }
  25%  { transform: translateY(75%) rotate(1.2deg); }
  75%  { transform: translateY(75%) rotate(-1.2deg); }
  100% { transform: translateY(75%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .transition-armed .paw, .transition-armed .transition__cat-head--top, .transition-armed .transition__cat-head--bottom { transform: none !important; opacity: 1 !important; }
  .transition-play .paw, .transition-play .transition__cat-head--top, .transition-play .transition__cat-head--bottom { animation: none !important; }
}

/* =========================================================================
   Frise chronologique (Process) — au scroll : la ligne se trace, les pastilles
   popent l'une après l'autre, le texte de chaque étape monte en fondu.
   (.timeline-armed / .timeline-play posés par main.js)
   ========================================================================= */
.step__badge { transform-origin: center; }
/* index d'étape pour l'échelonnement */
.step { --k: 0; }
.step:nth-child(2) { --k: 1; }
.step:nth-child(3) { --k: 2; }
.step:nth-child(4) { --k: 3; }
.step:nth-child(5) { --k: 4; }

/* Armé : pastilles et textes cachés, segments repliés. */
.timeline-armed .step__badge { transform: scale(0); opacity: 0; }
.timeline-armed .step__body  { opacity: 0; transform: translateY(14px); }
.timeline-armed .step:not(:last-child)::before { transform: scaleY(0); }  /* trait vertical (mobile) */

/* Joué : échelonné par étape (var(--k)). */
.timeline-play .step__badge {
  animation: tlBadge .46s cubic-bezier(.34,1.45,.5,1) both;
  animation-delay: calc(var(--k) * .24s);
}
.timeline-play .step__body {
  animation: tlBody .5s ease-out both;
  animation-delay: calc(var(--k) * .24s + .14s);
}
.timeline-play .step:not(:last-child)::before {
  animation: tlLineY .3s ease-out both;
  animation-delay: calc(var(--k) * .24s);
}

@keyframes tlBadge { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tlBody  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tlLineY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tlLineX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .timeline-armed .step__badge, .timeline-armed .step__body,
  .timeline-armed .step:not(:last-child)::before { transform: none !important; opacity: 1 !important; }
  .timeline-play .step__badge, .timeline-play .step__body,
  .timeline-play .step:not(:last-child)::before, .timeline-play::before { animation: none !important; }
}

/* =========================================================================
   Crédibilité (illu) — étoiles qui scintillent + colis qui coulissent latéralement.
   Boucles ambiantes lancées au scroll (.illu-anim posé par main.js).
   ========================================================================= */
.etoile, .colis { transform-box: fill-box; transform-origin: center; }

.credibilite__illu.illu-anim .etoile { animation: twinkle var(--d, 2s) ease-in-out var(--dl, 0s) infinite; }
.credibilite__illu.illu-anim .etoile--1 { --d: 1.7s; --dl: 0s;   }
.credibilite__illu.illu-anim .etoile--2 { --d: 2.3s; --dl: .5s;  }
.credibilite__illu.illu-anim .etoile--3 { --d: 1.9s; --dl: .9s;  }
.credibilite__illu.illu-anim .etoile--4 { --d: 2.5s; --dl: .25s; }
.credibilite__illu.illu-anim .etoile--5 { --d: 2.1s; --dl: 1.2s; }

.credibilite__illu.illu-anim .colis   { animation: slideX 4.6s ease-in-out infinite; }
.credibilite__illu.illu-anim .colis--2 { animation-delay: -1.5s; }   /* déphasage → balancement désynchronisé */
.credibilite__illu.illu-anim .colis--3 { animation-delay: -3s;   }

@keyframes twinkle {
  0%, 100% { opacity: .5;  transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes slideX {
  0%, 100% { transform: translateX(-1.3%); }
  50%      { transform: translateX(1.3%); }
}

@media (prefers-reduced-motion: reduce) {
  .credibilite__illu .etoile, .credibilite__illu .colis { animation: none !important; }
}

/* =========================================================================
   Offre — révélation échelonnée des 3 cartes au scroll (.cartes-armed/-play).
   On anime `translate` (≠ `scale` du hover) → le pop au survol reste opérant.
   ========================================================================= */
.carte { --i: 0; }
.carte:nth-child(2) { --i: 1; }
.carte:nth-child(3) { --i: 2; }

.cartes-armed .carte { opacity: 0; translate: 0 26px; }
.cartes-play  .carte {
  animation: cardReveal .55s cubic-bezier(.34, 1.32, .5, 1) both;
  animation-delay: calc(var(--i) * .13s);
}
@keyframes cardReveal {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cartes-armed .carte { opacity: 1 !important; translate: none !important; }
  .cartes-play  .carte { animation: none !important; }
}