/* ============================================================================
   equimondo.fr -- LES FAMILLES DE PAGES, au style d'oPaddock  (09/09/2026)
   ----------------------------------------------------------------------------
   Chargee APRES _commun/assets/eqv.css (la coque : nav, tiroir, cartes, FAQ,
   CTA, formulaires, pied) et AVANT le <style> propre a chaque page.

   CE QU'ON TROUVE ICI, ET RIEN D'AUTRE : les regles partagees par 3 a 41 pages
   du site -- l'article de blog, le bloc "tarif-rappel", la liste solution/
   fonctionnalites, les pages legales, le cas client, le temoignage, la barre de
   lecture et l'assistant en ligne. Chacune existait en 3 a 41 exemplaires,
   recopies dans le <style> des pages : un correctif applique a l'une ne
   touchait pas les autres, et le site en portait les traces.

   Le style est celui d'oPaddock (apps/opaddock/css/style_index.css) : Inter
   seule, emeraude et ardoise, cartes blanches a coins tres arrondis, ombres
   larges et teintees, survols qui se deplacent. Aucune couleur en dur de
   l'ancienne palette (creme, sable, encre, or) : tout passe par les tokens
   declares dans eqv.css.

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

/* ---------------------------------------------------- BADGES SUR FOND SOMBRE */
/* Deux variantes de badge d'icone posees sur un fond fonce, ou le degre plein
   ne se detacherait pas : le contour blanc et le contour ambre. */
.fd-ico-blanc{background:transparent!important;box-shadow:none!important;border:1.5px solid rgba(255,255,255,.85)}
.hc-ico{background:transparent!important;box-shadow:none!important;border:1.5px solid var(--amber-400);color:var(--amber-400);animation:none}
.hc-ico i{color:var(--amber-400)!important}

/* ------------------------------------------------------- BARRE DE LECTURE -- */
/* La progression de lecture d'un article : le filet en haut, la pastille en
   bas a gauche (donc jamais sous le lanceur du chat, qui vit a droite). */
.lecture-barre{position:fixed;top:0;left:0;right:0;height:4px;z-index:120;background:rgba(15,23,42,.06);pointer-events:none}
.lecture-barre span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--amber-400));border-radius:0 99px 99px 0;transition:width .12s linear}
.lecture-pastille{
  position:fixed;bottom:24px;left:24px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--primary-rgb),.25);border-radius:999px;padding:9px 17px;
  font-size:13px;font-weight:600;color:var(--slate-800);
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;
}
.lecture-pastille.visible{opacity:1;transform:none}
.lecture-pastille i{color:var(--primary-dark)}
.lecture-pastille strong{color:var(--primary-darker);font-variant-numeric:tabular-nums}

/* -------------------------------------------- ASSISTANT EN LIGNE (ARTICLE) -- */
/* Le fil de discussion pose DANS la page (a ne pas confondre avec le chatbot
   flottant, qui vient de _commun/assets/chat-panneau.css). */
