/* ==========================================================================
   Equirider — Annuaire, fiche professionnel
   Design system issu du handoff Claude Design « Fiche Pro Equirider » (3a).
   Feuille unique : tokens + composants. Mobile-first, breakpoints 768 / 1024.

   ⚠ Portage prod : cette feuille est destinée à être servie en fichier
   externe (wp_enqueue_style), PAS injectée inline — LiteSpeed sort le
   <style> inline du rendu non caché (cf. mémoire LiteSpeed).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* --------------------------------------------------------------------------
   THÈMES. Les 4 propositions de Claude Design ne diffèrent que par le fond
   sombre et les clairs qui l'accompagnent : l'or #C9A959 et le vert d'action
   #1A6B3C sont communs aux quatre. On bascule avec data-eq-theme sur .eq-fiche
   (ou sur <html> pour tout le site) :

     data-eq-theme="vert"  → 1b, vert écurie      (validée dans le handoff)
     data-eq-theme="noir"  → 1a, noir neutre
     data-eq-theme="cuir"  → 2a, noir cuir chaud
     data-eq-theme="ecurie"→ 2b, noir d'écurie vert profond

   Aucune valeur codée en dur dans les composants : changer de thème ne
   demande jamais de toucher au CSS des blocs.
   -------------------------------------------------------------------------- */
/* DÉFAUT = 2a « noir cuir » - bascule du 08/08/2026, preference JT.
   Le theme n'est ecrit qu'a UN endroit : data-eq-theme sur .eq-fiche, dans
   mu-plugins/eq-annuaire-fiche-v2.php. Retour arriere : le .bak-<STAMP> a cote.
   2b « noir d'ecurie » a ete le defaut du 07/08 au 08/08/2026. Le motif ci-dessous
   reste valable pour ecarter 1b :
   Motif : sur 1b, le fond #0F3C25 et le bouton d'action #1A6B3C sont deux verts
   voisins ; sur une fiche qui empile hero, carte IA et boutons verts, le bouton
   primaire cesse d'être l'élément le plus saillant — or c'est lui qui déclenche
   l'appel. 2b assombrit le vert jusqu'à lire comme un noir : l'identité reste,
   le vert d'action redevient un signal. */
:root,
[data-eq-theme="ecurie"] {
  --eq-sombre:          #0D1411;  /* fond de marque : hero, carte IA, footer */
  --eq-sombre-h:        #16241C;  /* haut de dégradé */
  --eq-sombre-b:        #080D0A;  /* bas de dégradé */
  --eq-cta:             #080D0A;  /* 2e fond sombre : bandeau CTA. Jamais un 3e. */
  --eq-encre:           #16241C;  /* accent sombre posé sur fond clair */
  --eq-creme:           #F1F4EF;
  --eq-creme-2:         #F2F5F1;
  --eq-doux:            #F7F9F6;
  --eq-seo:             #F2F5F1;
  --eq-canvas:          #E9EDE7;
  --eq-bord:            #E6E9E3;
  --eq-bord-carte:      #E6E9E3;
  --eq-bord-doux:       #E9ECE6;
  --eq-bord-filet:      #E0E5DC;
  --eq-bord-creme:      #E0E5DC;
  --eq-bord-accent:     #CFDDD3;
}

[data-eq-theme="vert"] {          /* 1b — vert écurie, variante du handoff */
  --eq-sombre:          #0F3C25;
  --eq-sombre-h:        #12472B;
  --eq-sombre-b:        #0C3320;
  --eq-cta:             #0A0A0A;
  --eq-encre:           #0F3C25;
  --eq-creme:           #F4F1E9;
  --eq-creme-2:         #F7F4EC;
  --eq-doux:            #FAF9F5;
  --eq-seo:             #F7F5F0;
  --eq-canvas:          #EFEDE8;
  --eq-bord:            #E8E5DD;
  --eq-bord-carte:      #EAE6DC;
  --eq-bord-doux:       #EDE9DF;
  --eq-bord-filet:      #E3E0D9;
  --eq-bord-creme:      #E8E2D2;
  --eq-bord-accent:     #CFDDD3;
}

[data-eq-theme="noir"] {          /* 1a — noir neutre, l'or porte seul la marque */
  --eq-sombre:          #0A0A0A;
  --eq-sombre-h:        #141414;
  --eq-sombre-b:        #050505;
  --eq-cta:             #0A0A0A;
  --eq-encre:           #14140F;
  --eq-creme:           #F4F1E9;
  --eq-creme-2:         #F7F4EC;
  --eq-doux:            #FAF9F5;
  --eq-seo:             #F7F5F0;
  --eq-canvas:          #EFEDE8;
  --eq-bord:            #E8E5DD;
  --eq-bord-carte:      #EAE6DC;
  --eq-bord-doux:       #EDE9DF;
  --eq-bord-filet:      #E3E0D9;
  --eq-bord-creme:      #E8E2D2;
  --eq-bord-accent:     #DCD8CC;
}

[data-eq-theme="cuir"] {          /* 2a — noir cuir, brun-noir chaud */
  --eq-sombre:          #1C1410;
  --eq-sombre-h:        #2A1E17;
  --eq-sombre-b:        #120C09;
  --eq-cta:             #120C09;
  --eq-encre:           #2A1E17;
  --eq-creme:           #F6F2EA;
  --eq-creme-2:         #F7F3EC;
  --eq-doux:            #FBF8F2;
  --eq-seo:             #F7F3EC;
  --eq-canvas:          #EFEAE1;
  --eq-bord:            #EAE6DC;
  --eq-bord-carte:      #EAE6DC;
  --eq-bord-doux:       #EFE9DE;
  --eq-bord-filet:      #E5DFD3;
  --eq-bord-creme:      #E8E2D2;
  --eq-bord-accent:     #DED2BF;
}

