/* SiloWeb — landing page
   Implémentation du design "SiloWeb Landing" (Claude Design handoff). */

:root {
  --bg: #0d2419;
  --bg-2: #10301f;
  --card: #143a28;
  /* Vert plus profond : distingue « Sur mesure » sans sortir de la palette. */
  --card-deep: #0e2a1c;
  --cream: #f5ead8;
  --accent: #3fb377;
  --accent-dark: #2f9761;
  --accent-tint: rgba(63, 179, 119, .16);
  --ink: #f2ece0;
  /* .62 tenait le AA de justesse (6.1:1). À .70 on passe à ~7.3:1, ce qui
     change réellement le confort de lecture sur un écran de téléphone. */
  --muted: rgba(242, 236, 224, .70);
  --line: rgba(242, 236, 224, .13);
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Équivalents opaques du fond translucide des champs posé sur --card.
     Indispensables pour l'autofill, qui n'accepte pas la transparence. */
  --input-bg-solid: #214533;
  --input-bg-solid-focus: #2a4c3a;

  /* Cyan « circuit imprimé » : volontairement hors palette pour trancher
     avec le vert de marque sans le concurrencer. */
  --tech: #5ad1e6;
  --tech-code: rgba(90, 209, 230, .33);
  --tech-edge: rgba(90, 209, 230, .85);
  --tech-halo: rgba(90, 209, 230, .13);

  /* Coloration syntaxique VS Code (thème Dark+), reprise telle quelle. */
  --vs-punc: #808080;   /* ponctuation      */
  --vs-kw: #569cd6;     /* mot-clé (const)  */
  --vs-tag: #4ec9b0;    /* nom de composant */
  --vs-attr: #9cdcfe;   /* attribut, variable */
  --vs-str: #ce9178;    /* chaîne           */
  --vs-str-hi: #e9ab8b; /* emphase dans une chaîne */

  /* Indique aux contrôles natifs (listes déroulantes, ascenseurs, autofill)
     qu'ils sont sur un fond sombre. */
  color-scheme: dark;
}

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

/* Les règles de mise en page (display:flex/grid) l'emportent sinon sur
   le style navigateur de l'attribut `hidden`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Figtree", system-ui, sans-serif; font-weight: 800; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
strong { font-weight: 700; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(63, 179, 119, .3); }

/* scroll-margin so anchors clear the sticky header */
[id] { scroll-margin-top: 96px; }

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.accent { color: var(--accent); }
.rule { height: 1px; border: 0; background: var(--line); margin: 0; }

.kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker--muted { color: var(--muted); }

/* Jetons de code, partagés par l'accroche. */
.c-punc { color: var(--vs-punc); font-weight: 500; }
.c-kw   { color: var(--vs-kw); }
.c-tag  { color: var(--vs-tag); }
.c-attr, .c-var { color: var(--vs-attr); }
.c-str  { color: var(--vs-str); }

/* ── accroche écrite comme une déclaration ─────────────────────────────
   Choix assumé : l'accroche est rendue en monospace coloré plutôt qu'en
   prose. Le contenu reste du texte réel dans le DOM (donc indexable tel
   quel) ; seule la présentation change. Retrait négatif pour que les
   lignes suivantes s'alignent comme du code replié. */

/* L'accroche garde l'écriture « code » mais quitte la palette VS Code pour
   celle de la marque : vert et crème. La phrase elle-même passe en crème
   presque pleine — c'est le texte que lit le client, il doit primer sur
   l'ossature, laissée volontairement discrète. */
.code-line .c-kw   { color: var(--accent); }
.code-line .c-var  { color: #8fd3ae; }
.code-line .c-punc { color: rgba(242, 236, 224, .5); }
.code-line .c-str  { color: rgba(242, 236, 224, .82); }

.code-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.75;
  letter-spacing: 0;
  padding-left: 2ch;
  text-indent: -2ch;
  max-width: 62ch;
  color: var(--vs-punc);
}

/* L'emphase passe au vert de marque : c'est là que tombent les arguments.
   Sélecteur volontairement spécifique, sinon `.hero__lead strong` reprend
   la main et repasse l'emphase en crème. */
