/* Page d'accueil (vitrine) FideliTea — CSS séparé du HTML (retour du 04/09/2026).
   Note honnête sur la demande "ce n'est pas sécure, je veux qu'il soit mieux
   caché" : séparer le CSS n'est PAS une mesure de sécurité — n'importe quel
   visiteur peut toujours l'ouvrir via "Afficher le code source" ou l'onglet
   Réseau du navigateur, fichier séparé ou pas. Le HTML/CSS/JS livrés à un
   navigateur sont par nature publics, ça ne peut pas être "cache" côté client.
   Ce fichier existe pour une vraie raison : organisation du code, mise en cache
   navigateur séparée, lisibilité — pas pour masquer quoi que ce soit. */

:root {
  --blue: #4f8cff;
  --blue-dark: #2f6fe0;
  --pastel: #eaf2ff;
  --pastel-2: #f5f9ff;
  --text: #1c1f26;
  --muted: #6b7280;
  --border: #e2e8f5;
  --white: #ffffff;
  --card-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #ffffff;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(232, 247, 255, 1) 25%,
    rgba(230, 249, 255, 1) 50%,
    rgba(227, 247, 255, 1) 75%,
    rgba(186, 230, 255, 1) 100%
  );
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* En-tête : pleine largeur (retour du 04/09/2026), fond translucide (moins
   opaque qu'avant) + shadow-box assortie à la carte, pour une vraie cohérence
   visuelle. Grandit avec l'écran (clamp à plafond plus haut) au lieu de
   plafonner tôt — reste bien visible sur un grand moniteur. Le contenu
   (.header-inner) garde un max-width pour ne pas s'étirer à l'infini en 4K,
   mais la barre elle-même (fond + ombre) va bord à bord. */

/* Espacements verticaux réglés par Oscar (07/10/2026), exprimés en vh pour
   suivre la hauteur d'écran. Remplacent les anciens <div class="spacer-oscar">
   (1 div = 1vh). Padding et non margin : pas de fusion avec les marges voisines,
   le rendu est identique aux spacers. */

/* Hero des pages internes (fonctionnalités, comment ça marche, tarif, FAQ) */
.hero.page-hero h1 { padding-top: 1vh; }
.hero.page-hero .hero-sub { padding-top: 2vh; padding-bottom: 2vh; }

/* Accueil (body.page-home) */
.page-home .hero h1 { padding-top: 4vh; }
.page-home .hero-sub { padding-top: 3vh; }
.page-home .hero-actions { padding-top: 4vh; }
.page-home .nav-cards { padding-top: 3vh; }
.page-home .hero-visual { padding-top: 3vh; }
.page-home .proof-grid { padding-top: 7vh; }
.page-home .final .microcopy { padding-top: 2vh; }

header {
  position: relative;
  z-index: 10;
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--card-shadow);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px 51px;
  padding: clamp(14px, 2.4vw, 30px) clamp(20px, 5vw, 56px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.logo-icon {
  height: 31px;
  height: clamp(26px, 3vw, 42px);
  width: auto;
  color: var(--blue);
  flex-shrink: 0;
}
.brand span {
  font-size: 23px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.5px;
}
/* Navigation principale (07/10/2026) : liens vers chaque page de la vitrine +
   CTA toujours visible. En dessous de 1100px (iPad compris), les liens passent
   dans un menu déroulant ouvert par le bouton burger. */
.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: clamp(14px, 2vw, 30px);
}
.site-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.site-nav a:hover {
  color: var(--blue-dark);
}
.site-nav a[aria-current="page"] {
  color: var(--blue-dark);
  border-bottom-color: var(--blue);
}
.site-nav .nav-login {
  color: var(--muted);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Accès rapides de l'accueil : chaque carte annonce la page où se trouve la réponse */
/* .section.section-tight / .hero.page-hero : double classe exprès, sinon les
   règles .section et .hero (déclarées plus bas, même spécificité) écrasent ces
   paddings et l'écart sous le titre reste énorme. */
.section.section-tight {
  padding-top: 10px;
  padding-top: clamp(4px, 1vw, 12px);
}
.h2-small {
  font-size: 26px !important;
  font-size: clamp(20px, 2.6vw, 26px) !important;
  margin-bottom: 24px !important;
}
.nav-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
.nav-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 22px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 20px rgba(31, 60, 120, 0.08);
  color: var(--text);
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 60, 120, 0.14);
}
.nav-card h3 {
  font-size: 17px;
  margin: 0 0 6px;
}
.nav-card p {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 14px;
}
.nav-card-cta {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
}

