/* ==========================================================================
   Mon P4 — feuille de style unique
   Aucune ressource externe : polices et images sont servies depuis ce site.
   Conséquence : aucun cookie, aucun appel à un tiers, aucun traceur.
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --nuit-950: #040814;
  --nuit-900: #070D1F;
  --nuit-800: #0B1330;
  --nuit-700: #101B42;
  --nuit-600: #17245A;
  --surface:  #0D1636;
  --or-300:   #F0DCA8;
  --or-400:   #E8CD8A;
  --or-500:   #D9B24C;
  --or-600:   #C49A33;
  --neige:    #F6F8FD;
  --ardoise:  #9AA6C8;
  --positif:  #34D399;
  --verre-bord: rgba(255,255,255,.12);
  --largeur: 1120px;
  --rayon: 22px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--neige);
  background: var(--nuit-900);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Halos dorés discrets en fond, comme dans l'application */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -8%,  rgba(217,178,76,.13), transparent 62%),
    radial-gradient(52rem 38rem at -8% 22%,  rgba(23,36,90,.85),   transparent 60%),
    linear-gradient(180deg, var(--nuit-800) 0%, var(--nuit-900) 45%, var(--nuit-950) 100%);
}

a { color: var(--or-400); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--or-400); outline-offset: 3px; border-radius: 6px; }

img, svg { max-width: 100%; height: auto; display: block; }

.contenu { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 24px; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(7,13,31,.72);
  border-bottom: 1px solid var(--verre-bord);
}
.entete .contenu {
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.06rem; color: var(--neige); }
.marque:hover { text-decoration: none; }
.marque svg, .marque img { width: 38px; height: 38px; }
.nav-liens { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
.nav-liens a { color: var(--ardoise); font-size: .95rem; font-weight: 500; }
.nav-liens a:hover { color: var(--neige); text-decoration: none; }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.12rem; font-weight: 600; }
p  { margin: 0 0 1em; }
.chapeau { font-size: 1.12rem; color: var(--ardoise); max-width: 62ch; }
.dore { color: var(--or-400); }

/* ---------- Accroche ---------- */
.accroche { padding-top: 68px; }
.accroche-grille {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 56px; align-items: center;
}
.etiquette {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; margin-bottom: 22px;
  border: 1px solid var(--verre-bord); border-radius: 999px;
  background: rgba(217,178,76,.10);
  font-size: .82rem; font-weight: 600; color: var(--or-300);
}
.etiquette::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--positif); box-shadow: 0 0 0 3px rgba(52,211,153,.22);
}
/* La pastille verte annonce « c'est en ligne ». Elle n'a rien à faire derrière un
   avertissement : la variante neutre sert aux étiquettes qui informent sans annoncer. */
.etiquette-neutre {
  background: rgba(255,255,255,.05); color: var(--ardoise);
}
.etiquette-neutre::before { display: none; }
.boutons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 15px;
  font-weight: 600; font-size: .98rem; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bouton:hover { text-decoration: none; transform: translateY(-2px); }
.bouton-or {
  background: linear-gradient(135deg, var(--or-300), var(--or-500));
  color: var(--nuit-900);
  box-shadow: 0 10px 30px rgba(217,178,76,.26);
}
.bouton-or:hover { box-shadow: 0 14px 38px rgba(217,178,76,.36); }
.bouton-fantome { border-color: var(--verre-bord); color: var(--neige); background: rgba(255,255,255,.04); }
.bouton-fantome:hover { background: rgba(255,255,255,.09); }

