/*
 * Hero « app » de la home (16/10/2026).
 * Reprend l'écran « Choisis ta préparation » de l'app (CatalogueScreen, CountryPills, EntryMark).
 * Chargé UNIQUEMENT sur template-home.php (cf. ea-refonte.php) et scopé à .hero.hero-app :
 * /tests/ et les landings partagent ea_section_hero() mais n'ont pas la classe.
 * Inter 800 est déjà chargée sur la page (feuille Google Fonts du header).
 */

/* Titre : Inter 800, bleu marine de l'app (primary-800 v3). Taille d'origine conservée. */
#ea-refonte .hero.hero-app h1{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:#13254C}
/* Mot mis en valeur = EntryMark (bg-primary-300, text-primary-900, -rotate-2, rounded-lg, px-2 py-0.5 à 36px → proportionné en em). */
#ea-refonte .hero.hero-app h1 .ea-mark{display:inline-block;transform:rotate(-2deg);border-radius:clamp(8px,.2em,12px);background:#9DB8E8;color:#0C1730;padding:.055em .22em;white-space:nowrap}

/* Sous-titre = lead de l'app (neutral-600, Inter regular). */
#ea-refonte .hero.hero-app .lead{font-family:'Inter',system-ui,sans-serif;font-weight:400;color:#525252}

/* Barre de recherche : rectangle aux coins doux (rounded-lg), loupe à 16px du bord, champ décalé de 48px. */
#ea-refonte .hero.hero-app .searchwrap{max-width:560px}
#ea-refonte .hero.hero-app .search{position:relative;display:block;box-sizing:border-box;height:56px;padding:0;background:#fff;border:1px solid #E5E5E5;border-radius:8px;box-shadow:0 8px 24px -12px rgba(19,37,76,.25);transition:box-shadow .15s}
#ea-refonte .hero.hero-app .search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#737373;pointer-events:none}
#ea-refonte .hero.hero-app .search input{display:block;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 16px 0 48px;border:0;border-radius:8px;background:transparent;font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:24px;color:#0A0A0A}
#ea-refonte .hero.hero-app .search input::placeholder{color:#737373;opacity:1}
/* Focus : anneau bleu clair décalé (ring-2 ring-primary-300 ring-offset-2). */
#ea-refonte .hero.hero-app .search:focus-within{box-shadow:0 0 0 2px #fff,0 0 0 4px #9DB8E8,0 8px 24px -12px rgba(19,37,76,.25)}

/* Raccourcis = pastilles de l'app à l'état non actif (liens, pas d'état actif). */
#ea-refonte .hero.hero-app .qk{gap:8px}
#ea-refonte .hero.hero-app .qk a{display:inline-flex;align-items:center;box-sizing:border-box;height:40px;padding:0 16px;background:#fff;border:1px solid #E5E5E5;border-radius:9999px;color:#404040;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;text-decoration:none;transition:background-color .15s}
#ea-refonte .hero.hero-app .qk a:hover{background:#F5F5F5;border-color:#E5E5E5;color:#404040}
#ea-refonte .hero.hero-app .qk a:focus-visible{outline:2px solid #9DB8E8;outline-offset:2px}

/* Mobile (< sm de l'app, 640px) : barre 48px, pastilles 36px (retour à la ligne centré conservé). */
@media (max-width:639px){
  #ea-refonte .hero.hero-app .search{height:48px}
  #ea-refonte .hero.hero-app .qk a{height:36px}
}