/* ============================================================
   STYLE.CSS — Charte graphique OTYP v3
   ============================================================
   SOMMAIRE :
   1.  Variables CSS
   2.  Reset & base
   3.  Typographie (Inter + Syne)
   4.  Accessibilité WCAG AAA
   5.  Boutons
   6.  Icônes SVG
   7.  Navigation
   8.  Hero (2 colonnes desktop)
   9.  Widget triangle d'aide au choix
   10. Section packs
   11. Section pourquoi OTYP
   12. Section comment ça marche
   13. Bandeau confiance
   14. Footer
   15. Composants réutilisables
   16. Animations
   17. Utilitaires
   18. Responsive mobile
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS
   👉 Modifie ces valeurs pour changer toute la charte.
   ============================================================ */
:root {
  /* Verts — identité principale */
  --c-foret-nuit:   #1a4a36;
  --c-foret:        #2e6b50;
  --c-fougere:      #4a9470;
  --c-mousse:       #d4ede3;
  --c-mousse-light: #edf7f2;

  /* Neutres organiques */
  --c-ardoise-noire: #1c2422;
  --c-ardoise:       #2c3b35;
  --c-ivoire:        #f5f2eb;
  --c-lin:           #e8e4db;
  --c-texte:         #1e2d28;
  --c-texte-doux:    #4a6355;

  /* Accents */
  --c-terre:        #b85c1a;
  --c-terre-hover:  #d4761f;
  --c-bleu-data:    #1e6b8a;
  --c-rouge:        #c0392b;
  --c-vert-hausse:  #2e7d32;

  /* Typographie
     Inter      : corps de texte (lisibilité maximale, WCAG)
     Syne       : titres desktop uniquement
     system-ui  : fallback universel                         */
  --font-titre: 'Syne', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-corps: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Crimson Pro', Georgia, serif;

  /* Layout */
  --max-width:  1200px;
  --rayon:      8px;
  --rayon-lg:   14px;
  --ombre:      0 2px 16px rgba(26,74,54,0.08);
  --ombre-md:   0 4px 32px rgba(26,74,54,0.12);
  --transition: 0.22s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  {
  font-family: var(--font-corps);
  background:  var(--c-ivoire);
  color:       var(--c-texte);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

.conteneur {
  max-width: var(--max-width);
  margin:  0 auto;
  padding: 0 2rem;
}


/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */

/* Sur mobile : Inter pour tout (Syne trop étirée sur petits écrans) */
h1, h2, h3, h4 {
  font-family: var(--font-corps);
  font-weight: 700;
  line-height: 1.2;
}

/* Sur desktop : Syne pour les titres */
@media (min-width: 641px) {
  h1, h2, h3 { font-family: var(--font-titre); }
}

.section-titre {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--c-foret-nuit);
  margin-bottom: 0.75rem;
}
.section-titre.clair { color: #eef5f1; }

.section-sous-titre {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--c-texte-doux);
  font-style: italic;
  max-width: 560px;
  margin: 0 auto;
}

.etiquette-section {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-foret);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.etiquette-section::before,
.etiquette-section::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--c-fougere);
}

.section-entete { text-align: center; margin-bottom: 3rem; }


/* ============================================================
   4. ACCESSIBILITÉ — WCAG AAA
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--c-terre);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   5. BOUTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--rayon);
  font-family: var(--font-corps);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:active  { transform: scale(0.97); }
.btn-primaire {
  background: var(--c-terre); color: #fff5ed; border-color: var(--c-terre);
}
.btn-primaire:hover {
  background: var(--c-terre-hover); border-color: var(--c-terre-hover);
}
.btn-secondaire {
  background: transparent; color: var(--c-foret); border-color: var(--c-foret);
}
.btn-secondaire:hover { background: var(--c-foret); color: #fff; }
.btn-fantome {
  background: transparent; color: #e8ede9; border-color: rgba(232,237,233,0.45);
}
.btn-fantome:hover {
  background: rgba(232,237,233,0.12); border-color: rgba(232,237,233,0.75);
}
.btn-petit { padding: 8px 18px; font-size: 0.85rem; }
.btn-plein  { width: 100%; justify-content: center; }


/* ============================================================
   6. ICÔNES SVG
   ============================================================ */
