/* ============================================================
   PepTrust — mise en page
   Deux moitiés : une noire, une blanche, puis un dégradé vers
   le violet. Aucun trait de séparation : c'est le fond qui
   change. Aucune hauteur en dur : un bloc fait la hauteur de
   son contenu, jamais plus — c'est ce qui évite les trous.
   ============================================================ */

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

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--text-light);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,svg,video{ max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; cursor: pointer; }
h1,h2,h3{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
  max-width: 30ch;
}
/* balance : équilibre les lignes d'un titre.
   pretty : interdit le mot seul en dernière ligne d'un paragraphe. */
.hero__sub,.sous-appel,.etape__titre,.pour__titre{ text-wrap: balance; max-width: 30ch; }
.etape p,.pour__txt,.faq p,.avertissement,.pied__fin,.pied__legal,.mention-demo{ text-wrap: pretty; }

.wrap{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }

/* 28px en bas + 28px en haut = 56px entre deux sections sur
   téléphone, 88px sur grand écran. Le fond reste continu. */
.bloc{ padding: calc(var(--entre) / 2) 0; }
.bloc h2{ font-size: clamp(24px, 6.4vw, 34px); }

/* Réservé à la dernière ligne d'un grand titre. */
.degrade-txt{
  background: linear-gradient(90deg, var(--violet) 0%, var(--violet-2) 60%, var(--violet-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   BOUTONS
   Le violet est vif : un texte blanc dessus ne passerait pas
   le contraste. Le texte est donc encre sur violet.
   ============================================================ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.btn--primary{
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
  color: var(--on-violet);
}

/* ============================================================
   NAVIGATION
   Pilule flottante. Son fond est assez sombre pour rester
   lisible au-dessus du noir ET au-dessus du blanc : elle n'a
   donc pas besoin de JavaScript pour changer d'état.
   ============================================================ */
.nav{
  position: fixed;
  top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 20;
  width: calc(100% - 2 * var(--gutter));
  max-width: 600px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 5px 5px 18px;
  background: rgba(11,7,24,0.76);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-pill);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.logo{
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--text-light);
}
.logo span{ color: var(--violet); }
.nav .btn{ min-height: 44px; padding: 0 18px; font-size: 13.5px; }

/* ============================================================
   HERO
   Sa hauteur suit son contenu : aucune valeur en dur, jamais
   de 100vh. C'est ce qui produisait les grandes zones vides.
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  padding: 82px 0 var(--entre);
  background: var(--ink);
  text-align: center;
}
.hero__main{ position: relative; max-width: 560px; margin: 0 auto; }

/* les deux halos : toute la profondeur de la section noire */
.halo{ position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.halo--haut{
  top: -120px; width: 420px; height: 300px;
  background: radial-gradient(circle, rgba(124,92,255,.42) 0%, rgba(91,124,255,.16) 45%, transparent 70%);
}
.halo--bas{
  bottom: -140px; width: 460px; height: 300px;
  background: radial-gradient(circle, rgba(124,92,255,.30) 0%, rgba(91,124,255,.12) 45%, transparent 70%);
}

/* La vidéo ne doit pas se lire comme une vignette collée : plus de
   cadre, plus de rayon. « screen » efface tout le noir de l'image et
   ne laisse que la lumière ; le masque radial éteint les bords. */
.hero__video{
  position: relative;
  width: 100%; max-width: 360px;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  overflow: visible;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 42%, transparent 78%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 45%, #000 42%, transparent 78%);
}
/* La variante à comparer : « lighten » garde le visage plus dense. */
.hero__video--lighten{ mix-blend-mode: lighten; }
/* Le cadre porte la proportion : la case reste carrée même si
   le fichier vidéo n'est pas encore là. Ce n'est pas une
   hauteur en dur, c'est un rapport largeur/hauteur. */
.hero__video{ aspect-ratio: 1 / 1; }
.hero__video .slot{ position: absolute; inset: 0; }
.hero__video video{
  position: relative;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: transparent;
}

/* Le titre chevauche le bas de la vidéo : sans ça, le cadre
   supprimé laisse un grand vide au milieu du hero. */
.hero h1{ position: relative; margin-top: -40px; font-size: clamp(29px, 7.8vw, 46px); }
.hero h1 span{ display: block; }
.hero__sub{
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted-light);
}

/* ============================================================
   BARRE DE RECHERCHE
   Strictement identique partout. Deux habillages : sombre dans
   le hero, clair dans le dégradé.
   ============================================================ */
.search{ position: relative; margin: 22px auto 0; max-width: 440px; }
.search__field{
  position: relative;
  display: flex; align-items: center;
  height: 54px;
  padding: 0 6px 0 20px;
  background: var(--glass);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-pill);
}
.search__field:focus-within{ border-color: var(--violet); }
.search__input{
  flex: 1; min-width: 0;
  height: 100%;
  background: none; border: 0; outline: none;
  font-family: var(--font); font-size: 14.5px;
  color: var(--text-light);
}
.search__input::placeholder{ color: transparent; }
.search__input::-webkit-search-cancel-button{ display: none; }

/* Faux texte d'exemple : le vrai « placeholder » ne peut pas
   être mesuré, donc impossible de garantir qu'il n'est pas coupé. */
.search__exemple{
  position: absolute;
  left: 20px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  font-size: 14.5px;
  color: var(--muted-light);
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.search__exemple[hidden]{ display: none; }

.search__go{
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
  font-weight: 700; font-size: 13.5px;
  color: var(--on-violet);
}
.search__go svg{ flex: none; }

.search--clair .search__field{
  background: rgba(255,255,255,0.85);
  border-color: rgba(11,7,24,.12);
}
.search--clair .search__input{ color: var(--text-dark); }
.search--clair .search__exemple{ color: var(--muted-dark); }
/* Le bouton est identique partout : même dégradé, même texte. */

/* ============================================================
   LA FICHE QUI APPARAÎT APRÈS « ESSAYER »
   Le nom reste lisible, la note est floutée : montrer que
   l'analyse existe convainc mieux qu'un mur.
   ============================================================ */
.resultat{ margin: 14px auto 0; max-width: 440px; text-align: left; }
.resultat[hidden]{ display: none; }
@media (prefers-reduced-motion: no-preference){
  .resultat[data-anim="in"]{ animation: apparition 160ms ease-out both; }
}
@keyframes apparition{ from{ opacity: 0; transform: translateY(6px) } to{ opacity: 1 } }

.carte-res{
  padding: 16px;
  background: var(--paper);
  border-radius: var(--r-card);
  color: var(--text-dark);
}
.carte-res__nom{ font-weight: 800; font-size: 15.5px; line-height: 1.2; letter-spacing: -0.02em; }
.carte-res__ville{ margin: 4px 0 0; font-size: 13px; color: var(--muted-dark); }
.floute{ margin-top: 12px; filter: blur(6px); user-select: none; pointer-events: none; }
.floute .rw{ padding: 7px 0; font-size: 13px; color: var(--muted-dark); }
.floute__gros{ font-weight: 800; font-size: 24px; color: var(--text-dark); }
.cadenas{ display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cadenas__icone{ flex: none; color: var(--violet); }
.cadenas .btn{ flex: 1; }
.mention-demo{ margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted-light); }

/* ============================================================
   LIGNES À POINTS DE CONDUITE
   Le procédé des factures : le libellé à gauche, la valeur à
   droite, et des points qui absorbent tout l'espace du milieu.
   ============================================================ */
.rw{ display: flex; align-items: baseline; gap: 7px; }
.dt{ flex: 1; min-width: 10px; border-bottom: 1.5px dotted var(--points); transform: translateY(-4px); }
.rw b{ font-weight: 700; font-size: 11px; white-space: nowrap; }
.sur-clair .dt{ border-bottom-color: var(--points-b); }

/* ============================================================
   LA MOITIÉ CLAIRE
   Bascule franche : pas de dégradé de transition, pas de trait,
   pas d'espace entre les deux fonds.
   ============================================================ */
.clair{ background: var(--paper); color: var(--text-dark); }
.clair h2{ color: var(--text-dark); font-size: clamp(24px, 6.4vw, 32px); }

/* --- les quatre étapes, format horizontal --- */
.etapes{ display: grid; gap: 10px; margin-top: 16px; }
.etape{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px;
  background: var(--paper-2);
  border-radius: var(--r-etape);
}
.etape__img{
  flex: none;
  width: 120px; height: 120px;
  padding: 9px;
  background: var(--ink-2);
  border-radius: var(--r-illu);
}
.etape__img svg{ display: block; width: 100%; height: 100%; }
.etape__txt{ flex: 1; min-width: 0; }
.etape__tete{ display: flex; align-items: center; gap: 8px; }
.etape__num{
  flex: none;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--violet);
  font-weight: 700; font-size: 11px;
  color: var(--paper);
}
.etape__titre{ font-weight: 700; font-size: 14.5px; line-height: 1.25; letter-spacing: -0.01em; }
.etape p{ margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted-dark); }
.etape__preuve{ margin: 10px 0 0; font-weight: 500; font-size: 12px; color: var(--violet-deep); }

