/* MySimul : tout ce qui est cliquable réagit au survol (12/10/2026).
 * Feuille commune à toutes les pages (guides, outils, application). Trois principes :
 *  1. le curseur « main » sur tout ce qui est cliquable ;
 *  2. un effet au survol de la souris, adapté au type d'élément (bouton, carte, lien de texte, onglet, déroulant, case à cocher) ;
 *  3. cet effet n'existe qu'avec une vraie souris (pas de « survol collé » sur téléphone), jamais sur un élément désactivé,
 *     et il disparaît si l'utilisateur a demandé de réduire les animations.
 * Les règles de survol utilisent !important uniquement pour l'ombre (certains boutons de l'application en portent une en ligne). */

/* 1. Curseur « main » */
a[href], button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [role="tab"], [role="radio"], [role="menuitem"], [role="link"],
summary, select:not(:disabled), input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled),
input[type="range"]:not(:disabled), input[type="file"]:not(:disabled), input[type="submit"]:not(:disabled), input[type="button"]:not(:disabled),
[class*="cursor-pointer"], [style*="cursor: pointer"], [style*="cursor:pointer"], [onclick] { cursor: pointer; }
button:disabled, [aria-disabled="true"], input:disabled, select:disabled { cursor: not-allowed; }
/* (règle à part : un navigateur qui ne connaît pas :has() ignorerait toute la liste ci-dessus) */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { cursor: pointer; }

/* 2. Anneau de focus visible au clavier (même repère que le survol, pour qui n'utilise pas la souris) */
a[href]:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, [role="tab"]:focus-visible, [role="radio"]:focus-visible,
[role="button"]:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid #1F4E47; outline-offset: 2px; }

/* 3. Retour tactile au doigt (sans survol) */
@media (hover: none) {
  button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active, [role="tab"]:active, [role="radio"]:active, .btn2:active, a.cta:active, a.cta-btn:active, a.hub-card:active {
    filter: brightness(0.92); }
}