.icone {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; vertical-align: middle;
}
.icone-sm { width: 18px; height: 18px; }
.icone-lg { width: 28px; height: 28px; }
.icone-terre { stroke: var(--c-terre); }
.icone-vert  { stroke: var(--c-fougere); }


/* ============================================================
   7. NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(28,36,34,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(74,148,112,0.18);
  transition: box-shadow var(--transition);
}
.nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.28); }

.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  height: 72px; gap: 1.5rem;
}

/* Logo agrandi */
.nav-logo img {
  height: 48px;
  width: auto;
  min-width: 80px;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  display: block;
  aspect-ratio: auto;
  will-change: auto;
  transform: translateZ(0); /* force GPU layer — évite le reflow */
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 80px;
}
.nav-liens { display: flex; align-items: center; gap: 1.75rem; }
.nav-liens a {
  font-size: 0.88rem; font-weight: 500;
  color: rgba(232,237,233,0.78);
  letter-spacing: 0.03em;
  transition: color var(--transition);
  position: relative;
}
.nav-liens a::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--c-fougere);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
}
.nav-liens a:hover       { color: #fff; }
.nav-liens a:hover::after,
.nav-liens a.actif::after { transform: scaleX(1); }
.nav-liens a.actif        { color: #fff; }

.nav-langue { display: flex; gap: 4px; }
.nav-langue button {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(232,237,233,0.55);
  font-size: 0.78rem; font-weight: 500;
  padding: 3px 8px; border-radius: 4px;
  cursor: pointer; font-family: var(--font-corps);
  transition: all var(--transition);
}
.nav-langue button:hover,
.nav-langue button.actif {
  color: #e8f5ee;
  border-color: var(--c-fougere);
  background: rgba(74,148,112,0.15);
}

.nav-cta { display: flex; gap: 10px; align-items: center; }

/* Lien nav en construction — badge "Bientôt" */
.nav-bientot {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;  /* Empêche le clic */
  position: relative;
}

.badge-bientot {
  font-size: 0.6rem;
  font-weight: 600;
  background: rgba(74,148,112,0.2);
  border: 1px solid rgba(74,148,112,0.35);
  color: var(--c-fougere);
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
}

/* Bouton installer PWA */
.btn-installer {
  display: none;
  align-items: center; gap: 6px;
  background: rgba(74,148,112,0.15);
  border: 1px solid rgba(74,148,112,0.35);
  color: var(--c-fougere);
  font-size: 0.78rem; font-weight: 500;
  padding: 5px 12px; border-radius: 6px;
  cursor: pointer; font-family: var(--font-corps);
  transition: all var(--transition); white-space: nowrap;
}
.btn-installer.visible { display: inline-flex; }
.btn-installer:hover { background: rgba(74,148,112,0.25); }

/* Burger */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.burger span {
  display: block; width: 24px; height: 2px;
  background: #e8ede9; border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.nav-mobile {
  display: none; flex-direction: column;
  background: var(--c-ardoise-noire);
  border-top: 1px solid rgba(74,148,112,0.15);
  padding: 0.5rem 2rem 1.5rem;
}
.nav-mobile.ouvert { display: flex; }
.nav-mobile a {
  color: rgba(232,237,233,0.8); font-size: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--transition);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--c-fougere); }
.nav-mobile-langue { display: flex; gap: 8px; padding: 1rem 0 0.5rem; }
.nav-mobile-langue button {
  background: transparent;
  border: 1px solid rgba(74,148,112,0.35);
  color: rgba(232,237,233,0.6);
  font-size: 0.82rem; padding: 4px 12px;
  border-radius: 4px; cursor: pointer;
  font-family: var(--font-corps);
}
.nav-mobile-langue button.actif {
  color: #e8f5ee;
  background: rgba(74,148,112,0.2);
  border-color: var(--c-fougere);
}


/* ============================================================
   8. HERO — 2 colonnes desktop, graphique à droite
   ============================================================ */
.hero {
  background: var(--c-ardoise-noire);
  padding: 100px 0 0;
  position: relative; overflow: hidden;
  min-height: 100vh;
}