/* ============================================================
   TRANSFORMATIONS
   ============================================================ */
.sous-appel{ margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: var(--violet-deep); }
.piste{ overflow: hidden; margin: 18px 0 0; }
.trk{ display: flex; gap: 12px; width: max-content; animation: mv 26s linear infinite; }
@keyframes mv{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .trk{ animation: none } }

.vignette{ width: 250px; flex: none; }
/* Un quadrillage très discret sous la photo : ça donne une
   assise à l'image sans ajouter ni ombre ni cadre lourd. */
.vignette__cadre{
  padding: 6px;
  border: var(--hairline) solid var(--points-b);
  border-radius: var(--r-media);
  background-color: var(--paper-2);
  background-image:
    linear-gradient(var(--points-b) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--points-b) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
}
.vignette__img{ display: block; width: 100%; height: auto; border-radius: var(--r-illu); }
.vignette__slot{ aspect-ratio: 16 / 9; border-radius: var(--r-illu); }
.vignette__legende{ margin: 8px 0 0; font-size: 12px; color: var(--muted-dark); }

/* Deux vidéos côte à côte, jamais recadrées, jamais collées
   aux bords de l'écran. */
.videos{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 16px 0;
}
.video__cadre{
  position: relative;
  border: 0.5px solid var(--filet);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--ink-2);
}
.video__cadre video{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: transparent;
}
.video__cadre .video__slot{ position: absolute; inset: 0; }
.video__slot{ aspect-ratio: 9 / 16; }
.avertissement{ margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-dark); }