/* En-tête des pages internes : plus court que la hero de l'accueil */
.hero.page-hero {
  padding-top: 51px;
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: 26px;
  padding-bottom: clamp(16px, 2.5vw, 28px);
}
/* Pages internes : titre et sous-titre sur UNE ligne dès 768px (iPad portrait,
   paysage, écrans 16:10). Taille calculée sur le titre le plus long (« Mieux
   qu'une carte à tampons, aussi simple ») pour qu'il tienne dans la largeur
   disponible. Double classe obligatoire : .hero h1 (plus bas) écrasait l'ancienne
   règle .page-hero h1. En dessous de 768px le texte revient à la ligne, équilibré. */
.hero.page-hero {
  max-width: 1200px;
}
.hero.page-hero h1 {
  font-size: 39px;
  font-size: clamp(26px, calc(4vw - 2px), 48px);
  text-wrap: balance;
}
.hero.page-hero .hero-sub {
  max-width: 1000px;
  font-size: 18px;
  font-size: clamp(15px, 1.8vw, 19px);
  text-wrap: balance;
}
/* Lien "page suivante" en bas des pages internes. margin-top 56px : il fusionne
   avec la marge du bloc au-dessus (marges adjacentes), c'est donc la plus grande
   des deux qui compte. padding-bottom (et pas margin) pour un vrai espace avant
   le footer, sinon la marge fusionnerait aussi avec celle du footer. */
.page-next {
  margin-top: 56px;
  padding-bottom: 24px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-bottom: 12px;
}
.footer-nav a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  font-size: 13.5px;
}
.footer-legal {
  margin: 0;
}

/* Refonte du 07/10/2026 : structure en 7 sections (voir commentaire en tête
   d'accueil.html). Même langage visuel qu'avant : fond pastel, cartes
   translucides, bleu, boutons pilule. */
main {
  display: block;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

/* 1. Hero */
.hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 61px;
  padding: clamp(40px, 7vw, 88px) 24px clamp(40px, 6vw, 64px);
  text-align: center;
}
.hero h1 {
  font-size: 54px;
  font-size: clamp(30px, 5.5vw, 54px);
  line-height: 1.12;
  margin: 0 0 20px;
  letter-spacing: -1px;
}
.hero-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: 19px;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 32px 0 14px;
}
.hero-actions .cta {
  padding: 15px 30px;
}
.cta-secondary {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 980px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.cta-secondary:hover {
  background: var(--white);
  transform: translateY(-1px);
}
.microcopy {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* Emplacement du visuel produit (capture/vidéo à fournir par Oscar) */
.hero-visual {
  max-width: 720px;
  margin: 51px auto 0;
  margin: clamp(36px, 5vw, 56px) auto 0;
}
.visual-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 24px;
  border: 2px dashed var(--border);
  background: rgba(255, 255, 255, 0.45);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Sections génériques */
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 82px 24px 0;
  padding: clamp(48px, 8vw, 96px) 24px 0;
  text-align: center;
}
.section h2 {
  font-size: 40px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.6px;
  margin: 0 0 16px;
}
.section-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}

/* Carte translucide réutilisée par toutes les grilles */
.proof-item,
.pillar,
.feature,
.pledge,
.compare,
.faq details {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(31, 60, 120, 0.08);
}

/* 2. Preuve */
.proof {
  padding-top: 40px;
  padding-top: clamp(24px, 4vw, 40px);
}
.proof-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}
.proof-item {
  padding: 28px 24px;
  text-align: left;
}
.proof-figure {
  font-size: 40px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--blue-dark);
  margin: 0 0 8px;
}
.proof-text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.proof-source {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

/* 3. Piliers */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-top: 40px;
}
.pillar {
  padding: 28px 24px;
  text-align: left;
}
.pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  margin-bottom: 14px;
}
.pillar h3,
.feature h3,
.pledge h3 {
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.pillar p,
.feature p,
.pledge p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* 4. Fonctionnalités */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-top: 40px;
}
.feature {
  padding: 26px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.feature p {
  flex: 1;
}
.feature .feature-detail {
  flex: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}

/* 5. Comparaison au statu quo */
.compare {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 8px 24px;
  text-align: left;
}
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.compare-row:last-child {
  border-bottom: none;
}
.compare-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compare-head span:last-child {
  color: var(--blue-dark);
}
.compare .no {
  color: var(--muted);
}
.compare .yes {
  font-weight: 600;
  color: var(--text);
}

.steps-title {
  font-size: 20px;
  margin: 56px 0 20px;
}
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}
.steps li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}
.steps li::before {
  content: counter(step);
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.steps li span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* FAQ */
.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.faq details {
  padding: 0 22px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 28px 18px 0;
  font-weight: 600;
  font-size: 15.5px;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--blue);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
/* Réponse ouverte : même espace au-dessus (sous la question) et en dessous */
.faq details p {
  margin: 8px 0 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* 6. Engagements */
.pledges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-top: 40px;
}
.pledge {
  padding: 26px 24px;
  text-align: left;
}

/* 7. Conclusion */
.final {
  padding-bottom: 82px;
  padding-bottom: clamp(56px, 8vw, 96px);
}
.final .cta-large {
  display: inline-block;
  margin: 32px 0 14px;
  padding: 16px 36px;
  font-size: 16px;
}

/* Carte tarif */
.pricing {
  max-width: 420px;
  margin: 61px auto 56px;
  margin: clamp(40px, 6vw, 64px) auto clamp(40px, 6vw, 56px);
  text-align: left;
}
.flip-card {
  position: relative;
  perspective: 1200px;
  min-height: 480px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
/* Carte transparente (retour du 04/09/2026) : fond blanc translucide + flou au
   lieu d'un pastel opaque, cohérent avec l'en-tête. */
.flip-face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}
.flip-face-back {
  transform: rotateY(180deg);
}

.info-btn {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.info-btn:hover {
  background: var(--pastel);
  transform: scale(1.08);
}

.plan-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.plan-price {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 4px;
}
.plan-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}
.plan-desc {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
}

.plan-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.plan-features li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--blue);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z"/></svg>')
    no-repeat center / 12px;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z"/></svg>')
    no-repeat center / 12px;
}

