/* ============ TOKENS ============ */
:root {
  --navy: #0A1428;
  --navy-raised: #101E3A;
  --navy-sunken: #060C1B;
  --line: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.55);
  --overlay-a: rgba(255, 255, 255, 0.08);
  --overlay-b: rgba(255, 255, 255, 0.25);
  --accent: #D9A653;
  --accent-soft: #EFD8A0;
  --accent-strong: #B98A32;
  /* --accent-fg : l'or utilisé comme COULEUR DE TEXTE/ICÔNE directe (pas en
     fond de badge). Sur navy : or (--accent), contraste ~8:1. Sur fond
     clair (.section-light) : redéfini en noir plus bas — règle du site,
     l'or reste réservé au navy, le clair est toujours écrit en noir. */
  --accent-fg: var(--accent);
  /* --ink ne change JAMAIS avec le thème de section : c'est le texte posé
     sur l'or (boutons, badges), qui doit rester sombre aussi bien sur fond
     clair que sur fond navy. */
  --ink: #0A1428;
  /* --gold-fg : exception ciblée à la règle "noir sur clair" — un or plus
     sombre (~4.9:1 sur blanc), réservé aux étoiles et au badge résultat des
     témoignages pour reproduire fidèlement la référence demandée. Fixe,
     ne change jamais avec la section. */
  --gold-fg: #8A6220;
  /* --eyebrow-fg : toujours doré, mais dans la bonne nuance pour rester
     lisible — or vif sur navy, or plus sombre sur fond clair (redéfini plus
     bas). Réservé aux petits libellés en majuscules au-dessus des titres. */
  --eyebrow-fg: var(--accent);

  /* Deuxième couleur de marque — émeraude. L'or reste la couleur dominante
     (prix, CTA, badges) ; l'émeraude n'apparaît que pour signaler un état
     positif concret (disponibilité, halo d'ambiance) — jamais mélangés au
     hasard, chacun son rôle. */
  --emerald: #12B981;
  --emerald-soft: #6EE7B7;
  --emerald-strong: #0D7C56;
  /* --emerald-fg : même logique que --gold-fg, vert plus sombre et lisible
     réservé au texte/icônes sur fond clair (~5:1 vérifié). */
  --emerald-fg: #0C7A4C;
}

/* ============ SECTIONS ALTERNÉES ============ */
/* Une section .section-light redéfinit juste les tokens de surface/texte —
   tous les composants qui utilisent déjà var(--navy), var(--text) etc.
   basculent automatiquement en clair, sans dupliquer leur CSS. --accent et
   --ink restent identiques : l'or et le texte sur l'or ne changent pas. */
.section-light {
  --navy: #FFFFFF;
  --navy-raised: #ECEEF3;
  --navy-sunken: #E0E3EA;
  --line: rgba(10, 20, 40, 0.12);
  --text: #12172A;
  --text-soft: rgba(18, 23, 42, 0.7);
  --text-faint: rgba(18, 23, 42, 0.62);
  --overlay-a: rgba(10, 20, 40, 0.05);
  --overlay-b: rgba(10, 20, 40, 0.18);
  /* Règle simple : sur fond clair, tout le texte (y compris les mots avant
     mis en avant en or) passe en noir — l'or reste réservé au navy. */
  --accent-fg: var(--text);
  --eyebrow-fg: var(--gold-fg);
}
/* Texture de points très discrète sur TOUTES les sections claires — signature
   commune qui casse l'aplat plat, cohérente sur tout le site (pas juste une
   section isolée). */
.section-light {
  background-image: radial-gradient(rgba(10, 20, 40, .055) 1.3px, transparent 1.5px);
  background-size: 22px 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grain léger sur tout le site — donne une texture "matière" plutôt qu'un
   aplat numérique plat. Fixe, non interactif, très discret (3.5%). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.accent { color: var(--accent-fg); }

/* ============ AMBIANCE (halos lumineux) ============ */
/* Appliqué aux sections navy pour donner de la profondeur — deux halos
   flous (or + émeraude, les 2 couleurs de marque), purement décoratifs, le
   contenu reste au-dessus (z-index). Dérive très lente façon "aurora". */
.ambient { position: relative; overflow: hidden; }
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.ambient::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(217, 166, 83, .24), transparent 70%);
  top: -160px; right: -120px;
  animation: aurora-drift-a 18s ease-in-out infinite;
}
.ambient::after {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(18, 185, 129, .16), transparent 70%);
  bottom: -180px; left: -140px;
  animation: aurora-drift-b 22s ease-in-out infinite;
}
@keyframes aurora-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.08); }
}
@keyframes aurora-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(35px, -25px) scale(1.1); }
}
.ambient > .wrap { position: relative; z-index: 1; }

/* ============ EYEBROW (libellés au-dessus des titres) ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eyebrow-fg);
  margin-bottom: .85rem;
}
.eyebrow-text {
  text-decoration: underline;
  text-decoration-color: var(--eyebrow-fg);
  text-underline-offset: .3em;
  text-decoration-thickness: 1.5px;
}
/* Seul le losange pulse (pas le texte) — même langage que le point
   "disponible" du Hero (.pulse-ping), décliné en losange doré. */
.eyebrow-dot {
  position: relative;
  width: 10px; height: 10px;
  background: var(--eyebrow-fg);
  transform: rotate(45deg);
  flex: none;
}
.eyebrow-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eyebrow-fg);
  animation: eyebrow-pulse 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes eyebrow-pulse {
  0% { transform: scale(1); opacity: .7; }
  75%, 100% { transform: scale(2.8); opacity: 0; }
}
.probleme .eyebrow, .approche .eyebrow, .offres .eyebrow, .temoignages .eyebrow, .faq .eyebrow, .contact-form .eyebrow { justify-content: center; width: 100%; }