/* ============================================================
   LES QUESTIONS
   ============================================================ */
.faq{ margin-top: 14px; }
.faq details{ border-top: var(--hairline) solid var(--points-b); }
.faq details:first-of-type{ border-top: 0; }
.faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 44px;
  padding: 15px 0;
  list-style: none;
  font-weight: 700; font-size: 14.5px; line-height: 1.3;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary svg{ flex: none; color: var(--violet-deep); }
.faq details[open] summary .v{ display: none; }
.faq p{ margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted-dark); max-width: 62ch; }

/* ============================================================
   LE DÉGRADÉ VERS LE VIOLET
   Il couvre la conversion ET les trois cartes : étalé sur
   toute cette hauteur, le passage se fait en douceur au lieu
   de se voir comme une bande.
   ============================================================ */
.zone-degrade{
  background: linear-gradient(180deg, var(--paper) 0%, var(--violet-pale) 42%, var(--violet-deep) 100%);
  color: var(--text-dark);
}
.zone-degrade h2{ color: var(--text-dark); }
.zone-degrade .bloc{ text-align: center; }
.zone-degrade h2,.violet h2{ margin-inline: auto; }
.zone-degrade .search{ text-align: left; }
/* Bas du dégradé : le bouton violet touche un fond violet.
   Un filet clair suffit à le détacher — aucune ombre. */
.zone-degrade .centre-btn .btn{ border: 1px solid rgba(255,255,255,.62); }

