/* ═══════════════════════════════════════════════════════════════════════════════
   Retro Hub — site de présentation
   Jetons repris de retro_hub/hub2/theme.py (zinc + accent menthe). Deux thèmes :
   clair par défaut, sombre selon le système (prefers-color-scheme) ou forcé par le
   bouton (data-theme="light" | "dark" sur <html>, retenu dans localStorage).
   Polices du hub copiées dans site/polices (OFL / ISC).
   ═══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Inter"; src: url("polices/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("polices/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lucide"; src: url("polices/lucide.ttf") format("truetype"); font-display: block; }

/* ── Jetons : thème CLAIR (défaut) ────────────────────────────────────────────── */
/* Mise en page : colonne centrée de 1180 px, bandes pleine largeur, cartes à filet fin. */
:root {
  color-scheme: light;

  --app: #FFFFFF;            /* fond de page */
  --fond-alt: #F8FAF9;       /* bandes alternées (léger biais menthe) */
  --fond: #F4F4F5;           /* puits : bloc de code, piste */
  --panneau: #FFFFFF;        /* cartes */
  --panneau-2: #F4F4F5;      /* surface relevée dans une carte */
  --survol: #F4F4F5;
  --bordure: #E4E4E7;
  --bordure-forte: #D4D4D8;

  --texte-vif: #09090B;
  --texte: #27272A;
  --texte-attenue: #52525B;
  --texte-faible: #71717A;

  --accent: #B0F0CB;          /* aplat : bouton principal, logo */
  --accent-survol: #9FE8BE;
  --accent-bord: #86DBA9;     /* contour d'un aplat d'accent (lisible sur blanc) */
  --sur-accent: #07130C;      /* texte posé sur l'aplat */
  --accent-texte: #15803D;    /* accent utilisé comme TEXTE / trait sur le fond */
  --accent-lueur: rgba(22, 163, 74, .08);
  --accent-ligne: rgba(22, 163, 74, .28);
  --halo: rgba(22, 163, 74, .10);

  --bleu: #0284C7;
  --vert: #16A34A;
  --orange: #D97706;
  --rouge: #DC2626;
  --violet: #7C3AED;

  --r-combat: #DB2777;
  --r-grimoire: #4F46E5;
  --r-recolte: #16A34A;
  --r-circuits: #0D9488;
  --r-donjon: #7C3AED;
  --r-atlas: #0284C7;
  --r-forge: #D97706;
  --r-stats: #0891B2;

  --degrade-1: #15803D;
  --degrade-2: #0D9488;
  --degrade-3: #0284C7;

  --entete-fond: rgba(255, 255, 255, .78);
  --entete-fond-defile: rgba(255, 255, 255, .92);
  --menu-fond: rgba(255, 255, 255, .98);
  --grille: rgba(9, 9, 11, .05);
  --ombre-apercu: 0 1px 2px rgba(9, 9, 11, .04), 0 24px 60px -24px rgba(9, 9, 11, .18);
  --ombre-bouton: 0 8px 24px -10px rgba(22, 163, 74, .45);
  --selection: rgba(22, 163, 74, .18);

  /* icône du bouton de thème : la lune en clair, le soleil en sombre */
  --ic-lune: inline-block;
  --ic-soleil: none;

  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --rayon: 10px;
  --rayon-carte: 16px;
  --rayon-grand: 22px;

  --largeur: 1180px;
  --gouttiere: 24px;
  --hauteur-entete: 64px;
}

