/* Site vitrine d'Helmane (ASSISTANTE-119). Les polices sont servies d'ici : la politique
   de sécurité n'autorise aucune origine tierce, et une police chargée chez Google lui
   transmettrait l'adresse de chaque visiteur. Inter et Inter Tight, licence SIL OFL 1.1. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("inter-tight-latin.woff2") format("woff2");
}

/* Mise en page : tout converge vers une seule action, laisser son numéro. Héros centré
   (titre géant, carte de rappel, Marie qui dépasse de la carte), puis des bandes qui
   alternent deux fonds chauds. Sombre, et seulement sombre (décision de Helmi du
   04/10/2026) : une salle de restaurant le soir. */
:root {
  color-scheme: dark;
  --bg:        #14100D;
  --bg-2:      #1B1612;
  --card:      #241D18;
  --card-2:    #2E251E;
  --ink:       #FBF6EF;
  --muted:     #BDB0A2;
  --faint:     #978A7D;
  --accent:    #FF9B3D;
  --accent-2:  #FFC65C;
  --accent-ink:#22130A;
  --accent-soft: rgba(255, 155, 61, .14);
  --live:      #5BD69A;
  --line:      rgba(251, 246, 239, .12);
  --line-soft: rgba(251, 246, 239, .07);
  --glow:      rgba(255, 155, 61, .30);
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 24px 60px -24px rgba(0,0,0,.8);

  --display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --shell: 1140px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --r: 20px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
img { max-width: 100%; }
.reserve { position: absolute; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .15vw, 1.07rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  word-spacing: .06em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.accent { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px;
}

/* ---------- boutons, pastilles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 1rem/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn--go {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--go:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.btn--small { padding: .62rem 1.05rem; font-size: .9rem; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .9rem; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .86rem; font-weight: 600; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .dot { animation: battre 2.2s ease-in-out infinite; }
}
@keyframes battre { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- personnages ---------- */
.perso {
  display: block; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--card-2), var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--line);
}
.perso svg { display: block; width: 100%; height: 100%; }
.perso--marie { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 38%, var(--card)), var(--card)); }

/* ---------- en-tête ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.top__in { display: flex; align-items: center; gap: 1.4rem; min-height: 64px; }
.marque {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font: 800 1.28rem/1 var(--display); letter-spacing: -.03em;
}
.marque__logo {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  display: grid; place-items: center; color: var(--accent-ink);
}
.top nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.top nav a.lien { font-size: .92rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.top nav a.lien:hover { color: var(--ink); }
.top nav .btn--client { display: none; }
/* Téléphone : les liens de la page s'effacent, pas l'accès à l'espace client — un
   restaurateur déjà client arrive ici depuis son téléphone et doit pouvoir se connecter. */
@media (max-width: 760px) {
  .top nav { gap: .5rem; }
  .top nav a.lien { display: none; }
  .top nav .btn--client { display: inline-flex; }
}
@media (max-width: 430px) {
  .top__in { gap: .6rem; }
  .marque { font-size: 1.08rem; gap: .4rem; }
  .top nav .btn--small { padding: .55rem .72rem; font-size: .8rem; }
}

/* ---------- héros ---------- */
.heros { position: relative; padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(2.2rem, 5vw, 3.6rem); text-align: center; }
.heros::before {
  content: ""; position: absolute; inset: -10% 0 auto 0; height: 560px; pointer-events: none;
  background: radial-gradient(48% 60% at 50% 34%, var(--glow), transparent 70%);
  opacity: .8;
}
.heros > .shell { position: relative; }
.heros h1 { font-size: clamp(2.6rem, 1.1rem + 6.2vw, 5.4rem); margin: 1.3rem auto 1rem; }
.heros__sous { font-size: clamp(1.06rem, 1rem + .5vw, 1.32rem); color: var(--muted); max-width: 44ch; margin-inline: auto; }