:root {
  /* --- Invariants : identiques dans les 4 propositions --- */
  --eq-action:          #1A6B3C;  /* boutons primaires, liens */
  --eq-vert-sur-clair:  #26703F;

  /* Or */
  --eq-or:              #C9A959;
  --eq-or-texte:        #8A6D2F;  /* or lisible sur fond clair */
  --eq-sur-or:          #0A2E1B;  /* texte posé sur l'or */

  /* Noirs & textes */
  --eq-noir:            #0A0A0A;
  --eq-titre:           #14140F;
  --eq-texte:           #5C5A54;
  --eq-texte-2:         #6B6A64;
  --eq-texte-3:         #6E7266;
  --eq-tertiaire:       #8A867C;
  --eq-mention:         #A8A498;
  --eq-compteur:        #9A968C;

  /* Fonds neutres */
  --eq-blanc:           #FFFFFF;
  --eq-vert-pale:       #E9F0EA;
  --eq-vert-pale-2:     #E4F0E6;
  --eq-or-pale:         #F6EDD8;
  --eq-or-pale-2:       #F3E9D2;
  --eq-photo-vide:      #EDE8DA;
  --eq-photo-vide-2:    #E2DBC8;

  /* Typo */
  --eq-serif:  'Playfair Display', Georgia, serif;
  --eq-sans:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Rayons */
  --eq-r-badge:   5px;
  --eq-r-chip:   10px;
  --eq-r-ligne:  12px;
  --eq-r-btn:    14px;
  --eq-r-carte:  16px;
  --eq-r-moy:    18px;
  --eq-r-maj:    20px;
  --eq-r-pill:  999px;

  /* Ombres */
  --eq-ombre-ia:    0 20px 44px rgba(15, 60, 37, .28);
  --eq-ombre-sheet: 0 24px 60px rgba(0, 0, 0, .4);

  /* Gouttières */
  --eq-pad-x: 18px;
}

/* ---------- 2. Socle ---------- */
.eq-fiche {
  margin: 0;
  background: var(--eq-blanc);
  font-family: var(--eq-sans);
  color: var(--eq-noir);
  -webkit-font-smoothing: antialiased;
  /* La fiche se met en page selon SA largeur, pas celle de l'écran.
     Sans ça, rendue dans un cadre de 390 px sur un écran large, elle
     déclenche la mise en page desktop et s'écrase. */
  container-type: inline-size;
  container-name: fiche;
}
.eq-fiche * { box-sizing: border-box; }
.eq-fiche a { color: var(--eq-action); text-decoration: none; }
.eq-fiche a:hover { color: var(--eq-or-texte); }

.eq-fiche h1, .eq-fiche h2, .eq-fiche h3, .eq-fiche p { text-wrap: pretty; }
.eq-fiche h1, .eq-fiche h2 { font-family: var(--eq-serif); margin: 0; }

.eq-h1 {
  font-size: 29px; line-height: 1.08; font-weight: 800;
  letter-spacing: -.02em; color: var(--eq-noir); margin: 0 0 6px;
}
.eq-h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.01em;
  color: var(--eq-titre); margin: 0 0 13px;
}
.eq-h2--sm { font-size: 17px; }

/* Sections : chaque bande porte son propre fond */
.eq-sec        { padding: 24px var(--eq-pad-x); background: var(--eq-blanc); }
.eq-sec--doux  { background: var(--eq-doux); border-top: 1px solid var(--eq-bord-doux); }
.eq-sec--cadre { background: var(--eq-doux); border-top: 1px solid var(--eq-bord-doux); border-bottom: 1px solid var(--eq-bord-doux); }
.eq-sec--noir  { background: var(--eq-cta); padding: 26px 20px; }
.eq-sec--seo   { background: var(--eq-seo); border-top: 1px solid var(--eq-bord); padding: 22px 20px 26px; }

/* Paragraphe courant */
.eq-texte { margin: 0; font-size: 13px; line-height: 1.65; color: var(--eq-texte); }

/* Fil d'Ariane */
.eq-fildariane {
  padding: 14px var(--eq-pad-x) 0; font-size: 12px; color: var(--eq-tertiaire);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.eq-fildariane a { color: var(--eq-action); }
.eq-fildariane [aria-current] { color: var(--eq-texte-2); }

/* ⛔ LA BANDE BLANCHE AU-DESSUS DU HERO NE VIENT PAS DE LA FICHE.
   Le wrapper du snippet annuaire la pose EN STYLE INLINE, sur la balise elle-même :

     <div class="equirider-annuaire" style="max-width:1100px;margin:0 auto;padding:20px;…">

   Ces 20 px du haut SONT la bande blanche entre le bandeau noir et le hero. (Et le
   `max-width:1100px` moins ses 20 px de chaque côté est ce qui donne la colonne de
   1060 px — celle qu'il ne faut pas confondre avec 1120.)

   🔑 Un style inline vaut (1,0,0,0) : aucune règle de feuille ne peut le battre. `!important`
   n'est pas un pansement ici, c'est le SEUL moyen — et il reste borné au seul cas qui le
   demande, grâce au `:has()`. Les pages de liste de l'annuaire gardent leur gouttière.
   ▶ Correctif de fond possible plus tard : retirer ce padding du snippet 13 côté PHP. */
.equirider-annuaire:has(.eq-fiche) { padding-top: 0 !important; }

/* ---------- 3. Hero photo ----------
   Gabarit maison (design system Equirider, 25/05/2026) porté sur la fiche annuaire le
   11/08 : photo plein cadre bord à bord, overlay dégradé sombre à gauche, et le bloc
   d'identité POSÉ DESSUS.

   ⛔ Le full-bleed n'est PAS dans une media query : JT ne veut aucune gouttière, mobile
   compris. `calc(50% - 50vw)` rattrape exactement le padding du conteneur quel qu'il
   soit — 20 px sur mobile, 190 px sur un écran de 1440.
   ⛔ JAMAIS `width:100vw` : ça ajoute la largeur de la barre de défilement. */
.eq-hero {
  position: relative;
  min-height: 430px;
  display: flex; align-items: flex-end;
  background: var(--eq-photo-vide);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* 🔑 Le padding rend EXACTEMENT ce que la marge a pris : en CSS, un pourcentage de
     marge ou de padding se calcule sur la largeur du BLOC CONTENANT, pas sur l'élément.
     Ici les deux 50% valent donc la moitié de la colonne d'origine, et le contenu du
     hero retombe pile sur celle du reste de la page.
     ⛔ Ne PAS aligner avec un `max-width` en dur : la colonne ne fait pas 1120 px mais
     1060, le thème la contraint — un max-width recentre sur une autre colonne et
     décale le titre d'une trentaine de pixels. */
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  overflow: hidden;
}
.eq-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Deux dégradés superposés : le 90deg tient la lisibilité du texte à gauche (spéc.
   maison), le 180deg rattrape le bas quand la photo y est claire. */
/* ⚠ Deux dégradés se MULTIPLIENT là où ils se superposent : .40 et .45 ne font pas .45
   mais .67 d'opacité réelle. Première version trop sombre — la photo disparaissait à
   droite. Le vertical est donc réduit à un simple rattrapage de bas de cadre. */
.eq-hero__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,8,.90) 0%, rgba(8,8,8,.68) 44%, rgba(8,8,8,.32) 74%, rgba(8,8,8,.12) 100%),
    linear-gradient(180deg, rgba(8,8,8,.28) 0%, rgba(8,8,8,0) 32%, rgba(8,8,8,.30) 100%);
}