/* ── Jetons : thème SOMBRE (système, sauf choix explicite du clair) ───────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app: #09090B; --fond-alt: #0C0C0E; --fond: #0E0E10; --panneau: #121214; --panneau-2: #18181B;
    --survol: #1F1F23; --bordure: #232327; --bordure-forte: #303036;
    --texte-vif: #FAFAFA; --texte: #E4E4E7; --texte-attenue: #A1A1AA; --texte-faible: #71717A;
    --accent: #B0F0CB; --accent-survol: #C9F6DC; --accent-bord: #B0F0CB; --sur-accent: #07130C;
    --accent-texte: #B0F0CB; --accent-lueur: rgba(176, 240, 203, .08); --accent-ligne: rgba(176, 240, 203, .25);
    --halo: rgba(176, 240, 203, .14);
    --bleu: #38BDF8; --vert: #4ADE80; --orange: #F59E0B; --rouge: #EF4444; --violet: #A78BFA;
    --r-combat: #F472B6; --r-grimoire: #818CF8; --r-recolte: #4ADE80; --r-circuits: #2DD4BF;
    --r-donjon: #A78BFA; --r-atlas: #38BDF8; --r-forge: #F59E0B; --r-stats: #22D3EE;
    --degrade-1: #B0F0CB; --degrade-2: #7FE3D3; --degrade-3: #38BDF8;
    --entete-fond: rgba(9, 9, 11, .72); --entete-fond-defile: rgba(9, 9, 11, .88); --menu-fond: rgba(9, 9, 11, .97);
    --grille: rgba(255, 255, 255, .035);
    --ombre-apercu: 0 0 0 6px rgba(255, 255, 255, .02), 0 40px 120px -30px rgba(176, 240, 203, .16), 0 30px 80px -20px rgba(0, 0, 0, .8);
    --ombre-bouton: 0 8px 30px -8px rgba(176, 240, 203, .5);
    --selection: rgba(176, 240, 203, .3);
    --ic-lune: none; --ic-soleil: inline-block;
  }
}
/* ── Jetons : thème SOMBRE forcé par le bouton (mêmes valeurs) ────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --app: #09090B; --fond-alt: #0C0C0E; --fond: #0E0E10; --panneau: #121214; --panneau-2: #18181B;
  --survol: #1F1F23; --bordure: #232327; --bordure-forte: #303036;
  --texte-vif: #FAFAFA; --texte: #E4E4E7; --texte-attenue: #A1A1AA; --texte-faible: #71717A;
  --accent: #B0F0CB; --accent-survol: #C9F6DC; --accent-bord: #B0F0CB; --sur-accent: #07130C;
  --accent-texte: #B0F0CB; --accent-lueur: rgba(176, 240, 203, .08); --accent-ligne: rgba(176, 240, 203, .25);
  --halo: rgba(176, 240, 203, .14);
  --bleu: #38BDF8; --vert: #4ADE80; --orange: #F59E0B; --rouge: #EF4444; --violet: #A78BFA;
  --r-combat: #F472B6; --r-grimoire: #818CF8; --r-recolte: #4ADE80; --r-circuits: #2DD4BF;
  --r-donjon: #A78BFA; --r-atlas: #38BDF8; --r-forge: #F59E0B; --r-stats: #22D3EE;
  --degrade-1: #B0F0CB; --degrade-2: #7FE3D3; --degrade-3: #38BDF8;
  --entete-fond: rgba(9, 9, 11, .72); --entete-fond-defile: rgba(9, 9, 11, .88); --menu-fond: rgba(9, 9, 11, .97);
  --grille: rgba(255, 255, 255, .035);
  --ombre-apercu: 0 0 0 6px rgba(255, 255, 255, .02), 0 40px 120px -30px rgba(176, 240, 203, .16), 0 30px 80px -20px rgba(0, 0, 0, .8);
  --ombre-bouton: 0 8px 30px -8px rgba(176, 240, 203, .5);
  --selection: rgba(176, 240, 203, .3);
  --ic-lune: none; --ic-soleil: inline-block;
}

/* ── Base ─────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--app);
  color: var(--texte);
  font: 400 16px/1.6 var(--police);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* bande sous la barre d'état d'un téléphone, peinte comme l'en-tête */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--app); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--texte-vif); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--selection); color: var(--texte-vif); }
:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; border-radius: 6px; }

.ic { font-family: "Lucide"; font-style: normal; font-weight: normal; line-height: 1; display: inline-block; speak: never; }
.mono { font-family: var(--police-mono); font-size: .92em; }
.chiffre { font-variant-numeric: tabular-nums; }
.vert { color: var(--vert); } .rouge { color: var(--rouge); } .orange { color: var(--orange); }
.violet { color: var(--violet); } .bleu { color: var(--bleu); } .accent { color: var(--accent-texte); }

.conteneur {
  width: 100%; max-width: var(--largeur); margin: 0 auto;
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}
.conteneur--etroit { max-width: 820px; }

