/* ============================================================================
   VITRINES EQUIMONDO -- LA COQUE COMMUNE, AU STYLE D'OPADDOCK  (09/09/2026)
   ----------------------------------------------------------------------------
   Feuille PARTAGEE par equimondo.fr et myequimondo.com (symlink dans
   <site>/public/assets/eqv.css), chargee AVANT chat-panneau.css et
   chat-lanceur.css, et avant le <style> propre a chaque page.

   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. Le cheval 3D du hero est conserve (meme arbitrage).

   LES NOMS DE VARIABLES SONT CEUX D'OPADDOCK (--primary*, --slate-*, --shadow-*,
   --ease*), et c'est volontaire : deux produits qui affichent la meme couleur
   doivent l'appeler du meme nom, sinon la prochaine retouche n'est reportee
   que d'un cote. La reference reste apps/opaddock/css/style_header.css.
   equiquiz.com a fait le meme choix le 08/09/2026 (equiquiz.css).

   Les anciennes variables (--emeraude, --creme, --sable, --encre, --or) N'ONT
   PAS d'alias ici : elles ont ete remplacees dans tout le CSS des pages. En
   redeclarer une "pour depanner" recreerait deux palettes.

   Les NOMS DE CLASSES sont ceux du balisage existant des deux sites (.btn-plein,
   .carte, .sous-menu, .mm-item, .faq-item, footer...) : c'est le CSS qui a
   change de peau, pas les 70 pages. Les identifiants lus par le JavaScript
   (#navPrincipale + .colle, #boutonBurger, #menuMobile + .ouvert, .reveal +
   .visible, .faq-item + .ouvert, #modalDemo) sont inchanges.

   Fichier ASCII pur, comme tous les assets communs : les pages sont servies en
   ISO-8859-1.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
: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;
  --yellow-400:#facc15;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --purple-500:#a855f7;
  --orange-500:#f97316;
  --red-500:#ef4444;
  /* Les accents secondaires des badges d'icones. Ce sont des IDENTIFIANTS de
     famille (fonctionnalite, public, tarif...), pas la couleur de marque : ils
     ne suivent pas le theme, comme les couleurs de serie d'eqmChart. */
  --amber-400:#fbbf24;
  --amber-500:#f59e0b;
  --amber-600:#d97706;
  --blue-400:#60a5fa;
  --orange-400:#fb923c;
  --orange-600:#ea580c;
  --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 la feuille PARTAGEE des partenaires (_commun/assets/partenaires.css) :
     une seule famille, plus de serif pour les titres. */
  --titre-police:inherit;
}

/* ------------------------------------------------------------------ BASE -- */
*{margin:0;padding:0;box-sizing:border-box}
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;
  font-size:16px;line-height:1.65;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%}
