/* ============================================================
   AM Agency — realisations : pages Réalisations (/realisations/) et Sécurité et RGPD (/securite-rgpd/).
   Chargée seulement sur ces deux pages (ama_page_key() de functions.php), après sections.css.
   Lit seulement les variables de tokens.css. La fiche elle-même (cadre de capture, légende, badges, textes)
   est celle de sections.css (template-parts/tool-card.php) : ce fichier ne fait que la mettre en scène.
   Seuls transform, opacity et filter sont animés.
   ============================================================ */

/* ============================================================
   Réalisations : la vitrine
   Trois états, comme la section réalisations de la maquette g-immersive :
   - sans JavaScript (et base de tout) : une rangée par fiche, capture à côté de son texte (sections.css) ;
   - ordinateur (>= 1024 px) avec JavaScript : assets/js/realisations.js range les 8 captures dans une
     scène collante (.tool-stage) à gauche ; les textes défilent à droite, la capture suit ;
   - tablette et téléphone : chaque capture au-dessus de son texte, qui grandit en entrant (sections.css).
   ============================================================ */
:root {
  /* Changement de capture : fondu + légère échelle + léger flou (MOUVEMENT.md, « fondu qui accroche ») */
  --stage-swap-scale: 0.96;
  --stage-swap-blur: 6px;
  /* Texte d'une fiche qui n'est pas en cours : 0,75 garde le texte secondaire au-dessus de 4,5:1 */
  --stage-rest: 0.75;
}

.real-note {
  max-width: 40rem;
  margin-bottom: var(--sp-9);
  color: var(--muted);
}

/* Ancre (/realisations/#<clé>) : le nom de la fiche s'arrête sous l'en-tête, encoche comprise. */
.real-showcase .tool-full {
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--sp-5));
}

/* Captures plus larges que le cadre 16/10 (cuisine centrale 1600 x 750, négoce 1600 x 800) : le cadre prend
   la proportion de l'image (posée entière, jamais rognée en plein mot, sans marge ni fond autour : aucune
   « boîte dans la boîte »). Même rayon, même ombre que les autres captures. Sur ordinateur, dans la scène,
   la capture se centre sur la hauteur des captures 16/10. Classe posée par tool-card.php selon l'image. */
.real-showcase .shot-wide .shot-frame { aspect-ratio: auto; }
.real-showcase .shot-wide .shot-frame img { height: auto; }
@media (min-width: 1024px) {
  .tool-stage > .shot-wide { align-self: center; }
}

/* Un nom très long passe à la ligne au lieu de pousser la colonne. */
.real-showcase .tool-name { text-wrap: balance; }