/* Le contenu se recale sur la colonne du reste de la page : le fond est bord à bord,
   le texte reste aligné avec les sections qui suivent. */
/* Pas de max-width ni de margin auto : le recalage est fait par le padding du hero
   ci-dessus. Ne reste que la gouttière interne, la même que celle des sections. */
.eq-hero__contenu {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 var(--eq-pad-x) 34px;
}
/* Fil d'Ariane du gabarit maison : gris clair sur la photo, et il part d'« Accueil ». */
.eq-hero .eq-fildariane {
  padding: 0 0 18px; font-size: 14px; gap: 8px;
  color: rgba(255,255,255,.55);
}
.eq-hero .eq-fildariane a { color: rgba(255,255,255,.72); }
.eq-hero .eq-fildariane a:hover { color: var(--eq-or); }
.eq-hero .eq-fildariane [aria-current] { color: rgba(255,255,255,.9); }

/* Pill de la charte : vert de marque translucide, texte vert clair — c'est le `.htag`
   du design system, pas un gris translucide. */
.eq-hero__pill {
  display: inline-block; margin-bottom: 18px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #6EE7A0; background: rgba(26,86,50,.42);
  border: 1px solid rgba(110,231,160,.22);
  padding: 8px 15px; border-radius: var(--eq-r-pill);
}

/* Tailles du gabarit maison : 46 px desktop / 34 px mobile, seconde ligne à 40 / 28. */
.eq-hero .eq-h1 { color: #FFF; font-size: 46px; line-height: 1.04; margin: 0 0 14px; }
/* La seconde ligne du nom, en Playfair italique or. `font-style: italic` VIENT du <em> :
   on ne le neutralise pas ici, contrairement aux heros de pages où le <em> est redressé. */
.eq-hero .eq-h1 em {
  display: block; font-weight: 400; color: var(--eq-or);
  font-size: 40px; letter-spacing: -.01em; margin-top: 4px;
}

.eq-hero__loc { margin: 0; font-size: 15px; color: rgba(255,255,255,.7); }

.eq-hero__stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 20px; }
.eq-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.eq-hero__stat-val {
  font-family: var(--eq-serif); font-size: 27px; font-weight: 700;
  line-height: 1.05; color: var(--eq-or);
}
.eq-hero__stat-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}

/* Repli sans aucune image : dégradé de marque */
.eq-hero--vide {
  background: linear-gradient(170deg, var(--eq-sombre) 0%, var(--eq-sombre-h) 55%, var(--eq-sombre-b) 100%);
}
.eq-hero--vide .eq-hero__voile { display: none; }

/* Illustration par métier (fiche sans photo réelle) : elle habille, elle ne documente pas.
   Voile renforcé + désaturation partielle pour qu'elle ne se lise pas comme la photo du lieu. */
/* L'illustration reste plus sourde que la photo réelle — elle habille, elle ne documente
   pas — mais elle doit se VOIR. Le `brightness` d'origine (.86) s'ajoutait à l'overlay et
   la rendait noire : la désaturation seule suffit à la distinguer d'une vraie photo. */
.eq-hero--illustration { background: var(--eq-sombre); }
.eq-hero--illustration .eq-hero__img { filter: saturate(.78); }
.eq-hero--illustration .eq-hero__voile {
  background:
    linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.74) 44%, rgba(8,8,8,.42) 74%, rgba(8,8,8,.22) 100%),
    linear-gradient(180deg, rgba(8,8,8,.30) 0%, rgba(8,8,8,0) 32%, rgba(8,8,8,.34) 100%);
}

@media (max-width: 767px) {
  .eq-hero { min-height: 380px; }
  .eq-hero__contenu { padding-bottom: 26px; }
  .eq-hero .eq-fildariane { font-size: 12.5px; padding-bottom: 14px; }
  .eq-hero .eq-h1 { font-size: 34px; margin-bottom: 10px; }
  .eq-hero .eq-h1 em { font-size: 28px; }
  .eq-hero__pill { margin-bottom: 14px; }
  .eq-hero__loc { font-size: 14px; }
  .eq-hero__stats { gap: 22px; margin-top: 16px; }
  .eq-hero__stat-val { font-size: 22px; }
}
.eq-hero__mention {
  position: absolute; bottom: 12px; z-index: 3;
  right: max(14px, calc(50% - 560px + var(--eq-pad-x)));
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); background: rgba(10,10,10,.5);
  padding: 5px 9px; border-radius: var(--eq-r-badge); backdrop-filter: blur(4px);
}

/* Dans le flux, en tête du contenu : `margin-bottom:auto` pousse le bloc d'identité en
   bas du hero et garde le bouton en haut, sans positionnement absolu à recaler. */
.eq-hero__actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: auto;
}
.eq-hero__droite { display: flex; gap: 9px; }
.eq-rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--eq-r-pill);
  background: rgba(255,255,255,.92); border: 0; cursor: pointer;
  /* cible tactile 44px sans grossir le disque */
  position: relative;
}
.eq-rond::after { content: ""; position: absolute; inset: -4px; }
.eq-rond--sombre { background: rgba(255,255,255,.16); }

.eq-hero__points { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 6px; align-items: center; }
.eq-point { width: 7px; height: 7px; border-radius: var(--eq-r-pill); background: rgba(255,255,255,.45); }
.eq-point--on { background: #FFF; }
.eq-hero__compteur {
  position: absolute; bottom: 12px; right: 14px;
  font-size: 11px; font-weight: 700; color: #FFF;
  background: rgba(10,10,10,.55); padding: 6px 10px; border-radius: var(--eq-r-pill);
}

/* ---------- 4. Identité ---------- */
.eq-ident { padding: 18px var(--eq-pad-x) 16px; background: var(--eq-blanc); }
.eq-chips-ident { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }

.eq-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--eq-r-pill);
}
.eq-badge--cat      { color: var(--eq-encre); background: var(--eq-vert-pale); }
.eq-badge--verifie  { color: var(--eq-or-texte); background: var(--eq-or-pale); letter-spacing: .08em; }
.eq-badge--stock    { color: var(--eq-tertiaire); background: var(--eq-creme); border: 1px solid var(--eq-bord-creme); letter-spacing: .08em; }

