/* ============================================================
   AM Agency — pages cibles (/independants/, /petites-entreprises/, /grandes-structures/)
   Chargée seulement sur ces 3 pages (functions.php, ama_page_key() = « cibles »), après sections.css.
   Gabarit : template-parts/target-page.php et sections/cible-*.php. Lit seulement les variables de tokens.css.
   Sans JavaScript et en mouvement réduit, tout est visible dans son état final : les états de départ des
   effets vivent sous .js et prefers-reduced-motion: no-preference. Seuls transform, opacity et filter sont
   animés. Interface (toucher, survol) : 300 ms au plus.
   ============================================================ */

/* Couches : l'effacement du contenu recouvert est commun à tout le site (assets/css/layout.css). */

/* ---------- Vos situations : 3 ou 4 cartes, arrivée en cascade ---------- */
.situ-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.situ-list-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.situ {
  min-width: 0;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--surface-sunk);
  box-shadow: var(--shadow-card);
}
.situ-title { font-size: var(--fs-4); line-height: 1.25; overflow-wrap: break-word; }
.situ p { margin-top: var(--sp-3); color: var(--ink-soft); overflow-wrap: break-word; }
.situ-note { margin-top: var(--sp-6); max-width: 46rem; color: var(--muted); }
/* Ordinateur : la note qui ferme la section passe à 24 px. Le moteur des couches (motion.js, bigTexts)
   efface chaque texte de 24 px et plus juste avant que la couche suivante l'atteigne : la note n'est plus
   tranchée, lisible, par la couche qui monte. */
@media (min-width: 1024px) {
  .situ-note { margin-top: var(--sp-7); font-size: max(var(--fs-4), 1.5rem); line-height: 1.4; color: var(--ink-soft); }
}

/* Ordinateur : la couche suivante monte sur les cartes ; le titre de la section s'efface avec elles (au lieu
   de rester seul, net, au-dessus d'une section déjà effacée). Les situations sont toujours la couche 2
   (template-parts/target-page.php) : timeline --over-2 de layout.css. Le moteur des couches (motion.js)
   compose son propre effacement avec celui-ci (filter). */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { /* defilement */
  @supports (animation-timeline: view()) {
    .js.sda .cible-situations .section-head {
      animation: ama-situ-head-out linear both;
      animation-timeline: --over-2;
      animation-range: cover 6% cover 30%;
    }
  }
}
@keyframes ama-situ-head-out { to { opacity: 0; } }

/* Titres de cartes : aucune césure au-dessus de 640 px (« informa-tions » à 1440 px) ; au téléphone et en
   texte agrandi à 200 %, un mot trop long passe à la ligne avec un trait d'union au lieu d'élargir la page. */
@media (max-width: 639px) {
  .situ-title, .build-title, .proof-name { hyphens: auto; -webkit-hyphens: auto; }
}

/* Quatre cartes : deux par ligne sous 1280 px ; trois cartes : une colonne sous 1024 px (pas de carte orpheline). */
@media (max-width: 1279px) {
  .situ-list-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .situ-list-3 { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
}
@media (max-width: 639px) {
  .situ-list, .situ-list-4 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .situ { padding: var(--sp-5); }
}

/* ---------- Ce qu'on peut construire : exemples à gauche, capture collante à droite ---------- */
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.build-shot { min-width: 0; }
.build-shot figcaption { font-size: var(--fs-md); color: var(--muted); }
.build-list { display: grid; gap: var(--sp-2); min-width: 0; }
.build-item {
  position: relative;
  isolation: isolate;
  display: flex; gap: var(--sp-4); align-items: flex-start;
  min-width: 0;
  padding: var(--sp-5);
}
/* La carte de l'exemple en cours : surface posée d'avance, seule son opacité change. */
.build-item::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  opacity: 0;
}
.build-check { width: 24px; height: 24px; margin-top: 0.15em; color: var(--label); }
.build-text { min-width: 0; }
.build-title { font-size: var(--fs-4); line-height: 1.25; overflow-wrap: break-word; }
.build-text p { margin-top: var(--sp-2); color: var(--ink-soft); overflow-wrap: break-word; }