.rappel-zone { position: relative; max-width: 460px; margin: clamp(5.6rem, 9vw, 6.4rem) auto 0; }
.rappel-zone > .perso {
  position: absolute; left: 50%; top: 0; width: 104px; height: 104px;
  transform: translate(-50%, -68%); z-index: 2;
  box-shadow: 0 0 0 6px var(--bg), 0 0 44px 4px var(--glow);
}
.onde { position: absolute; left: 50%; top: 0; transform: translate(62px, -44px); display: flex; gap: 4px; align-items: center; height: 30px; z-index: 2; }
.onde i { width: 4px; border-radius: 4px; background: var(--accent); height: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .onde i { animation: parler 1.1s ease-in-out infinite; }
  .onde i:nth-child(2) { animation-delay: .15s; } .onde i:nth-child(3) { animation-delay: .3s; } .onde i:nth-child(4) { animation-delay: .45s; }
}
.onde i:nth-child(1) { height: 40%; } .onde i:nth-child(2) { height: 90%; } .onde i:nth-child(3) { height: 60%; } .onde i:nth-child(4) { height: 30%; }
@keyframes parler { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }

.rappel {
  position: relative; background: var(--card); border-radius: 26px;
  padding: 3.3rem 1.25rem 1.15rem; box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  text-align: left;
}
.rappel__titre { text-align: center; font: 700 1.06rem/1.3 var(--body); margin-bottom: .95rem; }
.rappel__titre small { display: block; font-weight: 500; font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.rappel__champ { display: flex; flex-direction: column; gap: .6rem; }
.rappel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rappel input[type="tel"] {
  width: 100%; padding: 1rem 1.15rem; border-radius: 16px; border: 0;
  background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line);
  font: 600 1.15rem/1.2 var(--body); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.rappel input[type="tel"]::placeholder { color: var(--faint); font-weight: 500; }
.rappel input[type="tel"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.rappel .btn { width: 100%; padding-block: 1.08rem; font-size: 1.06rem; border-radius: 16px; }
.rappel__aide { margin-top: .8rem; font-size: .8rem; color: var(--faint); text-align: center; }
.rappel__erreur { margin-top: .6rem; font-size: .87rem; font-weight: 600; color: var(--accent); text-align: center; }
.rappel__fait { text-align: center; padding: .2rem .3rem .4rem; }
.rappel__fait b { display: block; font: 800 1.3rem/1.2 var(--display); letter-spacing: -.02em; margin-bottom: .45rem; }
.rappel__fait p { color: var(--muted); font-size: .95rem; }
.rappel__fait button { margin-top: .9rem; }
/* Un champ que seul un robot remplit : hors de l'écran, hors de la tabulation. */
.rappel__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rappel .btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.gages { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: 1.5rem; font-size: .9rem; color: var(--muted); }
.gages span { display: inline-flex; align-items: center; gap: .45rem; }
.gages svg { color: var(--live); flex: none; }

/* petites bulles autour de la carte, écrans larges seulement */
.bulle {
  position: absolute; display: flex; align-items: center; gap: .65rem; text-align: left;
  background: var(--card); border-radius: 18px; padding: .65rem .9rem .65rem .65rem;
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line); font-size: .86rem; line-height: 1.3; width: 236px;
}
.bulle .perso { width: 40px; height: 40px; }
.bulle b { display: block; font-weight: 700; }
.bulle span { color: var(--muted); }
.bulle--g { right: calc(100% + 1.8rem); top: 18%; transform: rotate(-3deg); }
.bulle--d { left: calc(100% + 1.8rem); top: 46%; transform: rotate(2.5deg); }
@media (prefers-reduced-motion: no-preference) {
  .bulle--g { animation: flotter 6s ease-in-out infinite; }
  .bulle--d { animation: flotter 7s ease-in-out -2s infinite; }
}
@keyframes flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 1060px) { .bulle { display: none; } }

