/* ============================================================================
   survol.css — LA COULEUR ARRIVE AU SURVOL
   ----------------------------------------------------------------------------
   Demande du Boss, 22/09/2026 : « quand la souris passe par dessus ce genre de
   rectangle il devienne d'une des couleurs de la palette [...] il faudrait faire
   ça pour tous les boutons sans non plus exagérer ».
   ----------------------------------------------------------------------------
   LE PRINCIPE : la couleur ARRIVE, elle ne s'installe pas. Le site reste sobre
   au repos ; UN SEUL élément prend sa couleur à la fois — celui sous le curseur.
   C'est ce qui donne la couleur sans l'exagérer.
   ----------------------------------------------------------------------------
   ⚠️ TOUT EST DANS `@media (hover: hover)`. Sur un écran tactile, un tap
   applique `:hover` et le navigateur le GARDE jusqu'au tap suivant (le « hover
   collant » d'iOS) : un bloc resterait coloré sans qu'on l'ait voulu. La garde
   fait que la couleur n'arrive que là où il y a un vrai pointeur — sans elle,
   « ajouter de la couleur » devenait « de la couleur qui reste ». Constaté par
   la vérification navigateur du 22/09, pas supposé.
   ----------------------------------------------------------------------------
   DEUX DÉFAUTS RÉPARÉS AU PASSAGE :
   1. Les blocs portaient déjà `block--lime` / `block--sky` / `block--gold`, mais
      `.metric{background:var(--surface)}` est déclaré à l'ordre 58 du <style>
      principal alors que `.block--*` est à l'ordre 15 : même spécificité, donc
      l'ORDRE gagne — et LA COULEUR ÉTAIT MORTE. Les trois cartes de chiffres
      auraient dû être verte, bleue et jaune depuis le début.
   2. `.step` n'avait aucune ombre au survol : la seule translation de 4 px se
      lit à peine, et le bloc ne « prenait » pas.
   ----------------------------------------------------------------------------
   ON NE TOUCHE PAS aux deux boîtes noires (`.final__box`, `.contact__box`) :
   elles sont l'ancre de contraste de la page. Leur bouton, lui, suit la règle
   commune comme les autres.
   ========================================================================== */

/* La transition doit couvrir le FOND, sinon la couleur saute au lieu d'arriver.
   Hors de la garde : elle ne fait de mal à personne au repos. */
.metric, .fam, .plan, .person, .step, .page,
.btn, .btn--ghost, .footer a {
  transition: background .22s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease), color .22s var(--ease);
}

/* Le rembourrage du lien de pied de page est aussi hors de la garde : il pose la
   pastille, mais surtout il évite que le lien SAUTE au moment du survol. */
.footer a { border-radius: 3px; padding: 2px 5px; margin: -2px -5px; }

