/* Accueil refondu (mission 20261016-refonte-relecture, point B) : onglets de la sélection, questionnaire d'aide au choix, cartes d'outils
   avec image. Chargé par src/pages/index.astro seulement. Variables du site uniquement (jetons), aucune valeur en dur ; points de rupture
   de design/tokens.json. Sans JavaScript, rien n'est caché : panneaux empilés, formulaire masqué (attribut hidden) et liens visibles. */

/* ---------- Sélection : onglets par appareil ---------- */
.onglets { display: grid; gap: var(--s-32); }
.onglets-ancres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.onglets-ancres a, .onglet {
  display: inline-flex; align-items: center; min-height: var(--layout-touch-control-min-height); padding: var(--s-8) var(--s-16);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--c-white); color: var(--ink);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-emphasis); cursor: pointer; text-decoration: none;
}
.onglets-liste { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.onglet[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--c-white); }
.onglet:focus-visible, .onglets-ancres a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.onglet-panneau { display: grid; gap: var(--s-20); }
.onglet-panneau[hidden] { display: none; }
.onglet-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.onglet-entete h3 { margin: 0; }
html.js .onglets-ancres { display: none; }

/* ---------- Outils : image et appareils couverts ---------- */
.outil-appareils { font-size: var(--fs-14); color: var(--muted); }
.image-label-seul { position: static; display: inline-block; margin-bottom: var(--s-8); }
.guide-card .guide-image img[data-image-outil] { object-fit: cover; }

/* ---------- Image d'ouverture ---------- */
.hero-visual > img { object-fit: cover; }

/* ---------- Questionnaire d'aide au choix ---------- */
.aide-form { display: grid; gap: var(--s-20); }
.aide-form[hidden], .aide-questions[hidden], .aide-resultat[hidden] { display: none; }
.aide-q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-8); }
.aide-q legend { padding: 0; font-size: var(--fs-15); font-weight: var(--fw-emphasis); color: var(--ink); display: flex; gap: var(--s-8); align-items: baseline; }
.aide-num {
  flex: none; display: inline-grid; place-items: center; width: var(--s-24); height: var(--s-24); border-radius: var(--r-circle);
  background: var(--c-sage); color: var(--ink); font-size: var(--fs-13); font-weight: var(--fw-emphasis);
}
.aide-q-aide { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.aide-questions { display: grid; gap: var(--s-20); }
.aide-choix { display: grid; gap: var(--s-8); }
.chooser .aide-choix-item {
  display: flex; align-items: center; gap: var(--s-10); margin: 0; min-height: var(--layout-touch-control-min-height); padding: var(--s-8) var(--s-12);
  border: 1px solid var(--line); border-radius: var(--r-12); background: var(--c-white); font-size: var(--fs-14); font-weight: var(--fw-body); cursor: pointer;
}
.aide-choix-item:has(input:checked) { border-color: var(--green); background: var(--c-sage); }
.aide-choix-item:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
/* La case couvre toute la carte (zone tactile = la carte, >= 44 px) ; le rond est dessiné sur le libellé. */
.chooser .aide-choix-item { position: relative; }
.aide-choix-item input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: var(--r-12); cursor: pointer; }
.aide-choix-item span::before { content: ""; display: inline-block; vertical-align: -3px; width: var(--s-18); height: var(--s-18); margin-right: var(--s-10); border: 2px solid var(--green); border-radius: 50%; background: var(--c-white); box-sizing: border-box; }
.aide-choix-item:has(input:checked) span::before { background: radial-gradient(var(--green) 0 45%, var(--c-white) 50%); }
.aide-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.chooser .aide-actions .button { width: auto; margin-top: 0; }
.aide-resultat { margin-top: var(--s-24); }
.aide-modeles { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.aide-modeles a { display: inline-flex; align-items: center; min-height: var(--layout-touch-control-min-height); color: var(--green); text-decoration: underline; }
.aide-proche { margin-top: var(--s-12); }
.aide-sans-js { font-size: var(--fs-13); color: var(--muted); margin: var(--s-20) 0 0; }
html.js .aide-sans-js { display: none; }
.chooser h3 { max-width: none; }

/* Trois cartes par onglet : grand écran seulement, mobile inchangé */
.onglets, .onglet-panneau { min-width: 0; }
@media (min-width: 961px) { .onglet-panneau .product-grid { grid-template-columns: repeat(3, 1fr); } }
.chooser .aide-actions .button-secondary { background: var(--c-white); color: var(--green); border: 1px solid var(--green); }