/* --- les trois cartes --- */
.pours{ display: grid; gap: 12px; margin-top: 16px; }
.pour{ border-radius: var(--r-card); overflow: hidden; }
.pour__illu{
  min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 18px;
}
.pour__illu .rw{ width: 100%; padding: 6px 0; font-size: 12.5px; }
.pour--sombre .pour__illu{ background: var(--ink-2); color: var(--text-light); }
.pour--sombre .pour__illu .rw span:first-child{ color: var(--muted-light); }
.pour--sombre .pour__illu .rw b{ color: var(--violet-soft); }
.pour--pale .pour__illu{ background: var(--violet-pale); color: var(--text-dark); }
.pour--nuit .pour__illu{ background: var(--ink-3); color: var(--text-light); }
.pour__chiffre{ font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.pour__paire{ display: flex; align-items: center; gap: 14px; }
.pour__dit{ text-align: left; padding: 16px 18px 18px; background: var(--paper-2); color: var(--text-dark); }
.pour__titre{ font-weight: 700; font-size: 15.5px; line-height: 1.25; letter-spacing: -0.01em; }
.pour__txt{ margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-dark); }
.centre-btn{ margin-top: 20px; text-align: center; }

/* ============================================================
   LA FAQ, EN FIN DE PAGE
   Elle prolonge le violet du dégradé : le texte y passe en blanc.
   ============================================================ */
.violet{ background: var(--violet-deep); color: var(--paper); }
.violet h2{ color: var(--paper); }
.violet .faq details{ border-top-color: rgba(255,255,255,.35); }
.violet .faq summary{ color: var(--paper); }
.violet .faq summary svg{ color: var(--paper); }
.violet .faq p{ color: var(--paper); }


/* ============================================================
   PIED DE PAGE
   Il termine sur le violet plein : le texte y passe en blanc,
   un texte encre n'y serait plus assez contrasté.
   ============================================================ */
.pied{ padding: 6px 0 44px; background: var(--violet-deep); color: var(--paper); }
.pied .logo{ color: var(--paper); }
.pied .logo span{ color: var(--on-violet); }
.pied__signal{
  display: inline-flex; align-items: center;
  min-height: 44px; line-height: 1.2;
  margin-top: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--paper);
  text-decoration: underline; text-underline-offset: 3px;
}
.pied__liens{
  margin: 8px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: 13px;
}
.pied__liens a{ display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); }
.pied__fin{ margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--paper); max-width: 60ch; }
.pied__legal{ margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--paper); max-width: 74ch; }
.pied__todo{ border: var(--hairline) dashed rgba(255,255,255,.5); border-radius: var(--r-illu); padding: 12px 14px; }

/* ============================================================
   LA FEUILLE DES FORMULES
   Aucun prix n'existe dans la page : elle ne s'ouvre qu'au
   clic sur « Commencer ».
   ============================================================ */
.voile{
  position: fixed; inset: 0; z-index: 30;
  background: rgba(5,5,11,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.voile[hidden]{ display: none; }
.feuille{
  position: fixed; z-index: 31;
  left: 0; right: 0; bottom: 0;
  max-height: 92dvh; overflow-y: auto;
  padding: 14px 20px 26px;
  background: var(--paper);
  color: var(--text-dark);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.feuille[hidden]{ display: none; }
.feuille h2{ font-size: 19px; color: var(--text-dark); }
.feuille__poignee{ width: 40px; height: 4px; margin: 0 auto 16px; border-radius: var(--r-pill); background: var(--points-b); }
.feuille__fermer{
  position: absolute; top: 14px; right: 16px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--muted-dark);
}
.feuille__inclus{ margin: 14px 0 0; padding: 0; list-style: none; }
.feuille__inclus li{
  padding: 11px 0;
  border-top: var(--hairline) solid var(--points-b);
  font-size: 14px; color: var(--muted-dark);
}
.feuille__inclus li:first-child{ border-top: 0; }
.formules{ display: grid; gap: 10px; margin: 20px 0 0; }
.formule{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 62px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1.5px solid transparent;
  border-radius: var(--r-illu);
  text-align: left;
}
.formule[aria-checked="true"]{ border-color: var(--violet); }
.formule__nom{ font-weight: 700; font-size: 14px; }
.formule__detail{ display: block; font-weight: 400; font-size: 12px; color: var(--muted-dark); }
.formule__prix{ font-weight: 800; font-size: 17px; white-space: nowrap; letter-spacing: -0.02em; }
.feuille .btn{ width: 100%; margin-top: 18px; }

@media (min-width: 780px){
  .feuille{
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 48px));
    border-radius: var(--r-card);
    padding: 26px;
  }
  .feuille__poignee{ display: none; }
  .etapes,.pours{ grid-template-columns: 1fr 1fr; }
  .videos{ max-width: 520px; margin-inline: auto; }
}