/* ============ SPOTLIGHT (halo qui suit le curseur) ============ */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(217, 166, 83, .16), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ============ FINITIONS ============ */
::selection { background: var(--accent); color: var(--ink); }
/* Barre de défilement en dégradé doré — même langage que les bordures des
   cartes (Problème/Approche) juste en dessous, pour que l'accent doré soit
   cohérent partout où il apparaît sur le site, pas juste un aplat isolé. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-strong));
  border-radius: 999px;
  border: 2px solid var(--navy);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
html { scrollbar-color: var(--accent-strong) var(--navy); scrollbar-width: thin; }

/* ============ BUTTONS ============ */
.btn {
  --mx: 0px; --my: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: .95rem;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transform: translate(var(--mx), var(--my));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Effet "magnétique" — le bouton suit légèrement le curseur qui s'approche
   (JS met à jour --mx/--my), puis se soulève au survol et se tasse au clic
   — tout composé dans une seule transform pour ne pas s'écraser entre eux. */
.btn:hover { transform: translate(var(--mx), var(--my)) translateY(-2px); }
.btn:active { transform: translate(var(--mx), var(--my)) scale(.97); }
/* Balayage lumineux au survol — juste sur les boutons pleins (or). */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 8px 24px -12px rgba(217, 166, 83, .55); }
.btn-primary:hover { background: var(--accent-soft); box-shadow: 0 12px 32px -12px rgba(217, 166, 83, .7); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-fg); }
.btn-small { padding: .55em 1.2em; font-size: .85rem; }
.btn-cta { padding: 1.15em 2.2em; font-size: 1.05rem; font-weight: 700; }

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #FFFFFF;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100px;
}
.scroll-top-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.scroll-top-btn:hover { color: var(--accent); border-color: var(--accent); }
.scroll-top-btn svg { width: 18px; height: 18px; }

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 2.25rem;
}
.main-nav a { color: var(--text); font-weight: 500; transition: color .15s ease; }
.main-nav a:hover { color: var(--accent); }

.header-actions { flex: none; display: flex; align-items: center; gap: .75rem; }
.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cart-toggle:hover { color: var(--accent); border-color: var(--accent); }
.cart-toggle svg { width: 18px; height: 18px; }
.cart-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; margin: 0 8px; background: var(--text); }
.mobile-panel {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
}
.mobile-panel.is-open { display: flex; }
.mobile-panel a { color: var(--text); font-weight: 600; }
.mobile-panel .btn { width: fit-content; }

@media (max-width: 760px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* Réordonné le 2026-08-19 (mobile uniquement) : hamburger + flèche remonter
     groupés à gauche, panier seul à droite — display:contents sur
     .header-actions "déballe" son contenu pour que nav-toggle et cart-toggle
     redeviennent des enfants directs de .header-inner et puissent être
     réordonnés indépendamment via `order` (impossible tant qu'ils restent
     imbriqués dans le même bloc que le panier). */
  .header-inner { justify-content: space-between; }
  .header-actions { display: contents; }
  .nav-toggle { order: -2; }
  .scroll-top-btn { order: -1; }
  .cart-toggle { order: 1; }
}

/* ============ TIROIR PANIER ============ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 27, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 60;
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: #FFFFFF;
  color: var(--text);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -24px rgba(18, 23, 42, .3);
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-header h2 { font-size: 1.2rem; }
.cart-close {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.cart-close:hover { color: var(--accent-fg); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.cart-empty { color: var(--text-faint); font-size: .92rem; }

.cart-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-info { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cart-item-title { font-weight: 600; }
.cart-item-price { color: var(--accent-fg); font-weight: 700; }
.cart-item-qty { display: flex; align-items: center; gap: .6rem; }
.cart-item-qty button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.cart-item-qty button:hover { border-color: var(--accent-fg); color: var(--accent-fg); }
.cart-item-remove {
  margin-left: auto;
  width: auto !important;
  height: auto !important;
  border-radius: 4px !important;
  padding: .25rem .6rem;
  font-size: .75rem;
  color: var(--text-faint) !important;
}
.cart-item-remove:hover { color: var(--accent-fg) !important; border-color: var(--line) !important; }

.cart-drawer-footer { padding: 1.5rem; border-top: 1px solid var(--line); }
.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.btn-large { width: 100%; justify-content: center; padding: 1em; }
.btn-large:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.cart-note { color: var(--text-faint); font-size: .8rem; margin-top: .75rem; text-align: center; }

/* ============ BOUTON AJOUTER (offres) ============ */
.offer-add { margin-top: 1.25rem; }

/* ============ HERO ============ */
/* Hero centré verticalement et horizontalement dans tout l'espace visible
   (min-height pleine hauteur d'écran) — plus pertinent maintenant que le
   bloc stats est retiré et que le contenu est plus court. */
/* Centré verticalement dans l'espace VISIBLE de l'écran (sous le header fixe
   de 100px), pas dans la hauteur brute du viewport. Avant, le centrage se
   calculait sur les 100vh entiers : le bloc tombait pile au milieu de
   l'écran total, mais visuellement collé sous le header (quasi rien en
   haut, un grand vide en bas) puisque le header masque ses 100px du haut.
   `margin-top` pousse le Hero sous le header, `min-height` retire ces mêmes
   100px de la hauteur à centrer — le centrage porte alors sur ce que
   l'utilisateur voit réellement.
   Le padding vertical est un minimum réduit (2rem, séparé de --hero-inset
   qui ne pilote plus que le padding horizontal via .hero .wrap ci-dessous)
   — avec le padding-top à 112px d'avant, contenu + padding dépassait
   l'espace visible restant (100vh - 100px) et cassait le calcul. Le padding
   n'a plus besoin de "dégager" le header lui-même (le margin-top s'en
   charge déjà) : c'est juste une marge plancher, le centrage flex ajoute le
   reste automatiquement pour équilibrer haut/bas. */