.code-line .c-str strong { color: var(--accent); font-weight: 700; }

.section { padding-bottom: clamp(60px, 8vw, 104px); }

.section__title {
  font-size: clamp(29px, 3.6vw, 45px);
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}

/* Les titres de section sont écrits comme des balises : chevrons verts,
   intitulé crème. Ils portent seuls le repère de section depuis que les
   intertitres ont été retirés. Chevrons décoratifs — masqués aux lecteurs
   d'écran, qui annoncent donc le titre tel quel. */
.section__title .t-br {
  color: var(--accent);
  font-weight: 700;
  font-size: .72em;
  letter-spacing: 0;
}
/* Le chevron ouvrant déborde dans la marge : l'intitulé reste aligné sur
   la colonne, comme une ponctuation suspendue. */
.section__title .t-br:first-child { margin-left: -.85em; margin-right: .18em; }
.section__title .t-br:last-child { margin-left: .2em; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
}

.section__intro {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
}
.section__intro strong { color: var(--ink); }

/* ── decorative background ─────────────────────────────────────────── */

.bg-layers {
  position: fixed;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-blob { position: absolute; border-radius: 999px; will-change: transform; }
.bg-blob--1 {
  top: 4%; left: 58%; width: 44vw; height: 44vw;
  background: radial-gradient(circle at 35% 35%, rgba(63, 179, 119, .26), rgba(63, 179, 119, 0) 68%);
}
.bg-blob--2 {
  top: 38%; left: -12%; width: 38vw; height: 38vw;
  background: radial-gradient(circle at 50% 50%, rgba(174, 191, 146, .16), rgba(174, 191, 146, 0) 70%);
}
.bg-blob--3 {
  top: 76%; left: 44%; width: 52vw; height: 52vw;
  background: radial-gradient(circle at 50% 50%, rgba(245, 234, 216, .09), rgba(245, 234, 216, 0) 68%);
}

main, .site-header, .site-footer, .wa { position: relative; z-index: 1; }

/* ── buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 14px 24px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #08170f; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #08170f; }

.btn--ghost { background: transparent; border-color: rgba(242, 236, 224, .26); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }

.btn--dark { background: #201e1d; border-color: #201e1d; color: var(--cream); }
.btn--dark:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #08170f; }

.btn--sm { padding: 12px 22px; border-width: 0; }
.btn--lg { font-size: 15.5px; padding: 16px 28px; }
.btn--xl { font-size: 15.5px; padding: 17px 30px; border-width: 0; }
.btn--block { width: 100%; margin-top: 26px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── header ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(13, 36, 25, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.6px;
  line-height: 1;
  color: var(--ink);
}
.brand--lg { font-size: 28px; }
.brand__outline { color: transparent; -webkit-text-stroke: 1.3px rgba(242, 236, 224, .8); }
.brand__solid { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  font-size: 14.5px;
  font-weight: 600;
}
.nav a { color: var(--ink); transition: color .25s ease; }
.nav a:hover { color: var(--accent); }
.nav .btn:hover { color: #08170f; }

/* Le bouton n'existe qu'en dessous de 860px ; c'est le média qui l'affiche. */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px 14px 3px 14px;
  background: rgba(242, 236, 224, .04);
  color: var(--ink);
  cursor: pointer;
}

/* Deux barres seulement : la barre centrale est le pseudo-élément, ce qui
   permet de la faire disparaître en croix sans nœud supplémentaire. */
.burger__bars,
.burger__bars::before,
.burger__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
}
.burger__bars { position: relative; margin: 0 auto; }
.burger__bars::before,
.burger__bars::after { content: ""; position: absolute; left: 0; }
.burger__bars::before { top: -6px; }
.burger__bars::after { top: 6px; }

.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ── hero ──────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
  padding-top: clamp(56px, 9vw, 120px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 8px 16px;
  border-radius: 999px;
}
.badge__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }

.hero__title {
  font-size: clamp(38px, 5.9vw, 70px);
  line-height: 1;
  letter-spacing: -.035em;
  margin-top: 26px;
  text-wrap: balance;
}

