/* ============================================================================
   MY EQUIMONDO -- LES FAMILLES PROPRES AU SITE, AU STYLE D'OPADDOCK (09/09/2026)
   ----------------------------------------------------------------------------
   Chargee APRES eqv.css (la coque commune) et AVANT le <style> propre a une
   page. Elle ne contient QUE ce qu'eqv.css ne definit pas : le hero de
   l'accueil et son cheval 3D, la bande de chiffres, les temoignages, les
   badges de magasins d'applications, la prose des articles, les pages legales,
   et les quelques reglages que ce site impose a la coque commune.

   CE QU'ELLE NE REFAIT PAS. Boutons, barre de navigation, sous-menus, burger,
   tiroir mobile, cartes, FAQ a boutons, CTA finale, champs de formulaire, pied
   de page, lettre du cavalier, modale, revelation : tout cela vit dans
   _commun/assets/eqv.css. Le redeclarer ici recreerait les deux feuilles
   divergentes que la reprise du 09/09/2026 a supprimees (CLAUDE.md 00a).

   ARBITRAGE CLIENT DU 09/09/2026 : les vitrines Equimondo reprennent la
   signature visuelle de la marketplace oPaddock -- emeraude et gris ardoise,
   Inter seule, icones Tabler, coins tres arrondis, ombres larges et teintees,
   survols qui se deplacent. Le cheval 3D du hero est conserve.

   L'ancienne palette (--emeraude, --creme, --sable, --encre, --or) n'existe
   plus : les tokens sont ceux d'eqv.css, qui sont ceux d'oPaddock.

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

/* ============================================================================
   1. CE QUE CE SITE REGLE SUR LA COQUE COMMUNE
   ========================================================================== */

/* La barre collante de ce site pose `compact`, pas `colle` : c'est le nom que
   lit son JavaScript de pied de page depuis l'origine, et le renommer aurait
   demande de toucher aux 25 pages pour un resultat identique a l'ecran. */
#navPrincipale.compact{box-shadow:0 4px 20px rgba(0,0,0,.08);border-bottom-color:rgba(var(--primary-rgb),.15)}
#navPrincipale.compact .nav-int{padding-top:10px;padding-bottom:10px}
.nav-int{max-width:1320px;flex-wrap:nowrap}
.marque{white-space:nowrap;flex-shrink:0}
.nav-liens{min-width:0}

/* Les libelles cavaliers sont plus longs que ceux du site pro : les icones des
   liens de premier niveau s'effacent avant que la barre ne soit a l'etroit.
   Sans cela les liens passaient SOUS les boutons au lieu de deborder -- un
   chevauchement, donc invisible tant qu'on ne le cherche pas. */
@media(max-width:1180px){
  .nav-liens > a > i:not(.fleche-menu),.nav-deroulant > a > i:not(.fleche-menu){display:none}
  .nav-liens > a,.nav-deroulant > a{padding:9px 11px}
}
/* Les sous-menus de ce site portent deux lignes de texte par entree. */
.sm-large{width:640px}
.sm-grille{gap:2px 28px}
.sm-moyen{width:350px}
@media(max-width:1180px){.sm-large{width:min(560px,calc(100vw - 28px))}}

/* Un texte juridique se lit mal en pleine largeur : au-dela de ~75 caracteres
   par ligne, l'oeil perd la ligne suivante. */
.wrap-etroit{max-width:780px}

/* LA REVELATION AU SCROLL POSE `vu`, PAS `visible`. eqv.css connait `visible`
   et `in` (le site pro) ; le pied de page de ce site-ci ecrit `vu`. Sans cette
   ligne, TOUTE LA PAGE RESTE BLANCHE SOUS LE HERO -- panne deja constatee le
   25/08/2026 par une autre cause. */