@media (hover: hover) {

  /* --- 1. les blocs qui déclarent déjà leur couleur ----------------------- */

  /* Le repli d'abord : un bloc sans `block--*` prend le ciel... */
  .metric:hover { background: var(--sky); }

  /* ...et celui qui déclare la sienne la garde. Même spécificité (0,2,0) que
     `.metric:hover`, mais ces règles viennent APRÈS — donc elles gagnent. */
  .block--lime:hover  { background: var(--lime); }
  .block--sky:hover   { background: var(--sky); }
  .block--gold:hover  { background: var(--gold); }
  .block--pink:hover  { background: var(--pink); }
  .block--cream:hover { background: var(--cream); }

  /* --- 2. la palette TOURNE par position ---------------------------------- */

  /* Une rangée dont tous les blocs prennent la MÊME couleur se lit comme un
     aplat. En tournant, chaque survol révèle une palette — et le repos sobre. */
  .steps > .step:nth-child(1):hover { background: var(--lime); }
  .steps > .step:nth-child(2):hover { background: var(--sky); }
  .steps > .step:nth-child(3):hover { background: var(--gold); }
  .steps > .step:nth-child(4):hover { background: var(--pink); }

  /* ⛔ 17/10/2026 — LA MÉTHODE DES QUATRE PAGES DU PARCOURS. Elle n'avait AUCUNE
     règle de survol : ses étapes n'étaient même pas des cartes (la grille de base
     manquait, tout le bloc mourait dans l'accolade non fermée). Elle reçoit ici le
     même traitement que `.step` sur l'accueil — un seul design pour le même objet.
     Les couleurs suivent le SENS des étapes (loi du skill §1.b), pas leur rang :
     sky = data (le crawl) · gold = en cours (le plan) · lime = succès (appliqué) ·
     pink = mise en avant (la mesure). Elles sont déjà posées au repos sur la
     pastille du numéro, via `--teinte-etape`. */
  .methode__etape:nth-child(1):hover { background: var(--sky); }
  .methode__etape:nth-child(2):hover { background: var(--gold); }
  .methode__etape:nth-child(3):hover { background: var(--lime); }
  .methode__etape:nth-child(4):hover { background: var(--pink); }

  /* ⛔⛔ LE TEXTE SECONDAIRE PASSE À L'ENCRE SUR LE PASTEL — SINON ÉCHEC AA.
     Mesuré : `--ink-muted` (#57534A) sur `--pink` (#FE90E8) donne **3,78:1**.
     Le corps de texte exige 4,5:1 : c'est un ÉCHEC, et il ne concerne pas que la
     quatrième étape — il touchait DÉJÀ l'accueil, dont le `.step__d` est en
     `--ink-muted` et dont la quatrième étape prend le rose au survol.
     `--ink` (#000) sur les quatre pastels : 10,37 à 17,98 — AA largement. */
  .steps > .step:hover .step__d,
  .methode__etape:hover .methode__d,
  .steps > .step:hover .step__t,
  .methode__etape:hover .methode__t { color: var(--ink); }

  .team > .person:nth-child(1):hover { background: var(--lime); }
  .team > .person:nth-child(2):hover { background: var(--sky); }
  .team > .person:nth-child(3):hover { background: var(--gold); }

  /* ⛔ RÉTABLI LE 16/10/2026 — le Boss : « avant, quand on passait avec la souris
     il y avait une couleur qui apparaissait, issue de la palette ».
     Ces règles avaient été RETIRÉES le 23/09 parce que les CINQ cartes portaient
     alors un FOND pastel : la couleur du survol changeait le statut d'une carte
     (L2 verte devenait jaune au survol) — c'était juste, à l'époque.
     ⛔ Depuis le 15/10, les cinq cartes sont sur `--surface` (fond unique, la
     couleur est passée en PASTILLE — loi digitale-ia-design-system §4bis.a). La
     raison du retrait N'EXISTE DONC PLUS : au repos une carte est blanche, et le
     survol ne change plus aucun statut — il RÉVÈLE une couleur qui n'était pas là.
     C'est exactement la demande d'origine du 22/09, mot pour mot.
     L'ordre des cartes suit le CRESCENDO des prix (Suivi 99 → Audit 250 →
     Correction 1 000 → Direction), donc l'ordre des teintes suit les positions. */
  .plans--5 .plan:nth-child(1):hover { background: var(--cream); }   /* Gratuit   */
  .plans--5 .plan:nth-child(2):hover { background: var(--sky);   }   /* Suivi     */
  .plans--5 .plan:nth-child(3):hover { background: var(--lime);  }   /* Audit     */
  .plans--5 .plan:nth-child(4):hover { background: var(--gold);  }   /* Correction*/
  .plans--5 .plan:nth-child(5):hover { background: var(--pink);  }   /* Direction */

  /* dans `.report`, l'enfant 1 est le titre : les deux rapports sont 2 et 3 */
  .report > .page:nth-child(2):hover { background: var(--lime); }
  .report > .page:nth-child(3):hover { background: var(--sky); }

  /* les cinq familles de services sont les ARTICLE directs de `.wrap` */
  .fam:nth-of-type(1):hover { background: var(--lime); }
  .fam:nth-of-type(2):hover { background: var(--sky); }
  .fam:nth-of-type(3):hover { background: var(--gold); }
  .fam:nth-of-type(4):hover { background: var(--pink); }
  .fam:nth-of-type(5):hover { background: var(--cream); }

  /* L'ombre dure GRANDIT au survol — c'est la signature du style — et elle reste
     NOIRE : une ombre coloriée virerait au décor. `.step` n'en avait aucune. */
  .metric:hover, .fam:hover, .plan:hover, .person:hover, .page:hover, .step:hover {
    box-shadow: var(--shadow-lg);
  }

  /* --- 3. les boutons ----------------------------------------------------- */

  /* Le PRIMAIRE est lime au repos : c'est la couleur de l'action. Au survol il
     prend l'or — un autre pastel de la même palette, aussi lumineux, donc le
     repérage tient. L'ombre reste noire et le bouton s'enfonce (effet existant). */
  .btn:hover { background: var(--gold); box-shadow: var(--shadow-sm); }

  /* Le fantôme allait de `--surface` à `--cream` : deux crèmes qui se ressemblent,
     donc aucune couleur n'arrivait. Il prend le ciel, franchement plus coloré.
     ⚠️ Cette règle doit rester APRÈS `.btn:hover` : même spécificité (0,2,0). */
  .btn--ghost:hover { background: var(--sky); }

  /* Les liens du pied de page : une pastille se pose sous le mot. */
  .footer a:hover { background: var(--sky); color: var(--ink); }
}