/* ── Boutons ──────────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--police); white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.bouton .ic { font-size: 16px; }
.bouton--petit { height: 36px; padding: 0 16px; font-size: 14px; }
.bouton--grand { height: 50px; padding: 0 26px; font-size: 16px; }
.bouton--grand .ic { font-size: 18px; }
.bouton--primaire { background: var(--accent); color: var(--sur-accent); border-color: var(--accent-bord); }
.bouton--primaire:hover { background: var(--accent-survol); box-shadow: var(--ombre-bouton); transform: translateY(-1px); }
.bouton--secondaire { background: var(--panneau); color: var(--texte-vif); border-color: var(--bordure-forte); }
.bouton--secondaire:hover { background: var(--survol); }

.bouton-icone {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--panneau); border: 1px solid var(--bordure); color: var(--texte-vif);
  font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s;
}
.bouton-icone:hover { background: var(--survol); border-color: var(--bordure-forte); }
.theme .ic--lune { display: var(--ic-lune); }
.theme .ic--soleil { display: var(--ic-soleil); }

/* ── Puces / points ───────────────────────────────────────────────────────────── */
.puce {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--texte-attenue);
  background: var(--panneau); border: 1px solid var(--bordure);
}
.puce--petite { padding: 4px 10px; font-size: 12px; }
.puce--accent { color: var(--accent-texte); background: var(--accent-lueur); border-color: var(--accent-ligne); }
.puce--bleu { color: var(--bleu); background: color-mix(in srgb, var(--bleu) 8%, transparent); border-color: color-mix(in srgb, var(--bleu) 28%, transparent); }
.point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.point--vif { animation: pulsation 2s infinite; }
@keyframes pulsation {
  0% { box-shadow: 0 0 0 0 var(--accent-ligne); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── En-tête ──────────────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--entete-fond);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.entete.defile { border-bottom-color: var(--bordure); background: var(--entete-fond-defile); }
.entete__barre { height: var(--hauteur-entete); display: flex; align-items: center; gap: 32px; }

.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--texte-vif); }
.marque__logo {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent); font-size: 17px; box-shadow: inset 0 0 0 1px var(--accent-bord);
}
.marque__nom { font-size: 16px; letter-spacing: -0.01em; }

.nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.nav a { padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--texte-attenue); transition: color .2s, background .2s; }
.nav a:hover { color: var(--texte-vif); background: var(--survol); }
.nav .nav__cta-mobile { display: none; }

.entete__actions { display: flex; align-items: center; gap: 8px; }
.burger { display: none; }
.burger .ic--fermer { display: none; }
.burger[aria-expanded="true"] .ic--ouvrir { display: none; }
.burger[aria-expanded="true"] .ic--fermer { display: inline-block; }

/* ── Héros ────────────────────────────────────────────────────────────────────── */
.heros { position: relative; padding-block: 96px 24px; overflow: hidden; }
.heros__halo {
  position: absolute; inset: -200px 0 auto; height: 720px; pointer-events: none;
  background:
    radial-gradient(600px 300px at 50% 30%, var(--halo), transparent 70%),
    radial-gradient(400px 260px at 20% 10%, color-mix(in srgb, var(--r-grimoire) 7%, transparent), transparent 70%),
    radial-gradient(400px 260px at 80% 15%, color-mix(in srgb, var(--bleu) 6%, transparent), transparent 70%);
}
.heros::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grille) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grille) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 30%, transparent 75%);
}
.heros__contenu { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.heros__titre {
  margin-top: 24px;
  font-size: clamp(40px, 7vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -0.045em;
}
.degrade {
  background: linear-gradient(90deg, var(--degrade-1) 0%, var(--degrade-2) 50%, var(--degrade-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heros__texte { margin-top: 24px; max-width: 620px; font-size: clamp(16px, 2vw, 19px); color: var(--texte-attenue); }
.heros__boutons { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.heros__note { margin-top: 14px; font-size: 13.5px; color: var(--texte-faible); }
.heros__garanties { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; font-size: 14px; color: var(--texte-faible); }
.heros__garanties li { display: inline-flex; align-items: center; gap: 6px; }
.heros__garanties .ic { color: var(--accent-texte); font-size: 15px; }

/* entrée douce du héros, depuis un état déjà visible */
@keyframes monter { from { transform: translateY(10px); } to { transform: none; } }
.heros__contenu > *, .apercu { animation: monter .7s ease both; }
.heros__contenu > :nth-child(2) { animation-delay: .05s; }
.heros__contenu > :nth-child(3) { animation-delay: .1s; }
.heros__contenu > :nth-child(4) { animation-delay: .15s; }
.apercu { animation-delay: .2s; }

/* ── Aperçu (sobre) : une fenêtre, 4 chiffres, une courbe ─────────────────────── */
.apercu {
  position: relative; margin: 64px auto 0; max-width: 980px;
  background: var(--panneau); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-apercu); overflow: hidden;
}
.apercu--video { aspect-ratio: 16 / 10; max-width: 100%; }
.apercu__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #09090B; }
/* boutons son + pause, posés sur la vidéo (toujours sombres : la vidéo l'est dans les deux thèmes) */
.apercu__commandes { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.apercu__bouton {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 17px;
  color: #FAFAFA; background: rgba(9, 9, 11, .72); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s;
}
.apercu__bouton:hover { background: rgba(9, 9, 11, .9); }
.apercu__bouton .ic--lecture, .apercu__bouton .ic--son { display: none; }
.apercu__bouton.en-pause .ic--pause, .apercu__bouton.son-actif .ic--muet { display: none; }
.apercu__bouton.en-pause .ic--lecture, .apercu__bouton.son-actif .ic--son { display: inline-block; }
.apercu__legende {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-size: 13.5px; color: var(--texte-attenue);
}
.apercu__legende .ic { font-size: 15px; color: var(--accent-texte); }
@media (max-width: 640px) {
  .apercu--video { aspect-ratio: 3 / 4; }           /* version mobile de la vidéo (720×960) */
}

/* ── Sections ─────────────────────────────────────────────────────────────────── */
.section { padding-block: 112px; }
.section--alt { background: var(--fond-alt); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: 14px; }
.titre-section { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; }
.sous-titre { margin-top: 16px; font-size: 17px; color: var(--texte-attenue); max-width: 560px; }
.entete-section { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 56px; }

/* Présentation */
.presentation { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.presentation > * { min-width: 0; }
.presentation__texte { display: flex; flex-direction: column; gap: 18px; font-size: 17px; color: var(--texte-attenue); max-width: 62ch; }
.presentation__texte strong { color: var(--texte-vif); font-weight: 600; }
.chiffres { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chiffres div { padding: 18px; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); }
.chiffres dt { font-size: 34px; font-weight: 700; color: var(--texte-vif); letter-spacing: -0.03em; line-height: 1.1; }
.chiffres dd { margin: 4px 0 0; font-size: 14px; color: var(--texte-faible); line-height: 1.4; }

/* Fonctionnalités (grille « bento ») */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fonction {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 28px; border-radius: var(--rayon-grand);
  background: var(--panneau); border: 1px solid var(--bordure);
  overflow: hidden; transition: border-color .25s, transform .25s;
}
.fonction::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px 200px at 0% 0%, color-mix(in srgb, var(--r) 10%, transparent), transparent 70%);
}
.fonction:hover { border-color: color-mix(in srgb, var(--r) 35%, var(--bordure)); transform: translateY(-2px); }
.fonction:hover::before { opacity: 1; }
.fonction--large { grid-column: span 2; }
.fonction--pleine { grid-column: 1 / -1; }
.fonction__icone {
  position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 21px; color: var(--r);
  background: color-mix(in srgb, var(--r) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--r) 26%, transparent);
}
.fonction h3 { position: relative; font-size: 19px; font-weight: 600; margin-top: 6px; }
.fonction p { position: relative; color: var(--texte-attenue); font-size: 15px; }
.etiquettes { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.etiquettes li { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; color: var(--texte-attenue); background: var(--panneau-2); border: 1px solid var(--bordure); }

/* Fonctionnement */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.etape { padding: 28px; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); }
.etape__num { display: inline-block; font: 500 13px/1 var(--police-mono); color: var(--accent-texte); padding: 6px 10px; border-radius: 8px; background: var(--accent-lueur); border: 1px solid var(--accent-ligne); }
.etape h3 { margin-top: 20px; font-size: 19px; font-weight: 600; }
.etape p { margin-top: 10px; font-size: 15px; color: var(--texte-attenue); }

.pipeline {
  margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  font: 500 13.5px/1 var(--police-mono); color: var(--texte-attenue);
}
.pipeline span { padding: 10px 14px; border-radius: 10px; background: var(--panneau); border: 1px solid var(--bordure); }
.pipeline .ic { color: var(--texte-faible); font-size: 14px; }
.pipeline .pipeline__fin { color: var(--accent-texte); border-color: var(--accent-ligne); background: var(--accent-lueur); }

/* Sécurité : deux blocs (Contrôle, Confidentialité) + bande « ne fait jamais » */
.securite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.securite > * { min-width: 0; }
.bloc-securite { display: flex; flex-direction: column; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); overflow: hidden; }
.bloc-securite__tete { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--bordure); background: var(--fond-alt); }
.bloc-securite__tete h3 { font-size: 18px; font-weight: 600; }
.bloc-securite__tete p { font-size: 13.5px; color: var(--texte-faible); }
.bloc-securite__icone { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: var(--accent-texte); background: var(--accent-lueur); border: 1px solid var(--accent-ligne); }
.points-securite { display: flex; flex-direction: column; }
.points-securite li { display: flex; gap: 16px; padding: 20px 24px; }
.points-securite li + li { border-top: 1px solid var(--bordure); }
.points-securite__icone { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: color-mix(in srgb, currentColor 10%, transparent); }
.points-securite li > div { min-width: 0; }
.points-securite h4 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 600; color: var(--texte-vif); }
.points-securite p { margin-top: 4px; font-size: 15px; color: var(--texte-attenue); }

kbd {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  font: 500 12px/1.4 var(--police-mono); color: var(--texte-vif);
  background: var(--panneau-2); border: 1px solid var(--bordure-forte); box-shadow: inset 0 -1px 0 var(--bordure-forte);
}

.jamais {
  margin-top: 16px; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: var(--rayon-carte);
  background: var(--fond-alt); border: 1px dashed var(--bordure-forte);
}
.jamais h3 { font-size: 15px; font-weight: 600; white-space: nowrap; }
.jamais ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.jamais li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--texte-attenue); }
.jamais .ic { color: var(--rouge); font-size: 16px; }

/* Serveurs : tableau comparatif (cartes empilées sur mobile) */
.tableau { border: 1px solid var(--bordure); border-radius: var(--rayon-grand); background: var(--panneau); overflow: hidden; }
.serveurs { width: 100%; border-collapse: collapse; font-size: 15px; }
.serveurs th, .serveurs td { padding: 18px 22px; text-align: left; vertical-align: middle; }
.serveurs thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-faible); background: var(--fond-alt); border-bottom: 1px solid var(--bordure); }
.serveurs tbody tr + tr > * { border-top: 1px solid var(--bordure); }
.serveurs tbody th { font-weight: 600; color: var(--texte-vif); }
.serveurs td { color: var(--texte-attenue); }
.serveur-nom { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; }
.serveur-nom__icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: var(--texte-attenue); background: var(--panneau-2); border: 1px solid var(--bordure); }
.etat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.etat .ic { font-size: 14px; }
.etat--oui { color: var(--vert); background: color-mix(in srgb, var(--vert) 10%, transparent); border: 1px solid color-mix(in srgb, var(--vert) 26%, transparent); }
.etat--non { color: var(--texte-attenue); background: var(--panneau-2); border: 1px solid var(--bordure); }
.note-tableau { margin-top: 12px; font-size: 13px; color: var(--texte-faible); text-align: right; }

.ajout-serveur {
  margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start;
  padding: 28px; border-radius: var(--rayon-grand); background: var(--panneau); border: 1px solid var(--bordure);
}
.ajout-serveur__intro h3 { font-size: 19px; font-weight: 600; }
.ajout-serveur__intro p { margin-top: 8px; font-size: 15px; color: var(--texte-attenue); }
.mini-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mini-etapes li { display: flex; gap: 12px; }
.mini-etapes__num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--police-mono); color: var(--accent-texte); background: var(--accent-lueur); border: 1px solid var(--accent-ligne); }
.mini-etapes h4 { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--texte-vif); }
.mini-etapes p { margin-top: 4px; font-size: 14px; color: var(--texte-attenue); }

/* ── Page « Démarrer » ─────────────────────────────────────────────────────────── */
.conteneur--guide { max-width: 860px; }
.section--serree { padding-block: 40px; }
.page-tete { position: relative; overflow: hidden; padding-block: 56px 24px; }
.page-tete__contenu { position: relative; }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 14px; font-weight: 500; color: var(--texte-attenue); }
.retour:hover { color: var(--texte-vif); }
.page-tete__titre { font-size: clamp(34px, 5.5vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; }
.page-tete__texte { margin-top: 18px; max-width: 62ch; font-size: 17px; color: var(--texte-attenue); }

.telechargement {
  margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: var(--rayon-grand); background: var(--panneau); border: 1px solid var(--bordure-forte);
}
.telechargement__icone { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: var(--accent-texte); background: var(--accent-lueur); border: 1px solid var(--accent-ligne); }
.telechargement__texte { flex: 1 1 300px; min-width: 0; }
.telechargement h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.telechargement p { margin-top: 4px; font-size: 14.5px; color: var(--texte-attenue); }
.telechargement > .bouton { flex: none; }
.telechargement .bientot-message { flex-basis: 100%; max-width: none; margin-top: 0; }

.titre-guide { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 20px; }
.intro-guide { margin: -8px 0 24px; font-size: 15.5px; color: var(--texte-attenue); max-width: 68ch; }
code { font-family: var(--police-mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; color: var(--texte-vif); background: var(--panneau-2); border: 1px solid var(--bordure); overflow-wrap: anywhere; }
.lien { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.prerequis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prerequis li { display: flex; gap: 14px; padding: 20px; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); }
.prerequis li > div { min-width: 0; }
.prerequis__icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: var(--texte-attenue); background: var(--panneau-2); border: 1px solid var(--bordure); }
.prerequis h3 { font-size: 15.5px; font-weight: 600; }
.prerequis p { margin-top: 4px; font-size: 14px; color: var(--texte-attenue); }

.guide { display: flex; flex-direction: column; }
.guide__etape { position: relative; display: flex; gap: 20px; padding-bottom: 32px; }
.guide__etape:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--bordure); }
.guide__num { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--police-mono); color: var(--sur-accent); background: var(--accent); border: 1px solid var(--accent-bord); }
.guide__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 3px; }
.guide__corps h3 { font-size: 18px; font-weight: 600; }
.guide__corps p { font-size: 15.5px; color: var(--texte-attenue); }
.guide__corps strong, .encadre strong { color: var(--texte-vif); font-weight: 600; }

.code { border-radius: 12px; background: var(--fond); border: 1px solid var(--bordure); overflow: hidden; }
.code__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 7px 7px 14px; background: var(--panneau-2); border-bottom: 1px solid var(--bordure); }
.code__lieu { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--texte-faible); }
.code__lieu .ic { font-size: 13px; }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.code pre code { padding: 0; border: 0; background: none; font-size: 13.5px; line-height: 1.7; color: var(--texte); overflow-wrap: normal; white-space: pre; }
/* bouton Copier : bien visible ; vert (accent) sur les commandes importantes */
.code__copier {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer;
  font: 600 13.5px/1 var(--police); color: var(--texte-vif); background: var(--panneau); border: 1px solid var(--bordure-forte);
  transition: background .2s, border-color .2s, color .2s;
}
.code__copier .ic { font-size: 15px; }
.code__copier:hover { background: var(--survol); }
.code--important { border-color: var(--accent-ligne); }
.code--important .code__copier { color: var(--sur-accent); background: var(--accent); border-color: var(--accent-bord); }
.code--important .code__copier:hover { background: var(--accent-survol); }
.code__copier.copie { color: var(--vert); border-color: color-mix(in srgb, var(--vert) 40%, transparent); }
.code--important .code__copier.copie { color: var(--sur-accent); }
.guide__corps .astuce { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--fond-alt); border: 1px solid var(--bordure); }
.astuce > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.guide__corps .astuce p { font-size: 14.5px; }
.astuce .ic { color: var(--bleu); font-size: 16px; margin-top: 3px; flex: none; }

.encadre { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--rayon-grand); background: var(--accent-lueur); border: 1px solid var(--accent-ligne); }
.encadre__tete { display: flex; align-items: center; gap: 12px; }
.encadre__tete h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.encadre__icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--accent-texte); background: var(--panneau); border: 1px solid var(--accent-ligne); }
.encadre p { font-size: 15.5px; color: var(--texte-attenue); }

/* État du projet : trois colonnes Fait / En test / À venir */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.colonne-roadmap { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-grand); overflow: hidden; }
.colonne-roadmap__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--fond-alt); border-bottom: 1px solid var(--bordure); }
.colonne-roadmap__aide { font-size: 13px; color: var(--texte-faible); text-align: right; }
.colonne-roadmap ul { display: flex; flex-direction: column; }
.colonne-roadmap li { padding: 16px 20px; }
.colonne-roadmap li + li { border-top: 1px solid var(--bordure); }
.colonne-roadmap h3 { font-size: 15.5px; font-weight: 600; }
.colonne-roadmap p { margin-top: 3px; font-size: 14px; color: var(--texte-attenue); }
.etat--test { color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent); }
.etat--avenir { color: var(--bleu); background: color-mix(in srgb, var(--bleu) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bleu) 28%, transparent); }

/* Page Démarrer : lexique, sous-étapes, résultat attendu, « les fois suivantes » */
.lexique { margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lexique div { padding: 16px 18px; border-radius: var(--rayon-carte); background: var(--fond-alt); border: 1px solid var(--bordure); }
.lexique dt { font-size: 14.5px; font-weight: 600; color: var(--texte-vif); }
.lexique dd { margin: 4px 0 0; font-size: 14px; color: var(--texte-attenue); }

.sous-etapes { display: flex; flex-direction: column; gap: 8px; counter-reset: sous; }
.sous-etapes li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--texte-attenue); counter-increment: sous; }
.sous-etapes li::before {
  content: counter(sous, lower-alpha); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font: 600 11.5px/1 var(--police-mono); color: var(--texte-attenue); background: var(--panneau-2); border: 1px solid var(--bordure);
}
.sous-etapes strong { color: var(--texte-vif); font-weight: 600; }