/* ---------- la scène : trois personnages ---------- */
.scene { padding-block: clamp(1.4rem, 4vw, 2.4rem) clamp(3rem, 7vw, 5rem); }
.scene__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2.5vw, 2rem); position: relative; }
.scene__in::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 44px; border-top: 2px dashed var(--line); z-index: 0;
}
.role { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
.role .perso { width: 88px; height: 88px; box-shadow: 0 0 0 6px var(--bg), inset 0 0 0 1px var(--line); }
.role b { font: 800 1.14rem/1.2 var(--display); letter-spacing: -.01em; word-spacing: .08em; }
.role p { font-size: .93rem; color: var(--muted); max-width: 26ch; }
@media (max-width: 640px) {
  .scene__in { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .scene__in::before { display: none; }
  .role { flex-direction: row; text-align: left; align-items: center; gap: 1rem; }
  .role .perso { width: 68px; height: 68px; box-shadow: inset 0 0 0 1px var(--line); }
  .role p { max-width: none; }
}

/* ---------- bandes ---------- */
.bande { padding-block: clamp(3.4rem, 8vw, 6.4rem); }
.bande--2 { background: var(--bg-2); }
.tete { max-width: 40ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.tete--c { margin-inline: auto; text-align: center; }
.tete .sur { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tete h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); margin-block: .7rem .85rem; }
.tete p { color: var(--muted); font-size: 1.06rem; }

/* ---------- l'appel ---------- */
.appel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
@media (max-width: 880px) { .appel { grid-template-columns: minmax(0, 1fr); } }
.appel .tete { margin-bottom: 1.4rem; }
.appel ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.appel li { display: flex; gap: .7rem; align-items: baseline; color: var(--muted); }
.appel li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
.appel li b { color: var(--ink); font-weight: 600; }

.combine { background: var(--card); border-radius: 28px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); overflow: hidden; }
.combine__haut { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.combine__haut .perso { width: 42px; height: 42px; }
.combine__haut b { display: block; font-weight: 700; line-height: 1.2; }
.combine__haut span { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.combine__haut button { margin-left: auto; }
/* Le nom et l'état de l'appel se partageaient la largeur côte à côte : trois lignes
   chacun sur téléphone, l'heure coupée en deux, et encore deux lignes dans la colonne
   d'un grand écran. Le nom passe au-dessus, partout (recette du 05/10/2026). */
.combine__haut > span:not(.perso) { flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.fil { padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.tour { max-width: 84%; padding: .6rem .9rem; border-radius: 18px; font-size: .94rem; line-height: 1.45; }
.tour--marie { align-self: flex-start; background: var(--card-2); border-bottom-left-radius: 6px; }
.tour--client { align-self: flex-end; background: var(--accent); color: var(--accent-ink); font-weight: 500; border-bottom-right-radius: 6px; }
.tour--outil { align-self: center; max-width: 100%; background: transparent; color: var(--faint); font-size: .8rem; padding: .1rem .5rem; display: inline-flex; gap: .45rem; align-items: center; }
.resa {
  margin: 0 1.1rem 1.1rem; padding: .85rem 1rem; border-radius: 18px; display: flex; align-items: center; gap: .9rem;
  background: color-mix(in srgb, var(--live) 13%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 40%, transparent);
}
.resa__coche { width: 34px; height: 34px; border-radius: 50%; background: var(--live); color: var(--bg); display: grid; place-items: center; flex: none; }
.resa b { display: block; font-weight: 700; line-height: 1.25; }
.resa span { font-size: .86rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .combine.rejoue .tour, .combine.rejoue .resa { opacity: 0; transform: translateY(8px); animation: monter .42s ease forwards; animation-delay: var(--d, 0ms); }
}
@keyframes monter { to { opacity: 1; transform: none; } }

/* ---------- ce qu'elle fait ---------- */
.talents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); }
@media (max-width: 900px) { .talents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .talents { grid-template-columns: minmax(0, 1fr); } }
.talent { background: var(--card); border-radius: var(--r); padding: 1.4rem 1.35rem 1.5rem; box-shadow: inset 0 0 0 1px var(--line-soft); }
.talent__ico { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 1rem; }
.talent h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.talent p { color: var(--muted); font-size: .96rem; }

/* ---------- mise en route : une vraie séquence ---------- */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); counter-reset: etape; }
@media (max-width: 800px) { .etapes { grid-template-columns: minmax(0, 1fr); } }
.etape { position: relative; padding-top: 3.6rem; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: 0; left: 0; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center; font: 800 1.2rem/1 var(--display);
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-ink);
}
.etape h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.etape p { color: var(--muted); font-size: .97rem; max-width: 34ch; }