/* Mockup téléphone */
.telephone {
  position: relative; margin-inline: auto;
  width: min(320px, 82vw);
  padding: 11px;
  border-radius: 42px;
  background: linear-gradient(160deg, #2a3563, #0a1024);
  border: 1px solid var(--verre-bord);
  box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.telephone img { border-radius: 32px; width: 100%; }

/* ---------- Cartes ---------- */
.grille { display: grid; gap: 22px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }

.carte {
  padding: 28px;
  border-radius: var(--rayon);
  border: 1px solid var(--verre-bord);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
}
.carte h3 { margin-bottom: .4em; }
.carte p { color: var(--ardoise); margin: 0; font-size: .96rem; }
.carte-icone {
  width: 46px; height: 46px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(217,178,76,.14);
  font-size: 1.3rem;
}

/* Carte de la plateforme réellement disponible, pour qu'on la distingue des deux
   autres sans avoir à lire les trois paragraphes. Même vert que le bandeau privé.
   ⚠ Doit rester APRÈS .carte : même spécificité, c'est la dernière règle qui gagne.
   Placée plus haut, le `border` raccourci de .carte écrasait la bordure verte. */
.carte-vedette {
  border-color: rgba(52,211,153,.34);
  background: linear-gradient(180deg, rgba(52,211,153,.10), rgba(52,211,153,.025));
}

/* Bandeau confidentialité */
.bandeau-prive {
  border-radius: var(--rayon);
  border: 1px solid rgba(52,211,153,.32);
  background: linear-gradient(135deg, rgba(52,211,153,.11), rgba(52,211,153,.03));
  padding: 34px;
}
.bandeau-prive h2 { margin-bottom: .35em; }
.liste-nette { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.liste-nette li { display: flex; gap: 12px; align-items: flex-start; color: var(--ardoise); }
.liste-nette li::before { content: '✓'; color: var(--positif); font-weight: 700; flex: none; }

/* Galerie de captures */
.galerie {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 40px;
}
/* Trois captures depuis le 28 août 2026 : quatre colonnes laisseraient un vide. */
.galerie-3 { grid-template-columns: repeat(3, 1fr); }
.galerie figure { margin: 0; }
.galerie img {
  width: 100%; border-radius: 18px;
  border: 1px solid var(--verre-bord);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.galerie figcaption {
  margin-top: 12px; text-align: center;
  font-size: .88rem; color: var(--ardoise);
}

/* ---------- Pages de texte ---------- */
.page-texte { padding-top: 56px; }
.page-texte h2 { margin-top: 2.2em; }
.page-texte h2:first-of-type { margin-top: 1em; }
.page-texte p, .page-texte li { color: #C6CEE4; }
.page-texte ul { padding-left: 1.25em; }
.page-texte li { margin-bottom: .45em; }
.encadre {
  border-left: 3px solid var(--or-500);
  background: rgba(217,178,76,.07);
  padding: 18px 22px; border-radius: 0 14px 14px 0; margin: 26px 0;
}
.encadre p:last-child { margin-bottom: 0; }
.maj { font-size: .9rem; color: var(--ardoise); }

/* Mise en valeur ponctuelle des faits décisifs.
   On réutilise la grammaire déjà en place plutôt que d'ajouter une couleur :
   l'or pour ce qui touche au commerce (prix, échéances), le vert pour les
   garanties (ce qui reste gratuit, ce que l'application ne fait pas). À employer
   avec parcimonie — trois mots en couleur ressortent, dix ne ressortent plus. */
.cle      { color: var(--or-400); font-weight: 700; }
.cle-vert { color: var(--positif); font-weight: 700; }

/* ---------- Tableau comparatif gratuit / abonnement ----------
   Deux colonnes seulement, et la gratuite en premier : c'est elle que le visiteur
   doit lire d'abord, parce que c'est elle qu'il obtiendra sans rien payer. Un
   comparatif qui met la formule payante en tête se lit comme une vitrine ; celui-ci
   doit se lire comme un état des lieux honnête.

   Pas de croix rouges : une fonction absente de la version gratuite n'est pas un
   manque, c'est une limite annoncée. Le tiret suffit. */
.comparatif { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: .95rem; }
.comparatif caption { text-align: left; color: var(--ardoise); font-size: .92rem; padding-bottom: 14px; }
.comparatif th, .comparatif td { padding: 13px 14px; border-bottom: 1px solid var(--verre-bord); text-align: left; }
.comparatif thead th { color: var(--neige); font-weight: 600; font-size: .95rem; border-bottom-color: rgba(255,255,255,.22); }
.comparatif thead th:not(:first-child) { text-align: center; width: 22%; }
.comparatif tbody th { color: var(--neige); font-weight: 500; }
.comparatif td { text-align: center; color: var(--ardoise); }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: none; }

/* Marqueurs. Le mot accompagne toujours le symbole : un lecteur d'écran ne lit pas
   une pastille, et un daltonien ne distingue pas le vert de l'or. */
.oui  { color: var(--positif); font-weight: 700; }
.non  { color: #6C7899; }
.part { color: var(--or-400); font-weight: 600; font-size: .88rem; }

/* En-tête de colonne : la formule payante porte l'or, la gratuite le vert des
   garanties — la même grammaire que .cle et .cle-vert dans le corps du texte. */
.col-gratuit  { color: var(--positif) !important; }
.col-premium  { color: var(--or-300)  !important; }
.comparatif .prix { display: block; font-weight: 400; font-size: .82rem; color: var(--ardoise); margin-top: 3px; }

@media (max-width: 720px) {
  .comparatif { font-size: .88rem; }
  .comparatif th, .comparatif td { padding: 11px 8px; }
  .comparatif thead th:not(:first-child) { width: 26%; }
}

table.donnees { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .95rem; }
table.donnees th, table.donnees td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--verre-bord); }
table.donnees th { color: var(--or-300); font-weight: 600; }
table.donnees td { color: var(--ardoise); }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--verre-bord);
  padding: 44px 0 34px;
  background: rgba(4,8,20,.55);
}
.pied .contenu { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.pied a { color: var(--ardoise); font-size: .92rem; }
.pied a:hover { color: var(--neige); }
.pied-liens { display: flex; gap: 22px; flex-wrap: wrap; }
.pied small { color: #6C7899; font-size: .86rem; }

/* ---------- Adaptatif ---------- */
@media (max-width: 940px) {
  .accroche-grille { grid-template-columns: 1fr; gap: 44px; }
  .grille-3, .grille-2 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  section { padding: 62px 0; }
}
@media (max-width: 560px) {
  .galerie { grid-template-columns: 1fr; }
  .entete .contenu { min-height: 64px; }
  .nav-liens { gap: 16px; width: 100%; margin-left: 0; padding-bottom: 10px; }
  .bouton { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}