.hero__lead {
  font-size: clamp(17px, 1.5vw, 20.5px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
  margin-top: 24px;
  text-wrap: pretty;
}
.hero__lead strong { color: var(--ink); }

/* Les deux déclarations forment un seul bloc de code : même corps, même
   densité, aucune atténuation. `.hero__lead` et `.hero__lead--sub` ont la
   même spécificité que `.code-line` et sont écrites plus bas, donc elles
   reprenaient la main sur la taille — d'où le sélecteur composé. */
.hero__lead.code-line {
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.75;
}
.hero__lead--sub { margin-top: 18px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.price-card {
  /* La grille de l'accroche aligne ses colonnes sur le bas ; le cadre,
     bien plus court que le texte, se retrouvait 148px sous son centre. */
  align-self: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px 30px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
}
.price-card__row { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.price-card__label { font-size: 15px; font-weight: 600; color: var(--muted); }
.price-card__num { font-weight: 800; font-size: 38px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-card__unit { font-size: 15px; font-weight: 700; color: var(--accent); }
.price-card .rule { margin: 20px 0; }
.price-card .price-card__row + .rule + .price-card__row { margin-top: 0; }
.price-card__note { margin-top: 20px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.price-card__note strong { color: var(--ink); }

/* ── feature strip ─────────────────────────────────────────────────── */

.strip-wrap { padding-bottom: clamp(56px, 8vw, 96px); }
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  font-size: 14.5px;
  font-weight: 600;
}
.strip li { padding: 22px 24px; border-right: 1px solid var(--line); }
.strip li:first-child { padding-left: 0; }
.strip li:last-child { padding-right: 0; border-right: 0; }

/* ── about ─────────────────────────────────────────────────────────── */

.about {
  position: relative;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(242, 236, 224, .05), rgba(242, 236, 224, .015));
  padding: clamp(26px, 3.2vw, 44px);
  overflow: hidden;
}
.about__halo {
  position: absolute;
  top: -30%; right: -8%;
  width: 34vw; height: 34vw;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--accent-tint), transparent 68%);
  pointer-events: none;
}
.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, 1.15fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.about__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 22px;
  max-width: 44ch;
  text-wrap: pretty;
}
.about__text + .about__text { margin-top: 16px; }
.about__text strong { color: var(--ink); }
.about__place { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 13.5px; color: var(--muted); }
.about__dash { width: 34px; height: 1px; background: var(--accent); }

.about__cards { display: flex; flex-direction: column; gap: 11px; }
.about__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 17px 20px;
}
.about__card:hover { border-color: var(--accent); }
.about__num { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); padding-top: 4px; }
.about__card h3 { font-size: 16px; letter-spacing: -.015em; margin-bottom: 5px; }
.about__card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ── plans ─────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.plan--featured { border: 1.5px solid var(--accent); box-shadow: 0 22px 50px rgba(0, 0, 0, .42); }
.plan--custom {
  background: var(--card-deep);
  border-color: rgba(242, 236, 224, .17);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}

