/* ============================================================================
   EQUIMONDO.APP -- LA COQUE, AU STYLE D'OPADDOCK  (09/09/2026)
   ----------------------------------------------------------------------------
   ARBITRAGE CLIENT DU 09/09/2026 : les vitrines Equimondo reprennent la
   signature visuelle de la marketplace oPaddock (apps/opaddock/css/) --
   emeraude #10b981 et ses variantes, gris ardoise, fond clair, Inter seule,
   icones Tabler, coins tres arrondis, ombres larges et teintees, survols qui
   se deplacent.

   POURQUOI CE FICHIER, ET PAS eqv.css. equimondo.fr et myequimondo.com
   partagent eqv.css, ecrite pour LEUR balisage (.btn-plein, .carte, .mm-item,
   #navPrincipale...). equimondo.app, lui, est ecrit en classes utilitaires
   facon Tailwind, servies par assets/utilitaires.css (GENERE par
   _commun/outils/gen_utilitaires.py). Charger eqv.css ici n'aurait style
   AUCUN element : pas un seul de ses selecteurs n'existe dans ces 14 pages.
   app.css reprend donc les memes TOKENS et les memes RECETTES, appliques aux
   identifiants et aux classes de ce site-la.

   OU VIT QUOI :
     - la PALETTE (les valeurs de bg-emeraude, text-encre, bg-sapin...) est
       dans gen_utilitaires.py : les NOMS des utilitaires n'ont pas bouge, ce
       sont leurs valeurs qui sont passees a celles d'oPaddock ;
     - ce fichier porte ce qu'un utilitaire ne sait pas dire : la barre de
       navigation, le tiroir mobile, le pied, les cartes, la FAQ, le hero de
       l'accueil et sa maquette de navigateur animee.

   Ces regles vivaient dans le <style> de chaque page : 15 lignes identiques
   recopiees dans 10 pages, et 142 lignes dans l'accueil. Les pages n'ont plus
   aucun CSS en ligne.

   SPECIFICITE, et c'est le point delicat. utilitaires.css est chargee AVANT
   ce fichier : a specificite egale, c'est donc app.css qui gagne. Les regles
   ci-dessous s'appuient dessus (une classe contre une classe) ou passent par
   un identifiant quand l'utilitaire doit ceder franchement (#navbar, #mmenu).
   UNE EXCEPTION A CONNAITRE : on ne pose JAMAIS `display` sur #burger ni sur
   #mmenu -- l'un est masque par `lg:hidden`, l'autre bascule entre `hidden` et
   `flex` en JavaScript, et un identifiant ecraserait les deux.

   Fichier ASCII pur : les pages sont servies en ISO-8859-1.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
/* Les NOMS sont ceux d'oPaddock (--primary*, --slate-*, --shadow-*), comme dans
   eqv.css : deux produits qui affichent la meme couleur doivent l'appeler du
   meme nom, sinon la prochaine retouche n'est reportee que d'un cote. */