.hero {
  --hero-inset: 7rem;
  margin-top: 100px;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  padding: 2rem 0;
}
/* Wrap élargi + colonne texte plus large que la colonne photo — pour que le
   titre et les phrases de l'effet de frappe tiennent sur une seule ligne à
   l'échelle desktop, sans avoir à rétrécir la police à l'excès. */
/* max-width retiré (plus de plafond en dessous de 100%) : sur le Hero,
   c'est le padding seul (--hero-inset) qui doit contrôler l'espace latéral
   — un max-width plus étroit que la section créait un second inset (marge
   de centrage automatique) qui s'ajoutait au padding et cassait l'égalité
   avec le haut/bas. */
.hero .wrap { max-width: 100%; padding-left: var(--hero-inset); padding-right: var(--hero-inset); }
/* Avant : colonnes en fr (1fr/2fr) qui s'étirent sur toute la largeur du
   wrap — la colonne texte, bien plus large que son contenu réel (h1,
   boutons), laissait un grand vide à droite et déséquilibrait tout le bloc
   vers la gauche de la page. Colonnes plafonnées (minmax(0, cap)) +
   justify-content:center à la place : chaque colonne ne prend que la place
   dont son contenu a besoin (jusqu'au plafond), et le duo photo+texte est
   centré comme un seul bloc dans le wrap. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 600px);
  justify-content: center;
  gap: 3rem;
  align-items: center;
}
.hero-photo-col { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
/* align-items:center (sur .hero-grid) centre les 2 colonnes par rapport à
   leur PROPRE hauteur totale — mais .hero-photo-col contient le tag "Hello"
   + la flèche AU-DESSUS de la photo, donc le cadre photo lui-même n'est pas
   centré dans sa colonne (son centre réel tombe plus bas). Ce margin-top
   recale le centre du bloc texte sur le centre réel du cadre photo (mesuré
   à l'arrêt, hors animation "float") plutôt que sur le centre de la colonne
   entière. Valeur fixe : le tag/la flèche ont des tailles fixes (pas de vw),
   donc l'écart ne varie pas avec la largeur d'écran. */
.hero-text-col { margin-top: 6.3rem; }
.hello-tag {
  font-size: 1.05rem;
  color: var(--text);
  text-align: center;
}
/* Texte au-dessus, flèche droite centrée juste en dessous, pointant vers le
   milieu de la photo — les 3 éléments partagent le même axe central
   (hérité de l'align-items:center du parent .hero-photo-col). Flèche en SVG
   inline (droite, symétrique) plutôt qu'un doodle courbe — se centre
   parfaitement sans hack de décalage, contrairement à l'ancienne version. */
.hello-arrow { width: 18px; height: 42px; color: var(--text-soft); opacity: .8; }
.hero-photo-frame {
  /* Remplit toute la colonne (1/3 du Hero), plafonné pour ne pas devenir
     démesuré sur très grand écran — avant, une taille fixe la laissait
     petite même quand la colonne avait beaucoup plus de place. */
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1;
  border-radius: 1.75rem;
  border: 1px solid rgba(217, 166, 83, .35);
  box-shadow: 0 0 0 16px rgba(217, 166, 83, .06), 0 30px 60px -20px rgba(0, 0, 0, .6);
  animation: float 6s ease-in-out infinite;
}
/* Halo doré derrière la photo — l'effet qui fait "claquer" le portrait au
   lieu de flotter sur un fond uniforme. */
.hero-photo-frame::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background: radial-gradient(circle, rgba(217, 166, 83, .35), transparent 70%);
  filter: blur(20px);
}
/* overflow:hidden retiré du cadre (pour laisser le badge flotter en dehors
   du coin) — l'arrondi s'applique directement à l'image à la place. */
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Badge flottant sur le coin de la photo — reprend le point "disponible"
   (déjà utilisé ailleurs) directement sur le portrait plutôt que noyé dans
   une ligne de texte séparée. */
.hero-photo-badge {
  position: absolute;
  bottom: -14px; right: -14px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--navy-raised, #131F3D);
  border: 1px solid rgba(217, 166, 83, .4);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Entrée en scène au chargement — chaque bloc du hero apparaît en cascade. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-photo-col { animation: rise-in .7s ease both; }
.hero-kicker { animation: rise-in .7s ease .1s both; }
.hero h1 { animation: rise-in .7s ease .18s both; }
.hero-sub { animation: rise-in .7s ease .26s both; }

.hero-kicker { font-size: 1.4rem; color: var(--text-soft); margin-bottom: .25rem; }
/* Colonne texte plafonnée à 600px maintenant (voir .hero-grid) au lieu de
   suivre le viewport — un max en vw pur continuait de grossir sur grand
   écran alors que la colonne, elle, restait bloquée à 600px, ce qui faisait
   déborder le titre sur 3-4 lignes au lieu de 2. Le plafond est repassé en
   rem fixe pour rester calé sur cette largeur, quel que soit le viewport. */
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 2rem;
}
/* La colonne texte est maintenant plafonnée à 680px (voir .hero-grid) au
   lieu de suivre le viewport — donc une taille fixe suffit ici, plus besoin
   de la formule vw calibrée d'avant. Vérifiée pour que la phrase la plus
   longue de hero.headlines ("Copywriting, design, structure — pensés pour
   convertir") tienne sur une seule ligne, y compris dans la zone étroite
   entre 861px et ~1050px où la colonne se resserre avant de basculer en
   une seule colonne sous 860px. */
