/* ==========================================================================
   Page d'accueil — blocs propres à l'accueil (chargée uniquement si is_front_page).
   Le reste vient de main.css. Mêmes variables, même langage visuel.
   ========================================================================== */

/* --- rythme vertical resserré, accueil uniquement -------------------------
   main.css met .section { padding: 5rem 0 }, soit 160 px entre deux blocs.
   On supprime le haut des sections qui en suivent une autre et on descend le
   bas à 3,5rem : 56 px entre les sections.                                   */
.home .section{ padding-bottom:3.5rem }
.home .section + .section,
.home .section + .section--tight,
.home .section--tight + .section{ padding-top:0 }
.home .section--tight{ padding-bottom:3.5rem }
.home .trust + .section{ padding-top:3.5rem }

.acc-lead{ margin:8px 0 0; color:var(--muted); max-width:52ch; font-size:.98rem }

/* --- hero en photo pleine largeur ------------------------------------------
   La photo porte son sujet à DROITE (raquettes + balles) et laisse le court
   vide à gauche : le dégradé part donc de la gauche pour que le texte blanc
   reste lisible sans masquer le produit.
   ⚠️ L'URL de l'image est posée en style inline sur la section (get_theme_file_uri),
   pas ici : le chemin dépend de l'installation.                               */
.hero--photo{
  background-color:var(--teal-deep);
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}
.hero--photo .hero__holes{ display:none }          /* le motif ferait du bruit sur une photo */
.hero--photo .hero__grid{ grid-template-columns:1.05fr .95fr; padding:5.5rem 0 5rem }
.hero--photo .hero__art{ min-height:340px }        /* colonne vide : la photo l'occupe */

@media (max-width:860px){
  .hero--photo{ background-position:72% center }
  .hero--photo::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,58,51,.90) 0%, rgba(11,58,51,.80) 55%, rgba(11,58,51,.93) 100%);
  }
  .hero--photo .hero__grid{ position:relative; z-index:1 }
  .hero--photo .hero__art{ display:none }

  /* Le texte prend toute la largeur.
     Masquer .hero__art ne suffit pas : la piste de la 2e colonne reste
     reservee par grid-template-columns, et le texte n'occupait donc que
     la moitie gauche. On repasse explicitement sur une seule colonne.
     Le max-width:30ch de .hero p.lead (main.css) est lui aussi leve :
     il bridait le paragraphe a une trentaine de caracteres. */
  .hero--photo .hero__grid{ grid-template-columns:1fr; gap:0 }
  .hero--photo p.lead{ max-width:none }
  .hero--photo .hero__cta .btn{ flex:1 1 auto; justify-content:center }
  /* Les deux chiffres restent cote a cote, chacun sur une moitie : sans
     min-width:0 le libelle mono ne peut pas s'enrouler et debordait de
     l'ecran. */
  .hero--photo .hero__stats{ flex-wrap:wrap; gap:1.2rem }
  .hero--photo .hero__stat{ flex:1 1 calc(50% - 1.2rem); min-width:0 }

  /* Marge laterale : la regle padding:5.5rem 0 5rem ci-dessus ecrase celle de
     .wrap (meme specificite, feuille chargee plus tard), et le texte venait
     donc coller au bord de l'ecran alors que toutes les autres sections ont
     18px. On la retablit ici. */
  .hero--photo .hero__grid{ padding:3.2rem 18px 3rem }
}

/* --- réassurance : 2 colonnes sur mobile -----------------------------------
   main.css fait tomber .trust__grid a 1 colonne sous 540px, ce qui etire la
   bande sur quatre lignes et repousse le contenu vers le bas. On la garde en
   2x2, et on resserre icone et texte pour que ca respire dans une demi-largeur
   de telephone.                                                              */
@media (max-width:540px){
  .home .trust__grid{ grid-template-columns:repeat(2,1fr); gap:1rem .9rem }
  .home .trust__item{ align-items:flex-start; gap:.55rem }
  .home .trust__item .ic{ width:32px; height:32px; font-size:1rem; border-radius:9px }
  /* La hauteur de ligne se pose sur le conteneur, pas sur le span : un span
     inline herite du « strut » de son bloc parent (16px x 1.6 = 25.6px), et
     les descriptions sur deux lignes paraissaient donc tres aerees meme avec
     un line-height reduit sur le span lui-meme. */
  .home .trust__item > div{ line-height:1.3 }
  .home .trust__item b{ font-size:.84rem }
  .home .trust__item span{ font-size:.72rem }
}

/* --- le quizz posé directement dans la page -------------------------------- */
.acc-quiz{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,40px); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:22px;
}
.acc-quiz__head h2{ margin:.3rem 0 .5rem; font-size:clamp(1.5rem,3vw,2.1rem) }
.acc-quiz__head p{ margin:0; color:var(--muted); max-width:60ch }
.acc-quiz__opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px }
.acc-opt{
  text-align:left; text-decoration:none; color:inherit;
  background:var(--paper); border:2px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; display:flex; flex-direction:column; gap:4px;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.acc-opt b{ font-family:var(--font-display); font-size:1.08rem }
.acc-opt span{ color:var(--muted); font-size:.9rem }
.acc-opt:hover{ border-color:var(--teal); transform:translateY(-2px); background:var(--white) }
.acc-opt:focus-visible{ outline:3px solid var(--teal); outline-offset:2px }
.acc-quiz__foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.acc-quiz__prog{ flex:1; min-width:140px; height:6px; border-radius:999px; background:var(--mint); overflow:hidden }
.acc-quiz__prog i{ display:block; height:100%; width:20%; background:var(--teal); border-radius:999px }

/* --- trois portes par niveau ------------------------------------------------ */
.acc-doors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px }
.acc-door{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 24px 22px; transition:transform .18s ease, box-shadow .18s ease;
}
.acc-door:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.acc-door__n{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.acc-door h3{ margin:0; font-size:1.35rem }
.acc-door p{ margin:0; color:var(--muted); font-size:.95rem; flex:1 }
.acc-door__p{
  align-self:flex-start; margin-top:6px; background:var(--optic); color:var(--ink);
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  padding:6px 14px; border-radius:999px;
}

/* --- bande de kits ---------------------------------------------------------- */
.acc-kits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
.acc-kit{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.acc-kit:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.acc-kit__img{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--mint) }
.acc-kit__img img{ width:100%; height:100%; object-fit:cover; display:block }
.acc-kit__b{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:5px }
.acc-kit__b b{ font-family:var(--font-display); font-size:1.02rem }
.acc-kit__b small{ color:var(--muted); font-size:.82rem; line-height:1.4 }
.acc-kit__p{ margin-top:4px; font-family:var(--font-display); font-weight:800; color:var(--teal); font-size:1.05rem }

/* --- guides illustrés -------------------------------------------------------- */
.acc-guides{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px }
.acc-guide{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.acc-guide:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.acc-guide:hover .acc-guide__img img{ transform:scale(1.04) }
.acc-guide__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--mint) }
.acc-guide__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease }
.acc-guide__b{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1 }
.acc-guide__b b{ font-family:var(--font-display); font-size:1.06rem; line-height:1.25 }
.acc-guide__b small{ color:var(--muted); font-size:.9rem; line-height:1.5; flex:1 }
.acc-guide__go{ font-family:var(--font-display); font-weight:800; color:var(--teal); font-size:.9rem; margin-top:4px }