.reveal.vu{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Le logo carre de la marque, dans la barre, le tiroir et le pied. */
.marque .logo-marque,.mm-logo .logo-marque,.footer-marque .logo-marque,.pied .marque .logo-marque{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  box-shadow:var(--shadow-md);
}
/* L'avatar du chat est une image, pas une lettre : le fond degrade la cacherait. */
.chat-avatar{background:none!important;box-shadow:none!important;overflow:hidden}
.chat-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Les deux teintes de badge qui manquent a eqv.css. `grad-em` est le nom
   abrege employe par les pages interieures ; il vaut `grad-emeraude`. */
.grad-em{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark))!important}
.grad-rose{background:linear-gradient(135deg,#f472b6,#db2777)!important}

/* La CTA finale de ce site vit DANS un `.wrap` : elle est une carte, pas une
   bande pleine largeur. eqv.css la rend carree parce que le site pro l'emploie
   en pleine largeur ; ici elle reprend ses coins. */
.cta-final{border-radius:32px;min-height:0;padding:70px 50px}
.cta-final small{display:block;margin-top:16px;opacity:.75;font-size:.88rem}
@media(max-width:640px){.cta-final{padding:50px 24px;border-radius:24px}}

/* ---- LA FAQ DES PAGES INTERIEURES EST UN <details>, PAS UN BOUTON ----------
   eqv.css replie `.faq-corps` avec `max-height:0` et ne le rouvre que sur
   `.faq-item.ouvert` -- la classe que pose le JavaScript de l'accueil. Sur un
   <details>, cette classe n'arrive jamais : la reponse resterait invisible
   MEME OUVERTE, sans la moindre erreur. Le navigateur se charge du repli ici,
   le CSS ne doit pas s'en meler. */
details.faq-item .faq-corps{max-height:none;overflow:visible;padding:0 24px 22px}
details.faq-item summary{
  padding:18px 22px;font-weight:700;font-size:16px;color:var(--slate-800);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.4;
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{
  content:"+";flex-shrink:0;font-weight:700;font-size:1.3rem;line-height:1;
  color:var(--primary);transition:transform .3s ease;
}
details.faq-item[open] summary::after{transform:rotate(45deg)}
details.faq-item[open]{border-color:var(--primary);box-shadow:0 16px 40px -20px rgba(var(--primary-rgb),.45)}
details.faq-item + details.faq-item{margin-top:14px}
@media(max-width:640px){
  details.faq-item summary{font-size:15px;padding:16px 18px}
  details.faq-item .faq-corps{padding:0 18px 18px}
}


/* La section FAQ de l'accueil porte `class="faq"`, et eqv.css emploie ce meme
   nom pour la LISTE de questions du site pro (une grille de 820 px centree).
   Sans cette remise a plat, la section entiere -- titre compris -- se serrait
   sur 820 px au milieu de la page. Deux sites, un meme nom de classe : c'est
   la section qui gagne, elle est plus specifique. */
section.faq{max-width:none;margin:0;display:block;gap:0;background:linear-gradient(180deg,var(--slate-50),#fff)}

/* ============================================================================
   2. LE HERO -- ACCUEIL ET PAGES INTERIEURES
   ========================================================================== */
.hero{
  min-height:92vh;display:flex;align-items:center;
  padding:140px 0 100px;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 8% -10%,rgba(var(--primary-rgb),.24),transparent 62%),
    radial-gradient(900px 560px at 95% 8%,rgba(59,130,246,.12),transparent 58%),
    linear-gradient(150deg,var(--primary-100) 0%,var(--primary-50) 55%,#fff 100%);
}
/* Les pages interieures portent `hero hero-page` : elles n'ont ni colonne
   visuelle ni cheval 3D, donc ni hauteur d'ecran ni disposition en flex. */
.hero.hero-page{min-height:0;display:block;padding:150px 0 64px}
@media(max-width:980px){.hero.hero-page{padding:126px 0 54px}}
.hero-page p.h1-visuel{margin-bottom:22px}

#heroCanvas{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Les aurores : eqv.css en donne deux petites pour les pages interieures ; le
   hero de l'accueil en veut de grandes, tres floues. */
.hero .aurore-1{width:600px;height:600px;top:-18%;left:20%;background:radial-gradient(circle,rgba(var(--primary-rgb),.32),transparent 65%);filter:blur(90px);animation:aurore1Grand 15s ease-in-out infinite alternate}
.hero .aurore-2{width:520px;height:520px;bottom:-22%;right:6%;background:radial-gradient(circle,rgba(59,130,246,.24),transparent 65%);filter:blur(90px);animation:aurore2Grand 19s ease-in-out infinite alternate}
@keyframes aurore1Grand{0%{transform:translate(0,0) scale(1)}100%{transform:translate(70px,-40px) scale(1.1)}}
@keyframes aurore2Grand{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,40px) scale(1.06)}}

.hero-int{display:grid;grid-template-columns:1fr .95fr;gap:56px;align-items:center}
@keyframes entreeHero{to{opacity:1;transform:none}}

/* Le chapeau SEO : sur l'accueil c'est un sur-titre editorial encadre de deux
   filets ; sur les pages interieures, l'oeil-de-boeuf d'eqv.css suffit. */
.hero h1.h1-seo{
  margin:0 0 26px;
  font-size:clamp(.78rem,1vw,.9rem)!important;letter-spacing:.24em;line-height:1.6!important;
  opacity:0;transform:translateY(14px);animation:entreeHero .9s ease .1s forwards;
}
/* Pas de trait autour du surtitre (arbitrage client du 09/09/2026). */

.hero p.h1-visuel{font-size:clamp(2.7rem,5.3vw,4.5rem);line-height:1.12;letter-spacing:-.03em;margin-bottom:56px}
.hero p.h1-visuel .mot{display:inline-block;opacity:0;transform:translateY(36px) rotate(2.5deg);animation:motEntre .75s cubic-bezier(.2,.75,.25,1) forwards}
.titre-anime .mot:nth-child(1){animation-delay:.25s}
.titre-anime .mot:nth-child(2){animation-delay:.33s}
.titre-anime .mot:nth-child(3){animation-delay:.41s}
.titre-anime .mot:nth-child(4){animation-delay:.49s}
.titre-anime .mot:nth-child(5){animation-delay:.57s}
.titre-anime .mot:nth-child(6){animation-delay:.68s}
.titre-anime .mot:nth-child(7){animation-delay:.8s}
/* Plus de coup de pinceau sous le mot vedette : pas de trait (arbitrage client du
   09/09/2026). La couleur du mot suffit. */
.hero p.h1-visuel em.shimmer{white-space:nowrap}

/* L'accroche et les boutons du hero. Les pages interieures neutralisent
   l'animation par un style en ligne : le contenu doit etre lisible meme si le
   JavaScript ne se lance jamais. */
p.accroche{
  font-size:1.16rem;line-height:1.85;color:var(--slate-600);max-width:520px;margin-bottom:40px;
  opacity:0;transform:translateY(24px);animation:entreeHero .9s ease .5s forwards;
}
.hero .hero-texte p.accroche{max-width:480px;margin-bottom:56px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;opacity:0;transform:translateY(22px);animation:entreeHero .9s ease .65s forwards}
.hero-cta .btn-plein{padding:16px 32px;font-size:1.02rem}
.hero-cta .btn-ligne{padding:15px 30px;font-size:1rem;background:rgba(255,255,255,.6)}
.hero-preuves{display:flex;gap:46px;flex-wrap:wrap;opacity:0;animation:entreeHero 1s ease .85s forwards}
.preuve{display:flex;align-items:center;gap:9px;font-size:.94rem;color:var(--slate-600)}
.preuve strong{font-weight:800;letter-spacing:-.02em;font-size:1.2rem;color:var(--slate-900)}
.etoiles{color:var(--amber-500);letter-spacing:2px}

/* ---- La colonne visuelle : photo organique, cheval 3D, vignettes ---------- */
.hero-visuel{position:relative;opacity:0;transform:translateY(30px) scale(.97);animation:entreeHero 1s cubic-bezier(.2,.7,.2,1) .5s forwards}
/* LE CHEVAL 3D EST CONSERVE (arbitrage client du 09/09/2026). Il se pose
   par-dessus la photo, qui sert de repli tant que la scene n'a pas demarre. */
.scene-3d{position:absolute;inset:-14% -22%;z-index:2;pointer-events:none}
.scene-3d canvas{width:100%!important;height:100%!important;display:block}
.hero-visuel.actif3d .hero-photo{opacity:0;transition:opacity .9s ease}
.hero-photo{
  position:relative;z-index:1;width:100%;aspect-ratio:4/4.6;object-fit:cover;
  border-radius:48% 52% 44% 56% / 42% 44% 56% 58%;
  box-shadow:0 40px 90px -30px rgba(15,23,42,.45);
  animation:respire 9s ease-in-out infinite;
}
@keyframes respire{
  0%,100%{border-radius:48% 52% 44% 56% / 42% 44% 56% 58%}
  50%{border-radius:52% 48% 56% 44% / 46% 56% 44% 54%}
}
.vignette{
  position:absolute;z-index:3;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.95);
  border-radius:18px;padding:12px 17px;font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow-lg);animation:flotte 6s ease-in-out infinite;
}
.vignette small{display:block;font-weight:400;color:var(--slate-500);font-size:.78rem}
.vignette .v-ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;
  box-shadow:var(--shadow-soft);
}
.v-1{top:6%;left:-8%;animation-delay:.4s}
.v-2{bottom:16%;right:-6%;animation-duration:7.4s}
.v-3{bottom:-4%;left:6%;animation-duration:8.2s;animation-delay:1s}
.point-vert{width:9px;height:9px;border-radius:50%;background:var(--primary);animation:pulseVert 1.6s ease infinite;flex-shrink:0}
@keyframes pulseVert{0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.5)}60%{box-shadow:0 0 0 9px rgba(var(--primary-rgb),0)}}

