
/*
  Helveticassist v4 — Palette suisse-demarches.ch
  Fond blanc · Texte noir/slate · Bleu #1a56db · Ultra-épuré · Inter
  Inspiré visuellement de suisse-demarches.ch
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* === COULEURS PRINCIPALES === */
  --green:       #1a56db;   /* bleu principal — CTA, accents */
  --green-dark:  #1648c5;
  --green-pale:  #eff4ff;
  --green-bord:  rgba(26,86,219,.2);

  --noir:        #111827;   /* texte titre */
  --slate:       #374151;   /* texte courant */
  --muted:       #6b7280;   /* texte secondaire */
  --border:      #e5e7eb;   /* séparateurs */

  --white:       #ffffff;
  --bg:          #f9fafb;   /* fond sections alternées */
  --bg-2:        #f3f4f6;

  --rouge-ch:    #dc2626;   /* croix suisse logo uniquement */

  --blue:        #1a56db;   /* bleu CTA — boutons principaux */
  --blue-dark:   #1648c5;
  --sh-blue:     0 8px 24px rgba(26,86,219,.28);

  /* === COULEURS LOGO (logov5.svg) === */
  --logo-navy:   #1a2e3b;   /* montagne principale — bleu ardoise foncé */
  --logo-slate:  #2d4a5e;   /* montagne droite — bleu ardoise moyen */
  --logo-gold:   #c8a84b;   /* soleil + texte ASSIST — or suisse */

  /* Typo */
  --f: 'Inter', system-ui, -apple-system, sans-serif;

  /* Ombres */
  --sh-xs:    0 1px 3px rgba(17,24,39,.06);
  --sh-sm:    0 4px 16px rgba(17,24,39,.08);
  --sh-md:    0 12px 40px rgba(17,24,39,.10);
  --sh-lg:    0 24px 64px rgba(17,24,39,.12);
  --sh-green: 0 8px 24px rgba(26,86,219,.28);

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-full: 999px;

  --ease:   .26s cubic-bezier(.4,0,.2,1);
  --max-w:  1160px;
  --py:     clamp(72px,9vw,120px);
}

/* ═══════════════════════════
   RESET
═══════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100% }
body { font-family:var(--f); font-size:1rem; line-height:1.65; color:var(--noir); background:var(--white); overflow-x:hidden; max-width:100% }
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button { font-family:var(--f); cursor:pointer; border:none; background:none }
input,select,textarea { font-family:var(--f) }

/* ═══════════════════════════
   TYPOGRAPHIE
═══════════════════════════ */
h1 { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--noir) }
h2 { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:700; line-height:1.2; letter-spacing:-.02em; color:var(--noir) }
h3 { font-size:clamp(1.05rem,2vw,1.35rem); font-weight:600; line-height:1.3; color:var(--noir) }
h4 { font-size:.95rem; font-weight:600; color:var(--noir) }
p  { color:var(--muted); line-height:1.75 }
.lead { font-size:clamp(1rem,1.8vw,1.1rem); color:var(--slate); line-height:1.75 }
strong { font-weight:600; color:var(--noir) }

/* ═══════════════════════════
   LAYOUT
═══════════════════════════ */
.wrap       { width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:clamp(20px,5vw,48px) }
.section    { padding:var(--py) 0 }
.section--bg  { background:var(--bg) }
.section--dark{ background:var(--noir) }
.section--green{ background:var(--green) }
.sec-head   { margin-bottom:clamp(40px,6vw,64px) }
.sec-head--c{ max-width:620px; margin-inline:auto; text-align:center; margin-bottom:clamp(40px,6vw,64px) }
.tag { display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:10px }
.tag::before { content:''; width:18px; height:2px; background:var(--green); flex-shrink:0 }

/* ═══════════════════════════
   BUTTONS
═══════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-size:.875rem; font-weight:600; border-radius:var(--r-sm); transition:var(--ease); letter-spacing:.01em; white-space:nowrap }
.btn svg { flex-shrink:0; transition:transform var(--ease) }
.btn:hover svg { transform:translateX(3px) }

.btn--green  { background:var(--green); color:#fff; box-shadow:var(--sh-green) }
.btn--green:hover  { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 12px 28px rgba(26,86,219,.38) }

.btn--blue   { background:var(--blue); color:#fff; box-shadow:var(--sh-blue) }
.btn--blue:hover   { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 12px 28px rgba(26,86,219,.38) }

.btn--outline{ background:transparent; color:var(--noir); border:1.5px solid var(--border) }
.btn--outline:hover { border-color:var(--green); color:var(--green); transform:translateY(-1px) }

.btn--ghost-w{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3) }
.btn--ghost-w:hover{ border-color:#fff; background:rgba(255,255,255,.1) }

.btn--white  { background:#fff; color:var(--green); box-shadow:var(--sh-sm) }
.btn--white:hover { background:var(--bg); transform:translateY(-1px) }

.btn--dark   { background:var(--noir); color:#fff }
.btn--dark:hover { background:var(--slate); transform:translateY(-1px) }

.btn--lg  { padding:15px 30px; font-size:.95rem; border-radius:var(--r-md) }
.btn--full{ width:100%; justify-content:center }

/* ═══════════════════════════
   NAVIGATION
═══════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:10px 0; transition:var(--ease); background:transparent;
}
.nav.is-scrolled {
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);
  padding:10px 0;
  box-shadow:0 1px 0 var(--border), var(--sh-xs);
}
.nav__inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px }

/* Logo */
.logo { display:flex; align-items:center; flex-shrink:0 }
/* SVG logos */
.logo__svg { height:88px; width:165px; object-fit:contain; display:block; flex-shrink:0; transition:height var(--ease), width var(--ease) }
/* Logo plus compact quand le nav est scrollé */
.nav.is-scrolled .logo__svg { height:58px; width:108px }
/* Par défaut (pages intérieures, fond blanc) : logo navy visible */
.logo__svg--hero     { display:none }
.logo__svg--scrolled { display:block }
/* Sur index.html (body.page-hero) avant scroll : logo blanc/or sur fond sombre */
body.has-dark-hero .nav:not(.is-scrolled) .logo__svg--hero     { display:block }
body.has-dark-hero .nav:not(.is-scrolled) .logo__svg--scrolled { display:none }
.nav:not(.is-scrolled) .nav__link  { color:rgba(255,255,255,.8) }