/* 4. Survol à la souris */
@media (hover: hover) and (pointer: fine) {
  /* transitions douces */
  button, [role="button"], [role="tab"], [role="radio"], [role="menuitem"], summary, .btn, .btn2, .cta, .cta-btn, a.hub-card, a.logo, .related a,
  a[class*="rounded"], a[class*="btn"], [class*="cursor-pointer"], [style*="cursor: pointer"], [style*="cursor:pointer"], select, label:has(> input) {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; }

  /* boutons, onglets, pastilles de choix : le bouton se soulève et prend une ombre */
  button:not(:disabled):hover, [role="button"]:not([aria-disabled="true"]):hover, [role="tab"]:hover, [role="radio"]:hover, [role="menuitem"]:hover,
  input[type="submit"]:not(:disabled):hover, input[type="button"]:not(:disabled):hover, .btn:hover, .btn2:hover, a.cta-btn:hover, a[class*="btn"]:hover,
  a[class*="rounded"][class*="px-"]:hover, a[class*="rounded"][style*="background"]:hover, .related a:hover {
    transform: translateY(-1px); box-shadow: inset 0 0 0 999px rgba(128, 128, 128, 0.16), 0 0 0 3px rgba(31, 78, 71, 0.28), 0 5px 14px rgba(31, 78, 71, 0.32) !important; text-decoration: none; }   /* anneau vert de 3 px : visible sur tous les fonds */
  .related a:hover { border-color: #1F4E47; }   /* l'ombre « inset » teinte l'intérieur quel que soit le fond : transparent, clair, foncé ou dégradé */
  button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active, [role="tab"]:active, [role="radio"]:active, .btn2:active {
    transform: translateY(0); box-shadow: inset 0 0 0 999px rgba(128, 128, 128, 0.24), 0 1px 4px rgba(31, 78, 71, 0.25) !important; }

  /* bandeaux d'appel à l'action (liens .cta) et cartes de guides (.hub-card) : plus marqués */
  a.cta:hover, a.hub-card:hover {
    transform: translateY(-2px); box-shadow: inset 0 0 0 999px rgba(128, 128, 128, 0.10), 0 0 0 3px rgba(31, 78, 71, 0.22), 0 8px 22px rgba(31, 78, 71, 0.26) !important; text-decoration: none; }
  a.hub-card:hover { border-color: #1F4E47; }
  a[class*="card"]:not(.hub-card):hover, [class*="cursor-pointer"]:not(button):not(a):hover, [style*="cursor: pointer"]:not(button):not(a):hover, [style*="cursor:pointer"]:not(button):not(a):hover {
    box-shadow: inset 0 0 0 999px rgba(128, 128, 128, 0.08), 0 6px 18px rgba(31, 78, 71, 0.20) !important; }

  /* les pastilles .related a ne se soulignent pas : (la règle des liens de texte ci-dessous est très spécifique, d'où la répétition de [href]) */
  .related a[href][href][href][href][href][href][href][href][href][href][href][href][href]:hover { text-decoration: none !important; }

  /* logo */
  a.logo:hover { opacity: 0.82; text-decoration: none; }

  /* liens de texte : soulignés au survol */
  a[href]:not(.logo):not(.hub-card):not(.cta):not(.cta-btn):not(.btn):not(.btn2):not([class*="btn"]):not([class*="rounded"]):not([class*="card"]):not([class*="leaflet"]):hover {
    text-decoration: underline !important; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background-color: rgba(31, 78, 71, 0.09); border-radius: 3px; }   /* !important : certains liens ont text-decoration:none en style en ligne ; le fond teinté rend le lien plus repérable */

  /* liens déjà soulignés en permanence : trait plus épais et teinte plus foncée au survol */
  a[href].underline:hover, a[href][class*="underline"]:not([class*="hover:no-underline"]):hover { text-decoration-thickness: 2.5px !important; text-underline-offset: 4px; filter: brightness(0.78); }

  /* déroulants (FAQ), listes déroulantes, cases à cocher */
  summary:hover { background-color: rgba(31, 78, 71, 0.07); color: #1F4E47; }
  select:not(:disabled):hover { border-color: #1F4E47; box-shadow: inset 0 0 0 999px rgba(31, 78, 71, 0.07), 0 0 0 4px rgba(31, 78, 71, 0.30); }
  input[type="checkbox"]:not(:disabled):hover, input[type="radio"]:not(:disabled):hover { box-shadow: 0 0 0 3px rgba(31, 78, 71, 0.18); }
  input[type="range"]:not(:disabled):hover { filter: brightness(0.82) saturate(1.5) drop-shadow(0 0 4px rgba(31, 78, 71, 0.6)); }   /* curseurs de réglage */
}
@media (hover: hover) and (pointer: fine) {
  /* liens qui entourent une image (logo, vignettes) : le soulignement n'y changerait rien, on atténue l'image */
  a[href]:has(> img):hover { opacity: 0.82; }
  a[href]:has(> img) { transition: opacity .15s ease; }
  label:has(> input[type="checkbox"]):hover, label:has(> input[type="radio"]):hover { background-color: rgba(31, 78, 71, 0.06); }
}

/* 5. Animations réduites : plus de mouvement, on garde seulement la couleur et l'ombre */
@media (prefers-reduced-motion: reduce) {
  button, [role="button"], [role="tab"], [role="radio"], [role="menuitem"], summary, .btn, .btn2, .cta, .cta-btn, a.hub-card, a.logo,
  a[class*="rounded"], a[class*="btn"], [class*="cursor-pointer"], select { transition: none !important; }
  button:hover, [role="button"]:hover, [role="tab"]:hover, [role="radio"]:hover, .btn:hover, .btn2:hover, a.cta:hover, a.cta-btn:hover, a.hub-card:hover { transform: none !important; }
}