@media (min-width: 1024px) {
  /* Captures à gauche, textes à droite : l'œil voit l'outil, puis lit ce qu'il fait. */
  .tool-list.has-stage {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--sp-8);
    row-gap: 0;               /* lignes jointives : le milieu de l'écran est toujours dans une fiche */
    container-type: inline-size;
  }
  .has-stage > .tool-full {
    grid-column: 2;
    display: flex; align-items: center;
    min-height: 80vh;         /* chaque fiche se lit seule */
  }
  /* La dernière fiche devient « en cours » quand son haut passe le milieu de l'écran. À 80vh, le bouton final
     commençait à recouvrir la page un tiers d'écran plus loin : sa capture s'effaçait avant d'avoir été vue.
     Ici, la fiche fait un écran et demi et son texte colle à la hauteur de la capture : texte et capture
     restent ensemble à l'écran plus d'un écran de défilement avant l'arrivée du bouton final. */
  .has-stage > .tool-full:last-of-type { min-height: 150vh; align-items: flex-start; }
  .has-stage > .tool-full:last-of-type .tool-text {
    position: sticky;
    top: max(
      calc(var(--header-h) + var(--sp-5)),
      calc((100vh + var(--header-h) - (100cqi - var(--sp-8)) * 7 / 12 * 10 / 16 - 4.5rem) / 2)
    );
  }
  .has-stage .tool-text {
    position: relative;
    width: 100%;
    isolation: isolate;       /* la carte (::before, z-index -1) reste derrière ce texte */
    padding: var(--sp-7) var(--sp-6);
    opacity: var(--stage-rest);
    transition: opacity var(--d-swap) var(--ease-out); /* defilement */
  }
  /* La fiche en cours est posée sur une carte (surface plus claire + ombre douce) ; seule l'opacité de la
     carte change. Les autres textes restent lisibles. */
  .has-stage .tool-text::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transition: opacity var(--d-swap) var(--ease-out); /* defilement */
  }
  .has-stage > .tool-full.is-active .tool-text,
  .has-stage > .tool-full.is-active .tool-text::before { opacity: 1; }

  /* La scène : une seule capture visible, centrée sous l'en-tête. Même cadre et même légende pour chaque
     capture (.shot-frame et figcaption de sections.css). Hauteur du cadre = largeur de la colonne x 10/16
     (cqi = largeur de .tool-list) ; 4,5rem pour la légende. realisations.js règle grid-row-end au nombre
     de fiches. */
  .tool-stage {
    grid-column: 1;
    grid-row: 1 / span 8;
    align-self: start;
    position: sticky;
    top: max(
      calc(var(--header-h) + var(--sp-5)),
      calc((100vh + var(--header-h) - (100cqi - var(--sp-8)) * 7 / 12 * 10 / 16 - 4.5rem) / 2)
    );
    display: grid;
  }
  .tool-stage > .shot {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: scale(var(--stage-swap-scale));
    filter: blur(var(--stage-swap-blur));
    transition: /* defilement */
      opacity var(--d-swap) var(--ease-out),
      transform var(--d-swap) var(--ease-out),
      filter var(--d-swap) var(--ease-out),
      visibility 0s linear var(--d-swap);
  }
  .tool-stage > .shot.is-current {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition-delay: 0s;
  }
  /* Rayon et ombre portés par l'image, pas par le cadre : quand le bouton final recouvre la page, le moteur des
     couches (motion.js, erase) efface l'image ; un cadre à fond et ombre restait visible, vide. */
  .tool-stage .shot-frame { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .tool-stage .shot-frame img { border-radius: var(--radius); box-shadow: var(--shadow-shot); }
}

/* Mouvement réduit : la scène reste, le changement de capture devient un fondu court sans échelle. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .tool-stage > .shot { transform: none; filter: none; transition: opacity var(--d-out) ease, visibility 0s linear var(--d-out); }
  .tool-stage > .shot.is-current { transition-delay: 0s; }
  .has-stage .tool-text, .has-stage .tool-text::before { transition: opacity var(--d-out) ease; }
}

/* Tablette et téléphone : le nom de la fiche et ses badges passent au-dessus de la capture. Une ancre
   (#<clé>) arrive ainsi sur le nom, et le nom n'est jamais poussé sous le bandeau de cookies par la capture. */
/* Les écarts dans une fiche (12 px sous le nom, 24 px autour de la capture) restent nettement plus petits que
   l'écart entre deux fiches (64 px) : chaque fiche se lit comme un bloc. */