.eq-loc { margin: 0 0 12px; font-size: 13px; color: var(--eq-texte-2); }

.eq-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eq-meta__filet { width: 1px; height: 14px; background: var(--eq-bord-filet); }
.eq-meta__fort  { font-size: 12px; font-weight: 700; color: var(--eq-action); }
.eq-meta__doux  { font-size: 12px; color: var(--eq-texte-2); }

/* ---------- 5. Actions rapides ---------- */
.eq-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 0 var(--eq-pad-x) 18px; background: var(--eq-blanc);
}
.eq-actions--2 { grid-template-columns: repeat(2, 1fr); }
.eq-actions--1 { grid-template-columns: 1fr; }
.eq-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  /* 600 et non 800 : le 800 était jugé trop gras (défaut n°3, JT 11/08). 600 est aussi
     la graisse prévue par le design system pour DM Sans en libellé — le 800 n'y figure pas. */
  font-family: var(--eq-sans); font-size: 13.5px; font-weight: 600;
  padding: 14px 8px; border-radius: var(--eq-r-btn); border: 0;
  min-height: 44px; cursor: pointer; text-align: center;
}
/* ⚠ Les sélecteurs sont préfixés par .eq-fiche : sans ça, la règle générique
   `.eq-fiche a` (spécificité 0,1,1) l'emporte sur `.eq-btn--primaire` (0,1,0)
   et tout bouton qui est un <a> reçoit le vert d'action comme couleur de TEXTE
   — donc du vert sur du vert, illisible. */
.eq-fiche .eq-btn--primaire { background: var(--eq-action); color: #FFF; }
.eq-fiche .eq-btn--primaire:hover { color: #FFF; }
.eq-fiche .eq-btn--doux { background: var(--eq-creme); border: 1px solid var(--eq-bord-creme); color: var(--eq-noir); }
.eq-fiche .eq-btn--doux:hover { color: var(--eq-noir); border-color: var(--eq-action); }
.eq-fiche .eq-btn--or { background: var(--eq-or); color: var(--eq-noir); font-size: 14.5px; padding: 16px; border-radius: var(--eq-r-carte); width: 100%; }
.eq-fiche .eq-btn--or:hover { color: var(--eq-noir); }
.eq-fiche .eq-btn--fantome {
  background: transparent; border: 1px solid var(--eq-bord-filet);
  color: var(--eq-noir); font-size: 13px; padding: 13px; border-radius: var(--eq-r-btn); width: 100%;
}
.eq-fiche .eq-btn--fantome:hover { color: var(--eq-noir); border-color: var(--eq-or); }
.eq-btn[disabled], .eq-btn--inactif {
  background: var(--eq-creme); border: 1px dashed var(--eq-bord-creme);
  color: var(--eq-tertiaire); cursor: not-allowed;
}

/* ---------- 5 bis. Neutralisation du rose du thème (défaut n°4, JT 11/08) ----------
   Le thème sert, dans le combiné LiteSpeed, une règle GLOBALE :

     [type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,
     button:focus,button:hover { background-color:#c36; color:#fff }

   🪤 Elle s'écrit `#c36`, la forme courte de #CC3366 : chercher « CC3366 » dans le
   combiné ne rend RIEN, et on conclut à tort qu'elle n'y est pas. Mesuré sur la fiche
   elle-même le 11/08, pas sur une autre page.

   Sa spécificité est (0,1,1). Elle ne gagne donc QUE là où notre fond est posé avec
   moins : `.eq-ia__q { background: transparent }` vaut (0,1,0) et perdait — les trois
   questions de l'agent IA viraient au rose sur le fond noir de la carte. Les
   `.eq-btn--primaire` sont posés en (0,2,0) et n'ont jamais été touchés.

   ⛔ Ne pas « corriger » ça avec !important : il suffit de rendre le fond du survol
   EXPLICITE, à une spécificité qui passe devant. `:focus` est inclus, la règle du
   thème le frappe aussi (au clavier, le rose apparaissait sans même survoler). */
.eq-fiche .eq-ia__q:hover,
.eq-fiche .eq-ia__q:focus,
.eq-fiche .eq-ia__q:focus-visible { background: rgba(255,255,255,.08); }

.eq-fiche .eq-btn--primaire:focus  { background: var(--eq-action); }
.eq-fiche .eq-btn--doux:focus      { background: var(--eq-creme); }
.eq-fiche .eq-btn--or:focus        { background: var(--eq-or); }
.eq-fiche .eq-btn--fantome:hover,
.eq-fiche .eq-btn--fantome:focus   { background: transparent; }

/* ---------- 6. Carte agent IA ---------- */
.eq-ia {
  margin: 0 14px 20px; padding: 15px; border-radius: var(--eq-r-maj);
  background: linear-gradient(165deg, var(--eq-sombre) 0%, var(--eq-sombre-h) 60%, var(--eq-sombre-b) 100%);
}
.eq-ia__tete { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.eq-ia__pict {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; background: var(--eq-or); flex: none;
}
.eq-ia__titre { font-size: 13px; font-weight: 800; color: #FFF; }
.eq-ia__etat {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: var(--eq-or);
  white-space: nowrap; flex: none;
}
.eq-ia__titre { flex: 1; min-width: 0; }
.eq-ia__pastille { width: 5px; height: 5px; border-radius: var(--eq-r-pill); background: var(--eq-or); }
.eq-ia__accroche { margin: 0 0 11px; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.68); }
.eq-ia__questions { display: flex; flex-direction: column; gap: 7px; }
.eq-ia__q {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-family: var(--eq-sans); font-size: 12.5px; font-weight: 600; color: #FFF;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--eq-r-ligne); padding: 11px 12px; line-height: 1.3;
  min-height: 44px; cursor: pointer;
}
.eq-ia__q:hover { border-color: var(--eq-or); color: #FFF; }
/* Sans flex:1 + min-width:0, un libellé long déborde du bouton au lieu de passer
   à la ligne : un élément flex refuse de rétrécir sous sa taille de contenu.
   Le `white-space: normal` est nécessaire en plus : le thème force nowrap sur les
   <button>, ce qui coupait la question la plus longue en plein mot. */
.eq-fiche .eq-ia__q { white-space: normal; }
.eq-fiche .eq-ia__q > span { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.eq-fiche .eq-ia__q > svg  { flex: none; }

/* ---------- 7. Cartes de prix ---------- */
.eq-prix { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 var(--eq-pad-x) 22px; background: var(--eq-blanc); }
.eq-prix__carte {
  display: flex; flex-direction: column; gap: 3px; padding: 14px;
  border-radius: var(--eq-r-carte); background: var(--eq-doux); border: 1px solid var(--eq-bord-doux);
}
.eq-prix__label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--eq-tertiaire); }
.eq-prix__val { font-family: var(--eq-serif); font-size: 22px; font-weight: 700; color: var(--eq-noir); }
.eq-prix__unite { font-family: var(--eq-sans); font-size: 12px; font-weight: 600; color: var(--eq-texte-2); }
/* Fourchette libre déclarée par le pro — une seule carte pleine largeur */
.eq-prix--libre { grid-template-columns: 1fr; }
.eq-prix--libre .eq-prix__val { font-size: 19px; }

/* ---------- 8. Listes (prestations, lignes génériques) ---------- */
.eq-liste { display: flex; flex-direction: column; gap: 8px; }
.eq-ligne {
  display: flex; align-items: center; gap: 12px;
  background: var(--eq-blanc); border: 1px solid var(--eq-bord-carte);
  border-radius: var(--eq-r-ligne); padding: 12px 13px;
}
.eq-ligne__corps { flex: 1; min-width: 0; }
.eq-ligne__nom { display: block; font-size: 13.5px; font-weight: 700; color: var(--eq-titre); }
.eq-ligne__detail { display: block; font-size: 11.5px; color: var(--eq-texte-3); line-height: 1.35; margin-top: 2px; }
.eq-ligne__prix { font-size: 13.5px; font-weight: 800; color: var(--eq-encre); white-space: nowrap; flex: none; }
.eq-legale { margin: 11px 0 0; font-size: 11px; color: var(--eq-mention); }

/* ---------- 9. Chips ---------- */
.eq-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.eq-fiche .eq-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
  font-size: 12px; font-weight: 600; color: var(--eq-noir);
  background: var(--eq-creme); padding: 9px 12px; border-radius: var(--eq-r-chip);
}
a.eq-chip:hover { color: var(--eq-encre); border-color: var(--eq-or); }
.eq-fiche .eq-chip--contour {
  background: transparent; border: 1px solid var(--eq-bord-accent);
  color: var(--eq-encre); font-weight: 700; border-radius: var(--eq-r-pill);
}

/* ---------- 10. Horaires ---------- */
.eq-horaires__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.eq-etat {
  font-size: 11.5px; font-weight: 800; padding: 6px 10px; border-radius: var(--eq-r-pill);
  color: var(--eq-action); background: var(--eq-vert-pale); white-space: nowrap;
}
.eq-etat--ferme { color: var(--eq-or-texte); background: var(--eq-or-pale); }
.eq-jours { display: flex; flex-direction: column; }
.eq-jour {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--eq-bord-doux);
  font-size: 12.5px; font-weight: 500; color: var(--eq-texte);
}
.eq-jour--aujourdhui { font-weight: 800; color: var(--eq-encre); }
/* Horaires en texte libre (état actuel de la base) */
.eq-horaires-libre { font-size: 13px; line-height: 1.6; color: var(--eq-texte); margin: 0; }

/* ---------- 11. Localisation ---------- */
.eq-carte { position: relative; height: 150px; border-radius: var(--eq-r-moy); overflow: hidden; border: 1px solid #E4E0D6; background: #EAE9E1; }
.eq-carte iframe, .eq-carte > svg { width: 100%; height: 100%; border: 0; display: block; }
.eq-adresse { display: flex; align-items: flex-start; gap: 11px; margin-top: 13px; }
.eq-adresse__txt { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--eq-texte); }

/* ---------- 12. Blocs de manque (honnêteté) ---------- */
/* Le seul endroit où le vide est nommé. Jamais « non renseigné » dans une card. */
.eq-manque {
  background: var(--eq-creme-2); border: 1px solid var(--eq-bord-creme);
  border-radius: var(--eq-r-carte); padding: 16px;
}
.eq-manque__titre { font-family: var(--eq-serif); font-size: 17px; font-weight: 700; color: var(--eq-titre); margin: 0 0 8px; }
.eq-manque__txt { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--eq-texte); }
.eq-manque__liste { margin: 0 0 13px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.eq-manque__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--eq-texte-3);
}
.eq-manque__puce {
  width: 16px; height: 16px; border-radius: var(--eq-r-badge); flex: none;
  border: 1px dashed var(--eq-bord-creme); background: var(--eq-blanc);
}