/* Dégradés radials de fond */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 55%, rgba(46,107,80,0.13) 0%, transparent 50%),
    radial-gradient(circle at 85% 25%, rgba(30,107,138,0.07) 0%, transparent 45%);
  pointer-events: none;
}

/* Ligne déco verticale gauche */
.hero::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(to bottom, transparent, var(--c-fougere), transparent);
  opacity: 0.35;
}

/* Layout 2 colonnes */
.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: center;
  min-height: calc(100vh - 100px);
  padding-bottom: 4rem;
}

/* Colonne texte gauche */
.hero-contenu { max-width: 620px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(74,148,112,0.15);
  border: 1px solid rgba(74,148,112,0.35);
  color: var(--c-fougere);
  font-size: 0.75rem; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  margin-bottom: 1.5rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  background: var(--c-fougere); border-radius: 50%;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800; color: #eef5f1;
  line-height: 1.1; margin-bottom: 0.6rem;
}
.hero h1 .accent { color: var(--c-fougere); }

.hero-sous-titre {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: rgba(212,237,227,0.72);
  margin-bottom: 1.4rem; font-style: italic;
}

.hero-description {
  font-size: 0.96rem;
  color: rgba(212,237,227,0.58);
  margin-bottom: 2.2rem;
  line-height: 1.8; max-width: 500px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2.8rem; }

.hero-metriques {
  display: flex; gap: 2.2rem; flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(74,148,112,0.2);
}
.hero-metrique-valeur {
  font-family: var(--font-titre);
  font-size: 1.6rem; font-weight: 700;
  color: #eef5f1; line-height: 1;
}
.hero-metrique-label {
  font-size: 0.75rem;
  color: rgba(212,237,227,0.5);
  margin-top: 3px; letter-spacing: 0.03em;
}

/* Colonne graphique droite */
.hero-graphique {
  height: calc(100vh - 140px);
  min-height: 480px;
  max-height: 700px;
  position: relative;
}

/* Card contenant le graphique */
.hero-graphique-card {
  background: rgba(44,59,53,0.6);
  border: 1px solid rgba(74,148,112,0.2);
  border-radius: var(--rayon-lg);
  padding: 1.25rem;
  height: 100%;
  display: flex; flex-direction: column;
  backdrop-filter: blur(6px);
}

.hero-graphique-titre {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(212,237,227,0.65);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Sélecteur de polymères (checkboxes discrètes) */
.poly-selector {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 0.75rem;
}
.poly-btn {
  font-size: 0.7rem; font-weight: 500;
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid rgba(74,148,112,0.25);
  background: transparent;
  color: rgba(212,237,227,0.5);
  cursor: pointer; font-family: var(--font-corps);
  transition: all var(--transition);
}
.poly-btn.on {
  background: rgba(74,148,112,0.2);
  border-color: var(--c-fougere);
  color: rgba(212,237,227,0.9);
}

.hero-graphique-canvas { flex: 1; position: relative; min-height: 0; }
.hero-graphique-canvas canvas { width: 100% !important; height: 100% !important; }

.hero-graphique-note {
  font-size: 0.68rem;
  color: rgba(212,237,227,0.35);
  margin-top: 0.5rem; text-align: center;
}

/* Bandeau ticker */
.ticker-bandeau {
  background: var(--c-ardoise);
  border-top: 1px solid rgba(74,148,112,0.15);
  border-bottom: 1px solid rgba(74,148,112,0.15);
  padding: 0;
  display: flex;
  align-items: stretch;
  /* PAS de overflow:hidden ici — ça cachait le titre */
}

/* Titre explicatif fixe à gauche */
.ticker-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 1rem 9px 1.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(212,237,227,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-right: 1px solid rgba(74,148,112,0.25);
  white-space: nowrap;
  background: var(--c-ardoise);
  position: relative;
  z-index: 10;            /* ← Passe AU-DESSUS de la piste animée */
}
.ticker-titre svg { stroke: var(--c-fougere); flex-shrink: 0; }

/* Wrapper de la piste — overflow hidden uniquement ici */
.ticker-piste-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;             /* ← Sous le titre */
  isolation: isolate;     /* ← Confine le contexte de rendu de l'animation */
}

