/* L'évolution des prix de l'écran Offres (js/ecrans/offres-evolution.js ; 11/11/2026, dossier/39-GRILLE-NOVEMBRE.md
   § 4), montrée une fois aux inscrits d'avant : les trois cartes de l'ancienne grille se transforment en celles de la
   nouvelle, leurs prix décomptent, l'écart s'affiche, puis l'écran normal prend la place. Seuls transform et opacity
   bougent ; les instants viennent du module (`--evo-transformation`, `--evo-ecart`, `--evo-option`, `--evo-pas`,
   `--evo-sortie`, posés sur la scène), `--evo-rang` décale chaque carte. Sous prefers-reduced-motion, ou quand le module
   le décide (`data-mode="immobile"`) : l'avant et l'après côte à côte, sans mouvement, rien ne dépend d'une animation.
   Jetons : ../assets/tokens.css, aucune valeur de couleur écrite ici. */

/* Pendant la scène, le reste de l'écran attend derrière elle. */
.ecran-offres[data-evolution="scene"] > :not(.evo) { display: none; }

.evo { display: grid; gap: 28px; }
.evo-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.evo-tete-texte { display: grid; gap: 12px; min-width: 0; max-width: 72ch; }
.evo-etiquette { font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--bleu-texte); }
.evo-titre { font-size: var(--taille-h1); line-height: var(--interligne-titre); letter-spacing: var(--approche-heros); color: var(--encre); text-wrap: balance; }
.evo-texte { max-width: 66ch; font-size: var(--taille-intro); line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
.evo-inchange { width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid var(--trait); border-radius: var(--rayon-3); background: var(--voile-1); font-size: 14px; line-height: 1.5; color: var(--encre); }
.evo-actions { flex: none; }

.evo-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.evo-carte {
  position: relative; display: grid; min-width: 0; padding: 24px; border-radius: var(--rayon-5);
  background: linear-gradient(180deg, var(--voile-2), var(--voile-1)); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
}
/* Le bord bleu de la carte transformée : un calque, pour que seule son opacité bouge. */
.evo-carte::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--bleu-trait); border-radius: inherit; pointer-events: none; }
/* L'avant et le maintenant, superposés : l'un s'efface pendant que l'autre vient, aux mêmes places. */
.evo-etat { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; min-width: 0; }
.evo-quand { font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.evo-apres .evo-quand { color: var(--bleu-texte); }
.evo-nom { font-size: 22px; font-weight: var(--graisse-moyenne); line-height: 1.2; letter-spacing: -0.02em; color: var(--encre); }
.evo-prix { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-height: 58px; white-space: nowrap; }
.evo-prix-vu { display: flex; align-items: flex-end; gap: 10px; }
.evo-avant .formule-montant { color: var(--encre-2); }
.evo-ecart { margin-bottom: 7px; padding: 4px 10px; border-radius: var(--rayon-pilule); background: var(--mieux-fond); color: var(--mieux); font-size: 14px; font-weight: var(--graisse-forte); }
.evo-contenu { font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.evo-contenu b { color: var(--encre); }
.evo-option { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 13.5px; line-height: 1.5; color: var(--encre); }

/* ---------- En mouvement : l'état de départ, puis la scène jouée ---------- */
.evo[data-mode="mouvement"][data-etat="attente"] { opacity: 0; }
.evo[data-mode="mouvement"] .evo-apres,
.evo[data-mode="mouvement"] .evo-ecart,
.evo[data-mode="mouvement"] .evo-barre,
.evo[data-mode="mouvement"] .evo-option,
.evo[data-mode="mouvement"] .evo-carte::after { opacity: 0; }
.evo[data-mode="mouvement"][data-etat="joue"] .evo-tete-texte > * { animation: evo-monte 300ms var(--expo) both; }
.evo[data-mode="mouvement"][data-etat="joue"] .evo-tete-texte > :nth-child(2) { animation-delay: 60ms; }
.evo[data-mode="mouvement"][data-etat="joue"] .evo-tete-texte > :nth-child(3) { animation-delay: 120ms; }
.evo[data-mode="mouvement"][data-etat="joue"] .evo-tete-texte > :nth-child(4) { animation-delay: 180ms; }
.evo[data-mode="mouvement"][data-etat="joue"] .evo-actions { animation: evo-fondu 300ms var(--courbe) 200ms both; }
.evo[data-mode="mouvement"][data-etat="joue"] .evo-carte { animation: evo-monte 300ms var(--expo) both; animation-delay: calc(250ms + var(--evo-rang, 0) * 80ms); }
.evo[data-mode="mouvement"]:is([data-etat="joue"], [data-etat="sortie"]) .evo-avant { animation: evo-part 350ms var(--courbe) forwards; animation-delay: calc(var(--evo-transformation) + var(--evo-rang, 0) * var(--evo-pas)); }
.evo[data-mode="mouvement"]:is([data-etat="joue"], [data-etat="sortie"]) .evo-apres,
.evo[data-mode="mouvement"]:is([data-etat="joue"], [data-etat="sortie"]) .evo-carte::after { animation: evo-vient 350ms var(--expo) forwards; animation-delay: calc(var(--evo-transformation) + var(--evo-rang, 0) * var(--evo-pas)); }
.evo[data-mode="mouvement"]:is([data-etat="joue"], [data-etat="sortie"]) .evo-ecart { animation: evo-eclot 300ms var(--expo) forwards; animation-delay: calc(var(--evo-ecart) + var(--evo-rang, 0) * var(--evo-pas)); }
.evo[data-mode="mouvement"]:is([data-etat="joue"], [data-etat="sortie"]) .evo-barre { animation: evo-fondu 300ms var(--courbe) forwards; animation-delay: calc(var(--evo-ecart) + var(--evo-rang, 0) * var(--evo-pas)); }
.evo[data-mode="mouvement"]:is([data-etat="joue"], [data-etat="sortie"]) .evo-option { animation: evo-fondu 300ms var(--courbe) forwards; animation-delay: calc(var(--evo-option) + var(--evo-rang, 0) * var(--evo-pas)); }
/* Passée ou finie : la scène s'efface, l'écran normal entre. Ce qui était posé le reste jusqu'au bout : les six règles
   ci-dessus valent aussi en `sortie` (contrôle visuel du 11/11 : sans cela les anciens prix revenaient 280 ms). */
.evo[data-mode="mouvement"][data-etat="sortie"] { animation: evo-sort var(--evo-sortie) var(--courbe) forwards; }

@keyframes evo-monte { from { opacity: 0; transform: translateY(12px); } }
@keyframes evo-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes evo-vient { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes evo-part { to { opacity: 0; transform: translateY(-6px); } }
@keyframes evo-eclot { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes evo-sort { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- Immobile : une carte par ligne, l'avant et l'après côte à côte dans chacune ---------- */
/* Une carte par ligne à toutes les largeurs : trois de front, chacune coupée en deux, ne tiennent pas sous 1 300 px. */
.evo[data-mode="immobile"] .evo-cartes { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 880px; }
.evo[data-mode="immobile"] .evo-carte { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 20px; padding: 16px 24px; }
.evo[data-mode="immobile"] .evo-etat { grid-area: auto; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.evo[data-mode="immobile"] .evo-avant { opacity: 0.78; }
.evo[data-mode="immobile"] .evo-apres { padding-left: 20px; border-left: 1px solid var(--trait); }
.evo[data-mode="immobile"] .evo-barre { display: none; } /* l'ancien prix est déjà écrit dans la colonne d'à côté */
.evo[data-mode="immobile"] .formule-montant { font-size: 2.4rem; }
.evo[data-mode="immobile"] .evo-avant .formule-montant { font-size: 2rem; }
.evo[data-mode="immobile"] .evo-avant .evo-prix-vu { gap: 6px; }
.evo[data-mode="immobile"] .evo-prix { min-height: 0; }
.evo[data-mode="immobile"] .evo-option { margin-top: 5px; padding-top: 8px; }

/* ---------- Le rappel qui reste en tête de l'écran après la scène ---------- */
.offres-rappel { display: grid; gap: 10px; margin: 0 0 30px; padding: 16px 18px; border-radius: var(--rayon-4); background: var(--bleu-voile); border: 1px solid var(--bleu-trait); font-size: 14px; line-height: 1.5; color: var(--encre); }
.offres-rappel-titre { font-size: var(--taille-corps); font-weight: var(--graisse-moyenne); }
.offres-rappel-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.offres-rappel-liste li { padding: 5px 11px; border-radius: var(--rayon-pilule); background: var(--voile-2); border: 1px solid var(--trait); font-size: var(--taille-petit); }
.offres-rappel-texte { max-width: 82ch; color: var(--encre-2); }
/* « Continuer vers Questions » : la destination que l'adresse demandait à l'ouverture (un lien du courriel du lundi). */
.offres-rappel-suite { display: flex; }

/* ---------- Écran moyen : trois cartes étroites de front ; le prix y tient avec sa devise devant (en anglais) ---------- */
@media (min-width: 1101px) and (max-width: 1240px) {
  .evo[data-mode="mouvement"] .evo-carte { padding: 20px; }
  .evo[data-mode="mouvement"] .formule-montant { font-size: 2.6rem; }
}

/* ---------- Tablette et téléphone : une carte par ligne, le nom à gauche, le prix à droite ---------- */
/* Sous 1 100 px, trois cartes de front sont trop étroites pour un prix à trois chiffres et sa devise. */
@media (max-width: 1100px) {
  /* « Passer » reste en haut à droite, sur la ligne de l'étiquette : la tête prend moins de hauteur, les trois cartes se voient. */
  .evo { gap: 18px; }
  .evo-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
  .evo-tete-texte { display: contents; }
  .evo-etiquette { grid-column: 1; grid-row: 1; }
  .evo-actions { grid-column: 2; grid-row: 1; }
  .evo-titre, .evo-texte, .evo-inchange { grid-column: 1 / -1; }
  .evo-texte { font-size: var(--taille-corps); }
  .evo-cartes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .evo-carte { padding: 14px 18px; }
  .evo-option { margin-top: 4px; padding-top: 9px; }
  .evo-etat { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .evo-quand, .evo-option { grid-column: 1 / -1; }
  .evo-nom { grid-column: 1; font-size: 19px; }
  .evo-contenu { grid-column: 1; }
  /* Le prix à droite du nom, son écart dessous : la colonne de gauche garde la place du nom et de ce que la formule compte. */
  .evo-prix { grid-column: 2; grid-row: 2 / span 2; align-self: center; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 4px; min-height: 0; }
  .evo .formule-montant { font-size: 2.3rem; }
  .evo-ecart { margin-bottom: 0; }
  .evo[data-mode="immobile"] .evo-carte { gap: 0 16px; padding: 16px 18px; }
  .evo[data-mode="immobile"] .evo-etat { grid-template-columns: minmax(0, 1fr); }
  .evo[data-mode="immobile"] .evo-apres { padding-left: 16px; }
  .evo[data-mode="immobile"] .evo-prix { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 6px 10px; }
  .evo[data-mode="immobile"] .formule-montant { font-size: 2rem; }
}

/* Téléphone : le titre et le texte de la scène à la taille de l'écran. */
@media (max-width: 900px) {
  .evo-titre { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.6rem); }
  .evo-inchange { padding: 8px 12px; font-size: var(--taille-petit); }
}

/* Petit téléphone : trois chiffres, leur devise et « par mois » tiennent dans la colonne de l'avant. */
@media (max-width: 420px) {
  .evo[data-mode="immobile"] .evo-carte { gap: 0 12px; padding: 14px; }
  .evo[data-mode="immobile"] .evo-apres { padding-left: 12px; }
  .evo[data-mode="immobile"] .formule-montant, .evo[data-mode="immobile"] .evo-avant .formule-montant { font-size: 1.6rem; }
  /* Si « € par mois » ne tient plus à côté du montant, il passe dessous : jamais hors de sa colonne. */
  .evo[data-mode="immobile"] .evo-prix-vu { flex-wrap: wrap; gap: 0 5px; }
  .evo[data-mode="immobile"] .formule-cote { font-size: var(--taille-etiquette); }
}

/* ---------- La scène qui reste : ses cartes dépassent la fenêtre, elle ne s'efface plus seule ---------- */
/* « Voir les offres », sous les cartes : on arrive là après avoir tout lu (js/ecrans/offres-evolution.js, `data-reste`) ;
   à côté, « Continuer vers Questions » quand l'adresse demandait un autre écran. */
.evo-suite { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.evo-suite[hidden] { display: none; }
/* En mouvement, ses boutons viennent après la tête et les cartes (un fondu : seule l'opacité bouge). */
.evo[data-mode="mouvement"][data-etat="joue"] .evo-suite { animation: evo-fondu 300ms var(--courbe) 500ms both; }
.evo-suite .btn { height: auto; min-height: 50px; padding: 8px 20px; border-radius: 13px; font-size: var(--taille-corps); line-height: 1.3; white-space: normal; text-align: center; }

/* Téléphone et écran tactile : « Passer » offre 44 px au doigt ; « Voir les offres » prend la largeur. */
@media (max-width: 640px), (pointer: coarse) {
  .evo-actions .btn { min-width: 44px; min-height: 44px; padding-inline: 16px; }
}
@media (max-width: 640px) {
  .evo-suite .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .evo, .evo *, .evo *::after { animation: none !important; }
  .evo[data-mode] .evo-apres, .evo[data-mode] .evo-ecart, .evo[data-mode] .evo-option, .evo[data-mode] .evo-carte::after { opacity: 1; }
  .evo[data-mode][data-etat] { opacity: 1; }
}