/* Menu */
.nav__menu { display:flex; align-items:center; gap:4px; justify-content:center }
.nav__item  { position:relative }
.nav__link  {
  display:flex; align-items:center; gap:4px;
  padding:9px 14px; font-size:.93rem; font-weight:600;
  border-radius:var(--r-sm); transition:var(--ease); color:var(--slate);
}
.nav.is-scrolled .nav__link { color:var(--slate) }
.nav__link:hover, .nav__link.is-active { color:var(--green) }
.nav:not(.is-scrolled) .nav__link:hover { color:#fff }
.nav__link-arrow { opacity:.5; transition:transform var(--ease); pointer-events:none }
.nav__item.is-open .nav__link-arrow { transform:rotate(180deg) }

/* DROPDOWN — 100% JS-driven, no CSS hover */
.nav__drop {
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); border:1px solid var(--border);
  min-width:290px; padding:6px;
  /* hidden by default */
  opacity:0; pointer-events:none;
  transform:translateY(-6px) scale(.97);
  transition:opacity .18s ease, transform .18s ease;
  z-index:200;
}
.nav__item.is-open .nav__drop {
  opacity:1; pointer-events:all;
  transform:translateY(0) scale(1);
}
.drop__link { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-md); transition:var(--ease) }
.drop__link:hover { background:var(--bg) }
.drop__ico { width:32px; height:32px; border-radius:var(--r-sm); background:var(--green-pale); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; transition:var(--ease) }
.drop__link:hover .drop__ico { background:var(--green); filter:brightness(10) }
.drop__title { font-size:.84rem; font-weight:600; color:var(--noir); display:block }
.drop__sub   { font-size:.72rem; color:var(--muted) }

.nav__cta {
  background:var(--blue) !important;
  color:#fff !important;
  box-shadow:0 4px 18px rgba(26,86,219,.38);
  font-weight:700;
}
.nav__cta:hover {
  background:var(--blue-dark) !important;
  box-shadow:0 8px 28px rgba(26,86,219,.5);
  transform:translateY(-1px);
}

/* Burger */
.nav__burger { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer }
.nav__burger span { display:block; width:22px; height:2px; background:var(--noir); border-radius:2px; transition:var(--ease) }
.nav:not(.is-scrolled) .nav__burger span { background:#fff }
.nav__burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav__burger.is-open span:nth-child(2) { opacity:0 }
.nav__burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile overlay */
.nav__overlay {
  display:none; position:fixed; inset:0;
  background:#fff; z-index:890;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  opacity:0; pointer-events:none; transition:var(--ease);
}
.nav__overlay.is-open { opacity:1; pointer-events:all }
.nav__overlay .nav__link { font-size:1.6rem; font-weight:700; color:var(--noir); padding:14px }
.nav__overlay .nav__link:hover { color:var(--green) }

/* ═══════════════════════════
   HERO — dynamique, focus abonnements
═══════════════════════════ */
.hero {
  background:var(--noir);
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding-top:80px;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 70% 35%, rgba(26,86,219,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 85%,  rgba(26,86,219,.06) 0%, transparent 50%);
}
.hero__grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
}

.hero__inner {
  position:relative; z-index:2;
  padding:var(--py) 0;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}

