/* thomasml.com — la page de vente de Thomas.
 *
 * L'AGENCEMENT est celui de la page Aulne de matteoth.com, à la demande de
 * Thomas : un premier écran (le titre, une accroche, des pastilles), puis
 * les offres en cartes, celle mise en avant en aplat plein. Pas de
 * paragraphe : Aulne a été validée APRÈS qu'un premier jet en cinq
 * chapitres a été jugé beaucoup trop long.
 *
 * La DIRECTION ARTISTIQUE est celle de TH Coaching : le noir #0a0a0a,
 * l'orange en trois tons (ceux du dégradé de la tresse), Sora pour les
 * titres, Space Grotesk pour le reste, et le grain. L'orange ne sert qu'à
 * ce qui dit quelque chose ; posé partout, il ne désignerait plus rien.
 */

@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

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

:root {
  --bg: #0a0a0a;
  --ink: #f4f2ef;
  --muted: rgba(244, 242, 239, 0.66);
  --ligne: rgba(244, 242, 239, 0.16);
  --voile: rgba(244, 242, 239, 0.05);
  --orange: #ff5a1f;
  --orange-clair: #ff8c1a;
  --orange-fonce: #e64c12;
  --degrade: linear-gradient(135deg, #ff8c1a 0%, #ff5a1f 55%, #e64c12 100%);
  --display: "Sora", "Avenir Next", "Arial Black", sans-serif;
  --texte: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  background: var(--bg); color: var(--ink);
  font-family: var(--texte); font-weight: 500;
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : hidden fait du corps un conteneur de défilement. */
  overflow-x: clip; position: relative;
}
::selection { background: var(--orange); color: var(--bg); }
:focus-visible { outline: 2px solid var(--orange-clair); outline-offset: 3px; border-radius: 8px; }

/* Les halos d'Aulne, dans les tons de la tresse. Le flou est dans le
   dégradé lui-même et non dans un filter, que le téléphone découpe en
   tuiles sur une grande surface. */
.halo { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.halo.vif   { width: 70vmax; height: 70vmax; right: -26vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(255, 90, 31, 0.30), transparent); animation: derive 22s ease-in-out infinite alternate; }
.halo.ambre { width: 60vmax; height: 60vmax; left: -26vmax; bottom: -30vmax;
  background: radial-gradient(closest-side, rgba(255, 140, 26, 0.16), transparent); animation: derive 26s ease-in-out infinite alternate-reverse; }
.halo.braise { width: 40vmax; height: 40vmax; left: 34%; top: 32%;
  background: radial-gradient(closest-side, rgba(230, 76, 18, 0.10), transparent); animation: derive 30s ease-in-out infinite alternate; }
@keyframes derive { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- En-tête : la tresse et le nom à gauche, la barre à droite ---------- */
.entete {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.marque {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
}
.marque svg { width: 34px; height: 34px; display: block; }

.barre { display: flex; gap: 4px; flex-wrap: wrap; }
/* 44 px de haut : un onglet se rate au pouce comme un bouton. */
.barre a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 999px;
  font-size: 0.9rem; letter-spacing: 0.02em; text-decoration: none; color: var(--muted);
  border: 1px solid transparent;
}
.barre a:hover { color: var(--ink); }
.barre a[aria-current="page"] { color: var(--ink); border-color: var(--ligne); background: var(--voile); }

/* ---------- Le premier écran ---------- */
/* svh et non vh : vh compte la barre d'adresse du téléphone. */
.ecran {
  position: relative; z-index: 1;
  min-height: calc(100svh - 82px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px max(20px, env(safe-area-inset-left)) 64px;
  text-align: center;
}
.ecran .tresse {
  width: clamp(84px, 13vw, 132px); height: auto; margin-bottom: 28px;
  filter: drop-shadow(0 18px 40px rgba(255, 90, 31, 0.45));
  animation: monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}

/* Sora en capitales, très gras et serré, comme Unbounded sur Aulne. Le
   reflet passe du blanc à l'orange clair et revient : jamais par une teinte
   qui se lirait mal sur le noir. */
h1 {
  font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.055em; line-height: 0.95;
  font-size: clamp(2.3rem, 9vw, 7rem);
  /* Le texte peint par son fond est rogné à la boîte : sans ce jour en
     haut, l'accent circonflexe de « BÂTIS » disparaît, line-height 0.95
     ne lui laissant pas de place. */
  padding: 0.14em 0.04em 0.04em;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 35%, var(--orange-clair) 50%, var(--ink) 65%, var(--ink) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: reflet 7s linear infinite, monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.06s both;
}
.accroche {
  margin-top: 18px; color: var(--orange-clair);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); letter-spacing: -0.01em; font-weight: 700;
  animation: monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.12s both;
}

/* Ce qui entoure la personne accompagnée, en pastilles : les cinq appuis de
   l'écosystème de TH Coaching, avec leurs mots à eux. */
.appuis {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px; margin: 40px auto 0; list-style: none;
  animation: monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.24s both;
}
.appuis li {
  padding: 10px 18px; border-radius: 999px;
  font-size: 0.95rem; letter-spacing: 0.02em;
  border: 1px solid var(--ligne); background: var(--voile);
}

/* ---------- Offres ---------- */
.offres { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 24px 20px 80px; text-align: center; }
.offres h2 {
  font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.05em; line-height: 1;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 28px; }

/* Une carte par offre : le nom, ce qu'elle est en une ligne, puis le prix
   en gros, poussé en bas pour que les prix s'alignent quelle que soit la
   longueur du reste. */
.carte {
  display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  padding: 24px 22px; border-radius: 20px; text-align: left;
  background: var(--voile); border: 1px solid var(--ligne);
}
.carte .sur { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-clair); font-weight: 700; }
.carte h3 { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.04em; line-height: 1; }
.carte .quoi { color: var(--muted); font-size: 0.98rem; line-height: 1.45; }
.carte .inclus { list-style: none; display: grid; gap: 6px; font-size: 0.95rem; line-height: 1.4; }
.carte .inclus li { display: flex; gap: 8px; }
.carte .inclus li::before { content: "+"; font-weight: 700; color: var(--orange-clair); }
.prix {
  margin-top: auto; padding-top: 6px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.3rem); letter-spacing: -0.05em; line-height: 1;
}
/* Un prix qu'on n'a pas encore : il garde sa place, plus petit, et le dit. */
.prix.a-venir { font-size: 1.15rem; letter-spacing: 0; font-family: var(--texte); font-weight: 700; color: var(--muted); }

