/* ============================================================
   KOKORO — glass-ui.css v1
   Librairie UI partagée des pages vitrines "Liquid Glass clair".
   Source : /rebrand-preview/glass-light/theme.css (maquette validée)
   MOINS : nav (.gnav*), footer (.gfooter*), blobs de fond (.bg-blobs)
   et fond de page body — ces zones appartiennent EXCLUSIVEMENT à
   /assets/glass-theme.css (+ components.js pour la bannière cookies).

   CASCADE OBLIGATOIRE SUR CHAQUE PAGE (l'ordre compte) :
     1. <link href="/assets/glass-ui.css?v=1">      ← cette librairie
     2. <style> inline spécifique page
     3. <link href="/assets/glass-theme.css?v=1">   ← DERNIER : il doit
        gagner sur nav / footer / bannière cookies / fond de page.

   NE JAMAIS ajouter ici de règle .main-nav, .page-footer, .gnav,
   .gfooter, .kokoro-consent-*, .kokoro-sticky-cta, .background-blobs,
   ni de background sur body/html.

   Breakpoints : 1080px (ajustements), 900px (tablette),
                 560px (mobile), 375px (petit mobile).
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES
   (aucun nom ne collisionne avec glass-theme.css : lui utilise
   --kk-* et --text-color/--primary-accent ; ici --blue/--ink/…)
   ------------------------------------------------------------ */
:root{
  /* Couleurs de marque */
  --blue: #3A86FF;
  --blue-deep: #2563EB;
  --violet: #B47FFF;
  --coral: #FF6B6B;
  --mint: #6EE7B7;
  --mint-deep: #0E9F6E;

  /* Encres (textes) */
  --ink: #16243D;
  --ink-soft: #3D4E70;
  --muted: #5A6B8C;

  /* Verre */
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.7);
  --glass-shadow: 0 20px 50px rgba(80,100,160,0.12);
  --glass-shadow-hover: 0 28px 64px rgba(80,100,160,0.18);

  /* Séparateurs hairline sur verre */
  --hairline: rgba(120,140,190,0.14);
  --hairline-strong: rgba(120,140,190,0.18);

  /* Rayons & easing */
  --radius: 22px;
  --radius-lg: 26px;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------
   2. RESET & BASE
   - PAS de background sur body : le ciel pastel + blobs statiques
     sont peints par glass-theme.css (body + body::before).
     Ne pas copier le bloc .bg-blobs des maquettes.
   - Les resets d'éléments (a/ul/button) sont en :where() : la
     bannière cookies injectée par components.js est stylée en
     :where() (spécificité 0) et serait écrasée par un sélecteur
     d'élément nu. :where() bat quand même les styles UA.
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:where(a){ text-decoration:none; color:inherit; }
:where(ul){ list-style:none; }
img{ max-width:100%; display:block; }
:where(button){ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}

/* ------------------------------------------------------------
   3. LAYOUT
   NB : le footer legacy contient aussi un div.container — garder le
   bloc CSS obligatoire .page-footer .container du CLAUDE.md dans le
   <style> inline de la page (plus spécifique, il garde la main).
   ------------------------------------------------------------ */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

.section{ padding:56px 0; }

/* En-tête de section : eyebrow + h2 + paragraphe */
.section-head{
  max-width:620px;
  margin-bottom:44px;
}
.section-head .eyebrow,
.section-head .label{ display:block; margin-bottom:14px; }
.section-head h2{
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.15;
  margin-bottom:14px;
}
.section-head p{
  font-size:16.5px;
  line-height:1.65;
  color:var(--muted);
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* Grilles de cartes */
.grid-2, .grid-3, .grid-4{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

/* Utilitaires */
.center{ text-align:center; }
.accent{ color:var(--blue); }
.text-muted{ color:var(--muted); }

/* Paragraphe d'intro (sous un h1) */
.lead{
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  max-width:620px;
}

/* ------------------------------------------------------------
   4. TYPO UTILITAIRE — eyebrow / label (sur-titre uppercase)
   (couleur ré-affirmée en §20 : glass-theme passe .eyebrow en bleu
   pour les pages legacy, la maquette validée le veut muted)
   ------------------------------------------------------------ */
.eyebrow, .label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ------------------------------------------------------------
   5. SURFACES DE VERRE
   .glass        = surface de base (cartes, barres) — valeurs maquette
   .glass-panel  = panneau fort (dashboard, CTA final) : + opaque,
                   + blur, liseré interne lumineux, grand rayon
   .glass-card   = .glass + padding + lift au hover (cartes de grilles)
   ------------------------------------------------------------ */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius);
}

