/* Héros en deux colonnes — pages secondaires (24/09/2026).
   Retour de Kylian : « trop de blanc », une colonne de texte et la moitié
   droite vide. À partir de 900 px : texte à gauche, visuel à droite, même
   hauteur visuelle. En dessous : le visuel passe SOUS les boutons, hauteur
   limitée (220 à 260 px), recadré en object-fit: cover.
   Coins du kit, aucune ombre, aucun filet latéral. */

.hero2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.hero2__text { min-width: 0; }
.hero2 .page-head,
.hero2 .article__head { max-width: none; margin: 0; padding-bottom: 0; }

.hero2__media {
  position: relative;
  margin: 0;
  height: clamp(220px, 62vw, 260px);
  overflow: clip;
  border-radius: var(--r-card, 20px);
  background: #F4F6F8;
}
.hero2__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-m, 50% 50%);
}
/* Couvertures du blog : fond teal clair pendant le chargement, comme les cartes. */
.hero2__media--cover { background: #6CEBD9; }

@media (min-width: 900px) {
  .hero2 {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: stretch;
  }
  .hero2__text { align-self: center; }
  .hero2__media {
    height: auto;
    min-height: 380px;
    max-height: 540px;
    border-radius: var(--r-card, 24px);
  }
  .hero2__media img {
    position: absolute;
    inset: 0;
    object-position: var(--pos-d, 50% 50%);
  }
  /* Articles : le héros prend le conteneur, la lecture reste à 720 px. */
  .hero2--article { padding-bottom: 8px; }
}

/* Entrée douce du visuel (sans JavaScript) ; rien sous reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero2__media img,
  .hero2__devices,
  .hero2__side > * { animation: hero2-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero2__side > :nth-child(2) { animation-delay: .12s; }
  .hero2__side > :nth-child(3) { animation-delay: .24s; }
}
@keyframes hero2-in {
  from { opacity: 0; transform: translateY(14px) scale(1.015); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------ Appareils (vraies captures) */
.hero2__devices {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding-bottom: 10px;
}
.hero2__devices .dv--laptop { --dv-w: 100%; width: 88%; margin: 0; }
.hero2__devices .dv--phone {
  --dv-w: 23%;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}
/* Écran qui alterne entre deux vraies captures (fondu lent). */
.hero2-swap { position: relative; height: 100%; }
.hero2-swap img + img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero2-swap img + img { animation: hero2-swap 9s ease-in-out 1.5s infinite; }
}
@keyframes hero2-swap {
  0%, 38% { opacity: 0; }
  46%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* Téléphone seul + icône d'écran d'accueil (/comment-installer). */
.hero2__devices--install {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  max-width: 520px;
  padding: 24px 0 14px;
  border-radius: var(--r-card, 24px);
  background: var(--accent-soft, #E7F4F3);
}
.hero2__devices--install .dv--phone { --dv-w: 210px; position: relative; margin: 0; }
.home-icon {
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.home-icon__tile {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .18);
}
.home-icon__tile img { width: 52px; height: 52px; }
.home-icon__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .home-icon__tile { animation: home-icon-pop 4.8s cubic-bezier(.3, .7, .2, 1) 1s infinite; }
}
@keyframes home-icon-pop {
  0%, 12% { transform: scale(.6); opacity: 0; }
  24%, 86% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 899px) {
  .hero2__devices { max-width: 420px; }
  .hero2__devices--install { height: 260px; padding: 16px 0; gap: 28px; }
  .hero2__devices--install .dv--phone { --dv-w: 110px; }
  .home-icon__tile { width: 64px; height: 64px; border-radius: 17px; }
  .home-icon__tile img { width: 40px; height: 40px; }
}

/* ------------------------------------------ Colonne de cartes (FAQ, bug) */
.hero2__side {
  display: grid;
  gap: 14px;
  align-self: center;
}
.fact-card {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--accent-soft, #E7F4F3);
}
.fact-card__k {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.fact-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fact-list li { display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--text); }
.fact-list b {
  flex: 0 0 auto;
  min-width: 74px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ask-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow .2s ease;
}
.ask-card:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.ask-card .ph { font-size: 24px; color: var(--accent); }
.ask-card span { display: grid; gap: 2px; font-size: 15px; color: var(--muted); }
.ask-card strong { font-size: 16px; color: var(--ink); }

/* Trois étapes en icônes (signaler un bug). */
.bug-steps { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: none; }
.bug-steps li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--text); }
.bug-steps .ph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-soft, #E7F4F3);
  color: var(--accent);
  font-size: 22px;
}
.bug-steps strong { display: block; color: var(--ink); font-size: 16px; }
.bug-page.hero2 { max-width: var(--container, 1200px); }
.bug-steps span { display: grid; gap: 2px; font-size: 15px; color: var(--muted); }
@media (max-width: 899px) { .bug-steps { margin-top: 20px; } }
@media (min-width: 900px) {
  .bug-page.hero2 { align-items: start; }
  .bug-page.hero2 .hero2__text { align-self: start; position: sticky; top: 96px; }
}

