/* ═══════════════════════════════════════════════════════════════════
   La feuille de wakabileguide.com, servie telle quelle.

   Les pages du guide arrivent avec leur mise en page ; les retraduire
   dans le vocabulaire de Boost aurait demandé de relire 60 Ko de
   balisage et de redessiner ce qui marche déjà. Elles gardent donc leur
   feuille, et Boost la sienne : AUCUNE page ne charge les deux.

   C'est une nécessité, pas un confort. Le guide pose des règles sur des
   éléments NUS — body, a, button, input — comme Boost : chargées
   ensemble, les deux se battraient sur chaque bouton et chaque champ du
   site. Séparées, chaque page rend exactement comme avant la fusion.

   Ce qui a été retiré : les règles du header, du menu mobile et du pied
   de page du guide (17 règles). Ces trois-là sont désormais partagés, et
   ils ont leur propre feuille — entete.css — chargée des deux côtés.
   ═══════════════════════════════════════════════════════════════════ */



/*// ================================================================
// EDIT
// ================================================================*/
.blog-cat {
    display: none !important;
}
.blog-date {
    display: none !important;
}
.hero-title .stroke {
    -webkit-text-stroke: 2px #00000000 !important;
    color: #000000d6 !important;
}
.pag-info {
    display: none !important;
}
/* « Absolut Pro » n'est PAS dans ce paquet.
   Sa déclaration d'origine pointait vers `/fonts/AbsolutPro-BoldReduced.woff2`,
   un fichier qui n'existe pas ici : le navigateur demandait donc une police
   absente à chaque page, échouait, et rendait dans celle du système.

   Pour la rétablir le jour où vous avez le fichier : le poser dans
   `public/polices/`, et remettre cette règle en décommentant les six lignes
   ci-dessous, puis remettre la famille en tête de `--font-primary`.

   @font-face {
     font-family: 'Absolut Pro';
     src: url('polices/AbsolutPro-BoldReduced.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
*/
.marquee-bar
 {
    display: none !important;
}
.trust-item {
    display: none !important;
}
.stats-row {
    padding: 0px 0px 30px !important;
}
.kori-section{
    display: none !important;
}
.lequipe{
    display: none !important;
}
.unedeux{
    padding-top: 10px !important;
}

/* ================================================================
   CODE CSS À AJOUTER POUR OPTIMISER L'AFFICHAGE MOBILE
   Remplace la section @media (max-width: 768px) existante
   ================================================================ */

@media (max-width: 768px) {
  /* Cacher les liens de navigation mais garder le logo, bouton télécharger et hamburger */
  .nav-links { display: none; }
  
  /* Optimiser l'espacement du header mobile avec marges */
  .nav { padding: 0 20px; }
  .nav-inner { 
    height: 64px; 
    gap: 29px;
    justify-content: space-between; /* Pousse logo à gauche, hamburger à droite */
  }
  
  /* Logo avec marge à gauche */
  .nav-logo {
    margin-left: 0;
    flex-shrink: 0;
  }
  
  /* Réduire la taille du logo */
  .nav-mark img { 
    height: 26px !important; 
  }
  
  /* Cacher le bouton "Devenir Partenaire" qui est trop long */
  .nav-ctas .btn-outline { 
    display: none; 
  }
  
  /* Optimiser le bouton "Télécharger" pour mobile */
  .nav-ctas {
    display: flex;
    flex: 1;
    justify-content: center;
    margin: 0 12px;
  }
  
  .nav-ctas .btn-primary {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
  
  /* Hamburger avec marge à droite */
  .hamburger { 
    display: flex; 
    flex-shrink: 0;
    margin-right: 0;
  }
  
  /* Le reste de tes styles mobile existants... */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .app-showcase { grid-template-columns: 1fr; }
  .phones-wrap { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cities-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card.feat { grid-column: span 1; }
  .blog-header-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .values-grid { grid-template-columns: 1fr; }
  .partner-testimonials { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; }
  .campaign-grid { grid-template-columns: 1fr; }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   DESIGN SYSTEM — Wakabi Light Blue/White
   ================================================================ */
:root {
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;

  --bg:        #FFFFFF;
  --bg2:       #F8FAFF;
  --bg3:       #EFF6FF;
  --surface:   #FFFFFF;
  --surface2:  #F1F5F9;

  --border:    #E2E8F0;
  --border2:   #CBD5E1;

  --primary:   #2563EB;
  --primary-d: #1D4ED8;
  --primary-l: #EFF6FF;
  --orange:    #F97316;
  --orange-l:  #FFF7ED;
  --teal:      #0D9488;
  --teal-l:    #F0FDFA;
  --green:     #16A34A;
  --red:       #DC2626;
  --gold:      #D97706;

  --text:      #0F172A;
  --text2:     #475569;
  --text3:     #94A3B8;

  --shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg: 0 20px 40px rgba(15,23,42,0.1), 0 8px 16px rgba(15,23,42,0.06);

  /* La MÊME famille que le reste du produit, et c'est ce que la fusion
     demande : deux pages du même site qui ne partagent pas leur police se
     lisent comme deux sites. Les titres se distinguent par la graisse et
     l'approche, pas par un second caractère. */
  --font-primary: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/**
 * `clip` et non `hidden`, et ce n'est pas un détail de style.
 *
 * `overflow-x: hidden` sur `body` fait de lui un CONTENEUR DE
 * DÉFILEMENT. Un `position: sticky` à l'intérieur se colle alors à ce
 * conteneur-là, qui ne défile jamais : la barre du site partait donc
 * vers le haut sur les dix pages qui chargent cette feuille, pendant
 * qu'elle restait collée sur l'accueil et le catalogue, qui chargent
 * l'autre. Le même `position: sticky` était écrit des deux côtés ; seul
 * cet `overflow` différait.
 *
 * `clip` rogne ce qui dépasse SANS créer ce conteneur. La déclaration
 * `hidden` est gardée juste avant pour les navigateurs qui ne
 * connaissent pas `clip` : ils retombent sur le comportement
 * d'aujourd'hui, barre non collée, plutôt que sur une page qui glisse
 * de côté.
 */
body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }

/* ================================================================
   PAGE SYSTEM (SPA routing)
   ================================================================ */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }
.admin-panel { display: none; }
.admin-panel.active { display: flex; }

/* ================================================================
   UTILITY
   ================================================================ */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary); background: var(--blue-50);
  border: 1px solid var(--blue-200);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 18px;
}
.tag-orange { color: var(--orange); background: var(--orange-l); border-color: #FED7AA; }
.tag-teal   { color: var(--teal);   background: var(--teal-l);   border-color: #99F6E4; }
.tag-green  { color: var(--green);  background: #F0FDF4;         border-color: #BBF7D0; }

.headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text);
}
.headline span { color: var(--primary); }
.headline .u { position: relative; display: inline-block; }
.headline .u::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--blue-400));
  border-radius: 2px;
}

.subhead { font-size: 1.05rem; color: var(--text2); line-height: 1.75; max-width: 560px; font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; padding: 11px 24px; border-radius: var(--r-md);
  transition: all 0.18s ease; position: relative; white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.btn-primary:hover { background: var(--primary-d); box-shadow: 0 6px 20px rgba(37,99,235,0.35); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--blue-50); }
.btn-white { background: #fff; color: var(--primary); box-shadow: var(--shadow); }
.btn-white:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg2); border-color: var(--border2); color: var(--text); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn-success { background: var(--green); color: #fff; }

.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn-sm { padding: 7px 16px; font-size: 13px; }

.divider { width: 100%; height: 1px; background: var(--border); }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.badge-blue   { background: var(--blue-100); color: var(--blue-700); }
.badge-green  { background: #D1FAE5; color: #065F46; }
.badge-orange { background: #FEF3C7; color: #92400E; }
.badge-red    { background: #FEE2E2; color: #991B1B; }
.badge-gray   { background: var(--surface2); color: var(--text2); }

/* fade-in animation */
/* ─────────────────────────────────────────────────────────────────
   Le contenu existe AVANT le script, et non grâce à lui.

   Ces blocs arrivaient à `opacity: 0` et n'apparaissaient que quand un
   IntersectionObserver leur posait `.visible`. Un script qui ne charge
   pas, un navigateur qui l'ignore, un lecteur d'articles, un robot
   d'indexation : la page était BLANCHE, sans message ni explication.

   L'animation est donc conditionnée à `html.js`, que le script pose
   lui-même avant le premier rendu. Sans script, rien ne bouge et tout
   se lit — ce qui est le bon ordre des priorités. Et qui demande moins
   d'animations n'en reçoit aucune.
   ───────────────────────────────────────────────────────────────── */
.fade-up { opacity: 1; transform: none; }
html.js .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
/* La révélation doit peser AUTANT que le masquage : `html.js .fade-up`
   compte 0-2-1, et `.fade-up.visible` seul ne comptait que 0-2-0 — la
   classe se posait bien, et ne changeait rien. Toutes les pages du guide
   restaient blanches sous leur propre en-tête. */
html.js .fade-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .fade-up { opacity: 1; transform: none; transition: none; }
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-d1 { transition-delay: 0.1s; }
.fade-up-d2 { transition-delay: 0.2s; }
.fade-up-d3 { transition-delay: 0.3s; }
.fade-up-d4 { transition-delay: 0.4s; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  padding: 130px 0 80px; background: var(--bg); position: relative; overflow: hidden;
  min-height: 90vh; display: flex; align-items: center;
}
.hero-bg-dots {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(var(--blue-200) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, black 30%, transparent 80%);
  opacity: 0.6;
}
.hero-blue-blob {
  position: absolute; top: -120px; right: -120px; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-100) 0%, transparent 70%);
}
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-50); border: 1px solid var(--blue-200);
  padding: 6px 16px; border-radius: 100px; margin-bottom: 24px;
  font-size: 13px; font-weight: 600; color: var(--primary);
}
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 22px; color: var(--text); }
.hero-title .accent { color: var(--primary); }
.hero-title .stroke { -webkit-text-stroke: 2px var(--primary); color: transparent; }
.hero-sub { font-size: 1.1rem; color: var(--text2); line-height: 1.75; margin-bottom: 36px; max-width: 500px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.store-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.store-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--text); color: #fff;
  border: 1px solid var(--text);
  padding: 12px 20px; border-radius: var(--r-md); transition: all 0.2s;
  min-width: 158px;
}
.store-btn.secondary { background: var(--bg); color: var(--text); border-color: var(--border2); }
.store-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.store-btn-icon { font-size: 24px; line-height: 1; }
.store-btn-text small { font-size: 10px; opacity: 0.6; display: block; text-transform: uppercase; letter-spacing: 0.05em; }
.store-btn-text strong { font-size: 15px; font-weight: 700; display: block; font-family: var(--font-display); }
.hero-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.trust-icon { font-size: 16px; }

