/* ════════════════════════════════════════════════════════════════════════
   essai.css — Coquille commune aux 4 pages du parcours d'essai gratuit
   (essai-gratuit, essai-verification, essai-refuse, essai-termine).

   Direction artistique fournie par Clément (maquette du 07/08/2026) :
   éditorial / graphique — titre serif massif, carte à ombre portée DURE
   (décalage net, aucun flou), filets noirs francs, accent rose, listes
   séparées par des filets. Rien de « soft ».

   Polices : on garde FreshMango (display) et Radikal (texte), les polices
   maison déjà auto-hébergées, plutôt que le duo Bodoni Moda / Manrope de la
   maquette — même registre visuel, sans dépendance à Google Fonts ni rupture
   avec le reste du site. Le passage à Bodoni/Manrope ne tient qu'aux
   @font-face ci-dessous si la décision change.
   ════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Radikal Black'; src:url('/fonts/Radikal-W03-Black.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Radikal Bold'; src:url('/fonts/Radikal-W03-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Radikal Regular'; src:url('/fonts/Radikal-W03-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Radikal Light'; src:url('/fonts/Radikal-W03-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'FreshMango'; src:url('/fonts/FreshMango-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

:root {
  --ink:#111111;
  --paper:#ffffff;
  --yellow:#f2f200;
  --pink:#ff1b6b;
  --ink-78:rgba(17,17,17,.78);
  --ink-62:rgba(17,17,17,.62);
  --ink-55:rgba(17,17,17,.55);
  --ink-25:rgba(17,17,17,.25);
  --ink-14:rgba(17,17,17,.14);
  --ink-09:rgba(17,17,17,.09);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x:hidden; }

body {
  font-family:'Radikal Regular', -apple-system, system-ui, sans-serif;
  color:var(--ink); background:var(--yellow);
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
strong, b { font-family:'Radikal Bold', sans-serif; font-weight:700; }
a { color:var(--ink); text-underline-offset:3px; text-decoration-color:var(--ink-25); }
a:hover { text-decoration-color:var(--ink); }

/* ── En-tête : marque à gauche, retour à droite ──────────────────────── */
.top {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:28px 48px;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height:30px; width:auto; filter:brightness(0); }
.brand span { font-family:'FreshMango', sans-serif; font-size:32px; line-height:1; letter-spacing:-.01em; }

.back-pill {
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:'Radikal Bold', sans-serif; font-weight:700; font-size:14px;
  text-decoration:none; white-space:nowrap;
  padding:10px 16px; border:1.5px solid var(--ink-25); border-radius:999px;
  transition:border-color .13s ease, background .13s ease;
}
.back-pill:hover { border-color:var(--ink); background:rgba(17,17,17,.06); }

/* ── Grille principale ───────────────────────────────────────────────── */
.main {
  flex:1; width:100%; max-width:1240px; margin:0 auto;
  padding:24px 48px 64px;
  display:grid; grid-template-columns:1.02fr 0.98fr;
  /* Rangée 1 dimensionnée par la colonne de gauche seule ; la carte, qui
     s'étale sur les deux rangées, déverse sa hauteur dans la rangée `1fr`.
     Sans ça elle gonflait la rangée 1 et repoussait .side vers le bas. */
  grid-template-rows:auto 1fr;
  column-gap:72px; row-gap:0; align-items:start;
}
/* .side (pastilles + mentions) est APRÈS la carte dans le HTML pour qu'en
   mobile il tombe naturellement dessous. En desktop on le replace à gauche. */
.main > section:not(.card) { grid-column:1; grid-row:1; }
.main > .card-wrap        { grid-column:2; grid-row:1 / span 2; }
.main > .side             { grid-column:1; grid-row:2; }
/* Pages d'état (vérification / refus / fin d'essai) : une seule colonne. */
.main.solo { max-width:720px; grid-template-columns:1fr; gap:0; }

/* ── Colonne éditoriale ──────────────────────────────────────────────── */
.badge {
  display:inline-block; background:var(--pink); color:#fff;
  font-family:'Radikal Bold', sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 12px; border-radius:6px;
}
.badge.ink { background:var(--ink); color:var(--yellow); }