.acheter {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 22px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.98rem; white-space: nowrap; color: var(--bg); background: var(--degrade);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.acheter:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* Un lien d'achat qu'on n'a pas encore : le bouton reste pour que la carte
   ait sa forme définitive, mais ne mène nulle part, et le dit. */
.acheter[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Le coaching réunit tout le reste : il prend l'orange, seule carte pleine,
   et son bouton passe au noir. Sur l'aplat, le texte reste noir — le blanc
   sur #ff5a1f ne tient pas le contraste. */
.carte.pack { background: var(--degrade); border-color: transparent; color: var(--bg); }
.carte.pack .sur, .carte.pack .quoi, .carte.pack .inclus li::before, .carte.pack .prix.a-venir { color: rgba(10, 10, 10, 0.78); }
.carte.pack .acheter { color: var(--ink); background: var(--bg); }

.fin { position: relative; z-index: 1; text-align: center; color: var(--muted); font-size: 0.9rem; padding: 0 20px 40px; }

@keyframes reflet { to { background-position: -250% center; } }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 520px) {
  .marque { font-size: 18px; }
  .barre a { padding: 10px 11px; font-size: 0.86rem; }
  .appuis { gap: 8px; }
  .appuis li { padding: 9px 14px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .halo, h1, .accroche, .appuis, .ecran .tresse { animation: none; }
}

/* ---------- Sections après le premier écran ---------- */
/* Même titre que « Offres » : capitales serrées, centré. Une section,
   un titre, et ce qu'elle porte — jamais de paragraphe d'introduction. */
.bloc { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 24px 20px 80px; text-align: center; }
.bloc h2 {
  font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.05em; line-height: 1;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.bloc .sous-titre { margin-top: 12px; color: var(--orange-clair); font-weight: 700; }

/* ---------- Le déroulé du coaching, en trois cartes ---------- */
.etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; text-align: left; }
.etapes li { padding: 24px 22px; border-radius: 20px; background: var(--voile); border: 1px solid var(--ligne); }
.etapes .num {
  font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.05em; line-height: 1;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.etapes h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; margin-top: 12px; }
.etapes p { color: var(--muted); margin-top: 6px; line-height: 1.45; }
@media (max-width: 860px) { .etapes { grid-template-columns: 1fr; } }

/* La carte unique du coaching, centrée, sur la page qui lui est dédiée. */
.cartes.seule { grid-template-columns: minmax(0, 440px); justify-content: center; }

/* ---------- Le formulaire ---------- */
.formulaire { max-width: 720px; margin: 28px auto 0; display: grid; gap: 12px; text-align: left; }
.progres { color: var(--muted); font-size: 0.9rem; text-align: center; }
.champ { border: 1px solid var(--ligne); background: var(--voile); border-radius: 20px; padding: 20px 22px; min-width: 0; }
.champ legend, .champ .intitule { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
/* float : sans lui, une légende ne se laisse pas espacer de son contenu
   pareil dans tous les navigateurs. */
.champ legend { float: left; width: 100%; margin-bottom: 14px; }
.champ legend + * { clear: both; }
.aide { display: block; font-family: var(--texte); font-weight: 500; font-size: 0.88rem; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles input { position: absolute; opacity: 0; pointer-events: none; }
.pastilles label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--ligne); background: rgba(244, 242, 239, 0.03); cursor: pointer; font-size: 0.95rem;
  transition: border-color 0.15s, background 0.15s;
}
.pastilles label:hover { border-color: rgba(255, 140, 26, 0.55); }
.pastilles input:checked + label { background: var(--degrade); color: var(--bg); border-color: transparent; font-weight: 700; }
.pastilles input:focus-visible + label { outline: 2px solid var(--orange-clair); outline-offset: 3px; }
/* 16 px au moins : en dessous, Safari zoome sur le champ au toucher. */
.saisie {
  width: 100%; margin-top: 12px; min-height: 48px; padding: 12px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ligne); color: var(--ink);
  font: inherit; font-size: 16px;
}
.saisie::placeholder { color: rgba(244, 242, 239, 0.4); }
.saisie:focus { outline: none; border-color: var(--orange); }
textarea.saisie { resize: vertical; }
.envoi { display: grid; gap: 10px; justify-items: center; margin-top: 6px; }
.envoi .acheter { min-height: 52px; padding: 0 28px; font-size: 1rem; border: 0; cursor: pointer; font-family: inherit; }
.etat { min-height: 1.5em; text-align: center; color: var(--orange-clair); font-weight: 700; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Le dévoilement pas à pas n'existe qu'avec le script : sans lui, toutes
   les questions sont là et le formulaire reste entier. */
.js .formulaire [data-etape]:not(.ouverte) { display: none; }
html:not(.js) .progres { display: none; }

@media (max-width: 520px) {
  .envoi .acheter { width: 100%; white-space: normal; }
}

/* Un premier écran sans pastilles n'a pas à tenir toute la hauteur : il
   pousserait les cartes sous la ligne de flottaison. */
.ecran.court { min-height: 0; padding-top: 72px; padding-bottom: 40px; }

/* Le paiement en deux fois, et le renvoi vers le formulaire : un lien
   discret sous le prix, jamais un second bouton — deux boutons pleins sur
   une carte se lisent comme deux offres. 44 px de haut, comme toute cible. */
.deux-fois {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  color: var(--muted); font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px;
}
.deux-fois:hover { color: var(--ink); }
.carte.pack .deux-fois { color: rgba(10, 10, 10, 0.78); }
/* La ligne « 2 fois » réservée, vide, sur les cartes qui n'en ont pas :
   sans elle, les prix et boutons des trois cartes ne s'alignent plus. Elle
   disparaît quand les cartes s'empilent, où il n'y a rien à aligner. */
.deux-fois.vide { visibility: hidden; }
@media (max-width: 760px) { .deux-fois.vide { display: none; } }

/* La phrase de confidentialité, sous le bouton : petite, mais pas cachée. */
.confidentialite { text-align: center; color: var(--muted); font-size: 0.88rem; max-width: 520px; margin: 0 auto; line-height: 1.45; }
.envoi button.deux-fois { background: none; border: 0; cursor: pointer; font-family: inherit; }

/* L'avertissement de pied de page : discret, mais lisible sans zoomer, et
   la première phrase en clair — c'est elle qu'on doit voir. */
.avertissement {
  position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 0 20px 14px;
  text-align: center; font-size: 0.88rem; line-height: 1.5; color: var(--ink); font-weight: 700;
}
.avertissement span { color: var(--muted); font-weight: 500; }

/* Le contact : dans la barre, il se distingue des pages (il ouvre
   Instagram, il ne change pas de page), sans pour autant crier. */
.barre a.contact { color: var(--orange-clair); }
.barre a.contact:hover { color: var(--orange); }
.contact-pied { position: relative; z-index: 1; text-align: center; padding: 6px 20px 4px; }
.contact-pied a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--ligne); background: var(--voile); text-decoration: none; font-weight: 700; font-size: 0.92rem;
}
.contact-pied a:hover { border-color: rgba(255, 140, 26, 0.55); }
/* La couleur du lien est dite ici : le site ne pose aucune couleur de lien
   globale, et sans elle le navigateur peignait ce bouton en bleu système. */
