/* ═══════════════════════════════════════════════════════════════
   LANDINGS PRODUIT — feuille commune (/optisolar/, et les suivantes)

   Chargée APRÈS main.css : les blocs @layer ci-dessous S'AJOUTENT
   aux couches déjà déclarées — l'ordre de priorité reste celui
   fixé en tête de main.css. Aucun jeton ici : tout vient de
   jetons.css, les landings héritent du double thème gratuitement.
   ═══════════════════════════════════════════════════════════════ */

@layer composants {

  /* ═══ Fil d'Ariane ═══ */
  .fil-ariane {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--muted);
    padding-block-start: 26px;

    & a { color: var(--muted); text-decoration: none;
          &:hover { color: var(--ink); } }
    & svg { color: var(--muted); flex: none; }
    & [aria-current] { color: var(--ink); font-weight: 700; }
  }

  /* ═══ Héros produit ═══ */
  .produit-hero {
    padding-block: 40px 56px;

    & .produit-grille {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 60px;
      align-items: center;

      @media (width <= 920px) {
        grid-template-columns: 1fr;
        gap: 40px;
        & .heros-visuel { order: -1; }
      }
    }

    & .produit-identite {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-block-end: 18px;

      & img { width: 64px; height: 64px; border-radius: 15px; }
      & h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
    }

    & .produit-accroche {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.6vw, 1.8rem);
      line-height: 1.25;
      text-wrap: balance;
      margin-block-end: 16px;
    }

    & .produit-intro { color: var(--muted); font-size: 1.06rem; max-width: 33rem; }
  }

  /* ═══ Sections de fonctions — rangées alternées ═══
     Chaque .fonction observe SA largeur (container query) et les
     rangées paires inversent l'ordre visuel : le zigzag guide la
     lecture sans une ligne de JavaScript. */
  .fonctions { display: grid; gap: 26px; }

  .fonction-conteneur { container-type: inline-size; }

  .fonction {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
    padding: 38px;

    @container (width <= 720px) { grid-template-columns: 1fr; }
  }

  /* L'inversion porte sur le CONTENEUR pair : ordre DOM stable
     (accessibilité, lecteurs d'écran), ordre visuel alterné. */
  .fonction-conteneur:nth-child(even) .fonction > .fonction-visuel { order: -1; }
  @container (width <= 720px) {
    .fonction-conteneur:nth-child(even) .fonction > .fonction-visuel { order: 0; }
  }

  .fonction h3 { font-size: 1.35rem; margin-block-end: 10px; }
  .fonction p { color: var(--muted); }
  .fonction .option-premium {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 3px 10px;
    margin-block-end: 12px;
  }

  .fonction-visuel {
    justify-self: center;

    & img {
      width: min(280px, 100%);
      border-radius: 16px;
      border: 1px solid var(--line);
    }
  }

  /* ═══ Bloc transparence (infrastructure) ═══ */
  .transparence {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--accent) 6%, var(--card));
    padding: 34px;

    & h3 { font-size: 1.2rem; margin-block-end: 10px; }
    & p { color: var(--muted); max-width: 46rem; }
    & a { color: var(--accent); font-weight: 700; }
  }

  /* ═══ FAQ — accordéon natif <details name="…"> ═══
     Le même attribut name sur chaque <details> rend l'accordéon
     EXCLUSIF (un seul ouvert à la fois) : comportement natif du
     navigateur, zéro JavaScript. */
  .faq {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--card);
    overflow: hidden;

    & details + details { border-block-start: 1px solid var(--line); }

    & summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 20px 26px;
      font-weight: 800;

      &::-webkit-details-marker { display: none; }
      &::after {
        content: "+";
        font-family: var(--font-mono);
        font-size: 1.1rem;
        color: var(--accent);
        transition: rotate 0.2s ease;
      }
      &:hover { color: var(--accent); }
    }

    & details[open] summary::after { rotate: 45deg; }

    & .faq-reponse {
      padding: 0 26px 22px;
      color: var(--muted);
      max-width: 52rem;
    }
  }

  /* ═══ Appel final ═══ */
  .cta-final {
    text-align: center;
    padding: 48px 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);

    & .note-etoiles { justify-content: center; }
    & p { color: var(--muted); max-width: 34rem; margin-inline: auto; }
    & .carte-actions { justify-content: center; margin-block-start: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
  }
}