/* ---------- l'espace du restaurateur ---------- */
.espace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
@media (max-width: 880px) { .espace { grid-template-columns: minmax(0, 1fr); } }
.espace ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.espace li { display: flex; gap: .8rem; align-items: flex-start; }
.espace li svg { color: var(--accent); flex: none; margin-top: .22rem; }
.espace li b { display: block; font-weight: 700; }
.espace li span { color: var(--muted); font-size: .95rem; }
.ecran { max-width: 380px; margin-inline: auto; width: 100%; background: var(--bg); border-radius: 34px; padding: 1.1rem .95rem 1.2rem; box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line), 0 0 0 9px var(--card); }
.ecran__note { text-align: center; font-size: .72rem; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; }
.ecran__jour { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }
.ecran__jour b { font: 800 1.22rem/1.2 var(--display); letter-spacing: -.02em; }
.ecran__jour span { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ecran__h { font-size: .78rem; color: var(--faint); margin: .8rem 0 .35rem; font-variant-numeric: tabular-nums; }
.fiche { background: var(--card); border-radius: 16px; padding: .8rem .9rem; box-shadow: inset 0 0 0 1px var(--line-soft); display: flex; flex-direction: column; gap: .15rem; }
.fiche__l1 { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.fiche__l1 time { color: var(--accent); font-variant-numeric: tabular-nums; }
.fiche__l1 em { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--live); }
.fiche small { color: var(--muted); font-size: .84rem; }
.fiche--marie { box-shadow: inset 0 0 0 1.5px var(--accent); }
.fiche__appel { margin-top: .45rem; display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }
.fiche__appel .perso { width: 24px; height: 24px; }

/* ---------- calcul ---------- */
.calcul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 820px) { .calcul { grid-template-columns: minmax(0, 1fr); } }
.reglages { display: flex; flex-direction: column; gap: 1.3rem; }
.reglage label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--muted); font-size: .96rem; margin-bottom: .4rem; }
.reglage output { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 1.5rem; }
.ticket { background: var(--card); border-radius: 24px; padding: clamp(1.3rem, 3vw, 1.8rem); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.ticket__l { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ticket__l + .ticket__l { border-top: 1px solid var(--line-soft); }
.ticket__l b { color: var(--ink); font-weight: 600; }
.ticket__total { margin-top: .8rem; padding-top: 1rem; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ticket__total span { color: var(--muted); font-size: .95rem; }
.ticket__total strong { font: 800 clamp(2rem, 1.5rem + 2vw, 2.9rem)/1 var(--display); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.ticket__fin { margin-top: .9rem; font-size: .8rem; color: var(--faint); }

/* ---------- formules ---------- */
.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.3rem); align-items: stretch; }
@media (max-width: 900px) { .formules { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }
.formule { position: relative; background: var(--card); border-radius: 26px; padding: 1.7rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: inset 0 0 0 1px var(--line); }
.formule--phare { box-shadow: inset 0 0 0 2px var(--accent), 0 30px 70px -30px var(--glow); }
.formule__badge { position: absolute; top: -.8rem; left: 1.5rem; background: var(--accent); color: var(--accent-ink); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }
.formule h3 { font-size: 1.5rem; }
.formule__qui { color: var(--muted); font-size: .93rem; margin-top: .3rem; min-height: 2.9em; }
.formule__prix { font: 800 clamp(2.8rem, 2rem + 2.6vw, 3.7rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.formule__prix small { font: 500 .95rem/1 var(--body); color: var(--muted); letter-spacing: 0; margin-left: .2rem; }
.formule ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .96rem; }
.formule li { display: flex; gap: .6rem; align-items: baseline; }
.formule li svg { color: var(--accent); flex: none; transform: translateY(2px); }
.formule li small { display: block; color: var(--muted); font-size: .86rem; }
.formule .btn { margin-top: auto; }
/* Sans abonnement : un bandeau sous les trois cartes, pas une quatrième carte — ce n'est
   pas une formule de plus, c'est l'autre façon de payer. */
.formule--libre { margin-top: clamp(.9rem, 2vw, 1.3rem); display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1.5fr) auto; align-items: center; gap: 1.1rem clamp(1.2rem, 3vw, 2.4rem); }
.formule--libre .formule__qui { min-height: 0; }
.formule--libre .formule__prix { font-size: clamp(2.2rem, 1.7rem + 1.8vw, 2.9rem); white-space: nowrap; }
.formule--libre .btn { margin-top: 0; }
@media (max-width: 900px) { .formule--libre { display: flex; align-items: stretch; max-width: 460px; margin-inline: auto; } }
.inclus { margin-top: 1.6rem; background: var(--card); border-radius: 22px; padding: 1.2rem 1.4rem; box-shadow: inset 0 0 0 1px var(--line-soft); display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; font-size: .94rem; color: var(--muted); }
.inclus b { color: var(--ink); }
.pied-prix { margin-top: 1.1rem; font-size: .88rem; color: var(--faint); max-width: 70ch; }

/* ---------- limites ---------- */
.limites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); }
@media (max-width: 700px) { .limites { grid-template-columns: minmax(0, 1fr); } }
.limite { display: flex; gap: 1rem; align-items: flex-start; background: var(--card); border-radius: var(--r); padding: 1.3rem 1.35rem; box-shadow: inset 0 0 0 1px var(--line-soft); }
.limite__non { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.limite h3 { font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.limite p { color: var(--muted); font-size: .94rem; }

/* ---------- questions ---------- */
.faq { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: .6rem; }
.faq details { background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 700; font-size: 1.04rem; display: flex; gap: 1rem; align-items: center; border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font: 500 1.5rem/1 var(--body); color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 1.3rem 1.25rem; color: var(--muted); max-width: 64ch; }

/* ---------- final ---------- */
.final { text-align: center; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: auto 0 -40% 0; height: 520px; pointer-events: none; background: radial-gradient(50% 60% at 50% 60%, var(--glow), transparent 70%); }
.final > .shell { position: relative; }
.final h2 { font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.4rem); max-width: 15ch; margin-inline: auto; }
.final > .shell > p { color: var(--muted); max-width: 44ch; margin: 1rem auto 0; font-size: 1.08rem; }

.pied { border-top: 1px solid var(--line-soft); padding-block: 1.8rem 2.4rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; font-size: .88rem; color: var(--faint); }
.pied span:last-child { margin-left: auto; }
.pied a:not(.marque) { color: var(--muted); text-decoration: none; }
.pied a:not(.marque):hover { color: var(--ink); }
.marque--pied { font-size: 1.05rem; }
@media (max-width: 600px) { .pied span:last-child { margin-left: 0; } }

/* ---------- mentions légales ---------- */
.legal__tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.4rem; }
.legal { max-width: calc(70ch + 2 * var(--gutter)); padding-block: 1.5rem 3.5rem; display: flex; flex-direction: column; gap: 2.2rem; }
.legal h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); }
.legal section { display: flex; flex-direction: column; gap: .7rem; }
.legal h2 { font-size: 1.45rem; }
.legal h3 { font-size: 1.05rem; margin-top: .5rem; }
.legal p, .legal li { color: var(--muted); line-height: 1.65; }
.legal ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.legal b { color: var(--ink); }