@media (min-width: 1024px) {
  .build-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
  .build-list { grid-column: 1; grid-row: 1; }
  /* La capture et sa légende se posent au milieu de la colonne des exemples (aucun trou sous l'image),
     puis restent à l'écran pendant que les exemples défilent. */
  .build-shot {
    grid-column: 2; grid-row: 1;
    align-self: center;
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--sp-6));
  }
  .build-grid-text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .build-list { max-width: 40rem; }
  .build-item { padding: var(--sp-4) 0; }
}

/* Ordinateur : les exemples sont tous posés sur leur carte, même traitement pour chacun (aucun ne reste nu
   à côté d'un voisin allumé) ; ils arrivent en cascade (data-stagger). Téléphone et tablette : sans carte.
   Partout : la capture grandit en entrant. */
@media (min-width: 1024px) {
  .build-item::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) { /* defilement */
  .js .build-shot .shot-frame { transform-origin: 50% 100%; }
  .js:not(.sda) .build-shot .shot-frame {
    opacity: calc(0.25 + 0.75 * var(--p, 1));
    transform: scale(calc(0.92 + 0.08 * var(--p, 1)));
  }
  @supports (animation-timeline: view()) {
    .js.sda .build-shot { view-timeline: --build-shot block; }
    .js.sda .build-shot .shot-frame {
      animation: ama-shot-rise linear both;
      animation-timeline: --build-shot;
      animation-range: entry 0% entry 70%;
    }
  }
}

/* ---------- La preuve : fiches de la cible, chaque carte mène à sa fiche dans /realisations/ ---------- */
.proof-list { display: grid; gap: var(--sp-5); }
.proof-short { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.proof-item { display: flex; min-width: 0; }
.proof-card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--d-press) var(--ease-out);
}
.proof-name { font-size: var(--fs-4); line-height: 1.25; overflow-wrap: break-word; }
.proof-full .proof-name { font-size: var(--fs-3); line-height: 1.15; }
.proof-link { color: var(--ink); }
.proof-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.proof-link:focus-visible { outline: none; }
.proof-link:focus-visible::after { outline: 2px solid var(--label); outline-offset: 3px; }
.proof-arrow {
  display: inline-block;
  width: 0.8em; height: 0.8em;
  margin-left: var(--sp-2);
  vertical-align: -0.05em;
  color: var(--label);
  transition: transform var(--d-press) var(--ease-out);
}
.proof-card .badges { margin-top: var(--sp-3); }
.proof-built dd { color: var(--ink-soft); }
.proof-all { margin-top: var(--sp-6); }
.proof-card:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .proof-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .proof-card:hover .proof-arrow { transform: translateX(3px); }
  .proof-card:active { transform: scale(0.97); }
}

/* Une fiche entière : à gauche le nom, le secteur, puis Avant, Ce que ça change (si la fiche porte un gain,
   classe .has-gain posée par cible-proof.php) et Où en est l'outil empilés ; à droite Ce qu'on a construit. La liste des blocs (<dl>) reste d'un seul tenant : ses blocs se posent sur la grille
   de la carte (subgrid). Seuil en em : texte agrandi, tout s'empile. */
@media (min-width: 64em) {
  .proof-full .proof-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: var(--sp-6) var(--sp-8);
    padding: var(--sp-7);
  }
  .proof-full .proof-id { grid-column: 1; grid-row: 1; }
  .proof-full .proof-facts {
    margin-top: 0;
    grid-column: 1 / -1; grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  .proof-full .proof-before { grid-column: 1; grid-row: 2; }
  .proof-full .proof-status { grid-column: 1; grid-row: 3; }
  .proof-full .proof-built  { grid-column: 2; grid-row: 1 / -1; }
  .proof-full .has-gain { grid-template-rows: auto auto auto auto 1fr; }
  .proof-full .proof-gain { grid-column: 1; grid-row: 3; }
  .proof-full .has-gain .proof-status { grid-row: 4; }
}

/* Plusieurs fiches courtes : rangées de 3 ; une dernière rangée de 2 prend toute la largeur (3 + 2, pas de
   trou en bas à droite). Tablette : 2 par ligne, une fiche seule en dernier prend la ligne entière. */