.hero-typing {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent-fg);
  min-height: 1.5em;
  margin-bottom: 2rem;
}
.circled { position: relative; display: inline-block; }
.circle-deco { position: absolute; top: -12%; left: -6%; width: 112%; height: auto; pointer-events: none; }
.gold-gradient {
  position: relative;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-soft), var(--accent-strong), var(--accent-soft), var(--accent-strong));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.hero-sub { color: var(--text-soft); margin-bottom: 1.75rem; max-width: 42ch; }
/* margin-top ajouté : le bouton vient maintenant APRÈS .hero-trust (ordre
   inversé le 2026-08-18 — la réassurance avant l'appel à l'action convertit
   mieux qu'un bouton "à froid"). Sans cette marge, le bouton collerait
   directement sous la rangée d'icônes (.hero-trust n'a pas de margin-bottom). */
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.cursor { display: inline-block; margin-left: 2px; animation: blink 1s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
/* Rangée de réassurance sous les boutons — des faits vérifiables (pas de la
   preuve sociale inventée), avec icône pour que ça se scanne vite. */
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--text-soft);
  font-size: .92rem;
  font-weight: 500;
}
.hero-trust svg { flex: none; width: 19px; height: 19px; color: var(--accent-fg); }
.hero-actions, .hero-trust { animation: rise-in .7s ease .34s both; }

.hero-status { margin-top: 3.5rem; text-align: center; }
/* Le point "disponible" vit maintenant dans le badge flottant sur la photo
   (.hero-photo-badge) — .hero-available n'est plus utilisée dans le Hero,
   mais le point/ping (.pulse-*) reste un composant partagé réutilisable. */
.pulse-dot { position: relative; width: 10px; height: 10px; display: inline-flex; }
.pulse-core { width: 10px; height: 10px; border-radius: 50%; background: var(--emerald); }
.pulse-ping {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--emerald);
  opacity: .6;
  animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