@media(max-width:980px){
  .hero{padding:126px 0 70px;min-height:0}
  .hero-int{grid-template-columns:1fr}
  .hero-visuel{max-width:440px;margin:14px auto 0}
  .hero p.h1-visuel{margin-bottom:36px}
  .hero .hero-texte p.accroche{margin-bottom:34px}
}
@media(max-width:640px){
  .hero{padding:104px 0 80px}
  .hero h1.h1-seo{letter-spacing:.16em;gap:10px}
  .hero p.h1-visuel{font-size:clamp(2.1rem,8.4vw,2.7rem)!important;line-height:1.16;margin-bottom:32px}
  .hero-cta .btn{width:100%;justify-content:center;text-align:center}
  .hero-preuves{flex-direction:column;align-items:stretch;gap:10px}
  .preuve{background:rgba(255,255,255,.75);border:1px solid #fff;border-radius:14px;padding:11px 16px}
  .preuve strong{min-width:86px}
  .vignette{padding:9px 13px;font-size:.8rem}
  .vignette .v-ico{width:34px;height:34px;font-size:.85rem}
  .v-1{left:-2%}
  .v-2{right:-2%}
}
@media(prefers-reduced-motion:reduce){
  .hero h1.h1-seo,.hero p.h1-visuel .mot,p.accroche,.hero-cta,.hero-preuves,.hero-visuel{opacity:1;transform:none}
}

/* ============================================================================
   3. LA BANDE DE CHIFFRES (sous le hero de l'accueil)
   ========================================================================== */
.bande-chiffres{
  padding:34px 0;background:rgba(255,255,255,.6);
  border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200);
}
.bande-int{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;align-items:center}
.chiffre{display:flex;align-items:baseline;gap:9px;font-size:.95rem;color:var(--slate-600)}
.chiffre strong{font-weight:800;letter-spacing:-.02em;font-size:1.7rem;color:var(--primary-dark)}
@media(max-width:640px){.bande-int{gap:22px}}