/* Colonne gauche */
.hero__kicker {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(26,86,219,.15); border:1px solid rgba(26,86,219,.3);
  border-radius:var(--r-full); padding:5px 14px 5px 7px; margin-bottom:24px;
}
.hero__kicker-dot {
  width:22px; height:22px; background:var(--green); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero__kicker-dot svg { color:#fff }
.hero__kicker-txt { font-size:.76rem; font-weight:600; color:rgba(255,255,255,.8); letter-spacing:.02em }

.hero__h1 { color:#fff; margin-bottom:20px }
.hero__h1 em { font-style:normal; color:#93c5fd }  /* vert clair */

.hero__sub { font-size:clamp(.95rem,1.6vw,1.1rem); color:rgba(255,255,255,.6); line-height:1.8; max-width:520px; margin-bottom:36px; font-weight:300 }

.hero__actions { display:flex; flex-wrap:wrap; gap:11px; margin-bottom:36px }

/* Compteur animé */
.hero__counter {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  margin-bottom:28px; width:fit-content;
}
.hero__counter-ico { font-size:1.4rem }
.hero__counter-val {
  font-size:1.6rem; font-weight:800; color:#fff;
  letter-spacing:-.02em; line-height:1;
}
.hero__counter-lbl { font-size:.73rem; color:rgba(255,255,255,.4) }

/* Trust badges */
.hero__trust { display:flex; flex-wrap:wrap; gap:16px }
.trust-item { display:flex; align-items:center; gap:6px; font-size:.77rem; color:rgba(255,255,255,.4) }
.trust-item svg { color:var(--green); flex-shrink:0 }

/* Colonne droite — cartes abonnements */
.hero__plans-col {}
.hero__plans-title {
  font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:12px;
}
.hero__plan-cards { display:flex; flex-direction:column; gap:10px }

.hplan {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg); padding:18px 20px;
  display:flex; align-items:center; gap:16px;
  cursor:pointer; transition:var(--ease); text-decoration:none; position:relative;
}
.hplan:hover { background:rgba(26,86,219,.1); border-color:rgba(26,86,219,.4); transform:translateX(4px) }
.hplan--star { border-color:var(--green); background:rgba(26,86,219,.08) }

.hplan__ico {
  width:44px; height:44px; border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0; transition:var(--ease);
}
.hplan:hover .hplan__ico { background:var(--green); border-color:var(--green) }

.hplan__info { flex:1 }
.hplan__name { font-size:.87rem; font-weight:700; color:#fff; display:block; margin-bottom:2px }
.hplan__desc { font-size:.73rem; color:rgba(255,255,255,.4) }

.hplan__price { text-align:right; flex-shrink:0 }
.hplan__amount { font-size:1.4rem; font-weight:800; color:#fff; line-height:1; display:block }
.hplan__period { font-size:.65rem; color:rgba(255,255,255,.3) }

.hplan__badge {
  position:absolute; top:-9px; right:14px;
  background:var(--green); color:#fff;
  font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 9px; border-radius:var(--r-full);
}

.hplan__arrow {
  color:var(--green); opacity:0; transition:var(--ease); flex-shrink:0;
  transform:translateX(-4px);
}
.hplan:hover .hplan__arrow { opacity:1; transform:translateX(0) }

.hero__plans-note {
  margin-top:10px; font-size:.71rem; color:rgba(255,255,255,.2);
  display:flex; align-items:center; gap:5px;
}

/* ═══════════════════════════
   BANDEAU CHIFFRES
═══════════════════════════ */
.numbers { background:linear-gradient(120deg, var(--logo-navy) 0%, var(--logo-slate) 55%, #1e3a4a 100%); padding:0; position:relative; overflow:hidden }
.numbers::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 60%, rgba(200,168,75,.15) 100%); pointer-events:none }
.numbers__grid { display:grid; grid-template-columns:repeat(2,1fr) }
.numbers__cell { padding:26px 18px; text-align:center; border-right:1px solid rgba(255,255,255,.2); transition:var(--ease) }
.numbers__cell:last-child { border-right:none }
.numbers__cell:hover { background:rgba(0,0,0,.08) }
.numbers__val { font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:800; color:#fff; line-height:1; margin-bottom:4px }
.numbers__lbl { font-size:.72rem; font-weight:500; color:rgba(255,255,255,.75) }

/* ═══════════════════════════
   VALUES
═══════════════════════════ */
.values__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px }
.value-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:28px; transition:var(--ease);
}
.value-card:hover { border-color:var(--green-bord); box-shadow:var(--sh-md); transform:translateY(-3px) }
.value-card__num {
  width:36px; height:36px; border-radius:50%;
  background:var(--green-pale); border:1.5px solid var(--green-bord);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; color:var(--green); margin-bottom:14px; transition:var(--ease);
}
.value-card:hover .value-card__num { background:var(--green); color:#fff }
.value-card h4 { font-size:.93rem; margin-bottom:6px }
.value-card p  { font-size:.84rem; line-height:1.7 }

/* ═══════════════════════════
   STORY
═══════════════════════════ */
.story__wrap { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,100px); align-items:center }
.story__img {
  border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(145deg,var(--bg) 0%,var(--bg-2) 60%,var(--green-pale) 100%);
  position:relative;
}
.story__img-inner {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(17,24,39,.85) 0%,transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
}
.story__quote { font-size:1rem; font-style:italic; color:#fff; line-height:1.55; margin-bottom:14px; font-weight:300 }
.story__author{ font-size:.76rem; color:rgba(255,255,255,.45) }
.story__badge {
  position:absolute; top:18px; right:18px; background:#fff;
  border-radius:var(--r-md); padding:8px 12px; box-shadow:var(--sh-md);
  display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; color:var(--noir);
}
.steps { display:flex; flex-direction:column; gap:22px }
.step  { display:flex; gap:16px; align-items:flex-start }
.step__line { display:flex; flex-direction:column; align-items:center }
.step__num {
  width:36px; height:36px; border-radius:50%;
  background:var(--green); color:#fff;
  font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:var(--sh-green); transition:var(--ease);
}
.step:hover .step__num { transform:scale(1.1) }
.step__connector { width:2px; flex:1; min-height:14px; background:linear-gradient(to bottom,var(--green),var(--border)); margin-top:4px }
.step__body { padding-bottom:6px }
.step__body h4 { margin-bottom:4px; font-size:.9rem }
.step__body p  { font-size:.84rem; line-height:1.7 }

/* ═══════════════════════════
   GAINS
═══════════════════════════ */
.gains__inner { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center }
.gain-row {
  display:flex; align-items:center; gap:12px;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px; transition:var(--ease);
}
.gain-row:hover { border-color:var(--green-bord); box-shadow:var(--sh-sm); transform:translateX(4px) }
.gain-row__ico   { width:34px; height:34px; background:var(--green-pale); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0 }
.gain-row__label { font-size:.84rem; font-weight:500; color:var(--noir); flex:1 }
.gain-row__sub   { font-size:.72rem; color:var(--muted); display:block }
.gain-row__amount{ font-size:.95rem; font-weight:700; color:var(--green); flex-shrink:0 }
.gains__box { background:var(--noir); border-radius:var(--r-xl); padding:32px; text-align:center }
.gains__box-sub   { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:8px }
.gains__box-val   { font-size:clamp(2.4rem,4.5vw,3.2rem); font-weight:800; color:#fff; line-height:1; margin-bottom:5px }
.gains__box-detail{ font-size:.78rem; color:rgba(255,255,255,.70); margin-bottom:22px }
.gains__box-note  { font-size:.71rem; color:rgba(255,255,255,.50); border-top:1px solid rgba(255,255,255,.15); padding-top:14px; margin-top:14px; line-height:1.6 }

/* ═══════════════════════════
   SERVICES
═══════════════════════════ */
.svcs__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.svc-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:24px;
  cursor:pointer; transition:var(--ease); position:relative;
}
.svc-card:hover { border-color:var(--green-bord); box-shadow:var(--sh-md); transform:translateY(-4px) }
.svc-card__ico  { width:40px; height:40px; background:var(--green-pale); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:14px; transition:var(--ease) }
.svc-card:hover .svc-card__ico { background:var(--green); filter:brightness(10) }
.svc-card h3    { font-size:.95rem; margin-bottom:7px }
.svc-card p     { font-size:.82rem; line-height:1.7; margin-bottom:12px }
.svc-card__chip { position:absolute; top:12px; right:12px; background:var(--green-pale); border:1px solid var(--green-bord); border-radius:var(--r-full); padding:2px 8px; font-size:.62rem; font-weight:700; color:var(--green) }
.svc-card__arrow{ font-size:.74rem; font-weight:700; color:var(--green); opacity:0; transition:var(--ease); display:flex; align-items:center; gap:3px }
.svc-card:hover .svc-card__arrow { opacity:1 }

/* ═══════════════════════════
   PLANS (page tarifs + accueil)
═══════════════════════════ */
.plans__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start }
.plan {
  background:var(--white); border:2px solid var(--border);
  border-radius:var(--r-xl); padding:30px 24px;
  position:relative; transition:var(--ease);
}
.plan:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.plan--star { background:var(--noir); border-color:var(--green); transform:scale(1.02) }
.plan--star:hover { transform:scale(1.02) translateY(-4px) }
.plan__badge { position:absolute; top:14px; right:14px; background:var(--green); color:#fff; font-size:.61rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-full) }
.plan__tag   { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:7px }
.plan__price { display:flex; align-items:baseline; gap:3px; margin-bottom:4px }
.plan__chf   { font-size:.8rem; font-weight:600; color:var(--muted) }
.plan--star .plan__chf { color:rgba(255,255,255,.3) }
.plan__amount{ font-size:clamp(2rem,3.5vw,2.6rem); font-weight:800; color:var(--noir); line-height:1 }
.plan--star .plan__amount { color:#fff }
.plan__period{ font-size:.73rem; color:var(--muted); margin-bottom:15px }
.plan--star .plan__period { color:rgba(255,255,255,.3) }
.plan__desc  { font-size:.83rem; line-height:1.65; color:var(--muted); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border) }
.plan--star .plan__desc { color:rgba(255,255,255,.45); border-bottom-color:rgba(255,255,255,.1) }
.plan__feats { display:flex; flex-direction:column; gap:9px; margin-bottom:20px }
.plan__feat  { display:flex; align-items:flex-start; gap:7px; font-size:.81rem; color:var(--slate) }
.plan--star .plan__feat { color:rgba(255,255,255,.7) }
.plan__tick  { width:16px; height:16px; border-radius:50%; background:var(--green-pale); border:1px solid var(--green-bord); display:flex; align-items:center; justify-content:center; color:var(--green); font-size:.55rem; flex-shrink:0; margin-top:1px }
.plans__note { text-align:center; margin-top:22px; font-size:.78rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:5px }

/* ── TOGGLE DURÉE D'ENGAGEMENT ── */
.dur-toggle__wrap { display:inline-flex; background:#f3f4f6; border-radius:999px; padding:4px; gap:4px; max-width:100% }
.dur-btn { border:none; padding:10px 22px; border-radius:999px; font-size:.88rem; font-weight:600; cursor:pointer; transition:.22s cubic-bezier(.4,0,.2,1); background:transparent; color:#374151; font-family:var(--f); display:flex; align-items:center; gap:8px; white-space:nowrap }
.dur-btn--active { background:#1a56db; color:#fff; box-shadow:0 2px 12px rgba(26,86,219,.32) }
.dur-badge { background:#16a34a; color:#fff; font-size:.63rem; font-weight:700; padding:2px 7px; border-radius:99px; letter-spacing:.02em; transition:.22s }
.dur-btn--active .dur-badge { background:rgba(255,255,255,.22) }
@media(max-width:400px){
  .dur-toggle__wrap { border-radius:16px; flex-direction:column; width:100% }
  .dur-btn { border-radius:12px; justify-content:center; padding:10px 16px }
}

/* ═══════════════════════════
   TÉMOIGNAGES
═══════════════════════════ */
.testis__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.testi {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:14px; transition:var(--ease);
}
.testi:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--green-bord) }
.testi__stars { display:flex; gap:2px; color:var(--green); font-size:.78rem }
.testi__quote { font-size:.9rem; color:var(--slate); line-height:1.65; flex:1; font-style:italic }
.testi__foot  { display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--border) }
.testi__av    { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--noir),var(--green)); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:#fff; font-weight:700; flex-shrink:0 }
.testi__name  { font-weight:600; font-size:.83rem; color:var(--noir) }
.testi__loc   { font-size:.71rem; color:var(--muted) }

/* ═══════════════════════════
   CONFIANCE
═══════════════════════════ */
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.06) }
.trust-cell { padding:30px 16px; text-align:center; background:#1a2535; transition:var(--ease) }
.trust-cell:hover { background:var(--green) }
.trust-cell__ico { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; margin:0 auto 13px; font-size:1.15rem; transition:var(--ease) }
.trust-cell:hover .trust-cell__ico { background:rgba(255,255,255,.2) }
.trust-cell__val { font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:800; color:#fff; line-height:1; margin-bottom:4px }
.trust-cell__lbl { font-size:.73rem; color:rgba(255,255,255,.4); line-height:1.4 }

/* ═══════════════════════════
   FAQ
═══════════════════════════ */
.faq__list { max-width:700px; margin-inline:auto; display:flex; flex-direction:column; gap:7px }
.faq__item { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:var(--ease) }
.faq__item.is-open { border-color:var(--green-bord); box-shadow:0 3px 12px rgba(26,86,219,.06) }
.faq__q    { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; cursor:pointer; font-weight:600; font-size:.87rem; color:var(--noir); transition:var(--ease) }
.faq__q:hover { color:var(--green) }
.faq__icon { width:22px; height:22px; border-radius:50%; background:var(--bg-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--ease); font-size:.67rem; color:var(--noir) }
.faq__item.is-open .faq__icon { background:var(--green); color:#fff; transform:rotate(45deg) }
.faq__a { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1) }
.faq__a-inner { padding:0 20px 16px; font-size:.86rem; line-height:1.78; color:var(--muted) }

/* ═══════════════════════════
   CTA BLOCK
═══════════════════════════ */
.cta-block { background:var(--green); padding:var(--py) 0; position:relative; overflow:hidden }
.cta-block::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 80% at 80% 50%,rgba(255,255,255,.07) 0%,transparent 60%) }
.cta-block__inner { text-align:center; position:relative; z-index:2; max-width:540px; margin-inline:auto }
.cta-block h2 { color:#fff; margin-bottom:12px }
.cta-block p  { color:rgba(255,255,255,.75); margin-bottom:26px; font-size:1rem }
.cta-block__btns { display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap }

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
.footer { background:var(--noir); color:rgba(255,255,255,.42); padding:56px 0 24px }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:20px }
.footer__brand { display:flex; align-items:center; gap:9px; font-size:1.06rem; font-weight:700; color:#fff; margin-bottom:10px }
.footer__brand span { color:#93c5fd }
.footer__desc { font-size:.8rem; line-height:1.7; max-width:250px; margin-bottom:16px }
.footer__social { display:flex; gap:7px }
.footer__soc-link { width:29px; height:29px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.33); transition:var(--ease) }
.footer__soc-link:hover { background:var(--green); border-color:var(--green); color:#fff }
.footer__col-title { font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:13px }
.footer__links { display:flex; flex-direction:column; gap:7px }
.footer__lnk   { font-size:.8rem; color:rgba(255,255,255,.37); transition:var(--ease) }
.footer__lnk:hover { color:#93c5fd; padding-left:4px }
.footer__contact-row { display:flex; gap:8px; margin-bottom:9px; font-size:.79rem; align-items:flex-start }
.footer__contact-row svg { color:var(--green); flex-shrink:0; margin-top:2px }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.74rem }
.footer__legal  { display:flex; gap:13px; flex-wrap:wrap }
.footer__legal a { color:rgba(255,255,255,.27); transition:var(--ease) }
.footer__legal a:hover { color:#93c5fd }
.footer__swiss { display:flex; align-items:center; gap:5px; font-size:.69rem; color:rgba(255,255,255,.17) }

/* ═══════════════════════════
   MODAL
═══════════════════════════ */
.modal-bg  { position:fixed; inset:0; background:rgba(17,24,39,.8); z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:var(--ease) }
.modal-bg.is-open { opacity:1; pointer-events:all }
.modal-box { background:#fff; border-radius:var(--r-xl); padding:36px; max-width:500px; width:100%; position:relative; transform:translateY(10px) scale(.98); transition:var(--ease); box-shadow:0 40px 100px rgba(0,0,0,.28) }
.modal-bg.is-open .modal-box { transform:none }
.modal-close { position:absolute; top:13px; right:13px; width:29px; height:29px; background:var(--bg-2); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--ease); font-size:.8rem; color:var(--muted) }
.modal-close:hover { background:var(--green); color:#fff }
.modal-ico  { width:46px; height:46px; background:var(--green-pale); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; margin-bottom:15px; font-size:1.4rem }
.modal-box h3 { font-size:1.35rem; margin-bottom:7px }
.modal-box>p  { font-size:.87rem; line-height:1.75; color:var(--muted); margin-bottom:15px }
.modal-feats  { display:flex; flex-direction:column; gap:7px; margin-bottom:20px }
.modal-feat   { display:flex; gap:7px; align-items:flex-start; font-size:.84rem; color:var(--slate) }
.modal-feat-dot { width:5px; height:5px; background:var(--green); border-radius:50%; margin-top:7px; flex-shrink:0 }

/* ═══════════════════════════
   PAGE HERO (internes)
═══════════════════════════ */
.page-hero { background:var(--noir); padding:clamp(108px,14vw,152px) 0 clamp(54px,8vw,86px); position:relative; overflow:hidden }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 60% 50%,rgba(26,86,219,.1) 0%,transparent 60%) }
.page-hero__inner { position:relative; z-index:1; text-align:center; max-width:640px; margin-inline:auto }
.page-hero h1 { color:#fff; margin-bottom:14px }
.page-hero p  { color:rgba(255,255,255,.5); font-size:clamp(1rem,1.8vw,1.08rem) }

/* SERVICES PAGE */
.svcs-full__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.svc-full { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; transition:var(--ease); display:flex; flex-direction:column }
.svc-full:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--green-bord) }
.svc-full__ico { width:38px; height:38px; background:var(--green-pale); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:12px; transition:var(--ease) }
.svc-full:hover .svc-full__ico { background:var(--green); filter:brightness(10) }
.svc-full h3 { font-size:.91rem; margin-bottom:6px }
.svc-full p  { font-size:.81rem; line-height:1.7 }
.svc-full ul { margin-top:8px; display:flex; flex-direction:column; gap:5px }
.svc-full li { font-size:.78rem; color:var(--muted); display:flex; gap:6px }
.svc-full li::before { content:'→'; color:var(--green); flex-shrink:0 }

/* COMPARE */
.compare-table { width:100%; border-collapse:collapse; margin-top:44px }
.compare-table th,.compare-table td { padding:12px 17px; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem }
.compare-table th { background:var(--noir); color:#fff; font-weight:600; font-size:.7rem; letter-spacing:.04em }
.compare-table th:last-child { background:var(--green) }
.compare-table td:first-child { font-weight:500; color:var(--noir) }
.compare-table tr:nth-child(even) td { background:var(--bg) }
.compare-table tr:hover td { background:var(--green-pale) }
.ct-yes { color:var(--green) }
.ct-no  { color:var(--border) }

.ponc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:34px }
.ponc-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; transition:var(--ease) }
.ponc-card:hover { border-color:var(--green-bord); box-shadow:var(--sh-sm); transform:translateY(-3px) }
.ponc-card__from  { font-size:.63rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px }
.ponc-card__price { font-size:1.5rem; font-weight:800; color:var(--noir); margin-bottom:5px }
.ponc-card h3 { font-size:.89rem; margin-bottom:5px }
.ponc-card p  { font-size:.79rem; line-height:1.65 }

/* CONTACT */
.contact__wrap { display:grid; grid-template-columns:1fr 1.45fr; gap:60px; align-items:start }
.contact__detail { display:flex; gap:12px; margin-bottom:20px; align-items:flex-start }
.contact__detail-ico { width:38px; height:38px; background:var(--noir); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:#93c5fd; flex-shrink:0 }
.contact__detail-title { font-weight:600; font-size:.83rem; color:var(--noir); margin-bottom:2px }
.contact__detail-val { font-size:.8rem }
.contact__hours { background:var(--bg); border-radius:var(--r-lg); padding:18px; margin-top:20px }
.contact__hours-title { font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:10px }
.contact__hours-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:.8rem }
.contact__hours-row:last-child { border-bottom:none }
.contact__hours-row span:last-child { font-weight:600; color:var(--noir) }
.contact__form { background:var(--white); border-radius:var(--r-xl); padding:34px; box-shadow:var(--sh-md); border:1px solid var(--border) }
.form__group  { margin-bottom:14px }
.form__row    { display:grid; grid-template-columns:1fr 1fr; gap:13px }
.form__label  { display:block; font-size:.72rem; font-weight:700; color:var(--noir); margin-bottom:5px; letter-spacing:.02em }
.form__input,.form__select,.form__textarea { width:100%; padding:10px 13px; font-size:.85rem; color:var(--noir); background:var(--bg); border:1.5px solid transparent; border-radius:var(--r-sm); outline:none; transition:var(--ease) }
.form__input:focus,.form__select:focus,.form__textarea:focus { background:var(--white); border-color:var(--green); box-shadow:0 0 0 3px rgba(26,86,219,.08) }
.form__input.err,.form__select.err,.form__textarea.err { border-color:#EF4444; background:var(--white) }
.form__textarea { resize:vertical; min-height:108px }
.form__err { display:none; color:#EF4444; font-size:.7rem; margin-top:3px }
.form__err.show { display:block }
.form__ok  { display:none; background:rgba(26,86,219,.07); border:1px solid rgba(26,86,219,.25); border-radius:var(--r-md); padding:13px; text-align:center; color:#1237a8; font-size:.84rem; margin-top:10px }
.form__ok.show { display:block }

/* ORDER TUNNEL */
.order-overlay { position:fixed; inset:0; background:rgba(17,24,39,.87); z-index:3000; display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:var(--ease) }
.order-overlay.is-open { opacity:1; pointer-events:all }
.order-box { background:#fff; border-radius:26px; max-width:510px; width:100%; position:relative; transform:translateY(10px) scale(.98); transition:var(--ease); box-shadow:0 40px 100px rgba(0,0,0,.26); overflow:hidden }
.order-overlay.is-open .order-box { transform:none }
.order-head { background:var(--noir); padding:26px 30px 20px; position:relative }
.order-head::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--green),transparent) }
.order-close { position:absolute; top:13px; right:13px; width:27px; height:27px; background:rgba(255,255,255,.07); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,.4); font-size:.75rem; transition:var(--ease) }
.order-close:hover { background:var(--green); color:#fff }
.order-plan-name  { font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.33); margin-bottom:4px }
.order-plan-price { display:flex; align-items:baseline; gap:5px; margin-bottom:2px }
.order-plan-price span:first-child { font-size:2.1rem; font-weight:800; color:#fff }
.order-plan-price span:last-child  { font-size:.8rem; color:rgba(255,255,255,.28) }
.order-plan-desc  { font-size:.73rem; color:rgba(255,255,255,.28) }
.order-body { padding:22px 30px 30px }
.order-steps { display:flex; gap:5px; margin-bottom:20px }
.order-step-dot { flex:1; height:3px; border-radius:99px; background:var(--border); transition:.3s }
.order-step-dot.done { background:var(--green) }
.order-panel { display:none }
.order-panel.active { display:block }
.order-field { margin-bottom:12px }
.order-label { display:block; font-size:.7rem; font-weight:700; color:var(--noir); margin-bottom:4px }
.order-input,.order-select { width:100%; padding:10px 12px; font-size:.85rem; color:var(--noir); background:var(--bg); border:1.5px solid transparent; border-radius:var(--r-sm); outline:none; transition:var(--ease); font-family:var(--f) }
.order-input:focus,.order-select:focus { background:var(--white); border-color:var(--green); box-shadow:0 0 0 3px rgba(26,86,219,.08) }
.order-row { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.order-summary { background:var(--bg); border-radius:var(--r-md); padding:15px; margin-bottom:13px }
.order-summary-row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); font-size:.81rem }
.order-summary-row:last-child { border:none; font-weight:700; font-size:.88rem; color:var(--noir) }
.order-summary-row span:last-child { color:var(--green) }
.order-nav { display:flex; gap:9px; margin-top:17px }
.order-back { background:transparent; color:var(--muted); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:10px 15px; font-size:.83rem; font-weight:600; cursor:pointer; transition:var(--ease); font-family:var(--f) }
.order-back:hover { border-color:var(--green); color:var(--green) }
.order-next { flex:1; background:var(--green); color:#fff; border-radius:var(--r-sm); padding:10px 15px; font-size:.84rem; font-weight:700; cursor:pointer; transition:var(--ease); font-family:var(--f); display:flex; align-items:center; justify-content:center; gap:6px }
.order-next:hover { background:var(--green-dark); transform:translateY(-1px) }
.order-success { text-align:center; padding:10px 0 }
.order-success-ico { font-size:2.7rem; margin-bottom:11px }
.order-success h3  { font-size:1.35rem; font-weight:700; color:var(--noir); margin-bottom:6px }
.order-success p   { font-size:.84rem; color:var(--muted); line-height:1.7 }
.order-note { font-size:.69rem; color:var(--muted); text-align:center; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:4px }

/* REVEAL */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1) }
.reveal.in { opacity:1; transform:none }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media(max-width:1024px){
  .hero__inner { grid-template-columns:1fr; gap:40px }
  .hero__plans-col { display:none }
  .story__wrap,.gains__inner,.contact__wrap { grid-template-columns:1fr; gap:40px }
  .svcs__grid { grid-template-columns:repeat(2,1fr) }
  .plans__grid { grid-template-columns:1fr; max-width:360px; margin-inline:auto }
  .plan--star { transform:none } .plan--star:hover { transform:translateY(-4px) }
  .testis__grid { grid-template-columns:1fr 1fr }
  .trust-grid { grid-template-columns:repeat(2,1fr) }
  .footer__grid { grid-template-columns:1fr 1fr; gap:28px }
}
@media(max-width:768px){
  .nav__menu,.nav__actions { display:none }
  .nav__burger { display:flex; grid-column:3 }
  .nav__overlay { display:flex }
  .numbers__grid { grid-template-columns:repeat(2,1fr) }
  .numbers__cell:nth-child(2) { border-right:none }
  .values__grid,.svcs__grid,.svcs-full__grid { grid-template-columns:1fr }
  .testis__grid { grid-template-columns:1fr }
  .trust-grid { grid-template-columns:repeat(2,1fr) }
  .footer__grid { grid-template-columns:1fr }
  .footer__bottom { flex-direction:column; align-items:flex-start }
  .form__row { grid-template-columns:1fr; gap:0 }
  .contact__form { padding:20px 16px }
  .ponc-grid { grid-template-columns:1fr 1fr }
  /* Override inline styles sur les grilles de plans */
  .plans__grid { grid-template-columns:1fr !important; max-width:100% !important }
  /* Empêche les boutons de sortir de l'écran */
  .btn { white-space:normal }
  /* Hero */
  .hero__sub { max-width:100% }
  .hero__actions { flex-direction:column; align-items:stretch }
  .hero__counter { width:100% }
  /* Modal commande */
  .order-row { grid-template-columns:1fr !important }
  .order-head { padding:24px 20px 18px !important }
  .order-body { padding:20px 20px 24px !important }
  /* ── Grilles inline toutes pages — override !important obligatoire ──
     Couvre : "1fr 1fr", "repeat(3,1fr)", "repeat(4,1fr)"              */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }
  .svcs-full__grid[style] { grid-template-columns:1fr !important }

  /* Empêche les cells de forcer une largeur min > colonne disponible */
  .value-card, .svc-card, .plan, .testi, .svc-full,
  .hplan, .gain-row, .trust-cell { min-width:0 }

  /* Hero carousel mobile */
  .fsc__inner  { max-width:100%; width:100% }
  .fsc__cta    { white-space:normal; display:flex; width:100%; text-align:center; justify-content:center }
  .fsc__arrow  { width:36px; height:36px }
  .fsc__text   { max-width:100% }

  /* Panier : sticky recap → normal sur mobile */
  .recap-card { position:static !important; top:auto !important }
  /* Formulaire panier */
  .form-card { padding:20px 16px !important }
  /* Breadcrumb tunnel : compacté */
  .checkout-steps { flex-wrap:wrap; gap:4px }
  .checkout-steps__step { padding:5px 10px; font-size:.72rem }

  /* Numbers : border-right uniquement sur colonnes impaires */
  .numbers__cell:nth-child(even) { border-right:none }
  /* Paiement.html — formulaire CB et méthodes */
  .field-row   { grid-template-columns:1fr !important }
  .pay-methods { grid-template-columns:1fr !important }

  /* Sections : padding vertical réduit */
  .section { padding-top:clamp(48px,8vw,80px); padding-bottom:clamp(48px,8vw,80px) }
}
@media(max-width:480px){
  .svcs-full__grid { grid-template-columns:1fr }
  .cta-block__btns { flex-direction:column }
  .ponc-grid { grid-template-columns:1fr }
  .trust-grid { grid-template-columns:1fr }
  .numbers__grid { grid-template-columns:1fr }
  .numbers__cell { border-right:none }
  .hero__actions .btn { width:100%; justify-content:center }
  .logo__svg { height:60px !important; width:112px !important }
  /* Toutes les grilles inline → 1 colonne sur très petits écrans */
  div[style*="grid-template-columns:1fr 1fr"]       { grid-template-columns:1fr !important; gap:20px !important }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr !important; gap:16px !important }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:1fr !important; gap:16px !important }
  /* Page héro intérieure : padding réduit */
  .page-hero { padding-top:clamp(90px,12vw,130px) }
  /* Navigation overlay : liens moins grands */
  .nav__overlay .nav__link { font-size:1.25rem; padding:10px }
  /* Carousel hero : cacher les flèches sur très petits écrans */
  .fsc__arrow { width:30px; height:30px; font-size:.6rem }
  .fsc__dots { bottom:16px }
  /* Valeur card padding réduit sur très petits écrans */
  .value-card { padding:20px 16px }
}