:root{
  --primary-50:#ecfdf5;
  --primary-100:#d1fae5;
  --primary-300:#6ee7b7;
  --primary-light:#34d399;
  --primary:#10b981;
  --primary-rgb:16,185,129;
  --primary-dark:#059669;
  --primary-darker:#047857;
  --primary-800:#065f46;
  --primary-900:#064e3b;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;
  --blue-400:#60a5fa;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --amber-400:#fbbf24;
  --amber-500:#f59e0b;
  --amber-600:#d97706;
  --shadow-soft:0 4px 12px rgba(0,0,0,.05);
  --shadow-md:0 10px 30px rgba(0,0,0,.08);
  --shadow-lg:0 20px 50px rgba(0,0,0,.12);
  --shadow-xl:0 30px 80px rgba(0,0,0,.18);
  --shadow-primary:0 10px 30px rgba(var(--primary-rgb),.25);
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-spring:cubic-bezier(.175,.885,.32,1.275);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --radius:24px;
  /* Lu par les regles heritees de l'accueil, qui l'ecrivaient `--eo`. */
  --eo:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ BASE -- */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--slate-800);background:linear-gradient(135deg,var(--slate-50) 0%,#fff 50%,var(--primary-50) 100%);overflow-x:hidden}
::selection{background:var(--primary);color:#fff}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
/* Tabler s'aligne sur le texte ; Font Awesome le faisait tout seul. */
.ti{vertical-align:-.12em}

/* Le contraste des titres vient de la GRAISSE et du resserrement, plus d'un
   second caractere : `font-serif` ne designe plus une serif (cf. l'en-tete). */
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.15}

/* ------------------------------------------------------------ APPARITION -- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.reveal-l{opacity:0;transform:translateX(-38px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal-r{opacity:0;transform:translateX(38px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal-s{opacity:0;transform:scale(.92);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.vu{opacity:1 !important;transform:none !important}
.no-js .reveal,.no-js .reveal-l,.no-js .reveal-r,.no-js .reveal-s{opacity:1;transform:none}

/* ------------------------------------------------------------- LE VERT ---- */
/* UNE seule regle donne a tout le site le degrade d'oPaddock. `bg-emeraude`
   ne pose qu'une `background-color` (utilitaires.css) ; on ajoute ici l'IMAGE
   de fond, qui se peint par-dessus. Boutons, pastilles, tuiles d'icones et
   badges suivent d'un coup, sans toucher une seule des 14 pages -- et un
   `hover:bg-emeraudefonce` continue de fonctionner : il change la couleur
   SOUS l'image, donc on lui redonne son propre degrade juste apres. */
.bg-emeraude{background-image:linear-gradient(135deg,var(--primary-light),var(--primary-dark))}
.hover\:bg-emeraudefonce:hover{background-image:linear-gradient(135deg,var(--primary),var(--primary-darker))}

/* Les boutons d'appel a l'action : la pilule d'oPaddock. */
.btn-shine{position:relative;overflow:hidden;box-shadow:var(--shadow-primary);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 3.2s ease-in-out infinite}
.btn-shine:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--primary-rgb),.42)}
@keyframes shine{0%,55%{left:-60%}85%,100%{left:130%}}
.glow-em{box-shadow:0 10px 34px rgba(var(--primary-rgb),.38),0 2px 10px rgba(var(--primary-rgb),.25)}
.pulse{animation:pulse2 2.4s ease-in-out infinite}
@keyframes pulse2{0%,100%{box-shadow:0 10px 34px rgba(var(--primary-rgb),.38)}55%{box-shadow:0 10px 34px rgba(var(--primary-rgb),.38),0 0 0 16px rgba(var(--primary-rgb),0)}}

/* ------------------------------------------------------------------- NAV -- */
/* La barre d'oPaddock dans son etat "scrolled" : blanche givree des le depart,
   ces pages n'ayant pas de photo plein ecran derriere elle. */
#navbar,#navbar.nav-blur{background:rgba(255,255,255,.85);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 4px 20px rgba(0,0,0,.05);border-bottom:1px solid rgba(var(--primary-rgb),.15)}
/* 10px + 48px de burger = les 68px que `main` reserve deja en haut de page.
   Toucher a l'un sans l'autre ferait passer le titre sous la barre. */
#navbar > div{padding-top:10px;padding-bottom:10px}
#navbar > div > a:first-child > span:first-child{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:14px;box-shadow:var(--shadow-md)}
#navnom{background:linear-gradient(to right,var(--primary-dark),var(--blue-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;letter-spacing:-.02em}
/* Le `:not(.btn-shine)` n'est pas une precaution de style : le trait de survol
   des liens et le reflet du bouton vert sont le MEME pseudo-element. Sans lui,
   la derniere des deux regles gagne et l'autre disparait -- ici, le reflet. */
#navliens > a:not(.btn-shine){position:relative;font-size:14px;font-weight:500;color:var(--slate-700);padding:10px 14px;border-radius:10px;transition:background .3s ease,color .3s ease}
#navliens > a:not(.btn-shine)::after{content:"";position:absolute;bottom:4px;left:50%;width:0;height:2px;background:var(--primary-light);transform:translateX(-50%);transition:width .3s ease}
#navliens > a:not(.btn-shine):hover{background:var(--primary-50);color:var(--primary-dark)}
#navliens > a:not(.btn-shine):hover::after{width:60%}
#navliens > a.btn-shine{color:#fff;padding:12px 22px;border-radius:999px}

/* ---- Le burger : la tuile degradee d'oPaddock -------------------------- */
/* PAS de `display` ici : `lg:hidden` doit continuer de le masquer sur PC. */
#burger{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;box-shadow:0 8px 20px rgba(var(--primary-rgb),.4),0 0 0 3px rgba(255,255,255,.95);transition:transform .3s ease,box-shadow .3s ease}
#burger:hover{transform:scale(1.05);box-shadow:0 12px 28px rgba(var(--primary-rgb),.5),0 0 0 3px #fff}