img,iframe,svg,video{max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap-etroit{max-width:860px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
section{position:relative;padding:84px 0}
/* Une seule famille, comme oPaddock : le contraste des titres vient de la
   graisse et du resserrement, plus d'un second caractere. */
h1,h2,h3,h4{font-family:inherit;font-weight:800;letter-spacing:-.02em;line-height:1.15}
h2.titre-section{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin-bottom:14px;color:var(--slate-800)}
h2.titre-section .accent,h2.titre-section em{font-style:normal;color:var(--primary-dark)}
p.sous-titre{color:var(--slate-600);font-size:clamp(1rem,1.5vw,1.12rem);max-width:640px;margin-bottom:44px;line-height:1.6}
.centre{text-align:center}
.centre p.sous-titre{margin-left:auto;margin-right:auto}
/* Le chapeau SEO au-dessus du grand titre : c'est l'"eyebrow" d'oPaddock. */
/* Pas de trait devant le surtitre (arbitrage client du 09/09/2026) : le mot seul,
   en capitales espacees, suffit a le distinguer du titre. */
h1.h1-seo{
  display:inline-flex;align-items:center;
  font-size:12px!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary-dark);line-height:1.4!important;margin:0 0 18px;
  background:none;border:0;border-radius:0;padding:0;max-width:none;
}
p.h1-visuel{font-weight:800;letter-spacing:-.03em;color:var(--slate-900);line-height:1.1;margin-bottom:22px}
.hero p.h1-visuel{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:56px;max-width:none}
.hero-page p.h1-visuel,section p.h1-visuel{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:840px}

/* ------------------------------------------------------- APPARITION ------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.visible,.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- ICONES -- */
/* Tabler s'aligne sur le texte ; FontAwesome le faisait tout seul. */
.ti{vertical-align:-.12em}
.ti-spin{animation:tiSpin 1s linear infinite}
@keyframes tiSpin{to{transform:rotate(360deg)}}
/* Les quatre familles de badges. Un seul jeu de regles : chaque prefixe
   (.sm-ico, .carte-ico, .faq-ico, .mm-item-ico...) en heritait autrefois par
   copie, avec des couleurs qui divergeaient. */
.grad-emeraude{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark))!important}
.grad-bleu{background:linear-gradient(135deg,var(--blue-400),var(--blue-600))!important}
.grad-corail{background:linear-gradient(135deg,var(--orange-400),var(--orange-600))!important}
.grad-or{background:linear-gradient(135deg,var(--amber-400),var(--amber-600))!important}
.grad-violet{background:linear-gradient(135deg,#c084fc,#9333ea)!important}
[class*="grad-"] i,[class*="grad-"] svg{color:#fff!important}
.ico-bleu{color:var(--blue-600)!important}
.ico-or{color:var(--amber-600)!important}
.ico-corail{color:var(--orange-600)!important}
.ico-emeraude{color:var(--primary-dark)!important}

/* --------------------------------------------------------------- BOUTONS -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;text-decoration:none;font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s,border-color .3s;
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.28)}
.btn-plein{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;box-shadow:var(--shadow-md);
}
.btn-plein:hover{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-darker));
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(var(--primary-rgb),.4);
}
.btn-plein:active{transform:translateY(0)}
.btn-ligne{border:1.5px solid var(--primary);color:var(--primary-dark);background:transparent;padding:12px 22px}
.btn-ligne:hover{background:rgba(var(--primary-rgb),.08);transform:translateY(-2px)}
.btn-essayer{padding:12px 22px;font-size:14px;white-space:nowrap}
.btn-blanc{background:#fff;color:var(--primary-darker);box-shadow:var(--shadow-md)}
.btn-blanc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ------------------------------------------------------------------- NAV -- */
/* La barre d'oPaddock dans son etat "scrolled" : les vitrines n'ont pas de
   photo plein ecran derriere elle, elle est donc blanche des le depart. */
#navPrincipale{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  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),.12);
  transition:box-shadow .5s ease,border-color .5s ease;
}
#navPrincipale.colle{box-shadow:0 4px 20px rgba(0,0,0,.08);border-bottom-color:rgba(var(--primary-rgb),.15)}
.nav-int{display:flex;align-items:center;gap:24px;max-width:1280px;margin:0 auto;padding:14px 24px;transition:padding .3s ease}
#navPrincipale.colle .nav-int{padding-top:10px;padding-bottom:10px}
.marque{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1;
  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;
}
.marque i{color:var(--primary-dark);-webkit-text-fill-color:var(--primary-dark);font-size:1.3rem}
.marque .logo-app,.marque .logo-marque{height:44px;width:44px;border-radius:14px;display:block;flex-shrink:0;box-shadow:var(--shadow-md)}
.nav-liens{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-liens > a,.nav-deroulant > a{
  position:relative;display:flex;align-items:center;gap:8px;white-space:nowrap;
  color:var(--slate-700);text-decoration:none;font-weight:500;font-size:14px;
  padding:10px 14px;border-radius:10px;transition:background .3s ease,color .3s ease;
}
.nav-liens > a i,.nav-deroulant > a i{color:var(--primary-dark);font-size:20px;transition:transform .25s ease}
.nav-liens > a:hover,.nav-deroulant > a:hover,.nav-deroulant:focus-within > a{background:var(--primary-50);color:var(--primary-dark)}
.nav-liens > a:hover i{transform:translateY(-2px)}
.nav-liens > a::after,.nav-deroulant > a::after{
  content:"";position:absolute;bottom:4px;left:50%;width:0;height:2px;
  background:var(--primary-light);transform:translateX(-50%);transition:width .3s ease;
}
.nav-liens > a:hover::after,.nav-deroulant > a:hover::after{width:60%}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-actions .btn-plein{padding:12px 22px;font-size:14px}
.nav-actions .btn-ligne{padding:11px 20px;font-size:14px}

/* ---- Sous-menus deroulants (bureau) ---- */
.nav-deroulant{position:relative}
.fleche-menu{font-size:.8rem!important;margin-left:-2px;transition:transform .3s ease;color:var(--slate-400)!important}
.nav-deroulant:hover .fleche-menu,.nav-deroulant:focus-within .fleche-menu{transform:rotate(180deg)}
.nav-deroulant::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:22px}
.sous-menu{
  position:absolute;top:calc(100% + 14px);left:0;right:auto;
  max-width:min(680px,calc(100vw - 28px));
  transform:translateY(-10px) scale(.96);transform-origin:top left;
  opacity:0;visibility:hidden;pointer-events:none;
  background:#fff;
  border:1px solid rgba(15,23,42,.05);
  border-radius:22px;
  box-shadow:0 30px 60px -12px rgba(15,23,42,.28),0 8px 20px -8px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.6);
  padding:14px 12px 10px;
  transition:opacity .22s ease .28s,transform .26s var(--ease-out) .28s,visibility 0s linear .5s;
  z-index:60;
}
.sous-menu::before{content:"";position:absolute;top:0;left:26px;right:26px;height:3px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--primary),var(--blue-500))}
.sous-menu::after{content:"";position:absolute;top:-22px;left:-34px;right:-34px;height:22px}
.nav-deroulant:hover .sous-menu,.nav-deroulant:focus-within .sous-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s,0s,0s;
}
.nav-liens > .nav-deroulant:nth-last-child(-n+2) > .sous-menu{left:auto;right:0;transform-origin:top right}
.sm-large{width:560px}
.sm-moyen{width:340px}
.sm-grille{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.sm-colonne,.sm-colonnes{display:flex;flex-direction:column;gap:2px}
.sm-item{
  display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;
  text-decoration:none;color:var(--slate-800);
  transition:background .2s ease,transform .2s ease;
}
.sm-item:hover{background:rgba(var(--primary-rgb),.08);transform:translateX(2px)}
.sm-ico{
  width:54px;height:54px;flex-shrink:0;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:1.55rem;
  background:#fff!important;border:1px solid rgba(var(--primary-rgb),.15);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:background .35s var(--ease-spring),transform .35s var(--ease-spring),color .3s;
}
.sm-ico i,.sm-ico svg{color:inherit!important}
.sm-ico.grad-emeraude{color:var(--primary-dark)}
.sm-ico.grad-bleu{color:var(--blue-600)}
.sm-ico.grad-or{color:var(--amber-600)}
.sm-ico.grad-corail{color:var(--orange-600)}
.sm-item:hover .sm-ico{transform:rotate(-8deg) scale(1.1);color:#fff}
.sm-item:hover .sm-ico.grad-emeraude{background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important}
.sm-item:hover .sm-ico.grad-bleu{background:linear-gradient(135deg,var(--blue-400),var(--blue-600))!important}
.sm-item:hover .sm-ico.grad-or{background:linear-gradient(135deg,var(--amber-400),var(--amber-600))!important}
.sm-item:hover .sm-ico.grad-corail{background:linear-gradient(135deg,var(--orange-400),var(--orange-600))!important}
.sm-txt{line-height:1.3;min-width:0}
.sm-txt strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:color .2s ease}
.sm-item:hover .sm-txt strong{color:var(--primary-dark)}
.sm-txt small{display:block;font-size:12px;color:var(--slate-500);margin-top:2px}
.sm-pied{
  margin:8px 4px 0;padding:12px 8px 6px;border-top:1px solid var(--slate-100);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-size:13px;color:var(--slate-500);
}
.sm-pied a{color:var(--primary-dark);font-weight:600;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.sm-pied a i{font-size:.9rem;transition:transform .2s ease}
.sm-pied a:hover i{transform:translateX(3px)}

/* ---- Le burger : le bouton d'oPaddock, trois barres blanches ---- */
.burger{
  display:none;width:52px;height:52px;border-radius:16px;border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;cursor:pointer;position:relative;z-index:60;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  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}
.burger span{display:block;width:22px;height:2.4px;border-radius:3px;background:#fff;transition:transform .35s var(--ease-out),opacity .2s ease}
.burger.ouvert span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0;transform:scaleX(.25)}
.burger.ouvert span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ---- Le tiroir mobile : panneau droit, voile flou, cascade ---- */
.menu-mobile{
  position:fixed;inset:0;z-index:1100;
  background:rgba(15,23,42,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  opacity:0;visibility:hidden;
  transition:background-color .5s var(--ease-out),backdrop-filter .5s var(--ease-out),-webkit-backdrop-filter .5s var(--ease-out),opacity .3s ease,visibility 0s linear .5s;
}
.menu-mobile.ouvert{
  opacity:1;visibility:visible;
  background:rgba(15,23,42,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color .5s var(--ease-out),backdrop-filter .5s var(--ease-out),-webkit-backdrop-filter .5s var(--ease-out),opacity .3s ease;
}
.mm-panneau{
  position:absolute;top:0;right:0;bottom:0;width:88%;max-width:380px;
  background:linear-gradient(180deg,#fff 0%,#f0fdf4 100%);
  box-shadow:-30px 0 80px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
  padding:0 0 calc(16px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
  transform:translateX(100%);transition:transform .55s cubic-bezier(.32,.72,0,1);
}
.menu-mobile.ouvert .mm-panneau{transform:translateX(0)}
.mm-fermer{
  position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--slate-100),var(--slate-200));border:none;
  color:var(--slate-700);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(15,23,42,.10),inset 0 0 0 1px rgba(15,23,42,.05);
  transition:background .35s var(--ease-spring),transform .35s var(--ease-spring),box-shadow .35s;
}
.mm-fermer:hover{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;transform:scale(1.1);box-shadow:0 12px 26px rgba(var(--primary-rgb),.45)}
.mm-fermer:hover i{transform:rotate(90deg)}
.mm-fermer i{transition:transform .35s var(--ease-spring)}
.mm-entete{
  flex-shrink:0;display:block;padding:20px 64px 16px 24px;
  border-bottom:1px solid rgba(var(--primary-rgb),.12);background:#fff;
}
.mm-logo{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,var(--primary-dark),var(--blue-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mm-logo i{color:var(--primary-dark);-webkit-text-fill-color:var(--primary-dark)}
.mm-logo img{width:38px;height:38px;border-radius:12px;box-shadow:0 6px 16px rgba(var(--primary-rgb),.35)}
.mm-sous-titre{font-size:12px;color:var(--slate-500);margin-top:6px}
.mm-liste{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:16px 16px 8px}
.mm-item{
  flex-shrink:0;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  text-decoration:none;color:var(--slate-800);font-weight:600;font-size:15px;
  position:relative;background:transparent;
  transition:background .35s var(--ease),transform .35s var(--ease);
  opacity:0;transform:translateX(40px);
}
.menu-mobile.ouvert .mm-item{animation:mmLienEntre .55s cubic-bezier(.34,1.56,.64,1) forwards}
.menu-mobile.ouvert .mm-item:nth-of-type(1){animation-delay:.18s}
.menu-mobile.ouvert .mm-item:nth-of-type(2){animation-delay:.24s}
.menu-mobile.ouvert .mm-item:nth-of-type(3){animation-delay:.30s}
.menu-mobile.ouvert .mm-item:nth-of-type(4){animation-delay:.36s}
.menu-mobile.ouvert .mm-item:nth-of-type(5){animation-delay:.42s}
.menu-mobile.ouvert .mm-item:nth-of-type(n+6){animation-delay:.48s}
@keyframes mmLienEntre{to{opacity:1;transform:translateX(0)}}
.mm-item::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:0;
  background:linear-gradient(180deg,var(--primary-light),var(--primary-dark));
  border-radius:0 4px 4px 0;transform:translateY(-50%);transition:height .35s var(--ease-spring);
}
.mm-item:hover,.mm-item:active,.mm-item.ouvert{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.08),rgba(59,130,246,.05));
}
.mm-item:hover::before,.mm-item.ouvert::before{height:60%}
.mm-item-ico{
  width:54px;height:54px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:#fff!important;border:1px solid rgba(var(--primary-rgb),.15);
  color:var(--primary-dark);box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:background .35s var(--ease-spring),transform .35s var(--ease-spring),color .3s;
}
.mm-item-ico i{color:inherit!important}
.mm-item-ico.grad-bleu{color:var(--blue-600)}
.mm-item-ico.grad-or{color:var(--amber-600)}
.mm-item-ico.grad-corail{color:var(--orange-600)}
.mm-item:hover .mm-item-ico,.mm-item.ouvert .mm-item-ico{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important;color:#fff;transform:rotate(-8deg) scale(1.1);
}
.mm-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.mm-txt strong{font-weight:600;font-size:15px;letter-spacing:-.01em}
.mm-txt small{font-weight:400;font-size:12px;color:var(--slate-500);margin-top:2px}
.mm-fleche,.mm-fleche-sous{margin-left:auto;color:var(--slate-400);font-size:1rem;flex-shrink:0;transition:transform .3s ease,color .3s ease}
.mm-item:hover .mm-fleche{color:var(--primary-dark);transform:translateX(4px)}
.mm-item.ouvert .mm-fleche-sous{transform:rotate(180deg)}
.mm-sous{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.mm-sous.ouvert{max-height:640px}
.mm-sous-lien{
  display:flex;align-items:center;gap:12px;margin-left:30px;padding:9px 12px 9px 14px;
  border-left:2px solid rgba(var(--primary-rgb),.28);border-radius:0 13px 13px 0;
  text-decoration:none;color:var(--slate-800);font-weight:500;font-size:14px;transition:background .2s ease;
}
.mm-sous-lien:hover,.mm-sous-lien:active{background:rgba(255,255,255,.85)}
.mm-point{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mm-point.mm-tuile{
  width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.3rem;color:#fff;
}
.mm-point.mm-tuile i{color:#fff!important}
.mm-actions{
  flex-shrink:0;margin-top:auto;display:grid;grid-template-columns:1.35fr 1fr;gap:10px;
  padding:16px 24px 4px;border-top:1px solid rgba(var(--primary-rgb),.12);background:#fff;
  opacity:0;transform:translateY(20px);
}
.menu-mobile.ouvert .mm-actions{animation:mmPiedEntre .55s cubic-bezier(.34,1.56,.64,1) .55s forwards}
@keyframes mmPiedEntre{to{opacity:1;transform:translateY(0)}}
.mm-actions .btn{padding:14px 12px;font-size:14px;border-radius:14px;white-space:nowrap}
.mm-actions .btn-ligne{border:2px solid var(--slate-200);color:var(--slate-700);background:#fff}
.mm-actions .btn-ligne:hover{border-color:var(--primary);color:var(--primary-dark)}
.mm-slogan{flex-shrink:0;text-align:center;font-style:italic;color:var(--slate-500);font-size:12px;padding:10px 24px 0;background:#fff}
body.menu-ouvert{overflow:hidden}
/* Le niveau 2 du tiroir (construit par le JavaScript de pied de page). */
.mm-niveau2{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,#fff 0%,#f0fdf4 100%);
  display:flex;flex-direction:column;gap:6px;
  padding:20px 16px calc(22px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  transform:translateX(105%);transition:transform .45s cubic-bezier(.32,.72,0,1);
}
.mm-niveau2.ouvert{transform:translateX(0)}
.mm-niveau2-tete{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-shrink:0;padding:0 4px}
.mm-niveau2-retour{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;border:none;
  background:linear-gradient(135deg,var(--slate-100),var(--slate-200));
  color:var(--slate-700);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(15,23,42,.10);transition:transform .2s,background .3s,color .3s;
}
.mm-niveau2-retour:hover{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.mm-niveau2-retour:active{transform:scale(.92)}
.mm-niveau2-tete strong{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.mm-niveau2 .mm-sous-lien{
  margin-left:0;border-left:none;background:#fff;border:1px solid rgba(var(--primary-rgb),.12);
  border-radius:16px;padding:12px 14px;font-size:15px;font-weight:600;gap:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  animation:mmN2Entre .4s var(--ease-out) both;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.mm-niveau2 .mm-sous-lien:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.mm-niveau2 .mm-point.mm-tuile{width:54px;height:54px;border-radius:16px;font-size:1.4rem}
.mm-niveau2 .mm-sous-lien:nth-child(2){animation-delay:.04s}
.mm-niveau2 .mm-sous-lien:nth-child(3){animation-delay:.08s}
.mm-niveau2 .mm-sous-lien:nth-child(4){animation-delay:.12s}
.mm-niveau2 .mm-sous-lien:nth-child(5){animation-delay:.16s}
.mm-niveau2 .mm-sous-lien:nth-child(6){animation-delay:.2s}
.mm-niveau2 .mm-sous-lien:nth-child(7){animation-delay:.24s}
@keyframes mmN2Entre{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.mm-n2-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mm-n2-txt strong{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.mm-n2-txt small{font-size:12px;font-weight:400;color:var(--slate-500);line-height:1.5}

/* ------------------------------------------------------- HERO DE PAGE ----- */
.hero-page{
  padding:150px 0 64px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 520px at 6% -8%,rgba(var(--primary-rgb),.22),transparent 62%),
    radial-gradient(700px 460px at 96% 12%,rgba(59,130,246,.10),transparent 60%),
    linear-gradient(150deg,var(--primary-100) 0%,var(--primary-50) 55%,#fff 100%);
}
.aurore{position:absolute;border-radius:50%;filter:blur(40px);z-index:0;pointer-events:none}
.aurore-1{width:120px;height:120px;top:14%;left:10%;background:rgba(var(--primary-rgb),.25);animation:aurore1 6s ease-in-out infinite}
.aurore-2{width:160px;height:160px;bottom:12%;right:10%;background:rgba(59,130,246,.2);animation:aurore2 7s ease-in-out infinite 1s}
@keyframes aurore1{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes aurore2{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
.hero-page .etiquette,.etiquette{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(var(--primary-rgb),.3);color:var(--primary-dark);
  font-weight:600;font-size:13px;padding:8px 18px;border-radius:999px;margin-bottom:24px;
}
.hero-page h1{font-weight:800;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-.03em;max-width:840px;margin-bottom:22px;color:var(--slate-900)}
.hero-page h1 .mot{display:inline-block;opacity:0;transform:translateY(30px);animation:motEntre .7s var(--ease-out) forwards}
@keyframes motEntre{to{opacity:1;transform:none}}
em.shimmer{
  font-style:normal;
  background:linear-gradient(120deg,var(--primary-dark) 0%,var(--primary) 30%,var(--primary-light) 50%,var(--primary) 70%,var(--primary-dark) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:motEntre .7s var(--ease-out) forwards,shimmer 4.5s linear 1.6s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-20% 0}}
.hero-page .hero-sous,.hero-sous{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.7;color:var(--slate-600);max-width:640px;margin-bottom:32px;opacity:0;animation:entreeDoux .9s var(--ease-out) .4s forwards}
@keyframes entreeDoux{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-page .hero-actions,.hero-actions{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:entreeDoux .9s var(--ease-out) .6s forwards}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ----------------------------------------------------------------- CARTES -- */
.carte{
  background:#fff;border:none;border-radius:var(--radius);padding:30px 28px;
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring);
}
.carte:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.carte-ico{
  width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.35rem;box-shadow:var(--shadow-md);margin-bottom:18px;
  transition:transform .5s var(--ease-spring);
}
.carte:hover .carte-ico{transform:rotate(-8deg) scale(1.1)}
.carte h3{font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:8px;color:var(--slate-800)}
.carte p{color:var(--slate-600);font-size:15px;line-height:1.55}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grille-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* -------------------------------------------------------------------- FAQ -- */
.faq-grille{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:1180px;margin:0 auto}
/* NE PAS y remettre `.faq` : cette classe est portee par le <section> des pages
   d'accueil, et la contrainte de largeur y ecrasait la grille entiere (772px au
   lieu de 1130). Corrige le 12/09/2026. `.faq-liste` vise un conteneur de
   liste, pas une section. */
.faq-liste{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  background:#fff;border:1.5px solid var(--slate-200);border-radius:18px;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.faq-item:hover{border-color:rgba(var(--primary-rgb),.35);box-shadow:0 16px 40px -28px rgba(15,23,42,.5)}
.faq-item.ouvert{border-color:var(--primary);box-shadow:0 16px 40px -20px rgba(var(--primary-rgb),.45)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;
  font-weight:700;font-size:16px;color:var(--slate-800);padding:22px 24px;
  display:flex;align-items:center;gap:16px;line-height:1.45;
}
.faq-ico{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;overflow:hidden;
  background:#fff!important;border:1.5px solid currentColor;box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .3s var(--ease-spring),background .3s ease,color .3s ease;
}
/* Le glyphe prend la couleur du badge : `currentColor` sur le filet suffit
   alors a assortir les deux, sans ecrire la couleur deux fois. */
.faq-ico i{margin:0!important;color:inherit!important}
.faq-ico.grad-emeraude{color:var(--primary-dark)}
.faq-ico.grad-bleu{color:var(--blue-600)}
.faq-ico.grad-or{color:var(--amber-600)}
.faq-ico.grad-corail{color:var(--orange-600)}
/* Au survol, le badge se remplit de sa propre famille -- comme dans le menu. */
.faq-item:hover .faq-ico,.faq-item.ouvert .faq-ico{color:#fff;border-color:transparent}
.faq-item:hover .faq-ico.grad-emeraude,.faq-item.ouvert .faq-ico.grad-emeraude{background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important}
.faq-item:hover .faq-ico.grad-bleu,.faq-item.ouvert .faq-ico.grad-bleu{background:linear-gradient(135deg,var(--blue-400),var(--blue-600))!important}
.faq-item:hover .faq-ico.grad-or,.faq-item.ouvert .faq-ico.grad-or{background:linear-gradient(135deg,var(--amber-400),var(--amber-600))!important}
.faq-item:hover .faq-ico.grad-corail,.faq-item.ouvert .faq-ico.grad-corail{background:linear-gradient(135deg,var(--orange-400),var(--orange-600))!important}
.faq-q > i:last-child{margin-left:auto;color:var(--primary);transition:transform .3s ease;flex-shrink:0}
.faq-item.ouvert .faq-q > i:last-child{transform:rotate(180deg)}
.faq-r,.faq-corps{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out),padding .3s ease;padding:0 26px 0 88px}
.faq-item.ouvert .faq-r,.faq-item.ouvert .faq-corps{max-height:420px;padding-bottom:20px}
.faq-r p,.faq-corps p{color:var(--slate-600);font-size:15px;line-height:1.65}

/* ------------------------------------------------------------- CTA FINALE -- */
/* Plus de photo distante en fond : le bloc CTA sombre d'oPaddock (.dual-cavalier). */
.cta-final{
  position:relative;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-800) 100%);
  text-align:center;color:#fff;padding:80px 24px;overflow:hidden;
}
.cta-final::before{
  content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none;
}
.cta-final::after{
  content:"";position:absolute;bottom:-160px;left:-100px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.35),transparent 70%);pointer-events:none;
}
.cta-final > *{position:relative;z-index:1}
.cta-final h2{font-weight:800;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.02em;margin-bottom:12px;color:#fff}
.cta-final p{opacity:.85;font-size:clamp(1rem,1.5vw,1.15rem);margin-bottom:28px;max-width:560px}
.cta-final .btn{background:#fff;color:var(--primary-darker);padding:15px 32px;font-size:16px;box-shadow:var(--shadow-lg)}
.cta-final .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}

/* ------------------------------------------------------------ FORMULAIRES -- */
.champ-groupe{margin-bottom:16px;min-width:0}
.champ-groupe label{display:block;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--slate-700);margin-bottom:7px}
.champ-groupe input,.champ-groupe select,.champ-groupe textarea{
  width:100%;min-height:48px;padding:.6rem .95rem;border-radius:14px;border:1.5px solid var(--slate-200);
  font-family:inherit;font-size:15px;font-weight:500;color:var(--slate-800);background:#fff;outline:none;
  transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.champ-groupe input::placeholder,.champ-groupe textarea::placeholder{color:var(--slate-400);font-weight:400}
.champ-groupe input:hover,.champ-groupe select:hover,.champ-groupe textarea:hover{border-color:var(--primary-300)}
.champ-groupe textarea{min-height:128px;resize:vertical;line-height:1.55;padding:.75rem .95rem}
.champ-groupe input:focus,.champ-groupe select:focus,.champ-groupe textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.13)}
.champ-groupe select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}

/* --------------------------------------------------------------- FOOTER --- */
/* Pied de page CLAIR, aux tokens d'oPaddock (.opd-footer : fond slate-50,
   filet slate-200, liens slate-600). Un pied sombre coupe la page en deux au
   moment ou le visiteur cherche un lien ; ici il prolonge le corps du site. */
footer,.pied{background:var(--slate-50);color:var(--slate-600);padding:80px 0 32px;border-top:1px solid var(--slate-200)}
.footer-grille,.pied-int{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--slate-200)}
footer h4,.pied h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:18px}
footer a,.pied a{color:var(--slate-600);text-decoration:none;font-size:14px;display:block;padding:5px 0;transition:color .3s ease}
footer a:hover,.pied a:hover{color:var(--primary-dark)}
footer ul,.pied ul{list-style:none}
footer p,.pied p{font-size:14px;line-height:1.7;color:var(--slate-500)}
.footer-marque,.pied .marque{
  font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0;
  background:linear-gradient(135deg,var(--primary-dark),var(--blue-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.footer-marque i{color:var(--primary-dark);-webkit-text-fill-color:var(--primary-dark)}
.footer-marque img,.pied .marque img{width:40px;height:40px;border-radius:12px}
.footer-slogan{font-style:normal;color:var(--primary-dark);margin-bottom:16px;font-size:15px;font-weight:500}
.reseaux{display:flex;gap:10px;margin-top:18px}
.reseaux a{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--slate-200);background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;padding:0;color:var(--slate-600);
  transition:border-color .3s,background .3s,transform .3s,color .3s,box-shadow .3s;
}
.reseaux a:hover{border-color:var(--primary);background:var(--primary-50);color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.drapeaux{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.drapeaux a{display:inline-block;padding:5px 12px;border:1px solid var(--slate-200);background:#fff;border-radius:999px;font-size:12px}
.drapeaux a:hover{border-color:var(--primary);background:var(--primary-50)}
.stores-footer{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.stores-footer a{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--slate-200);border-radius:12px;background:#fff;
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--slate-800)!important;text-decoration:none;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.stores-footer a:hover{border-color:var(--primary);background:var(--primary-50);box-shadow:var(--shadow-soft)}
.stores-footer i{font-size:1.1rem}
.footer-bas,.pied-bas{
  padding-top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--slate-400);
}
.footer-bas a,.pied-bas a{display:inline;padding:0;font-size:13px;color:var(--slate-500)}
/* La lettre du gerant / du cavalier : la bande d'inscription dans le pied.
   Carte blanche posee sur le fond slate-50, comme les cartes du corps de page. */
.news-bande,.lettre-bande{
  background:#fff;border:1.5px solid var(--slate-200);border-radius:22px;box-shadow:var(--shadow-soft);
  padding:28px 30px;margin-bottom:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;
}
.news-bande h4,.lettre-bande h4{font-size:18px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--slate-900);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.news-bande h4 i,.lettre-bande h4 i{color:var(--primary)!important;margin-right:0!important}
.news-bande p,.lettre-bande p{font-size:14px;color:var(--slate-500);margin:0;line-height:1.6}
.news-form,.lettre-form{display:flex;gap:10px}
.news-form input,.lettre-form input{
  flex:1;min-width:0;border:1.5px solid var(--slate-200);border-radius:999px;padding:13px 20px;
  background:var(--slate-50);color:var(--slate-900);font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.news-form input::placeholder,.lettre-form input::placeholder{color:var(--slate-400)}
.news-form input:focus,.lettre-form input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.15)}
.news-form button,.lettre-form button{
  border:none;border-radius:999px;padding:13px 22px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow-md);transition:transform .3s var(--ease),box-shadow .3s;
}
.news-form button:hover,.lettre-form button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(var(--primary-rgb),.3)}
.news-note,.lettre-note{font-size:12px!important;color:var(--slate-400)!important;margin-top:8px!important}
.news-note a,.lettre-note a{display:inline!important;padding:0!important;color:var(--primary-dark)!important;font-size:12px!important}
.news-merci,.lettre-merci{display:none;align-items:center;gap:10px;color:var(--slate-900);font-weight:600;font-size:15px}
.news-merci i,.lettre-merci i{color:var(--primary);font-size:1.3rem}

/* --------------------------------------------------- MODAL (demonstration) -- */
.modal-fond{
  position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:1300;display:none;align-items:center;justify-content:center;padding:24px;
}
.modal-fond.ouvert{display:flex;animation:modalFond .3s ease both}
@keyframes modalFond{from{opacity:0}to{opacity:1}}
.modal-boite{
  width:min(980px,100%);height:min(88vh,800px);background:#fff;border-radius:28px;overflow:hidden;position:relative;
  box-shadow:var(--shadow-xl);animation:modalEntre .45s var(--ease-out) both;
}
@keyframes modalEntre{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.modal-boite iframe{width:100%;height:100%;border:0}
.modal-fermer{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--slate-100),var(--slate-200));color:var(--slate-700);font-size:1.1rem;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.35);transition:transform .35s var(--ease-spring),background .3s,color .3s;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.modal-fermer:hover{transform:rotate(90deg) scale(1.1);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}

/* ------------------------------------------------------------- RESPONSIVE -- */
@media(max-width:1220px){
  .nav-int{gap:16px}
  .nav-liens > a,.nav-deroulant > a{font-size:13.5px;padding:9px 11px;gap:6px}
  .nav-actions .btn{padding:11px 18px;font-size:13.5px}
}
@media(max-width:1120px){
  .nav-liens > a,.nav-deroulant > a{padding:8px 9px}
  .fleche-menu{display:none}
  .sm-large{width:470px}
}
@media(max-width:1030px){
  .sm-large{width:min(430px,calc(100vw - 28px))}
  .sm-large .sm-grille{grid-template-columns:1fr}
}
@media(max-width:1280px){
  .nav-liens .nav-deroulant:first-child .sous-menu{left:0}
}
@media(max-width:980px){
  .sous-menu,.nav-deroulant::after{display:none}
  .nav-liens{display:none}
  .nav-actions{margin-left:auto}
  .burger{display:flex}
  .nav-actions .btn-ligne{display:none}
  section{padding:64px 0}
  .hero-page{padding:126px 0 54px}
  .grille-3,.grille-cartes{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .grille-2{grid-template-columns:1fr}
  .grille-4{grid-template-columns:1fr 1fr}
  .faq-grille{grid-template-columns:1fr}
  .footer-grille,.pied-int{grid-template-columns:1fr 1fr;gap:32px}
  h1{font-size:clamp(1.8rem,6.2vw,2.5rem)!important;line-height:1.15}
  .titre-section{font-size:clamp(1.6rem,5vw,2.2rem)}
}
@media(max-width:640px){
  body{font-size:15px}
  section{padding:56px 0}
  .wrap,.wrap-etroit{padding-left:18px;padding-right:18px}
  .nav-int{gap:12px;padding:12px 16px}
  .marque{font-size:18px}
  .marque .logo-app,.marque .logo-marque{width:40px;height:40px;border-radius:12px}
  .btn-essayer{display:none}
  .burger{width:48px;height:48px;border-radius:14px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .btn{padding:13px 22px}
  .cta-final{padding:60px 20px}
  .cta-final h2{font-size:1.7rem}
  .faq-q{font-size:15px;gap:10px;padding:16px}
  .faq-r,.faq-corps{padding:0 18px}
  .faq-item.ouvert .faq-r,.faq-item.ouvert .faq-corps{padding-bottom:18px}
  .grille-4{grid-template-columns:1fr}
  .footer-grille,.pied-int{grid-template-columns:1fr 1fr;gap:28px}
  .footer-bas,.pied-bas{flex-direction:column;gap:8px;text-align:center}
  .news-bande,.lettre-bande{grid-template-columns:1fr;gap:16px;padding:22px 20px}
  .news-form,.lettre-form{flex-direction:column}
  .news-form button,.lettre-form button{width:100%}
  .modal-fond{padding:0}
  .modal-boite{width:100%;height:100%;border-radius:0}
}
@media(max-width:400px){
  .wrap,.wrap-etroit{padding-left:14px;padding-right:14px}
  .footer-grille,.pied-int{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.hero-page h1 .mot,.hero-page .hero-sous,.hero-sous,.hero-page .hero-actions,.hero-actions,em.shimmer,.mm-item,.mm-actions{opacity:1;transform:none}
  html{scroll-behavior:auto}
}