.contact-pied a { color: var(--ink); text-align: center; }

/* ================= TÉLÉPHONE =================
   Signalement de Thomas, capture à l'appui : « sur téléphone c'est très
   moche ». Trois défauts, tous venus de la mise en page d'ordinateur
   recopiée en plus étroit :
   - la barre de quatre onglets passait SOUS la marque, sur une seconde
     ligne : l'en-tête mangeait un cinquième de l'écran avant le titre ;
   - le premier écran gardait la hauteur de la fenêtre, et le titre trop
     petit flottait au milieu d'un grand vide noir ;
   - rien ne disait quoi faire ensuite : il fallait deviner qu'un
     formulaire attendait plus bas.
   D'où : une seule ligne d'en-tête (la marque, Contact, et un menu qui se
   déplie), un premier écran à la hauteur de son contenu, un titre qui
   occupe la largeur, et un bouton qui mène au formulaire. */

/* Le menu déplié est un <details> : il s'ouvre et se ferme sans une ligne
   de script, au clavier comme au doigt. Masqué sur grand écran, où la
   barre suffit. */
.menu { display: none; position: relative; }
.contact-tete { display: none; }
/* Vide sur grand écran, il reste pourtant un enfant de l'en-tête : sans
   ce display, il s'intercalait et poussait la barre au milieu. */