/* Hero phone visual */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-phone-wrap {
  position: relative; width: 280px;
  filter: drop-shadow(0 32px 64px rgba(37,99,235,0.2));
  animation: float 4.5s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hero-phone-wrap img { border-radius: 32px; width: 100%; }
.hero-float-card {
  position: absolute; z-index: 3;
  background: var(--bg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 16px;
}
.hfc-left { left: -80px; top: 28%; min-width: 160px; }
.hfc-right { right: -80px; bottom: 22%; min-width: 150px; }
.hfc-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; font-weight: 600; }
.hfc-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); }
.hfc-val span { color: var(--primary); }
.hfc-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-bar { background: var(--primary); padding: 14px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 48px; animation: marquee 28s linear infinite; width: max-content; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }
.marquee-item strong { color: #fff; }
.marquee-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ================================================================
   STATS
   ================================================================ */
.stats-row { padding: 60px 0; background: var(--bg); }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.stat-block { background: var(--bg); padding: 32px 28px; text-align: center; transition: background 0.2s; }
.stat-block:hover { background: var(--bg2); }
.stat-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.stat-num sub { font-size: 1.2rem; vertical-align: baseline; }
.stat-label { font-size: 13px; color: var(--text2); font-weight: 500; }

/* ================================================================
   FEATURES SECTION
   ================================================================ */
.features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.feat-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px 22px;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.feat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--primary), var(--blue-400)); transform: scaleX(0); transition: transform 0.3s; transform-origin: left; }
.feat-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-3px); }
.feat-card:hover::before { transform: scaleX(1); }
.feat-icon { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
.feat-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.feat-desc { font-size: 13px; color: var(--text2); line-height: 1.65; }
.feat-count { margin-top: 18px; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--primary); }
.feat-count span { font-size: 12px; color: var(--text3); font-family: var(--font-body); font-weight: 400; }

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.step-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 36px 28px; text-align: center; transition: all 0.25s;
}
.step-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-4px); }
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  margin: 0 auto 22px; box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.step-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.step-desc { font-size: 14px; color: var(--text2); line-height: 1.7; }

/* ================================================================
   KORI CARD
   ================================================================ */
.kori-section { padding: 96px 0; background: var(--bg2); }
.kori-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.kori-visual-card {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  border-radius: var(--r-2xl); padding: 44px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 32px 64px rgba(37,99,235,0.3);
}
.kori-visual-card::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:280px; height:280px; border-radius:50%;
  background: rgba(255,255,255,0.07);
}
.kori-visual-card::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:200px; height:200px; border-radius:50%;
  background: rgba(255,255,255,0.04);
}
.kori-logo-text { font-family: var(--font-display); font-size: 38px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.kori-sub-text { font-size: 12px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 36px; }
.kori-balance-lbl { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.kori-balance-val { font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; line-height: 1; margin-bottom: 28px; }
.kori-balance-val sub { font-size: 1.5rem; vertical-align: super; }
.kori-dots { display: flex; gap: 7px; margin-bottom: 20px; }
.kori-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.kori-dot.on { background: #fff; }
.kori-card-label { font-size: 10px; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 22px; }
.kori-perks { display: flex; flex-direction: column; gap: 10px; }
.kori-perk { display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: 0.9; }
.kori-perk-icon { font-size: 16px; }
.kori-content .headline { margin-bottom: 18px; }
.kori-content p { color: var(--text2); margin-bottom: 14px; line-height: 1.8; }
.kori-benefits { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.kb-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color 0.2s; }
.kb-item:hover { border-color: var(--blue-200); }
.kb-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.kb-text strong { font-size: 14px; font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; }
.kb-text span { font-size: 12px; color: var(--text3); }

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.testi-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 22px; transition: all 0.25s; }
.testi-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-3px); }
.testi-card:nth-child(2) { margin-top: 20px; }
.testi-card:nth-child(4) { margin-top: 12px; }
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: #EAB308; font-size: 13px; }
.testi-quote { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 18px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 10px; }
.av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.av-b { background: var(--blue-100); color: var(--blue-700); }
.av-g { background: #D1FAE5; color: #065F46; }
.av-o { background: #FEF3C7; color: #92400E; }
.av-p { background: #F3E8FF; color: #6B21A8; }
.testi-name { font-size: 14px; font-weight: 600; color: var(--text); }
.testi-role { font-size: 12px; color: var(--text3); }

/* ================================================================
   PARTNER / PRICING
   ================================================================ */
.partner-section { background: var(--bg2); }
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 60px; }
.why-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; transition: all 0.25s; }
.why-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-4px); }
.why-icon { font-size: 32px; margin-bottom: 14px; }
.why-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.why-desc { font-size: 13px; color: var(--text2); line-height: 1.7; }
.why-metric { margin-top: 16px; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--primary); }
.why-metric span { font-size: 12px; color: var(--text3); font-family: var(--font-body); font-weight: 400; }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.pricing-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-2xl);
  padding: 32px 26px; display: flex; flex-direction: column; transition: all 0.25s;
}
.pricing-card:hover { box-shadow: var(--shadow); }
.pricing-card.featured {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 16px 40px rgba(37,99,235,0.3); transform: scale(1.02);
}
.pricing-card.featured .pricing-desc,
.pricing-card.featured .pf-item,
.pricing-card.featured .price-period { color: rgba(255,255,255,0.75); }
.pricing-card.featured .pf-dim { color: rgba(255,255,255,0.35); }
.featured-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); display: inline-block; padding: 4px 12px; border-radius: 100px; margin-bottom: 14px; }
.pricing-tier { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-bottom: 8px; font-weight: 600; }
.pricing-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-bottom: 18px; }
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.price-val { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.price-curr { font-size: 16px; font-weight: 600; align-self: flex-start; margin-top: 6px; }
.price-period { font-size: 13px; margin-bottom: 16px; }
.pricing-desc { font-size: 13px; color: var(--text2); margin-bottom: 24px; min-height: 40px; }
.pricing-divider { height: 1px; background: var(--border); margin-bottom: 22px; }
.pricing-card.featured .pricing-divider { background: rgba(255,255,255,0.2); }
.pricing-features { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.pf-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text2); }
.pf-check { color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.pricing-card.featured .pf-check { color: rgba(255,255,255,0.9); }
.pf-dim { color: var(--text3); }
.pf-dim .pf-check { color: var(--text3); }

/* ================================================================
   CITIES
   ================================================================ */
.cities-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.city-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 14px; text-align: center; transition: all 0.25s; }
.city-card.live { border-color: var(--blue-300); background: var(--blue-50); }
.city-card.soon { opacity: 0.55; }
.city-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.city-flag { font-size: 26px; margin-bottom: 10px; }
.city-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.city-country { font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.city-status { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 100px; }
.cs-live { background: #D1FAE5; color: #065F46; }
.cs-soon { background: #FEF3C7; color: #92400E; }
.cs-2026 { background: var(--blue-100); color: var(--blue-700); }

/* ================================================================
   BLOG CARDS
   ================================================================ */
.blog-grid { display: grid; grid-template-columns: 1.6fr 1.6fr 1.6fr; gap: 20px; }
.blog-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; cursor: pointer; transition: all 0.25s; }
.blog-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-4px); }
.blog-img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg2); }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-img img { transform: scale(1.05); }
.blog-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); }
.blog-body { padding: 20px; }
.blog-cat { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.blog-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 10px; }
.blog-card.feat .blog-title { font-size: 18px; }
.blog-card.feat .blog-img { aspect-ratio: 4/3; }
.blog-date { font-size: 11px; color: var(--text3); }
.blog-read-more { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 4px; }

/* ================================================================
   FOOTER
   ================================================================ */
footer { background: var(--text); color: rgba(255,255,255,0.85); padding: 70px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-brand-logo { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.footer-brand-logo span { color: var(--blue-400); }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 280px; margin-bottom: 22px; }
.footer-socials { display: flex; gap: 8px; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.35); }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.35); cursor: pointer; }
.footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* ================================================================
   INNER PAGE HEADER
   ================================================================ */