/* ---- Le tiroir mobile : panneau droit, voile flou, liens en cascade ----- */
/* PAS de `display` ici non plus : le JavaScript bascule `hidden` / `flex`. */
#mmenu{left:auto;right:0;top:0;bottom:0;width:min(88%,380px);background:linear-gradient(180deg,#fff 0%,#f0fdf4 100%);color:var(--slate-800);box-shadow:-30px 0 80px rgba(0,0,0,.25);padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));overflow-y:auto}
/* Le voile occupe ce que le panneau laisse : `position:fixed` sur un
   pseudo-element se cale sur la fenetre, pas sur le panneau. */
#mmenu::before{content:"";position:fixed;top:0;left:0;bottom:0;right:min(88%,380px);background:rgba(15,23,42,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#mmenu > div:first-child > span{color:var(--slate-900);letter-spacing:-.02em}
#mmenu #mclose{border:none;background:linear-gradient(135deg,var(--slate-100),var(--slate-200));color:var(--slate-700);box-shadow:0 4px 12px rgba(15,23,42,.1);transition:background .35s var(--ease-spring),transform .35s var(--ease-spring),color .3s}
#mmenu #mclose:hover{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;transform:scale(1.1)}
#mmenu nav a{border-bottom:1px solid rgba(var(--primary-rgb),.15);border-radius:14px;padding-left:14px;padding-right:12px;font-size:1.35rem;color:var(--slate-800);opacity:0;transform:translateX(34px);animation:mmEntre .5s cubic-bezier(.34,1.56,.64,1) forwards;transition:background .3s var(--ease),color .3s var(--ease)}
#mmenu nav a:hover{background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(59,130,246,.06));color:var(--primary-dark)}
#mmenu nav a:nth-child(1){animation-delay:.14s}
#mmenu nav a:nth-child(2){animation-delay:.2s}
#mmenu nav a:nth-child(3){animation-delay:.26s}
#mmenu nav a:nth-child(4){animation-delay:.32s}
#mmenu nav a:nth-child(5){animation-delay:.38s}
@keyframes mmEntre{to{opacity:1;transform:translateX(0)}}
#mmenu > a:last-child{box-shadow:var(--shadow-primary)}

/* ---------------------------------------------------------------- CARTES -- */
/* Blanches, tres arrondies, sans bordure, une ombre douce qui se creuse au
   survol : la carte d'oPaddock. Les pages ecrivent `rounded-2xl border
   border-emerald-900/10` -- a specificite egale, c'est ce fichier qui gagne. */
.tilt,.lift,.bento{border:none;border-radius:var(--radius);box-shadow:var(--shadow-md);transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring)}
.tilt:hover,.lift:hover,.bento:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.zoomimg{overflow:hidden}
.zoomimg .zi{transition:transform 1s var(--ease-out)}
.zoomimg:hover .zi{transform:scale(1.06)}
/* Le grand chiffre en filigrane derriere les sections. */
.ghost{position:absolute;font-weight:800;letter-spacing:-.04em;color:rgba(var(--primary-rgb),.09);line-height:1;pointer-events:none;user-select:none}

/* Les blocs sombres de bas de page (`bg-sapin`) : bleu-nuit plus une lueur
   emeraude, comme le bloc de conclusion d'oPaddock. */
section.bg-sapin{background-image:radial-gradient(900px 520px at 82% -12%,rgba(var(--primary-rgb),.2),transparent 62%),radial-gradient(700px 460px at 6% 110%,rgba(59,130,246,.12),transparent 60%)}

/* ------------------------------------------------------------------- FAQ -- */
details.faq{border:1.5px solid var(--slate-200);border-radius:18px;box-shadow:var(--shadow-soft);transition:border-color .3s ease,box-shadow .3s ease}
details.faq:hover{border-color:rgba(var(--primary-rgb),.35)}
details.faq[open]{border-color:var(--primary);box-shadow:0 16px 40px -20px rgba(var(--primary-rgb),.45)}
details.faq summary{cursor:pointer;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq[open] .chev{transform:rotate(180deg)}
.chev{transition:transform .3s}

/* ---------------------------------------------------------- FORMULAIRES --- */
form input,form textarea{border:1.5px solid var(--slate-200);border-radius:14px;color:var(--slate-800);background:#fff;transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out)}
form input::placeholder,form textarea::placeholder{color:var(--slate-400)}
form input:hover,form textarea:hover{border-color:var(--primary-300)}
form input:focus,form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.13)}
form button{box-shadow:var(--shadow-primary);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
form button:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--primary-rgb),.42)}

