/* ══════════════════════════════════════════════════════════════
   PIX — partials.css
   Styles qui étaient auparavant injectés en JS par les composants
   React de shared.js / home-v1.js, et qui n'ont donc pas d'équivalent
   dans tokens.css.

   À charger APRÈS tokens.css :
     <link rel="stylesheet" href="tokens.css" />
     <link rel="stylesheet" href="_static-partials/partials.css" />

   Ne rien mettre ici qui existe déjà dans tokens.css — tokens.css
   reste la source de vérité des couleurs, du responsive et des
   composants (.btn, .chip, .pix-nav, .motif…).
   ══════════════════════════════════════════════════════════════ */

/* ── Nav : lien de la page courante ──────────────────────────────
   Remplaçait, dans <Nav active="…" />, un style inline conditionnel.
   Usage : <a href="/particuliers.html" class="is-active">Particuliers</a> */
.pix-nav ul a.is-active {
  color: var(--pix-green-deep);
  background: var(--pix-pop);
  font-weight: 800;
}
.pix-nav ul a.is-active:hover {
  color: var(--pix-green-deep);
  background: var(--pix-pop);
}

/* ── Footer : survol des liens de colonnes ───────────────────────
   Remplaçait les handlers onMouseOver / onMouseOut de <FooterCol />. */
.pix .pix-footer-col ul a {
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.pix .pix-footer-col ul a:hover {
  border-bottom-color: currentColor;
}

/* ── Héro : titre H1 ─────────────────────────────────────────────
   Le héro était un <h2> côté React (le <h1> était masqué hors écran).
   Il est devenu le <h1> visible de la page. Cette règle conserve
   exactement la taille mobile qu'il avait en tant que <h2>
   (tokens.css applique sinon la règle .pix h1, plus grosse). */
@media (max-width: 768px) {
  .pix h1.hero-title {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.05 !important;
  }
}

/* ── Héro : colonne visuelle (mascotte + badges) ──────────────────
   React la retirait complètement du DOM sous 768px (`!isMobile &&`).
   En statique, elle est dans le HTML et masquée en CSS. */
@media (max-width: 768px) {
  .pix .hero-visual { display: none !important; }
}

/* ── Timeline (comment-ca-marche) : filet vertical ────────────────
   React ne rendait la ligne que sur desktop (`!isMobile && …`).
   En statique elle est dans le HTML, on la masque en CSS. */
@media (max-width: 768px) {
  .pix .timeline-line { display: none !important; }
}

/* ── Bandeau vert « specs » (comment-ca-marche) ───────────────────
   React passait margin '8px 12px' sous 768px ; les sélecteurs
   d'attribut de tokens.css visent la syntaxe React (`margin: '20px 20px'`)
   et ne matchent pas le style inline CSS d'une page statique. */
@media (max-width: 768px) {
  .pix .specs-band { margin: 8px 12px !important; }
}

/* ── Blocs internes « bandeau » (encadré vert, bloc CTA) ──────────
   Même cause que .specs-band ci-dessus : React réduisait leur padding
   sous 768px, et les sélecteurs d'attribut de tokens.css
   (`[style*="padding: 60px"]`, avec l'espace de la syntaxe React) ne
   matchent pas le style inline CSS d'une page statique — le bloc garde
   sinon ses 60px de padding sur un écran de 375px.
   Usage : class="band-pad" sur le bloc coloré interne. */
@media (max-width: 768px) {
  .pix .band-pad { padding: 36px 24px !important; }
}

/* ── CTA du héro centrés sur mobile (demande Maxime 17/08) ──────── */
@media (max-width: 768px) {
  .pix .hero-cta { justify-content: center; text-align: center; }
}

/* ── FAQ : accordéons <details> natifs ───────────────────────────
   Remplacent les accordéons React. Le triangle par défaut est retiré
   (l'inline `list-style:none` du <summary> ne suffit pas sur Safari). */
.pix details.faq-item > summary::-webkit-details-marker { display: none; }
.pix details.faq-item > summary::marker { content: ''; }

/* ── Galerie d'accueil ───────────────────────────────────────────
   Les tuiles font height:100% : sans hauteur de ligne explicite,
   la grille s'effondre. tokens.css force 1 colonne sous 768px et
   annule donc les lignes de 200px du desktop. */
.pix .gallery-grid { grid-auto-rows: 200px; }

/* ── Galerie « duo » (particuliers) ──────────────────────────────
   React affichait 2 colonnes sur mobile (`repeat(2, 1fr)`) et masquait
   la 3e photo (.gallery-extra). tokens.css force toutes les grilles de
   .pix en 1 colonne sous 768px ; sans ça les tuiles en aspect-ratio 3/4
   font 450 px de haut chacune.
   ⚠️ Le sélecteur doit être PLUS spécifique que la règle générique de
   tokens.css `.pix [style*="grid-template-columns"]:not(.pix-calendar):not(.pix-calendar *)`
   (0,4,0) — d'où les deux :not() repris ici. Ne pas le simplifier. */
@media (max-width: 768px) {
  .pix .gallery-duo[style*="grid-template-columns"]:not(.pix-calendar):not(.pix-calendar *) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 768px) {
  .pix .gallery-grid {
    grid-template-rows: none !important;
    grid-auto-rows: 190px !important;
  }
  .pix .gallery-grid > .gallery-tall { grid-row: auto !important; }
  /* React n'affichait que 4 photos sur mobile. */
  .pix .gallery-extra { display: none !important; }
}