/* ---------- 12 bis. FAQ ---------- */
.eq-faq { display: flex; flex-direction: column; gap: 8px; }
.eq-faq__item {
  background: var(--eq-blanc); border: 1px solid var(--eq-bord-carte);
  border-radius: var(--eq-r-ligne); padding: 12px 13px;
}
.eq-faq__q {
  font-size: 13.5px; font-weight: 700; color: var(--eq-titre);
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
.eq-faq__q::-webkit-details-marker { display: none; }
.eq-faq__q::after {
  content: "+"; margin-left: auto; font-size: 17px; font-weight: 400;
  color: var(--eq-action); line-height: 1; flex: none;
}
.eq-faq__item[open] .eq-faq__q::after { content: "–"; }
.eq-faq__r { margin: 9px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--eq-texte); }

/* Bouton fantôme posé sur un fond sombre */
.eq-fiche .eq-btn--sur-sombre { border-color: rgba(255,255,255,.25); color: #FFF; }
.eq-fiche .eq-btn--sur-sombre:hover { border-color: var(--eq-or); color: #FFF; }

/* ---------- 12 ter. Avis ---------- */
.eq-avis-synth {
  display: flex; align-items: center; gap: 16px; padding: 15px;
  border-radius: var(--eq-r-moy); background: var(--eq-sombre); margin-bottom: 14px;
}
.eq-avis-synth__note { font-family: var(--eq-serif); font-size: 34px; font-weight: 800; color: #FFF; line-height: 1; flex: none; }
.eq-avis-synth__meta { display: flex; flex-direction: column; gap: 5px; }
.eq-avis-synth__etoiles { display: flex; gap: 2px; }
.eq-avis-synth__nb { font-size: 11px; color: rgba(255,255,255,.65); }

.eq-avis-liste { display: flex; flex-direction: column; gap: 10px; }
.eq-avis { border: 1px solid var(--eq-bord-carte); border-radius: var(--eq-r-carte); padding: 14px; }
.eq-avis__tete { display: flex; align-items: center; gap: 10px; }
.eq-avis__ini {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--eq-r-pill);
  background: var(--eq-creme); border: 1px solid var(--eq-bord-creme);
  font-size: 12px; font-weight: 800; color: var(--eq-encre);
}
.eq-avis__qui { flex: 1; min-width: 0; }
.eq-avis__nom { display: block; font-size: 13px; font-weight: 700; color: var(--eq-titre); }
.eq-avis__date { display: block; font-size: 11px; color: var(--eq-tertiaire); margin-top: 1px; }
.eq-avis__note { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12.5px; font-weight: 800; color: var(--eq-noir); }
.eq-avis__txt { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--eq-texte); }

/* Formulaire de dépôt */
.eq-avis-form {
  margin-top: 16px; padding: 15px; border-radius: var(--eq-r-carte);
  background: var(--eq-doux); border: 1px solid var(--eq-bord-doux);
}
.eq-avis-form__titre { display: block; font-family: var(--eq-serif); font-size: 16px; font-weight: 700; color: var(--eq-titre); margin-bottom: 10px; }
/* Étoiles en row-reverse : le CSS ne sait cibler que les frères SUIVANTS, donc on
   inverse l'ordre visuel pour pouvoir colorer la note choisie et celles d'avant. */
.eq-avis-form__notes { display: inline-flex; flex-direction: row-reverse; gap: 3px; margin-bottom: 11px; }
.eq-avis-form__notes input { position: absolute; opacity: 0; width: 0; height: 0; }
.eq-avis-form__notes label { color: var(--eq-bord-filet); cursor: pointer; display: inline-flex; padding: 3px; }
.eq-avis-form__notes label:hover,
.eq-avis-form__notes label:hover ~ label,
.eq-avis-form__notes input:checked ~ label { color: var(--eq-or); }
.eq-avis-form__notes input:focus-visible + label { outline: 2px solid var(--eq-or); outline-offset: 2px; }
.eq-avis-form textarea {
  width: 100%; box-sizing: border-box; font-family: var(--eq-sans); font-size: 13px;
  line-height: 1.5; color: var(--eq-noir); background: var(--eq-blanc);
  border: 1px solid var(--eq-bord-carte); border-radius: var(--eq-r-ligne);
  padding: 11px 12px; resize: vertical;
}
.eq-avis-form textarea:focus-visible { outline: 2px solid var(--eq-or); outline-offset: 1px; }
.eq-avis-form__bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.eq-avis-form__compteur { font-size: 11px; color: var(--eq-tertiaire); }
.eq-avis-form__retour:empty { display: none; }
.eq-avis-form__retour { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--eq-action); }