/* ============================================================================
   4. TEMOIGNAGES
   ========================================================================== */
.temoin{
  background:#fff;border:none;border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:14px;
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring);
}
.temoin:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.temoin .etoiles{font-size:.92rem;letter-spacing:3px}
.temoin blockquote{font-size:1rem;line-height:1.7;color:var(--slate-700);font-style:italic}
.temoin-auteur,.temoin footer{display:flex;align-items:center;gap:12px;margin-top:auto;background:none;padding:0}
.temoin-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-soft)}
.temoin-auteur strong,.temoin footer strong{display:block;font-size:.95rem;color:var(--slate-800)}
.temoin-auteur span,.temoin footer small{font-size:.83rem;color:var(--slate-500)}

/* ============================================================================
   5. LES BADGES DES MAGASINS D'APPLICATIONS
   Le bouton noir des vitrines oPaddock : ardoise pleine, coins 14, l'icone du
   magasin a gauche, deux lignes de texte a droite.
   ========================================================================== */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.store-badge{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--slate-900);color:#fff;border-radius:14px;
  padding:9px 18px 9px 14px;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.14);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.store-badge:hover{transform:translateY(-2px);background:var(--slate-800);box-shadow:var(--shadow-lg)}
.store-badge i{font-size:1.5rem;color:#fff}
.store-badge span{display:flex;flex-direction:column;line-height:1.2}
.store-badge small{font-size:.64rem;font-weight:500;opacity:.8;letter-spacing:.04em;text-transform:uppercase}
.store-badge strong{font-size:.95rem;font-weight:700}
.stores-hero{margin-top:22px}
.stores-hero .store-badge{padding:8px 16px 8px 13px;border-radius:13px}
.stores-hero .store-badge strong{font-size:.9rem}
@media(max-width:640px){.stores-hero{justify-content:center}.stores-hero .store-badge{flex:1;justify-content:center}}

/* ============================================================================
   6. LA PROSE DES ARTICLES ET DES PAGES DE REQUETE
   ========================================================================== */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:44px 0 14px;line-height:1.25;color:var(--slate-800)}