.page-header {
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  padding: 130px 0 70px; color: #fff; text-align: center; position: relative; overflow: hidden;
}
.page-header::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.page-header-inner { position: relative; z-index: 2; }
.page-header h1 { font-family: var(--font-display); font-size: clamp(2.2rem,5vw,3.5rem); font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.1; letter-spacing: -0.03em; }
.page-header p { font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.breadcrumb a { color: rgba(255,255,255,0.7); cursor: pointer; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { opacity: 0.4; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-img-wrap { border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.team-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 20px; text-align: center; transition: all 0.25s; }
.team-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-3px); }
.team-av { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.team-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--text3); }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.value-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 24px; }
.value-icon { font-size: 28px; margin-bottom: 14px; }
.value-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.value-desc { font-size: 13px; color: var(--text2); line-height: 1.7; }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 14px; }
/* Le titre du bloc de contact est passé de `h3` à `h2` : il suivait le `h1`
   de la page et sautait un niveau. Il n'avait AUCUNE règle — sa taille
   venait du défaut du navigateur — et le changement de niveau l'aurait donc
   fait grossir d'un quart. On la pose ici pour que la correction reste
   structurelle et ne redessine pas la page. */
.contact-grid > div > h2 { font-family: var(--font-display); font-size: 1.2rem;
  font-weight: 700; line-height: 1.35; }
.contact-info p { color: var(--text2); margin-bottom: 28px; line-height: 1.8; }
.contact-links { display: flex; flex-direction: column; gap: 12px; }
.contact-link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text2); padding: 14px 18px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.2s; }
.contact-link:hover { border-color: var(--primary); color: var(--text); background: var(--blue-50); }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 14px; color: var(--text); outline: none; transition: border-color 0.2s; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-group textarea { min-height: 110px; resize: vertical; }
.form-success { display: none; background: #D1FAE5; border: 1px solid #6EE7B7; border-radius: var(--r-md); padding: 14px; color: #065F46; font-size: 14px; text-align: center; }

/* ================================================================
   LEGAL PAGES
   ================================================================ */
.legal-content { max-width: 760px; margin: 0 auto; padding: 80px 0; }
.legal-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 36px 0 12px; }
.legal-content h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 24px 0 8px; }
.legal-content p { color: var(--text2); line-height: 1.8; margin-bottom: 14px; }
.legal-content ul { color: var(--text2); padding-left: 20px; line-height: 1.8; margin-bottom: 14px; }
.legal-content ul li { margin-bottom: 6px; }

/* ================================================================
   BLOG SINGLE
   ================================================================ */
.article-header { background: var(--bg2); padding: 120px 0 60px; }
.article-cat { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); background: var(--blue-50); border: 1px solid var(--blue-200); padding: 5px 14px; border-radius: 100px; margin-bottom: 18px; }
.article-title { font-family: var(--font-display); font-size: clamp(2rem,4vw,3rem); font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 18px; letter-spacing: -0.03em; }
.article-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--text3); flex-wrap: wrap; }
.article-body { max-width: 760px; margin: 0 auto; padding: 60px 0; }
.article-body h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 36px 0 14px; }
.article-body p { color: var(--text2); line-height: 1.85; margin-bottom: 18px; font-size: 1rem; }
.article-body img { width: 100%; border-radius: var(--r-xl); margin: 28px 0; }
.article-body ul, .article-body ol { color: var(--text2); padding-left: 22px; margin-bottom: 18px; line-height: 1.8; }
.article-body ul li, .article-body ol li { margin-bottom: 8px; }
.article-body blockquote { border-left: 4px solid var(--primary); padding: 16px 24px; margin: 28px 0; background: var(--blue-50); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--text2); }

/* ================================================================
   APP PAGE
   ================================================================ */
.app-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.phones-wrap { position: relative; height: 500px; display: flex; align-items: center; justify-content: center; }
.phone-main { width: 240px; position: absolute; z-index: 3; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-lg); animation: float 4.5s ease-in-out infinite; border: 1px solid var(--border); }
.phone-side { width: 200px; position: absolute; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); opacity: 0.7; border: 1px solid var(--border); }
.phone-left { left: 0; top: 50%; transform: translateY(-50%) rotate(-8deg); filter: blur(1px); }
.phone-right { right: 0; top: 50%; transform: translateY(-50%) rotate(8deg); filter: blur(1px); }
.phone-main img, .phone-side img { width: 100%; height: 100%; object-fit: cover; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.pill { display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text2); transition: all 0.2s; }
.pill:hover { border-color: var(--primary); color: var(--primary); background: var(--blue-50); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* ================================================================
   PARTNER PAGE (extended)
   ================================================================ */
.testimonial-band { background: var(--blue-900); padding: 80px 0; }
.partner-testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.pt-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-xl); padding: 28px; }
.pt-quote { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.75; font-style: italic; margin-bottom: 18px; }
.pt-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; }
.pt-role { font-size: 12px; color: rgba(255,255,255,0.5); }
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
/* Les questions sont des `<details>` : elles s'ouvrent sans script. On
   cache donc le triangle du navigateur, puisqu'on a notre propre « + ». */
.faq-q { padding: 18px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; font-weight: 600; color: var(--text); transition: background 0.2s; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--bg2); }
.faq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.faq-q span { flex: none; font-size: 20px; color: var(--primary); transition: transform 0.2s; }
.faq-item[open] .faq-q span { transform: rotate(45deg); }
/* Pas de `max-height` : le navigateur montre ou cache le contenu lui-même.
   L'ancienne animation plafonnait la réponse à deux cents pixels, et
   coupait net les plus longues — un défaut qu'on n'aurait vu qu'une fois
   les questions rouvertes. */
.faq-a { padding: 0 22px 18px; font-size: 14px; color: var(--text2); line-height: 1.75; }

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-panel {
  min-height: 100vh; background: #F1F5F9;
}
.admin-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--blue-900); color: #fff;
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 800;
}
.admin-logo {
  padding: 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.admin-logo span { color: var(--blue-300); }
.admin-logo-badge { background: var(--blue-500); font-size: 10px; padding: 2px 8px; border-radius: 100px; font-weight: 600; margin-left: auto; }
.admin-nav { padding: 16px 12px; flex: 1; }
.admin-nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.35); font-weight: 700; padding: 14px 8px 6px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.65);
  cursor: pointer; transition: all 0.18s; margin-bottom: 2px;
}
.admin-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav-item.active { background: rgba(255,255,255,0.12); color: #fff; }
.admin-nav-icon { font-size: 17px; width: 22px; text-align: center; }
.admin-nav-badge { margin-left: auto; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; }
.admin-sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: rgba(255,255,255,0.45); }

.admin-main { margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 0 28px; height: 64px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 100;
}
.admin-topbar-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); }
.admin-topbar-actions { display: flex; align-items: center; gap: 10px; }
.admin-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-100); color: var(--blue-700); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; cursor: pointer; }
.admin-content { padding: 28px; flex: 1; }

/* Admin view system */
.admin-view { display: none; }
.admin-view.active { display: block; }

/* Dashboard */
.dash-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; }
.dash-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.dash-stat-label { font-size: 12px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.dash-stat-val { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text); }
.dash-stat-change { font-size: 12px; margin-top: 4px; }
.change-up { color: var(--green); }
.change-down { color: var(--red); }
.dash-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.admin-card-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 18px; }

/* Tables */
.admin-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.admin-table-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-table-header h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.search-input {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: 13px; color: var(--text); outline: none;
  min-width: 220px; transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--primary); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: 11px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); font-weight: 700; border-bottom: 1px solid var(--border); background: var(--bg2); }
.admin-table td { padding: 13px 16px; font-size: 14px; color: var(--text2); border-bottom: 1px solid var(--border); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg2); }
.table-actions { display: flex; gap: 6px; }
.icon-btn { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all 0.18s; border: 1px solid var(--border); background: var(--bg); }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--blue-50); }
.icon-btn.del:hover { border-color: var(--red); color: var(--red); background: #FEF2F2; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 2000; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: var(--r-xl); padding: 28px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 64px rgba(15,23,42,0.2); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); }
.modal-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text2); cursor: pointer; transition: all 0.18s; background: var(--bg2); }
.modal-close:hover { background: #FEE2E2; color: var(--red); }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Media grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
.media-item { background: var(--bg2); border: 2px solid var(--border); border-radius: var(--r-md); aspect-ratio: 1; overflow: hidden; cursor: pointer; transition: all 0.2s; position: relative; }
.media-item:hover { border-color: var(--primary); }
.media-item.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.media-item img { width: 100%; height: 100%; object-fit: cover; }
.media-item-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 28px; color: var(--text3); }
.media-item-ph span { font-size: 11px; font-weight: 600; color: var(--text3); }
.media-select-mark { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.media-item.selected .media-select-mark { display: flex; }
.media-upload-zone { border: 2px dashed var(--border2); border-radius: var(--r-lg); padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 20px; }
.media-upload-zone:hover { border-color: var(--primary); background: var(--blue-50); }
.media-upload-icon { font-size: 36px; margin-bottom: 12px; }
.media-upload-text { font-size: 14px; color: var(--text2); margin-bottom: 6px; }
.media-upload-sub { font-size: 12px; color: var(--text3); }

/* Rich text editor */
.rte-toolbar { background: var(--bg2); border: 1px solid var(--border); border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 8px 12px; display: flex; gap: 4px; flex-wrap: wrap; }
.rte-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 5px 9px; font-size: 13px; color: var(--text2); cursor: pointer; font-weight: 600; transition: all 0.15s; }
.rte-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.rte-area { border: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 14px; min-height: 200px; outline: none; font-size: 14px; color: var(--text); line-height: 1.7; }
.rte-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Settings page */
.settings-grid { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.settings-nav { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; }
.settings-nav-item { padding: 10px 14px; border-radius: var(--r-sm); font-size: 14px; color: var(--text2); cursor: pointer; transition: all 0.18s; font-weight: 500; }
.settings-nav-item:hover { background: var(--bg2); color: var(--text); }
.settings-nav-item.active { background: var(--blue-50); color: var(--primary); }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-section { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; }
.settings-section-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: none; }
.toggle-label strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.toggle-label span { font-size: 12px; color: var(--text3); }
.toggle { position: relative; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border2); border-radius: 12px; cursor: pointer; transition: background 0.2s; }
.toggle-slider:before { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Campaign card in admin */
.campaign-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.camp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.camp-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.camp-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.camp-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.6; }
.camp-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); margin-bottom: 6px; }
.camp-progress-bar { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.camp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--blue-400)); border-radius: 3px; }
.camp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.camp-dates { font-size: 11px; color: var(--text3); }