/* Piste de défilement */
.ticker-piste {
  display: flex;
  width: max-content;
  animation: defilement 32s linear infinite;
}
.ticker-piste:hover { animation-play-state: paused; }
@keyframes defilement {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 1.75rem;
  border-right: 1px solid rgba(74,148,112,0.15);
  white-space: nowrap;
}
.ticker-nom  { font-size: 0.78rem; font-weight: 500; color: rgba(212,237,227,0.6); letter-spacing: 0.04em; }
.ticker-prix { font-family: var(--font-titre); font-size: 0.86rem; color: #eef5f1; }
.ticker-variation { font-size: 0.75rem; font-weight: 500; padding: 1px 6px; border-radius: 3px; }
.ticker-variation.hausse { color: #a8e6c0; background: rgba(46,107,80,0.25); }
.ticker-variation.baisse { color: #f5a89e; background: rgba(192,57,43,0.25); }
.ticker-variation.stable { color: rgba(212,237,227,0.5); }

/* Badges packs mini — opacité réduite pour inactifs */
.pack-card-mini {
  text-align: center; padding: 8px 8px;
  border-radius: var(--rayon);
  border: 1.5px solid var(--c-lin);
  background: var(--c-ivoire);
  cursor: pointer;
  transition: opacity .3s, border-color .3s, transform .2s;
}
.pack-card-mini:hover { border-color: var(--c-fougere); transform: translateY(-2px); }
.pack-card-mini.actif {
  border-color: var(--c-foret);
  background: var(--c-mousse);
  box-shadow: var(--ombre);
  opacity: 1;
}
/* Inactifs à 38% */
.pack-card-mini.inactif { opacity: 0.38; }
.pack-card-mini.inactif:hover { opacity: 0.65; }

.pcm-dot  { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 5px; }
.pcm-nom  { font-size: 0.85rem; font-weight: 600; color: var(--c-foret-nuit); }
.pcm-prix { font-size: 0.72rem; color: var(--c-texte-doux); margin-top: 2px; }


/* ============================================================
   9. WIDGET TRIANGLE D'AIDE AU CHOIX
   ============================================================ */
.widget-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start;
}

/* Colonne gauche : sliders */
.widget-controls {}

.widget-description {
  font-size: 0.95rem; color: var(--c-texte-doux);
  line-height: 1.75; margin-bottom: 2rem;
}

/* Groupe slider */
.param-groupe { margin-bottom: 1.5rem; }
.param-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.88rem; font-weight: 500;
  color: var(--c-texte); margin-bottom: 8px;
}
.param-valeur {
  font-family: var(--font-titre); font-weight: 700; color: var(--c-foret);
}

input[type="range"] {
  width: 100%; height: 4px;
  appearance: none; background: var(--c-lin);
  border-radius: 2px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--c-foret);
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(46,107,80,0.35);
  transition: transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

.slider-labels {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--c-texte-doux); margin-top: 4px;
}

