/* NOTE : les couleurs passent par les tokens (var(--primary), var(--slate-*)),
   jamais par le code hexadecimal. Une couleur en dur ne suit pas le theme et se retrouve
   orpheline le jour ou la palette bouge (CLAUDE.md 1).
   ==== ========================================================================
   L'ECOSYSTEME EQUIMONDO, en pied de page -- feuille PARTAGEE.
   ----------------------------------------------------------------------------
   Le bloc est rendu par EquimondoVitrineEcosystemeHtml() (includes/ecosysteme.php)
   sur les 40 pages du site. Ses regles vivent ici plutot que recopiees dans
   chaque <style> : quarante copies d'une meme regle finissent toujours par
   diverger, et c'est le pied de page qu'on remarque en dernier.

   Volontairement une <dl> : c'est la structure qu'un moteur de reponse extrait
   le plus proprement, et le bloc reste lisible si le CSS ne charge pas. Les
   icones sont posees en ::before pour ne pas polluer le texte extrait.

   Le pied de page est CLAIR sur toutes les pages (footer{background:var(--slate-50)},
   aux tokens d'oPaddock, 12/09/2026) : les couleurs sont ecrites pour ce fond.
   Avant cette date il etait sombre et ce bloc etait ecrit en blanc -- ne pas
   reintroduire de rgba(255,255,255,...) ici, il deviendrait invisible.
   ========================================================================= */
.eco-bloc{border-top:1px solid var(--slate-200);margin-top:34px;padding-top:30px;text-align:left}
.eco-bloc h2{font-weight:800;letter-spacing:-.02em;font-size:1.18rem;margin:0 0 20px;color:var(--slate-900)}
.eco-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 34px;margin:0}
.eco-liste dt{font-weight:600;font-size:1rem;color:var(--slate-900);margin:0 0 5px;display:flex;align-items:baseline;gap:10px}
/* Les icones viennent de TABLER depuis le 09/09/2026 (Font Awesome a ete retire
   du site). Les points de code sont ecrits en clair parce que ce sont des
   ::before : les noms sont rappeles en commentaire pour que gen_tabler.py les
   garde dans le sous-ensemble de police -- ti-horse, ti-world, ti-school,
   ti-building-warehouse. */
.eco-liste dt::before{font-family:"tabler-icons";font-weight:400;font-size:1rem;color:var(--primary);flex:0 0 auto}
.eco-liste dt.eco-gestion::before{content:"\fc46"}   /* ti-horse */
.eco-liste dt.eco-site::before{content:"\eb54"}      /* ti-world */
.eco-liste dt.eco-quiz::before{content:"\ecf7"}      /* ti-school */
.eco-liste dt.eco-opaddock::before{content:"\ebe3"}  /* ti-building-warehouse */
.eco-liste dt a{color:var(--slate-900);text-decoration:underline;text-decoration-color:rgba(var(--primary-rgb),.65);text-underline-offset:3px}
.eco-liste dt a:hover{color:var(--primary-dark)}
.eco-liste dd{margin:0 0 4px 25px;font-size:.9rem;line-height:1.65;color:var(--slate-500)}
.eco-avenir{margin:22px 0 0;padding:14px 18px;border-radius:16px;background:#fff;border:1px solid var(--slate-200);color:var(--slate-600);font-size:.88rem;line-height:1.65}
.eco-avenir strong{color:var(--primary-dark);margin-right:5px}
@media(max-width:760px){.eco-liste{grid-template-columns:1fr;gap:16px}}

/* ============================================================================
   LE SELECTEUR DE PAYS (includes/pays_selecteur.php)
   ----------------------------------------------------------------------------
   Il vit dans le meme pied de page clair que le bloc ci-dessus, et il est
   charge par les memes pages : d'ou son style ici plutot que dans une troisieme
   feuille qu'il aurait fallu declarer dans le <head> de trente-neuf pages.

   DISCRET MAIS PRESENT. Ce bloc a deux publics. Le lecteur humain y cherche
   rarement quelque chose -- il est deja sur le bon domaine -- donc il reste en
   retrait, sous le reste. Le moteur, lui, y lit les seuls liens qui relient les
   onze domaines entre eux : les masquer (display:none) ou les charger en
   JavaScript reviendrait a ne pas les poser du tout.

   Une liste en ligne, pas une grille : onze entrees courtes se lisent mieux sur
   un ruban qui se replie tout seul que dans des colonnes qui se videraient sur
   mobile.
   ========================================================================= */
.eq-pays{border-top:1px solid var(--slate-200);margin-top:26px;padding-top:20px}
.eq-pays-titre{display:block;font-size:.82rem;letter-spacing:.02em;color:var(--slate-400);margin-bottom:10px}
.eq-pays-liste{list-style:none;display:flex;flex-wrap:wrap;gap:7px 18px;margin:0;padding:0}
.eq-pays-liste a{font-size:.85rem;color:var(--slate-500);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.eq-pays-liste a:hover,.eq-pays-liste a:focus-visible{color:var(--primary-dark);border-bottom-color:var(--primary)}
/* Cible tactile : 44px de haut minimum, comme partout ailleurs. Sur mobile les
   entrees s'espacent pour qu'on n'ouvre pas le mauvais pays du pouce. */
@media(max-width:760px){.eq-pays-liste{gap:2px 16px}.eq-pays-liste a{display:inline-flex;align-items:center;min-height:44px}}

/* ============================================================================
   LES AVIS DES CENTRES SUR EQUIMONDO (page temoignages)
   ----------------------------------------------------------------------------
   Ils vivent dans le CORPS de la page. Depuis le 12/09/2026 le pied est clair
   lui aussi : tout le site est desormais sur fond clair.
   ========================================================================= */
.avis-bloc { max-width: 1100px; margin: 0 auto 40px; }
.avis-bloc h2 { font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.avis-moyenne { margin: 0 0 26px; color: var(--slate-600); font-size: .95rem; }
.avis-moyenne strong { color: var(--primary-darker); font-size: 1.15rem; }

.avis-liste { list-style: none; margin: 0; padding: 0; display: grid;
              grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.avis-item { background: #fff; border: none; border-radius: var(--radius);
             padding: 24px 22px 20px; display: flex; flex-direction: column;
             box-shadow: var(--shadow-md);
             transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring); }
.avis-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.avis-etoiles { color: var(--amber-500); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 12px; }
/* Les etoiles non obtenues restent VISIBLES, en gris : sans elles on ne sait pas
   si " 3 etoiles " vaut 3/5 ou 3/3. */
.avis-vide { color: var(--slate-200); }
.avis-txt { margin: 0 0 16px; font-size: .95rem; line-height: 1.72; color: var(--slate-700); flex: 1 1 auto; }
.avis-auteur { margin: 0; font-size: .88rem; font-weight: 600; color: var(--slate-900); }
.avis-auteur span { font-weight: 400; color: var(--slate-400); }

@media (max-width: 620px) { .avis-liste { grid-template-columns: 1fr; } }