.page-abo{ display: flex; align-items: center; padding: 60px 0; }
.page-abo .feuille{
  position: static; transform: none;
  max-width: 440px; margin: 0 auto;
  border-radius: var(--r-card);
  padding: 26px; max-height: none;
}
.page-abo .feuille__poignee{ display: none; }

/* ============================================================
   EMPLACEMENTS DE MÉDIAS
   Tant qu'un fichier manque, la case porte son nom : une case
   vide donne l'impression d'un site cassé.
   ============================================================ */
.slot{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center;
  background: var(--ink-2);
  font-weight: 700; font-size: 11px; line-height: 1.5;
  color: var(--violet-soft);
  word-break: break-word;
}

/* ============================================================
   PAGES D'AUTHENTIFICATION
   ============================================================ */
.auth{
  position: relative; overflow: hidden;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px var(--gutter);
  background: var(--ink);
}
.auth__cadre{
  position: relative; z-index: 2;
  width: 100%; max-width: 420px;
  padding: 28px 22px 26px;
  background: rgba(150,130,255,0.05);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-card);
}
.auth__int{ position: relative; }
.auth .logo{ display: inline-flex; margin-bottom: 18px; }
.auth h1{ font-size: 22px; }
.auth__sous{ margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted-light); }
.auth .champ{ margin-top: 20px; }
.auth label{
  display: block; margin-bottom: 8px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  color: var(--violet-soft);
}
.auth input{
  width: 100%; height: 52px;
  padding: 0 16px;
  background: var(--glass);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-pill);
  font-family: var(--font); font-size: 15px;
  color: var(--text-light);
  outline: none;
}
.auth input:focus{ border-color: var(--violet); }
.auth .btn{ width: 100%; margin-top: 14px; }
.auth .btn:disabled{ opacity: .5; cursor: default; }
.message{
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-illu);
  font-size: 13.5px; line-height: 1.5;
  background: var(--glass);
  border: var(--hairline) solid var(--glass-bord);
  color: var(--muted-light);
}
.message[hidden]{ display: none; }
.message b{ display: block; margin-bottom: 4px; font-weight: 700; font-size: 13px; color: var(--text-light); }
.message--ok{ border-color: var(--violet); }
.message--erreur{ border-color: var(--alert); }
.message--erreur b{ color: var(--alert); }
.auth__bas{
  margin: 20px 0 0; padding-top: 18px;
  border-top: var(--hairline) solid var(--glass-bord);
  font-size: 13.5px; color: var(--muted-light);
}
.auth__bas a{ color: var(--violet-soft); }
.auth__retour{ margin: 12px 0 0; font-size: 12.5px; }
.auth__retour a{ color: var(--muted-light); }
.num{ font-weight: 700; }

/* ============================================================
   L'ESPACE ABONNÉ — LA FICHE D'UN VENDEUR
   C'est ce que l'abonné reçoit. Fond sombre, une seule couleur
   d'action, chaque affirmation portant son lien de source.
   ============================================================ */
.espace{ min-height: 100dvh; background: var(--ink); padding: 74px 0 60px; }

.barre-haut{
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 20;
  width: calc(100% - 2 * var(--gutter)); max-width: 600px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 5px 5px 18px;
  background: rgba(11,7,24,0.76);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-pill);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.barre-haut .lien-sobre{
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; font-size: 13px; color: var(--muted-light);
}
.barre-haut .lien-sobre:hover{ color: var(--text-light); }

.fiche{ max-width: 560px; margin: 0 auto; }

.fiche__etat{
  padding: 28px 18px;
  text-align: center;
  font-size: 14px;
  color: var(--muted-light);
}