.achat-boite{
  background:#fff;border:none;border-radius:var(--radius);
  padding:26px 26px 22px;box-shadow:var(--shadow-lg);max-width:760px;margin:26px auto 0;
}
.achat-fil{display:flex;flex-direction:column;gap:12px;max-height:380px;overflow-y:auto;margin-bottom:16px;scroll-behavior:smooth}
.achat-bulle-bot{align-self:flex-start;background:var(--primary-50);border-radius:16px 16px 16px 4px;padding:12px 17px;max-width:88%;line-height:1.7;font-size:15px;color:var(--slate-700)}
.achat-bulle-bot p{margin:0 0 8px}
.achat-bulle-bot p:last-child{margin-bottom:0}
.achat-bulle-bot a{color:var(--primary-darker);font-weight:700}
.achat-question{align-self:flex-end;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:16px 16px 4px 16px;padding:10px 16px;max-width:88%;font-weight:600;font-size:15px}
.achat-attente{align-self:flex-start;display:flex;gap:5px;padding:14px 18px}
.achat-attente i{width:8px;height:8px;border-radius:50%;background:var(--primary-dark);animation:achatSaut 1s infinite}
.achat-attente i:nth-child(2){animation-delay:.15s}
.achat-attente i:nth-child(3){animation-delay:.3s}
@keyframes achatSaut{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
.achat-puces{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.achat-puce{
  border:1.5px solid var(--slate-200);background:#fff;border-radius:999px;padding:8px 15px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--slate-700);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s,transform .2s var(--ease);
}
.achat-puce:hover{background:var(--primary-50);border-color:var(--primary);color:var(--primary-dark);transform:translateY(-2px)}
.achat-saisie{display:flex;gap:10px}
.achat-saisie textarea{
  flex:1;resize:none;border:1.5px solid var(--slate-200);border-radius:14px;padding:12px 15px;
  font-family:inherit;font-size:15px;background:#fff;outline:none;color:var(--slate-800);
  transition:border-color .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.achat-saisie textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.13)}

/* ------------------------------------------------------ ARTICLE DE BLOG ---- */
.art-hero{padding:150px 0 44px}
/* L'ILLUSTRATION DE L'ARTICLE, entre le titre et le chapo.
   Elle est DECORATIVE : le <h1> juste au-dessus dit deja de quoi parle la page,
   et repeter ce titre dans l'alt ne fait que le lire deux fois a voix haute.
   D'ou `alt=""` dans le balisage -- c'est la bonne reponse pour une image
   d'accompagnement, pas un oubli.
   La largeur est celle du corps de l'article (720px), pas celle du wrap : une
   image plus large que le texte qu'elle illustre attire l'oeil hors de la
   colonne de lecture. */
.art-illu{max-width:720px;margin:0 auto}
.art-illu img{
  /* `height:auto` est INDISPENSABLE. Le balisage porte width="1280" height="720"
     -- utiles pour reserver la place et eviter le saut de mise en page. Mais
     tant que la hauteur reste definie, les DEUX dimensions sont connues et
     `aspect-ratio` est purement ignore : l'image s'etirait a 672x720. On ne
     recadre d'ailleurs rien ici, elle est deja en 16/9. */
  width:100%;height:auto;display:block;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
@media(max-width:620px){.art-illu img{border-radius:16px}}
.art-cat{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;background:var(--primary-100);color:var(--primary-darker)}
.cat-emeraude{background:var(--primary-100);color:var(--primary-darker)}
.cat-or{background:rgba(245,158,11,.14);color:var(--amber-600)}
.cat-bleu{background:rgba(37,99,235,.1);color:var(--blue-600)}
.cat-corail{background:rgba(234,88,12,.1);color:var(--orange-600)}
.art-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--slate-500);font-size:14px;margin-bottom:8px}
.art-corps{max-width:720px;margin:0 auto}
.art-corps h2{font-weight:800;letter-spacing:-.02em;font-size:1.55rem;margin:40px 0 16px;line-height:1.25;color:var(--slate-800)}
.art-corps p{margin-bottom:22px;line-height:1.9;color:var(--slate-600);font-size:16px}
.art-corps .chapo{font-size:1.18rem;line-height:1.85;color:var(--slate-700);font-weight:500}
.art-liste{margin:0 0 22px 4px;list-style:none}
.art-liste li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;line-height:1.75;color:var(--slate-600)}
.art-liste li i{color:var(--primary-dark);margin-top:6px;flex-shrink:0}
.art-encadre{background:var(--primary-50);border-left:4px solid var(--primary);border-radius:0 18px 18px 0;padding:22px 26px;margin:30px 0}
.art-encadre p{margin-bottom:0}
.art-cta{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-800));color:#fff;
  border-radius:var(--radius);padding:32px 34px;margin:44px 0 10px;
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  box-shadow:0 22px 60px -24px rgba(var(--primary-rgb),.5);
}
.art-cta h3{font-weight:800;letter-spacing:-.02em;font-size:1.3rem;margin-bottom:4px;color:#fff}
.art-cta p{margin:0;opacity:.9;font-size:15px;color:#fff}
.art-cta .btn{background:#fff;color:var(--primary-darker);white-space:nowrap;box-shadow:var(--shadow-md)}
.art-cta .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.art-retour{display:inline-flex;align-items:center;gap:8px;color:var(--primary-darker);font-weight:600;text-decoration:none;margin-bottom:14px}
.art-retour i{transition:transform .2s var(--ease)}
.art-retour:hover i{transform:translateX(-3px)}

/* ------------------------------------------------------- RAPPEL DE TARIF --- */
/* Le bandeau "gratuit pour vos chevaux" pose en fin de page (12 pages). */
.tarif-rappel{
  max-width:860px;margin:0 auto;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary-800));color:#fff;
  border-radius:var(--radius);padding:36px 40px;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  box-shadow:0 26px 70px -26px rgba(var(--primary-rgb),.5);
}
.tarif-rappel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.tarif-rappel h3{font-weight:800;letter-spacing:-.02em;font-size:1.45rem;margin-bottom:8px;position:relative;z-index:1;color:#fff}
.tarif-rappel p{opacity:.9;font-size:16px;position:relative;z-index:1}
.tarif-rappel .btn{background:#fff;color:var(--primary-darker);position:relative;z-index:1;white-space:nowrap;box-shadow:var(--shadow-md)}
.tarif-rappel .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ------------------------------------- LISTES SOLUTION / FONCTIONNALITES --- */
/* Deux listes jumelles, nees d'un copier-coller ; elles gardent leurs deux noms
   de classe (ils sont dans le HTML de 6 pages) mais partagent leurs regles. */
.douleurs{background:linear-gradient(180deg,var(--slate-50),var(--slate-100))}
.douceur{background:linear-gradient(180deg,var(--slate-100),var(--slate-50))}
.solution-liste,.fonc-liste{list-style:none;margin-top:8px}
.solution-liste li,.fonc-liste li{display:flex;gap:15px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--slate-200)}
.solution-liste li:last-child,.fonc-liste li:last-child{border-bottom:none}
.sol-ico,.fl-ico{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;
  box-shadow:var(--shadow-soft);transition:transform .4s var(--ease-spring);
}
.solution-liste li:hover .sol-ico,.fonc-liste li:hover .fl-ico{transform:rotate(-8deg) scale(1.08)}
.solution-liste strong,.fonc-liste strong{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px;color:var(--slate-800)}
.solution-liste span,.fonc-liste span{color:var(--slate-600);font-size:14.5px}
.solution-int,.deux-col{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* 4/5 : le format NATIF des six illustrations de ces pages. Le cadre epousait
   avant un 4/4.6 sur PC et un 4/3.4 sur mobile, et `object-fit:cover` amputait
   alors la base de l'ilot -- le sujet meme de l'illustration. Si un jour une
   image arrive dans un autre format, c'est ici qu'on arbitre, pas au recadrage. */
.solution-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-xl)}
.photo-col{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-xl)}