@media (max-width: 1023px) {
  .real-showcase .tool-list { gap: var(--sp-8); }
  .real-showcase .tool-list > .tool-full { display: flex; flex-direction: column; gap: 0; }
  .real-showcase .tool-full .tool-text { display: contents; }
  .real-showcase .tool-full .tool-name { order: -2; }
  .real-showcase .tool-full .badges { order: -1; margin-bottom: var(--sp-5); }
  .real-showcase .tool-full .tool-facts { max-width: 40rem; }
}
@media (max-width: 639px) {
  .real-note { margin-bottom: var(--sp-7); }
  /* Téléphone : la capture déborde jusqu'aux bords de sa carte (32 px de large en plus, tableaux lisibles).
     Bords droits, sans ombre : elle fait partie de la carte, rien ne dépasse de celle-ci. */
  .real-showcase .tool-list > .tool-full .shot-frame {
    margin-inline: calc(-1 * var(--sp-4));
    border-radius: 0;
    box-shadow: none;
  }
  /* Téléphone : les blocs d'une fiche (nom, badges, Avant, Ce que ça change…) sont posés tels quels, sans
     attendre d'entrer à l'écran. Les fiches sont longues : un lecteur qui saute à une ancre, ou qui défile
     vite, trouvait des blocs encore vides. La capture garde son entrée (sections.css). */
  .js .tool-full [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}
/* Ordinateur : la note d'anonymat se rapproche du haut de page et des fiches ; la première capture entre
   dans le premier écran. */
@media (min-width: 1024px) {
  .section.real-showcase { padding-top: var(--sp-8); }
  .real-note { margin-bottom: var(--sp-7); }
}

/* ============================================================
   Sécurité et RGPD
   Téléphone et tablette : titre, engagements, puis « Vos droits » posé sur une carte.
   Ordinateur : titre à gauche, « Vos droits » dessous dans la même colonne, engagements à droite. La carte
   comble le vide sous le titre et n'est plus le dernier bloc de la couche : elle n'est plus effacée par le
   bouton final avant d'avoir été lue (motion.js efface d'abord les blocs les plus bas).
   ============================================================ */
.sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.sec-head { margin-bottom: 0; }
/* Texte agrandi à 200 % au téléphone : un mot long du titre (bloc insécable des masques de motion.js)
   passe à la ligne avec un trait d'union au lieu d'élargir la page. */
.sec-head h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
/* Une liste d'affirmations numérotées (01, 02…, bleu frais des badges), sans carte ni pictogramme : l'espace
   les sépare. Le numéro est décoratif : la liste le dit déjà aux lecteurs d'écran (texte de remplacement vide). */
.sec-commitments {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  counter-reset: ama-engagement;
}
.sec-commitment { counter-increment: ama-engagement; }
.sec-commitment::before {
  content: counter(ama-engagement, decimal-leading-zero);
  content: counter(ama-engagement, decimal-leading-zero) / "";
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--label);
}
.sec-commitment h3 {
  font-size: var(--fs-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sec-commitment p { margin-top: var(--sp-3); max-width: 36rem; color: var(--ink-soft); overflow-wrap: break-word; }

/* Vos droits : un bloc de lecture sur une carte, liens soulignés dans le texte. */
.sec-rights {
  margin-top: var(--sp-8);
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.sec-rights h2 {
  max-width: 46rem;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.sec-rights-text { margin-top: var(--sp-5); max-width: 46rem; font-size: var(--fs-lg); color: var(--ink-soft); overflow-wrap: break-word; }
.sec-rights-text a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--label);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
@media (hover: hover) and (pointer: fine) {
  .sec-rights-text a:hover { color: var(--label); }
}

/* Ordinateur : grille 4/8. À gauche le titre, puis la carte « Vos droits » qui reste à l'écran pendant
   qu'on lit les engagements (collante dans sa rangée, qui court jusqu'au bas de la liste). La carte est
   étroite : son titre passe à la taille d'un titre de carte, sous « Nos engagements » et les engagements. */
@media (min-width: 1024px) {
  .sec-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    gap: var(--sp-7) var(--sp-8);
  }
  .sec-head { grid-column: 1; grid-row: 1; }
  .sec-commitments { grid-column: 2; grid-row: 1 / span 2; gap: var(--sp-8); }
  .sec-commitment h3 { font-size: clamp(1.5rem, 0.8vw + 1rem, 1.75rem); }
  .sec-commitment p { max-width: 38rem; }
  .sec-rights {
    grid-column: 1; grid-row: 2;
    margin-top: 0;
    padding: var(--sp-6);
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
  .sec-rights h2 { font-size: var(--fs-4); line-height: 1.25; letter-spacing: -0.02em; }
  .sec-rights-text { margin-top: var(--sp-3); max-width: none; font-size: var(--fs-md); line-height: 1.6; }
  /* Haut de page : le bouton se cale au bord droit de la grille, face au texte (plus de vide à sa droite). */
  .sec-page .page-hero-actions { justify-content: flex-end; align-self: center; }
}

/* Téléphone, cette page seule : le titre du haut de page domine (32 px à 390 px). Les titres de section
   passent juste sous lui (28 px), les engagements nettement dessous (20 px), au-dessus du texte (17 px).
   Les numéros (01, 02…) s'effacent derrière les engagements : plus petits, couleur secondaire. */
@media (max-width: 639px) {
  .sec-page :is(.sec-head h2, .sec-rights h2, .final-head h2) { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
  .sec-page .sec-commitment h3 { font-size: 1.25rem; line-height: 1.25; }
  .sec-commitment::before { font-size: 0.9375rem; margin-bottom: var(--sp-2); color: var(--muted); }
  .sec-grid { gap: var(--sp-5); }
  .sec-rights { padding: var(--sp-6) var(--sp-5); }
}

/* Couches : numérotées à partir de 2 (sous 1024 px, rien ne colle ici). L'effacement du contenu recouvert,
   plus court pour une couche plus haute que l'écran, est commun à tout le site (assets/css/layout.css). */