h1 {
  font-family:'FreshMango', sans-serif; font-weight:400;
  font-size:clamp(42px, 6.6vw, 78px); line-height:.95; letter-spacing:-.02em;
  margin:22px 0 0; text-wrap:balance;
}
.lead {
  font-size:19px; line-height:1.55; max-width:32ch; margin:26px 0 0;
  color:var(--ink-78); text-wrap:pretty;
}
.lead strong { color:var(--ink); }

/* Pastilles de réassurance */
.pills { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 0; }
.pills li {
  display:inline-flex; align-items:center; gap:9px; flex:none; white-space:nowrap;
  border:1.5px solid var(--ink); border-radius:999px;
  padding:9px 16px 9px 13px;
  font-family:'Radikal Bold', sans-serif; font-weight:700; font-size:14px;
}
.pills svg { width:17px; height:17px; stroke:var(--ink); flex-shrink:0; }

.fine {
  font-size:13px; line-height:1.6; color:var(--ink-62);
  margin:44px 0 0; max-width:48ch;
  border-top:1.5px solid rgba(17,17,17,.2); padding-top:18px;
}
.fine a { color:var(--ink-62); }

/* ── Carte à ombre dure ──────────────────────────────────────────────── */
/* La chanteuse est calée sur le bord haut de la carte : elle déborde à gauche
   et mord sur la carte. La marge haute du conteneur lui réserve la place —
   sans elle, l'illustration remonterait sur l'en-tête. */
.card-wrap { position:relative; margin-top:122px; }

.card-singer {
  position:absolute; left:-14%; bottom:100%;
  width:53%; height:auto;
  /* Le % suit la taille de l'illustration, les -4px la remontent d'autant. */
  transform:translateY(calc(27% - 6px));
  pointer-events:none;         /* ne doit rien intercepter du clic */
  z-index:2;
}

.card {
  background:var(--paper); border:2px solid var(--ink); border-radius:20px;
  box-shadow:10px 10px 0 var(--ink);
  padding:34px 34px 30px;
}
.card.center { text-align:center; }

.card-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1.5px solid var(--ink-14); padding-bottom:18px;
}
.card-head h2 {
  font-family:'Radikal Bold', sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-55); margin:0;
}
.card-head .tag {
  font-family:'Radikal Bold', sans-serif; font-weight:700;
  font-size:34px; line-height:1; letter-spacing:0; color:var(--pink);
}

/* Liste à filets */
ul.checks { list-style:none; text-align:left; }
ul.checks li {
  display:flex; align-items:center; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--ink-09);
  font-size:16px; line-height:1.35;
}
ul.checks .ck {
  flex:none; width:24px; height:24px; border-radius:999px;
  background:var(--yellow); border:1.5px solid var(--ink);
  display:grid; place-items:center;
}
ul.checks .ck svg { width:13px; height:13px; }