/* ---------- 13. Établissements similaires ---------- */
.eq-similaires { padding: 24px 0 24px var(--eq-pad-x); background: var(--eq-blanc); border-top: 1px solid var(--eq-bord-doux); }
.eq-rail {
  display: flex; gap: 11px; overflow-x: auto; padding-right: var(--eq-pad-x);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.eq-rail::-webkit-scrollbar { display: none; }
.eq-vignette {
  display: flex; flex-direction: column; width: 172px; flex: none;
  border: 1px solid var(--eq-bord-carte); border-radius: var(--eq-r-moy);
  overflow: hidden; scroll-snap-align: start; color: inherit;
}
.eq-vignette:hover { border-color: var(--eq-action); color: inherit; }
.eq-vignette__img { display: block; height: 92px; background: var(--eq-photo-vide); object-fit: cover; width: 100%; }
/* Même convention que le hero : une illustration par métier est désaturée, pour qu'elle
   ne se lise pas comme la photo de CET établissement. */
.eq-vignette__img--illu { filter: saturate(.72) brightness(.96); }
.eq-vignette__corps { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.eq-vignette__nom { font-size: 13px; font-weight: 800; color: var(--eq-titre); line-height: 1.25; }
.eq-vignette__ville { font-size: 11px; color: var(--eq-tertiaire); }
.eq-vignette__note { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; }

/* ---------- 14. CTA revendication ---------- */
.eq-surtitre {
  display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--eq-or);
}
.eq-cta__h2 { margin: 10px 0 8px; font-size: 24px; line-height: 1.12; font-weight: 700; color: #FFF; }
.eq-cta__p { margin: 0 0 15px; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.68); }
.eq-cta__mention { margin: 11px 0 0; text-align: center; font-size: 11px; color: rgba(255,255,255,.45); }

/* ---------- 15. SEO & footer ---------- */
.eq-seo__p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--eq-texte); }
.eq-footer {
  padding: 20px; background: var(--eq-sombre);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.eq-footer__marque { font-family: var(--eq-serif); font-size: 15px; color: #FFF; }
.eq-footer__liens { font-size: 11px; color: rgba(255,255,255,.5); }
.eq-footer--barre { padding-bottom: 78px; }

/* ---------- 16. Barre d'action collée ---------- */
.eq-barre {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--eq-bord);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(100%);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  pointer-events: none;
}
.eq-barre.est-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.eq-barre__prix { display: flex; flex-direction: column; flex: none; max-width: 46%; min-width: 0; }
.eq-barre__label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--eq-tertiaire); }
.eq-barre__val { font-family: var(--eq-serif); font-size: 19px; font-weight: 700; color: var(--eq-noir); line-height: 1.1; }
.eq-barre__unite { font-family: var(--eq-sans); font-size: 11px; font-weight: 600; color: var(--eq-texte-2); }
.eq-barre .eq-btn { flex: 1; min-width: 0; font-size: 14px; padding: 15px 10px; }
/* Un libellé trop long ne doit jamais pousser le bouton hors du cadre. */
.eq-barre__val, .eq-barre__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 17. Responsive (container queries) ----------
   Les seuils portent sur la largeur de .eq-fiche, pas sur celle du viewport :
   la fiche est correcte aussi bien en pleine page qu'insérée dans un cadre. */
@container fiche (min-width: 768px) {
  .eq-fiche { --eq-pad-x: 24px; background: var(--eq-canvas); }
  .eq-fiche__inner { max-width: 1120px; margin: 0 auto; background: var(--eq-blanc); }
  /* Le full-bleed est posé globalement (section 3), pas ici : JT ne veut aucune
     gouttière, y compris sous 768 px. Ce palier ne règle plus que la hauteur. */
  .eq-hero { min-height: 470px; }
  .eq-h1 { font-size: 38px; }
  .eq-prix { grid-template-columns: repeat(3, 1fr); }
  .eq-prix--libre { grid-template-columns: 1fr; }
  .eq-chips { gap: 8px; }
}