/* ---------------------------------------------------------------- PIED ---- */
footer.bg-encre{background-color:var(--slate-900);color:rgba(255,255,255,.7)}
footer.bg-encre p.font-semibold.text-creme{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-300)}
footer.bg-encre ul{list-style:none;margin:0;padding:0}
footer.bg-encre a{color:rgba(255,255,255,.7);transition:color .3s ease}
footer.bg-encre a:hover{color:var(--primary-light)}
footer.bg-encre div.text-creme span:last-child{background:linear-gradient(135deg,var(--primary-light),var(--blue-400));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:800;letter-spacing:-.02em}
footer.bg-encre div.text-creme > span:first-child{border-radius:12px;box-shadow:0 6px 16px rgba(var(--primary-rgb),.35)}

/* ============================================================================
   L'ACCUEIL -- hero, maquette de navigateur animee, bandeau defilant, CTA
   ==========================================================================*/

/* ---- Le hero : aurores et grain lumineux sur un fond clair -------------- */
.hero{background:radial-gradient(1000px 600px at 80% -10%,rgba(var(--primary-rgb),.22),transparent 60%),radial-gradient(800px 500px at 8% 110%,rgba(59,130,246,.12),transparent 60%),linear-gradient(160deg,var(--slate-50) 0%,var(--slate-100) 55%,var(--primary-50) 100%)}
.aurore{position:absolute;border-radius:9999px;filter:blur(70px);opacity:.5;pointer-events:none}
.a1{width:520px;height:520px;background:radial-gradient(circle,var(--primary),transparent 65%);top:-160px;right:-80px;animation:derive 16s ease-in-out infinite}
.a2{width:420px;height:420px;background:radial-gradient(circle,var(--blue-500),transparent 65%);bottom:-160px;left:-120px;opacity:.24;animation:derive 21s ease-in-out infinite reverse}
.a3{width:300px;height:300px;background:radial-gradient(circle,var(--primary-300),transparent 65%);top:35%;left:38%;opacity:.22;animation:derive 24s ease-in-out 2s infinite}
@keyframes derive{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
#dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#prog{transform-origin:left;transform:scaleX(0)}

/* Le titre monte ligne par ligne, puis le reste apparait. */
.h1line{display:block;overflow:hidden}
.h1line i{display:block;font-style:normal;transform:translateY(114%);transition:transform 1s var(--ease-out)}
.hero.pret .h1line i{transform:none}
.hero.pret .h1line:nth-child(2) i{transition-delay:.12s}
.hero.pret .h1line:nth-child(3) i{transition-delay:.24s}
.fade1,.fade2,.fade3{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.hero.pret .fade1{opacity:1;transform:none;transition-delay:.5s}
.hero.pret .fade2{opacity:1;transform:none;transition-delay:.68s}
.hero.pret .fade3{opacity:1;transform:none;transition-delay:.86s}
.grad-txt{background:linear-gradient(100deg,var(--primary-dark),var(--primary) 55%,var(--primary-light));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Plus de soulignement dessine sous "Gratuit" : pas de trait (arbitrage client du 09/09/2026). */
.souligne{position:relative;white-space:nowrap}

/* ---- La maquette de navigateur : le site se construit tout seul --------- */
.navig{border-radius:var(--radius);box-shadow:var(--shadow-xl),0 0 0 1px rgba(15,23,42,.05),0 0 60px rgba(var(--primary-rgb),.18);transition:transform .25s ease-out}
.b-el{opacity:0;transform:translateY(12px) scale(.97);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.b-el.on{opacity:1;transform:none}
.b-hero{background:linear-gradient(120deg,var(--primary-900),var(--primary));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
.b-hero.on{transform:none}
.curseur{display:inline-block;width:2px;height:1em;background:#fff;vertical-align:-2px;animation:cligne .8s steps(1) infinite}
@keyframes cligne{50%{opacity:0}}
.b-photo{position:relative;overflow:hidden;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.b-photo.montre{opacity:1 !important;transform:none !important}
.b-photo::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-70%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.b-photo.montre::after{animation:shine .9s ease-out .1s}
.stamp{transform:scale(2.2) rotate(-14deg);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.stamp.on{transform:scale(1) rotate(-6deg);opacity:1}
.anneau{position:absolute;inset:-8px;border-radius:14px;border:2px solid var(--primary);opacity:0;pointer-events:none}
.stamp.on .anneau{animation:onde .7s ease-out .1s}
.confetti{position:absolute;width:7px;height:7px;border-radius:2px;opacity:0}
.confetti.go{animation:conf 1s ease-out forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(240deg)}}
.barre-prog{transform-origin:left;transform:scaleX(0);transition:transform .5s linear}
.pop{opacity:0;transform:scale(.55);transition:opacity .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
.pop.montre{opacity:1;transform:scale(1)}
.scanline{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.scanline.on{opacity:1}
.scanline::after{content:"";position:absolute;left:0;right:0;height:70px;top:-80px;background:linear-gradient(180deg,transparent,rgba(var(--primary-rgb),.16),rgba(var(--primary-rgb),.34),transparent);animation:scan 1.3s ease-in-out infinite}
@keyframes scan{0%{top:-80px}100%{top:110%}}
.etoile{position:absolute;color:var(--primary);font-size:11px;opacity:0;animation:etoi .75s ease-out forwards;pointer-events:none}
@keyframes etoi{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(90deg) translateY(-16px)}}
.statut{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:var(--shadow-soft);border-radius:9999px;padding:6px 14px;font-size:11px;font-weight:600;color:var(--primary-dark);display:flex;align-items:center;gap:7px;white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.statut.fini{background:var(--primary);color:#fff;border-color:var(--primary)}
.pts{display:inline-flex;gap:3px}
.pts i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:ptsb 1s ease-in-out infinite}
.pts i:nth-child(2){animation-delay:.15s}
.pts i:nth-child(3){animation-delay:.3s}
@keyframes ptsb{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.statut.fini .pts{display:none}
.fauxcur{position:absolute;z-index:6;color:var(--slate-800);font-size:15px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));opacity:0;transition:top .9s cubic-bezier(.4,0,.2,1),left .9s cubic-bezier(.4,0,.2,1),opacity .3s}
.fauxcur.la{opacity:1}
.ondes{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid var(--primary);opacity:0;pointer-events:none;z-index:5}
.ondes.go{animation:onde .6s ease-out forwards}
@keyframes onde{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.mockdots span{width:10px;height:10px;border-radius:9999px;display:inline-block}

/* ---- Les trois cartes qui flottent autour de la maquette --------------- */
.flotte{animation:flotte 5.5s ease-in-out infinite}
.flotte2{animation:flotte 6.5s ease-in-out infinite reverse}
.flotte3{animation:flotte 7.5s ease-in-out 1s infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.flotte > div,.flotte2 > div,.flotte3 > div{border:none;border-radius:18px;box-shadow:var(--shadow-lg)}

/* ---- Le bandeau defilant des metiers ----------------------------------- */
.marquee{overflow:hidden}
.marquee-t{display:flex;width:max-content;animation:defile 26s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---- Le fil qui relie les quatre etapes -------------------------------- */
.fil{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
.fil.vu2{stroke-dashoffset:0}

/* ---- La bande de conclusion, en vague ---------------------------------- */
/* Elle reste CLAIRE, contrairement au bloc sombre d'oPaddock : le titre y pose
   un mot en `text-nuit` (bleu-nuit), qui disparaitrait sur un fond fonce. */
.cta-anime{background:linear-gradient(120deg,var(--primary-dark),var(--primary),var(--primary-light),var(--primary),var(--primary-dark));background-size:300% 300%;animation:vague 12s ease-in-out infinite}
@keyframes vague{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- La demonstration de chat posee dans les pages --------------------- */

/* ------------------------------------------------------------ RESPONSIVE -- */
@media (max-width:640px){
  #mmenu{width:100%}
  #mmenu::before{content:none}
  #mmenu nav a{font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal,.reveal-l,.reveal-r,.reveal-s,.h1line i,.fade1,.fade2,.fade3{opacity:1 !important;transform:none !important}
  .b-el,.b-hero,.stamp{opacity:1 !important;transform:none !important}
  .navig{transform:none}
  /* Les liens du tiroir apparaissent PAR l'animation : sans elle, ils
     resteraient invisibles et le menu paraitrait vide. */
  #mmenu nav a{opacity:1 !important;transform:none !important}
}