/* Pages Tarifs et Télécharger d'Eyno, dans le cadre commun (socle.css) : ce qui leur est propre. */

/* Ouverture d'une page : sur-titre, titre, chapeau, alignés sur la marge */
.ouverture { padding-block: 96px 72px; display: flex; flex-direction: column; gap: var(--spacing-16); align-items: flex-start; }
.ouverture .boutons { margin-top: var(--spacing-8); }
.tranche { padding-block: 72px; }
.tranche:last-of-type { padding-bottom: 120px; }
.entete-section { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--spacing-24); }

/* Tarifs : l'offre, un panneau blanc avec le ciel derrière les huit icônes */
.offre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--spacing-24); align-items: stretch;
  background: var(--papier); border-radius: var(--radius-product-panels); padding: var(--spacing-12); box-shadow: inset 0 0 0 1px var(--filet), 0 30px 90px -50px #6ebe8c; }
.offre .gauche { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: var(--spacing-16); }
.prix { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.prix b { font: var(--font-weight-regular) 75px/0.9 var(--font-acidgrotesk); letter-spacing: -.75px; }
.prix b { white-space: nowrap; }   /* « 59,90 € » ne se coupe jamais avant le symbole */
.prix span { color: var(--ardoise); }
.prix-second b { font-size: 40px; }
.offre .note { margin: 0; font-size: 14px; color: var(--ardoise); }
.offre .boutons { margin-top: 6px; }
.grille-icones { position: relative; overflow: hidden; border-radius: calc(var(--radius-product-panels) - 8px); background: var(--ciel); padding: 32px 28px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; align-content: center; }
.grille-icones::before { content: ""; position: absolute; width: 50%; height: 160px; left: -10%; top: -60px; border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(30px); }
.grille-icones figure { position: relative; margin: 0; text-align: center; font-size: 12.5px; color: var(--ardoise); }
.grille-icones img { width: 100%; max-width: 76px; aspect-ratio: 1; display: block; margin: 0 auto 6px; transition: transform .45s var(--ressort); }
.grille-icones figure:hover img { transform: translateY(-3px) scale(1.06); }

.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); }
.colonnes h3, .carte h3 { margin: 0 0 8px; font: var(--font-weight-regular) 22px/1.2 var(--font-acidgrotesk); letter-spacing: -.01em; }
.carte p { margin: 0; color: var(--ardoise); }
.carte p + p { margin-top: 8px; }
.carte a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* Questions : le titre à gauche, les questions repliables à droite (comme l'accueil) */
.questions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--spacing-56); }

/* Télécharger : une carte par app, le texte en haut et le bouton en bas pour que deux cartes voisines restent alignées */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); }
.app { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 4px 18px; align-items: start;
  background: var(--papier); border-radius: var(--radius-cards); padding: var(--card-padding); box-shadow: inset 0 0 0 1px var(--filet); transition: box-shadow .3s; }
.app:hover { box-shadow: inset 0 0 0 1px var(--filet-fort), 0 20px 50px -30px rgba(60,60,110,.3); }
.app img { width: 64px; height: 64px; grid-row: 1 / span 3; }
.app .nom { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.app .nom h3 { margin: 0; font: var(--font-weight-regular) 22px/1.2 var(--font-acidgrotesk); letter-spacing: -.01em; }
.app .nom small { font-size: 13px; color: var(--encre-50); }
.app .phrase { margin: 0; font-size: 15px; color: var(--ardoise); }
.app .bas { grid-column: 2; align-self: end; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; }
.app .bas small { font-size: 12.5px; color: var(--encre-50); }

/* Les étapes d'installation, numérotées comme sur l'accueil */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-12); counter-reset: e; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: var(--card-padding); border-radius: var(--radius-cards);
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); color: var(--ardoise); font-size: 15px; }
.etapes li::before { content: counter(e); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--papier);
  font: var(--font-weight-medium) 14px var(--font-inter); }
.etapes b { color: var(--encre); font-weight: 500; }
.etapes a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .ouverture { padding-block: 64px 48px; }
  .tranche { padding-block: 56px; } .tranche:last-of-type { padding-bottom: 80px; }
  .offre, .questions, .apps, .colonnes, .etapes { grid-template-columns: minmax(0, 1fr); }
  .questions { gap: 0; }
  .offre .gauche { padding: 18px 16px 12px; }
  .prix b { font-size: var(--text-section-display); }
  .prix-second b { font-size: 32px; }
  .grille-icones { padding: 22px 16px; gap: 14px 10px; }
  .app { grid-template-columns: 52px minmax(0, 1fr); }
  .app img { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .grille-icones img, .app { transition: none; } }