@container fiche (min-width: 1024px) {
  /* Deux colonnes UNIQUEMENT si le gabarit a réellement posé une colonne latérale.
     Une piste de grille reste réservée même quand son unique enfant est en
     display:none — d'où la colonne fantôme si on la déclare inconditionnellement. */
  .eq-corps--2col {
    display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 34fr);
    gap: 2%; align-items: start; padding: 0 var(--eq-pad-x) 32px;
  }
  .eq-corps--2col > * { min-width: 0; }
  .eq-corps--2col .eq-sec { padding-left: 0; padding-right: 0; }
  .eq-aside {
    position: sticky; top: 24px;
    border: 1px solid var(--eq-bord-carte); border-radius: var(--eq-r-maj);
    padding: 18px; background: var(--eq-blanc);
  }
  .eq-aside .eq-ia { margin: 16px 0 0; }
  .eq-aside .eq-actions, .eq-aside .eq-prix { padding: 0; }
  .eq-aside .eq-actions { margin-bottom: 12px; }
  /* Le panneau sticky remplace la barre collée */
  .eq-corps--2col ~ .eq-barre, .eq-fiche .eq-barre { display: none; }
  .eq-footer--barre { padding-bottom: 20px; }
  .eq-similaires { padding-left: 0; }
}

/* Repli : navigateur sans container queries → seuils viewport. */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .eq-fiche { --eq-pad-x: 24px; }
    .eq-fiche__inner { max-width: 1120px; margin: 0 auto; }
    .eq-h1 { font-size: 38px; }
  }
}

/* ---------- 17 bis. Icônes SVG ----------
   Les pictos du handoff portent leur couleur en attribut de présentation
   (fill="#0F3C25"). Un attribut de présentation a la spécificité la plus
   basse : le CSS le rattache au thème sans toucher au markup. */
.eq-fiche [stroke="#0F3C25"] { stroke: var(--eq-encre); }
.eq-fiche [fill="#0F3C25"]   { fill:   var(--eq-encre); }

/* ---------- 17 ter. Cohabitation avec le chrome du site ----------
   La pastille flottante « Référencer mon établissement » se superpose à la barre
   d'action de la fiche : deux CTA collés en bas, dont l'un cache l'autre.
   On la masque UNIQUEMENT sur une page qui porte une fiche v2 — elle convertit sur
   les pages catégorie et département, où elle doit rester. */
/* La pastille est le <button id="eq-procard-fab">, pas le <a class="go"> — ce dernier
   vit DANS la modale et ne s'affiche qu'à l'ouverture. */
body:has(.eq-fiche) #eq-procard-fab { display: none !important; }

/* ---------- 18. Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .eq-fiche *, .eq-barre { transition: none !important; animation: none !important; }
}
.eq-fiche :focus-visible { outline: 2px solid var(--eq-or); outline-offset: 2px; border-radius: 4px; }
.eq-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Reponse de l'agent IA de la fiche (branche le 09/08) -------------
   Les 3 questions etaient inertes : aucun ecouteur ne les entendait.
   Cette zone est remplie par le JS, elle n'existe pas au chargement. */
.eq-ia__rep{
  margin-top:14px; padding:14px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
.eq-ia__rep-texte{
  margin:0; font-size:15px; line-height:1.6; color:#EDE7E1;
}
.eq-ia__rep.est-en-cours .eq-ia__rep-texte{ opacity:.6; font-style:italic; }
.eq-ia__rep-mention{
  margin:10px 0 0; font-size:12px; line-height:1.45;
  color:rgba(255,255,255,.45);
}
.eq-ia__rep.est-en-cours .eq-ia__rep-mention{ display:none; }
.eq-ia__q[disabled]{ opacity:.45; cursor:progress; }

/* ── « Ce que dit Google » ──────────────────────────────────────────────────
   12/08/2026. Le bloc reutilisait `.eq-avis-synth` (fond sombre, texte blanc) : le
   sous-titre y etait gris fonce sur noir, donc illisible, et le bandeau prenait toute
   la largeur comme un bouton. Composant dedie, sur fond clair, au rayon des cartes. */
.eq-fiche .eq-gnote {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px; margin-bottom: 12px;
  border: 1px solid var(--eq-bord-carte); border-radius: var(--eq-r-carte);
  background: var(--eq-doux);
}
.eq-fiche .eq-gnote__note { flex: none; font-family: var(--eq-serif); line-height: 1; color: var(--eq-encre); }
.eq-fiche .eq-gnote__note strong { font-size: 38px; font-weight: 700; }
.eq-fiche .eq-gnote__note span   { font-size: 15px; color: var(--eq-texte-2); margin-left: 2px; }
.eq-fiche .eq-gnote__txt  { min-width: 0; }
.eq-fiche .eq-gnote__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--eq-texte); }
.eq-fiche .eq-gnote__meta b { font-weight: 700; color: var(--eq-encre); }
@media (max-width: 520px) {
  .eq-fiche .eq-gnote { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Sasha en tete de fiche ─────────────────────────────────────────────────
   12/08/2026. L'assistant etait une carte de 13 px de titre en 4e position. Il ouvre
   desormais la fiche, avec son portrait — le meme que sur la page du carnet, une seule
   identite IA pour toute la marque. */
.eq-fiche .eq-sasha {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--eq-sombre); border-radius: var(--eq-r-moy);
  padding: 24px; margin: 0 0 18px;
}
.eq-fiche .eq-sasha__ph { width: 84px; height: 84px; border-radius: var(--eq-r-pill); flex: none; object-fit: cover; border: 2px solid var(--eq-or); }
.eq-fiche .eq-sasha__txt { min-width: 0; flex: 1; }
.eq-fiche .eq-sasha__tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--eq-or); background: rgba(201,169,89,.14);
  padding: 3px 10px; border-radius: var(--eq-r-pill); margin-bottom: 10px;
}
.eq-fiche .eq-sasha__h { font-family: var(--eq-serif); font-size: 26px; line-height: 1.2; color: #FFF; margin: 0 0 7px; font-weight: 700; }
.eq-fiche .eq-sasha__h em { color: var(--eq-or); font-style: italic; }
.eq-fiche .eq-sasha__p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.72); margin: 0 0 16px; max-width: 56ch; }
.eq-fiche .eq-sasha__qs { display: flex; flex-wrap: wrap; gap: 9px; }
.eq-fiche .eq-sasha__q {
  font-size: 13.5px; color: #FFF; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--eq-r-pill);
  padding: 9px 16px; cursor: pointer; font-family: inherit; text-align: left;
}
.eq-fiche .eq-sasha__q:hover,
.eq-fiche .eq-sasha__q:focus-visible { background: rgba(255,255,255,.13); }
.eq-fiche .eq-sasha__note { font-size: 11.5px; color: rgba(255,255,255,.42); margin: 16px 0 0; }
@media (max-width: 560px) {
  .eq-fiche .eq-sasha { flex-direction: column; gap: 14px; padding: 20px; }
  .eq-fiche .eq-sasha__ph { width: 64px; height: 64px; }
  .eq-fiche .eq-sasha__h { font-size: 22px; }
}