.cta {
  display: block;
  text-align: center;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px;
  border-radius: 980px;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 6px 16px rgba(79, 140, 255, 0.35);
}
.cta:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 140, 255, 0.4);
}
.cta:active {
  transform: translateY(0);
}

/* Face arrière */
.back-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 18px;
}
.back-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
}
.back-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.back-list li:last-child {
  border-bottom: none;
}
.back-list li span:first-child {
  color: var(--muted);
}
.back-list li span:last-child {
  font-weight: 600;
}
.back-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px;
  border-radius: 980px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.back-btn:hover {
  background: var(--white);
  transform: translateY(-1px);
}

/* Pied de page en bande pleine largeur, même traitement que le header (fond
   translucide + flou + ombre, inversée vers le haut) pour bien le démarquer. */
footer {
  width: 100%;
  margin-top: 61px;
  margin-top: clamp(40px, 6vw, 64px);
  text-align: center;
  padding: 28px 20px 36px;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: rgba(0, 0, 0, 0.19) 0px -10px 20px, rgba(0, 0, 0, 0.23) 0px -6px 6px;
}
footer a {
  color: var(--muted);
}

.cta-small {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  white-space: nowrap;
}

/* Responsive : iPad portrait/paysage (768-1024px) et téléphone */
@media (max-width: 1024px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .proof-grid,
  .pillars,
  .features,
  .pledges,
  .steps {
    grid-template-columns: 1fr;
  }
  .compare {
    padding: 4px 16px;
  }
  .compare-row {
    grid-template-columns: 1.3fr 1fr 1fr;
    font-size: 13.5px;
    gap: 8px;
  }
  .compare-head {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .flip-card,
  .flip-card-inner {
    min-height: 540px;
  }
  .plan-price {
    font-size: 36px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .cta,
  .cta-secondary {
    text-align: center;
  }
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .compare-row {
    grid-template-columns: 1fr 1fr;
  }
  .compare-row > span:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
  }
  .compare-head > span:first-child {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .pricing {
    max-width: 440px;
  }
}

@media (max-width: 960px) {
  .header-inner {
    position: relative;
  }
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--card-shadow);
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
  }
  .site-nav a:last-child {
    border-bottom: none;
  }
  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--border);
  }
}
@media (max-width: 900px) {
  .nav-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .nav-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .header-actions .cta-small {
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* Vieux iPad (Safari < 14.1) : pas de "gap" sur les conteneurs flex. Ces Safari ne
   connaissent pas non plus "inset", on s'en sert pour les détecter et remplacer
   les gap par des marges. Aucun effet sur les navigateurs récents. */
@supports not (inset: 0) {
  .header-inner > * + * { margin-left: 12px; }
  .brand > * + * { margin-left: 10px; }
  .site-nav > a + a { margin-left: 24px; }
  .header-actions > * + * { margin-left: 10px; }
  .nav-toggle span + span { margin-top: 4px; }
  .hero-actions > * { margin: 7px; }
  .footer-nav a { margin: 4px 10px; }
  .steps li > * + * { margin-top: 6px; }
  .faq details + details { margin-top: 12px; }
  .plan-features li::before { margin-right: 10px; }
  .back-list li span + span { margin-left: 10px; }
  .visual-placeholder { min-height: 280px; }
  @media (max-width: 960px) {
    .site-nav > a + a { margin-left: 0; }
  }
}