/* texte courant (avec du code en ligne) + icône posée à gauche : pas de flex, qui couperait le texte en morceaux */
.guide__corps .resultat { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--texte-attenue); }
.resultat .ic { position: absolute; left: 0; top: 4px; font-size: 16px; color: var(--vert); }

.prochaine-fois { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: var(--rayon-carte); background: var(--panneau); border: 1px solid var(--bordure-forte); }
.prochaine-fois__icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: var(--accent-texte); background: var(--accent-lueur); border: 1px solid var(--accent-ligne); }
.prochaine-fois h3 { font-size: 16px; font-weight: 600; }
.prochaine-fois p { margin-top: 4px; font-size: 15px; color: var(--texte-attenue); }

/* FAQ en deux groupes */
.faq-groupes { display: flex; flex-direction: column; gap: 36px; }
.faq-groupe__titre { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-faible); }
.faq-suite { margin-top: 32px; text-align: center; font-size: 15.5px; color: var(--texte-attenue); }

/* étiquette « En test » d'une carte de fonctionnalité */
.fonction__statut { position: absolute; top: 24px; right: 24px; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); transition: border-color .2s; }
.faq details[open] { border-color: var(--bordure-forte); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative;
  font-weight: 600; font-size: 16px; color: var(--texte-vif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 400; font-size: 18px; color: var(--texte-attenue); background: var(--panneau-2); border: 1px solid var(--bordure);
}
.faq details[open] summary::after { content: "−"; color: var(--accent-texte); }
.faq details p { padding: 0 22px 22px; color: var(--texte-attenue); font-size: 15.5px; max-width: 70ch; }

/* Appel final */
.appel {
  position: relative; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 80px 32px; border-radius: 28px;
  background: var(--fond-alt); border: 1px solid var(--bordure-forte);
}
.appel__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px 260px at 50% 0%, var(--halo), transparent 70%); }
.appel h2 { position: relative; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.035em; }
.appel p { position: relative; color: var(--texte-attenue); font-size: 17px; max-width: 520px; }
.appel__boutons { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.appel--compact { padding: 48px 28px; }
.appel--compact h2 { font-size: clamp(24px, 3.4vw, 32px); }

/* Contact : un bloc teinté bien visible, puis trois usages */
.contact-bloc {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px;
  padding: 56px 48px 48px; border-radius: 28px;
  background: var(--accent-lueur); border: 1px solid var(--accent-ligne);
}
.contact-bloc__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 240px at 50% 0%, var(--halo), transparent 70%); }
.contact-bloc__tete { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact-bloc__icone {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
  font-size: 26px; color: var(--sur-accent); background: var(--accent); border: 1px solid var(--accent-bord);
}
.contact-bloc__tete .titre-section { max-width: 640px; }
.contact-bloc__tete .sous-titre { max-width: 580px; }
.contact-bloc__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contact-bloc__usages { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contact-bloc__usages li { display: flex; gap: 14px; padding: 18px; background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); }
.contact-bloc__usages li > div { min-width: 0; }
.contact-bloc__usage-icone { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.contact-bloc__usages h3 { font-size: 15.5px; font-weight: 600; }
.contact-bloc__usages p { margin-top: 3px; font-size: 14px; color: var(--texte-attenue); }

/* étiquette dans un bouton (« bientôt ») et message qui s'affiche au clic */
.bouton__etiquette { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: var(--accent-texte); background: var(--panneau); }
.bientot-message {
  position: relative; display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  padding: 12px 14px; border-radius: 12px; text-align: left; max-width: 560px;
  font-size: 14.5px; color: var(--texte); background: var(--panneau); border: 1px solid var(--bordure-forte);
}
.bientot-message[hidden] { display: none; }
.bientot-message .ic { flex: none; margin-top: 3px; color: var(--bleu); }

/* Pied de page : marque + trois colonnes de liens, puis mention légale */
.pied { border-top: 1px solid var(--bordure); background: var(--fond-alt); padding-block: 56px 28px; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied__marque { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pied__texte { max-width: 340px; font-size: 14px; color: var(--texte-attenue); }
.pied__colonne { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.pied__colonne h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 4px; }
.pied__colonne a { color: var(--texte-attenue); transition: color .2s; }
.pied__colonne a:hover { color: var(--texte-vif); }
.pied__bientot { display: inline-flex; align-items: center; gap: 8px; color: var(--texte-attenue); }
.pied__bientot em { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; color: var(--texte-faible); background: var(--panneau-2); border: 1px solid var(--bordure); }
.pied__bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bordure); display: flex; flex-direction: column; gap: 14px; }
.pied__mention { font-size: 13px; line-height: 1.6; color: var(--texte-faible); max-width: 90ch; }
.pied__ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--texte-faible); }
.pied__haut { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-attenue); }
.pied__haut:hover { color: var(--texte-vif); }

