/* ============================================================
   Solivalis — Clair, moderne, bleu & or
   ============================================================ */

:root{
  /* — Fonds clairs — */
  --bg: #F7F9FC;
  --bg-soft: #EEF2F8;
  --bg-card: #FFFFFF;
  --bg-warm: #FAFBFD;

  /* — Encres — */
  --ink: #0F172A;
  --ink-soft: #475569;
  --ink-mute: #64748B; /* a11y : assombri (était #94A3B8) pour passer 4.5:1 sur --bg → conforme WCAG AA texte normal */
  --ink-faint: #CBD5E1;
  --line: #E2E8F0;
  --line-soft: #F1F5F9;

  /* — Bleus — */
  --navy-900: #0A1635;
  --navy-700: #1E3A8A;
  --navy-500: #2563EB;
  --blue: #2563EB;
  --blue-bright: #3B82F6;
  --blue-glow: #60A5FA;
  --blue-light: #DBEAFE;
  --blue-soft: #EFF6FF;
  --cyan: #38BDF8;

  /* — Or — */
  --gold: #C9A227;
  --gold-bright: #E5B834;
  --gold-soft: #F5E6B8;
  --gold-light: #FBF6E4;

  /* — Cartes états — */
  --c-forts: #059669;
  --c-forts-bg: #ECFDF5;
  --c-forts-ink: #064E3B;

  --c-faibles: #DC2626;
  --c-faibles-bg: #FEF2F2;
  --c-faibles-ink: #7F1D1D;

  --c-conseils: #2563EB;
  --c-conseils-bg: #EFF6FF;
  --c-conseils-ink: #1E3A8A;

  /* — OCEAN / RIASEC — */
  --ocean-O: #3B82F6;
  --ocean-C: #C9A227;
  --ocean-E: #38BDF8;
  --ocean-A: #10B981;
  --ocean-N: #8B5CF6;

  --r-R: #EF4444;
  --r-I: #2563EB;
  --r-A: #EC4899;
  --r-S: #10B981;
  --r-E: #C9A227;
  --r-C: #8B5CF6;

  /* — Typo — */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Réduit de clamp(50px,6.6vw,84px) à clamp(42px,4.4vw,60px) le 12/06/2026.
     Diagnostic Claude Design : 84px était surdimensionné pour la colonne
     texte (~600px sur viewport PC), ce qui forçait un wrap au mot. À 60px
     max avec line-height 1.06, chaque question tient sur 1-2 lignes,
     ensemble équilibré. */
  --t-hero: clamp(42px, 4.4vw, 60px);
  --t-h1: clamp(36px, 4.4vw, 56px);
  --t-h2: clamp(34px, 4vw, 48px);
  --t-h3: clamp(20px, 1.7vw, 24px);
  --t-body: 17px;
  --t-body-l: 19px;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --max-w: 1280px;

  --shadow-soft: 0 4px 24px -8px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 10px 40px -12px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 20px 60px -20px rgba(37, 99, 235, 0.35);
  --shadow-gold: 0 12px 40px -10px rgba(201, 162, 39, 0.4);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }
html, body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
body{
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(37, 99, 235, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 25%, rgba(201, 162, 39, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 50%, rgba(59, 130, 246, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

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

h1, h2, h3, h4{
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink);
}

/* ============== HEADER ============== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  margin: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.brand{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-logo{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-bright) 0%, var(--gold) 50%, var(--blue) 100%);
  position: relative;
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.4);
}
.brand-logo::after{
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--bg-card);
  border-radius: 50%;
}
.brand-logo::before{
  content: '';
  position: absolute;
  inset: 10px;
  background: var(--gold);
  border-radius: 50%;
  z-index: 1;
}
.brand span{ color: var(--gold); margin-left: 1px; }

.nav{ display: flex; gap: 36px; }
.nav a{
  font-weight: 500; font-size: 14px;
  color: var(--ink-soft);
  transition: color .2s;
}
.nav a:hover{ color: var(--blue); }
.nav-actions{ display: flex; gap: 14px; align-items: center; }

/* Bouton hamburger : masqué en desktop, affiché en mobile (cf. @media 980px).
   Trois barres horizontales qui se transforment en croix au clic via
   aria-expanded="true". */
.nav-toggle{
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle-bar{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}
/* Liens dupliqués dans la nav pour le menu mobile uniquement (Offrir, Mon
   compte). Masqués en desktop : la version inline dans .nav-actions reste
   visible à droite. */
.nav-mobile-only{ display: none; }
.lang-switch{
  position: relative;
  display: inline-block;
}
.lang-switch-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.03em;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-switch-toggle:hover{ border-color: var(--blue); color: var(--blue); }
.lang-switch-toggle[aria-expanded="true"]{ border-color: var(--blue); color: var(--blue); }
.lang-switch-arrow{
  font-size: 10px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.lang-switch-toggle[aria-expanded="true"] .lang-switch-arrow{ transform: rotate(180deg); }
.lang-switch-list{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 50;
}
.lang-switch-list[hidden]{ display: none; }
.lang-switch-list li{ list-style: none; margin: 0; }
.lang-switch-list a{
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.lang-switch-list a:hover{ background: var(--bg-soft, #f5f7fa); }
.lang-switch-list a.active{
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 100%);
  color: #fff;
}
.lang-switch-list a[aria-disabled="true"]{ cursor: default; opacity: 0.55; }
.lang-switch-list a[aria-disabled="true"]:hover{ background: transparent; }
.lang-switch-list a[aria-disabled="true"].active:hover{
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 100%);
}
.nav-cta{
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14px;
  transition: all .25s;
  box-shadow: var(--shadow-gold);
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 16px 44px -10px rgba(201, 162, 39, 0.55); }

/* ============== HERO ============== */
.hero{
  position: relative;
  padding: 60px 48px 80px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.hero-text{ position: relative; z-index: 2; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--blue-light);
  margin-bottom: 32px;
}
.eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold);
}

.hero h1{
  font-size: var(--t-hero);
  font-weight: 400;
  margin-bottom: 32px;
  text-wrap: balance;
  color: var(--ink);
}
.hero h1 em{
  font-style: italic;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.1em;
}
.hero h1 .word-highlight{
  font-style: italic;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  padding-right: 0.1em;
}

.hero-sub{
  font-size: var(--t-body-l);
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 40px;
  line-height: 1.65;
}
.hero-sub strong{ color: var(--ink); font-weight: 600; }

.btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 16px;
  transition: all .25s;
  cursor: pointer;
  border: none;
}
.btn--accent{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn--accent:hover{ transform: translateY(-2px); box-shadow: 0 18px 50px -10px rgba(201, 162, 39, 0.6); }
.btn--ghost{
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover{ border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-soft); }
.btn--block{ width: 100%; justify-content: center; }
.arrow{ transition: transform .2s; }
.btn:hover .arrow{ transform: translateX(4px); }

.hero-meta{
  margin-top: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex; gap: 24px; flex-wrap: wrap;
}
.hero-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before{
  content: '';
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
}

/* === Hero visual: orbital === */
.hero-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Empêche la mascotte de déborder verticalement à toutes les tailles d'écran */
  min-height: 0;
  overflow: visible;
}
.hero-visual img{
  width: 100%;
  /* La mascotte ne peut jamais dépasser la hauteur de son conteneur,
     ce qui évite le chevauchement avec le contenu au-dessus et en dessous */
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  display: block;
}
.hero-orb{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 35%),
    radial-gradient(circle at 70% 70%, var(--gold-bright) 0%, var(--gold) 25%, transparent 55%),
    radial-gradient(circle at 50% 50%, var(--blue-bright) 0%, var(--blue) 50%, var(--navy-700) 100%);
  box-shadow:
    0 0 80px rgba(37, 99, 235, 0.4),
    0 0 120px rgba(201, 162, 39, 0.25),
    inset -20px -30px 60px rgba(0,0,0,0.3);
  animation: orbFloat 8s ease-in-out infinite;
}
.orbit-ring{
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid;
  border-radius: 50%;
  pointer-events: none;
}
.orbit-ring.r1{ width: 460px; height: 460px; margin: -230px 0 0 -230px; border-color: rgba(201, 162, 39, 0.3); animation: spin 30s linear infinite; }
.orbit-ring.r2{ width: 560px; height: 560px; margin: -280px 0 0 -280px; border-color: rgba(37, 99, 235, 0.18); border-style: dashed; animation: spin 50s linear infinite reverse; }

.orbit-tag{
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}
.orbit-tag::before{
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.orbit-tag.t1{ top: 8%; left: 5%; }
.orbit-tag.t1::before{ background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.orbit-tag.t2{ top: 20%; right: 0%; }
.orbit-tag.t3{ bottom: 18%; left: 0%; }
.orbit-tag.t3::before{ background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.orbit-tag.t4{ bottom: 8%; right: 8%; }

@keyframes orbFloat{
  0%, 100%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -52%) scale(1.02); }
}
@keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* ============== Trust strip ============== */
.trust-strip{
  max-width: var(--max-w);
  margin: 0 auto 40px;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trust-item{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: all .3s;
  box-shadow: var(--shadow-soft);
}
.trust-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--gold); }
.trust-num{
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  display: block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.trust-label{ font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-top: 8px; }

/* ============== STD SECTIONS ============== */
.std{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 70px 48px;
  position: relative;
}
.section-head{ text-align: center; margin-bottom: 50px; }
.section-head .eyebrow{ margin-bottom: 24px; }
.section-head h2{
  font-size: var(--t-h2);
  font-weight: 400;
  white-space: pre-line;
  text-wrap: balance;
}
.section-head h2 em{
  font-style: italic;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-right: 0.1em;
  -webkit-text-fill-color: transparent;
}

/* === ABOUT (image frame doubled) === */
.about-content{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-text p{ font-size: var(--t-body-l); color: var(--ink-soft); margin-bottom: 22px; line-height: 1.7; }
.about-text strong{ color: var(--blue); font-weight: 600; }
.about-image{
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, var(--blue-light) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--gold-light) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-card) 100%);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
}
.about-image img{ width: 100%; height: 100%; object-fit: cover; }
.about-image-fallback{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  text-align: center;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* Séparateur visuel entre OCEAN et RIASEC : était un caractère ✦ en
   dégradé doré ; remplacé le 04/06/2026 par un disque plein (demande
   Gaby). Pas de modification de l'arrière-plan du bloc. */
.about-image-fallback span{
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.3);
}

/* === HOW === */
.how-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-step{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  transition: all .3s;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.how-step::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%);
}
.how-step:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.step-num{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-glow);
}
.how-step h3{ font-size: var(--t-h3); margin-bottom: 14px; font-weight: 500; }
.how-step p{ color: var(--ink-soft); font-size: 16px; line-height: 1.65; }

/* ============== PRICING ============== */
.pricing-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 920px; margin: 0 auto;
}
.price-card{
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 38px;
  transition: all .3s;
  box-shadow: var(--shadow-soft);
}
.price-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }
.price-card--pro{
  background:
    radial-gradient(ellipse at top right, rgba(201, 162, 39, 0.08) 0%, transparent 60%),
    var(--bg-card);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
}

.price-badge{
  position: absolute; top: 28px; right: 28px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.price-card h3{ font-size: 24px; font-weight: 500; margin-bottom: 16px; }
.price-amount{
  font-family: var(--font-display);
  font-size: 64px; font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-card--pro .price-amount{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price-amount-alt{ color: var(--ink-mute); font-size: 14px; margin: 8px 0 32px; font-weight: 500; }
.price-list{ list-style: none; margin-bottom: 36px; }
.price-list li{
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px;
}
.price-list li::before{
  content: '✓';
  color: var(--gold);
  font-weight: 800;
  width: 20px; flex-shrink: 0;
}

/* ============== FOOTER ============== */
.site-footer{ margin-top: 60px; border-top: 1px solid var(--line); background: var(--bg-card); }
.footer-image-block{
  width: 100%;
  height: 200px;
  background:
    radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(201, 162, 39, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 50%, var(--bg-soft) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* Symbole décoratif central du divider footer-image-block : était un
   caractère ✦ stylé en dégradé doré ; remplacé le 04/06/2026 par un
   disque plein de même couleur (demande Gaby). L'arrière-plan dégradé
   bleu/or de la bannière reste inchangé. */
.footer-image-block::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.4));
}
.footer-content{ max-width: var(--max-w); margin: 0 auto; padding: 56px 48px 36px; }
.footer-links{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.footer-col h4{ font-family: var(--font-body); font-size: 12px; font-weight: 700; margin-bottom: 18px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; }
.footer-col a{ font-size: 14px; color: var(--ink-soft); transition: color .2s; display: block; padding: 5px 0; }
.footer-col a:hover{ color: var(--blue); }
.footer-col p{ font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin-top: 14px; max-width: 320px; }
.footer-col .brand{ font-size: 22px; display: inline-flex; }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; color: var(--ink-mute); flex-wrap: wrap; }

/* ============================================================
   TEST OVERLAY  (questions plus voyantes — fond coloré, texte blanc)
   ============================================================ */
.test-overlay, .results-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  display: none;
}
.test-overlay.active, .results-overlay.active{ display: block; }

.test-header{
  position: sticky; top: 0; z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 40px 14px;
  background: rgba(247, 249, 252, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.test-close{
  font-weight: 600; font-size: 14px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: all .2s;
}
.test-close:hover{ background: var(--line-soft); color: var(--ink); }
.test-progress-info{ text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.test-progress-info #qNum{ color: var(--blue); font-weight: 700; }
.progress-bar-wrap{
  grid-column: 1 / -1;
  height: 6px; background: var(--line-soft);
  border-radius: var(--radius-pill); overflow: hidden;
  margin-top: 12px;
}
.progress-bar{
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-bright) 50%, var(--gold) 100%);
  transition: width .5s ease;
  border-radius: var(--radius-pill);
}

.test-stage{ padding: 60px 40px 100px; position: relative; }
.question-shell{
  max-width: 780px; margin: 0 auto;
  text-align: center;
  position: relative;
  transition: opacity .25s ease, transform .25s ease;
}
.question-shell.fade-out{ opacity: 0; transform: translateY(12px); }

/* === Section tag : discret, fond blanc, bordure colorée === */
.section-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--section-color, var(--blue));
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 28px;
  color: var(--section-color, var(--blue)) !important;
  background: var(--bg-card);
  box-shadow: none;
}
.section-tag .tag-group{ font-weight: 600; opacity: 0.7; font-size: 1em; letter-spacing: 0.14em; text-transform: uppercase; }
.section-tag .tag-name{ font-weight: 700; }