.hero-stats {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.hero-stat-num {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.hero-stat-label { font-size: .8rem; color: var(--text-faint); max-width: 14ch; text-align: center; }

@media (max-width: 640px) {
  .hero-stats { gap: 1.75rem; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  /* Le margin-top de .hero-text-col recale le texte sur le centre du cadre
     photo en layout 2 colonnes — inutile (et ça créerait un grand vide) en
     une seule colonne empilée, où photo et texte se suivent simplement. */
  .hero-text-col { margin-top: 0; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  /* Sous 860px, le padding latéral égal au haut/bas mangerait trop de
     largeur utile — revient au padding standard du site sur les côtés,
     seul le haut/bas garde sa valeur (toujours nécessaire pour dégager le
     header fixe). */
  .hero .wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 480px) {
  /* Réduit juste assez pour que "Je suis développeur web spécialisé sur
     Shopify" tienne sur 2 lignes au lieu de 3 (repéré par Jérémie le
     2026-08-19, mobile uniquement — taille desktop/tablette inchangée). */
  .hero h1 { font-size: 1.6rem; }
}
/* --hero-inset ne pilote plus que le padding horizontal (voir .hero .wrap
   plus haut) — le dégagement du header fixe est géré par le margin-top de
   .hero, pas par --hero-inset ; rien à ajuster ici pour ça sous 860px. */

/* ============ REVEAL ============ */
.pillar-card, .case-card, .problem-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.pillar-card.is-visible, .case-card.is-visible, .problem-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ SECTIONS COMMON ============ */
/* `color` est une propriété héritée : body la fixe une seule fois (var(--text)
   résolu en blanc), et cette valeur DÉJÀ CALCULÉE descend telle quelle aux
   enfants — un h2 sans sa propre règle color ne "re-regarde" jamais
   var(--text), même dans une section où ce token est redéfini en noir.
   Chaque section doit donc réaffirmer color: var(--text) pour que son
   propre thème (clair ou navy) reparte de sa propre valeur locale. */
section { position: relative; background: var(--navy); color: var(--text); transition: background .2s ease, color .2s ease; }
/* Dégradé sur tous les fonds navy (jamais les sections claires) — même
   dégradé que les cartes (.problem-item, .pillar-card) pour une famille de
   dégradés cohérente sur tout le site, au lieu d'un aplat plat isolé. */
.hero, .offres, .site-footer {
  background: linear-gradient(150deg, #0A1428, #131F3D);
}
section, .site-footer { padding: clamp(3rem, 6.5vw, 5rem) 0; }
/* ============ TYPOGRAPHIE UNIFIÉE ============ */
/* Une seule police sur tout le site (Poppins, plus de Fraunces en accent).
   Deux niveaux de taille pour les titres — seul le Hero (h1) sort de ce
   système : (1) titres de SECTION, un seul format pour "Offres",
   "Problème", "Approche", "Témoignages", "FAQ" ; (2) titres de CARTE, plus
   petits, pour tout ce qui se répète dans une grille (cartes Problème,
   piliers Approche, cartes Offres, questions FAQ). Un seul format aussi
   pour tout le texte de contenu (sous-titres, descriptions, réponses FAQ,
   avis). Les éléments d'interface (prix, badges, boutons, légendes en
   majuscules) gardent leur taille, mais tout en Poppins. */
section h2,
#approcheTitle {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
section h2 { text-align: center; }
.pillar-card h3,
.problem-item h3,
.offer-case-head h3,
.faq-q-text {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
/* Le titre du footer n'est pas au niveau d'un titre de section (il partage
   la ligne avec 2 colonnes de simples libellés) — le garder à la taille
   pleine créait un déséquilibre. Une taille propre, plus proche de l'esprit
   "colonne", pour que les 3 colonnes du footer aient une cohérence entre
   elles plutôt qu'avec le reste du site. Structure simplifiée le 2026-08-19
   (titre + sous-titre, plus d'eyebrow ici) — demande de Jérémie : "juste un
   titre et un sous-titre, max sur 2 lignes". */
.footer-cta-title {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .4rem;
}
.footer-cta-subtitle {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: var(--accent-fg);
}
.section-sub,
.hero-sub,
.approche-sub,
.problem-item p,
.pillar-card p,
.faq-answer p,
.testimonial-quote,
.testimonial-author,
.offer-case-text-p {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
.section-sub { text-align: center; color: var(--text-faint); margin-top: .75rem; margin-bottom: 3rem; }

/* Le contenu de chaque section doit toujours passer au-dessus des éléments
   décoratifs (halos .ambient, fondus .section-seam) qui n'ont pas de
   position/z-index propre — sinon un élément statique reste "sous" tout
   élément positionné, même avec un z-index élevé sur ce dernier. */
section > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }

/* ============ FONDUS ENTRE SECTIONS ============ */
/* Petit dégradé en haut de chaque section, de la couleur de la section
   précédente vers transparent — évite la coupure nette blanc/gris/navy. */
.section-seam {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
}
.seam-navy { background: linear-gradient(to bottom, #0A1428, transparent); }
.seam-grey { background: linear-gradient(to bottom, #ECEEF3, transparent); }
.seam-white { background: linear-gradient(to bottom, #FFFFFF, transparent); }
/* Vague / diagonale — autres techniques de raccord, en alternance avec le
   fondu ci-dessus pour que les 6 transitions ne soient pas identiques. */
.section-wave, .section-diagonal {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}
.section-wave svg, .section-diagonal svg { display: block; width: 100%; height: 72px; }
.section-diagonal-alt svg { height: 60px; }
/* La hauteur ci-dessus est pensée pour un viewBox 1200 de large — sur mobile
   (largeur réelle ~375px), le même SVG étiré (preserveAspectRatio="none")
   donne une pente bien plus abrupte/agressive, et le bandeau de transition
   prend proportionnellement une part disproportionnée du petit écran.
   Réduit à mobile pour que la coupure reste discrète (repéré par Jérémie le
   2026-08-19 : "border section qui ne diminue pas la transition"). */
@media (max-width: 640px) {
  .section-wave svg, .section-diagonal svg { height: 34px; }
  .section-diagonal-alt svg { height: 30px; }
  .section-seam { height: 90px; }
}

/* ============ PROBLÈME ============ */
.probleme.section-light { --navy: #E3E7EF; }
.probleme h2 { max-width: 42ch; margin: 0 auto; }
/* .problem-title-line2 en display:block reproduit le comportement d'un
   <br> (retour à la ligne systématique, desktop compris) — l'espace en plus
   n'est ajouté qu'en mobile juste en dessous, demande explicite de Jérémie
   du 2026-08-19 de ne toucher que la version mobile. */
.problem-title-line2 { display: block; }
@media (max-width: 640px) {
  .problem-title-line2 { margin-top: .5em; }
}
/* Section élargie pour que chaque carte ait la place de garder son titre
   sur une seule ligne, même le plus long des trois. */
.probleme .wrap { max-width: 1340px; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
/* Cartes navy pleines qui ressortent fort sur le fond clair de la section —
   plus un simple filet + texte flottant. Le contraste dur (foncé sur clair)
   fait le travail que l'opacité/la taille ne suffisaient pas à faire. */
.problem-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(150deg, #0A1428, #131F3D);
  border-radius: 1.1rem;
  padding: 2.1rem 1.6rem 1.75rem;
  color: #F1ECDD;
  box-shadow: 0 26px 48px -26px rgba(10, 20, 40, .55);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* Barre du haut en dégradé plutôt qu'un border-top plein — un vrai
   border-image casserait les coins arrondis de la carte. */
.problem-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.problem-item::after {
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(217, 166, 83, .18), transparent 70%);
  pointer-events: none;
}
.problem-item:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 38px 64px -28px rgba(10, 20, 40, .6);
}
.problem-item:hover .problem-mark { transform: scale(1.1) rotate(-8deg); }
/* Icône propre à chaque erreur, titre, texte — empilés et centrés. */
.problem-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  line-height: 0;
  margin-bottom: 1.1rem;
  transition: transform .35s ease;
}
.problem-mark svg { display: block; width: 22px; height: 22px; }
.problem-item h3 {
  margin-bottom: .6rem;
  color: #FFFFFF;
}
.problem-item p { color: rgba(241, 236, 221, .72); }
.problem-note {
  text-align: center;
  font-style: italic;
  color: var(--text-faint);
  max-width: 60ch;
  margin: 2rem auto 0;
  line-height: 1.6;
}

@media (max-width: 760px) {
  /* Slider horizontal au lieu d'un empilement vertical — 3 cartes pleine
     hauteur les unes sous les autres prenaient énormément de place sur un
     petit écran. scroll-snap natif (pas de JS) : on swipe pour défiler,
     comme les témoignages. Demande de Jérémie du 2026-08-19, mobile
     uniquement — desktop garde la grille à 3 colonnes. */
  .problem-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25rem;
    padding-bottom: .5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .problem-item { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ============ APPROCHE ============ */
/* max-width à 950px (pas 700px) : le titre ("Ce qui sépare une boutique qui
   vend d'un site qui existe.") a besoin d'environ 870-910px pour tenir sur
   une ligne selon la taille de police — avec un conteneur trop étroit et
   `white-space:nowrap`, le texte débordait TOUT ENTIER vers la droite au
   lieu de déborder symétriquement des 2 côtés (comportement réel du
   navigateur : un nowrap plus large que sa boîte ne se centre pas, il colle
   son bord gauche à la boîte et déborde uniquement à droite) — d'où le
   titre visuellement décalé à droite alors que le CSS disait bien "center".
   Un conteneur assez large pour que le texte tienne réellement dedans est
   le vrai fix, pas une histoire d'alignement. */
.approche-intro { text-align: center; max-width: 950px; margin: 0 auto 2.5rem; }
#approcheTitle {
  display: block;
  line-height: 1.15;
}
.approche-sub { color: var(--text-faint); margin-top: .85rem; }
/* Les 3 piliers en liste — même carte, même format (icône à gauche, texte à
   droite) pour les 3, pas de traitement "vedette" à part. La RANGÉE de la
   section est centrée horizontalement (.pillar-grid), mais À L'INTÉRIEUR de
   chaque carte, icône/titre/texte restent alignés à gauche — deux demandes
   différentes de Jérémie, à ne pas confondre : le rectangle centré sur la
   page, son contenu aligné à gauche dedans. */
.pillar-grid { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
/* Même DA navy pleine que les cartes Problème juste au-dessus — cohérence
   visuelle entre les deux sections plutôt qu'un fond clair qui rompt le fil.
   Largeur plafonnée + centrée (au lieu de toute la largeur du wrap) pour que
   le rectangle lui-même se lise comme une carte centrée, pas une barre qui
   colle aux 2 bords. */
/* Le groupe icône+texte est centré comme UN BLOC dans la carte (marge égale
   à gauche et à droite) — mais à l'intérieur de ce bloc, titre/texte
   restent alignés à gauche l'un par rapport à l'autre (pas de
   text-align:center ici). .pillar-copy passe donc de flex:1 (occupait tout
   l'espace, empêchant justify-content d'avoir un effet visible) à une
   largeur fixe, pour que le centrage du groupe se voie réellement. */
.pillar-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  width: 100%;
  max-width: 900px;
  background: linear-gradient(150deg, #0A1428, #131F3D);
  border-radius: .9rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 26px 48px -26px rgba(10, 20, 40, .55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.pillar-card:hover {
  transform: translateX(6px);
  box-shadow: 0 34px 58px -26px rgba(10, 20, 40, .6);
}
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  transition: transform .3s ease;
}
.pillar-card:hover .pillar-icon { transform: scale(1.1) rotate(-6deg); }
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-copy { flex: none; max-width: 640px; }
.pillar-card h3 { margin-bottom: .5rem; color: #FFFFFF; }
.pillar-card p { color: rgba(241, 236, 221, .72); }

@media (max-width: 640px) {
  .pillar-card { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.5rem; }
  /* Même traitement slider que .problem-grid juste au-dessus — 3 cartes
     empilées verticalement prenaient trop de place sur mobile. Demande de
     Jérémie du 2026-08-19, mobile uniquement. */
  .pillar-grid {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.5rem .5rem;
  }
  .pillar-card { flex: 0 0 84%; max-width: none; width: auto; scroll-snap-align: start; }
}

/* ============ RÉALISATIONS ============ */
.case-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 4rem;
}
.case-card:last-child { margin-bottom: 0; }
.case-card.reverse { direction: rtl; }
.case-card.reverse > * { direction: ltr; }
.case-text h3 { margin-bottom: 1rem; }
/* Scopé à .offer-case-text-p spécifiquement (pas juste ">p") — sinon cette
   règle boîte/fond/bordure s'appliquait aussi à .offer-price-note (qui est
   également un <p> enfant direct de .case-text), lui donnant à tort le même
   cadre visuel que le paragraphe de description au lieu de rester une
   simple étiquette. Bug révélé en réintroduisant priceNote (2026-08-18). */
.case-text > .offer-case-text-p {
  background: linear-gradient(to bottom right, var(--overlay-a), var(--overlay-b));
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem;
  color: var(--text);
  margin-bottom: 1rem;
}

.mockup-bar { display: flex; align-items: center; gap: 6px; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.mockup-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--overlay-b); }
.mockup-body {
  height: calc(100% - 2.7rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 70% 80%, rgba(217,166,83,.18), transparent 55%), linear-gradient(to bottom right, var(--navy), var(--navy-raised), var(--navy-sunken));
}
.mockup-body span { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: var(--text); letter-spacing: .02em; }

@media (max-width: 860px) {
  .case-card, .case-card.reverse { grid-template-columns: 1fr; direction: ltr; }
  /* order:-1 fait passer le slider d'images AVANT le bloc texte dans
     l'ordre visuel, quel que soit l'ordre réel dans le HTML — slider,
     offre 1, slider, offre 2, comme demandé par Jérémie le 2026-08-19
     (mobile uniquement, le desktop garde son alternance texte/image via
     .reverse). */
  .case-card .offer-slider { order: -1; }
  /* Bouton "Ajouter au panier" centré (au lieu d'aligné à gauche comme le
     reste du texte) — demande explicite, mobile uniquement. */
  .offer-add { display: flex; margin-left: auto; margin-right: auto; }
}

/* ============ OFFRES ============ */
/* .offer-case réutilise la grille alternée de .case-card (Réalisations) —
   même famille visuelle, le slider d'images remplace le mockup statique. */
/* Légende (priceNote) et badge "Recommandé" sur la même ligne, badge à
   droite — avant, les 2 étaient empilés en blocs séparés (le badge flottait
   même au-dessus de toute la carte). Demande de Jérémie du 2026-08-18. */
.offer-legend-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.offer-flag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--accent);
  color: var(--ink);
  padding: .4rem .9rem;
  border-radius: 999px;
  flex: none;
  box-shadow: 0 8px 20px -10px rgba(217, 166, 83, .7);
}
.offer-flag::before { content: "★"; }
.offer-case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.offer-price-col { display: flex; align-items: baseline; gap: .6rem; white-space: nowrap; }
.offer-price { font-size: 2.7rem; font-weight: 800; letter-spacing: -.01em; color: var(--accent-fg); white-space: nowrap; }
.offer-price-old { font-size: 1.15rem; font-weight: 600; color: var(--text-faint); text-decoration: line-through; white-space: nowrap; }
.offer-price-note { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-fg); margin: 0; }

/* Liste détaillée du contenu de chaque offre — rend le "quoi exactement"
   scannable en un coup d'œil plutôt que noyé dans un paragraphe dense. */
.offer-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.offer-features li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.4;
}
.offer-features svg {
  flex: none;
  width: 18px; height: 18px;
  margin-top: .1em;
  color: var(--accent-fg);
}


/* ============ SLIDER (offres) ============ */
/* Pas de bordure/contour — Jérémie va y mettre de vraies photos produit en
   slider, un cadre/contour aurait concurrencé visuellement les images
   réelles. Juste un fond (au cas où une image met du temps à charger) et
   une ombre portée pour la profondeur, pas un liseré. Même règle pour les
   2 offres (avant : l'offre "featured" avait un anneau doré en plus — retiré
   pour rester cohérent avec "pas de contours" sur les 2 cartes). */
.offer-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--navy-sunken);
  box-shadow: 0 25px 50px -20px rgba(0,0,0,.6);
  transition: box-shadow .3s ease;
}
.offer-slider:hover { box-shadow: 0 32px 60px -22px rgba(217, 166, 83, .35); }
.slider-track { display: flex; height: 100%; transition: transform .4s ease; }
.slide { flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.offer-slider:hover .slide img { transform: scale(1.06); }
.slide-placeholder { display: flex; flex-direction: column; height: 100%; transition: transform .5s ease; }
.offer-slider:hover .slide-placeholder { transform: scale(1.04); }
.slide-placeholder .mockup-body {
  background: radial-gradient(circle at 70% 80%, rgba(217,166,83,.18), transparent 55%), linear-gradient(to bottom right, var(--navy), var(--navy-raised), var(--navy-sunken));
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(6, 12, 27, .65);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.slider-arrow:hover { border-color: var(--accent); color: var(--accent); }
.slider-prev { left: .75rem; }
.slider-next { right: .75rem; }

.slider-dots { position: absolute; bottom: .85rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; }
.slider-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--overlay-b); border: none; padding: 0; cursor: pointer; }
.slider-dot.is-active { background: var(--accent); }

/* ============ FAQ ============ */
/* Liste simple, sans cartes — un séparateur fin entre chaque question. */
.faq-list { max-width: 760px; margin: 2.5rem auto 0; }
.faq-item { border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 0;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, padding-left .2s ease;
}
.faq-question:hover { color: var(--gold-fg); padding-left: .4rem; }
.faq-q-text { flex: 1; }
.faq-icon { font-size: 1.5rem; color: var(--accent-fg); transition: transform .3s ease; flex: none; line-height: 1; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.is-open .faq-answer { max-height: 400px; padding: 0 0 1.15rem 3.1rem; }
.faq-answer p { color: var(--text-soft); max-width: 62ch; }

/* ============ TÉMOIGNAGES ============ */
/* Section élargie pour que 4 avis tiennent côte à côte sur toute la largeur
   de la page (au lieu des 1100px partagés par les autres sections). */
.temoignages .wrap { max-width: 1680px; }
.testimonial-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
}
.testimonial-summary-stars { color: var(--gold-fg); letter-spacing: .2em; font-size: 1.1rem; }
.testimonial-summary-value { font-weight: 800; font-size: 1.15rem; color: var(--text); }
.testimonial-summary-count { color: var(--text-faint); font-size: .9rem; }
.testimonial-carousel { margin-top: 1.25rem; }
.testimonial-track-wrap { position: relative; padding: 0 3.25rem; }
.testimonial-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.testimonial-track::-webkit-scrollbar { display: none; }

/* Fond crème dédié à cette section (les autres sections claires restent en
   blanc pur — override ciblé pour matcher la référence demandée). */
.temoignages.section-light { --navy: #E3E7EF; }


.testimonial-card {
  flex: 0 0 calc(25% - 1.125rem);
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 2px solid rgba(217, 166, 83, .7);
  border-radius: 1.25rem;
  box-shadow: 0 16px 34px -18px rgba(18, 23, 42, .3);
  padding: 2.25rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 32px 55px -20px rgba(18, 23, 42, .35);
  border-color: var(--accent);
}
.testimonial-stars { color: var(--gold-fg); font-size: 1.15rem; margin-bottom: 1.1rem; display: flex; align-items: center; justify-content: center; gap: .35em; }
/* Rendu proportionnel des étoiles (demi-étoile réelle, pas d'arrondi) :
   calque de fond en étoiles vides (donne la largeur de référence du
   conteneur), calque avant en étoiles pleines positionné par-dessus et
   découpé à --fill (ex. 90% pour 4,5/5) via overflow:hidden. */
.star-rating { position: relative; display: inline-block; line-height: 1; }
.star-rating-bg { display: block; letter-spacing: .2em; }
.star-rating-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fill, 100%);
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .2em;
}
.testimonial-quote {
  color: var(--text);
  margin-bottom: 1.4rem;
}
/* Bouton "Voir plus" masqué par défaut — n'existe visuellement qu'en
   mobile (cf. media query plus bas), le clamp du texte n'y est appliqué
   que là aussi : desktop garde le texte complet affiché, comme avant. */
.testimonial-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin: -1rem 0 1.4rem;
  color: var(--accent-fg);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
@media (max-width: 640px) {
  /* Repli demandé par Jérémie le 2026-08-19 : le texte de l'avis est tronqué
     à 3 lignes par défaut sur mobile pour ne pas prendre trop de place ;
     "Voir plus" retire le clamp et affiche l'avis en entier. */
  .testimonial-card:not(.is-expanded) .testimonial-quote {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .5rem;
  }
  .testimonial-toggle { display: inline-block; }
}
.testimonial-result {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gold-fg);
  background: rgba(217, 166, 83, .16);
  border: 1px solid rgba(217, 166, 83, .35);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  margin-bottom: 1.75rem;
  line-height: 1.3;
}
.testimonial-rating-num { color: var(--text-faint); font-size: .78rem; font-weight: 600; margin-left: .5rem; letter-spacing: normal; }
.testimonial-author { color: var(--text); font-weight: 600; margin-top: auto; }
.testimonial-role { color: var(--text-faint); font-size: .85rem; margin-top: .2rem; }
.testimonial-verified {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: #1f9d55;
  font-size: .78rem;
  font-weight: 600;
  margin-top: .35rem;
}

.testimonial-carousel .carousel-prev { left: 0; }
.testimonial-carousel .carousel-next { right: 0; }
.testimonial-carousel .slider-dots { position: static; transform: none; justify-content: center; flex-wrap: wrap; max-width: 360px; margin: 1.5rem auto 0; }

@media (max-width: 1400px) {
  .testimonial-card { flex-basis: calc(33.333% - 1rem); }
}
@media (max-width: 960px) {
  .testimonial-card { flex-basis: calc(50% - .75rem); }
}
@media (max-width: 640px) {
  .testimonial-track-wrap { padding: 0 2.75rem; }
  .testimonial-card { flex-basis: 88%; }
}

.testimonial-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: .95rem;
  padding: 2.5rem;
  border: 1px dashed var(--line);
  border-radius: 1rem;
  max-width: 520px;
  margin: 2.5rem auto 0;
}

/* ============ FOOTER / CONTACT ============ */
/* Pas de border-top ici : la diagonale blanche (.section-diagonal-alt)
   gère déjà la transition avec la section claire au-dessus — une bordure
   en plus créait un trait dur à la jonction (repéré par Jérémie le
   2026-08-18). */
/* Footer à 3 colonnes : logo (repère de marque) à gauche, pitch/copy au
   centre (le plus large, c'est le message), informations légales à droite.
   Passé de 2 à 3 colonnes le 2026-08-19 pour ajouter un repère de marque —
   avant ça, "Coordonnées" (email + réseaux) avait déjà été retirée, doublon
   avec la section Contact qui a son propre bouton WhatsApp dédié. */
.footer-columns {
  display: grid;
  grid-template-columns: .8fr 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  text-align: left;
}
/* align-items:flex-start (pas center) pour que le logo démarre à la même
   hauteur que le titre de la colonne centrale et "Informations légales" à
   droite — centré verticalement, il partait plus bas qu'elles (repéré par
   Jérémie le 2026-08-19 : "tous les blocs sur la même ligne"). */
.footer-col-logo { display: flex; align-items: flex-start; }
/* Wordmark texte simple (pas de logo graphique dessiné pour l'instant) —
   losange doré repris du style ".eyebrow-dot" (mais statique, sans pulse,
   pour ne pas concurrencer visuellement celui du Hero) + nom sur 2 lignes. */
.footer-logo { display: inline-flex; align-items: center; gap: .85rem; }
/* Mark "flèche ascendante" (même dessin que favicon.svg) — remplace le
   simple losange CSS le 2026-08-19, demande de Jérémie pour un vrai logo.
   Agrandi le même jour pour peser visuellement autant que les 2 autres
   colonnes du footer (titre à clamp(1.3rem,1.8vw,1.6rem) ≈ 25-26px ici). */
.footer-logo-mark { width: 72px; height: 72px; flex: none; border-radius: 24%; box-shadow: 0 8px 20px -6px rgba(217, 166, 83, .5); }
.footer-logo-lockup { display: flex; flex-direction: column; line-height: 1.2; }
.footer-logo-name {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -.01em;
  color: var(--text);
}
.footer-logo-tag {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-fg);
}
.footer-col-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-bottom: 1.1rem;
}
.footer-col-legal { padding-top: .3rem; }
.footer-link {
  display: block;
  color: var(--text-soft);
  text-decoration: none;
  margin-bottom: .7rem;
  transition: color .2s ease;
}
a.footer-link:hover { color: var(--accent-fg); }
.footer-fine { color: var(--text-faint); font-size: .88rem; margin: 0; }
/* Icônes réseaux sociaux — actuellement inutilisées : la colonne
   "Coordonnées" qui les hébergeait a été retirée le 2026-08-19. Règles
   gardées (avec `renderFooterSocials()` dans script.js) pour le jour où
   Instagram/TikTok/LinkedIn seront configurés et où on décidera où les
   afficher sur le site. */
.footer-socials { display: flex; gap: .75rem; margin-top: 1.25rem; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-soft);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-social svg { width: 18px; height: 18px; }
.footer-social:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translateY(-3px); }
.footer-legal { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); text-align: center; }
.footer-legal p { color: var(--text-faint); font-size: .85rem; }

@media (max-width: 860px) {
  .footer-columns { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .footer-col-logo { justify-content: center; }
  .footer-link { display: inline-block; }
  .footer-socials { justify-content: center; }
}

/* ============ FORMULAIRE CONTACT ============ */
.contact-form .btn { margin-top: 1.5rem; }

/* ============ PAGES LÉGALES (stub, contenu à venir) ============ */
.legal-header { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.legal-back { color: var(--text-soft); text-decoration: none; font-weight: 600; font-size: .9rem; transition: color .2s ease; }
.legal-back:hover { color: var(--accent-fg); }
.legal-page { padding: clamp(3rem, 8vw, 6rem) 0; min-height: 55vh; }
.legal-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.5rem; }
.legal-page .legal-placeholder { color: var(--text-soft); max-width: 60ch; line-height: 1.7; }
.legal-page .legal-placeholder a { color: var(--accent-fg); }