/* Retouches après captures (24/09/2026) : air sous le héros quand la section
   suivante n'a pas de marge haute, boutons d'installation détachés du chapô,
   scène teintée à 9 % derrière les appareils (même hauteur que le texte). */
.page-head-section .hero2 { padding-bottom: 28px; }
.hero2 .install-actions { margin-top: 24px; }
.hero2__stage {
  display: grid;
  place-items: center;
  padding: 22px 18px 16px;
  border-radius: var(--r-card, 24px);
  background: var(--accent-soft, #E7F4F3);
}
@media (min-width: 900px) {
  .page-head-section .hero2 { padding-bottom: 48px; }
  .hero2__stage { align-self: center; min-height: 400px; padding: 36px 28px 28px; }
  .hero2__stage .hero2__devices { max-width: none; }
}

/* FAQ de l'accueil et des tarifs en deux colonnes (≥ 900 px) : titre et carte
   à gauche (5/12), accordéon à droite (7/12). */
.faq-split__aside .ask-card { margin-top: 20px; max-width: 420px; }
.faq-split .faq { margin-top: 24px; }
.ask-card--static:hover { box-shadow: inset 0 0 0 1px var(--line); }
.section--soft .ask-card { box-shadow: none; }
@media (min-width: 900px) {
  .faq-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .faq-split__aside { position: sticky; top: 96px; }
  .faq-split .section-head { margin: 0; max-width: none; text-align: left; }
  .faq-split .faq { margin-top: 0; max-width: none; margin-inline: 0; }
}

/* ------------------------------------------------------------------------
   Corrections après contrôle indépendant (24/09/2026)
   ------------------------------------------------------------------------ */

/* Héros ≥ 900 px : le cadre garde le format de l'image au lieu de s'étirer
   sur la hauteur du texte (le CV et la main de la reconversion restaient
   hors cadre). Chaque page peut régler son format avec --ar. */
@media (min-width: 900px) {
  .hero2__media {
    align-self: center;
    aspect-ratio: var(--ar, 4 / 3);
    min-height: 0;
    max-height: none;
  }
  .hero2__media--cover { --ar: 16 / 10; }
}
/* Tablette (600 à 899 px) : plus de bande 2,8:1 qui rogne les images. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero2__media { height: auto; aspect-ratio: 16 / 9; max-height: 420px; }
}

/* /fonctionnalites sur téléphone : l'écran d'ordinateur devenait illisible
   à 322 px. Sous 600 px, seul le téléphone reste, à 200 px de large. */
@media (max-width: 599px) {
  .hero2__devices .dv--laptop { display: none; }
  .hero2__devices .dv--phone:not(.hero2__devices--install .dv--phone) {
    --dv-w: 200px;
    position: relative;
    right: auto;
    bottom: auto;
    margin-inline: auto;
  }
  .hero2__stage { padding: 20px 16px 14px; }
}

/* Bande « Sept outils » (accueil et tarifs) ≥ 900 px : titre à gauche (4/12),
   les sept outils en cartes 4 + 3 à droite (8/12), plus de moitié vide. */
@media (min-width: 900px) {
  #outils > .container {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  #outils .section-head { margin: 0; max-width: none; }
  #outils .tools {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
    margin: 0;
  }
  #outils .tools a {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
  }
  #outils .tools a:nth-child(5) { grid-column: 2 / span 2; }
  #outils .tools .tools__dot { flex: 0 0 auto; width: 10px; height: 10px; opacity: .8; }
}

/* Accueil « Fini les marges à la main » : les deux panneaux prennent tout le
   conteneur (2 × 1fr) avec des aperçus plus grands. */
@media (min-width: 900px) {
  #comparatif .duo { max-width: none; gap: 24px; }
  #comparatif .duo__page { width: min(100%, 360px); }
}

/* Page /faq : navigation par thème collante à gauche (4/12), questions
   regroupées sous des intertitres à droite (8/12). */
.faq-page { display: grid; gap: 24px; }
.faq-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.faq-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-soft, #E7F4F3);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.faq-nav__list a:hover { color: var(--accent); }
.faq-nav__list .ph { font-size: 18px; color: var(--accent); }
.faq-nav__count { font-size: 13px; font-weight: 600; color: var(--muted); }
.faq-nav__list a > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group__title { margin: 0 0 12px; scroll-margin-top: 96px; }
.faq-page .faq--page { max-width: none; }
@media (min-width: 900px) {
  .faq-page {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .faq-nav { position: sticky; top: 96px; }
  .faq-nav__list { display: grid; gap: 6px; }
  .faq-nav__list a {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 14px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .faq-nav__list a:hover { box-shadow: inset 0 0 0 1px var(--accent); }
  .faq-nav__list a > span { display: inline-flex; align-items: center; gap: 10px; }
}

/* Cibles tactiles ≥ 24 px : fil d'Ariane (22 px de haut). */
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }