/* La barre de defilement est definie a part pour etre partagee avec les
   pages autonomes (connexion, inscription…) qui ne chargent pas cette
   feuille. @import DOIT preceder toute regle : ne rien inserer au-dessus. */
@import url("scrollbar.css");

/* ════════════════════════════════════════════════════════════════════
   PALETTE — calee sur le logo Friday.

   Le logo est un F bleu royal sature (#1160e0) avec son propre ombrage
   bleu fonce (#0a3f9e), un chevron </> et un rack a LED vertes/ambre.
   L'ancienne palette partait d'un indigo lavande degrade vers du cyan :
   le duo violet-bleu par defaut qu'on retrouve sur des milliers de sites,
   et qui ne venait pas du logo. On garde le bleu de la marque, on retire
   le violet et le cyan.

   Regle : l'accent est utilise PLEIN. Les degrades qui changent de
   teinte sont bannis ; seul subsiste un ombrage clair-vers-fonce dans
   la meme teinte, qui reprend celui du logo.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Le site est sombre : on le declare au navigateur. Sans cela, tout ce
     qu'il dessine LUI-MEME reste clair — la liste deroulante d'un <select>,
     le remplissage automatique des champs, les selecteurs de date, les
     ascenseurs internes. On obtenait alors du texte clair sur un popup
     blanc, illisible. Une seule ligne, et tous les composants natifs
     suivent le theme. */
  color-scheme: dark;

  /* ── Fonds (navy neutre, sans derive violette) ─────────────────── */
  --bg-1: #060a14;
  --bg-2: #0a1020;
  --bg-deep: #03060e;

  /* Surfaces en couches */
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.075);
  --surface-solid: #0c1424;
  --surface-solid-2: #101a2e;

  /* Glass (compat héritée) */
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.055);
  --glass-3: rgba(255, 255, 255, 0.08);

  /* Bordures : plus franches qu'avant. C'est le trait qui separe les
     blocs, pas une ombre floue — dans l'esprit des contours epais du
     logo. */
  --border: rgba(120, 160, 235, 0.16);
  --border-strong: rgba(120, 160, 235, 0.32);
  --border-soft: rgba(120, 160, 235, 0.08);
  --hairline: rgba(255, 255, 255, 0.07);

  /* ── Accent : le bleu du logo ─────────────────────────────────── */
  --accent-1: #1160e0;
  --accent-2: #0a3f9e;
  --accent-3: #2f7bf5;
  --accent-primary: #1160e0;
  --accent-blue: #2f7bf5;
  --accent: #1160e0;
  /* Ombrage du logo (clair en haut a gauche, fonce en bas a droite),
     et non un degrade arc-en-ciel. */
  --accent-grad: linear-gradient(160deg, #2f7bf5 0%, #0d51c4 100%);
  --accent-grad-soft: linear-gradient(160deg, rgba(47, 123, 245, 0.16), rgba(13, 81, 196, 0.09));
  --accent-ring: rgba(47, 123, 245, 0.45);

  /* ── Texte ────────────────────────────────────────────────────── */
  --text: #eef2f9;
  --text-secondary: #9fadc6;
  --muted: #7c8aa6;
  --text-faint: #5e6b85;

  /* ── États (reprises des LED du rack sur le logo) ─────────────── */
  --danger: #ff4d4d;
  --danger-soft: rgba(255, 77, 77, 0.14);
  --success: #35c96b;
  --success-soft: rgba(53, 201, 107, 0.14);
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, 0.14);
  --info: #2f7bf5;

  /* ── Rayons : resserres. Les grands arrondis mous sont l'un des
     marqueurs du gabarit generique ; le logo, lui, est taille net. ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --card-radius: 10px;

  /* ── Ombres : resserrees et contrastees. On ne cherche plus le halo
     flou generalise mais une ombre courte, portee. ───────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 8px 24px rgba(17, 96, 224, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ── Transitions ──────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.16s var(--ease);
  --t: 0.24s var(--ease);
}

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

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

/* ── Fond ─────────────────────────────────────────────────────────────────
   Uni, ou presque. Ce qui s'y trouvait avant — une trame quadrillee facon
   papier millimetre, et un halo bleu diffus ancre en haut de chaque page —
   sont deux des decors les plus repandus des gabarits generes. Ils ne
   portent aucune information : ils occupent le fond pour qu'il ait l'air
   « travaille », et se reconnaissent au premier coup d'oeil.

   Un hebergeur serieux a un fond calme. L'interet visuel doit venir du
   contenu et de la typographie, pas de la toile de fond.

   Le degrade conserve ne varie que de trois valeurs du haut vers le bas :
   assez pour eviter l'aplat mort sur un grand ecran, trop peu pour se lire
   comme un effet. */
body {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #0a1020 0%, #070c18 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

main,
section,
.page,
.hero,
.features,
.info-section,
.stats-section,
.blog-section {
  min-width: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ── Champ d'etoiles : retire ─────────────────────────────────────────────
   Cent-quarante etoiles scintillantes derriere un panneau d'hebergement,
   regenerees toutes les 220 ms pour l'eternite. C'etait le marqueur le plus
   voyant de l'ensemble : un decor spatial anime n'a rien a faire sur un site
   ou l'on vient gerer des serveurs et des factures, et il faisait tourner le
   processeur en continu — y compris sur telephone, en pleine 4G.

   Le conteneur reste declare (les pages le contiennent encore) mais il est
   vide et masque : la generation a ete retiree de script.js. */
#stars-container { display: none; }

.fd-icon {
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  min-width: 1.1em;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
}
/* Pictogrammes traces a la main, en trait net et a angles vifs, plutot
   que des emoji ou des caracteres typographiques detournes. Le trait
   herite de la couleur du texte, donc une seule regle suffit partout. */
.fd-icon svg {
  display: block;
  width: 1.05em;
  height: 1.05em;
}

.page {
  position: relative;
  z-index: 2;
  padding: 3rem 6% 5rem;
}

.badge,
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  align-items: center;
  margin: 0 auto 2.4rem;
  padding: 4rem 5%;
  max-width: 1300px;
  position: relative;
  z-index: 2;
}

.hero-content {
  padding-right: 1rem;
}

.hero-stack {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Titres pleins, pas en degrade. Le texte degrade blanc-vers-bleu ciel
   applique a tous les titres est l'un des marqueurs les plus reconnaissables
   du gabarit generique — et il nuit a la lisibilite en fin de ligne. */
.hero-title,
h1 {
  margin: 1rem 0 0.5rem 0;
  font-size: clamp(2.3rem, 4vw, 3rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #fff;
}

.lead,
.hero-description {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 72ch;
}

.cta-row,
.hero-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-red,
.btn-renew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.35rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  color: #fff;
  text-decoration: none;
  background: transparent;
}

/* Action principale : aplat du bleu de la marque. Pas de degrade balaye
   d'un bord a l'autre, pas de halo colore sous le bouton — deux tics du
   gabarit generique. Le relief vient d'un liseré clair en haut, comme
   l'ombrage du logo. */
.btn-primary {
  background: var(--accent-1);
  color: #fff;
  border-color: #2f7bf5;
  box-shadow: var(--shadow-inset);
}

.btn-primary:hover {
  background: var(--accent-3);
  border-color: #5c9bff;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface-1);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--accent-1);
  color: #fff;
}

.btn-red {
  background: var(--danger);
  border: 1px solid #ff7a7a;
  color: #fff;
}

.btn-red:hover { background: #ff6666; transform: translateY(-1px); }

.btn-renew {
  background: var(--accent-1);
  border: 1px solid #2f7bf5;
  color: #fff;
}

.btn-renew:hover {
  background: var(--accent-3);
  transform: translateY(-1px);
}

.hero-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.hero-point {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-lg);
  background: var(--glass);
}

.hero-point-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: rgba(17, 96, 224, 0.16);
  border: 1px solid rgba(17, 96, 224, 0.2);
}

.hero-point-icon svg {
  width: 18px;
  height: 18px;
  fill: #d9e3ff;
}

.grid,
.features,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
}

.card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(17, 96, 224, 0.4);
}

.card-cover {
  height: 160px;
  position: relative;
  overflow: hidden;
}

.card-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(5, 12, 32, 0.72) 100%);
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

.card-body {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.card h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
}

/* 800 et non 900 : le noir typographique de Poppins, applique a un prix
   deja plus gros que le reste, donne le ton criard des pages de vente
   agressives. La taille suffit a le mettre en avant. */
.card .price {
  margin-left: auto;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
}

.card-desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.pill {
  padding: 0.32rem 0.6rem;
  border-radius: var(--r-sm);
  font-weight: 650;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.spec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-top: 0.4rem;
}

/* Pas d'ombre portee sur une puce de 64 px : une ombre de 26 px de flou
   sous chaque petit element cree ce flottement general ou plus rien ne
   repose sur rien. Le filet suffit a la detacher. */
.spec-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #d7dffc;
  min-height: 64px;
}

.spec-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-icon svg {
  width: 20px;
  height: 20px;
  fill: #c6d4ff;
}

.spec-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.spec-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.spec-value {
  font-weight: 800;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.section-heading {
  text-align: center;
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  font-weight: 800;
  margin: 0 auto 2.2rem;
  color: #fff;
  padding: 0 1rem;
}

.section-title {
  text-align: center;
  margin: 3rem auto 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.features {
  max-width: 1300px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

/* Plus de bandeau degrade en tete de carte : la barre de 5 px collee en
   haut de chaque tuile est l'un des ornements les plus repandus des pages
   generees, et elle n'apporte aucune information. */
.feature-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(17, 96, 224, 0.35);
}

/* Pastille carree a angles adoucis, dans un aplat translucide de l'accent.
   Le rond de 70 px rempli d'un degrade diagonal etait le marqueur le plus
   reconnaissable de l'ensemble — on le retrouve a l'identique sur des
   milliers de pages d'accueil. */
.feature-icon {
  width: 52px;
  height: 52px;
  background: rgba(17, 96, 224, 0.14);
  border: 1px solid rgba(47, 123, 245, 0.28);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.4rem;
  color: #cfe0ff;
}

.feature-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.feature-description {
  color: var(--muted);
}

.info-section {
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}

.info-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  color: #fff;
}

.info-card p {
  color: var(--muted);
}

/* Aplat translucide plutot qu'un degrade balaye en diagonale : sur un
   encadre pleine largeur, le degrade se voit et ne sert a rien. */
.info-highlight {
  background: rgba(17, 96, 224, 0.13);
  border: 1px solid rgba(47, 123, 245, 0.26);
  padding: 1.5rem;
  border-radius: var(--r-lg);
  margin: 0 auto 4rem;
  max-width: 1000px;
  color: #fff;
}

.parrainage-banner {
  margin: 0 auto 3.5rem;
  max-width: 1100px;
  padding: 1.3rem 1.5rem;
  border-radius: var(--r-lg);
  background: rgba(17, 96, 224, 0.12);
  border: 1px solid rgba(47, 123, 245, 0.30);
  color: #e7edff;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

.parrainage-banner strong {
  color: #fff;
}

.parrainage-banner .pill {
  background: rgba(255,255,255,0.06);
  color: #c1d8ff;
  border: 1px solid rgba(255,255,255,0.12);
}

.parrainage-banner .btn {
  padding: 0.85rem 1.1rem;
}

.stats-section {
  max-width: 1000px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  text-align: center;
}

.stat-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
}

.stat-label {
  color: var(--muted);
  font-size: 0.95rem;
}

.blog-section {
  max-width: 1300px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.blog-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow);
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(17, 96, 224, 0.3);
}

.blog-card h4 {
  margin-bottom: 0.6rem;
}

.blog-card p {
  color: var(--muted);
  margin-bottom: 1rem;
}

.blog-link {
  color: var(--accent-1);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.faq-container {
  max-width: 960px;
  margin: 3rem auto;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
}

.faq-title {
  text-align: center;
  margin-bottom: 2rem;
}

.faq-section {
  margin-bottom: 1.6rem;
}

.faq-section h2 {
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
}

.faq-section ul {
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--muted);
}

.faq-section li {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

footer {
  background: rgba(255, 255, 255, 0.02);
  padding: 3rem 2rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 340px) repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.footer-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
}

.footer-brand-logo {
  width: 86px;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
}