/* Login page */
.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg2); padding: 24px; }
.login-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 48px 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo-text { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--text); }
.login-logo-text span { color: var(--primary); }
.login-subtitle { font-size: 14px; color: var(--text2); text-align: center; margin-bottom: 32px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-footer { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text3); }
.login-footer a { color: var(--primary); cursor: pointer; font-weight: 600; }

/* Notification toast */
.toast-container { position: fixed; top: 80px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--shadow-lg); font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 10px; min-width: 280px; animation: toast-in 0.3s ease; }
@keyframes toast-in { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
.toast-success { border-left: 4px solid var(--green); }
.toast-error { border-left: 4px solid var(--red); }
.toast-info { border-left: 4px solid var(--primary); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .testi-grid { grid-template-columns: repeat(2,1fr); }
  .testi-card:nth-child(2), .testi-card:nth-child(4) { margin-top: 0; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pricing-card.featured { transform: none; }
  .cities-grid { grid-template-columns: repeat(3,1fr); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card.feat { grid-column: span 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .kori-grid { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: repeat(2,1fr); }
  .admin-sidebar { width: 220px; }
  .admin-main { margin-left: 220px; }
}@media (max-width: 768px){
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .app-showcase { grid-template-columns: 1fr; }
  .phones-wrap { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cities-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card.feat { grid-column: span 1; }
  .blog-header-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .values-grid { grid-template-columns: 1fr; }
  .partner-testimonials { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; }
  .campaign-grid { grid-template-columns: 1fr; }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }}@media (max-width: 480px){
  .features-grid { grid-template-columns: 1fr; }
  .cities-grid { grid-template-columns: repeat(3,1fr); }}

/* ================================================================
   RESPONSIVE COMPLET — AJOUTS POUR TOUS LES ÉCRANS
   (sans modifier la structure existante)
   ================================================================ */

/* --- Empêcher tout débordement horizontal global --- */
/* Même raison qu'en tête de fichier : `clip` rogne sans faire de `html`
   et de `body` des conteneurs de défilement, ce qui décollerait la barre. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }

/* ============================================
   GRANDS ÉCRANS / LAPTOPS (max-width: 1200px)
   ============================================ */
@media (max-width: 1200px) {
  .container { padding: 0 28px; }
  .hero-inner { gap: 50px; }
  .kori-grid { gap: 50px; }
  .about-grid { gap: 50px; }
  .app-showcase { gap: 50px; }
  .contact-grid { gap: 40px; }
  .footer-grid { gap: 40px; }
  .hfc-left { left: -40px; }
  .hfc-right { right: -40px; }
}

/* ============================================
   TABLETTES (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .section { padding: 80px 0; }
  .section-sm { padding: 56px 0; }
  .hero { padding: 110px 0 60px; min-height: auto; }
  .hero-inner { gap: 40px; }
  .hero-title { font-size: clamp(2.4rem, 5vw, 4rem); }
  .hero-phone-wrap { width: 240px; }
  .hfc-left { left: -20px; min-width: 140px; padding: 10px 12px; }
  .hfc-right { right: -20px; min-width: 130px; padding: 10px 12px; }
  .hfc-val { font-size: 17px; }
  .page-header { padding: 110px 0 60px; }
  .legal-content, .article-body { padding: 50px 24px; }
  .article-header { padding: 100px 0 50px; }
  .modal { max-width: 90%; padding: 24px; }
  .toast-container { right: 16px; top: 76px; }
  .toast { min-width: 240px; }
}

/* ============================================
   TABLETTES PETITES / GRANDS MOBILES (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .section { padding: 70px 0; }
  .section-sm { padding: 48px 0; }
  
  /* Hero */
  .hero { padding: 100px 0 50px; }
  .hero-blue-blob { width: 400px; height: 400px; top: -80px; right: -80px; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  
  /* Tables admin scrollables */
  .admin-table-wrap { overflow-x: auto; }
  .admin-table { min-width: 600px; }
  
  /* Settings */
  .settings-grid { grid-template-columns: 1fr; }
  .settings-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-item { flex: 0 0 auto; }
  
  /* Admin topbar */
  .admin-topbar { padding: 0 20px; flex-wrap: wrap; height: auto; min-height: 64px; gap: 10px; }
  .admin-content { padding: 20px; }
  
  /* Modal */
  .modal { padding: 22px; max-height: 92vh; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; min-width: 120px; justify-content: center; }
}

/* ============================================
   MOBILES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .section { padding: 60px 0; }
  .section-sm { padding: 40px 0; }
  
  /* Typography */
  .headline { font-size: clamp(1.75rem, 6vw, 2.4rem); }
  .subhead { font-size: 0.98rem; }
  
  /* Hero */
  .hero { padding: 90px 0 40px; }
  .hero-inner { gap: 30px; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 18px; }
  .hero-sub { font-size: 1rem; margin-bottom: 28px; }
  .hero-ctas { gap: 10px; margin-bottom: 32px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .store-btns { width: 100%; }
  .store-btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .hero-trust { gap: 12px; }
  .hero-blue-blob { display: none; }
  
  /* Page header */
  .page-header { padding: 100px 0 50px; }
  .page-header h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .page-header p { font-size: 1rem; padding: 0 12px; }
  
  /* Stats */
  .stats-grid { grid-template-columns: 1fr; }
  .stat-block { padding: 22px 18px; }
  .stat-num { font-size: 2rem; }
  
  /* Features */
  .feat-card { padding: 22px 18px; }
  
  /* Steps */
  .step-card { padding: 28px 22px; }
  
  /* Kori card */
  .kori-section { padding: 70px 0; }
  .kori-visual-card { padding: 32px 24px; }
  .kori-balance-val { font-size: 2.4rem; }
  .kori-logo-text { font-size: 30px; }
  
  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; }
  .testi-card { margin-top: 0 !important; }
  
  /* Pricing */
  .pricing-card.featured { transform: none; }
  .pricing-card { padding: 26px 22px; }
  .price-val { font-size: 2.2rem; }
  
  /* Cities */
  .city-card { padding: 18px 10px; }
  .city-flag { font-size: 22px; }
  
  /* Team */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .team-card { padding: 22px 14px; }
  .team-av { width: 60px; height: 60px; font-size: 18px; }
  
  /* About */
  .about-grid { gap: 36px; }
  
  /* Article */
  .article-header { padding: 100px 0 40px; }
  .article-body { padding: 40px 18px; }
  .article-body h2 { font-size: 1.3rem; }
  .article-body p { font-size: 0.98rem; }
  .article-meta { gap: 10px; font-size: 12px; }
  
  /* Legal */
  .legal-content { padding: 50px 18px; }
  
  /* App page */
  .feature-pills { gap: 6px; }
  .pill { font-size: 12px; padding: 6px 12px; }
  
  /* FAQ */
  .faq-q { padding: 16px 18px; font-size: 14px; }
  .faq-a { padding: 0 18px 16px; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-tagline { max-width: 100%; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px; }
  
  /* Forms */
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; padding: 12px 14px; } /* 16px évite le zoom iOS */
  
  /* Contact */
  .contact-grid { gap: 36px; }
  .contact-info h3 { font-size: 1.3rem; }
  
  /* Buttons */
  .btn { padding: 11px 20px; font-size: 14px; }
  .btn-lg { padding: 13px 26px; font-size: 14px; }
  
  /* Toast */
  .toast-container { left: 12px; right: 12px; top: 76px; }
  .toast { min-width: 0; width: 100%; }
  
  /* Admin dashboard */
  .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dash-stat { padding: 18px; }
  .dash-stat-val { font-size: 1.6rem; }
  .admin-topbar-title { font-size: 15px; }
  .admin-content { padding: 16px; }
  
  /* Admin tables wrapper */
  .admin-table-header { padding: 14px 16px; }
  .search-input { min-width: 0; width: 100%; }
  .admin-table th, .admin-table td { padding: 10px 12px; font-size: 13px; }
  
  /* Modal */
  .modal { padding: 20px; border-radius: var(--r-lg); }
  .modal-title { font-size: 16px; }
  .modal-form { gap: 12px; }
  
  /* Login */
  .login-card { padding: 36px 26px; }
  .login-logo-text { font-size: 24px; }
  
  /* Mobile menu */
  .mobile-menu { padding: 80px 20px 32px; }
  .mobile-menu a { font-size: 19px; padding: 12px 0; }
  
  /* Page header inner padding */
  .page-header-inner { padding: 0 12px; }
  
  /* Blog */
  .blog-body { padding: 18px; }
  .blog-card.feat .blog-title { font-size: 16px; }
  
  /* Partner testimonials */
  .testimonial-band { padding: 60px 0; }
  .pt-card { padding: 22px; }
}

/* ============================================
   PETITS MOBILES (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 50px 0; }
  .section-sm { padding: 36px 0; }
  
  /* Nav */
  .nav { padding: 0 14px; }
  .nav-inner { height: 60px; gap: 12px; }
  .nav-ctas .btn-primary { padding: 7px 12px; font-size: 12px; }
  .nav-mark img { height: 24px !important; }
  
  /* Hero */
  .hero { padding: 80px 0 30px; }
  .hero-title { font-size: clamp(1.7rem, 9vw, 2.4rem); line-height: 1.1; }
  .hero-eyebrow { font-size: 12px; padding: 5px 12px; margin-bottom: 18px; }
  .hero-sub { font-size: 0.95rem; margin-bottom: 24px; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .store-btns { flex-direction: column; width: 100%; }
  .store-btn { width: 100%; }
  
  /* Page header */
  .page-header { padding: 90px 0 40px; }
  .page-header h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .page-header p { font-size: 0.95rem; }
  .breadcrumb { font-size: 12px; flex-wrap: wrap; }
  
  /* Headlines */
  .headline { font-size: clamp(1.5rem, 7vw, 2rem); }
  .subhead { font-size: 0.95rem; }
  .tag { font-size: 11px; padding: 4px 12px; }
  
  /* Cities — déjà 3 colonnes par défaut ici via media existante, on ajuste */
  .cities-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .city-card { padding: 16px 8px; }
  .city-name { font-size: 12px; }
  .city-country { font-size: 10px; }
  .city-status { font-size: 9px; padding: 2px 6px; }
  
  /* Pricing */
  .pricing-card { padding: 22px 18px; }
  .pricing-name { font-size: 19px; }
  .price-val { font-size: 2rem; }
  .pricing-desc { min-height: auto; }
  
  /* Kori */
  .kori-visual-card { padding: 28px 20px; }
  .kori-logo-text { font-size: 26px; }
  .kori-balance-val { font-size: 2rem; }
  .kori-balance-val sub { font-size: 1.1rem; }
  
  /* Team */
  .team-av { width: 56px; height: 56px; font-size: 16px; }
  .team-name { font-size: 14px; }
  .team-role { font-size: 12px; }
  
  /* Feat */
  .feat-card { padding: 20px 16px; }
  .feat-icon { width: 44px; height: 44px; font-size: 19px; margin-bottom: 14px; }
  .feat-title { font-size: 15px; }
  .feat-desc { font-size: 12.5px; }
  
  /* Step */
  .step-card { padding: 24px 18px; }
  .step-num { width: 46px; height: 46px; font-size: 18px; }
  
  /* Why */
  .why-card { padding: 22px 18px; }
  
  /* Testimonials */
  .testi-card { padding: 22px 18px; }
  
  /* Footer */
  footer { padding: 50px 0 22px; }
  .footer-grid { gap: 28px; margin-bottom: 36px; }
  .footer-brand-logo { font-size: 22px; }
  .footer-bottom { gap: 10px; }
  .footer-copy { font-size: 11px; text-align: center; }
  .footer-legal a { font-size: 11px; }
  
  /* Buttons */
  .btn { padding: 10px 18px; font-size: 13px; }
  .btn-lg { padding: 12px 22px; font-size: 13px; }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  
  /* Forms */
  .form-group label { font-size: 11px; }
  .form-group input, .form-group select, .form-group textarea { padding: 11px 12px; font-size: 16px; }
  .form-group textarea { min-height: 100px; }
  
  /* Article */
  .article-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .article-body { padding: 32px 16px; }
  .article-body h2 { font-size: 1.2rem; }
  .article-body blockquote { padding: 12px 18px; margin: 22px 0; }
  
  /* Legal */
  .legal-content { padding: 36px 16px; }
  .legal-content h2 { font-size: 1.25rem; }
  .legal-content h3 { font-size: 1rem; }
  
  /* Modal */
  .modal { padding: 18px; max-height: 95vh; }
  .modal-overlay { padding: 12px; }
  .modal-title { font-size: 15px; }
  .modal-close { width: 28px; height: 28px; font-size: 16px; }
  .modal-footer { flex-direction: column-reverse; gap: 8px; }
  .modal-footer .btn { width: 100%; }
  
  /* Admin */
  .dash-stats { grid-template-columns: 1fr; }
  .dash-stat-val { font-size: 1.5rem; }
  .admin-topbar { padding: 0 14px; gap: 8px; }
  .admin-topbar-title { font-size: 14px; }
  .admin-avatar { width: 32px; height: 32px; font-size: 12px; }
  .admin-content { padding: 14px; }
  .admin-card { padding: 18px; }
  
  /* Login */
  .login-card { padding: 28px 20px; }
  .admin-login { padding: 16px; }
  
  /* FAQ */
  .faq-q { padding: 14px 16px; font-size: 13.5px; }
  .faq-q span { font-size: 18px; }
  .faq-a { padding: 0 16px 14px; }
  
  /* Pills */
  .pill { font-size: 11.5px; padding: 5px 10px; }
  
  /* Mobile menu */
  .mobile-menu { padding: 76px 18px 28px; }
  .mobile-menu a { font-size: 18px; padding: 11px 0; }
  
  /* Toast */
  .toast { padding: 12px 14px; font-size: 13px; }
  
  /* Stats */
  .stat-num { font-size: 1.8rem; }
  .stat-num sub { font-size: 1rem; }
  
  /* Campaign */
  .camp-card { padding: 18px; }
  
  /* Blog */
  .blog-body { padding: 16px; }
  .blog-title { font-size: 14px; }
  .blog-cat { font-size: 10px; }
  
  /* Settings */
  .settings-section { padding: 20px; }
  .settings-section-title { font-size: 15px; }
  .toggle-row { flex-wrap: wrap; gap: 8px; }
  
  /* Contact */
  .contact-link { font-size: 13px; padding: 12px 14px; }
  
  /* Trust items déjà cachées */
  .hero-trust { font-size: 12px; }
}

/* ============================================
   TRÈS PETITS ÉCRANS (max-width: 360px)
   ============================================ */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .nav { padding: 0 10px; }
  .nav-inner { gap: 8px; }
  .nav-ctas .btn-primary { padding: 6px 10px; font-size: 11.5px; }
  .nav-mark img { height: 22px !important; }
  
  .hero-title { font-size: clamp(1.5rem, 8vw, 2rem); }
  .headline { font-size: clamp(1.4rem, 7vw, 1.85rem); }
  .page-header h1 { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  
  .cities-grid { grid-template-columns: 1fr 1fr; }
  .footer-legal { gap: 8px; }
  
  .modal { padding: 16px; }
  .admin-content { padding: 12px; }
  .admin-topbar { padding: 0 12px; }
  
  .kori-visual-card { padding: 24px 18px; }
  .kori-balance-val { font-size: 1.8rem; }
  
  .price-val { font-size: 1.8rem; }
}

/* ============================================
   ORIENTATION PAYSAGE SUR PETITS ÉCRANS
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 90px 0 40px; }
  .mobile-menu { padding-top: 70px; overflow-y: auto; }
  .modal { max-height: 88vh; }
}

/* ============================================
   ÉCRANS TACTILES — améliorer les zones cliquables
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-links a, .footer-links a, .pill, .city-card, .feat-card, 
  .pricing-card, .testi-card, .blog-card, .step-card, .why-card,
  .admin-nav-item, .settings-nav-item, .icon-btn, .modal-close, .fsoc {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
  }
  /* Désactiver les hover transforms sur tactile pour éviter les états bloqués */
  .feat-card:hover, .testi-card:hover, .blog-card:hover, .step-card:hover,
  .why-card:hover, .city-card:hover, .team-card:hover, .pricing-card:hover,
  .store-btn:hover, .btn-primary:hover, .btn-white:hover {
    transform: none;
  }
}

/* ================================================================
   CORRECTIONS COMPLÉMENTAIRES (priorité haute via !important
   pour surcharger les styles inline existants)
   ================================================================ */

/* ------------------------------------------------
   1) HERO MOBILE — Afficher l'image du téléphone
   (au lieu de la cacher) avec mise en page propre
   ------------------------------------------------ */
@media (max-width: 768px) {
  /* On ré-active l'image du hero qui était cachée */
  .hero-visual {
    display: flex !important;
    order: -1; /* image au-dessus du texte */
    margin: 0 auto 28px;
    width: 100%;
    max-width: 320px;
  }
  .hero-phone-wrap {
    width: 220px !important;
    margin: 0 auto;
  }
  /* Garder les 2 cartes flottantes mais les rapprocher */
  .hero-float-card { padding: 10px 12px; }
  .hfc-left { left: -10px; top: 18%; min-width: 130px; }
  .hfc-right { right: -10px; bottom: 16%; min-width: 120px; }
  .hfc-label { font-size: 9px; }
  .hfc-val { font-size: 16px; }
  .hfc-sub { font-size: 10px; }

  /* Le texte du hero passe en dessous, centré pour un look plus harmonieux */
  .hero-inner > *:not(.hero-visual) { text-align: left; }
  .hero-content { width: 100%; }
}@media (max-width: 480px){
  .hero-visual { max-width: 280px; margin-bottom: 24px; }
  .hero-phone-wrap { width: 190px !important; }
  .hfc-left { left: 0; top: 14%; min-width: 115px; padding: 8px 10px; }
  .hfc-right { right: 0; bottom: 14%; min-width: 110px; padding: 8px 10px; }
  .hfc-val { font-size: 14px; }
  .hfc-label { font-size: 8.5px; letter-spacing: 0.05em; }
  .hfc-sub { font-size: 9.5px; }}@media (max-width: 360px){
  .hero-visual { max-width: 240px; }
  .hero-phone-wrap { width: 170px !important; }
  .hfc-left, .hfc-right { min-width: 100px; }}

/* ------------------------------------------------
   2) NAV MOBILE — Espacement entre logo, bouton
   "Télécharger" et hamburger (mobile-first)
   ------------------------------------------------ */
@media (max-width: 768px) {
  .nav { padding: 0 16px !important; }
  .nav-inner {
    gap: 14px !important;
    padding: 0 4px;
  }
  .nav-logo { padding-right: 8px; }
  .nav-ctas {
    margin: 0 8px !important;
    padding: 0 4px;
  }
  .nav-ctas .btn-primary {
    padding: 9px 16px !important;
    margin: 0 4px;
  }
  .hamburger {
    padding: 6px 4px !important;
    margin-left: 8px !important;
  }
}

/* ------------------------------------------------
   3) PAGES APP & BLOG — Forcer 1 colonne sur mobile
   pour les grilles inline (style="" haute priorité)
   ------------------------------------------------ */

/* IMPORTANT : on utilise EXACTEMENT la même structure de sélecteur dans les
   deux media queries pour garantir que la règle mobile (768px) gagne sur
   la règle tablette (1024px) — sinon la spécificité plus élevée de la
   règle tablette l'emporte même sur les petits écrans. */

/* Tablette : 2 colonnes pour les grilles inline */
@media (max-width: 1024px) {
  #page-app div[style*="grid-template-columns:repeat(4"],
  #page-app div[style*="grid-template-columns: repeat(4"],
  #page-app div[style*="grid-template-columns:repeat(3"],
  #page-app div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #blogGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #page-kori div[style*="grid-template-columns:repeat(4"],
  #page-kori div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile : 1 colonne pour TOUTES les grilles inline
   On utilise html en plus pour augmenter la spécificité et garantir
   que cette règle bat n'importe quelle règle tablette concurrente. */
@media (max-width: 768px) {
  html #page-app div[style*="grid-template-columns:repeat(4"],
  html #page-app div[style*="grid-template-columns: repeat(4"],
  html #page-app div[style*="grid-template-columns:repeat(3"],
  html #page-app div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html #blogGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html #page-kori div[style*="grid-template-columns:repeat(4"],
  html #page-kori div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  html #page-kori div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Filtres blog scrollables horizontalement si trop de catégories */
  .blog-filter { white-space: nowrap; }

  /* Page App — phones-wrap : afficher au moins le téléphone principal */
  .phones-wrap {
    display: flex !important;
    height: 380px;
    margin-top: 30px;
  }
  .phone-side { display: none; }
  .phone-main { width: 200px !important; position: relative !important; transform: none !important; }
  .phone-main img { height: auto !important; max-height: 360px; }
}

/* ------------------------------------------------
   4) HERO TITLE — Plus grand sur mobile
   "Ton prochain bon coin t'attend" paraissait
   trop petit, on l'agrandit nettement.
   ------------------------------------------------ */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.6rem, 10vw, 3.6rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
  }
}@media (max-width: 480px){
  .hero-title {
    font-size: clamp(2.3rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }}@media (max-width: 360px){
  .hero-title {
    font-size: clamp(2rem, 11vw, 2.6rem) !important;
  }}@media (max-width: 480px){
  .phones-wrap { height: 340px; }
  .phone-main { width: 180px !important; }
  .phone-main img { max-height: 320px; }}
/* ================== BLOG PAGINATION ================== */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 48px 0 16px;
  padding: 0 20px;
}
.pag-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--border, #E2E8F0);
  background: #fff;
  color: var(--text2, #475569);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.pag-btn:hover:not(:disabled):not(.active) {
  border-color: var(--primary, #2563EB);
  color: var(--primary, #2563EB);
  background: var(--primary-l, #EFF6FF);
}
.pag-btn.active {
  background: var(--primary, #2563EB);
  border-color: var(--primary, #2563EB);
  color: #fff;
  cursor: default;
}
.pag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pag-ellipsis {
  padding: 0 6px;
  color: var(--text3, #94A3B8);
  font-weight: 600;
}
.pag-info {
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text3, #94A3B8);
}@media (max-width: 600px){
  .blog-pagination { gap: 4px; }
  .pag-btn { min-width: 34px; height: 34px; font-size: 13px; padding: 0 8px; }}

/* ================================================================
   LE PLANCHER DE LISIBILITÉ SUR TÉLÉPHONE
   ================================================================

   La feuille d'origine RÉTRÉCIT le texte quand l'écran rétrécit :
   « En direct » tombe à 9 px sous 480, le nom d'une ville à 12, le
   libellé d'un champ de formulaire à 11. C'est l'inverse de ce qu'il
   faut. Sur un téléphone tenu à bout de bras, dans la rue, à Lomé, ces
   tailles-là ne se lisent pas — et ce sont justement les mots qui
   portent l'information : le pays, l'état d'une ville, ce qu'on demande
   dans un champ.

   La place ne manque pourtant pas : la grille des villes passe à deux
   colonnes sous 480 px, soit près de 175 px par carte. On rend donc aux
   libellés une taille lisible plutôt que de gagner des pixels dont
   personne n'a besoin.

   Ce bloc est ÉCRIT ICI et pas dans les règles d'origine, pour la même
   raison que le correctif de `.fade-up` : on garde la feuille du guide
   telle qu'elle est arrivée, et on ajoute par-dessus ce que la mesure
   au navigateur a montré. La différence se relit d'un coup d'oeil le
   jour d'une mise à jour du guide.

   Le seuil est 13 px : en dessous, un texte français en Plus Jakarta
   Sans devient pénible sur une dalle de téléphone d'entrée de gamme —
   et c'est le parc réel ici. */
@media (max-width: 768px) {
  .city-name { font-size: 15px; }
  .city-country { font-size: 13px; }
  .city-status { font-size: 12px; padding: 3px 9px; }
  .tag { font-size: 13px; padding: 5px 13px; }
  .pill { font-size: 13px; }
  .pricing-tier { font-size: 13px; }
  .pt-role { font-size: 13px; }
  .featured-label { font-size: 12px; }
  .form-group label, .contact-form label { font-size: 13px; }
  /* Le chiffre est gros, son unité minuscule : « +68% » sans « de
     visibilité moyenne » ne veut rien dire. */
  .why-metric span { font-size: 13px; }

  /* Le fil d'Ariane est un LIEN : à 12 px collé à sa ligne, il fait
     19 px de haut, soit moins que la pulpe d'un doigt. On l'agrandit
     et on lui donne de quoi être visé. */
  .breadcrumb { font-size: 13px; line-height: 1.6; }
  .breadcrumb a { display: inline-block; padding: 7px 2px; }
  .breadcrumb-sep { font-size: 13px; }
}

@media (max-width: 480px) {
  /* Les mêmes, contre les règles de la feuille d'origine qui les
     rapetissent encore à cette largeur. */
  .city-name { font-size: 15px; }
  .city-country { font-size: 13px; }
  .city-status { font-size: 12px; padding: 3px 8px; }
  .tag { font-size: 13px; padding: 5px 12px; }
}

/* ----------------------------------------------------------------
   UNE COLONNE DE GRILLE NE DOIT PAS ÊTRE POUSSÉE PAR SON CONTENU

   Par défaut, un enfant de grille a `min-width: auto` : sa colonne ne
   peut pas devenir plus étroite que son contenu le plus large. Une
   image de 1024 px de côté impose donc une colonne de 1024 px, même
   dans un téléphone de 390 — et comme la feuille masque le
   débordement (`overflow-x: hidden`, plus haut), rien ne le signale :
   le texte part simplement hors de l'écran, sans barre de défilement
   pour le rattraper.

   Mesuré sur « À Propos », dont la colonne de texte sortait entière du
   cadre dès que la maquette se chargeait. Le défaut ne se voyait pas
   ici, faute de réseau pour charger l'image — c'est exactement le
   genre de chose qu'on ne trouve qu'en mesurant. */
/* Le drapeau est un DESSIN, plus un caractère.
   Il était un emoji, que `text-align: center` de la carte centrait tout
   seul ; c'est maintenant un `<svg>` de largeur fixe, et un bloc de
   largeur fixe se colle à gauche. La carte a l'air cassée pour cette
   seule raison. */
.city-flag { display: flex; justify-content: center; }

.hero-inner > *, .about-grid > *, .app-showcase > *, .contact-grid > *,
.kori-grid > *, .features-grid > *, .values-grid > *, .why-grid > *,
.steps-grid > *, .cities-grid > *, .team-grid > *, .pricing-grid > *,
.partner-testimonials > *, .stats-grid > *, .testi-grid > *,
.form-row > *, .footer-grid > * { min-width: 0; }

/* ================================================================
   LES TROIS PAGES BOOST — PUSH, RÉGIE, LIENS COURTS
   ================================================================

   Elles répondaient à « qu'est-ce que c'est » et s'arrêtaient là. En
   répondant aussi à « comment ça marche », « qu'est-ce qu'il me faut » et
   « qu'est-ce que ça donne », elles ont eu besoin de quelques dispositions
   que le guide n'avait pas : une rangée de quatre étapes, un panneau posé
   dans le flux, une légende sous un chiffre d'illustration.

   Tout est NOMMÉ plutôt qu'écrit en style dans la page : les trois pages
   partagent ces blocs, et trois copies d'une même largeur de colonne,
   c'est deux qu'on oubliera le jour d'un ajustement.

   Ces règles sont EN FIN DE FICHIER, après les media queries du guide,
   et portent les leurs : une largeur de colonne posée ici serait sinon
   reprise par une media query écrite plus haut. */

/* La rangée de réassurance du bandeau bleu.
   PAS `.trust-item` : le bloc « EDIT » en tête de ce fichier le masque
   partout (`display:none !important`), et l'y ajouter rendrait une
   rangée invisible que personne ne saurait expliquer. */
.rassure { display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,0.82); }
.rassure-item { display: flex; align-items: center; gap: 7px; }
.rassure-item::before { content: '✓'; font-weight: 700; color: rgba(255,255,255,0.65); }

/* Un bouton d'appoint SUR le bandeau bleu : `.btn-outline` y serait bleu
   sur bleu foncé, donc illisible. */
.btn-sur-bleu { color: #fff; border-color: rgba(255,255,255,0.45); background: transparent; }
.btn-sur-bleu:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.75); }

/* Une section sur fond gris : c'est ce qui sépare deux idées sur une page
   longue, mieux qu'un filet. */
.section-grise { background: var(--bg2); }

/* Les largeurs de lecture, nommées une fois. */
.colonne-lecture { max-width: 900px; margin: 0 auto; }
.colonne-large   { max-width: 940px; margin: 0 auto; }
.colonne-etroite { max-width: 680px; margin: 0 auto; }

/* Quatre étapes plutôt que trois. */
.steps-grid.steps-quatre { grid-template-columns: repeat(4,1fr); }

/* Un panneau du bandeau, posé dans le flux : `.hero-float-card` est en
   position absolue, ce qui n'a de sens que sur l'illustration du héros. */
.carte-posee { position: static; transform: none; width: auto; margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.dash-stats.dash-deux { grid-template-columns: repeat(2,1fr); }
.dash-stats.dash-cinq { grid-template-columns: repeat(5,1fr); }

/* La seconde ligne d'un `.kb-item`.
   `.kb-item .kb-sous` et non `.kb-sous` seule : `.kb-text span` plus haut
   dans ce fichier vaut une classe ET un élément, donc l'emporterait sur
   une classe seule, et la ligne repartirait à 12 px en gris clair. */
.kb-item .kb-sous { font-size: 13.5px; color: var(--text2); line-height: 1.6; }

/* La légende d'un chiffre d'illustration.
   Elle n'est pas décorative : un tableau de bord d'exemple sans elle se
   lit comme une mesure, et ce serait faux. */
.legende { color: var(--text3); font-size: 12.5px; margin-top: 12px; text-align: center; }

/* Le composeur de lien court, posé dans le bandeau bleu. */
.composeur { max-width: 620px; margin: 28px auto 0; background: #fff;
  border-radius: var(--r-lg); padding: 10px; box-shadow: 0 18px 40px rgba(15,23,42,0.22);
  display: flex; gap: 8px; flex-wrap: wrap; }
.composeur input { flex: 1 1 260px; min-width: 0; margin: 0; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px;
  font-size: 14px; color: var(--text); outline: none; }
.composeur input:focus { border-color: var(--primary); }
.composeur button { flex: 0 0 auto; }

/* L'anatomie d'une adresse courte : avant, après. */
.anatomie { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.anatomie-bloc { background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; }
.anatomie-bloc.apres { border-color: var(--blue-200); background: var(--blue-50); }
.anatomie-quoi { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text3); margin-bottom: 6px; font-weight: 700; }
.anatomie-adresse { font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px; color: var(--text2); word-break: break-all; line-height: 1.7; }
.anatomie-bloc.apres .anatomie-quoi { color: var(--primary); }
.anatomie-bloc.apres .anatomie-adresse { color: var(--text); }
.anatomie-compte { font-size: 12px; margin-top: 8px; color: var(--text3); }
.anatomie-bloc.apres .anatomie-compte { color: var(--primary); font-weight: 600; }

/* L'adresse courte en grand, découpée par ses trois morceaux. */
.adresse-geante { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2.3rem); letter-spacing: -0.02em;
  color: var(--text); word-break: break-all; }
.adresse-geante .domaine { color: var(--text3); }
.adresse-geante .barre { color: var(--border2, var(--border)); }
.adresse-geante .code { color: var(--primary); }

/* Un encart de mise au point, sans la famille « admin ». */
.encart { background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; }
.encart-titre { font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 12px; }
/* `max-width` en `ch` et non en pixels : la ligne de lecture se compte en
   caractères, et c'est la règle que la recette mesure dans la police
   réelle depuis le tour du dessin. Un encart posé dans une colonne de
   900 px donnait 83 caractères par ligne. */
.encart p { color: var(--text2); line-height: 1.8; margin: 0; max-width: 75ch; }

@media (max-width: 1000px) {
  .steps-grid.steps-quatre { grid-template-columns: repeat(2,1fr); }
  .dash-stats.dash-cinq { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 700px) {
  .steps-grid.steps-quatre,
  .dash-stats.dash-deux, .dash-stats.dash-cinq,
  .anatomie { grid-template-columns: 1fr; }
  .composeur { padding: 8px; }
  /* Un tableau de comparaison ne se replie pas : il se fait défiler,
     parce que la colonne de gauche n'a de sens qu'en face des autres. */
  .admin-table-wrap { overflow-x: auto; }
  .admin-table { min-width: 560px; }
}

/* Les pastilles d'état d'un relevé : vert quand c'est posé, orange quand
   il manque. Elles portent un signe ET une couleur, parce qu'une couleur
   seule ne dit rien à qui ne la distingue pas. */
.kb-icon.kb-vert   { background: #DCFCE7; color: #15803D; font-weight: 700; }
.kb-icon.kb-orange { background: #FEF3C7; color: #B45309; font-weight: 700; }


/* ================================================================
   LE RELIEF DES PAGES BOOST
   ================================================================

   Les trois pages disaient ce qu'il fallait et se lisaient quand même
   comme un document : un bandeau bleu, puis cinq mille pixels de blanc
   et de gris pâle, toutes les cartes de la même forme et du même poids.
   Passé les trente premiers centimètres, plus rien n'attrapait l'œil, et
   une page qu'on ne parcourt pas ne vend rien.

   Ce bloc ne change AUCUN texte. Il remet du relief là où la page n'en
   avait plus : de la profondeur dans le bandeau, une section sombre au
   milieu du défilement, une couleur par carte quand les cartes parlent
   de choses différentes, et des maquettes d'écran qui MONTRENT ce que
   le produit envoie au lieu de le décrire.

   Les règles sont en fin de fichier, après les media queries du guide,
   et portent les leurs : une largeur de colonne posée ici serait sinon
   reprise par une media query écrite plus haut. */

/* ---- Le bandeau, avec de la profondeur -------------------------
   `.page-header` était un aplat de deux bleus. Trois arrêts et deux
   halos suffisent à lui donner un volume, et le `::before` du guide
   garde sa trame de points par-dessus. */
.entete-boost {
  padding: 138px 0 82px;
  background: linear-gradient(152deg, #0A1A4A 0%, var(--blue-800) 44%, var(--blue-600) 100%);
}
.entete-boost::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 380px at 82% 6%,  rgba(96,165,250,0.42), transparent 68%),
    radial-gradient(520px 340px at 10% 96%, rgba(14,165,233,0.26), transparent 70%);
}
.entete-boost h1 { text-shadow: 0 2px 22px rgba(2,10,40,0.28); }
.entete-boost p { color: rgba(255,255,255,0.80); max-width: 620px; }

/* La première section respire depuis le bleu plutôt que de commencer
   net sur du blanc. */
.section-ouverture { background: linear-gradient(180deg, var(--blue-50), #fff 380px); }

/* Un gris qui n'est plus tout à fait plat. */
.section-grise {
  background: radial-gradient(900px 420px at 50% -12%, var(--blue-50), transparent 70%), var(--bg2);
}

/* ---- La section sombre ------------------------------------------
   Une page longue a besoin d'un moment, et c'est lui. Même encre que
   le pied de page (`--text`), pour que les deux appartiennent à la
   même famille — elle se place au MILIEU du défilement, jamais juste
   avant le pied, où les deux se confondraient en un seul bloc noir. */
.section-sombre {
  background: var(--text); color: rgba(255,255,255,0.72);
  position: relative; overflow: hidden;
}
.section-sombre::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 400px at 78% 0%,   rgba(37,99,235,0.34), transparent 70%),
    radial-gradient(540px 340px at 6% 100%,  rgba(14,165,233,0.18), transparent 72%),
    radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
}
.section-sombre > .container { position: relative; z-index: 1; }
.section-sombre .headline { color: #fff; }
.section-sombre .headline span { color: var(--blue-300); }
.section-sombre .tag {
  color: #BFDBFE; background: rgba(96,165,250,0.14); border-color: rgba(147,197,253,0.34);
}
.section-sombre .tag-orange { color: #FDBA74; background: rgba(249,115,22,0.14); border-color: rgba(253,186,116,0.34); }
.section-sombre p { color: rgba(255,255,255,0.66); }
.section-sombre .legende { color: rgba(255,255,255,0.56); }
/* Les pilules par défaut sont blanches sur blanc : sur l'encre, elles
   feraient une rangée de confettis. */
.section-sombre .pill {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.78);
}
.section-sombre .pill-dot { background: var(--blue-300); }
/* Un `.encart` posé sur l'encre reste BLANC : un relevé qui ressemble à
   un document se lit comme un document. Son titre garde donc sa couleur
   d'origine, et seul celui d'une carte de nuit passe au blanc. */
.section-sombre .carte-nuit .encart-titre { color: #fff; }

/* La carte de la section sombre. */
.carte-nuit {
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl); padding: 26px; transition: all 0.25s;
}
.carte-nuit:hover {
  background: rgba(255,255,255,0.09); border-color: rgba(147,197,253,0.42);
  transform: translateY(-4px);
}
.carte-nuit .carte-titre {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: #fff; margin-bottom: 9px;
}
.carte-nuit .carte-texte { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.66); }
.carte-nuit .pill { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.75); }
.carte-nuit .pill-dot { background: var(--accent-n, var(--blue-300)); }

/* ---- Les chiffres en grand --------------------------------------
   Un chiffre de 2 rem posé dans une carte blanche se lit comme une
   ligne de tableau. Celui-ci se voit depuis l'autre bout de la page. */
.ruban-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.chiffre { text-align: center; }
.chiffre-val {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1;
  color: var(--blue-300);
  background: linear-gradient(135deg, #fff, var(--blue-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chiffre-quoi { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.62); }
.chiffre-val .unite { font-size: 0.5em; }
/* Le même ruban sur fond clair. */
.ruban-chiffres.clair .chiffre-val {
  color: var(--primary);
  background: linear-gradient(135deg, var(--blue-700), var(--blue-400));
}
.ruban-chiffres.clair .chiffre-quoi { color: var(--text2); }

/* ---- Une couleur par carte --------------------------------------
   Trois canaux qui ne se ressemblent pas avaient trois cartes
   identiques. La couleur se pose sur la carte, PAS dans la page :
   deux variables par modificateur, et le jeton, le filet du haut et
   la pastille des pilules suivent. */
.a-vert   { --accent: #16A34A; --accent-l: #F0FDF4; --accent-b: #BBF7D0; --accent-n: #4ADE80; }
.a-bleu   { --accent: #2563EB; --accent-l: #EFF6FF; --accent-b: #BFDBFE; --accent-n: #93C5FD; }
.a-ciel   { --accent: #0284C7; --accent-l: #F0F9FF; --accent-b: #BAE6FD; --accent-n: #7DD3FC; }
.a-orange { --accent: #EA580C; --accent-l: #FFF7ED; --accent-b: #FED7AA; --accent-n: #FDBA74; }
.a-violet { --accent: #7C3AED; --accent-l: #F5F3FF; --accent-b: #DDD6FE; --accent-n: #C4B5FD; }
.a-teal   { --accent: #0D9488; --accent-l: #F0FDFA; --accent-b: #99F6E4; --accent-n: #5EEAD4; }
.a-rose   { --accent: #DB2777; --accent-l: #FDF2F8; --accent-b: #FBCFE8; --accent-n: #F9A8D4; }

/* Le filet de couleur en tête de carte. */
.why-card.accent, .carte-nuit.accent, .value-card.accent { position: relative; overflow: hidden; }
.why-card.accent::before, .carte-nuit.accent::before, .value-card.accent::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-b));
}
.carte-nuit.accent::before { background: linear-gradient(90deg, var(--accent-n), transparent); }
.why-card.accent:hover { border-color: var(--accent-b); }
.value-card.accent { background: #fff; transition: all 0.25s; }
.value-card.accent:hover { border-color: var(--accent-b); box-shadow: var(--shadow); transform: translateY(-3px); }

/* Le jeton : l'icône dans un carré teinté, au lieu d'un trait nu. */
.jeton {
  width: 52px; height: 52px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-l, var(--blue-50)); color: var(--accent, var(--primary));
  border: 1px solid var(--accent-b, var(--blue-200)); margin-bottom: 16px;
}
.section-sombre .jeton {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
  color: var(--accent-n, var(--blue-300));
}

/* ---- Les quatre étapes, reliées ---------------------------------
   Le trait pointillé passe DERRIÈRE les cartes, à la hauteur du
   centre des pastilles (36 px de marge haute + 26 px de demi-pastille).
   Il disparaît dès que la rangée se replie : sur deux rangées, il
   relierait des étapes qui ne se suivent pas. */
.steps-reliees { position: relative; }
.steps-reliees::before {
  content: ''; position: absolute; top: 62px; left: 12%; right: 12%; height: 2px;
  background-image: linear-gradient(90deg, var(--blue-200) 55%, transparent 0);
  background-size: 11px 2px; z-index: 0;
}
.steps-reliees .step-card { position: relative; z-index: 1; }
.steps-reliees .step-num {
  background: linear-gradient(140deg, var(--blue-400), var(--blue-700));
  box-shadow: 0 10px 24px rgba(37,99,235,0.34);
}

/* ---- Le téléphone -----------------------------------------------
   Ce que reçoit l'invité, montré plutôt que raconté. Le bandeau du
   haut porte le nom de L'ORGANISATEUR : le message vient de lui, pas
   de la messagerie, et une maquette qui imiterait l'habillage d'un
   service tiers dirait le contraire.

   `.telephone` et non `.tel` : `wakabi.css` tient DÉJÀ un `.tel` et une
   `.bulle`, pour le même objet et avec d'autres mesures. Les deux
   feuilles ne se chargent jamais ensemble, donc rien ne casserait
   aujourd'hui ; mais le jour où ce bloc de balises sera recopié d'une
   page du guide vers une page Boost, il prendrait silencieusement
   l'autre habillage. Deux noms valent mieux qu'un piège. */
.telephone {
  width: 296px; max-width: 100%; margin: 0 auto;
  background: linear-gradient(160deg, #1E293B, #0F172A);
  border-radius: 40px; padding: 11px;
  box-shadow: 0 34px 70px rgba(2,10,40,0.45), 0 0 0 1px rgba(255,255,255,0.07) inset;
}
.telephone::before {
  content: ''; display: block; width: 86px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.22); margin: 2px auto 9px;
}
.telephone-ecran { background: #E9E4DD; border-radius: 30px; overflow: hidden; }
.telephone-tete {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: #fff; padding: 13px 14px; display: flex; align-items: center; gap: 10px;
}
.telephone-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
}
.telephone-nom { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.telephone-sous { font-size: 11px; color: rgba(255,255,255,0.72); }
.telephone-fil {
  padding: 16px 12px 20px; min-height: 236px;
  background-image: radial-gradient(rgba(15,23,42,0.045) 1px, transparent 1px);
  background-size: 16px 16px;
}
.message {
  background: #fff; border-radius: 15px 15px 15px 5px; padding: 11px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.14); font-size: 12.5px; line-height: 1.6; color: #111827;
}
.message + .message { margin-top: 10px; }
.message-image {
  height: 88px; border-radius: 10px; margin: -3px 0 9px;
  background: linear-gradient(135deg, var(--blue-600), var(--teal));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
}
.message-bouton {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid #E5E7EB;
  text-align: center; color: var(--primary); font-weight: 700; font-size: 12px;
}
.message-heure { font-size: 10.5px; color: #9CA3AF; text-align: right; margin-top: 6px; }
.message-heure .vu { color: #2563EB; font-weight: 700; }

/* ---- L'appel de fin ----------------------------------------------
   La dernière section était blanche, juste avant un pied de page noir.
   Elle ferme maintenant la page comme le bandeau l'ouvre. */
.appel-final {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500) 58%, #0EA5E9);
  color: #fff; position: relative; overflow: hidden;
}
.appel-final::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.appel-final > .container { position: relative; z-index: 1; }
.appel-final .headline { color: #fff; }
.appel-final .headline span { color: #BAE6FD; }
.appel-final p { color: rgba(255,255,255,0.82); }
.appel-final a:not(.btn) { color: #fff; text-decoration: underline; }

@media (max-width: 1000px) {
  /* Sur deux rangées, le trait relierait des étapes qui ne se suivent pas. */
  .steps-reliees::before { display: none; }
}
@media (max-width: 760px) {
  .entete-boost { padding: 112px 0 64px; }
}

/* Le téléphone à gauche, les trois canaux empilés à droite. */
.duo-canaux { display: grid; grid-template-columns: 330px 1fr; gap: 46px; align-items: start; }
.pile-canaux { display: grid; gap: 16px; }
@media (max-width: 900px) {
  .duo-canaux { grid-template-columns: 1fr; gap: 34px; }
}

/* La carte d'un canal : le jeton à gauche, le texte à droite. Empilée
   en colonne, elle devenait trois fois plus haute que large pour trois
   lignes de texte. */
.pile-canaux .carte-nuit { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; }
.pile-canaux .jeton { margin-bottom: 0; }
/* La ligne de lecture se compte en caractères, pas en pixels. */
.carte-nuit .carte-texte { max-width: 68ch; }
@media (max-width: 620px) {
  .pile-canaux .carte-nuit { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================
   LA GRILLE DES OFFRES — `?p=tarifs`
   ================================================================
   `guide.css` la fige à trois colonnes, ce qui va pour la page
   Partenaires et ses trois formules. Boost en vend quatre : la
   quatrième tombait seule sur une deuxième rangée, où elle se lisait
   comme un ajout plutôt que comme la dernière marche. Et les offres se
   règlent depuis l'administration : un compte écrit ici mentirait au
   premier ajout. */
.pricing-grid.pricing-auto { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
@media (max-width: 1040px) {
  .pricing-grid.pricing-auto { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pricing-grid.pricing-auto { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}