/* ═══════════════════════════════════════════════════════════════
   FEUILLE PRINCIPALE — iFredZ v2

   Architecture en @layer : l'ordre de déclaration ci-dessous fixe
   la priorité UNE FOIS POUR TOUTES. Plus aucun combat de
   spécificité : un sélecteur de `composants` bat toujours `base`,
   même s'il est moins spécifique. C'est le contrat de cascade.

   Syntaxe : CSS natif 2026 — imbrication (nesting), container
   queries, :has(), text-wrap — zéro préprocesseur, zéro build.
   ═══════════════════════════════════════════════════════════════ */

@layer reset, base, layout, composants, etats;

/* ─────────────────────────────────────────────────────────────
   RESET — minimal et moderne
   ───────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }

  img, svg { display: block; max-width: 100%; height: auto; }

  ul[class] { list-style: none; padding: 0; }

  button { font: inherit; }
}

/* ─────────────────────────────────────────────────────────────
   BASE — document, typographie, liens
   ───────────────────────────────────────────────────────────── */
@layer base {
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.65;
    background: var(--bg);
    color: var(--ink);
    /* La bascule de thème fond en douceur — mais uniquement si
       l'utilisateur n'a pas demandé de réduire les animations. */
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.08;
    letter-spacing: -0.01em;
    /* balance : le navigateur équilibre les lignes des titres —
       fini les derniers mots orphelins. */
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT — coquille, sections, grilles
   ───────────────────────────────────────────────────────────── */
@layer layout {
  .shell {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 24px;
  }

  .section { padding-block: var(--space-section) 12px; }

  /* Les grilles se replient seules : auto-fit + minmax évitent
     un breakpoint dédié pour chaque nombre de colonnes. */
  .grille-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 22px;
  }
  .grille-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────
   COMPOSANTS
   ───────────────────────────────────────────────────────────── */
@layer composants {

  /* ═══ Navigation ═══ */
  ifz-nav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in oklch, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color 0.2s ease;

    /* L'attribut est posé par le composant (app/elements/ifz-nav.js)
       dès que la page défile : le trait n'apparaît qu'en mouvement. */
    &[data-scrolled] { border-color: var(--line); }

    & .nav-barre {
      display: flex;
      align-items: center;
      gap: 22px;
      height: 64px;
    }

    & .nav-marque {
      font-family: var(--font-display);
      font-size: 1.25rem;
      text-decoration: none;

      & em { color: var(--accent); font-style: normal; }
    }

    & .nav-liens {
      display: flex;
      gap: 24px;
      margin-inline-start: auto;

      & a {
        color: var(--muted);
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 700;

        &:hover { color: var(--ink); }

        /* Le scroll-spy du composant pose aria-current="true"
           sur le lien de la section visible : état ET style. */
        &[aria-current="true"] { color: var(--accent); }
      }
    }
  }

  /* Menu mobile : l'API Popover fait tout — ouverture, fermeture
     au clic extérieur, Échap, focus — SANS une ligne de JS. */
  .nav-burger {
    display: none;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    place-items: center;
    cursor: pointer;
  }

  #menu-mobile {
    /* Un popover est retiré du flux et affiché au-dessus de tout ;
       on le stylise comme un panneau sous la barre. */
    position: fixed;
    inset: 72px 16px auto auto;
    min-width: 220px;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 10px;

    & a {
      display: block;
      padding: 12px 16px;
      border-radius: var(--radius-m);
      text-decoration: none;
      font-weight: 700;

      &:hover { background: color-mix(in oklch, var(--ink) 6%, transparent); }
    }
  }

  /* ═══ Bouton de thème ═══ */
  .theme-bouton {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;

    &:hover { border-color: var(--accent); }

    /* Deux pictogrammes, un seul visible : celui du thème CIBLE.
       Le choix se fait en pur CSS via color-scheme → light-dark(). */
    & .ico-lune   { display: light-dark(block, none); }
    & .ico-soleil { display: light-dark(none, block); }
  }

  /* ═══ Boutons ═══ */
  .bouton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: var(--radius-m);
    transition: translate 0.15s ease;

    &:hover { translate: 0 -1px; }
  }
  .bouton-plein  { background: var(--accent); color: var(--accent-contrast); }
  .bouton-trait  { color: var(--ink); border: 1.5px solid var(--line);
                   &:hover { border-color: var(--accent); } }

  /* ═══ Héros ═══ */
  .heros {
    padding-block: clamp(48px, 8vh, 80px) 56px;

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

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

    & h1 { font-size: var(--text-hero); margin-block: 16px 20px; }

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

    & .heros-actions {
      display: flex;
      gap: 14px;
      margin-block-start: 30px;
      flex-wrap: wrap;
    }
  }

  .surtitre {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }

  .heros-visuel {
    justify-self: center;

    & .visuel-cadre {
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);

      & img { width: min(300px, 70vw); }
    }

    & figcaption {
      margin-block-start: 16px;
      text-align: center;
      color: var(--muted);
      font-size: var(--text-small);

      & strong { color: var(--ink); }
    }
  }

  /* ═══ Relevés — les chiffres publics, chacun lié à sa source ═══ */
  .releves {
    margin-block-start: 46px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--card);
    overflow: hidden;

    @media (width <= 920px) {
      grid-template-columns: repeat(2, 1fr);

      & > :nth-child(-n+2) { border-block-end: 1px solid var(--line); }
      & > :nth-child(2)    { border-inline-end: none; }
    }

    & > * {
      padding: 16px 20px;
      border-inline-end: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
    }
    & > :last-child { border-inline-end: none; }

    & strong {
      font-family: var(--font-display);
      font-size: 1.45rem;
      display: block;
      /* Chiffres alignés en colonnes stables. */
      font-variant-numeric: tabular-nums;
    }

    & small { color: var(--muted); font-size: 0.78rem; font-weight: 700; }

    & .source {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      color: var(--accent);
      margin-block-start: 3px;
    }
  }
  a.releve:hover strong { color: var(--accent); }

  /* ═══ Sections catalogue ═══ */
  .cat-entete {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-end: 8px;

    & h2 { font-size: var(--text-section); }
  }

  .plateforme {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
  }
  .plateforme-android { color: var(--plat-android-ink); background: var(--plat-android-bg); }
  .plateforme-web     { color: var(--plat-web-ink);     background: var(--plat-web-bg); }
  .plateforme-audio   { color: var(--plat-audio-ink);   background: var(--plat-audio-bg); }

  .cat-chapo {
    color: var(--muted);
    max-width: 42rem;
    margin-block-end: 34px;
  }

  /* ═══ Cartes produit ═══ */
  .carte {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 30px;
    box-shadow: var(--shadow);

    & .carte-entete {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-block-end: 12px;
      flex-wrap: wrap;
    }

    & .carte-icone { width: 50px; height: 50px; border-radius: 12px; flex: none; }

    & h3 { font-size: var(--text-card); }

    & .carte-acces {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
      width: 100%;
      margin-block-start: -6px;
    }

    & > p { color: var(--muted); }

    & .carte-actions {
      margin-block-start: 20px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    & .carte-visuel {
      border-radius: var(--radius-m);
      border: 1px solid var(--line);
      margin-block-start: 18px;
    }

    /* Variante pour une capture mobile dans une carte large :
       contrainte en largeur et centrée, sinon elle envahit tout. */
    & .carte-visuel--mobile {
      max-width: 260px;
      margin-inline: auto;
      display: block;
    }
  }

  /* ═══ Fiche majeure (OptiSolar) ═══
     container-type : la fiche observe SA PROPRE largeur, pas
     celle du viewport. Où qu'on la déplace, elle se replie au
     bon moment — c'est toute la promesse des container queries. */
  .phare-conteneur { container-type: inline-size; margin-block-end: 24px; }

  .phare {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 36px;
    padding: 36px;

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

    & .phare-captures {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      justify-content: center;

      & img {
        width: calc(50% - 8px);
        max-width: 200px;
        border-radius: 14px;
        border: 1px solid var(--line);
      }
    }
  }

  .insigne {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    white-space: nowrap;
  }

  .note-etoiles {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block: 8px 14px;

    & svg { color: var(--accent); flex: none; }
    & span { font-size: 0.9rem; font-weight: 700; }
  }

  .mots-cles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 16px;

    & li {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--muted);
      border: 1px solid var(--line);
      padding: 4px 11px;
      border-radius: 999px;
    }
  }

  /* ═══ Aperçus stylisés des applications web ═══
     Pas de fausse capture : un croquis abstrait dans les
     couleurs réelles du produit, en attendant les vraies images. */
  .apercu-web {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
    margin-block-start: 18px;

    & .apercu-barre {
      display: flex;
      gap: 5px;
      padding: 9px 12px;
      background: color-mix(in oklch, var(--ink) 5%, var(--card));

      & i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
    }

    & .apercu-scene { padding: 18px; display: grid; gap: 10px; }

    &.apercu-zmeteo .apercu-scene { background: linear-gradient(160deg, #12395f, #0b0e13); }
    &.apercu-aperoz .apercu-scene { background: linear-gradient(160deg, #241e3e, #171130); }

    & .trait { border-radius: 6px; background: oklch(100% 0 0 / 0.2); height: 12px; }
    & .trait-titre { width: 45%; height: 17px; }
    & .trait-large { width: 85%; }
    & .trait-rangee { display: flex; gap: 8px; & .trait { flex: 1; height: 34px; } }
  }

  /* ═══ Podcast ═══ */
  .podcast-carte {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 28px;
    align-items: center;
    padding: 36px;

    @media (width <= 700px) {
      grid-template-columns: 96px 1fr;
      & img { width: 96px; }
    }

    & img { width: 130px; border-radius: 18px; border: 1px solid var(--line); }
  }

  .pastilles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: 18px;
  }

  .pastille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 8px 16px;
    border-radius: 999px;

    &:hover { border-color: var(--accent); }
    & svg { color: var(--accent); }
  }

  .a-venir {
    margin-block-start: 44px;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-l);
    padding: 22px 28px;
    color: var(--muted);
    font-size: 0.95rem;

    & strong { color: var(--ink); }
  }

  /* ═══ À propos ═══ */
  .piliers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 22px;
    margin-block-start: 38px;
  }

  .pilier {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 26px;
    background: var(--card);

    & svg { color: var(--accent); margin-block-end: 14px; }
    & h3 { font-size: 1.02rem; margin-block-end: 8px; }
    & p { color: var(--muted); font-size: 0.92rem; }
  }

  /* ═══ Contact ═══ */
  .contact-cadre {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: clamp(34px, 6vw, 52px);
    text-align: center;

    & .contact-chapo {
      color: var(--muted);
      max-width: 33rem;
      margin: 12px auto 28px;
    }
  }

  /* ═══ Pied de page ═══ */
  .pied {
    border-block-start: 1px solid var(--line);
    padding-block: 32px 46px;
    margin-block-start: var(--space-section);

    & .pied-grille {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: var(--text-small);
    }

    & nav { display: flex; gap: 20px; flex-wrap: wrap; }

    & a {
      color: var(--muted);
      text-decoration: none;
      &:hover { color: var(--ink); }
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   ÉTATS — responsive nav, révélations, préférences
   ───────────────────────────────────────────────────────────── */
@layer etats {
  @media (width <= 640px) {
    ifz-nav .nav-liens { display: none; }
    .nav-burger { display: grid; }
  }

  /* Révélation au défilement : l'état initial n'existe QUE si le
     composant est actif (html[data-reveal]) — sans JavaScript, le
     contenu reste simplement visible. Amélioration progressive. */
  html[data-reveal] [data-reveler] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.55s ease, translate 0.55s ease;

    &[data-visible] { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }

    html[data-reveal] [data-reveler] { opacity: 1; translate: 0 0; }
  }
}