/* ═══════════════════════════
   ORIENTATION PAYSAGE — BLOQUER sur petits écrans
   Force le mode portrait sur téléphones
═══════════════════════════ */
@media screen and (orientation:landscape) and (max-width:900px) {
  body { display:none }
  html::before {
    content:"Veuillez tourner votre appareil en mode portrait.";
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    width:100vw;
    font-family:'Inter',system-ui,sans-serif;
    font-size:1.1rem;
    font-weight:600;
    text-align:center;
    padding:2rem;
    color:#111827;
    background:#f9fafb;
    position:fixed;
    inset:0;
  }
}

/* ═══════════════════════════
   WATERMARK LOGO — pages intérieures
   Utilisation : ajouter class="page-has-watermark" sur <body>
═══════════════════════════ */
@keyframes watermark-breathe {
  0%,100% { opacity:.045; transform:translate(-50%,-50%) rotate(-12deg) scale(1) }
  50%      { opacity:.07;  transform:translate(-50%,-50%) rotate(-12deg) scale(1.04) }
}
body.page-has-watermark { position:relative }
body.page-has-watermark::before {
  content:'';
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  width:min(600px, 90vw);
  height:min(320px, 48vw);
  background:url('../logov5.svg') center/contain no-repeat;
  opacity:.06;
  pointer-events:none;
  z-index:50;
  animation:watermark-breathe 6s ease-in-out infinite;
}