.question-num{
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.2em;
  margin-bottom: 24px;
}
.question-text{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 56px;
  text-wrap: balance;
}
.answers{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.answer{
  width: 100%;
  padding: 20px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  font-size: 17px; font-weight: 500;
  color: var(--ink);
  transition: all .2s;
}
.answer:hover{ border-color: var(--blue); box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.15); transform: translateY(-1px); }
.answer.selected{
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 100%);
  color: #fff;
  border-color: var(--navy-700);
  box-shadow: var(--shadow-glow);
}
.test-controls{ display: flex; justify-content: space-between; gap: 16px; }
.test-ctrl{
  padding: 12px 24px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px;
  color: var(--ink-soft);
  transition: all .2s;
}
.test-ctrl:hover:not(:disabled){ border-color: var(--ink); color: var(--ink); }
.test-ctrl:disabled{ opacity: .35; cursor: not-allowed; }
.test-ctrl--primary{
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.test-ctrl--primary:hover:not(:disabled){ transform: translateY(-1px); }

/* ============================================================
   RESULTS — sidebar fixe à gauche, fit-without-scroll
   ============================================================ */
.results-overlay-layout{
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  height: 100vh;
}
.results-sidebar{
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-right: 1px solid var(--line);
  padding: 12px 10px 14px;
  height: 100vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
  font-size: 13px;
  scrollbar-width: thin;
}
.results-sidebar::-webkit-scrollbar{ width: 4px; }
.results-sidebar::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
.results-sidebar .sidebar-brand{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  padding: 2px 8px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 9px;
  color: var(--ink);
}
.results-sidebar .sidebar-brand .brand-logo{ width: 22px; height: 22px; }
.results-sidebar .sidebar-brand .brand-logo::after{ inset: 4px; }
.results-sidebar .sidebar-brand .brand-logo::before{ inset: 7px; }
.results-sidebar .sidebar-brand span{ color: var(--gold); }
.sidebar-back{
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 5px 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  margin-bottom: 4px;
  align-self: flex-start;
}
.sidebar-back:hover{ background: var(--line-soft); color: var(--ink); }
.sidebar-account{
  font-size: 12px; font-weight: 600; color: var(--gold);
  padding: 5px 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  margin-bottom: 8px;
  align-self: flex-start;
  text-decoration: none;
}
.sidebar-account:hover{ background: var(--gold-light); color: var(--gold-bright); }
.sidebar-section{
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 7px 8px 2px;
}
.sidebar-link{
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  border-radius: 6px;
  transition: all .15s;
  cursor: pointer;
  line-height: 1.15;
}
.sidebar-link:hover{ background: var(--line-soft); color: var(--ink); }
.sidebar-link.active{
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, transparent 100%);
  color: var(--blue);
  font-weight: 600;
}
.sidebar-link .nav-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sidebar-link .nav-pct{ margin-left: auto; font-size: 10.5px; color: var(--ink-mute); font-weight: 600; }

/* Mobile dropdown nav — hidden on desktop */
.results-mobile-nav{ display: none; }
.results-overlay-layout > .results-mobile-nav{ grid-column: 1 / -1; }

.results-content-area{
  position: relative;
  overflow-y: auto;
  height: 100vh;
}
.results-content-topbar{
  display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 249, 252, 0.92);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 9;
  gap: 12px;
}
.results-content-topbar .lang-switch{ background: var(--bg-card); }