/* ------------------------------------------------- TEXTE COURANT (PROSE) --- */
.prose{max-width:760px;margin:0 auto}
.prose p{color:var(--slate-600);line-height:1.9;margin-bottom:20px}
.prose h2{font-weight:800;letter-spacing:-.02em;font-size:1.6rem;margin:34px 0 14px;line-height:1.25;color:var(--slate-800)}

/* ------------------------------------------------------------- MAILLAGE ---- */
/* Les pilules de liens internes en bas de page : c'est le maillage SEO, pas un
   ornement. Elles ne se retirent pas. */
.maillage{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.maillage a{
  display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--slate-200);border-radius:999px;padding:8px 16px;
  font-size:13.5px;font-weight:600;color:var(--slate-700);text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:border-color .2s var(--ease),color .2s,transform .2s var(--ease),box-shadow .2s;
}
.maillage a:hover{border-color:var(--primary);color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* --------------------------------------------------------- PAGES LEGALES -- */
.legal-hero{padding:150px 0 30px}
.legal-date{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--primary-50);border:1px solid rgba(var(--primary-rgb),.3);color:var(--primary-darker);
  border-radius:999px;padding:7px 17px;font-size:13px;font-weight:600;margin-bottom:8px;
}
.legal-corps{max-width:780px;margin:0 auto}
.legal-corps p,.legal-corps li{color:var(--slate-600);line-height:1.85;font-size:15.5px}
.legal-corps p{margin-bottom:16px}
.legal-corps h2{font-weight:800;letter-spacing:-.02em;font-size:1.42rem;margin:42px 0 14px;line-height:1.25;padding-top:8px;color:var(--slate-800)}
.legal-corps h3{font-weight:700;letter-spacing:-.01em;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-darker);font-weight:600}
.legal-encadre{background:var(--primary-50);border-left:4px solid var(--primary);border-radius:0 16px 16px 0;padding:18px 22px;margin:22px 0}
.legal-encadre p{margin-bottom:0;font-size:15px}
.legal-tableau{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:14.5px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md)}
.legal-tableau th{background:linear-gradient(135deg,var(--primary-dark),var(--primary-darker));color:#fff;text-align:left;padding:12px 16px;font-weight:700}
.legal-tableau td{padding:11px 16px;border-bottom:1px solid var(--slate-200);vertical-align:top;line-height:1.6}
.legal-tableau tr:last-child td{border-bottom:none}
.legal-avis-langue{background:#fff;border:1px solid var(--slate-200);border-radius:16px;padding:14px 20px;margin-bottom:26px;font-size:14.5px;color:var(--slate-600);box-shadow:var(--shadow-soft)}
.legal-sommaire{background:#fff;border:none;border-radius:var(--radius);padding:24px 28px;margin-bottom:36px;box-shadow:var(--shadow-md)}
.legal-sommaire strong{display:block;font-weight:800;letter-spacing:-.02em;font-size:1.05rem;margin-bottom:12px;color:var(--slate-800)}
.legal-sommaire ol{margin-left:20px}
.legal-sommaire li{margin-bottom:5px;font-size:15px}
.legal-autres{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid var(--slate-200)}
.legal-autres a{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--slate-200);
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--slate-700);text-decoration:none;
  box-shadow:var(--shadow-soft);transition:border-color .2s var(--ease),color .2s,transform .2s var(--ease);
}
.legal-autres a:hover{border-color:var(--primary);color:var(--primary-dark);transform:translateY(-2px)}

/* ------------------------------------------------------------ CAS CLIENT -- */
.cas-bloc{max-width:760px;margin:0 auto;background:#fff;border:none;border-radius:var(--radius);padding:34px 40px;box-shadow:var(--shadow-lg)}
.cas-mention{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary-50);border:1px solid rgba(var(--primary-rgb),.3);color:var(--primary-darker);
  border-radius:999px;padding:7px 16px;font-size:14px;font-weight:600;margin:0 0 18px;
}
.cas-titre{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:-.02em;font-size:1.3rem;line-height:1.3;margin:0 0 14px;color:var(--slate-800)}
.cas-ico{
  flex:0 0 46px;width:46px;height:46px;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:1.05rem;
  box-shadow:var(--shadow-md);
}
.cas-texte{font-size:16px;line-height:1.8;color:var(--slate-600);margin:0}

/* ------------------------------------------------------------ TEMOIGNAGE -- */
.temoin-bloc{max-width:760px;margin:0 auto;background:#fff;border:none;border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow-lg);position:relative}
.temoin-bloc::before{content:"\201C";position:absolute;top:-6px;left:26px;font-size:5.5rem;font-weight:800;color:var(--primary);opacity:.25;line-height:1}
.temoin-bloc p{font-size:1.1rem;line-height:1.8;font-style:italic;margin-bottom:18px;color:var(--slate-700)}
.temoin-auteur{display:flex;align-items:center;gap:14px}
.temoin-auteur img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.temoin-auteur strong{display:block;font-size:15.5px;font-weight:700;color:var(--slate-800)}
.temoin-auteur small{color:var(--slate-500);font-size:13.5px}

/* ------------------------------------------------------------ RESPONSIVE -- */
@media(max-width:960px){
  .tarif-rappel{grid-template-columns:1fr;text-align:center}
  .tarif-rappel .btn{justify-self:center}
  .solution-int,.deux-col{grid-template-columns:1fr;gap:36px}
  .solution-photo{max-width:360px;margin:0 auto}
  .photo-col{max-width:460px;margin:0 auto}
}
@media(max-width:760px){
  .art-cta{grid-template-columns:1fr}
  .art-cta .btn{justify-self:start}
}
@media(max-width:640px){
  .tarif-rappel{padding:28px 22px}
  .art-cta{padding:26px 22px}
  .fonc-liste li,.solution-liste li{gap:12px}
  .legal-tableau{display:block;overflow-x:auto}
  .cas-bloc{padding:26px 22px}
  .cas-titre{font-size:1.12rem}
  .temoin-bloc{padding:28px 24px}
  .lecture-pastille{bottom:16px;left:14px;padding:8px 14px;font-size:12.5px}
  .achat-boite{padding:18px 14px 16px}
  .achat-saisie{flex-direction:column}
  .achat-saisie .btn{width:100%}
}