/* ==========================================================================
   POWER 21 — section « rétention » (partagée)
   « Ce qui ne sert pas, se perd » : 90 % oublié en 30 jours + pile d'écrans web app.
   Utilisée par la home (après les offres) et Nos solutions (après Conseil).
   Chargée via routes.php ('css' => [..., 'retention.css']) avec retention.js.
   ========================================================================== */

.retention { padding-top: 75px; overflow-x: clip; }   /* haut = moitié du .section (les offres ont déjà 130px en bas) ; clip : écrans hors viewport sans scroll horizontal */
/* 2 colonnes : titre + (chiffre, texte à 70 %) · web app */
.retention__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.retention__text { margin-top: 40px; }
.retention__title { font-weight: 800; font-size: clamp(36px, 4.6vw, 68px);   /* = .how__title */ line-height: .98; letter-spacing: -.05em; }
.retention__title em { color: var(--c-blue); }   /* mot-clé : serif italique bleu, comme « neurosciences » */
.retention__figure { display: flex; align-items: last baseline; gap: 16px; }   /* bas de la mention = ligne de base du nombre */
.retention__num {
  font-size: clamp(56px, 7vw, 104px); font-weight: 800;letter-spacing: -.1em;line-height: 1; color: var(--c-blue);
}
.retention__note {
  font-family: var(--ff-mono); font-size: 11px; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-grey);
}
.retention__body { margin-top: 28px; font-size: 21px; line-height: 1.55; color: var(--c-body); text-wrap: pretty; }
/* Web app : webapp2 devant, webapp1/webapp3 plus petits derrière ; arrivée depuis
   la droite quand la section entre à l'écran (.is-in posé par home.js) */
/* pile en % de la colonne (positions validées par Mathieu) ; même perspective pour
   les 3, les deux de derrière un peu plus petits ; la pile déborde à droite de la
   colonne, l'écran de droite peut sortir du viewport.
   Hauteur du conteneur = hauteur de l'écran de devant : 69 % × 787/567 ≈ 96 %. */
.apps { position: relative; width: 75%; margin-inline: auto; aspect-ratio: 1 / .96; }   /* pile réduite de 15 % (proportions et positions internes inchangées) */
.apps__phone { position: absolute; height: auto; }
.apps__phone--front { z-index: 3; width: 69%; left: 33%; top: 0; }
.apps__phone--back  { z-index: 1; width: 55%; filter: saturate(.85) brightness(.97); }
.apps__phone--left  { left: 15%; top: 9%; }
.apps__phone--right { left: 71%; top: 11%; }
.js-reveal .apps__phone { opacity: 0; translate: 70vw 0; transition: translate 1.2s var(--ease), opacity .7s ease; }
.js-reveal .apps__phone--right { transition-delay: 0s; }
.js-reveal .apps__phone--front { transition-delay: .15s; }
.js-reveal .apps__phone--left  { transition-delay: .3s; }
.js-reveal .apps.is-in .apps__phone { opacity: 1; translate: 0 0; }
.retention__cta { margin-top: 32px; }   /* dans la colonne de gauche, après le texte */
.retention__cta .btn__arrow {             /* même taille que la flèche du hero, pointée à droite */
  display: block; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .retention__grid { gap: 48px; }
  .retention__text { max-width: none; }
}
@media (max-width: 900px) {
  .retention__body { font-size: 18px; }
  .retention__grid { grid-template-columns: 1fr; gap: 48px; }
  .retention { padding-top: 50px; }
}
/* tablette portrait et en dessous : une colonne centrée, pile d'écrans recentrée */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .retention__grid { grid-template-columns: 1fr; gap: 56px; }
  .retention__main { text-align: center; }
  .retention__figure { justify-content: center; text-align: left; }
  .retention__body { max-width: 620px; margin-inline: auto; }
  .apps { width: 100%; max-width: 420px; margin-inline: auto; }
  .apps__phone--front { left: 15.5%; }
  .apps__phone--left  { left: -2.5%; }
  .apps__phone--right { left: 47.5%; }
}
/* Tablette portrait : texte 20px, titre ≈ 75 % du desktop */
@media (min-width: 701px) and (max-width: 900px), (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .retention__body { font-size: 20px; }
  .retention__title { font-size: 50px; }
}
@media (max-width: 700px) {
  .retention { padding-bottom: 72px; }   /* home : + .stories 56px → 128px au-dessus de « Un impact concret… » (170 avant) */
}