/* Sélecteur doublé VOLONTAIREMENT : glass-theme.css (chargé après)
   aplatit .glass-panel (liste des cartes legacy : fond sans blur,
   rayon 22px). (0,2,0) > (0,1,0) → la version maquette gagne. */
.glass-panel.glass-panel{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.9);
}

.glass-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  flex-direction:column;
}

/* Contenu type d'une carte */
.glass-card h3{
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.glass-card > p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:22px;
}
.glass-card .btn{ margin-top:auto; align-self:flex-start; }

/* Ligne méta d'une carte (chiffre accentué + texte) */
.card-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.card-meta .accent-blue{ color:var(--blue); }
.card-meta .accent-violet{ color:#8A5CF6; }
.card-meta .accent-coral{ color:#E84D4D; }
.card-meta .accent-mint{ color:var(--mint-deep); }

/* En-tête de carte : icône à gauche, pill de statut à droite */
.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:20px;
}

/* Icône carrée glossy (mettre un svg stroke à l'intérieur) */
.card-icon{
  width:52px; height:52px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-icon svg{
  width:24px; height:24px;
  stroke:#fff;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.card-icon.i-blue{
  background:linear-gradient(135deg, #6CA8FF, var(--blue));
  box-shadow:0 10px 22px rgba(58,134,255,0.32);
}
.card-icon.i-violet{
  background:linear-gradient(135deg, #CBA4FF, var(--violet));
  box-shadow:0 10px 22px rgba(180,127,255,0.32);
}
.card-icon.i-coral{
  background:linear-gradient(135deg, #FF9D9D, var(--coral));
  box-shadow:0 10px 22px rgba(255,107,107,0.32);
}
.card-icon.i-mint{
  background:linear-gradient(135deg, #7BEFC8, var(--mint-deep));
  box-shadow:0 10px 22px rgba(14,159,110,0.32);
}

/* Cartes "étape" (méthode) : numéro en dégradé + semaine */
.step-num{
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  background:linear-gradient(110deg, var(--blue), var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:16px;
}
.step-week{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
}

/* ------------------------------------------------------------
   6. BOUTONS — pill
   .btn-primary   = bleu plein (CTA)
   .btn-secondary = verre (alias .btn-glass)
   .btn-sm        = compact (cartes)
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 30px;
  border-radius:100px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 12px 28px rgba(58,134,255,0.35);
}
.btn-primary:hover{
  background:#2F78F0;
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(58,134,255,0.42);
}
.btn-secondary, .btn-glass{
  background:rgba(255,255,255,0.6);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.8);
  color:var(--ink);
  box-shadow:0 10px 26px rgba(80,100,160,0.1);
}
.btn-secondary:hover, .btn-glass:hover{
  background:rgba(255,255,255,0.85);
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(80,100,160,0.16);
}
.btn-sm{
  padding:10px 20px;
  font-size:13.5px;
}

/* ------------------------------------------------------------
   7. REVEAL AU SCROLL
   Ajouter class="reveal" + style="--d:.15s" pour la cascade.
   ATTENTION : c'est le JS inline de la page qui ajoute .in-view
   (IntersectionObserver, à copier depuis partials.html de la
   maquette). components.js ne gère QUE .scroll-fade/.is-visible
   (legacy) — sans JS de page, un .reveal reste invisible.
   ------------------------------------------------------------ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s ease, transform .85s var(--ease-out);
  transition-delay:var(--d, 0s);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* Lift au hover des cartes — déclaré APRÈS .reveal (même ordre que la
   maquette de référence : le hover garde sa réactivité .45s) */
.glass-card{
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.glass-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--glass-shadow-hover);
}
.glass-card.no-lift, .glass-card.no-lift:hover{
  transform:none;
  box-shadow:var(--glass-shadow);
}

/* ------------------------------------------------------------
   8. BADGES, POINTS DE STATUT, PILLS
   ------------------------------------------------------------ */
/* Badge pill de verre (ex : badge hero) — mettre .dot + <span>texte</span> */
.badge, .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 18px;
  border-radius:100px;
  background:rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 8px 22px rgba(80,100,160,0.08);
}
.badge > span:not(.dot), .hero-badge > span:not(.dot){
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* Points de statut colorés */
.dot{
  width:7px; height:7px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
  background:var(--mint-deep);
}
.badge .dot, .hero-badge .dot{
  box-shadow:0 0 0 3px rgba(110,231,183,0.35);
  animation:pulse 2.4s ease-in-out infinite;
}
.dot-mint{ background:var(--mint-deep); animation:pulse 2.4s ease-in-out infinite; }
.dot-blue{ background:var(--blue); animation:pulse 2.4s ease-in-out infinite; }
.dot-coral{ background:var(--coral); animation:pulse 2.4s ease-in-out infinite; }
.dot-grey{ background:#9AA8C4; }

/* Pills de statut (cartes agents, tableaux…) */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:100px;
  font-size:11.5px;
  font-weight:600;
}
.status-pill .dot{ width:6px; height:6px; }
.status-live{
  background:rgba(110,231,183,0.22);
  color:var(--mint-deep);
}
.status-live .dot{ background:var(--mint-deep); animation:pulse 2.4s ease-in-out infinite; }
.status-deploy{
  background:rgba(58,134,255,0.13);
  color:var(--blue-deep);
}
.status-deploy .dot{ background:var(--blue); animation:pulse 2.4s ease-in-out infinite; }
.status-ready{
  background:rgba(90,107,140,0.12);
  color:var(--muted);
}
.status-ready .dot{ background:#9AA8C4; }
.status-coral{
  background:rgba(255,107,107,0.16);
  color:#E84D4D;
}
.status-coral .dot{ background:var(--coral); }

/* Petite pill delta (ex : "↑ +12% ce mois") */
.delta-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:100px;
  background:rgba(110,231,183,0.22);
  font-size:12px;
  font-weight:700;
  color:var(--mint-deep);
}

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(110,231,183,0.35); }
  50%{ box-shadow:0 0 0 6px rgba(110,231,183,0.15); }
}

/* ------------------------------------------------------------
   9. BREADCRUMB (pages intérieures, séparateur ›)
   (glass-theme restyle aussi .breadcrumb a/span pour les articles
   legacy — mêmes couleurs, aucune action requise)
   ------------------------------------------------------------ */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:28px;
}
.breadcrumb a{
  color:var(--muted);
  transition:color .25s ease;
}
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--ink); }

/* ------------------------------------------------------------
   10. HERO
   .hero      = hero home (2 colonnes possibles avec .hero-grid)
   .page-hero = hero compact des pages intérieures
   ------------------------------------------------------------ */
.hero{
  position:relative;
  padding:172px 0 80px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:64px;
  align-items:center;
}
.hero .hero-badge, .hero .badge{ margin-bottom:28px; }
.hero h1{
  font-size:clamp(2.6rem, 4.6vw, 4.15rem);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin-bottom:24px;
}
/* Mot accentué en dégradé bleu : <em> dans le h1
   (dégradé ré-affirmé en §20 : glass-theme pose son propre dégradé) */
.hero h1 em, .page-hero h1 em{
  font-style:normal;
  background:linear-gradient(110deg, var(--blue) 10%, #7AA8FF 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  max-width:480px;
  margin-bottom:36px;
}
.hero-ctas{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.hero-note{
  font-size:13px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.hero-note i{
  font-style:normal;
  opacity:.5;
}
.hero-visual{
  position:relative;
  z-index:1;
}

.page-hero{
  position:relative;
  padding:160px 0 40px;
}
.page-hero h1{
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.035em;
  margin-bottom:20px;
}
.page-hero .badge, .page-hero .hero-badge{ margin-bottom:24px; }
.page-hero .lead{ margin-bottom:32px; }

/* ------------------------------------------------------------
   11. FORMES 3D GLOSSY (SVG)
   Markup SVG exact à copier depuis partials.html (SHAPES START/END).
   Le conteneur parent doit être en position:relative (ex : .hero).
   Positions par défaut = celles de la maquette home ; surcharger en
   inline (style="top:…;left:…;width:…") pour les autres pages.
   data-depth="N" = parallaxe souris : gérée par le JS inline de la
   page (copier depuis partials.html), PAS par components.js.
   ------------------------------------------------------------ */
.shape{
  position:absolute;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.shape svg{ display:block; overflow:visible; width:100%; height:auto; }
.shape-inner{
  animation:float 8s ease-in-out infinite;
}
.shape-torus{ top:96px; right:-54px; width:190px; }
.shape-torus .shape-inner{ animation-duration:9.5s; }
.shape-sphere{ bottom:6%; left:42.5%; width:120px; }
.shape-sphere .shape-inner{ animation-duration:7.5s; animation-delay:-2.5s; }
.shape-cone{ top:140px; left:-30px; width:96px; }
.shape-cone .shape-inner{ animation-duration:8.5s; animation-delay:-4s; }
.shape-pill, .shape-capsule{ top:46%; right:38%; width:74px; }
.shape-pill .shape-inner, .shape-capsule .shape-inner{ animation-duration:10s; animation-delay:-1s; }

@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(3deg); }
}

/* ------------------------------------------------------------
   12. CHIPS FLOTTANTES (notifications de verre autour d'un visuel)
   <div class="float-chip"><span class="chip-icon chip-mint">svg</span>
   <span><strong>Titre</strong><small>sous-texte</small></span></div>
   Positionner en inline (style="top:…;right:…") sur un parent relative.
   ------------------------------------------------------------ */
.float-chip{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 18px;
  border-radius:16px;
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 16px 40px rgba(80,100,160,0.18);
}
.float-chip .chip-icon{
  width:32px; height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.float-chip strong{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.float-chip small{
  font-size:11px;
  color:var(--muted);
}
.chip-icon.chip-mint{
  background:linear-gradient(135deg, #34D399, var(--mint-deep));
  box-shadow:0 6px 14px rgba(14,159,110,0.3);
}
.chip-icon.chip-coral{
  background:linear-gradient(135deg, #FF8E8E, var(--coral));
  box-shadow:0 6px 14px rgba(255,107,107,0.3);
}
.chip-icon.chip-blue{
  background:linear-gradient(135deg, #6CA8FF, var(--blue));
  box-shadow:0 6px 14px rgba(58,134,255,0.3);
}
.chip-icon.chip-violet{
  background:linear-gradient(135deg, #CBA4FF, var(--violet));
  box-shadow:0 6px 14px rgba(180,127,255,0.3);
}

/* ------------------------------------------------------------
   13. TRUST BAR / STATS — compteurs animés
   <div class="trust-bar glass reveal">
     <div class="trust-item">
       <div class="trust-value"><span class="accent">+</span><span data-count="30">0</span></div>
       <div class="stat-label">systèmes IA déployés</div>
     </div> × 4
   </div>
   COMPTEURS — UN SEUL MÉCANISME PAR ÉLÉMENT :
   - .trust-value + [data-count] + JS inline de page (recommandé,
     mécanisme maquette) ;
   - OU .stat-number en texte simple final ("+30") SANS data-count :
     components.js l'anime tout seul (il cible .trust-bar .stat-number
     et réécrit textContent → il APLATIRAIT les <span> internes).
   Ne jamais mélanger les deux sur le même élément.
   ------------------------------------------------------------ */
.trust-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:34px 24px;
}
.trust-item{
  text-align:center;
  padding:4px 18px;
  position:relative;
}
.trust-item + .trust-item::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  height:54px;
  width:1px;
  background:var(--hairline-strong);
}
.stat-number, .trust-value{
  font-size:38px;
  font-weight:800;
  letter-spacing:-0.04em;
  color:var(--ink);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat-label, .trust-label{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-top:6px;
}

/* ------------------------------------------------------------
   14. TABLEAUX DE VERRE
   <div class="glass-panel table-wrap reveal">
     <table class="glass-table"> thead > th … tbody > td … </table>
   </div>
   ------------------------------------------------------------ */
.table-wrap{
  overflow-x:auto;
  padding:8px 20px;
}
.glass-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.glass-table th{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:18px 16px 14px;
  border-bottom:1px solid var(--hairline-strong);
  white-space:nowrap;
}
.glass-table td{
  padding:16px;
  border-bottom:1px solid var(--hairline);
  color:var(--ink-soft);
  line-height:1.5;
  vertical-align:top;
}
.glass-table tbody tr:last-child td{ border-bottom:none; }
.glass-table tbody tr{ transition:background .25s ease; }
.glass-table tbody tr:hover{ background:rgba(255,255,255,0.45); }
.glass-table td strong{ color:var(--ink); font-weight:700; }
.glass-table .col-accent{ color:var(--blue); font-weight:700; }

/* ------------------------------------------------------------
   15. ACCORDÉON FAQ — zéro JS (details/summary)
   <div class="faq-list">          ← wrapper .faq-list OBLIGATOIRE
     <details class="faq-item">
       <summary>Question ?</summary>
       <div class="faq-a"><p>Réponse…</p></div>
     </details> × n
   </div>
   Sélecteur .faq-list .faq-item VOLONTAIRE : glass-theme.css (chargé
   après) aplatit .faq-item nu pour les FAQ legacy du blog —
   (0,2,0) > (0,1,0), la version maquette gagne ici.
   ------------------------------------------------------------ */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:760px;
}
.faq-list .faq-item{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--blue);
  flex-shrink:0;
  transition:transform .35s var(--ease-out);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--blue-deep); }
.faq-a{
  padding:0 24px 22px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--muted);
}
.faq-a p + p{ margin-top:10px; }

/* ------------------------------------------------------------
   16. PANNEAU CTA FINAL — <div class="glass cta-panel reveal">
   eyebrow + h2 + p + .btn-primary, halo radial bleu intégré.
   ------------------------------------------------------------ */
.cta-panel{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:72px 48px;
  border-radius:var(--radius-lg);
}
.cta-panel::before{
  content:"";
  position:absolute;
  width:420px; height:420px;
  top:-220px; left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(58,134,255,0.18) 0%, rgba(58,134,255,0) 70%);
  pointer-events:none;
}
.cta-panel .eyebrow, .cta-panel .label{ display:block; margin-bottom:16px; }
.cta-panel h2{
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.12;
  max-width:640px;
  margin:0 auto 16px;
}
.cta-panel > p{
  font-size:16.5px;
  color:var(--muted);
  max-width:520px;
  margin:0 auto 34px;
  line-height:1.65;
}

/* ------------------------------------------------------------
   17. RESPONSIVE
   (les règles .gnav / .gfooter de la maquette ont été retirées :
   nav et footer responsive = glass-theme.css)
   ------------------------------------------------------------ */
@media (max-width: 1080px){
  .hero-grid{ gap:48px; }
  .shape-torus{ right:-20px; width:150px; }
}

@media (max-width: 900px){
  .hero{ padding-top:140px; }
  .hero-grid{
    grid-template-columns:1fr;
    gap:72px;
  }
  .hero-sub{ max-width:560px; }
  .hero-visual{ max-width:560px; }
  .page-hero{ padding-top:140px; }
  .shape-sphere{ left:auto; right:6%; bottom:-40px; }
  .shape-pill, .shape-capsule{ display:none; }
  .trust-bar{ grid-template-columns:repeat(2, 1fr); row-gap:30px; }
  .trust-item:nth-child(3)::before{ display:none; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 560px){
  .container{ padding:0 20px; }
  .hero{ padding-top:120px; }
  .hero h1{ font-size:2.35rem; }
  .hero-sub{ font-size:16px; }
  .page-hero{ padding-top:120px; }
  .page-hero h1{ font-size:2rem; }
  .btn{ padding:14px 24px; font-size:14px; }
  .grid-4{ grid-template-columns:1fr; }
  .trust-bar{ grid-template-columns:1fr 1fr; padding:26px 10px; }
  .stat-number, .trust-value{ font-size:28px; }
  .trust-item{ padding:4px 8px; }
  .trust-item + .trust-item::before{ display:none; }
  .cta-panel{ padding:52px 24px; }
  .shape-torus{ width:110px; right:-36px; top:80px; }
  .shape-cone{ width:64px; left:-22px; }
  .glass-table th, .glass-table td{ padding:12px; font-size:13.5px; }
  .table-wrap{ padding:4px 12px; }
}

@media (max-width: 375px){
  .container{ padding:0 16px; }
  .hero h1{ font-size:2.05rem; }
  .page-hero h1{ font-size:1.8rem; }
  .hero-ctas .btn{ width:100%; }
  .glass-card{ padding:22px 20px; }
  .stat-number, .trust-value{ font-size:24px; }
  .cta-panel{ padding:44px 18px; }
  .faq-item summary{ padding:18px 18px; font-size:14.5px; }
  .faq-a{ padding:0 18px 18px; }
}

/* ------------------------------------------------------------
   18. ACCESSIBILITÉ — mouvement réduit
   (glass-theme.css a son propre bloc équivalent ; on garde le
   nôtre pour que .reveal reste visible même seul)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    transition-delay:0s !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   19. (réservé — ne pas ajouter de styles nav/footer/cookies ici)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   20. GARDE-FOUS vs glass-theme.css (chargé EN DERNIER)
   glass-theme restyle des classes génériques pour convertir les
   pages legacy. À spécificité égale il gagnerait (ordre de
   cascade) : on ré-affirme ici les valeurs de la maquette validée
   avec une spécificité supérieure. NE PAS retirer ces règles.
   ------------------------------------------------------------ */

/* glass-theme transforme .trust-bar en bande dégradée bord à bord
   (legacy home). La trust-bar maquette est une carte de verre. */
.trust-bar.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius);
}

/* glass-theme passe .stat-number en dégradé encre→bleu avec
   -webkit-text-fill-color:transparent (héritée : elle rendrait
   transparents les <span> internes, dont .accent). currentColor
   se résout par élément → le "+" .accent reste bleu. */
.trust-bar .stat-number, .trust-bar .trust-value{
  background-image:none;
  -webkit-text-fill-color:currentColor;
  color:var(--ink);
}

/* glass-theme passe .eyebrow en bleu (lisibilité legacy) ;
   la maquette validée veut un sur-titre muted. */
.eyebrow.eyebrow, .label.label{ color:var(--muted); }

/* glass-theme pose son propre dégradé (bleu→violet) sur
   .hero h1 em / .page-hero h1 em ; la maquette = bleu pur. */
body .hero h1 em, body .page-hero h1 em{
  background-image:linear-gradient(110deg, var(--blue) 10%, #7AA8FF 90%);
}