@media (min-width: 40em) and (max-width: 63.99em) {
  .proof-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-short > .proof-item:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .proof-short { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .proof-short > .proof-item { grid-column: span 2; }
  .proof-short > .proof-item:nth-child(3n+1):nth-last-child(2),
  .proof-short > .proof-item:nth-child(3n+1):nth-last-child(2) + .proof-item { grid-column: span 3; }
  .proof-short > .proof-item:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  /* Les blocs des fiches d'une même rangée s'alignent (nom, secteur, Avant, Ce qu'on a construit, Où en est
     l'outil sur cinq lignes partagées, subgrid) : la place laissée par un nom ou un texte plus court se répartit
     entre les blocs au lieu de laisser un vide sous la fiche. */
  @supports (grid-template-rows: subgrid) {
    .proof-short > .proof-item { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .proof-short .proof-card { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .proof-short .proof-id { display: contents; }
    .proof-short .proof-facts { grid-row: 3 / -1; margin-top: 0; grid-template-rows: subgrid; row-gap: 0; }
    .proof-short .proof-facts > .tool-fact { padding-top: var(--sp-5); }
  }
}
@media (max-width: 639px) {
  .proof-card { padding: var(--sp-5); }
}

/* ---------- Louer ou posséder, version courte : deux panneaux face à face ----------
   Téléphone et tablette : titre et phrase en haut, puis les deux réponses côte à côte (pictogramme en haut,
   réponse en bas, en gros). Grand écran : titre à gauche, panneaux à droite, moins hauts. La surface bleu marque s'allume sur « sur mesure ». Texte agrandi à 200 % : les
   panneaux s'empilent (largeur minimale en rem).
   La typographie de la réponse est portée par son <span>, pas par le panneau (resté en texte courant) : le
   moteur des couches (motion.js, bigTexts) efface alors les deux réponses, pas les deux panneaux en bloc. */
.own-short {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}
.own-short .section-head { margin-bottom: 0; }
.own-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-3);
}
.own-side {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-6);
  min-width: 0;
  min-height: 10rem;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--surface-sunk);
  font-size: var(--fs-md);
  overflow-wrap: break-word;
}
.own-side > span {
  min-width: 0; max-width: 100%;
  text-wrap: balance; /* « Votre outil sur / mesure » : aucun mot seul sur la dernière ligne */
  font-family: var(--ff-display);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.own-icon { width: 28px; height: 28px; }
.own-rent { color: var(--muted); }
.own-rent .own-icon { color: var(--muted); }
.own-mine { color: var(--ink); }
.own-mine .own-icon { color: var(--label); }
/* État final : la surface allumée posée sur « sur mesure » (opacité seule animée). */
.own-mine::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--c-brand);
  box-shadow: var(--shadow-card);
}
@media (min-width: 40em) {
  .own-side { min-height: 12rem; padding: var(--sp-6); }
  .own-side > span { font-size: var(--fs-3); letter-spacing: -0.03em; }
  .own-icon { width: 32px; height: 32px; }
}
@media (min-width: 64em) {
  .own-short { gap: var(--sp-8); }
  .own-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .own-side { min-height: clamp(12rem, 28svh, 16rem); }
  .own-icon { width: 40px; height: 40px; }
}
/* Côte à côte à partir de 1280 px, moitié-moitié : les titres les plus longs (« Automatiser sur un logiciel
   loué, ou sur le vôtre ? ») tiennent en deux lignes à la taille des titres de section. */