/* == Coherence des rayons (12/08/2026) ====================================
   Constat mesure sur la fiche : la section « Coordonnees » est a 0 px et les cartes
   qu'elle contient a 12 px — une valeur qui n'existe nulle part ailleurs dans la charte
   (les cartes sont a 16, les pictogrammes a 9). Des cartes arrondies dans un cadre a
   angles droits, avec un rayon orphelin.

   Regle posee : une carte n'est jamais plus arrondie que la section qui la contient.
   En desktop les sections a fond deviennent de vraies cartes ; en mobile elles restent
   bord a bord, ou l'arrondi ne se verrait pas et mangerait de la largeur utile. */
.eq-fiche .eq-ligne { border-radius: var(--eq-r-carte); }

@media (min-width: 641px) {
  .eq-fiche .eq-sec--doux,
  .eq-fiche .eq-sec--cadre {
    border: 1px solid var(--eq-bord-doux);
    border-radius: var(--eq-r-moy);
    margin: 0 0 14px;
  }
}

/* == Hero : le fil d'Ariane remonte, et Sasha respire (12/08/2026) ==========
   Constat JT sur capture : le fil d'Ariane tombait juste au-dessus du titre, tres bas dans
   un hero de 430 px. Cause : `.eq-hero` est en `align-items: flex-end`, donc TOUT son
   contenu est colle en bas, fil compris.
   Correctif : le contenu devient une colonne pleine hauteur ; le fil garde sa place en haut
   grace a `margin-bottom: auto`, qui pousse le titre et le reste vers le bas. Aucun HTML
   touche, aucun positionnement absolu : le fil reste dans la colonne de texte. */
.eq-fiche .eq-hero { align-items: stretch; }
.eq-fiche .eq-hero__contenu {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 20px;
}
.eq-fiche .eq-hero .eq-fildariane { margin-bottom: auto; padding-bottom: 0; }

/* Le bloc de Sasha collait au bas du hero : deux fonds sombres qui se touchent. */
.eq-fiche .eq-sasha { margin-top: 20px; }


/* ══════════════════════════════════════════════════════════════════════════════
   14/08/2026 — Éclaircissement de la fiche (demande JT).
   Bloc de surcharge en fin de feuille : il passe devant les règles ci-dessus sans
   les supprimer, donc un retour arrière consiste à retirer ce seul bloc.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Le badge métier s'affichait sur 1024 px de large ─────────────────────
   `.eq-hero__pill` déclare pourtant `display:inline-block` plus haut. Selon que
   LiteSpeed sert le CSS combiné ou le rendu non caché, une règle du thème le
   repassait en `block`. `width:fit-content` règle le cas quel que soit le display
   retenu, sans avoir à gagner une guerre de spécificité. */
.eq-hero .eq-hero__pill { display: inline-block; width: fit-content; max-width: 100%; }

/* ── 2. Le hero d'illustration ────────────────────────────────────────────────
   Mesure du 14/08 sur `metier-pension-chevaux.jpg` : luminosité moyenne 54/255 et
   61 % des pixels quasi noirs. Le voile n'était donc pas la cause principale, mais
   il l'aggravait : deux dégradés superposés se multiplient, et le noir à .92 tuait
   ce qui restait. Ici : un seul dégradé, en vert de marque plutôt qu'en noir, et
   la désaturation est levée. Les nouvelles photos font le reste. */
.eq-hero--illustration .eq-hero__voile {
  background: linear-gradient(90deg,
    rgba(15,60,37,.88) 0%, rgba(15,60,37,.56) 48%, rgba(15,60,37,.20) 80%, rgba(15,60,37,.05) 100%);
}
.eq-hero--illustration .eq-hero__img { filter: saturate(1.02); }

/* ── 3. Bloc assistant en crème ───────────────────────────────────────────────
   ⚠️ Le fond seul ne suffit pas : dix descendants portent du blanc ou du crème.
   L'or #C9A959 tombe à 1,9:1 de contraste sur ce fond : le doré des titres et du
   tag passe donc à #8A6D1F (4,9:1), qui reste un or, mais lisible. */
.eq-fiche .eq-sasha {
  background: var(--eq-creme);
  border: 1px solid #E3DDCC;
}
.eq-fiche .eq-sasha__h { color: #16241C; }
.eq-fiche .eq-sasha__h em { color: #8A6D1F; }
.eq-fiche .eq-sasha__p { color: #5B6B61; }
.eq-fiche .eq-sasha__tag { color: #8A6D1F; background: rgba(201,169,89,.20); }
.eq-fiche .eq-sasha__note { color: #7A857E; }
.eq-fiche .eq-sasha__q,
.eq-fiche .eq-ia__q {
  color: #16241C; background: #FFF; border: 1px solid #DFD8C4;
}
.eq-fiche .eq-sasha__q:hover,
.eq-fiche .eq-sasha__q:focus-visible,
.eq-fiche .eq-ia__q:hover,
.eq-fiche .eq-ia__q:focus-visible {
  background: #FBF9F3; border-color: #C9A959; color: #16241C;
}
/* La réponse générée : elle était en #EDE7E1 sur fond translucide clair. Sur le
   crème elle aurait été illisible — et le défaut n'apparaît qu'après un clic, donc
   invisible à la relecture de la page. */
.eq-fiche .eq-ia__rep { background: #FFF; border: 1px solid #E3DDCC; }
.eq-fiche .eq-ia__rep-texte { color: #16241C; }
.eq-fiche .eq-ia__rep-mention { color: #7A857E; }

/* ── 4. Avatar : pictogramme au lieu d'un portrait ────────────────────────────
   Sasha est une IA. Un portrait réaliste de personne laisse croire à une vraie
   interlocutrice. Le pictogramme le dit sans détour. */
.eq-fiche .eq-sasha__ph--ia {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--eq-sombre);
  border: 2px solid var(--eq-or);
}
.eq-fiche .eq-sasha__ph--ia svg { width: 46px; height: 46px; display: block; }
@media (max-width: 560px) {
  .eq-fiche .eq-sasha__ph--ia svg { width: 34px; height: 34px; }
}