/* ── Sélecteur de langue (drapeaux SVG) ── */
.nav__actions { display:flex; align-items:center; gap:8px; }
.lang-sel { display:flex; align-items:center; gap:2px; }
.lang-sel__btn { padding:3px 6px; border-radius:6px; text-decoration:none; transition:.2s cubic-bezier(.4,0,.2,1); background:transparent; display:inline-flex; align-items:center; gap:5px; }
.lang-sel__btn:hover { background:rgba(26,86,219,.1); transform:scale(1.06); }
.lang-sel__btn--active { background:rgba(26,86,219,.15); box-shadow:0 0 0 1.5px #1a56db; }
.lang-sel__label { font-size:.75rem; font-weight:600; letter-spacing:.03em; }
.flag-icon { border-radius:2px; display:block; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.nav:not(.is-scrolled) .lang-sel__label { color:rgba(255,255,255,.85); }
.lang-sel--mobile { display:flex; justify-content:center; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.lang-sel--mobile .lang-sel__btn { padding:4px 8px; }
.lang-sel--mobile .lang-sel__btn--active { background:rgba(255,255,255,.15); box-shadow:0 0 0 1.5px rgba(255,255,255,.55); }
.lang-sel--mobile .flag-icon { width:24px; height:17px; }
.lang-sel--mobile .lang-sel__label { font-size:.85rem; }