.results-stage-full{
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 36px 60px;
}
.results-head{ margin-bottom: 40px; text-align: center; }
.results-head .eyebrow{ margin-bottom: 18px; }
.results-head h1{
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  margin-bottom: 18px;
}
.results-head h1 em{
  font-style: italic;
  background: linear-gradient(135deg, var(--blue) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.1em;
}
.results-head p{ font-size: var(--t-body-l); color: var(--ink-soft); max-width: 640px; margin: 0 auto; }

.overview-chart{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-soft);
}
.overview-chart h2{ font-family: var(--font-display); font-size: 30px; font-weight: 400; margin-bottom: 6px; }
.overview-chart .subtitle{ color: var(--ink-mute); font-size: 14px; margin-bottom: 28px; font-weight: 500; }
.chart-row{
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.chart-row:last-child{ border-bottom: none; }
.chart-label{ display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.chart-track{ height: 10px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; }
.chart-fill{ height: 100%; border-radius: var(--radius-pill); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.chart-pct{ text-align: right; font-weight: 600; font-size: 16px; font-family: var(--font-display); }

.holland-block{ margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; }
.holland-block .label{ font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 18px; }
.holland-code{ display: flex; justify-content: center; gap: 14px; margin-bottom: 16px; }
.holland-letter{
  width: 72px; height: 72px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display);
  font-weight: 500; font-size: 32px;
  box-shadow: var(--shadow-card);
}
.holland-block p{ color: var(--ink-mute); font-size: 14px; }

/* ===== SECTION DIVIDERS  ===== */
.divider-h{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 40px 0 24px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}
.divider-h .small{
  display: block;
  font-family: var(--font-body);
  color: var(--ink-mute);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ===== TRAITS ===== */
.trait{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0 36px 36px;
  margin-bottom: 28px;
  scroll-margin-top: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.trait-banner{
  margin: 0 -36px 28px;
  height: 280px;
  background: linear-gradient(135deg, var(--banner-a, var(--blue)) 0%, var(--banner-b, var(--navy-700)) 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.trait-banner::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.18) 0%, transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.12) 0%, transparent 40%);
}
.trait-banner-fallback{ color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; position: relative; z-index: 1; }
.trait-head{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; }
.trait-name{ font-family: var(--font-display); font-size: clamp(18px, 5.5vw, 36px); font-weight: 400; }
.trait-subtitle{ font-size: 11px; font-weight: 600; letter-spacing: 0.16em; margin-top: 4px; text-transform: uppercase; }
.trait-percent{ font-family: var(--font-display); font-size: clamp(26px, 8vw, 52px); font-weight: 400; line-height: 1; }
.trait-bar{ height: 12px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 8px; }
.trait-bar-fill{ height: 100%; border-radius: var(--radius-pill); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.trait-poles{ display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-mute); margin-bottom: 28px; font-weight: 500; letter-spacing: 0.04em; }
.trait-desc{
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  padding: 24px 28px;
  background: var(--bg-warm);
  border-radius: var(--radius);
  margin-bottom: 24px;

}

/* 3 cartes — fonts agrandies */
.trait-cards{ display: flex; flex-direction: column; gap: 16px; }
.t-card{
  border-radius: var(--radius);
  padding: 30px 32px;
  font-size: 17px;
  line-height: 1.75;
  border: 1px solid;
}
.t-card-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.t-card-icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px;
  color: #fff;
}
/* Icônes SVG Lucide dans les cartes (variante E : zap / target / lightbulb) */
.t-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.t-card h4{ font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.t-card-body p{ margin-bottom: 14px; font-size: 17px; }
.t-card-body p:last-child{ margin-bottom: 0; }
.t-card-body strong{ font-weight: 700; }
.t-card.forts{ background: #fff; color: var(--ink-soft); border-color: var(--line); border-left: 4px solid var(--c-forts); }
.t-card.forts .t-card-icon{ background: var(--c-forts); color: #fff; }
.t-card.forts h4{ color: var(--ink); }
.t-card.faibles{ background: #fff; color: var(--ink-soft); border-color: var(--line); border-left: 4px solid var(--c-faibles); }
.t-card.faibles .t-card-icon{ background: var(--c-faibles); color: #fff; }
.t-card.faibles h4{ color: var(--ink); }
.t-card.conseils{ background: #fff; color: var(--ink-soft); border-color: var(--line); border-left: 4px solid var(--c-conseils); }
.t-card.conseils .t-card-icon{ background: var(--c-conseils); color: #fff; }
.t-card.conseils h4{ color: var(--ink); }

/* === LOCKED state for paid sections === */
.t-card-stack-locked, .synthesis-locked{
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-soft) 100%);
  border: 1px dashed var(--line);
  padding: 48px 40px;
  text-align: center;
  margin-top: 16px;
}
.t-card-stack-locked::before{
  content: '🔒';
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
  filter: grayscale(0.3);
}
.locked-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--ink);
}
.locked-sub{ font-size: 15px; color: var(--ink-soft); margin-bottom: 22px; max-width: 480px; margin-left: auto; margin-right: auto; }
.locked-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #fff;
  font-weight: 700; font-size: 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-gold);
  cursor: pointer;
  border: none;
}
.locked-btn:hover{ transform: translateY(-1px); }

/* ===== SYNTHÈSE CROISÉE (clair) ===== */
.synthesis{
  background:
    radial-gradient(ellipse at top right, rgba(201, 162, 39, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
    var(--bg-card);
  color: var(--ink);
  border: 2px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: 24px 48px 56px;
  margin: 48px 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-gold);
  /* text-align par défaut : à gauche (lecture longue plus confortable) */
  text-align: left;
}
/* Centrage explicite uniquement pour le badge et le titre principal */
.synthesis > .synthesis-eyebrow,
.synthesis > h2 {
  text-align: center;
}
/* Le badge .synthesis-eyebrow utilise un display:inline-flex qui ignore text-align,
   donc on force son centrage via la marge auto sur son conteneur */
.synthesis > .synthesis-eyebrow {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.synthesis::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 90px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%);
}
.synthesis-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.2);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.3);
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
  margin-top: 4px;
}
.synthesis h2{ font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 400; margin-bottom: 22px; }
.synthesis h2 em{
  font-style: italic;
  background: linear-gradient(135deg, var(--blue) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.1em;
}
.synthesis-intro{ font-size: 18px; color: var(--ink-soft); margin-bottom: 36px; max-width: 720px; line-height: 1.7; }
.synthesis-intro strong{ color: var(--gold); font-weight: 700; }
.synthesis-grid{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.synth-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.synth-card h3{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  margin-bottom: 18px;
  color: var(--ink);
}
.synth-card p{ color: var(--ink-soft); font-size: 17px; line-height: 1.75; margin-bottom: 14px; }
.synth-card p:last-child{ margin-bottom: 0; }
.synth-card strong{ color: var(--ink); font-weight: 700; }
.synthesis-careers{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
}
.synthesis-careers h3{ font-family: var(--font-display); font-size: 18px; margin-bottom: 18px; font-weight: 500; color: var(--ink); }
.career-item{
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.career-item:last-child{ border-bottom: none; }
.career-item h4{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--blue);
  margin-bottom: 8px;
}
.career-item p{ color: var(--ink-soft); font-size: 16px; line-height: 1.7; }

/* ===== Results actions ===== */
.results-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.action-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-soft);
}
.action-card--accent{
  background:
    radial-gradient(ellipse at top right, rgba(201, 162, 39, 0.1) 0%, transparent 50%),
    var(--bg-card);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.action-card h3{ font-family: var(--font-display); font-size: 24px; margin-bottom: 12px; font-weight: 500; }
.action-card p{ font-size: 15px; margin-bottom: 24px; color: var(--ink-soft); line-height: 1.65; }
.results-email-action{
  text-align: center;
  margin-top: 40px;
  padding: 32px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.results-email-action p{
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 16px 0;
}
.results-email-action .btn{
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}
.email-results-feedback{
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.email-results-feedback--success{
  background: var(--gold-light);
  color: var(--ink);
  border-left: 3px solid var(--gold);
}
.email-results-feedback--error{
  background: #FEF2F2;
  color: #991B1B;
  border-left: 3px solid #DC2626;
}

.results-restart{
  text-align: center;
  margin-top: 20px;
  padding: 32px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.results-restart h3{
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px 0;
}
.results-restart p{
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 16px 0;
}
.results-restart .btn{
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* ===== Modals ===== */
.modal-backdrop{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-backdrop.active{ display: flex; }
.modal{
  background: var(--bg-card);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 44px;
  max-width: 480px; width: 100%;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.4);
}
.modal-close{
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  color: var(--ink-mute);
}
.modal-close:hover{ background: var(--line-soft); color: var(--ink); }
.modal-eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.modal h3{ font-family: var(--font-display); font-size: 30px; font-weight: 400; margin-bottom: 6px; }
.modal-sub{ color: var(--ink-mute); margin-bottom: 28px; font-size: 14px; font-weight: 500; }
.field{ margin-bottom: 16px; }
.field label{ display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; letter-spacing: 0.08em; text-transform: uppercase; }
.field input{
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit; font-size: 15px;
  background: var(--bg);
  color: var(--ink);
}
.field input:focus{ outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
.field-hint{ font-size: 12px; color: var(--ink-mute); margin-top: 6px; font-weight: 500; }

/* Feedback visuel pour un champ obligatoire vide (validation client).
   Utilisé par /offrir-le-test/ (tâche #43) et réutilisable sur tout
   formulaire qui ajoute la classe .is-error sur le <div class="field">.
   Border rouge sur l'input + message rouge sous le champ + animation
   shake courte au moment de l'erreur. */
.field.is-error input,
.field.is-error textarea,
.field.is-error select {
	border-color: #dc2626 !important;
	background-color: #fef2f2 !important;
	outline: 2px solid rgba(220, 38, 38, 0.15);
	outline-offset: 1px;
}
.field-error-msg {
	display: block;
	font-size: 12px;
	color: #b91c1c;
	margin-top: 6px;
	font-weight: 600;
	animation: solivalis-field-error-shake 0.32s ease-in-out;
}
@keyframes solivalis-field-error-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* Bannière d'erreur globale en haut d'un formulaire, affichée quand au
   moins un champ est en .is-error après validation JS. Utilisée sur
   /offrir-le-test/ (cf. tâche #43). Wording validé par Gaby le 05/06/2026 :
   « Merci de renseigner les champs surlignés en rouge. » */
.offer-form-error-banner {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 24px;
	font-weight: 600;
	font-size: 14px;
	color: #b91c1c;
	animation: solivalis-field-error-shake 0.32s ease-in-out;
}
.offer-form-error-banner[hidden] { display: none; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.modal-secure{ text-align: center; font-size: 12px; color: var(--ink-mute); margin-top: 16px; font-weight: 500; }
.modal--success{ text-align: center; }
.check{
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-forts) 0%, #10B981 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 600;
  margin: 0 auto 22px;
  box-shadow: 0 12px 32px -8px rgba(16, 185, 129, 0.5);
}

/* === Choice tiles in modal === */
.choice-tile{
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 12px;
  transition: all .2s;
  cursor: pointer;
}
.choice-tile:hover{ border-color: var(--blue); background: var(--blue-soft); }
.choice-tile h4{ font-family: var(--font-body); font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.choice-tile p{ font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .results-overlay-layout{
    grid-template-columns: 1fr;
    height: 100vh;
  }
  .results-sidebar{ display: none; }

  .results-mobile-nav{
    display: block;
    position: sticky; top: 0; z-index: 9;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
    padding: 12px 20px;
    text-align: center;
  }
  .results-mobile-nav-actions{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .results-mobile-home,
  .results-mobile-account{
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-pill, 999px);
    transition: color 0.15s ease, background 0.15s ease;
  }
  .results-mobile-home:hover,
  .results-mobile-account:hover{
    color: var(--blue);
    background: var(--blue-soft);
  }
  .results-mobile-account{
    color: var(--gold);
  }
  .results-mobile-account:hover{
    color: var(--gold-bright);
    background: var(--gold-light);
  }
  .results-mobile-nav-toggle{
    width: 100%;
    max-width: 380px;
    display: inline-flex; align-items: center; justify-content: space-between;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 14px; font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    gap: 12px;
  }
  .results-mobile-dropdown{
    display: none;
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 8px 0;
    width: calc(100% - 40px);
    max-width: 380px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 20;
  }
  .results-mobile-dropdown.open{ display: block; }
  .results-mobile-dropdown a{
    display: flex; align-items: center; gap: 9px;
    padding: 9px 18px;
    font-size: 13px; font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .results-mobile-dropdown a:hover{ background: var(--line-soft); color: var(--ink); }
  .results-mobile-dropdown a.active{ background: var(--blue-soft); color: var(--blue); }
  .results-mobile-dropdown a span:last-child:not(.nav-dot){ flex: 1; }
  .results-mobile-dropdown .nav-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .results-mobile-dropdown .dropdown-divider{ height: 1px; background: var(--line); margin: 6px 0; }
  .results-mobile-dropdown .dropdown-label{ padding: 6px 18px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
  .results-content-topbar{ display: none; }
}

@media (max-width: 980px){
  .site-header{ margin: 8px 12px 0; padding: 10px 16px; position: relative; }
  /* Menu mobile : hamburger affiché, nav transformée en panneau déroulant
     absolu sous le header. Liens À propos/Méthode/Tarif + duplicatas Offrir
     et Mon compte visibles via .nav-mobile-only. */
  .nav-toggle{ display: inline-flex; order: -1; margin-right: 4px; }
  .nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }
  .nav.is-open{ display: flex; }
  .nav a{
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child{ border-bottom: none; }
  .nav-mobile-only{ display: block; }
  /* Masque Offrir et Mon compte dans la barre de droite : disponibles via
     le menu hamburger pour éviter le tronquage « Mc » constaté en audit. */
  .nav-actions .nav-gift,
  .nav-actions .nav-login{ display: none; }
  /* Note : le passage du hero en colonne unique se faisait ici à 980px,
     trop tôt (laptops entre 800-980px en colonne unique inutilement,
     bug #88). Le passage en colonne unique est maintenant déclenché à
     800px (cf. @media (max-width: 800px) plus bas). On garde quand
     même les ajustements de hero-visual à 980px car le visuel commence
     à être à l'étroit dès cette largeur même quand le hero est encore
     en 2 colonnes. */
  /* Hauteur explicite et bornée du conteneur de la mascotte sur tablette/mobile.
     L'image dedans est en max-height: 100% donc elle s'adapte sans déborder. */
  .hero-visual{ height: 420px; max-height: 60vh; }
  .hero-orb{ width: 280px; height: 280px; }
  .orbit-ring.r1{ width: 360px; height: 360px; margin: -180px 0 0 -180px; }
  .orbit-ring.r2{ width: 440px; height: 440px; margin: -220px 0 0 -220px; }
  .orbit-tag{ font-size: 13px; padding: 8px 14px; }
  .trust-strip{ grid-template-columns: 1fr 1fr; padding: 0 24px; }
  .std{ padding: 70px 24px; }
  .how-grid, .pricing-grid, .results-actions, .about-content{ grid-template-columns: 1fr; gap: 24px; }

  .footer-links{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-content{ padding: 48px 24px 32px; }
  .test-stage, .results-stage-full{ padding-left: 20px; padding-right: 20px; }
  .trait{ padding: 0 22px 26px; }
  .trait-banner{ margin: 0 -22px 24px; }
  .test-header{ padding: 14px 20px 12px; }
  .synthesis{ padding: 36px 24px; }
}

/* Hero en colonne unique uniquement sous 800px (était 980px — bug #88
   qui forçait la colonne unique dès les écrans laptop standards).
   Au-dessus de 800px le hero reste en 2 colonnes (texte + visuel)
   même si le viewport est étroit ; sous 800px le texte commence à être
   trop serré à côté du visuel donc on bascule en colonne unique. */
@media (max-width: 800px){
  .hero{ grid-template-columns: 1fr; padding: 60px 24px 80px; gap: 50px; }
}

/* Hauteur réduite du visuel hero sur petites tablettes et grands mobiles */
@media (max-width: 700px){
  .hero-visual{ height: 360px; max-height: 50vh; }
  .hero{ padding: 40px 20px 60px; gap: 40px; }

  /* Bannières de trait OCEAN/RIASEC : sur desktop, la hauteur fixe 280px
     est cohérente avec la largeur étalée (~1200px) et le ratio ~4:1 des
     images sources, donc l'image rentre. Sur smartphone (largeur ~390px),
     forcer 280px de haut + object-fit:cover zoomait violemment dans le
     centre vertical et tronquait les bords de l'image — bug remonté par
     Gaby (#95).
     Fix : sur petits écrans, on passe à un aspect-ratio 3/1 qui respecte
     le format paysage moyen des images (ratios sources : 2.84 à 4.21).
     L'image est ainsi affichée quasi-entièrement, sans tronçage majeur. */
  .trait-banner{
    height: auto;
    aspect-ratio: 3 / 1;
  }
}

/* Hauteur encore réduite sur smartphones */
@media (max-width: 480px){
  .hero-visual{ height: 300px; max-height: 45vh; }
}

/* Bouton scroll-top en mobile : taille réduite + repositionnement + réserve
   d'espace dans le footer pour ne pas chevaucher le texte du copyright
   « © 2026 Solivalis · Basé sur les modèles libres OCEAN & RIASEC. »
   (bug constaté pendant l'audit mobile du 04/06/2026). */
@media (max-width: 600px){
  .scroll-top{
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .footer-bottom{
    padding-bottom: 56px;
  }
}

/* Holland desc more visible */
.holland-desc{
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 500;
}

/* Scroll to top button */
.scroll-top{
  position: fixed;
  bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 150;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: all .2s;
}
.scroll-top:hover{ background: var(--blue); color: #fff; border-color: var(--blue); }
.scroll-top.visible{ display: flex; }

/* Restart remaining */
.restart-remaining{
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 8px;
}

/* Pricing: fix double border on price card */
.price-card--pro{
  border: 1px solid var(--gold);
}

/* Sur mobile, le badge « RECOMMANDÉ » en position absolue (top: 28px,
   right: 28px) se superposait au titre H3 « Profil approfondi » parce
   que la card est étroite sur petit écran (bug remonté par Gaby le
   12/06/2026). On le repasse en flux normal sur les viewports <700px
   pour qu'il s'affiche proprement au-dessus du H3 (le HTML place déjà
   .price-badge AVANT le H3 dans le DOM, donc en static il se place
   naturellement au bon endroit). */
@media (max-width: 700px) {
  .price-badge {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
  }
}

/* Paid access modal: eyebrow bigger */
#paidAccessModal .modal-eyebrow{
  font-size: 13px;
}

/* About image fallback: horizontal */
.about-image-fallback{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px;
}
/* 2e déclaration (ligne 1643) : était font-size:48px + clip-text qui
   ré-écrasait le disque défini ligne 570. Adaptée le 04/06/2026 pour
   produire un disque plein rempli (demande Gaby), même dégradé doré. */
.about-image-fallback span{
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
  line-height: 1;
}
/* OCEAN/RIASEC letters under about text */
.acronym-letters{
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: -12px;
  margin-bottom: 22px;
}
.acronym-letters strong{
  color: var(--ink);
  font-weight: 700;
}

/* ===== Login button ===== */
.nav-login{
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color .2s;
}
.nav-login:hover{ color: var(--blue); }

.login-panel{ min-height: 140px; }
.login-switch{
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.login-switch-btn{
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
}
.login-switch-btn:hover{ color: var(--navy-700); text-decoration: underline; }

/* ===== About blocks (OCEAN / RIASEC / Cross) ===== */
.about-block{
  text-align: center;
  padding: 40px 0;
  max-width: 800px;
  margin: 0 auto;
}
.about-block + .about-block{
  border-top: 1px solid var(--line-soft);
}
.about-block-title{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 12px;
}
.about-block-title span{
  color: var(--ink-mute);
  font-weight: 400;
  margin: 0 8px;
}
.about-block-line{
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  margin: 0 auto 16px;
  border-radius: 2px;
}
.about-block .acronym-letters{
  text-align: center;
  margin-bottom: 12px;
  margin-top: 0;
}
.about-block-desc{
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}
.about-block--cross{
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  border: none;
  margin-top: 24px;
}
.about-block--cross .about-block-title{
  font-size: 22px;
}
.about-ocean-label{ color: var(--blue); }
.about-riasec-label{ color: var(--blue); }



/* ============================================================
   PAGES LEGALES (Mentions legales, Confidentialite, CGV)
   ============================================================ */
.legal-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 60px 24px 80px;
}
.legal-page h1 {
	font-size: 38px;
	font-weight: 800;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}
.legal-page .legal-eyebrow {
	color: var(--ink-mute, #888);
	font-size: 14px;
	margin-bottom: 36px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.legal-page h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 36px 0 14px;
}
.legal-page h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 22px 0 10px;
}
.legal-page p,
.legal-page li {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft, #333);
	margin-bottom: 12px;
}
.legal-page ul {
	padding-left: 22px;
	margin-bottom: 16px;
}
.legal-page a {
	color: #2E7B8E;
	text-decoration: underline;
}
.legal-page .placeholder {
	background: #fff8e1;
	padding: 2px 6px;
	border-radius: 3px;
	color: #8a6500;
	font-weight: 600;
}
.legal-page .back-link {
	display: inline-block;
	margin-bottom: 30px;
	color: var(--ink-mute, #888);
	font-size: 14px;
	text-decoration: none;
}
.legal-page .updated {
	font-size: 13px;
	color: var(--ink-mute, #999);
	font-style: italic;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}
.legal-page .summary-box {
	background: #f0f7f9;
	border-left: 4px solid #2E7B8E;
	padding: 18px 22px;
	border-radius: 6px;
	margin: 24px 0;
}
.legal-page .summary-box p {
	margin: 0;
}
.legal-page table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 15px;
}
.legal-page th,
.legal-page td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	vertical-align: top;
}
.legal-page th {
	background: #f7f7f7;
	font-weight: 600;
}

/* Tableaux des pages légales : sur mobile étroit, le tableau de la Politique
   de confidentialité (4 colonnes) dépassait à droite. Sous 640px, on passe
   le <table> en bloc scrollable horizontalement — le layout table interne
   reste préservé via les display table-row / table-cell par défaut. */
@media (max-width: 640px) {
	.legal-page table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
}

/* ============================================================
   PAGE OFFRIR LE TEST (formulaire de saisie cadeau)
   ============================================================ */
.offer-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 24px 80px;
}
.offer-page .back-link {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--ink-mute, #888);
	font-size: 14px;
	text-decoration: none;
}
.offer-head {
	margin-bottom: 40px;
}
.offer-head .eyebrow {
	display: inline-block;
	color: var(--gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.offer-head h1 {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px 0;
	letter-spacing: -0.02em;
}
.offer-sub {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
}

.offer-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.offer-section {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 28px;
}
.offer-section h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 18px 0;
	color: var(--ink);
}
.offer-section .field {
	margin-bottom: 16px;
}
.offer-section .field:last-child {
	margin-bottom: 0;
}
.offer-section label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.offer-section label .optional {
	font-weight: 400;
	color: var(--ink-mute);
}
.offer-section input[type="text"],
.offer-section input[type="email"],
.offer-section input[type="datetime-local"],
.offer-section textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.offer-section input:focus,
.offer-section textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: none;
}
.offer-section .field-hint {
	font-size: 12px;
	color: var(--ink-mute);
	margin-top: 6px;
	line-height: 1.5;
}

/* Tuiles radio pour message_type et send_when */
.radio-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
@media (max-width: 600px) {
	.radio-group {
		grid-template-columns: 1fr;
	}
}
.radio-tile {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.radio-tile:has(input:checked) {
	border-color: var(--blue);
	background: rgba(37, 99, 235, 0.04);
}
.radio-tile input {
	margin: 0;
	accent-color: var(--blue);
	flex-shrink: 0;
	margin-top: 3px;
}
.radio-tile-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.radio-tile-body strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.radio-tile-body span {
	font-size: 12px;
	color: var(--ink-mute);
	line-height: 1.4;
}

/* Page /offert/ (bénéficiaire qui réclame son cadeau) — réutilise les styles
   de .offer-page en partageant via un sélecteur multiple plus haut. */
.offert-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 24px 80px;
}
.offert-head {
	margin-bottom: 40px;
	text-align: center;
}
.offert-head .eyebrow {
	display: inline-block;
	color: var(--gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.offert-head h1 {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 16px 0;
	letter-spacing: -0.02em;
}
.offert-head h1 em {
	font-style: normal;
	color: var(--gold);
}
.offert-sub {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 auto 16px;
	max-width: 560px;
}
.offert-message {
	margin: 24px auto 0;
	padding: 20px 24px;
	background: var(--gold-light);
	border-left: 4px solid var(--gold);
	border-radius: 10px;
	max-width: 560px;
	font-style: italic;
	color: var(--ink);
	line-height: 1.6;
	text-align: left;
}
.offert-notice {
	margin-bottom: 24px;
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
}
.offert-notice--error {
	background: #FEF2F2;
	border-left: 3px solid #DC2626;
	color: #991B1B;
}
.offert-notice--success {
	background: var(--gold-light);
	border-left: 3px solid var(--gold);
	color: var(--ink);
}
.offert-error {
	max-width: 480px;
	margin: 60px auto;
	text-align: center;
	padding: 32px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 14px;
}
.offert-error h1 {
	font-size: 24px;
	margin: 0 0 16px;
	color: var(--ink);
}
.offert-error p {
	color: var(--ink-soft);
	margin: 0 0 24px;
	line-height: 1.6;
}
.offert-page .offer-section-sub {
	font-size: 13px;
	color: var(--ink-mute);
	margin: 0 0 16px;
}

.message-standard-preview {
	margin: 0 0 16px 0;
	padding: 12px 16px;
	background: var(--bg-soft, #f7f9fc);
	border-left: 3px solid var(--line);
	border-radius: 8px;
}
.message-standard-preview .preview-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.message-standard-preview .preview-body p {
	font-size: 12.5px;
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0 0 6px 0;
}
.message-standard-preview .preview-body p:last-child {
	margin-bottom: 0;
}
.message-standard-preview .preview-body em {
	font-style: italic;
	color: var(--ink-mute);
}

.offer-actions {
	margin-top: 8px;
	text-align: center;
}
.offer-actions .btn {
	font-size: 16px;
	padding: 16px 32px;
}
.offer-secure {
	margin-top: 14px;
	font-size: 12px;
	color: var(--ink-mute);
}

/* ============================================================
   MULTI-CADEAUX — Fiches bénéficiaires (1 à 5) sur /offrir-le-test/
   ============================================================ */

.offer-section h2 .section-hint {
	font-weight: 400;
	color: var(--ink-mute);
	font-size: 14px;
	margin-left: 6px;
}
.offer-section .section-help {
	font-size: 13px;
	color: var(--ink-mute);
	margin: 0 0 14px;
}
.offer-noscript {
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	color: #991B1B;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	margin-bottom: 20px;
}

/* Note affichée quand le formulaire est pré-rempli depuis le panier */
.offer-prefill-note {
	background: var(--gold-light);
	border-left: 3px solid var(--gold);
	color: var(--ink);
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 20px;
}

/* Bouton « Modifier mes destinataires » sous la table du panier */
.solivalis-cart-edit-gifts {
	margin: 20px 0 8px;
}
.solivalis-cart-edit-gifts-link {
	display: inline-block;
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--gold);
	color: var(--gold);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease;
}
.solivalis-cart-edit-gifts-link:hover {
	background: var(--gold);
	color: #FFFFFF;
}

/* Liste des fiches */
.recipients-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 18px;
}

/* Fiche d'un bénéficiaire (carte) */
.recipient-card {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.recipient-card.is-open {
	border-color: var(--gold);
	box-shadow: 0 2px 12px rgba(201, 162, 39, 0.12);
}

/* En-tête (résumé cliquable, mode replié) */
.recipient-card-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	user-select: none;
}
.recipient-card.is-open .recipient-card-summary {
	border-bottom: 1px solid var(--line);
	background: var(--bg-soft);
}
.recipient-card-index {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--gold);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.recipient-card-summary-text {
	flex: 1 1 auto;
	font-size: 14px;
	color: var(--ink);
	line-height: 1.5;
}
.recipient-card-summary-text .placeholder {
	color: var(--ink-soft);
	font-style: italic;
}
.recipient-card-summary-text .meta {
	color: var(--ink-soft);
	font-size: 13px;
	margin-left: 4px;
}
.recipient-card-actions {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 6px;
}
.recipient-card-actions button {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.recipient-card-actions button:hover:not(:disabled) {
	background: var(--bg-soft);
	border-color: var(--gold);
}
.recipient-card-actions button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.recipient-card-actions .btn-remove:hover:not(:disabled) {
	background: #FEE2E2;
	border-color: #DC2626;
	color: #B91C1C;
}

/* Corps déployé */
.recipient-card-body {
	padding: 18px;
	display: none;
}
.recipient-card.is-open .recipient-card-body {
	display: block;
}
.recipient-card-body h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 18px 0 10px;
	color: var(--ink);
}
.recipient-card-body h3:first-child {
	margin-top: 0;
}
.recipient-card-body .radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.recipient-card-body .radio-tile {
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
}
.recipient-card-body .radio-tile:has(input:checked) {
	border-color: var(--gold);
	background: rgba(201, 162, 39, 0.04);
}
.recipient-card-body .radio-tile input {
	margin-top: 3px;
}
.recipient-card-body .radio-tile-body strong {
	display: block;
	font-size: 14px;
	margin-bottom: 2px;
}
.recipient-card-body .radio-tile-body span {
	color: var(--ink-soft);
	font-size: 13px;
}
.recipient-card-body .message-standard-preview {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--bg-soft);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
}
.recipient-card-body .message-standard-preview .preview-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}
.recipient-card-body .message-standard-preview p {
	margin: 0 0 6px;
}
.recipient-card-body .message-standard-preview p:last-child {
	margin-bottom: 0;
}

/* Pied de fiche : bouton valider/replier */
.recipient-card-footer {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed var(--line);
	text-align: right;
}
.btn-validate-card {
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.btn-validate-card:hover {
	background: var(--ink);
	color: #FFFFFF;
}

/* Bouton « + Ajouter un destinataire » */
.add-recipient-btn {
	display: block;
	width: 100%;
	background: transparent;
	border: 1.5px dashed var(--line);
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 600;
	padding: 14px;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
	font-family: inherit;
}
.add-recipient-btn:hover:not(:disabled) {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(201, 162, 39, 0.04);
}
.add-recipient-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.add-recipient-btn .count {
	color: var(--ink-soft);
	font-weight: 400;
	margin-left: 6px;
}

/* Bandeau récapitulatif total */
.offer-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	margin: 24px 0 14px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 12px;
	font-size: 14px;
	color: var(--ink);
}
.offer-summary-count {
	font-weight: 600;
}
.offer-summary-detail {
	color: var(--ink-soft);
	font-size: 13px;
}
.offer-summary-total {
	font-size: 18px;
	font-weight: 700;
}

/* Mobile */
@media (max-width: 600px) {
	.recipient-card-summary { flex-wrap: wrap; }
	.recipient-card-actions {
		width: 100%;
		justify-content: flex-end;
		padding-top: 8px;
	}
	.offer-summary {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* ============================================================
   ENCART « OFFRIR LE TEST » sous les cartes Tarifs
   ============================================================ */
.pricing-gift-tease {
	margin-top: 48px;
	text-align: center;
}
.pricing-gift-tease p {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 16px 0;
	letter-spacing: -0.01em;
}
.pricing-gift-tease a {
	display: inline-block;
	color: var(--gold);
	font-weight: 400;
	font-size: 18px;
	text-decoration: none;
	transition: color 0.15s ease;
}
.pricing-gift-tease a:hover {
	color: var(--gold-bright);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Bouton « Offrir » dans le header — outlined doré sur fond clair.
   Padding et font-size strictement alignés sur .lang-switch-toggle voisin
   (8px 14px / 12px) pour une hauteur et une présence visuelle identiques. */
/* Icône panier dans la barre d'actions du header (après « Mon compte »).
   Bouton sobre : juste l'icône, hover doré. */
.nav-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: 4px;
	color: var(--ink);
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease;
}
.nav-cart:hover,
.nav-cart:focus {
	background: var(--bg-soft);
	color: var(--gold);
}
.nav-cart svg {
	display: block;
}

.nav-gift {
	display: inline-flex;
	align-items: center;
	color: var(--gold);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--gold);
	border-radius: var(--radius-pill, 999px);
	transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.nav-gift:hover {
	color: var(--gold-bright);
	background: rgba(201, 162, 39, 0.08);
	transform: translateY(-1px);
}

/* ============================================================
   PAGE FAQ — accordéon natif (details/summary)
   ============================================================ */
.faq-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 24px 80px;
}
.faq-section-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-soft, #6b6b6b);
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.faq-section-title:first-child {
	margin-top: 0;
}
.faq-item {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}
.faq-item[open] {
	border-color: var(--blue-soft);
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 400;
	color: var(--blue);
	border-radius: 50%;
	background: var(--blue-soft);
	transition: transform 0.2s ease, background 0.15s ease;
}
.faq-item[open] .faq-question::after {
	content: "−";
	transform: rotate(0deg);
}
.faq-question:hover { color: var(--blue); }
.faq-answer {
	padding: 0 24px 20px 24px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-soft);
}
.faq-answer p {
	margin: 0 0 12px;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul {
	margin: 0 0 12px;
	padding-left: 20px;
}
.faq-answer ul li {
	margin-bottom: 6px;
}
.faq-answer a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-page {
	max-width: 640px;
	margin: 0 auto;
	padding: 60px 24px 80px;
}
.contact-page .back-link {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--ink-mute);
	font-size: 14px;
	text-decoration: none;
}
.contact-head {
	margin-bottom: 32px;
}
.contact-head .eyebrow {
	display: inline-block;
	color: var(--gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.contact-head h1 {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}
.contact-sub {
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.65;
	margin: 0;
}
.contact-sub a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.contact-notice {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
}
.contact-notice--success {
	background: var(--gold-light);
	border-left: 3px solid var(--gold);
	color: var(--ink);
}
.contact-notice--error {
	background: #FEF2F2;
	border-left: 3px solid #DC2626;
	color: #991B1B;
}
.contact-form {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 28px;
}
.contact-form .field {
	margin-bottom: 16px;
}
.contact-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}
.contact-form label .optional {
	font-weight: 400;
	color: var(--ink-mute);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: none;
}
.contact-form textarea {
	resize: vertical;
	min-height: 120px;
}
.contact-actions {
	margin-top: 20px;
	text-align: center;
}
.contact-mailto {
	margin-top: 24px;
	text-align: center;
	font-size: 13px;
	color: var(--ink-mute);
}
.contact-mailto a {
	color: var(--gold);
	font-weight: 600;
	text-decoration: none;
}
.contact-mailto a:hover {
	color: var(--gold-bright);
	text-decoration: underline;
}

/* ============================================================
   RESPONSIVE FIXES MOBILE (audit 27/05/2026)

   Objectif : corriger les debordements identifies sur smartphone sans
   toucher au rendu desktop. Les vraies causes (font-size, padding, gap)
   sont corrigees a la racine ; le clipping horizontal n'est qu'un filet
   de securite, limite au mobile, pour absorber un debordement imprevu.

   Important sur le clipping : on utilise overflow-x: clip (et non hidden)
   car clip ne cree pas de scroll container, donc n'affecte pas les
   5 sticky-Y existants (.site-header, .test-header, .results-sidebar,
   .results-content-topbar, .results-mobile-nav). Fallback Safari <16.
   ============================================================ */

/* >> Tablette + grands mobiles (481-768 px) : pre-reduction OCEAN x RIASEC
   (le bloc rigide fait ~440 px de large ; on l'amorce des 768 px). */
@media (max-width: 768px){
	.about-image-fallback{ padding: 32px 20px; gap: 16px; font-size: 22px; }
	.about-image-fallback span{ width: 22px; height: 22px; }
}

/* >> Smartphones (<=600 px) : trust-strip en 1 colonne.
   Seuil de casse strict de .trust-strip 2 cols = 484 px (calcul :
   (W - 64) / 2 >= 210 px, ou 210 px = font 44 px + padding 26*2 pour "Gratuit").
   On passe en 1 col des 600 px pour absorber aussi la zone d'inconfort
   visuel 484-600 px (textes "decouverte" sur 3 lignes). */
@media (max-width: 600px){
	.trust-strip{
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 0 16px;
	}
	.trust-item{
		padding: 18px 16px;
		min-width: 0;
		text-align: center;
	}
	.trust-num{ font-size: 32px; }
	.trust-label{ font-size: 13px; }
}

/* >> Petits smartphones (<=480 px) : compactage final OCEAN x RIASEC */
@media (max-width: 480px){
	.about-image-fallback{ font-size: 18px; padding: 24px 12px; gap: 10px; }
	.about-image-fallback span{ width: 18px; height: 18px; }
}

/* >> Filet de securite scroll horizontal : MOBILE UNIQUEMENT (<=768 px)
   - Desktop : non applique (un debordement reste visible = bug a corriger)
   - Mobile : absorbe les debordements imprevus
   - clip plutot que hidden : pas de scroll container cree, sticky-Y intact
   - hidden en fallback pour Safari <16 (clip non supporte avant 2022) */
@media (max-width: 768px){
	html {
		overflow-x: hidden;  /* Fallback Safari <16 / navigateurs <2022 */
		overflow-x: clip;    /* Moderne : clipping sans scroll container */
	}
}

/* ============================================================
   Disclaimer page résultats (versions Découverte + Profil approfondi)
   Texte neutre, taille réduite, sans encadré d'alerte.
   Apparaît en bas de la page, après le bloc « Refaire le test ».
   ============================================================ */
.results-disclaimer {
	margin-top: 3rem;
	padding: 1.25rem 1.5rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.results-disclaimer p {
	font-size: 0.85rem;
	line-height: 1.55;
	color: #6b6b6b;
	text-align: center;
	margin: 0 auto;
	max-width: 680px;
	font-style: italic;
}

/* ============================================================
   ACCESSIBILITÉ — bloc global ajouté lors de l'audit a11y du 08/06/2026.
   ============================================================ */

/* WCAG 2.4.7 — Focus visible.
   Le reset générique en haut du fichier (button { border: none; ... }
   + a { text-decoration: none; ... }) avait fait disparaître les outlines
   natifs sans les remplacer. Un utilisateur clavier ne savait pas où il
   était. On rétablit un focus discret mais clair sur tous les éléments
   interactifs uniquement quand le focus vient du clavier (:focus-visible
   évite l'outline pénible lors d'un clic souris). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
	border-radius: 2px;
}
.btn:focus-visible,
button.btn:focus-visible {
	outline-offset: 3px;
}

/* WCAG 2.3.3 — Mouvement / animation respectueux.
   Les utilisateurs qui ont activé "Réduire les animations" dans leur OS
   (option d'accessibilité pour vestibulaire, migraine, vertige, troubles
   du spectre autistique) subissaient transitions et scroll smooth. On les
   neutralise globalement tout en gardant un fade minimal (0.01ms) pour
   éviter qu'un calcul JS qui attend la fin d'une transition ne plante. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* WCAG 2.4.1 — Skip link "Aller au contenu".
   Lien invisible en flux normal, rendu visible uniquement quand il prend
   le focus (1re tabulation depuis l'URL bar). Permet à l'utilisateur
   clavier d'éviter de tabuler à travers les ~10 liens du header pour
   atteindre le contenu de la page. Le href pointe vers #main-content,
   un id à ajouter sur le 1er <main> ou <section> de chaque template. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 10px 18px;
	background: var(--ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}
.skip-link:focus {
	left: 0;
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}




/* ============== HERO MAQUETTE (12/06/2026) — Claude Design ==============
   Première itération (matin du 12/06) : Claude Design avait diagnostiqué
   un blow-out de grille (image portrait 1087x1447 + min-width:auto par
   défaut sur item grid écrasant la piste texte). Fix appliqué : minmax(0,...)
   sur les pistes + max-height bornée + order 0/1 verrouillé.

   Deuxième itération (après-midi du 12/06) : Gaby a constaté que même
   le blow-out résolu, le H1 wrap au mot et la mascotte manque de présence
   sur PC plein écran. Claude Design a livré une maquette complète et un
   correctif systémique (et non plus défensif) :

   1. H1 réduit de clamp(50px,6.6vw,84px) à clamp(42px,4.4vw,60px) — déjà
      appliqué via la variable --t-hero plus haut. 84px était surdimensionné
      pour une colonne de ~600px.
   2. Colonnes 1.15fr / 0.85fr (au lieu de 1.1fr / 0.9fr) — texte dans la
      colonne LARGE de gauche. La présence de la mascotte se gagne par la
      hauteur (600px) et un halo radial derrière, pas par la largeur.
   3. Mascotte via aspect-ratio: 1087/1447 + height: 600px (au lieu de
      max-height: 560px sans ratio explicite).
   4. min-height: min(82vh, 720px) sur le hero → remplit l'écran sur
      grand PC sans étirement.
   5. Halo radial gold→bleu (::before) pour donner de la présence sans
      rogner sur la largeur du texte.
   6. line-height 1.06 + letter-spacing -0.018em sur h1 → wraps mieux
      proportionnés.

   Media queries entièrement réécrites pour cohérence avec la nouvelle
   maquette (les media queries existantes ailleurs dans le fichier sont
   conservées mais surchargées par celles-ci, dernière règle gagne).
   ======================================================================= */
.hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 72px;
  padding: 72px 56px 88px;
  min-height: min(82vh, 720px);
  align-items: center;
  direction: ltr;
}
.hero > * { min-width: 0; }

/* Cause racine du bug "texte en haut droite, mascotte en bas gauche"
   (12/06/2026) : l'ancre <a id="main-content"> ajoutée dans
   front-page.php pour le skip-link a11y était un 3ᵉ enfant direct de
   .hero. Comme display:grid place les enfants dans les cellules dans
   l'ordre DOM, l'ancre invisible occupait la cellule (row 1, col 1),
   .hero-text passait en (row 1, col 2) — texte à droite — et
   .hero-visual passait en (row 2, col 1) — mascotte en bas-gauche.
   Layout en diagonale.
   Fix : display: contents retire l'ancre du flux de grid sans la
   supprimer du DOM (elle conserve son rôle de cible #main-content
   pour le skip-link). */
.hero > a#main-content { display: contents; }
.hero-text   { order: 0; }
.hero-visual { order: 1; }
.hero h1 {
  line-height: 1.06;
  letter-spacing: -0.018em;
}

/* Mascotte : présence par la hauteur (600px) + ratio réel d'image
   (1087:1447 portrait). Plus de max-height:100% (qui était ignoré faute
   de hauteur de ligne définie sur align-items: center). */
.hero-visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  min-width: 0;
  min-height: 0;
}
/* Halo doux gold → bleu derrière la mascotte, pour donner de la
   présence visuelle sans avoir besoin d'élargir la colonne. */
.hero-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(224, 181, 58, 0.20),
    rgba(59, 130, 246, 0.14) 46%,
    rgba(59, 130, 246, 0) 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.hero-visual img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 600px;
  aspect-ratio: 1087 / 1447;
  max-width: 100%;
  object-fit: contain;
}

/* Media queries dédiées maquette Claude Design.
   NB : elles surchargent les media-queries existantes plus haut dans le
   fichier (cascade — dernière règle gagne pour même spécificité). */
@media (max-width: 1100px) {
  .hero { gap: 48px; padding: 64px 40px 80px; }
  .hero-visual img { height: 520px; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .hero-visual img { height: 460px; }
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 56px 24px 72px;
    gap: 44px;
  }
  .hero-text   { order: 0; }
  .hero-visual { order: 1; align-items: center; }
  .hero-visual img { height: auto; width: min(360px, 78%); }
}
@media (max-width: 560px) {
  .hero { padding: 40px 20px 56px; }
}