/* Commission estimée */
.commission-estimee {
  background: var(--c-mousse-light);
  border: 1px solid rgba(46,107,80,0.2);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.commission-titre {
  font-size: 0.75rem; font-weight: 600;
  color: var(--c-texte-doux);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.commission-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.commission-item {
  text-align: center; padding: 8px 6px;
  border-radius: var(--rayon);
  border: 1.5px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}
.commission-item.actif {
  border-color: var(--c-fougere);
  background: #fff;
  box-shadow: var(--ombre);
}
.commission-item-nom {
  font-size: 0.78rem; font-weight: 600; color: var(--c-foret-nuit);
}
.commission-item-taux {
  font-family: var(--font-titre); font-size: 1.3rem; font-weight: 800;
  color: var(--c-foret); line-height: 1.1;
}
.commission-item-detail {
  font-size: 0.68rem; color: var(--c-texte-doux); margin-top: 1px;
}

/* Colonne droite : triangle canvas */
.widget-triangle-wrap {
  position: sticky; top: 88px;
}

.triangle-canvas-wrap {
  background: #fff;
  border-radius: var(--rayon-lg);
  border: 1px solid var(--c-lin);
  box-shadow: var(--ombre);
  padding: 1.25rem;
}

#triangle-canvas {
  display: block; width: 100%;
  border-radius: var(--rayon);
}

/* Cards des 3 packs sous le triangle — espace réduit */
.pack-cards-mini {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 6px;
}

/* CTA vers packs */
.widget-cta { margin-top: 1rem; }


/* ============================================================
   10. SECTION PACKS
   ============================================================ */
.packs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.pack-card {
  background: #fff;
  border-radius: var(--rayon-lg);
  border: 1.5px solid var(--c-lin);
  padding: 2rem; position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pack-card:hover { transform: translateY(-5px); box-shadow: var(--ombre-md); }
.pack-card.recommande { border-color: var(--c-fougere); border-width: 2px; }

.pack-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-terre); color: #fff5ed;
  font-size: 0.7rem; font-weight: 600;
  padding: 4px 16px; border-radius: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.pack-nom     { font-family: var(--font-titre); font-size: 1.3rem; font-weight: 800; color: var(--c-foret-nuit); margin-bottom: 0.2rem; }
.pack-tagline { font-size: 0.83rem; color: var(--c-texte-doux); margin-bottom: 1.25rem; }
.pack-prix    { display: flex; align-items: baseline; gap: 5px; margin-bottom: 0.75rem; }
.pack-montant { font-family: var(--font-titre); font-size: 2.1rem; font-weight: 800; color: var(--c-foret-nuit); }
.pack-unite   { font-size: 0.8rem; color: var(--c-texte-doux); }
.pack-annuel  { font-size: 0.8rem; color: var(--c-fougere); font-weight: 500; margin-bottom: 1rem; }
.pack-commission-bloc {
  background: var(--c-mousse-light);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.pack-commission-titre {
  font-size: 0.7rem; font-weight: 600;
  color: var(--c-texte-doux); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.pack-commission-ligne {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--c-texte); padding: 2px 0;
}
.pack-commission-taux { font-weight: 600; color: var(--c-foret); }

.pack-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.75rem; }
.pack-feature  { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--c-texte); }
.feature-ok svg   { stroke: var(--c-foret); flex-shrink: 0; margin-top: 2px; }
.feature-non      { color: var(--c-texte-doux); opacity: 0.6; }
.feature-non svg  { stroke: var(--c-texte-doux); flex-shrink: 0; margin-top: 2px; }

.pack-section-titre-mini {
  font-size: 0.66rem; font-weight: 700; color: var(--c-texte-doux);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: 0.9rem 0 6px;
}
.pack-section-titre-mini:first-of-type { margin-top: 0; }

.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-lin, #e4e0d8); color: var(--c-foret-nuit);
  font-size: 0.62rem; font-weight: 800; font-style: normal;
  cursor: help; flex-shrink: 0; margin-left: 2px;
  line-height: 1; position: relative; top: -1px;
}

/* Bulle d'info-tip — un seul élément partagé, positionné en JS,
   fonctionne au clic/tap (mobile inclus) et pas seulement au survol */
.info-tip-bulle {
  position: absolute; z-index: 9999; max-width: 260px;
  background: var(--c-foret-nuit); color: #eef5f1;
  font-size: 0.74rem; line-height: 1.45; font-weight: 400;
  padding: 9px 12px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: none; transform: translateX(-50%);
  text-align: left;
}
.info-tip-bulle.visible { display: block; }
.info-tip-bulle::before {
  content: ''; position: absolute; top: -5px; left: 50%;
  transform: translateX(-50%); width: 10px; height: 10px;
  background: var(--c-foret-nuit); rotate: 45deg;
}


/* ============================================================
   11. SECTION POURQUOI OTYP
   ============================================================ */
.avantages-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.avantage-card {
  background: #fff; border-radius: var(--rayon-lg);
  border: 1px solid rgba(46,107,80,0.12); padding: 1.75rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.avantage-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); }
.avantage-icone {
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--c-mousse);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; color: var(--c-foret);
}
.avantage-card.accent .avantage-icone { background: rgba(184,92,26,0.1); color: var(--c-terre); }
.avantage-titre { font-family: var(--font-titre); font-size: 1rem; font-weight: 700; color: var(--c-foret-nuit); margin-bottom: 0.5rem; }
.avantage-texte { font-size: 0.88rem; color: var(--c-texte-doux); line-height: 1.7; }


