/* ==========================================================================
   tarif-ipad.css — page Tarification iPad (lycée Bon Secours)
   Scopé sous .ipad pour cohabiter avec campus/style.css sans !important.
   ========================================================================== */

.ipad {
  /* Design tokens locaux (à remonter en tokens.css partagé en P1) */
  --ipad-navy: #053d5b;
  --ipad-teal: #4691a8;
  --ipad-teal-dark: #3a7a8f;
  --ipad-ink: #062f3c;
  --ipad-text: #333;
  --ipad-muted: #666;
  --ipad-line: #d9d9d9;
  --ipad-bg: #f3f3f3;
  --ipad-card: #fff;
  --ipad-radius: 12px;
  --ipad-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  --ipad-shadow-hover: 0 8px 20px rgba(5, 61, 91, 0.15);
  --ipad-maxw: 980px;

  color: var(--ipad-text);
  line-height: 1.6;
}

.ipad *,
.ipad *::before,
.ipad *::after { box-sizing: border-box; }

/* En-tête de page */
.ipad__hero {
  text-align: center;
  padding: 64px 20px 40px;
  background: var(--ipad-card);
  border-bottom: 2px solid var(--ipad-line);
}
.ipad__hero-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--ipad-navy);
}
.ipad__hero-sub {
  margin: 10px 0 0;
  font-size: 1.15rem;
  color: var(--ipad-muted);
}

/* Sections alternées */
.ipad__section { padding: 56px 20px; }
.ipad__section:nth-of-type(even) { background: var(--ipad-bg); }
.ipad__inner { max-width: var(--ipad-maxw); margin: 0 auto; }

.ipad__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--ipad-teal);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
.ipad__title {
  margin: 0 0 24px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--ipad-ink);
}
.ipad__lead { font-size: 1.1rem; }
.ipad__note { margin-top: 18px; font-size: 0.95rem; color: var(--ipad-muted); }
.ipad__price { color: var(--ipad-teal); font-weight: 800; }

/* Listes d'instructions / contenu */
.ipad__list { margin: 16px 0; padding-left: 22px; line-height: 1.8; }
.ipad__list li { margin-bottom: 10px; }

/* Bouton */
.ipad__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--ipad-teal);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.ipad__btn:hover { background: var(--ipad-teal-dark); transform: translateY(-2px); }
.ipad__cta { text-align: center; margin: 36px 0; }

/* Grille de tarifs */
.ipad__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Style P10 — minimal sans cercle, grande icône line épaissie */
.ipad__card {
  background: var(--ipad-card);
  border: 1px solid var(--ipad-line);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--ipad-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ipad__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ipad-shadow-hover);
  border-color: var(--ipad-teal);
}
.ipad__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ipad-teal);
  transition: color 0.25s ease, transform 0.25s ease;
}
.ipad__card-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ipad__card:hover .ipad__card-icon { transform: scale(1.08); }

.ipad__card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ipad-ink);
  margin-bottom: 14px;
}
.ipad__card-price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--ipad-teal);
  line-height: 1;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ipad-line);
}
.ipad__card-desc { font-size: 0.92rem; color: var(--ipad-muted); line-height: 1.55; margin: 0; }

/* Contact */
.ipad__contact { text-align: center; }
.ipad__contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ipad-teal);
  text-decoration: none;
}
.ipad__contact-mail:hover { color: var(--ipad-teal-dark); text-decoration: underline; }

/* Apparition au scroll (progressive enhancement, voir JS) */
.ipad__section[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.ipad__section.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ipad__section[data-reveal] { opacity: 1; transform: none; transition: none; }
  .ipad__btn:hover, .ipad__card:hover { transform: none; }
}

/* Responsive */
@media (max-width: 1024px) { .ipad__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .ipad__grid { grid-template-columns: 1fr; }
  .ipad__section { padding: 40px 16px; }
}