.plan__badge {
  position: absolute;
  top: -13px;
  right: 14px;
  background: var(--accent);
  color: #08170f;
  font-size: 10px;
  font-weight: 800;
  /* Resserrée : elle partage l'arête supérieure avec la balise ouvrante. */
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.plan__price { display: flex; align-items: baseline; gap: 7px; margin-top: 16px; }
.plan__num { font-weight: 800; font-size: 42px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan__num--sm { font-size: 34px; letter-spacing: -.03em; }
.plan__unit { font-size: 14px; font-weight: 700; color: var(--accent); }

.plan__desc { font-size: 14.5px; line-height: 1.62; color: var(--muted); margin: 14px 0 22px; min-height: 84px; }
.plan__desc--tight { margin-top: 22px; }
.plan .rule { margin-bottom: 18px; }

.feats { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; line-height: 1.45; flex: 1; }
.feats li { display: flex; gap: 10px; align-items: flex-start; }
.feats li.is-off { color: rgba(242, 236, 224, .58); }
.feats__on, .feats__off {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}
.feats__on { background: var(--accent-tint); color: var(--accent); }
.feats__off { background: rgba(242, 236, 224, .07); }

/* ── subscriptions band ────────────────────────────────────────────── */

.band {
  position: relative;
  z-index: 1;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band__inner { padding-block: clamp(56px, 8vw, 96px); }

.subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }

.sub {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.sub--featured { border: 1.5px solid var(--accent); box-shadow: 0 22px 50px rgba(0, 0, 0, .42); }
.sub .plan__price { margin: 16px 0 14px; }
.sub__term {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-bottom: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sub__list { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.5; flex: 1; border-top: 1px solid var(--line); }
.sub__list li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.sub__list li:last-child { border-bottom: 0; }
.sub__list strong { font-weight: 800; }
.sub .btn--block { margin-top: 24px; }

/* ── FAQ ───────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.4fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-top: clamp(56px, 8vw, 100px);
}
.faq__lead { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin-top: 20px; max-width: 36ch; }
.faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__h { margin: 0; font-size: inherit; font-weight: inherit; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: transparent;
  border: 0;
  padding: 22px 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.015em;
  line-height: 1.25;
  transition: color .25s ease;
}
.faq__q:hover { color: var(--accent); }

.faq__chev {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), background .3s ease, border-color .3s ease, color .3s ease;
}
.faq__q[aria-expanded="true"] .faq__chev {
  transform: rotate(180deg);
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

/* Sans JS, les réponses restent visibles (contenu toujours accessible et indexable) */
.faq__panel { display: grid; grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { margin-bottom: 26px; font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 62ch; }

.js .faq__panel {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
}
.js .faq__panel > div { visibility: hidden; transition: visibility 0s linear .5s; }
.js .faq__panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.js .faq__panel.is-open > div { visibility: visible; transition-delay: 0s; }

/* ── contact ───────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, 1.35fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-block: clamp(56px, 8vw, 100px);
}
.contact__lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 20px; max-width: 40ch; }
.contact__lead strong { color: var(--ink); }

.contact__rows { margin-top: 34px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color .25s ease;
}
a.contact__row:hover { color: var(--accent); }
.contact__row > span:first-child { color: var(--muted); font-weight: 500; }

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
}
.form { display: flex; flex-direction: column; gap: 22px; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.input {
  font: inherit;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: rgba(242, 236, 224, .06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 18px;
  width: 100%;
  transition: border-color .25s ease, background .25s ease;
}
.input::placeholder { color: rgba(242, 236, 224, .38); }
.input:focus { border-color: var(--accent); background: rgba(242, 236, 224, .1); }

/* Autofill — le vrai coupable du fond blanc.
   Chrome, Edge et Safari appliquent au remplissage automatique un fond blanc
   (parfois jaune) via une couche interne que `background` ne peut pas
   remplacer. Le seul levier est une ombre interne pleine, qui recouvre cette
   couche ; d'où les couleurs opaques --input-bg-solid, équivalentes au rendu
   du fond translucide au-dessus de la carte.
   La transition de 9999s neutralise le flash de couleur avant peinture. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg-solid) inset;
  box-shadow: 0 0 0 1000px var(--input-bg-solid) inset;
  caret-color: var(--ink);
  border-color: var(--line);
  transition: background-color 9999s ease-in-out 0s;
}
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg-solid-focus) inset;
  box-shadow: 0 0 0 1000px var(--input-bg-solid-focus) inset;
  border-color: var(--accent);
}
/* Firefox (:autofill standard) accepte, lui, un simple background. */
.input:autofill {
  color: var(--ink);
  background: var(--input-bg-solid);
}
.input:autofill:focus { background: var(--input-bg-solid-focus); }
textarea.input { border-radius: 18px; resize: vertical; }
.input[aria-invalid="true"] { border-color: #e2725b; }

/* Rappel du forfait / de l'abonnement choisi sur les cartes. Une ligne au
   lieu des deux champs qu'elle remplace. */
.form__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(63, 179, 119, .34);
  border-radius: 3px 16px 3px 16px;
  background: var(--accent-tint);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.form__pick-x {
  flex: none;
  margin-left: auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.form__pick-x:hover { color: var(--ink); background: rgba(242, 236, 224, .1); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__legal { font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.form__error {
  font-size: 13.5px;
  line-height: 1.5;
  color: #ffb3a3;
  background: rgba(226, 114, 91, .12);
  border: 1px solid rgba(226, 114, 91, .3);
  border-radius: 14px;
  padding: 12px 16px;
}
.form__error a { color: #ffd7cd; text-decoration: underline; }

.done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0; animation: siloIn .45s ease-out 1; }
.done__check {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
}
.done h3 { font-size: 26px; letter-spacing: -.02em; }
.done p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ── footer ────────────────────────────────────────────────────────── */

.site-footer { background: #081a11; border-top: 1px solid var(--line); }
.site-footer__grid {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 36px;
}
.site-footer__about { margin-top: 18px; font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 32ch; }
.site-footer__h { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 236, 224, .45); }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; font-size: 14.5px; }
.site-footer__links a { color: var(--ink); transition: color .25s ease; }
.site-footer__links a:hover { color: var(--accent); }
.site-footer__addr { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.site-footer__bottom {
  padding-top: 22px;
  padding-bottom: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  /* Aligné à gauche, et non réparti : le bouton WhatsApp flotte en bas à
     droite et recouvrirait le dernier élément. */
  justify-content: flex-start;
  font-size: 12.5px;
  color: rgba(242, 236, 224, .5);
}

/* ── WhatsApp floating button ──────────────────────────────────────── */

.wa {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 20px 8px 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  color: var(--ink);
  transition: transform .25s ease, border-color .25s ease;
}
.wa:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--ink); }
.wa__icon { flex: none; width: 46px; height: 46px; border-radius: 999px; background: #25d366; display: grid; place-items: center; }
.wa__text { display: flex; flex-direction: column; line-height: 1.25; }
.wa__title { font-size: 14.5px; font-weight: 700; }
.wa__sub { font-size: 12px; color: var(--muted); }

/* ── motion: parallax, tilt, reveal ────────────────────────────────── */

[data-shift] { transform: translate3d(var(--sx, 0px), calc(var(--sy, 0px) + var(--ty, 0px)), 0); }

.tilt {
  /* --sc et --ty sont posés EN LIGNE par script.js pour l'inclinaison ; une
     règle CSS ne peut donc pas les écraser. Les variables --depth-* se
     composent avec elles au lieu de les remplacer. */
  transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg))
             translate3d(0, calc(var(--ty, 0px) + var(--depth-y, 0px)), 0)
             scale(calc(var(--sc, 1) * var(--depth-sc, 1)));
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease,
              border-color .25s ease, opacity .45s ease, filter .45s ease;
}
.tilt.is-tilting { transition: transform .08s linear, box-shadow .35s ease, border-color .25s ease, opacity .45s ease, filter .45s ease; }

.js .reveal { opacity: 0; --ty: 26px; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.js .reveal.tilt { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .25s ease, filter .45s ease; }
.js .reveal.is-visible { opacity: 1; --ty: 0px; }

@keyframes siloFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 179, 119, 0); }
  25% { box-shadow: 0 0 0 5px rgba(63, 179, 119, .35); }
}
@keyframes siloIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.is-flashing { animation: siloFlash 1.1s ease-out 1; border-radius: 20px; }



/* ── effet « circuit » au survol des cartes ────────────────────────────
   Deux couches, toutes deux pilotées par la position du curseur, que
   script.js expose en --mx / --my :
   ::before  une grille technique dévoilée par un projecteur circulaire ;
   ::after   un liseré lumineux sur le bord, éclairé au point du curseur.
   Les deux sont pointer-events:none et n'existent qu'au survol. */

.tilt { position: relative; }

/* Le code se glisse DERRIÈRE le contenu : par-dessus, il gênerait la lecture.
   Le liseré, lui, ne court que sur le bord et peut rester au premier plan. */
.tilt > * { position: relative; z-index: 1; }
.tilt > .plan__badge { position: absolute; }

.tilt::before,
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}

.tilt::before {
  z-index: 0;
  /* Le motif de code sert de MASQUE, la teinte vient du background-color :
     une seule variable CSS suffit donc à la changer par carte.
     Second masque : le projecteur circulaire centré sur le curseur.
     Les deux se combinent en intersection — du code, et seulement là où
     le curseur éclaire. */
  background-color: var(--tech-code);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='270'%3E%3Cg fill='black' font-family='ui-monospace,SFMono-Regular,Menlo,Consolas,monospace' font-size='13'%3E%3Ctext x='8' y='24'%3E</>%3C/text%3E%3Ctext x='150' y='46'%3Econst%3C/text%3E%3Ctext x='60' y='96'%3E{ }%3C/text%3E%3Ctext x='210' y='120'%3E=>%3C/text%3E%3Ctext x='18' y='158'%3E0110%3C/text%3E%3Ctext x='128' y='196'%3E();%3C/text%3E%3Ctext x='232' y='232'%3E<div>%3C/text%3E%3Ctext x='46' y='250'%3Ereturn%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(175px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.4) 45%, transparent 70%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='270'%3E%3Cg fill='black' font-family='ui-monospace,SFMono-Regular,Menlo,Consolas,monospace' font-size='13'%3E%3Ctext x='8' y='24'%3E</>%3C/text%3E%3Ctext x='150' y='46'%3Econst%3C/text%3E%3Ctext x='60' y='96'%3E{ }%3C/text%3E%3Ctext x='210' y='120'%3E=>%3C/text%3E%3Ctext x='18' y='158'%3E0110%3C/text%3E%3Ctext x='128' y='196'%3E();%3C/text%3E%3Ctext x='232' y='232'%3E<div>%3C/text%3E%3Ctext x='46' y='250'%3Ereturn%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(175px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.4) 45%, transparent 70%);
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.tilt::after {
  z-index: 2;
  /* Déborde d'1px pour recouvrir la bordure de la carte : dessiné en dessous,
     le liseré se ferait manger par elle. */
  inset: -1px;
  padding: 1.8px;
  /* Rayon volontairement large : sur une carte haute, un curseur au centre est
     à plus de 250px de chaque bord et n'éclairerait rien avec un halo serré. */
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%),
              var(--tech-edge) 0%, rgba(90, 209, 230, .45) 30%, rgba(90, 209, 230, .12) 55%, transparent 75%);
  /* Ne garder que la bordure : on soustrait l'intérieur du masque. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.tilt:hover::before { opacity: 1; }
.tilt:hover::after { opacity: 1; }

/* Un halo cyan complète l'inclinaison, sans remplacer l'ombre existante. */
.tilt.is-tilting {
  box-shadow: var(--neu-relief, 0 0 transparent),
              0 24px 54px rgba(0, 0, 0, .46),
              -12px -12px 32px rgba(255, 255, 255, .026),
              0 0 34px -6px var(--tech-halo);
}


/* ── profondeur au survol d'un forfait ou d'un abonnement ─────────────
   La carte visée avance, ses voisines reculent : léger recul d'échelle,
   descente de quelques pixels, flou et désaturation. C'est le contraste
   entre les deux qui crée la profondeur, pas l'ampleur de chaque valeur.
   Réservé aux appareils dotés d'un vrai survol. */

@media (hover: hover) {
  .plans:has(.plan:hover) .plan:not(:hover),
  .subs:has(.sub:hover) .sub:not(:hover) {
    --depth-sc: .97;
    --depth-y: 7px;
    opacity: .62;
    filter: blur(1.1px) saturate(.8);
  }

  .plans:has(.plan:hover) .plan:hover,
  .subs:has(.sub:hover) .sub:hover {
    --depth-sc: 1.03;
    z-index: 5;
    box-shadow: var(--neu-relief, 0 0 transparent),
                0 44px 84px -22px rgba(0, 0, 0, .64),
                -14px -14px 36px rgba(255, 255, 255, .03),
                0 0 40px -10px var(--tech-halo);
  }
}

/* ── relief façon neumorphisme ─────────────────────────────────────────
   Le principe : une source de lumière unique, en haut à gauche. L'arête
   supérieure l'accroche, l'arête inférieure tombe dans l'ombre, et la carte
   projette au sol vers le bas-droite. Rien de plus — le neumorphisme devient
   mou dès qu'on multiplie les couches.

   Le relief (les deux ombres internes) est isolé dans une variable : les
   états de survol redéfinissent l'extrusion sans le perdre au passage. */

.plan, .sub, .price-card, .form-card {
  --neu-relief: inset 0 1px 0 rgba(255, 255, 255, .07),
                inset 0 -1px 0 rgba(0, 0, 0, .4);
  --neu-lift: 16px 18px 36px rgba(0, 0, 0, .44),
              -12px -12px 30px rgba(255, 255, 255, .022);

  box-shadow: var(--neu-relief), var(--neu-lift);
  /* Reflet rasant : la lumière glisse sur le haut de la surface. */
  background-image: linear-gradient(157deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 40%);
}

.plan--featured, .sub--featured {
  --neu-lift: 18px 22px 46px rgba(0, 0, 0, .5),
              -12px -12px 32px rgba(255, 255, 255, .03);
}

/* Les petites cartes « à propos » reçoivent le relief sans l'extrusion :
   elles sont posées, pas soulevées. */
.about__card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              inset 0 -1px 0 rgba(0, 0, 0, .3),
              0 8px 20px rgba(0, 0, 0, .22);
  background-image: linear-gradient(157deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 45%);
}

/* Les champs, à l'inverse, sont creusés dans la carte. */
.input {
  box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .32),
              inset -1px -1px 2px rgba(255, 255, 255, .03);
}
.input:focus {
  box-shadow: inset 2px 3px 7px rgba(0, 0, 0, .38),
              inset -1px -1px 2px rgba(255, 255, 255, .04);
}