.footer-brand-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.footer-description {
  color: var(--muted);
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  gap: 0.6rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.social-link:hover {
  background: var(--accent-1);
  color: #fff;
}

.footer-heading {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  color: var(--muted);
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover {
  color: #fff;
}

.copyright {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.9rem;
}

.user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.user-badges span {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(17, 96, 224, 0.15);
  color: #cbd5f5;
  border: 1px solid rgba(17, 96, 224, 0.35);
}

.loading,
.hint {
  color: var(--muted);
}

.table-wrapper {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 3rem 6%;
  }

  .hero-content {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .page {
    padding: 2rem clamp(12px, 4vw, 18px) 3rem;
  }

  .hero {
    gap: 1.1rem;
    padding: 2.1rem clamp(12px, 4vw, 18px) 1.3rem;
    margin-bottom: 1.4rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 0.98rem;
  }

  .section-heading {
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
  }

  header {
    padding: 14px 22px;
  }

  .features,
  .info-section {
    padding: 0 clamp(12px, 4vw, 18px);
  }

  .feature-card,
  .info-card {
    padding: 1rem 0.9rem;
  }

  .features,
  .info-section,
  .stats-section,
  .blog-section {
    margin-bottom: 2.4rem;
    padding-left: clamp(12px, 4vw, 18px);
    padding-right: clamp(12px, 4vw, 18px);
  }

  .parrainage-banner {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 1rem;
    margin-bottom: 2.2rem;
  }

  .parrainage-banner .btn {
    width: 100%;
  }

  .info-highlight {
    margin-bottom: 2.4rem;
    padding: 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
  }

  .stat-card {
    padding: 1rem 0.8rem;
  }

  .stat-value {
    font-size: 1.65rem;
  }

  .blog-card {
    padding: 1rem 0.9rem;
  }

  .blog-grid,
  .features,
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .card .price {
    margin-left: 0;
  }

  footer {
    padding: 1.35rem 0.85rem 0.8rem;
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.7rem;
  }

  .footer-content > div:not(.footer-brand) {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.55rem 0.6rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    align-items: center;
  }

  .footer-brand-logo {
    width: 52px;
  }

  .footer-brand-title {
    font-size: 0.95rem;
    margin-bottom: 0;
  }

  .footer-description {
    display: none;
  }

  .footer-heading {
    font-size: 0.84rem;
    margin-bottom: 0.35rem;
  }

  .footer-links li {
    margin-bottom: 0.18rem;
    font-size: 0.78rem;
    line-height: 1.3;
  }

  .footer-links {
    display: grid;
    gap: 0.18rem;
  }

  .social-link {
    width: 30px;
    height: 30px;
  }

  .copyright {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 540px) {
  .page {
    padding: 1.45rem 0.72rem 2rem;
  }

  .cta-row,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .btn {
    width: 100%;
  }

  .hero-title {
    font-size: 1.8rem;
    line-height: 1.18;
  }

  .hero {
    padding: 1.55rem 0.72rem 0.9rem;
  }

  .grid,
  .features,
  .blog-grid,
  .info-section {
    grid-template-columns: 1fr;
  }

  .card,
  .feature-card,
  .info-card {
    width: 100%;
  }

  .feature-title {
    font-size: 1.15rem;
  }

  .feature-description,
  .info-card p,
  .blog-card p {
    font-size: 0.92rem;
  }

  .section-heading {
    font-size: 1.58rem;
    margin-bottom: 1.1rem;
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    text-align: left;
  }

  .footer-links li,
  .footer-links a {
    font-size: 0.76rem;
  }

  .footer-content > div:not(.footer-brand) {
    padding: 0.5rem 0.52rem;
  }
}

@media (max-width: 360px) {
  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand-logo {
    margin: 0 auto;
  }

  .social-links {
    justify-content: center;
  }
}

.animate {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(2px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform, filter;
}

.animate.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.delay-1 {
  transition-delay: 0.12s;
}

.delay-2 {
  transition-delay: 0.24s;
}

.delay-3 {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .animate,
  .animate.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   COUCHE DE BASE — defauts globaux
   ────────────────────────────────────────────────────────────────────
   Cette section s'appelait « couche premium » et elle REDEFINISSAIT les
   composants ecrits plus haut. Le fichier se contredisait : le haut
   retirait les degrades multi-teintes, les halos colores et les grands
   arrondis en expliquant pourquoi ; le bas les remettait quinze cents
   lignes plus loin, et c'est le bas qui gagnait.

   C'etait la cause principale de l'aspect « gabarit genere » : boutons a
   degrade avec halo bleu, bouton rouge en degrade rose-magenta absent de
   la palette, ascenseur lavande, cartes qui bondissent de 4 px au survol.
   Les regles utiles (focus, selection, lissage, champs, liens, badges)
   sont conservees ; celles qui contredisaient le haut sont alignees
   dessus.
   ════════════════════════════════════════════════════════════════════ */

/* Le fond est defini UNE fois, plus haut. Cette seconde declaration le
   redefinissait avec sa propre trame et son propre halo : deux versions du
   meme decor dans un seul fichier, dont seule la derniere s'appliquait. */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Plus d'interlettrage global : ajoute a tout le corps de texte, il
     donne cette impression de police « retouchee pour faire design » sans
     qu'on sache dire pourquoi. Poppins est deja espacee correctement. */
}

/* Sélection & focus accessibles */
::selection {
  background: rgba(17, 96, 224, 0.32);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Scrollbar raffinée — déplacée dans css/scrollbar.css.
   Elle est désormais chargée par TOUTES les pages, y compris celles qui
   n'utilisent pas cette feuille (connexion, inscription, mot de passe, 2FA…)
   et qui gardaient la barre par défaut du système. Voir l'en-tête de ce
   fichier pour le détail. L'import est en tête de style.css, comme l'exige
   la règle @import. */

/* ── Boutons ───────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-red,
.btn-renew {
  position: relative;
  border-radius: var(--r-sm);
  font-weight: 650;
  letter-spacing: 0.2px;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), filter var(--t-fast);
}

/* Aplat, comme annonce en tete de fichier. Le halo bleu porte sous le
   bouton (`--shadow-glow`) et la remontee de saturation au survol sont
   deux tics du gabarit generique : un bouton qui s'allume comme une
   enseigne fait davantage penser a une page d'arnaque qu'a un panneau
   d'hebergement. Le relief vient du lisere clair, comme sur le logo. */
.btn-primary {
  background: var(--accent-1);
  border: 1px solid #2f7bf5;
  box-shadow: var(--shadow-inset);
}
.btn-primary:hover {
  background: var(--accent-3);
  border-color: #5c9bff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-inset);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary,
.btn-ghost {
  border: 1px solid var(--border-strong);
  color: #d7e0ff;
  background: var(--surface-1);
  box-shadow: var(--shadow-inset);
}
.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--accent-ring);
  transform: translateY(-1px);
}

/* Rouge de la palette, et non un degrade rose-magenta : #d6286f n'existe
   nulle part ailleurs sur le site, et une action destructrice n'a aucune
   raison d'etre le bouton le plus colore de la page. */
.btn-red {
  background: var(--danger);
  border: 1px solid #ff7a7a;
  box-shadow: var(--shadow-inset);
}
.btn-red:hover { background: #ff6666; transform: translateY(-1px); }

/* ── Cartes ────────────────────────────────────────────────────── */
.card {
  background:
    var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* 2 px : de quoi repondre au survol, pas de quoi faire sauter la grille.
   Une carte qui bondit de 4 a 6 px est l'un des reflexes les plus visibles
   du gabarit genere. */
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.feature-card,
.info-card,
.blog-card,
.stat-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    var(--surface-solid);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}

/* ── Titres de section ─────────────────────────────────────────── */
.section-heading {
  letter-spacing: -0.8px;
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   ROBUSTESSE SUR PETIT ECRAN
   ────────────────────────────────────────────────────────────────────
   Regles defensives : elles corrigent des debordements sans rien changer
   a l'apparence sur grand ecran. Les trois causes reelles de textes qui
   se superposent ou de details qui sortent du cadre sont toujours les
   memes.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Les mots insecables — domaines, identifiants, adresses e-mail, URL —
   ne peuvent pas se couper par defaut : un seul suffit a elargir toute la
   page et a faire deborder ses voisins. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, td, th, label, figcaption, blockquote {
  overflow-wrap: break-word;
}

/* 2. Un enfant de grille ou de flex refuse de descendre sous la largeur de
   son contenu (min-width: auto). C'est la premiere cause de debordement
   horizontal, et elle est invisible tant qu'on ne reduit pas la fenetre. */
.grid > *,
.features > *,
.blog-grid > *,
.info-section > *,
.stats-grid > *,
.footer-content > * {
  min-width: 0;
}

/* 3. Une image sans hauteur automatique s'ecrase des que sa largeur est
   contrainte. */
img { height: auto; }

/* Les tableaux ne se replient pas : ils defilent dans leur cadre plutot
   que de pousser la page entiere vers la droite. */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
  /* La borne basse du clamp restait calibree pour une tablette : a 320 px
     le titre depassait, et une interligne de 1.06 faisait se toucher les
     jambages d'une ligne a l'autre. */
  .hero-title,
  h1 {
    font-size: clamp(1.55rem, 7.5vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: -0.4px;
  }

  .section-heading {
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    line-height: 1.22;
  }

  .lead,
  .hero-description { font-size: 0.95rem; }

  /* Boutons empiles et pleine largeur. Cote a cote sur 320 px, deux
     libelles un peu longs se chevauchaient — c'est exactement le defaut
     signale. */
  .cta-row,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .cta-row > .btn,
  .cta-row > .btn-primary,
  .cta-row > .btn-secondary,
  .cta-row > .btn-ghost,
  .hero-actions > .btn,
  .hero-actions > .btn-primary,
  .hero-actions > .btn-secondary,
  .hero-actions > .btn-ghost {
    width: 100%;
  }

  /* Une etiquette longue ne doit pas depasser la colonne. */
  .badge,
  .hero-badge { max-width: 100%; }

  /* Une seule colonne : `auto-fit` avec un minimum de 280 px produisait
     encore deux colonnes de 150 px sur certains telephones. */
  .grid,
  .features,
  .blog-grid,
  .info-section,
  .stats-grid,
  .hero-points {
    grid-template-columns: 1fr;
  }

  .spec-chip { min-height: 0; }
  .card-body { padding: 0.9rem 1rem; }
}

/* ── Champs de formulaire (défaut premium ; surchargé par page) ── */
input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"]),
select,
textarea {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-ring);
  box-shadow: 0 0 0 3px rgba(17, 96, 224, 0.22);
  background: var(--surface-2);
}
::placeholder { color: var(--text-faint); }

/* Filet de securite pour les navigateurs qui ne tirent pas la liste
   deroulante de `color-scheme` : on peint les options nous-memes. La regle
   ne peut pas etre portee par la page — le popup natif n'herite que de
   `select` et `option`, jamais d'une classe posee sur un conteneur. */
select option,
select optgroup {
  background-color: var(--surface-solid);
  color: var(--text);
}

/* Le remplissage automatique de Chrome impose un fond blanc via une regle
   interne qu'aucune couleur ne bat. L'ombre interne, elle, passe : on
   repeint le champ avec, et on force la couleur du texte. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-solid) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

/* ── Liens accent ──────────────────────────────────────────────── */
.blog-link,
.link-accent {
  color: var(--accent-3);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.blog-link:hover,
.link-accent:hover {
  color: #fff;
  border-bottom-color: var(--accent-1);
}

/* ── Badges / pills ────────────────────────────────────────────── */
/* Badge sobre : fond neutre, filet net, un point bleu en tete. La pilule
   degradee violet-vers-cyan pleine largeur faisait "gabarit". */
.badge,
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0.3px;
}
/* Le carre en tete est reserve au badge du hero : `.badge` sert aussi de
   simple etiquette dans les articles, ou une pastille serait parasite. */
.hero-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent-1);
  flex: none;
}

/* Utilitaires réutilisables par les pages refondues */
.fd-surface {
  background:
    var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--shadow-inset);
}
.fd-divider { height: 1px; background: var(--hairline); border: 0; margin: 1rem 0; }
.fd-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
  font-size: 0.8rem; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-secondary);
}