/* =========================================================================
   WARNING V2 — couche posée PAR-DESSUS assets/css/style.css (maquette de
   comparaison, 08/10, compétence ui-ux-pro-max).

   Direction : « Minimalism & Swiss Style » recommandé par la compétence pour
   un service local qu'on réserve sur la foi des avis — plat, contrasté,
   lisible ; avis et adresse visibles tôt. L'identité WARNING (bleu nuit +
   orange, Sora / Poppins auto-hébergées) est GARDÉE ; le vert générique que
   la compétence proposait ne l'est pas.

   Pourquoi une couche et pas une feuille neuve : main.js fabrique une bonne
   partie de la page (simulateur, sessions, formulaires, mur des réussites)
   avec les classes de style.css. Les réécrire toutes, c'était refaire le site.
   ========================================================================= */

:root {
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(11, 20, 55, .06), 0 2px 6px rgba(11, 20, 55, .05);
  --shadow-md: 0 8px 24px rgba(11, 20, 55, .10);
  --shadow-lg: 0 14px 36px rgba(11, 20, 55, .14);
  /* le dégradé orange → ambre portait du texte blanc à 2,2 de contraste :
     un orange FONCÉ uni (5,2 sous le blanc) le remplace partout */
  --grad-warning: #ff5a1f;      /* l'orange du LOGO, en aplat sous du bleu nuit (5,8) */
  --grad-navy: #0b1437;
  --muted: #4f5875;            /* 6,4 sur le fond — l'ancien #5b6480 en faisait 5,6 */
  --nav-h: 68px;
}

/* ---------- Typo : un dégradé de texte est illisible et ne se voit pas ---------- */
.grad-text {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: #f55216;   /* l'orange du logo à peine foncé : h1/h2 seulement (grand texte), 3,0 à 3,4 sur tous les fonds clairs du site — #ff5a1f tombait à 2,9 sur le gris */
}
.section.dark .grad-text, .hero .grad-text, .page-hero .grad-text, .cta-final .grad-text { color: #ff5a1f; } /* l'orange du logo sur le bleu nuit : 5,8 */
h1, h2, h3, h4 { letter-spacing: -.015em; }
.section-head h2 { text-wrap: balance; }

/* ---------- Focus visible partout ---------- */
:focus-visible { outline: 3px solid #c2410c; outline-offset: 3px; border-radius: 6px; }
.section.dark :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: #ffb000; }

/* ---------- Boutons : plats, 48 px, aucun saut au survol ---------- */
.btn {
  min-height: 48px; padding: .75rem 1.35rem; border-radius: 12px;
  justify-content: center; box-shadow: none;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-dark:hover, .btn-outline:hover { transform: none; box-shadow: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: #ff5a1f; color: #0b1437; }
.btn-primary:hover { background: #ff7a45; color: #0b1437; }
.btn-dark:hover { background: #1a2a6c; }
.btn-outline { border: 2px solid #c8cde0; }
.btn-outline:hover { border-color: #c2410c; color: #9a3412; }
.btn-ghost { backdrop-filter: none; border-width: 2px; }

/* ---------- Navigation : toujours blanche, plus de bascule transparente ---------- */
.nav, .nav.scrolled {
  height: var(--nav-h); background: #fff; backdrop-filter: none;
  box-shadow: none; border-bottom: 1px solid var(--line);
}
.nav .brand { color: var(--navy); }
.nav .nav-links a { color: var(--ink); }
.nav .nav-links a:hover { background: #fff1e8; color: #9a3412; }
.nav .burger span { background: var(--navy); }
.brand .logo { animation: none; box-shadow: none; border-radius: 11px; }
.nav-links .btn { min-height: 44px; padding: .55rem 1rem; }
.nav-links .btn-primary, .nav .nav-links .btn-primary { color: #0b1437; }
.nav .nav-links .btn-primary:hover { background: #ff7a45; color: #0b1437; }

/* ---------- Sections : moins d'air perdu, fonds unis ---------- */
.section { padding: 4.5rem 0; }
.section.dark { background: var(--navy); }
.section-head { margin-bottom: 2.4rem; }
.eyebrow { color: var(--orange-ink); }
.section.dark .eyebrow { color: #ff5a1f; }

/* ---------- Cartes : bordure nette, ombre légère, rien ne bouge ---------- */
.price-card, .rate-card, .offer-card, .cards-grid > * {
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.price-card:hover, .rate-card:hover, .offer-card:hover, .cards-grid > *:hover {
  transform: none; box-shadow: var(--shadow-md); border-color: #c8cde0;
}
.price-card.featured { background: var(--navy); border: 0; }
[data-tilt] { transform: none !important; }


/* onglets des tarifs : icône + texte, cible de 44 px */
[data-tab] { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; }
[data-tab] svg { width: 18px; height: 18px; flex: none; }

/* étapes : pastille unie */
.step .s-num::after { background: #ff5a1f; color: #0b1437; box-shadow: none; }
.step:hover .s-num { transform: none; }

/* appel final : bleu nuit (le blanc sur dégradé orange tombait à 2,2) */
.cta-final { background: var(--navy); color: #fff; }
.cta-final::before { content: none; }

/* bandeau de confiance plus discret */
.trust { padding: 1.4rem 0; }

/* ---------- Mouvement : les apparitions sont celles du site ; coupées si l'appareil le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Écrans ---------- */
@media (max-width: 960px) {
  /* le menu déroulé (burger) reste sur fond blanc */
  .nav-links a { color: var(--ink); }
}
@media (max-width: 560px) {
  .section { padding: 3.25rem 0; }
}

/* ---------- Onglets des tarifs : ils passent à la ligne au lieu de déborder ---------- */
.toggle-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; border-radius: 16px; width: fit-content; margin-inline: auto; }
.toggle-tabs button { border-radius: 12px; }
.toggle-tabs button.active { background: #ff5a1f; color: #0b1437; box-shadow: none; }
@media (max-width: 760px) {
  .toggle-tabs { width: 100%; }
  .toggle-tabs button { flex: 1 1 calc(50% - 4px); justify-content: center; padding: .6rem .5rem; }
}