.outils-tete { display: none; }

@media (max-width: 720px) {
  .entete { flex-wrap: nowrap; padding-top: max(12px, env(safe-area-inset-top)); }
  .entete .barre { display: none; }
  .marque { font-size: 18px; gap: 8px; }
  .marque svg { width: 30px; height: 30px; }
  .outils-tete { display: flex; align-items: center; gap: 8px; }
  .contact-tete {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
    background: var(--degrade); color: var(--bg); font-weight: 700; font-size: 0.9rem; text-decoration: none;
  }
  .menu { display: block; }
  .menu summary {
    list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 999px;
    display: grid; place-items: center; border: 1px solid var(--ligne); background: var(--voile);
  }
  .menu summary::-webkit-details-marker { display: none; }
  /* Trois traits qui deviennent une croix à l'ouverture. */
  .menu .traits, .menu .traits::before, .menu .traits::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.2s, opacity 0.2s;
  }
  .menu .traits { position: relative; }
  .menu .traits::before, .menu .traits::after { content: ""; position: absolute; left: 0; }
  .menu .traits::before { top: -6px; }
  .menu .traits::after { top: 6px; }
  .menu[open] .traits { background: transparent; }
  .menu[open] .traits::before { transform: translateY(6px) rotate(45deg); }
  .menu[open] .traits::after { transform: translateY(-6px) rotate(-45deg); }
  .menu-panneau {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: min(260px, calc(100vw - 40px));
    display: grid; gap: 4px; padding: 8px; border-radius: 20px;
    background: rgba(18, 16, 15, 0.97); border: 1px solid var(--ligne);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  }
  .menu-panneau a {
    display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 14px;
    color: var(--ink); text-decoration: none; font-weight: 700;
  }
  .menu-panneau a[aria-current="page"] { background: var(--voile); color: var(--orange-clair); }

  /* Le premier écran à la hauteur de ce qu'il porte, plus de vide. */
  .ecran { min-height: 0; padding-top: 44px; padding-bottom: 48px; }
  .ecran .tresse { width: 64px; margin-bottom: 20px; }
  /* Le titre prend la largeur : 12,5 vw, c'est 49 px à 390 et 40 à 320 —
     assez pour tenir « BUSINESS » sur une ligne à 320 avec les marges. */
  h1 { font-size: 12.5vw; }
  .accroche { font-size: 1.05rem; margin-top: 12px; max-width: 320px; }
  .appuis { gap: 6px; margin-top: 24px; max-width: 360px; }
  .appuis li { padding: 7px 12px; font-size: 0.82rem; }
  .ecran.court { padding-top: 40px; padding-bottom: 24px; }
  .offres, .bloc { padding-bottom: 56px; }
  .carte { padding: 22px 20px; }
}

/* Le bouton du premier écran vers le formulaire, à toutes les tailles :
   c'est la seule chose qu'on attend du visiteur sur l'accueil. */
.vers-formulaire { margin-top: 28px; animation: monte 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.32s both; }
@media (max-width: 720px) { .vers-formulaire { width: 100%; max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .vers-formulaire { animation: none; } }
/* L'en-tête au-dessus du premier écran : les deux sont en z-index 1, et
   l'écran, venu après dans la page, peignait PAR-DESSUS le menu déplié —
   le titre traversait la liste des pages. */
.entete { z-index: 30; }
.menu-panneau { background: #12100f; }