/* --- 4. TACTILE : AUCUN ÉTAT COLLÉ ---------------------------------------- */
/* Les règles `:hover` du <style> de la PAGE ne sont pas gardées — il y en a 21,
   relevées par l'inventaire du 22/09. Au tap, iOS applique `:hover` et le GARDE
   jusqu'au tap suivant : `.btn--ghost` prenait donc du cream ET LE GARDAIT, les
   cartes gardaient ombre et décalage, le lien de nav sa couleur. C'est un ÉCHEC
   MESURÉ par la vérification tactile du 22/09 — la première garde ne couvrait
   que `survol.css`, donc le défaut restait entier sur le chemin qu'elle ne
   couvrait pas.
   Comme cette feuille vient APRÈS le <style> de la page, on remet ici l'état de
   repos, à spécificité égale ou supérieure.
   ⛔ SEULE EXCEPTION DÉLIBÉRÉE : `.ticker:hover .ticker__row` (mise en pause du
   bandeau). Mettre un bandeau en pause en le touchant est un SERVICE, pas un
   défaut d'affichage — on ne le neutralise pas. */
@media (hover: none) {

  .btn--ghost:hover { background: var(--surface); }
  .btn:hover { transform: none; box-shadow: var(--shadow); }
  .btn:hover .btn__arrow { transform: none; }

  .metric:hover, .person:hover, .fam:hover, .plan:hover,
  .step:hover, .methode__etape:hover { transform: none; box-shadow: var(--shadow); }

  /* ⛔ SUR UN ÉCRAN TACTILE, LA COULEUR NE DOIT PAS RESTER COLLÉE. iOS applique
     `:hover` au tap et le GARDE jusqu'au tap suivant : sans cette remise à zéro,
     une étape de la méthode resterait pastel après un simple tap, et le visiteur
     croirait à un état. C'est le défaut mesuré du 22/09, sur le chemin que la
     première garde ne couvrait pas — on double donc la garde ici, nommément. */
  .methode__etape:nth-child(1):hover,
  .methode__etape:nth-child(2):hover,
  .methode__etape:nth-child(3):hover,
  .methode__etape:nth-child(4):hover { background: var(--paper); }
  .methode__etape:hover .methode__d { color: var(--ink-muted); }

  .page:hover { box-shadow: var(--shadow-sm); }

  /* Le lien ACTIF est ré-affirmé après la remise à zéro : sans cela il perdrait
     son soulignement vert au premier tap. Sa couleur de repos est plus
     spécifique que `.nav__link:hover`, on la repose donc explicitement. */
  .nav__link:hover { color: var(--ink-muted); border-bottom-color: transparent; }
  .nav__link--active,
  .nav__link--active:hover { color: var(--ink); border-bottom-color: var(--lime); }

  .footer a:hover { color: var(--ink-muted); }
  .spot:hover::after { opacity: 0; }   /* le repos de `.spot::after` est opacity:0 */
}

/* --- 5. mouvement réduit : la couleur reste, le mouvement s'arrête --------- */
@media (prefers-reduced-motion: reduce) {
  .metric, .fam, .plan, .person, .step, .page,
  .btn, .btn--ghost, .footer a { transition: none; }
}