:root{
  --bg:#0d1a24;
  --bg2:#0f2230;
  --panel:rgba(19,28,38,.86);
  --panel-border:rgba(255,255,255,.08);
  --txt:#e8eef3;
  --muted:#b7c3cf;
  --accent:#66b3ff;
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 600px at 50% -10%, #0f2b3b 0%, var(--bg) 60%) fixed;
  overflow-x:hidden;
  /* ❌ plus d’espace global ici – évite de décaler les autres pages */
}

/* ===== Bandeau haut (uniquement home) ===== */
.top-banner{
  position:fixed; top:0; left:0; width:100%;
  z-index:1000;
  background:linear-gradient(90deg,#66b3ff,#478dff);
  color:#0b1720;
  text-align:center;
  font-size:clamp(13px,1.6vw,15px);
  font-weight:600;
  padding:8px 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.top-banner strong{ color:#0b1720; }
.top-banner .highlight{ color:#fff; font-weight:700; }

/* ✅ On réserve la place du bandeau UNIQUEMENT sur la home */
body.home{ padding-top:46px; }

/* ===== Bouton Connexion fixe ===== */
.btn-login-fixed{
  position:fixed;
  right:14px;
  z-index:999;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  padding:8px 14px;
  border-radius:8px;
  font-size:14px;
  text-decoration:none;
  backdrop-filter:blur(6px);
  transition:all .25s ease;
  top:10px;                 /* par défaut (autres pages) */
}
.btn-login-fixed:hover{ background:rgba(255,255,255,0.25); color:#0b1720; }

/* ➕ position adaptée sous le bandeau sur la home */
body.home .btn-login-fixed{ top:52px; }

@media (max-width:480px){
  .btn-login-fixed{ font-size:12px; padding:8px 10px; right:10px; }
  body.home .btn-login-fixed{ top:50px; }
}

/* ===== Fond texturé ===== */
.hero-bg{
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(135deg,#0e1b27 0px,#0e1b27 12px,#112235 16px,#112235 18px);
  background-color:#0d1a24;
  z-index:0;
}

/* ===== Structure ===== */
.page{ position:relative; z-index:1; max-width:980px; margin:0 auto; padding:0 18px; }
.brand{ display:flex; justify-content:center; }

/* Logo — valeurs neutres pour toutes les pages */
.logo{
  display:block;
  width:clamp(260px,44vw,560px);
  margin:-10px auto;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));
  transform:none;
}

/* Boost d’affichage du logo UNIQUEMENT sur la home */
body.home .logo{
  margin: clamp(8px, 1vh, 12px) auto;
  transform: translateY(-40px);
}

/* Panneau standard */
.panel{
  width:min(92vw,560px);
  margin:18px auto;
  padding:clamp(18px,3.5vh,28px);
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

/* Si un panel “hero” doit remonter sous le logo, seulement sur home */
body.home .panel.hero{ margin: clamp(-60px,-12vh,-40px) auto clamp(10px,4vh,28px); }

/* Formulaires / boutons */
.panel form{ display:block; }
.panel label{ display:block; font-weight:600; margin:10px 0 6px; color:#dbe4ea; }
.panel input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:16px;
}
.panel input::placeholder{ color:#9fb0bd; }
.options{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:12px 0 16px; color:var(--muted); font-size:15px;
}
.forgot{ color:var(--accent); text-decoration:none; }
.forgot:hover{ text-decoration:underline; }

.btn{
  width:100%; padding:12px 14px; border:0; border-radius:12px;
  font-weight:700; cursor:pointer; text-align:center; text-decoration:none;
}
.btn.primary{ background:var(--accent); color:#0b1720; margin-bottom:12px; }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; color:#e6eef6; border:1px solid rgba(255,255,255,.18); }
.btn.ghost:hover{ background:rgba(255,255,255,.06); }

/* ===== Paragraphe de présentation sous le logo ===== */
.intro-gestio{
  margin:-130px auto 40px;          /* rapproche du logo (home) */
  max-width:780px;
  text-align:center;
  color:rgba(235,245,255,0.9);
  line-height:1.6;
  font-size:clamp(15px,2vw,18px);
  letter-spacing:.2px;
}
.intro-gestio strong{ color:#66b3ff; font-weight:700; }
.intro-gestio .accent{ display:block; margin-top:6px; font-weight:600; color:#9cd1ff; }

/* ===== Grille fonctionnalités (cartes) — robust & centered ===== */
.features-grid{
  display:grid;
  gap:16px;
  max-width:980px;
  margin:20px auto 0;
  padding:0 0;                 /* pas d'effet bord */
}

/* 1 colonne (mobile) */
.features-grid{ grid-template-columns: 1fr; }
.features-grid .feat{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
}

/* 2 colonnes (tablette) */
@media (min-width:520px) and (max-width:899.98px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); justify-items:stretch; }

  /* si nombre impair, la dernière carte occupe la ligne à elle seule et est centrée */
  .features-grid > .feat:last-child:nth-child(odd){
    grid-column: 1 / -1;       /* prend la ligne entière */
    justify-self:center;       /* se centre */
    max-width: 560px;          /* largeur visuelle réaliste */
    width:100%;
  }
}

/* 3 colonnes (desktop) */
@media (min-width:900px){
  .features-grid{ grid-template-columns: repeat(3, 1fr); }

  /* si nombre impair (5 cartes), placer la dernière dans la colonne du milieu */
  .features-grid > .feat:last-child:nth-child(odd){
    grid-column: 2;            /* colonne centrale */
  }
}

.feat-ico{ font-size:22px; line-height:1; margin-bottom:8px; opacity:.95; }
.features-grid h3{ font-size:clamp(15px,1.9vw,18px); margin:2px 0 6px; color:#eaf3ff; }
.features-grid p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.4; }

/* ===== Carousel phrases (si présent) ===== */
.carousel-phrases{
  position:relative; z-index:2; width:min(92vw,560px);
  margin:-100px auto 130px; text-align:center;
  background:rgba(0,0,0,.35); border-radius:14px; padding:10px 14px;
  color:#e9eef6; font-size:15.5px; box-shadow:0 0 8px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.12);
  opacity:0; transform:translateY(-6px);
  transition:opacity 1.1s ease-in-out, transform 1.1s ease-in-out;
}
.carousel-phrases.is-visible{ opacity:1; transform:translateY(0); }
.texte-phrase{ opacity:1; transform:none; transition:none; }

/* ===== Témoignage rotatif ===== */
.tmo{ width:min(92vw,560px); margin:32px auto 22px; position:relative; z-index:1; }
.tmo-bulle{
  padding:12px 14px; border-radius:14px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  opacity:0; transform:translateY(6px);
  transition:opacity 1.1s ease-in-out, transform 1.1s ease-in-out;
}
.tmo-bulle.tmo-visible{ opacity:1; transform:translateY(0); }
.tmo-quote{ margin:0 0 6px; font-size:15px; line-height:1.35; color:#e9eef6; }
.tmo-author{ margin:0; font-size:12.5px; opacity:.85; color:#cfd9e4; }

/* ===== Promo banner optionnelle ===== */
.promo-banner{
  width:min(980px,92vw);
  margin:10px auto 24px;
  padding:14px 18px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}
.promo-text{ color:#eaf2ff; font-size:clamp(14px,1.8vw,16px); margin:0 0 10px; line-height:1.45; }
.promo-text strong{ color:#66b3ff; }
.promo-text .highlight{ color:#fff; font-weight:700; }
.promo-cta{
  display:inline-block; padding:10px 18px; border-radius:10px; text-decoration:none;
  background:var(--accent); color:#0b1720; font-weight:700; transition:filter .25s ease;
}
.promo-cta:hover{ filter:brightness(1.05); }
@media (max-width:520px){
  .promo-text br{ display:none; }
  .promo-cta{ display:block; width:100%; margin-top:10px; }
}
/* ===== Alignement vertical parfait des cartes tarifs ===== */
.pricing-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;      /* toutes les cartes même hauteur */
  gap: 20px;
  flex-wrap: wrap;           /* reste responsive */
}

.price-card {
  display: flex;
  flex-direction: column;    /* empile le contenu verticalement */
  justify-content: space-between; /* espace équitable haut-bas */
  flex: 1 1 300px;           /* largeur adaptative */
  max-width: 420px;
}

.price-card .price {
  margin: 8px 0;
}

.price-card ul {
  flex-grow: 1;              /* le texte de la liste prend l’espace restant */
}

.price-card a.btn {
  margin-top: auto;          /* force le bouton en bas */
}
/* === FORCE le style du menu démo pour qu'il s'affiche comme le vrai menu Gestio === */
body.demo nav.dash-menu.demo-menu {
  position: absolute;
  right: 14px;
  top: 64px;
  z-index: 1000;
  min-width: 260px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  display: none;
}
body.demo nav.dash-menu.demo-menu.is-open {
  display: block;
}

/* Liens actifs / survolés */
body.demo nav.dash-menu.demo-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #eaf2ff !important;       /* <<< force la couleur blanche */
  text-decoration: none !important;/* <<< empêche le souligné bleu */
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
body.demo nav.dash-menu.demo-menu a:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
body.demo nav.dash-menu.demo-menu a.active {
  background: rgba(120,180,255,.14);
  border-color: rgba(120,180,255,.35);
}

/* Désactivés */
body.demo nav.dash-menu.demo-menu .disabled {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #b9c7d4 !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
  opacity: .65;
}

/* Séparateur et bouton déconnexion */
body.demo nav.dash-menu.demo-menu hr {
  border: 0;
  height: 1px;
  margin: 6px 8px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
body.demo nav.dash-menu.demo-menu .logout {
  margin-top: 6px;
}
/* ===== MENU — peaufinage pour coller au vrai ===== */

/* Conteneur */
.dash-sidebar .dash-nav,
.dash-sidebar .menu-demo{
  padding:10px;                /* respiration */
  border-radius:18px;
  background: rgba(19,28,38,.86);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  outline: 1px solid rgba(0,0,0,.12);
  outline-offset: -1px;
}

/* Items (liens + désactivés) – défaut sans “case” */
.dash-sidebar .dash-nav a,
.dash-sidebar .menu-demo a,
.dash-sidebar .dash-nav .disabled,
.dash-sidebar .menu-demo .disabled{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  margin:2px 0;               /* espacement vertical régulier */
  border:0;                    /* pas de cadre par défaut */
  border-radius:14px;
  font-weight:600; line-height:1.15;
  color:#eaf2ff !important;
  text-decoration:none !important;
  transition:background .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.dash-sidebar .dash-nav a:visited,
.dash-sidebar .menu-demo a:visited{ color:#eaf2ff !important; }

/* Hover (léger voile) */
.dash-sidebar .dash-nav a:hover,
.dash-sidebar .menu-demo a:hover{
  background:rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Actif (seule “pilule” visible) */
.dash-sidebar .dash-nav a.active,
.dash-sidebar .menu-demo a.active{
  background:rgba(120,180,255,.12);
  box-shadow: inset 0 0 0 1px rgba(120,180,255,.35);
}

/* Désactivés : texte grisé, pas de case */
/* ÉTAT DÉSACTIVÉ — clair et sans interaction */
.dash-sidebar .menu-demo .disabled,
.dash-sidebar .dash-nav  .disabled{
  display:flex;             /* même alignement que les liens */
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;

  color:#9fb0bd !important; /* texte gris froid */
  opacity:.45;              /* fort “mute” visible */
  font-weight:600;

  cursor:default;
  pointer-events:none;      /* pas cliquable */
  border:1px solid transparent;
  background:transparent;   /* surtout pas de “case” */
  box-shadow:none;
}

/* Pas d’effet au survol pour les désactivés */
.dash-sidebar .menu-demo .disabled:hover,
.dash-sidebar .dash-nav  .disabled:hover{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

/* Liens normaux : on garde le hover/active existants */
.dash-sidebar .menu-demo a,
.dash-sidebar .dash-nav  a{
  color:#eaf2ff;
  text-decoration:none;
}
.dash-sidebar .menu-demo a:hover,
.dash-sidebar .dash-nav  a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
.dash-sidebar .menu-demo a.active,
.dash-sidebar .dash-nav  a.active{
  background:rgba(120,180,255,.14);
  box-shadow:inset 0 0 0 1px rgba(120,180,255,.35);
}

/* Séparateurs identiques au vrai menu (si besoin) */
.dash-sidebar .menu-demo hr,
.dash-sidebar .dash-nav  hr{
  height:1px; border:0; margin:10px 8px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}

/* Déconnexion : garde ton emoji, survol légèrement rouge (optionnel) */
.dash-sidebar .menu-demo a.logout,
.dash-sidebar .dash-nav  a.logout{
  font-weight:800;
  display:flex; align-items:center; gap:10px;
}
.dash-sidebar .menu-demo a.logout:hover,
.dash-sidebar .dash-nav  a.logout:hover{
  background:rgba(255,90,90,.12);
  box-shadow:inset 0 0 0 1px rgba(255,120,120,.35);
}

/* Déconnexion : flèche + léger accent au survol */
.dash-sidebar .dash-nav a.logout,
.dash-sidebar .menu-demo a.logout,
#linkLogout{
  font-weight:800;
}
.dash-sidebar .dash-nav a.logout:hover,
.dash-sidebar .menu-demo a.logout:hover,
#linkLogout:hover{
  background:rgba(255,90,90,.12);
  box-shadow: inset 0 0 0 1px rgba(255,120,120,.35);
}
/* ===== Petits boutons démo (chips) ===== */
.demo-mini-bar{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:center;
  margin:12px auto 18px; padding:2px 0;
  max-width:960px;
}
.chip-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 12px; border-radius:9999px;
  font-weight:800; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#e6edf4;
  box-shadow:0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer; user-select:none; transition:transform .06s ease, opacity .2s ease;
  text-decoration:none;
}
.chip-btn:active{ transform:translateY(1px); }
.chip-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.chip-ghost{ background:rgba(255,255,255,.06); }
.chip-primary{ background:#6aa2ff; color:#0b1a2a; border-color:transparent; }
.chip-btn .ico{ font-size:15px; line-height:1; }

/* ===== Toast (petit message flottant) ===== */
.demo-toast{
  position:fixed; right:14px; bottom:14px; z-index:2000;
  background:rgba(20,30,50,.92); color:#e6edf4;
  border:1px solid rgba(255,255,255,.14); border-radius:12px;
  padding:10px 12px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
}
.demo-toast.show{ opacity:1; transform:translateY(0); }

/* ===== Bouton bas de page : "Voir les témoignages" ===== */
.cta-bottom{
  text-align:center;
  margin:10px 0 10px;
}

.btn.secondary{
  display:inline-block;
  padding:12px 24px;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  letter-spacing:.2px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#e6edf4;                 /* -> évite le violet des liens */
  text-decoration:none;          /* -> pas de soulignement */
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn.secondary:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.btn.secondary:active{ transform:translateY(0); }
.btn.secondary .ico{ margin-right:8px; }

/* ===== Footer Gestio ===== */
.site-footer{
  margin-top: 36px;
  padding: 24px 16px 40px;
  background: none;              /* plus de fond */
  border-top: 1px solid rgba(255,255,255,.15); /* fine séparation discrète */
}

.site-footer .footer-tagline{
  max-width: 780px;
  margin: 0 auto 14px;
  text-align: center;
  color: #e6edf4;
  font-weight: 600;
  line-height: 1.45;
}

.footer-links{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}

.footer-links a{
  color: #cfe3f4;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.footer-links a:hover{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.35);
}

.site-footer .sep{ opacity:.45; }

.footer-copy{
  text-align: center;
  color: #9fb0bd;
  margin: 8px 0 0;
  font-size: 13px;
}

/* --- Harmonisation de la date (header Gestio) --- */
#today {
  color: #eaf2ff !important;  /* blanc bleuté du tableau de bord */
  font-weight: 700;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
/* === Date (header Gestio) : dégradé de taille + opacité harmonisée === */
#today {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: #eaf2ff;            /* blanc bleuté doux */
  font-weight: 700;
}

#today div:first-child {
  font-size: 17px;           /* jour + numéro */
  font-weight: 800;
  letter-spacing: 0.2px;
}

#today div:nth-child(2) {
  font-size: 15px;           /* mois */
  opacity: 0.9;
}

#today div:nth-child(3),
#today div:last-child {
  font-size: 14px;           /* année */
  opacity: 0.75;
}
/* ===== SEUIL CA (barre) ===== */
#cardSeuilCA { margin-top: 14px; }

.seuilca-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.seuilca-title{ opacity:.9; }

.seuilca-progress{
  position:relative; height:12px; border-radius:999px;
  background: rgba(255,255,255,.06); overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.seuilca-bar{
  height:100%; width:0%;
  transition: width .5s ease;
  background: #29c36a; /* vert par défaut */
}

.seuilca-legend{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:6px; font-size:.95em; opacity:.9;
}

.seuilca-msg{ margin:8px 0 0; font-size:.95em; }
.seuilca-msg.ok{ color:#72e2a1; }
.seuilca-msg.warn{ color:#ffcc66; }
.seuilca-msg.alert{ color:#ff6b6b; }

/* Couleurs de barre selon état */
.seuil-ok   .seuilca-bar{ background:#29c36a; }
.seuil-warn .seuilca-bar{ background:#ffb74d; }
.seuil-alert .seuilca-bar{ background:#ff5252; }

/* Bouton flottant bas-gauche : discret, comme "Connexion" */
.btn-plus-fixed{
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: #eaf2ff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}
.btn-plus-fixed:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.btn-plus-fixed.is-off{ opacity: .7; }
.btn-plus-fixed.is-on{ border-color: rgba(120,180,255,.45); background: rgba(120,180,255,.12); }
/* ===== Comparatif Gestio / Gestio+ (version compacte premium) ===== */
.compare-wrap{
  max-width: 760px;
  margin: 18px auto 14px;
  padding: 12px;
}

.compare-title{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color:#eaf2ff;
  text-align:left;
}

.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
}

/* header */
.compare-table thead th{
  background:rgba(255,255,255,.08);
  color:#cfe1f4;
  font-weight:900;
  padding:12px 14px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.compare-table .head-cols th:first-child{
  text-align:left;
}
/* Forcer le centrage du titre fusionné */
.compare-table .head-title th{
  text-align:center !important;
}

/* lignes */
.compare-table tbody td{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#eaf2ff;
  vertical-align:middle;
}
.compare-table tbody tr:nth-child(odd){
  background:rgba(255,255,255,.02);
}
.compare-table tbody td:first-child{
  font-weight:800;
}

/* colonnes “produits” */
.compare-col{
  width:110px;
  text-align:center;
  font-weight:800;
  color:#eaf2ff;
}
.compare-col.plus{
  background:linear-gradient(135deg, rgba(90,170,255,.24), rgba(80,160,255,.12));
  border-left:1px solid rgba(120,180,255,.45);
}

/* badges ✔ / ✖ */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:28px; padding:0 10px; gap:8px;
  border-radius:999px; font-weight:900; font-size:13px;
  border:1px solid transparent;
}
.badge.on{
  color:#0b2; background:rgba(20,220,120,.12); border-color:rgba(20,220,120,.35);
}
.badge.off{
  color:#e66262; background:rgba(255,95,95,.12); border-color:rgba(255,95,95,.35);
}

/* petite note */
.compare-note{
  margin-top:8px; color:#bcd0e0; font-size:13px; font-style:italic;
}

/* mobile */
@media (max-width:560px){
  .compare-title{ font-size:20px; }
  .compare-col{ width:88px; }
  .badge{ min-width:42px; height:26px; font-size:12px; }
  .compare-table tbody td{ padding:10px 10px; }
}
/* Titre intégré dans la table */
.compare-table .head-title th{
  text-align:center;
  font-size:20px;
  font-weight:900;
  padding:12px;
  color:#eaf2ff;
  /* même fond que les th : on laisse hériter, juste un léger renfort */
  background:rgba(255,255,255,.08);
}
/* Titre fusionné — toujours sur UNE ligne, centré */
.compare-table .head-title th{
  text-align:center !important;
  font-weight:900;
  color:#eaf2ff;
  background:rgba(255,255,255,.08);
  border-bottom:none;
  border-top-left-radius:14px;
  border-top-right-radius:14px;

  /* clé : une seule ligne */
  white-space: nowrap;          /* empêche le retour à la ligne */
  text-wrap: nowrap;            /* futur alias, par sécurité */
  line-height: 1.15;

  /* taille responsive pour que ça tienne sur mobile */
  font-size: clamp(16px, 4.6vw, 22px);

  /* un poil moins d’espace horizontal pour gagner en largeur utile */
  padding: 12px 8px 8px;
  letter-spacing: .3px;         /* un peu moins large que .5px */
}
.compare-card{
  text-align:center;
  margin:20px 0 10px;
}
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
}