/* =========================================================
   Matrice Ultime 2 — RESPIRATION
   Feuille additive chargée en dernier.
   Objectif : resserrer les grands vides verticaux sans
   toucher au design, aux couleurs ni aux polices.
   Aucune règle ici ne change une couleur ou une famille
   typographique : uniquement des hauteurs et des marges.
   ========================================================= */

/* ---------------------------------------------------------
   1. Rythme général des sections
   Avant : 16vh de padding haut ET bas (≈183 px sur un écran
   de 1142 px), soit près d'un tiers d'écran vide entre
   chaque bloc. On garde une vraie respiration, mais moitié
   moins bavarde.
   --------------------------------------------------------- */
.section {
  padding-block: clamp(3.5rem, 8.5vh, 6.5rem);
}

/* ---------------------------------------------------------
   2. « Les grandes analyses » — le plus gros vide du site
   L'en-tête réservait 70svh (≈640 px) pour trois lignes de
   texte, et chaque offre 86svh (≈685 px) pour un titre, un
   prix et cinq puces. On conserve le principe « un chapitre
   par offre » — c'est ce qui donne la plongée au scroll —
   mais chaque chapitre tient désormais dans une hauteur
   lisible au lieu d'un écran presque vide.
   --------------------------------------------------------- */
#tarifs {
  padding-top: clamp(3.5rem, 9vh, 7rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

#tarifs .calc__head {
  min-height: clamp(16rem, 34svh, 24rem);
  padding-block: 0;
}

#tarifs .pricing {
  margin-top: clamp(1rem, 3vh, 2.2rem) !important;
}

#tarifs .ptier,
#tarifs .ptier.is-formed,
#tarifs .ptier:hover,
#tarifs .ptier:focus-within,
#tarifs .ptier.is-expanded,
#tarifs .ptier.is-cobra-lit {
  min-height: clamp(19rem, 46svh, 30rem);
  padding-block: clamp(1.6rem, 4vh, 3.2rem) !important;
}

/* Le détail dépliable n'a plus besoin d'un couloir vide au-dessus. */
#tarifs .ptier__detail {
  margin-top: clamp(.5rem, 1.4vh, 1rem);
}

/* L'alternance gauche/droite est conservée — c'est elle qui donne
   la plongée — mais chaque colonne éditoriale passe de 42 % à 50 %
   de la largeur : le vide latéral se resserre sans casser le rythme. */
@media (min-width: 1025px) {
  #tarifs .ptier:nth-child(odd) > * {
    grid-column: 2 / 8;
  }
  #tarifs .ptier:nth-child(even) > * {
    grid-column: 6 / 12;
  }
}

/* ---------------------------------------------------------
   2 bis. Sens du défilement sur les offres
   En descendant, elles montent depuis le bas ; en remontant,
   elles descendent depuis le haut. Le mouvement est donc
   cohérent avec le geste, dans les deux sens.
   --------------------------------------------------------- */
html[data-scroll-dir="up"] #tarifs.tariff-motion-ready .ptier:nth-child(odd):not(.is-analysis-active) {
  transform: translate3d(-14vw, -18vh, -300px) rotateY(13deg) rotateX(-8deg) !important;
}
html[data-scroll-dir="up"] #tarifs.tariff-motion-ready .ptier:nth-child(even):not(.is-analysis-active) {
  transform: translate3d(14vw, -18vh, -300px) rotateY(-13deg) rotateX(-8deg) !important;
}

/* ---------------------------------------------------------
   3. « Réservez votre consultation »
   340 px de contenu enfermés dans 706 px de section.
   --------------------------------------------------------- */
#consultation.section {
  padding-block: clamp(3rem, 7.5vh, 5.5rem);
}

.cta-final__card {
  padding-block: 0;
}

/* ---------------------------------------------------------
   4. Entrée du calculateur
   Le canevas des formes vivantes occupait jusqu'à 590 px
   alors que la forme y est dessinée petite : beaucoup de
   noir autour. On resserre le cadre autour du dessin.
   --------------------------------------------------------- */
.mx-entry__lead {
  padding: clamp(3.5rem, 8vh, 6.5rem) 0 clamp(2rem, 5vh, 4rem);
}

.mx-entry__motion {
  height: clamp(280px, 40svh, 440px);
  min-height: 280px;
}

/* La phrase d'introduction, la date et le bouton forment
   un bloc centré cohérent au lieu d'un texte centré posé
   au-dessus d'une ligne alignée à gauche. */
.mx-entry__copy {
  width: min(100%, 60rem);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   5. Pied de page
   --------------------------------------------------------- */
.foot {
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
}

/* ---------------------------------------------------------
   6. Téléphone — on resserre encore, les grands vides y sont
   beaucoup plus pénibles qu'au bureau.
   --------------------------------------------------------- */
@media (max-width: 720px) {
  .section {
    padding-block: clamp(2.5rem, 6vh, 4rem);
  }

  #tarifs {
    padding-top: clamp(2.5rem, 6vh, 4rem);
    padding-bottom: clamp(1.8rem, 4vh, 3rem);
  }

  #tarifs .calc__head {
    min-height: 0;
  }

  /* Sélecteurs alignés sur ceux de matrice-4-definitive.css :
     sans cela la règle d'origine (padding raccourci + !important)
     resterait prioritaire. */
  #tarifs .pricing .ptier,
  #tarifs.tariff-motion-ready .pricing .ptier,
  #tarifs.tariff-motion-ready .pricing .ptier:not(.is-analysis-active),
  #tarifs.tariff-motion-ready .pricing .ptier.is-analysis-active,
  #tarifs.tariff-motion-ready .pricing .ptier.is-analysis-revealed {
    min-height: 0 !important;
    padding-block: 1.7rem !important;
  }

  #consultation.section {
    padding-block: clamp(2.5rem, 6vh, 4rem);
  }

  .mx-entry__lead {
    padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(1.5rem, 4vh, 3rem);
  }

  .mx-entry__motion {
    height: clamp(230px, 32svh, 330px);
    min-height: 230px;
  }
}

/* ---------------------------------------------------------
   7. Sens du défilement
   `data-scroll-dir` est posé sur <html> par main.js. Les
   éléments qui n'ont pas d'animation JS s'en servent pour
   arriver depuis le bon côté : en descendant depuis la
   gauche, en remontant depuis la droite.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-scroll-dir="up"] .reveal-mirror {
    --reveal-from: 1;
  }
  html[data-scroll-dir="down"] .reveal-mirror {
    --reveal-from: -1;
  }
}