/* pendant un changement de thème : bascule nette, sans couleurs à mi-chemin */
.sans-transition *, .sans-transition *::before, .sans-transition *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .fonction--large { grid-column: auto; }   /* 8 cartes simples + Multi-compte en pleine largeur */
  .presentation { grid-template-columns: 1fr; gap: 40px; }
  .ajout-serveur { grid-template-columns: 1fr; gap: 20px; }
  .roadmap { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
  .contact-bloc__usages { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; width: 100%; }
}

/* menu en burger dès que les 7 liens ne tiennent plus sur une ligne */
@media (max-width: 1080px) {
  .burger { display: grid; }
  .entete__actions .bouton { display: none; }
  .entete__barre { justify-content: space-between; }
  .nav {
    position: fixed; inset: calc(var(--hauteur-entete) + env(safe-area-inset-top, 0px)) 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding-block: 12px 20px;
    padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
    background: var(--menu-fond); border-bottom: 1px solid var(--bordure);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav.ouvert { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 12px; font-size: 16px; }
  .nav .nav__cta-mobile { display: inline-flex; margin-top: 10px; padding: 0 20px; color: var(--sur-accent); }
  .nav .nav__cta-mobile:hover { background: var(--accent-survol); color: var(--sur-accent); }
}

@media (max-width: 860px) {

  .etapes { grid-template-columns: 1fr; }
  .securite { grid-template-columns: 1fr; }
  .prerequis { grid-template-columns: 1fr; }
  .mini-etapes { grid-template-columns: 1fr; gap: 16px; }
  .lexique { grid-template-columns: 1fr; }

  /* tableau des serveurs : une carte par serveur */
  .tableau { border: 0; background: none; border-radius: 0; overflow: visible; }
  .serveurs, .serveurs tbody, .serveurs tr, .serveurs th, .serveurs td { display: block; }
  .serveurs thead { display: none; }
  .serveurs tbody { display: grid; gap: 12px; }
  .serveurs tr { background: var(--panneau); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); overflow: hidden; }
  .serveurs tbody tr + tr > * { border-top: 0; }
  .serveurs tbody th { padding: 14px 16px; background: var(--fond-alt); border-bottom: 1px solid var(--bordure); }
  .serveurs td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14.5px; text-align: right; }
  .serveurs td + td { border-top: 1px solid var(--bordure); }
  .serveurs td::before { content: attr(data-label); text-align: left; font-size: 13.5px; font-weight: 500; color: var(--texte-faible); }
  .note-tableau { text-align: left; }
}

@media (max-width: 640px) {
  :root { --gouttiere: 16px; }
  .heros { padding-block: 64px 16px; }
  .section { padding-block: 80px; }
  .section--serree { padding-block: 28px; }
  .page-tete { padding-block: 36px 12px; }
  .entete-section { margin-bottom: 40px; }
  .bento { grid-template-columns: 1fr; }
  .fonction, .etape { padding: 22px; }
  .fonction__statut { top: 20px; right: 20px; }
  .chiffres { grid-template-columns: 1fr; }
  .chiffres div { display: flex; align-items: baseline; gap: 12px; }
  .apercu { margin-top: 48px; border-radius: 16px; }
  .heros__boutons, .appel__boutons, .contact-bloc__actions { flex-direction: column; width: 100%; }
  .heros__boutons .bouton, .appel__boutons .bouton, .contact-bloc__actions .bouton { width: 100%; }
  .contact-bloc { padding: 36px 18px 18px; gap: 28px; border-radius: 20px; }
  .telechargement > .bouton { width: 100%; }
  .appel { padding: 56px 20px; }
  .appel--compact { padding: 36px 20px; }
  .bloc-securite__tete, .points-securite li { padding: 16px 18px; }
  .points-securite li { gap: 14px; }
  .jamais { padding: 18px; }
  .ajout-serveur, .encadre { padding: 20px; }
  .guide__etape { gap: 14px; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .pied { padding-block: 44px 24px; }
}