@media (min-width: 80em) {
  .own-short { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
}

/* Au défilement : « loué » recule et s'éteint, « sur mesure » avance et s'allume. Réversible. */
@media (prefers-reduced-motion: no-preference) { /* defilement */
  .js:not(.sda) .own-mine::before { opacity: calc(min(1, var(--p, 1) / 0.45)); }
  .js:not(.sda) .own-rent { opacity: calc(1 - 0.2 * min(1, var(--p, 1) / 0.45)); }
  .js:not(.sda) .own-mine { transform: scale(calc(0.96 + 0.04 * min(1, var(--p, 1) / 0.45))); }
  @supports (animation-timeline: view()) {
    .js.sda .own-pair { view-timeline: --own-pair block; }
    .js.sda .own-mine::before { animation: ama-own-lit linear both; }
    .js.sda .own-rent { animation: ama-own-dim linear both; }
    .js.sda .own-mine { animation: ama-own-rise linear both; }
    .js.sda .own-mine::before, .js.sda .own-rent, .js.sda .own-mine {
      animation-timeline: --own-pair;
      animation-range: entry 40% cover 45%;
    }
  }
}
@keyframes ama-own-lit  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ama-own-dim  { from { opacity: 1; } to { opacity: 0.8; } }
@keyframes ama-own-rise { from { transform: scale(0.96); } to { transform: none; } }

/* ---------- Titres longs : bouton final et preuve ----------
   Ces deux titres sont des phrases plus longues que les autres ; un titre tient en deux lignes au plus
   (mesure design-maison). 6,9vw est la plus grande taille qui garde les six titres longs des trois pages sur
   deux lignes de 320 à 639 px (27 px à 390 px ; mesuré avec la police des titres, la plus serrée est
   « Remplacez vos fichiers Excel… » à 7,03vw). Lignes équilibrées. */
.cible .final-head h2,
.cible-proof .section-head h2 { text-wrap: balance; }
@media (max-width: 639px) {
  .cible .final-head h2,
  .cible-proof .section-head h2 { font-size: min(var(--fs-h2), 6.9vw); }
}

/* ---------- Mouvement réduit : rien n'attend d'entrer à l'écran pour s'afficher ----------
   Le moteur garde un fondu court en mouvement réduit ; un bloc posé en bas du premier écran restait alors
   invisible. Sur ces pages, tout est affiché tel quel. */
@media (prefers-reduced-motion: reduce) {
  .js .cible [data-reveal]:not(.is-in) { opacity: 1; }
}

/* ---------- L'audit : ce qu'on regarde, puis ce que vous en retirez ----------
   Ordinateur : la carte « Ce que vous en retirez » se pose à droite, centrée sur la hauteur de la colonne. */
.audit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.audit-look h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}
.audit-list { margin-top: var(--sp-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* Texte agrandi à 200 % au téléphone : chaque mot d'un titre est un bloc insécable (masques de motion.js) ;
   un mot long passe à la ligne avec un trait d'union au lieu d'élargir la page. */
.cible :is(.section-head h2, .audit-look h2, .audit-list li > span) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.audit-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-lg); color: var(--ink); }
.audit-list li > span { min-width: 0; overflow-wrap: break-word; }
.audit-check { width: 24px; height: 24px; margin-top: 0.15em; color: var(--label); }
.audit-gain {
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-shot);
}
.audit-gain h3 { font-size: var(--fs-3); line-height: 1.15; overflow-wrap: break-word; }
.audit-gain p { margin-top: var(--sp-4); font-size: var(--fs-lg); color: var(--ink-soft); overflow-wrap: break-word; }
@media (min-width: 64em) {
  .audit-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: stretch; }
  .audit-list { margin-top: var(--sp-7); gap: var(--sp-5); }
  .audit-list li { font-size: var(--fs-4); line-height: 1.35; }
  .audit-check { width: 28px; height: 28px; margin-top: 0.1em; }
  /* Carte à sa hauteur naturelle, centrée face à la liste : titre et phrase groupés, sans vide entre eux. */
  .audit-gain { align-self: center; padding: var(--sp-7); }
}
@media (max-width: 639px) {
  .audit-gain { padding: var(--sp-6) var(--sp-5); }
}
/* L'audit est une section courte (un titre, trois lignes, une carte) : centrée dans un écran entier, elle
   flottait au milieu de 300 px de vide en haut et en bas. Ici seulement, la couche garde sa hauteur
   naturelle ; collée en haut, le bouton final apparaît juste dessous puis la recouvre (motion.js gère les
   couches plus courtes que l'écran, comme le haut de page). Spécificité au-dessus de layout.css. */
@media (min-width: 1024px) {
  .js .cible .layer.cible-audit:has(+ .layer-mark) { min-height: 0; }
}

/* ---------- Téléphone : hiérarchie des titres ----------
   Trois tailles nettement distinctes : titre de section (27 à 32 px) > nom de carte (20 px) > texte (17 px).
   La police des titres paraît plus petite que Montserrat à taille égale : à 18 px, un nom de carte se lisait
   sous son texte ; à 22 px, il talonnait les titres longs (27 px à 390 px). En fin de feuille : l'emporte
   sur les tailles de base des cartes, écrites plus haut. */
@media (max-width: 639px) {
  .situ-title, .build-title, .proof-name, .proof-full .proof-name { font-size: 1.25rem; line-height: 1.25; }
}