.fiche__carte{
  padding: 22px 18px 24px;
  background: rgba(150,130,255,0.05);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-card);
}
.fiche__nom{ font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.fiche__date{ margin: 5px 0 0; font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted-light); text-transform: uppercase; }
.fiche__filet{ height: var(--hairline); background: var(--violet); opacity: .6; margin: 14px 0 0; }

.fiche__note{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 16px; }
.fiche__chiffre{ display: flex; align-items: baseline; gap: 4px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.fiche__chiffre b{ font-size: 54px; font-weight: 800; }
.fiche__chiffre i{ font-style: normal; font-size: 15px; color: var(--muted-light); }
.fiche__verdict{ text-align: right; font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; }
.fiche__verdict--ok{ color: var(--violet-soft); }
.fiche__verdict--moyen{ color: var(--muted-light); }
.fiche__verdict--alerte{ color: var(--alert); }

.fiche__jauge{ display: flex; gap: 4px; margin: 14px 0 2px; }
.fiche__jauge i{ flex: 1; height: 5px; border-radius: var(--r-pill); background: rgba(163,159,196,.22); }
.fiche__jauge i.on{ background: var(--violet); }

.fiche__plafond{
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--alert); border-radius: var(--r-illu);
  font-size: 12.5px; line-height: 1.5; color: var(--text-light);
}
.fiche__plafond b{ display: block; font-weight: 700; color: var(--alert); margin-bottom: 3px; }

.crit{ padding: 14px 0; border-top: var(--hairline) solid rgba(163,159,196,.22); }
.crit:first-of-type{ border-top: 0; }
.crit__ligne{ display: flex; align-items: baseline; gap: 7px; }
.crit__lab{ font-size: 13.5px; }
.crit__pts{ font-weight: 700; font-size: 12px; white-space: nowrap; }
.crit--oui .crit__pts{ color: var(--violet-soft); }
.crit--non .crit__pts{ color: var(--muted-light); }
.crit--alerte .crit__pts{ color: var(--alert); }
.crit__detail{ margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-light); }
.crit__source{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: 12.5px; color: var(--violet-soft);
  text-decoration: underline; text-underline-offset: 3px;
  word-break: break-all;
}
.crit__sans{ display: inline-flex; align-items: center; min-height: 28px; font-size: 12.5px; color: var(--muted-light); }

.fiche__note-bas{
  margin: 18px 0 0; padding-top: 16px;
  border-top: var(--hairline) solid rgba(163,159,196,.22);
  font-size: 11.5px; line-height: 1.6; color: var(--muted-light);
}
.fiche__actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fiche__actions .btn{ width: 100%; }
.btn--sobre{ background: var(--glass); border: var(--hairline) solid var(--glass-bord); color: var(--text-light); }

/* --- l'alerte ANSM : une information, pas un critère noté --- */
.ansm{
  margin-top: 16px; padding: 14px 16px;
  background: var(--glass);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-illu);
}
.ansm b{ display: block; font-weight: 700; font-size: 13.5px; }
.ansm p{ margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-light); }
.ansm--rouge{ border-color: var(--alert); }
.ansm--rouge b{ color: var(--alert); }
.ansm__regle{ font-size: 11.5px !important; }

/* --- l'écran « aucune information » --- */
.fiche__vide{
  margin-top: 18px; padding: 16px 18px;
  background: var(--glass);
  border: var(--hairline) solid var(--glass-bord);
  border-radius: var(--r-illu);
}
.fiche__vide b{
  display: block; margin-bottom: 8px;
  font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-light);
}
.fiche__vide p{ margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--muted-light); }
.fiche__vide p:last-child{ margin-bottom: 0; }
.fiche__soustitre{
  margin: 20px 0 4px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violet-soft);
}
.fiche__quota{
  margin: 14px 4px 0;
  font-size: 12px; line-height: 1.5;
  color: var(--muted-light);
  text-align: center;
}
.fiche__quota[hidden]{ display: none; }
.fiche__verdict-texte{
  margin: 20px 0 0; padding: 16px 18px;
  background: var(--glass);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-illu) var(--r-illu) 0;
  font-size: 14px; line-height: 1.55; color: var(--text-light);
  text-wrap: pretty;
}