/* ============================================================
   12. SECTION COMMENT ÇA MARCHE
   ============================================================ */
.etapes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem; position: relative;
}
.etapes-grille::before {
  content: ''; position: absolute;
  top: 27px; left: 8%; right: 8%; height: 1px;
  background: repeating-linear-gradient(
    to right, var(--c-fougere) 0, var(--c-fougere) 6px,
    transparent 6px, transparent 14px
  );
  opacity: 0.4;
}
.etape { text-align: center; padding: 0 0.75rem; }
.etape-numero {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-foret-nuit); color: #eef5f1;
  font-family: var(--font-titre); font-size: 1.2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem; position: relative; z-index: 1;
}
.etape-numero.accent { background: var(--c-terre); }
.etape-titre { font-family: var(--font-titre); font-size: 0.95rem; font-weight: 700; color: var(--c-foret-nuit); margin-bottom: 0.5rem; }
.etape-texte { font-size: 0.86rem; color: var(--c-texte-doux); }

/* Grille à 5 étapes (accueil) — colonnes fixes pour éviter qu'un élément
   isolé s'étire seul sur la dernière ligne */
.etapes-grille.etapes-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .etapes-grille.etapes-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .etapes-grille.etapes-5 { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   13. BANDEAU CONFIANCE
   ============================================================ */
.confiance-inner {
  display: flex; align-items: center;
  gap: 2.5rem; flex-wrap: wrap; justify-content: center;
}
.confiance-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--c-texte-doux); font-size: 0.84rem; font-weight: 500;
}
.confiance-item svg { stroke: var(--c-fougere); flex-shrink: 0; }


/* ============================================================
   14. FOOTER
   ============================================================ */
.footer {
  background: var(--c-ardoise-noire);
  color: rgba(212,237,227,0.75);
  padding: 4rem 0 2rem;
}
.footer-grille {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3rem;
}
.footer-logo img { height: 36px; opacity: 0.85; margin-bottom: 1rem; }
.footer-description { font-size: 0.84rem; line-height: 1.75; color: rgba(212,237,227,0.5); max-width: 280px; }
.footer-col-titre { font-family: var(--font-titre); font-size: 0.8rem; font-weight: 700; color: #eef5f1; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-liens { display: flex; flex-direction: column; gap: 8px; }
.footer-liens a { font-size: 0.84rem; color: rgba(212,237,227,0.5); transition: color var(--transition); }
.footer-liens a:hover { color: var(--c-fougere); }
.footer-bottom {
  border-top: 1px solid rgba(74,148,112,0.15);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-copy   { font-size: 0.76rem; color: rgba(212,237,227,0.35); }
.footer-note   { font-size: 0.7rem; color: rgba(212,237,227,0.3); }
.footer-stripe { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: rgba(212,237,227,0.4); }
.footer-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.25rem; }
.footer-badge  { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: rgba(212,237,227,0.5); background: rgba(74,148,112,0.08); border: 1px solid rgba(74,148,112,0.2); padding: 4px 10px; border-radius: 20px; }


/* ============================================================
   15. COMPOSANTS RÉUTILISABLES
   ============================================================ */
.card { background: #fff; border-radius: var(--rayon-lg); border: 1px solid var(--c-lin); box-shadow: var(--ombre); overflow: hidden; }
.card-entete { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-lin); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-titre  { font-family: var(--font-titre); font-size: 1rem; font-weight: 700; color: var(--c-foret-nuit); }
.card-corps  { padding: 1.5rem; }
.note-info   { font-size: 0.73rem; color: var(--c-texte-doux); padding: 0.75rem 1.5rem; background: var(--c-mousse-light); border-top: 1px solid var(--c-lin); display: flex; align-items: center; gap: 6px; }

/* Formulaire */
.form-groupe { margin-bottom: 1.25rem; }
.form-label  { display: block; font-size: 0.87rem; font-weight: 500; color: var(--c-texte); margin-bottom: 6px; }
.form-label .requis { color: var(--c-rouge); margin-left: 3px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--c-lin); border-radius: var(--rayon);
  font-family: var(--font-corps); font-size: 0.92rem;
  color: var(--c-texte); background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--c-foret);
  box-shadow: 0 0 0 3px rgba(46,107,80,0.12);
}
.form-textarea { min-height: 110px; resize: vertical; }