/* ── traitement des bords ──────────────────────────────────────────────
   Le rectangle uniformément arrondi est la signature du gabarit tout fait.
   Deux interventions, toutes deux sur l'arête :

   1. deux coins francs en diagonale, deux arrondis — la silhouette devient
      asymétrique, donc lue comme une décision ;
   2. une balise ouvrante et une balise fermante chevauchant le bord, comme
      un composant dans du JSX. Le fond opaque de la balise interrompt le
      trait de bordure, à la manière d'un <legend> dans un <fieldset>.

   Les deux balises occupent la diagonale opposée à celle des coins francs :
   les deux axes se croisent au lieu de se superposer. */

.plan, .sub { border-radius: 3px 24px 3px 24px; }
.price-card, .form-card { border-radius: 4px 28px 4px 28px; }

.tag {
  position: absolute;
  z-index: 3;                     /* au-dessus du liseré, qui court sur le bord */
  padding: 0 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  /* Coloration syntaxique de VS Code (thème Dark+) : le nom de composant en
     turquoise, les chevrons en gris — exactement ce qu'affiche l'éditeur sur
     du JSX. */
  color: #4ec9b0;
  background: var(--card);        /* c'est lui qui « perce » la bordure */
  opacity: .78;
  transition: opacity .3s ease, letter-spacing .3s ease;
}
.tag__p { color: #808080; font-weight: 500; }

/* Les deux balises partagent la même indentation, comme dans un vrai bloc de
   code. La pastille « le plus choisi » cède donc l'angle gauche et passe à
   droite, où plus rien ne la gêne. */
.tag--open { top: 0; left: 18px; transform: translateY(-50%); }
.tag--close { bottom: 0; left: 18px; transform: translateY(50%); }

.plan:hover .tag,
.sub:hover .tag,
.price-card:hover .tag,
.form-card:hover .tag { opacity: 1; letter-spacing: .05em; }

/* Sur la carte crème, le thème clair de VS Code prend le relais. */
.plan--custom .tag { background: var(--card-deep); }


/* ── charte de confidentialité (modale) ───────────────────────────── */


.host {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(242, 236, 224, .5);
  transition: color .25s ease;
}
.host:hover { color: var(--accent); }
.host img { width: 16px; height: 16px; flex: none; }

.linklike {
  font: inherit;
  color: rgba(242, 236, 224, .5);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s ease;
}
.linklike:hover { color: var(--accent); }

.modal {
  width: min(720px, calc(100vw - 2 * clamp(16px, 5vw, 48px)));
  max-height: min(84vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(4, 14, 9, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal[open] { animation: siloModalIn .32s cubic-bezier(.2, .7, .3, 1); }
.modal[open]::backdrop { animation: siloFadeIn .32s ease; }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px clamp(22px, 4vw, 38px) 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.modal__title { font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.025em; }
.modal__close {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.modal__close:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }

.modal__body {
  padding: 24px clamp(22px, 4vw, 38px) clamp(26px, 4vw, 38px);
  overflow-y: auto;
  max-height: calc(min(84vh, 900px) - 92px);
  overscroll-behavior: contain;
}
.modal__lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--accent-tint);
  border: 1px solid rgba(63, 179, 119, .3);
}
.modal__body h3 {
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 28px 0 10px;
}
.modal__body p { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: 12px; }
.modal__body p strong { color: var(--ink); }
.modal__body ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.modal__body li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.modal__body li::before {
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.modal__body li strong { color: var(--ink); }
.modal__meta {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px !important;
  color: rgba(242, 236, 224, .45) !important;
}

@keyframes siloModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes siloFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Fige l'arrière-plan pendant la lecture. */
body.is-locked { overflow: hidden; }

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .about__grid { grid-template-columns: 1fr; }
  .faq, .contact { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .about__halo { width: 70vw; height: 70vw; }

  /* Les liens quittaient simplement la page : ils passent maintenant dans un
     panneau déroulant sous l'en-tête, ouvert par le bouton. */
  .burger { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    /* Opaque, pas translucide : le titre de l'accroche est énorme et gras,
       les 3 % qui passaient au travers restaient parfaitement lisibles. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34);
    font-size: 16px;
    /* Fermé par défaut, y compris sans JS : le bouton reste alors inopérant,
       mais toutes les sections restent atteignables depuis le pied de page. */
    display: none;
  }
  .nav.is-open { display: flex; }

  .nav a:not(.btn) {
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
  }
  .nav__cta { margin-top: 18px; padding-block: 15px; }

  /* ── cibles tactiles ──
     Au doigt, tout ce qui se clique doit faire au moins 44px de haut
     (recommandation WCAG 2.5.8). Plusieurs listes tenaient sur 19 à 22px. */
  .brand { padding-block: 9px; }

  .site-footer__links { gap: 0; }
  .site-footer__links a { padding-block: 12px; }

  .site-footer__bottom { gap: 4px 18px; }
  .site-footer__bottom .linklike,
  .host { padding-block: 13px; }

  .contact__row { padding-block: 15px; }


  .faq__q { padding-block: 20px; }

  /* Les micro-libellés capitales sont lisibles au bureau mais deviennent
     durs à déchiffrer à bout de bras. */
  .kicker { font-size: 12.5px; }
  .plan__badge, .sub__term { font-size: 11.5px; }
  .wa__sub { font-size: 12.5px; }

  /* La gouttière tombe à 20px : le chevron suspendu n'a plus la place de
     déborder autant sans frôler le bord de l'écran. */
  .section__title .t-br:first-child { margin-left: -.35em; }
}

@media (max-width: 700px) {
  .strip { grid-template-columns: 1fr; }
  .strip li { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .strip li:last-child { border-bottom: 0; }
  .plan__desc { min-height: 0; }
  .contact__row { flex-direction: column; gap: 4px; }
  .wa__text { display: none; }
  .wa { padding: 8px; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; --ty: 0px; }
  .tilt, [data-shift] { transform: none; }
  .tilt::before { display: none; }
  .plans:has(.plan:hover) .plan:not(:hover),
  .subs:has(.sub:hover) .sub:not(:hover) { --depth-sc: 1; --depth-y: 0px; opacity: 1; filter: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}