.prose h3{font-size:1.25rem;margin:30px 0 10px;color:var(--slate-800)}
.prose p{color:var(--slate-600);line-height:1.85;margin-bottom:16px}
.prose p strong,.prose li strong{color:var(--slate-800)}
.prose ul,.prose ol{margin:0 0 18px 24px;color:var(--slate-600);line-height:1.85}
.prose li{margin-bottom:7px}
.prose a{color:var(--primary-dark);font-weight:600}
.prose .encart,.encart{
  background:rgba(var(--primary-rgb),.07);border-left:4px solid var(--primary);
  border-radius:0 16px 16px 0;padding:20px 22px;margin:26px 0;
}
.prose .encart p,.encart p{margin-bottom:0;color:var(--slate-700)}

/* ============================================================================
   7. LES PHOTOS : CARTES D'ARTICLES ET BANDE D'ILLUSTRATION
   ========================================================================== */
.carte-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-bottom:18px;display:block}
a.carte:hover .carte-photo{filter:saturate(1.08)}
.image-page{position:relative}
.image-page img{
  width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:32px;display:block;
  box-shadow:var(--shadow-xl);
}
.image-legende{
  position:absolute;left:26px;bottom:22px;display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid #fff;border-radius:999px;padding:10px 18px;
  font-weight:600;font-size:.92rem;color:var(--slate-800);box-shadow:var(--shadow-lg);
}
.image-legende i{color:var(--primary-dark)}
@media(max-width:720px){
  .image-page img{aspect-ratio:4/3;border-radius:24px}
  .image-legende{left:14px;bottom:12px;font-size:.8rem;padding:8px 14px}
}

/* ============================================================================
   8. LES PAGES LEGALES
   ========================================================================== */
.legal-corps p,.legal-corps li{color:var(--slate-600);line-height:1.85;font-size:.99rem}
.legal-corps p{margin-bottom:16px}
.legal-corps h2{font-size:1.42rem;margin:44px 0 14px;line-height:1.3;color:var(--slate-800)}
.legal-corps h3{font-size:1.05rem;margin:26px 0 10px;color:var(--slate-800)}
.legal-corps ul{margin:0 0 18px 22px}
.legal-corps li{margin-bottom:8px}
.legal-corps a{color:var(--primary-dark);font-weight:600}
.legal-corps table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.93rem}
.legal-corps th,.legal-corps td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--slate-200);vertical-align:top}
.legal-corps th{font-weight:700;color:var(--primary-darker)}
.legal-corps .tableau-defile{overflow-x:auto}
.legal-date{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(var(--primary-rgb),.1);border:1px solid rgba(var(--primary-rgb),.3);
  color:var(--primary-dark);border-radius:999px;padding:7px 17px;
  font-size:.83rem;font-weight:700;margin-bottom:10px;
}
.legal-sommaire{
  background:#fff;border:1px solid var(--slate-200);border-radius:20px;
  padding:24px 28px;margin-bottom:36px;box-shadow:var(--shadow-md);
}
.legal-sommaire strong{display:block;margin-bottom:10px;font-weight:800;letter-spacing:-.01em;font-size:1.05rem}
.legal-sommaire ol{margin:0 0 0 20px;color:var(--slate-600);font-size:.94rem;line-height:1.9}