/* ============================================================
   16. ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
.pulse { animation: pulse 2.5s infinite; }


/* ============================================================
   17. UTILITAIRES
   ============================================================ */
.section-pad    { padding: 6rem 0; }
.section-pad-sm { padding: 3rem 0; }
.fond-ivoire    { background: var(--c-ivoire); }
.fond-mousse    { background: var(--c-mousse); }
.fond-blanc     { background: #fff; }
.fond-sombre    { background: var(--c-ardoise-noire); }
.separateur     { border: none; border-top: 1px solid var(--c-lin); margin: 2rem 0; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }


/* ============================================================
   18. RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 1024px) {
  /* Graphique hero masqué sur tablette — pas assez de place */
  .hero-graphique { display: none; }
  .hero-inner     { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Widget : passe en colonne inversée — triangle EN HAUT, curseurs EN BAS */
  .widget-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Inverse l'ordre : triangle d'abord, curseurs ensuite */
    display: flex;
    flex-direction: column-reverse;
  }
  .widget-triangle-wrap { position: static; }

  /* Triangle compact sur mobile — hauteur réduite */
  #triangle-canvas {
    height: 220px !important;
  }

  /* Card du triangle : padding réduit */
  .triangle-canvas-wrap {
    padding: 0.75rem;
  }

  /* Badges packs : plus compacts */
  .pack-cards-mini {
    gap: 6px;
    margin-top: 5px;
  }
  .pcm-nom  { font-size: 0.78rem; }
  .pcm-prix { font-size: 0.65rem; }

  /* Commission : 1 colonne sur petit écran */
  .commission-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .commission-item-taux { font-size: 1.1rem; }

  .footer-grille { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  /* Empêcher tout débordement horizontal */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  * { box-sizing: border-box; }

  /* Masquer les éléments qui créent un scroll horizontal */
  .ticker-bandeau { display: none !important; }
  .hero-graphique { display: none !important; }

  /* Navigation */
  .nav-liens, .nav-cta, .nav-langue { display: none; }
  .burger  { display: flex; }
  .conteneur { padding: 0 1.25rem; }

  /* Burger bien dans l'écran */
  .nav-inner { padding: 0 1rem; }
  .burger { margin-right: 0; flex-shrink: 0; }

  /* Bouton installer l'app — visible en mobile */
  .btn-installer.visible {
    display: inline-flex;
    position: fixed;
    bottom: 1rem; right: 1rem;
    z-index: 200;
    background: var(--c-foret);
    color: #fff;
    padding: 10px 14px;
    border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-size: 0.78rem;
  }

  /* Images matières sur les cards */
  .card-images { display: flex !important; }
  .card-image  { display: block !important; }

  /* Sections */
  .section-pad    { padding: 3.5rem 0; }
  .section-pad-sm { padding: 2rem 0; }

  /* Hero mobile : plus compact */
  .hero { padding: 90px 0 0; min-height: auto; }
  .hero-inner { padding-bottom: 2.5rem; min-height: auto; }
  .hero-metriques { gap: 1.25rem; }

  /* Widget */
  .pack-cards-mini    { grid-template-columns: repeat(3, 1fr); }
  .commission-grille  { grid-template-columns: 1fr; }

  /* Étapes */
  .etapes-grille::before { display: none; }

  /* Footer */
  .footer-grille { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Bouton installer — caché par défaut, affiché si .visible */
/* FAB installer — caché partout par défaut */
.btn-fab-mobile {
  display: none !important;
}

/* Mobile uniquement — position fixed forcée */
@media (max-width: 640px) {
  .btn-fab-mobile.visible {
    display: inline-flex !important;
    position: fixed !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    top: auto !important;
    left: auto !important;
    z-index: 9999 !important;
    transform: none !important;
    background: var(--c-foret) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: var(--font-corps) !important;
    align-items: center !important;
    gap: 8px !important;
  }
}