/* Pastille d'illustration (pages d'état) */
.glyph {
  width:64px; height:64px; border-radius:999px;
  border:2px solid var(--ink); background:var(--yellow);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
}
.glyph.pale { background:#f4f4f0; }
.glyph svg { width:28px; height:28px; stroke:var(--ink); }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; text-decoration:none; cursor:pointer; border:2px solid var(--ink);
  font-family:'Radikal Black', sans-serif; font-weight:900; font-size:18px;
  letter-spacing:-.01em;
  background:var(--ink); color:var(--yellow);
  padding:19px 20px; border-radius:14px; margin-top:26px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 0 rgba(17,17,17,.28); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn svg { width:19px; height:19px; flex-shrink:0; }
.btn span { white-space:nowrap; }

.btn.ghost {
  background:var(--paper); color:var(--ink);
  font-family:'Radikal Bold', sans-serif; font-weight:700; font-size:16px;
  padding:15px 20px; margin-top:12px;
}

.trust {
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13px; color:rgba(17,17,17,.6); margin:14px 0 0; text-align:center;
}
.trust svg { width:14px; height:14px; stroke:rgba(17,17,17,.6); flex-shrink:0; }

.hint { font-size:14px; line-height:1.6; color:var(--ink-62); margin:20px 0 0; }
.hint a { color:var(--ink-62); }

/* Message d'état injecté par JS */
.state {
  display:none; align-items:center; gap:11px; text-align:left;
  border:1.5px solid var(--ink); border-radius:12px;
  padding:13px 15px; font-size:14.5px; margin-top:24px;
}
.state svg { width:17px; height:17px; stroke:var(--ink); flex-shrink:0; }

.error {
  display:none; border:1.5px solid #c0392b; background:#fdecea; color:#a4302a;
  border-radius:12px; padding:13px 15px; font-size:14.5px;
  margin-top:22px; text-align:left;
}

/* Bloc d'offre (page fin d'essai) */
.offer { border:2px solid var(--ink); border-radius:16px; padding:22px 20px; margin-top:24px; }
.offer .price { display:flex; align-items:baseline; justify-content:center; gap:9px; margin-bottom:6px; }
.offer .old { font-size:20px; color:rgba(17,17,17,.45); text-decoration:line-through; }
.offer .new { font-family:'FreshMango', sans-serif; font-size:46px; line-height:1; }
.offer .per { font-size:15px; color:var(--ink-62); }
.offer .note { font-size:13.5px; color:var(--ink-62); }

/* ── Tablette ────────────────────────────────────────────────────────── */
@media (max-width:980px) {
  .main { grid-template-columns:1fr; column-gap:0; row-gap:44px; padding:16px 32px 56px; }
  /* Une seule colonne : on rend la main à l'ordre du HTML — section, carte,
     puis pastilles et mentions. */
  .main > section:not(.card),
  .main > .card-wrap,
  .main > .side { grid-column:auto; grid-row:auto; }
  /* Les marges hautes servaient à décoller ces blocs du texte au-dessus ;
     sous la carte, la gouttière de la grille suffit. */
  .pills { margin-top:0; }
  .fine { margin-top:0; }
  /* Une seule colonne : l'illustration se retrouve juste sous le texte légal.
     La marge doit couvrir toute sa hauteur hors carte, sinon elle passe par
     dessus les liens CGU. `left:0` l'empêche de sortir de l'écran à gauche. */
  .card-wrap { margin-top:190px; }
  .card-singer { left:0; width:42%; }
  .top { padding:22px 32px; }
  .fine { max-width:none; }
  .lead { max-width:none; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width:560px) {
  .top { padding:20px 20px; }
  .brand img { height:26px; }
  .brand span { font-size:28px; }
  .back-pill { padding:9px 13px; font-size:13px; }
  .main { padding:12px 20px 48px; row-gap:36px; }
  /* Titre sur 2 lignes : on masque le 3e retour. La taille suit la largeur —
     à 360px, « sans sortir ta carte » ne tient pas au-delà de 32,5px. */
  .br-desk { display:none; }
  h1 { font-size:clamp(30px, 8.4vw, 36px); }
  .lead { font-size:17px; margin-top:20px; }
  .pills { margin-top:28px; gap:8px; }
  .pills li { font-size:13px; padding:8px 14px 8px 11px; }
  .fine { margin-top:32px; }
  .card { padding:26px 22px 24px; box-shadow:6px 6px 0 var(--ink); }
  /* Espace resserré sous le texte d'intro. Cette marge loge la partie de
     l'illustration qui dépasse au-dessus de la carte — or cette hauteur suit
     la largeur de l'écran (l'illustration fait 62% de la carte). Une valeur
     fixe recouvrait le paragraphe dès 480px : la marge doit suivre la même
     échelle. Résultat : ~20px d'écart constant sur toute la plage mobile. */
  .card-wrap { margin-top:calc(30vw - 28px); }
  .card-singer { left:0; width:62%; }
  .card-head .tag { font-size:28px; }
  ul.checks li { font-size:15px; gap:12px; }
  .btn { font-size:16.5px; padding:17px 18px; }
  .btn span { white-space:normal; }
}