/* =====================================================
   STONKS — palette crème / beige / noir
   ===================================================== */

:root{
  --bg:        #F5F1E8;          /* fond crème principal */
  --bg-soft:   #EDE6D6;          /* badges, tuiles d'icônes */
  --surface:   #FFFFFF;          /* fond des cartes */
  --surface-2: #FBF8F1;          /* fond cartes "soft" */
  --text:      #1a1a1a;          /* titres */
  --text-soft: #6e6557;          /* corps */
  --text-mute: #9a907e;          /* labels */
  --accent:    #b8a684;          /* gold beige */
  --accent-dk: #8a7f6e;          /* gold foncé */
  --border:    #e5dec8;          /* bordures discrètes */
  --dark:      #0a0a0a;          /* pills noires, CTA dark */
  --shadow:    0 10px 30px rgba(20,15,5,0.05);
  --shadow-lg: 0 20px 60px rgba(20,15,5,0.08);
  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --container: 1200px;
}

/* =====================================================
   Reset léger
   ===================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
p{ margin:0; color:var(--text-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* =====================================================
   Layout
   ===================================================== */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
.section-head{ text-align:center; max-width: 820px; margin: 0 auto 56px; }
.section-title{
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08;
  margin: 14px 0 14px;
}
.section-lead{ font-size: 17px; line-height: 1.55; }

/* utilitaires */
.text-accent{ color: var(--accent); }
.badge{
  display: inline-block;
  background: var(--bg-soft);
  color: var(--accent-dk);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
}

/* =====================================================
   Boutons
   ===================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: opacity .2s, transform .2s, background .2s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--accent); color: #fff; }
.btn--primary:hover{ background: var(--accent-dk); }
.btn--white-pill{
  background: #fff;
  color: var(--text);
  padding: 11px 20px;
  font-size: 13.5px;
}

/* =====================================================
   Header
   ===================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.site-header.is-stuck{ border-bottom-color: var(--border); background: rgba(245,241,232,.92); backdrop-filter: blur(10px); }
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 78px;
}

.site-header__burger{
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.site-header__burger span{
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* =====================================================
   Hero
   ===================================================== */
.hero{ padding: 32px 0 80px; }
.hero__inner{
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.hero__title{
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.hero__lead{
  font-size: 17px;
  line-height: 1.55;
  max-width: 480px;
  margin-bottom: 30px;
}
.hero__ctas{
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.hero__trust{
  display: flex;
  gap: 28px;
  flex-wrap: nowrap;
  color: var(--text-soft);
  font-size: 13.5px;
}
/* en dessous de cette largeur, le hero__content devient trop étroit pour 3 items côte à côte */
@media (max-width: 1280px){
  .hero__trust{ flex-direction: column; flex-wrap: nowrap; gap: 12px; }
}
.hero__trust li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--accent-dk);
  font-size: 10px;
  font-weight: 700;
}
.hero__visual{ position: relative; }
.hero__visual img{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* =====================================================
   Plateforme (3 cartes)
   ===================================================== */
.plateforme{ padding: 80px 0; background: var(--bg-soft); }
.plateforme__head{
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;
}
.plateforme__title{
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.plateforme__grid{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* =====================================================
   Cards génériques
   ===================================================== */
.card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card--stat{ display: flex; flex-direction: column; }
.card__big{
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.card__big-sub{
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 30px;
}
.card--stat p{ font-size: 13.5px; line-height: 1.5; }

.card--dark{ padding: 0; }
.card--dark .card__photo{
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.card--dark .card__overlay{
  position: relative;
  z-index: 1;
  background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,0) 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  min-height: 380px;
  color: #fff;
}
.card--dark .card__overlay h3{
  font-size: 18px;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 18px;
}


/* =====================================================
   Méthodologie (diagramme Growth Creative)
   ===================================================== */
.meth{ padding: 100px 0; }


/* =====================================================
   Avantages (5 items inline)
   ===================================================== */

/* =====================================================
   Solutions (3 cartes + 1 wide)
   ===================================================== */
.solutions{ padding: 40px 0 80px; }
.card--soft{ background: var(--surface-2); }
.card--soft h3{ font-size: 18px; margin-bottom: 10px; line-height: 1.3; }
.card--soft p{ font-size: 14px; line-height: 1.55; }


/* =====================================================
   Features (4 cartes du bas)
   ===================================================== */
.features{ padding: 40px 0 90px; }

/* =====================================================
   Booking
   ===================================================== */
.booking{ padding: 80px 0 100px; background: var(--bg-soft); }
.booking__embed{
  max-width: 980px;
  margin: 0 auto;
  background: transparent;
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}
.booking__embed iframe{ background: transparent !important; }

/* =====================================================
   Footer
   ===================================================== */
.site-footer{
  background: var(--bg);
  padding: 60px 0 30px;
  border-top: 1px solid var(--border);
}
.site-footer__inner{ display: grid; gap: 30px; }
.site-footer__logo{ height: 22px; width: auto; }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 1024px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual img{ max-width: 100%; }
  .plateforme__head{ grid-template-columns: 1fr; gap: 20px; }
  .plateforme__grid, .solutions__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .site-header__burger{ display: flex; }
  .plateforme__grid, .solutions__grid, .features__grid{ grid-template-columns: 1fr; }
  .hero__title{ font-size: 38px; }
}

/* menu mobile ouvert */

/* ===== Refonte Plateforme : cartes alignées sur la référence ===== */

/* carte x10 — séparateur, avatars, badge conversion */
.card--stat{ display: flex; flex-direction: column; }
.card__sep{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 30px 0 26px;
}
.card--stat p{ margin-bottom: 28px; }
.avatars{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(20,15,5,.1);
}
.avatar:first-child{ margin-left: 0; }
.card__conv{
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-top: auto;
}

/* carte centre photo — image qui DÉBORDE en haut + overlay sombre en bas */
.card--dark{
  min-height: 540px;
  background: transparent;
  padding: 0;
  overflow: visible;
  position: relative;
}
.card__photo-wrap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: -50px;                       /* la photo dépasse de 50px au-dessus */
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 0;
}
.card__photo-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.card--dark .card__overlay{
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.7) 45%, rgba(10,10,10,0) 100%);
  height: 100%;
  min-height: 540px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #fff;
}
.card--dark .card__overlay h3{
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 22px;
}
.btn--upper{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
  font-weight: 600;
}

/* colonne droite : 2 cartes empilées */
.cards-stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card--verticals .card__kicker{
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.card--verticals h3{
  font-size: 18px;
  margin-bottom: 22px;
}
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}

.card--quality h3{
  font-size: 18px;
  margin-bottom: 16px;
}
.qual-bars{ display: flex; flex-direction: column; gap: 6px; }
.qual-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
}
.qual-bar__label{ font-size: 14px; font-weight: 500; color: var(--text); }
.qual-bar__value{ font-size: 14px; font-weight: 600; color: var(--text); }
.qual-bar--solid{
  background: var(--dark);
  border-color: var(--dark);
}
.qual-bar--solid .qual-bar__label,
.qual-bar--solid .qual-bar__value{ color: #fff; }

/* ===== Nav-pill (style neowave) ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border: 0;
  padding: 14px 0;
}
.site-header.is-stuck{ background: transparent; backdrop-filter: none; border: 0; }
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.nav-pill{
  display: flex;
  align-items: center;
  gap: 0;
  background: #ffffff;
  border-radius: 999px;
  padding: 7px 7px 7px 28px;
  box-shadow: 0 12px 30px rgba(20,15,5,0.08), 0 2px 6px rgba(20,15,5,0.04);
  width: 100%;
  max-width: 920px;
}
.nav-pill__logo{
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}
.nav-pill__logo img{
  height: 22px;
  width: auto;
}
.nav-pill__nav{
  display: flex;
  gap: 32px;
  margin: 0 24px;
}
.nav-pill__link{
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 8px 0;
  transition: color .2s;
}
.nav-pill__link:hover{ color: #8a7f6e; }

.nav-pill__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0a0a0a;
  border-radius: 999px;
  padding: 7px 7px 7px 18px;
  color: #fff;
  margin-left: 4px;
}
.nav-pill__cta:hover{ background: #1f1f1f; }
.nav-pill__cta-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.nav-pill__cta-text strong{
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.nav-pill__cta-text em{
  font-style: normal;
  font-size: 11.5px;
  color: #9a907e;
  margin-top: 2px;
}
.nav-pill__avatar{
  position: relative;
  display: inline-block;
  width: 36px; height: 36px;
}
.nav-pill__avatar img{
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;   /* recadre vers le haut → visage bien centré */
  display: block;
}
.nav-pill__dot{
  position: absolute;
  top: 1px; right: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0a0a0a;
}

/* responsive : hamburger en dessous de 760px */
@media (max-width: 760px){
  .nav-pill{ padding: 7px 7px 7px 18px; max-width: 100%; }
  .nav-pill__nav{ display: none; }
  .nav-pill__cta-text em{ display: none; }
  .nav-pill__cta-text strong{ font-size: 13px; }
}

/* titre plateforme centré (sans intro à gauche) */
.plateforme__head--centered{
  display: block;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px;
}
.plateforme__head--centered .plateforme__title{
  font-size: clamp(32px, 3.6vw, 44px);
}

/* avatars : style image (override des gradients précédents) */
img.avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -8px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(20,15,5,.1);
}
img.avatar:first-child{ margin-left: 0; }

/* Qualité du flux : barres avec largeurs différentes (effet stacked) */
.card--quality .qual-bars{ gap: 0; position: relative; }
.qual-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f3eee1;
  border: 1px solid var(--border);
  margin-bottom: -2px;            /* léger chevauchement */
  position: relative;
}
.qual-bar--w1{ width: 70%; }
.qual-bar--w2{ width: 100%; z-index: 2; }   /* noire la plus large */
.qual-bar--w3{ width: 96%; }
.qual-bar--solid{
  background: var(--dark);
  border-color: var(--dark);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.qual-bar--solid .qual-bar__label,
.qual-bar--solid .qual-bar__value{ color: #fff; }

/* Header pill : logo plus gros, moins d'espace, pill plus compact */
.nav-pill{
  max-width: 780px;
  padding: 7px 7px 7px 22px;
  gap: 0;
}
.nav-pill__logo{ margin-right: 0; }
.nav-pill__logo img{ height: 30px; }
.nav-pill__nav{ margin: 0 0 0 24px; gap: 26px; }
.nav-pill__cta{ margin-left: auto; }

/* === Header pill exact comme neowave === */
.nav-pill{
  max-width: 920px;
  padding: 7px 7px 7px 26px;
  gap: 0;
}
.nav-pill__logo{ margin-right: 0; }
.nav-pill__logo img{ height: 26px; }
.nav-pill__nav{
  margin: 0 auto;          /* CENTRE le menu dans l'espace restant */
  gap: 34px;
}
.nav-pill__link{
  font-size: 15.5px;
  font-weight: 500;
  color: #1a1a1a;
}
.nav-pill__cta{
  margin-left: 0;
  padding: 6px 6px 6px 18px;
}
.nav-pill__cta-text strong{ font-size: 14px; }
.nav-pill__cta-text em{ font-size: 12px; }
.nav-pill__avatar,
.nav-pill__avatar img{ width: 38px; height: 38px; }
.nav-pill__dot{
  width: 10px; height: 10px;
  border: 2px solid #0a0a0a;
}

/* ============================
   Plateforme — fidèle neowave
   ============================ */

/* head : 2 colonnes, titre PAS centré, aligné en colonne droite */
.plateforme__head{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  margin-bottom: 60px;
  align-items: start;
}
.plateforme__title{
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-align: left;
  color: var(--text);
}

/* sceau circulaire avec triangle au centre */

/* x10 énorme */
.card--stat{ padding: 36px 32px; }
.card__big{
  font-size: 130px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}
.card__big-sub{
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 38px;
}
.card__sep{ margin: 0 0 32px; }
.card--stat p{ font-size: 14.5px; line-height: 1.55; margin-bottom: 32px; }

/* photo qui déborde davantage en haut */
.card--dark{ min-height: 580px; }
.card__photo-wrap{ top: -80px; }
.card__photo-wrap img{ object-position: center 12%; }
.card--dark .card__overlay{
  min-height: 580px;
  background: linear-gradient(to top, rgba(10,10,10,.96) 0%, rgba(10,10,10,.75) 35%, rgba(10,10,10,0) 75%);
}

/* awards SVG en haut-droite de la carte photo */

/* === Fix neowave : font x10, largeurs, hauteurs alignées === */

/* font Geist sur le x10 (font display moderne) */
.card__big{
  font-family: "Geist", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.045em;
  font-size: 140px;
}

/* milieu plus large + alignement vertical strict */
.plateforme__grid{
  grid-template-columns: 1fr 1.75fr 1fr;
  align-items: stretch;
}

/* carte photo : moins haute pour matcher les autres */
.card--dark{ min-height: 520px; }
.card--dark .card__overlay{ min-height: 520px; }
.card__photo-wrap{ top: -70px; }

/* colonne droite : 2 cartes qui se partagent la hauteur EXACTE de la photo */
.cards-stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.cards-stack > .card{ flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cards-stack > .card h3{ margin-bottom: 16px; }

/* carte x10 : justifier le contenu pour remplir la hauteur */
.card--stat{
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
}
.card--stat p{ margin-bottom: 24px; }
.card__conv{ margin-top: auto; }

/* Qualité du flux : labels sur 1 ligne, barre exclusifs un peu plus large */
.qual-bar__label, .qual-bar__value{ white-space: nowrap; }
.qual-bar--w1{ width: 78%; }

/* ===================================================
   STONKS — palette ecom (override final)
   =================================================== */
:root{
  --bg:        #F5F5F5;
  --bg-soft:   #ECECEC;
  --surface:   #FFFFFF;
  --surface-2: #FBFBFB;
  --text:      #00061a;
  --text-soft: #525252;
  --text-mute: #8a8a8a;
  --accent:    #b8a684;   /* gold beige */
  --accent-dk: #8a7f6e;
  --border:    #E5E5E5;
  --dark:      #00061a;
  --shadow:    0 10px 30px rgba(0, 6, 26, 0.05);
  --shadow-lg: 0 20px 60px rgba(0, 6, 26, 0.08);
}
body{ background-color: var(--bg) !important; color: var(--text); }

/* gradient signature cyan -> magenta */
.text-accent{
  background: linear-gradient(119deg, #D125F4, #00D5F9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* badges */
.badge{
  background: var(--bg-soft);
  color: var(--text-soft);
}

/* sections : fond uniforme propre */
.plateforme{ background: #ECECEC; }
.booking{ background: #ECECEC; }
.site-header{ background: var(--bg); }
.site-footer{ background: var(--bg); border-top-color: var(--border); }
.plateforme__title{ color: var(--text); }

/* CTAs : bouton noir + cercle gradient à droite (signature ecom) */
.btn--primary{
  background: #00061a;
  color: #fff;
  padding: 8px 8px 8px 22px;
}
.btn--primary:hover{ background: #1a1f33; }
.btn--primary span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #D125F4, #00D5F9);
  color: #fff;
  font-size: 13px;
}

/* cartes : surface blanche pure, bordure neutre */
.card, .feature-card, .meth-card{
  background: var(--surface);
  border-color: var(--border);
}
.card--soft{ background: var(--surface-2); }

/* tags Verticales (LAMAL LCA etc.) */
.tags span{
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

/* qual bars : fond gris très doux */
.qual-bar{ background: #F0F0F0; border-color: var(--border); }
.qual-bar--solid{ background: #00061a; border-color: #00061a; }

/* meth pills, header CTA */
.nav-pill__cta{ background: #00061a; }
.nav-pill__cta:hover{ background: #1a1f33; }
.nav-pill__cta-text em{ color: #9a9aae; }
.nav-pill__dot{ border-color: #00061a; }

/* ===== Background grain noise (style ecom) ===== */
body{
  background-color: #F5F5F5 !important;
  background-image: url(../img/noise-bg-cdn.png);
  background-repeat: repeat;
  background-size: 340px auto;
  background-attachment: fixed;
}
.plateforme,
.booking{
  background-color: #ECECEC !important;
  background-image: url(../img/noise-bg-cdn.png);
  background-repeat: repeat;
  background-size: 340px auto;
}
.solutions, .features, .avantages, .meth{
  background-color: transparent !important;
}

/* ===== Carte x10 : avatars collés au-dessus du "+ 80%" ===== */
.card--stat{ display: flex; flex-direction: column; }
.avatars{ margin: auto 0 12px !important; }    /* pousse les avatars en bas */
.card__conv{ margin-top: 0 !important; }       /* + 80% colle juste après */

/* ===== Font x10 : moins bold, plus aérée ===== */
.card__big{
  font-family: "Geist", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-size: 130px;
}

/* ===== Titre VRAIMENT centré ===== */
.plateforme__head.plateforme__head--centered{
  display: block !important;
  grid-template-columns: none !important;
  text-align: center !important;
  max-width: 900px;
  margin: 0 auto 50px;
}
.plateforme__head.plateforme__head--centered .plateforme__title{
  text-align: center !important;
  font-size: clamp(34px, 3.8vw, 46px);
  line-height: 1.15;
  margin: 0 auto;
}

/* "Suisse." en beige comme avant (override gradient violet-cyan) */
.text-accent{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #b8a684 !important;
}

/* === Bouton "Réserver un appel" sur carte photo : compact, centré, cercle gradient === */
.card--dark .btn--white-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 7px 7px 7px 22px;
  gap: 14px;
  font-size: 12.5px;
}
.card--dark .btn--white-pill::after{
  content: "→";
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #D125F4, #00D5F9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
}

/* === Cartes droite : contenu collé EN HAUT (pas centré verticalement) === */
.cards-stack > .card{
  justify-content: flex-start !important;
}
.card--verticals,
.card--quality{ padding: 28px 26px 28px; }
.card--verticals .card__kicker{ margin-bottom: 6px; }
.card--verticals h3{ margin-bottom: 22px; }
.card--quality h3{ margin-bottom: 14px; }

/* === Qualité du flux : 3 barres alignées à 100% (pas de largeurs variables) === */
.qual-bar--w1,
.qual-bar--w2,
.qual-bar--w3{ width: 100%; }
.qual-bar{ margin-bottom: 8px; }
.qual-bar:last-child{ margin-bottom: 0; }

/* barres proportionnelles à leur valeur */
.qual-bar--w1{ width: 100%; }   /* 100% Exclusifs */
.qual-bar--w2{ width: 90%;  }   /* 90%  Qualifiés */
.qual-bar--w3{ width: 76%;  }   /* 76%  Taux de conversion */

/* tags Verticales : tous sur 1 seule ligne */
.card--verticals .tags{
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}
.card--verticals .tags span{
  font-size: 10px;
  padding: 5px 9px;
  letter-spacing: 0.04em;
  flex-shrink: 1;
}

/* gros espace après le titre de la section */
.plateforme__head.plateforme__head--centered{
  margin: 0 auto 100px !important;
}

/* tags Verticales : texte normal, sans bordure, peuvent revenir à la ligne */
.card--verticals .tags{
  flex-wrap: wrap;
  gap: 10px;
}
.card--verticals .tags span{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  background: #F0F0F0;
  border: 0;
  color: var(--text);
  border-radius: 999px;
}

/* === Header pill : matcher exactement neowave === */
.nav-pill{
  padding: 6px 6px 6px 28px;
  max-width: 920px;
}
.nav-pill__logo img{ height: 22px; }
.nav-pill__nav{
  margin: 0 auto;
  gap: 28px;
}
.nav-pill__link{
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}
.nav-pill__cta{
  padding: 6px 6px 6px 18px;
  gap: 12px;
}
.nav-pill__cta-text strong{ font-size: 13.5px; font-weight: 600; }
.nav-pill__cta-text em{ font-size: 11.5px; }
.nav-pill__avatar,
.nav-pill__avatar img{ width: 36px; height: 36px; }
.nav-pill__dot{
  width: 9px; height: 9px;
  top: 0; right: 0;
  border-width: 2px;
}

/* tags Verticales : empilés VERTICALEMENT, un par ligne */
.card--verticals .tags{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Tags Verticales : pas de fond, check vert SVG devant */
.card--verticals .tags{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  overflow: visible;
}
.card--verticals .tags span{
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 0 24px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  position: relative;
  text-transform: none;
}
.card--verticals .tags span::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M2 8.2l4 4 8-9' stroke='%2322c55e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* texte descriptif x10 : plus grand */
.card--stat p{ font-size: 17px; line-height: 1.5; }

/* titres des cartes droite (Verticales couvertes / Qualité du flux) : moins bold */
.card--verticals h3,
.card--quality h3{
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* === Animation barres Qualité du flux : révélation gauche -> droite === */
.card--quality .qual-bar{
  clip-path: inset(0 100% 0 0 round 10px);
  transition: clip-path 1.6s cubic-bezier(.22, 1, .36, 1);
}
.card--quality.is-revealed .qual-bar{
  clip-path: inset(0 0 0 0 round 10px);
}
.card--quality.is-revealed .qual-bar--w2{ transition-delay: 0.2s; }
.card--quality.is-revealed .qual-bar--w3{ transition-delay: 0.4s; }

/* container plus large : moins d'espace vide sur les côtés */
:root{ --container: 2000px; }
.nav-pill{ max-width: 1080px; }   /* pill header un peu plus large aussi */

/* Hero distinct du body : fond blanc pur sans grain */
.hero{
  background-color: #ffffff;
  background-image: none;
  margin: 0 24px;
  border-radius: 24px;
  padding: 50px 40px 80px;
}

/* Fond bureau derrière la carte couple */
.card__bg-office{
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  z-index: 0;
  filter: brightness(0.45) blur(2px) saturate(0.85);
}

/* 1) revert hero : pas de white card, juste fond hérité */
.hero{
  background-color: transparent !important;
  background-image: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 32px 0 80px !important;
}

/* 2) header pill : COMPACT (moins d'espace logo <-> menu <-> CTA) */
.nav-pill{
  max-width: 740px !important;
  padding: 6px 6px 6px 22px;
}
.nav-pill__nav{ gap: 24px; }

/* 3) photo couple dépasse plus, montre plus de tête */
.card__photo-wrap{ top: -110px !important; }
.card__photo-wrap img{ object-position: center top !important; }
.card--dark{ min-height: 540px; }
.card--dark .card__overlay{ min-height: 540px; }

/* titres des cartes droite centrés */
.card--verticals .card__kicker,
.card--verticals h3,
.card--quality h3{ text-align: center; }

/* encore plus d'espace après le titre */
.plateforme__head.plateforme__head--centered{ margin: 0 auto 180px !important; }

/* ===== Responsive mobile : section plateforme ===== */
@media (max-width: 760px){
  .plateforme{ padding: 50px 0; }
  .plateforme__head.plateforme__head--centered{
    margin: 0 auto 50px !important;
    padding: 0 16px;
  }
  .plateforme__head.plateforme__head--centered .plateforme__title{
    font-size: 28px !important;
    line-height: 1.2;
  }

  /* grid plateforme : 1 colonne stack */
  .plateforme__grid{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* carte x10 — compacte */
  .card--stat{ padding: 28px 24px; }
  .card__big{ font-size: 80px !important; }
  .card__big-sub{ margin-bottom: 22px; }
  .card__sep{ margin: 0 0 22px; }
  .card--stat p{ font-size: 15px; margin-bottom: 20px; }
  .avatars{ margin: 14px 0 8px !important; }
  .card__conv{ font-size: 14px; }

  /* carte photo : débordement réduit pour mobile */
  .card--dark{ min-height: 420px !important; }
  .card--dark .card__overlay{ min-height: 420px !important; padding: 24px; }
  .card__photo-wrap{ top: -40px !important; }
  .card__photo-wrap img{ object-position: center 18% !important; }
  .card--dark .card__overlay h3{ font-size: 17px; margin-bottom: 16px; }

  /* cards droite : tags restent verticaux */
  .cards-stack{ height: auto !important; gap: 16px; }
  .cards-stack > .card{ flex: initial; }
  .card--verticals .tags{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .card--verticals,
  .card--quality{ padding: 24px 22px; }
  .card--verticals h3, .card--quality h3{ font-size: 17px; margin-bottom: 14px; }

  /* qualité du flux : largeurs proportionnelles aux % affichés */
  .qual-bar--w1{ width: 100% !important; }   /* 100% Exclusifs */
  .qual-bar--w2{ width: 90% !important; }    /* 90%  Qualifiés */
  .qual-bar--w3{ width: 76% !important; }    /* 76%  Taux de conversion */
}

/* tablette intermédiaire */
@media (min-width: 761px) and (max-width: 1024px){
  .plateforme__grid{ grid-template-columns: 1fr; gap: 18px; }
  .cards-stack{ flex-direction: row; height: auto; }
  .cards-stack > .card{ flex: 1; }
  .card__photo-wrap{ top: -60px !important; }
  .card--dark{ min-height: 480px; }
  .card--dark .card__overlay{ min-height: 480px; }
  .plateforme__head.plateforme__head--centered{ margin-bottom: 80px !important; }
}

/* ===== Méthodologie : style "référence neowave" avec numéros + icônes ===== */

/* Header de carte : icône + numéro + titre alignés horizontalement */

/* Centre : icône au-dessus du texte */

/* Pills avec icône-cercle à gauche */

/* Positions des pills (relatives au diagramme) */

/* ===== Responsive : tablette/mobile ===== */
@media (max-width: 1024px){
}
@media (max-width: 640px){
}

/* Logo bcp plus grand + CTA collé aux bords (pas de blanc autour) */
.nav-pill{
  padding: 0 0 0 26px !important;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
  min-height: 56px;
}
.nav-pill__cta{ align-self: stretch !important; }
.nav-pill__logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-pill__logo img{ height: 16px !important; }
.nav-pill__nav{
  align-self: center;
  margin: 0 auto;
  gap: 28px;
}
.nav-pill__cta{
  margin: 0;
  padding: 10px 18px 10px 22px;
  border-radius: 0;        /* clipped par overflow:hidden du pill blanc */
  height: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* CTA : pill complet (arrondi des 2 côtés), noir pur, déborde pour toucher les bords */
.nav-pill{
  padding: 7px 7px 7px 26px !important;
  overflow: visible !important;
}
.nav-pill__cta{
  background: #000000 !important;
  border-radius: 999px !important;
  padding: 8px 8px 8px 22px !important;
  margin: -7px -7px -7px 0 !important;   /* cancel le padding pour toucher bord haut/bas/droit */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav-pill__cta:hover{ background: #1a1a1a !important; }

/* header transparent : hérite du fond du body (même couleur + grain que le hero) */
.site-header,
.site-header.is-stuck{
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
}

/* ===== Section Processus (Notre machine d'acquisition) ===== */
.process{ padding: 100px 0 90px; }
.process .section-head{ margin-bottom: 56px; }


/* mini-cartes preview en bas */
.prev{
  margin-top: auto;
  background: #F7F2E6;
  border-radius: 12px;
  padding: 14px 16px;
}

/* Process : responsive détaillé */
@media (max-width: 1024px){
  .process{ padding: 70px 0 60px; }
  .process .section-head{ margin-bottom: 36px; padding: 0 16px; }
}
@media (max-width: 640px){
  .process{ padding: 50px 0 50px; }
  .section-title{ font-size: 28px !important; }
  .section-lead{ font-size: 15px; }
  .prev{ padding: 12px 14px; }
}

/* ===== Section Présence Locale ===== */
.locale{ padding: 90px 0 100px; }
.locale__grid{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
}
.locale__title{
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 22px 0 22px;
  color: #1a1a1a;
}
.locale__lead{
  font-size: 16px;
  line-height: 1.6;
  color: #6b6258;
  margin-bottom: 30px;
}

/* Carte SVG */
.locale__map{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
}

/* Avatars sur la carte */

/* Pills avec drapeau canton */
/* Mini écussons cantonaux stylisés */

/* Responsive */
@media (max-width: 1024px){
  .locale__grid{ grid-template-columns: 1fr; gap: 40px; }
  .locale__map{ max-width: 600px; margin: 0 auto; }
}
@media (max-width: 640px){
  .locale{ padding: 60px 0 70px; }
  .locale__title{ font-size: 28px; }
}

/* halo large clair autour du pill (style neowave) */
.nav-pill{
  box-shadow:
    0 0 0 10px rgba(255, 255, 255, 0.55),
    0 12px 30px rgba(20, 15, 5, 0.06) !important;
}

/* halo plus fin et plus clair */
.nav-pill{
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.4),
    0 12px 30px rgba(20, 15, 5, 0.05) !important;
}

/* Hero : fond blanc avec grain */
.hero{
  background-color: #ffffff !important;
  background-image: url(../img/noise-bg-cdn.png) !important;
  background-repeat: repeat !important;
  background-size: 340px auto !important;
}

/* espace en haut entre le bord et le pill */
.site-header{ padding: 28px 0 14px !important; }

/* header (top bar) : même fond que le hero (blanc + grain) */
.site-header,
.site-header.is-stuck{
  background-color: #ffffff !important;
  background-image: url(../img/noise-bg-cdn.png) !important;
  background-repeat: repeat !important;
  background-size: 340px auto !important;
}

/* Seul le pill reste collé en haut — pas le wrapper du header */
.site-header{
  position: static !important;
}
.nav-pill{
  position: fixed !important;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.site-header__inner{ position: relative; height: 78px; }

/* ===== UNIFORMISATION : alternance blanc / crème très claire ===== */
:root{
  --bg-white:  #ffffff;
  --bg-cream:  #FAF6EB;   /* beige crème très très claire */
}

/* body */
body{
  background-color: var(--bg-white) !important;
}

/* sections blanches (1, 3, 5, ...) */
.site-header,
.hero,
.process,
.avantages,
.features,
.site-footer{
  background-color: var(--bg-white) !important;
}

/* sections crème (2, 4, 6, ...) */
.plateforme,
.locale,
.solutions,
.booking{
  background-color: var(--bg-cream) !important;
}

/* grain noise sur TOUTES les sections */
.site-header,
.hero,
.plateforme,
.process,
.locale,
.avantages,
.solutions,
.features,
.booking,
.site-footer{
  background-image: url(../img/noise-bg-cdn.png) !important;
  background-repeat: repeat !important;
  background-size: 340px auto !important;
}

/* crème encore plus claire (moins beige) */
:root{ --bg-cream: #FBF8F1; }

/* sections : position relative pour le ::after fade */
.site-header, .hero, .plateforme, .process, .locale,
.avantages, .solutions, .features, .booking,
.site-footer{ position: relative; }

/* fade en bas : blanc -> crème */
.site-header::after, .hero::after,
.process::after, .avantages::after,
.features::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-cream) 100%);
  pointer-events: none;
  z-index: 1;
}

/* fade en bas : crème -> blanc */
.plateforme::after, .locale::after,
.solutions::after, .booking::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-white) 100%);
  pointer-events: none;
  z-index: 1;
}

/* s'assurer que le contenu reste au-dessus du fade */
.container, .section-head, .process__grid,
.plateforme__grid, .locale__grid, .features__grid,
.solutions__grid, .solutions__row2, .hero__inner{ position: relative; z-index: 2; }

/* fades avec grain ET plus longs pour rendre la transition invisible */
.site-header::after, .hero::after,
.process::after, .avantages::after,
.features::after{
  height: 200px !important;
  background:
    linear-gradient(to bottom, transparent 0%, var(--bg-cream) 100%),
    url(../img/noise-bg-cdn.png) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 340px auto !important;
  background-blend-mode: normal, multiply;
}
.plateforme::after, .locale::after,
.solutions::after, .booking::after{
  height: 200px !important;
  background:
    linear-gradient(to bottom, transparent 0%, var(--bg-white) 100%),
    url(../img/noise-bg-cdn.png) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 340px auto !important;
  background-blend-mode: normal, multiply;
}

/* pill toujours au 1er plan (au-dessus des fades et du contenu) */
.nav-pill{ z-index: 9999 !important; }

/* le header complet promu au sommet du stacking pour que le pill (fixed) soit visible partout */
.site-header{
  position: relative !important;
  z-index: 99999 !important;
}
.site-header__inner{
  position: relative;
  z-index: auto;
}

/* annuler tous les fades entre sections */
.site-header::after, .hero::after,
.plateforme::after, .process::after,
.locale::after, .avantages::after,
.solutions::after, .features::after,
.booking::after{
  display: none !important;
  content: none !important;
}

/* num à côté du titre, plus en bloc isolé au-dessus */

/* cercle CTA hero : gradient beige (au lieu de cyan/magenta) */
.btn--primary span{
  background: linear-gradient(145deg, #c9b89a, #8a7f6e) !important;
}

/* hero trust : texte plus gros + checks beige */
.hero__trust{ font-size: 15px; gap: 32px; }
.hero__trust .check{
  background: #EDE6D6 !important;
  color: #b8a684 !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
}

/* texte des cartes process : plus grand et un peu plus marqué */

/* titres utilisent toute la largeur disponible */

/* cercle CTA carte photo : gradient beige (au lieu de cyan/magenta) */
.card--dark .btn--white-pill::after{
  background: linear-gradient(145deg, #c9b89a, #8a7f6e) !important;
}

/* barre Leads qualifiés 90% : beige solid au lieu de noir */
.qual-bar--solid{
  background: linear-gradient(145deg, #c9b89a, #8a7f6e) !important;
  border-color: #8a7f6e !important;
}
.qual-bar--solid .qual-bar__label,
.qual-bar--solid .qual-bar__value{ color: #fff !important; }

/* image carte Suisse romande (remplace le SVG) */
.map-bg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* border de la barre beige : plus clair pour le contraste */
.qual-bar--solid{
  border-color: #ddd1ba !important;
  border-width: 1.5px !important;
}

/* ===== Section Process v2 (NOUS FAISONS / VOUS RECEVEZ) ===== */
.proc2{ padding: 90px 0 100px; }
.proc2__container{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  max-width: 2000px;
  width: 100%;
}
.proc2__col{
  background: #FBF8F1;
  border-radius: 18px;
  padding: 36px 36px 36px;
  box-shadow: 0 10px 30px rgba(20,15,5,.04);
}
.proc2__title{
  font-size: 32px;
  font-weight: 700;
  margin: 16px 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #1a1a1a;
}
.proc2__sub{
  font-size: 14px;
  color: #6b6258;
  margin-bottom: 30px;
}

/* steps (gauche) */
.proc2__steps{ display: flex; flex-direction: column; gap: 22px; padding: 0; margin: 0; list-style: none; }
.step{
  display: grid;
  grid-template-columns: 28px 40px 1fr;
  gap: 14px;
  align-items: start;
}
.step__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #EDE6D6;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 12px;
  margin-top: 4px;
}
.step__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #EDE6D6;
  margin-top: 0;
}
.step h4{ font-size: 15px; font-weight: 700; margin: 0 0 4px; color: #1a1a1a; }
.step p{ font-size: 13.5px; line-height: 1.5; color: #6b6258; margin: 0; }

/* benefits (droite) */
.benefit strong{ font-size: 15px; color: #1a1a1a; display: block; margin-bottom: 2px; }
.benefit span{ font-size: 13.5px; color: #6b6258; line-height: 1.5; }

/* mini dashboard CRM */
.crm-card{
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ece6d8;
  padding: 16px;
  margin-bottom: 18px;
}
.tag{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-style: normal;
}

/* callout en bas */
.proc2__callout{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ece6d8;
  padding: 16px;
}
.proc2__check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #EDE6D6;
  flex-shrink: 0;
}
.proc2__callout strong{ font-size: 13.5px; color: #1a1a1a; display: block; margin-bottom: 3px; line-height: 1.4; }
.proc2__callout span{ font-size: 12.5px; color: #6b6258; }

/* responsive */
@media (max-width: 1024px){
  .proc2__container{ grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px){
  .proc2{ padding: 60px 0; }
  .proc2__col{ padding: 24px 22px; }
  .proc2__title{ font-size: 24px; }
}

/* ===== Footer ===== */
.site-footer{ padding: 60px 0 40px; }
.site-footer__inner{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start;
}
.site-footer__logo{ height: 26px; width: auto; }
.site-footer__tag{ font-size: 15px; color: #1a1a1a; font-weight: 500; }

.site-footer__info{ display: flex; flex-direction: column; gap: 14px; }
.site-footer__info li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1a1a1a;
}
.site-footer__info a{ color: #1a1a1a; }
.site-footer__info a:hover{ color: #8a7f6e; }

.site-footer__col-title{
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
}

@media (max-width: 760px){
  .site-footer__inner{ grid-template-columns: 1fr; gap: 36px; }
}

/* badges NOUS FAISONS / VOUS RECEVEZ : fond blanc */
.proc2 .badge{ background: #ffffff !important; }

/* CTA hero plus grand */
.btn--primary{
  padding: 12px 12px 12px 30px !important;
  font-size: 16px !important;
}
.btn--primary span{
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}

/* === Animations au scroll : reveal léger === */
.step,
.crm-card,
.proc2__callout,
.card,
.qual-bar,
.section-head{
  transition: opacity .6s ease, transform .6s ease;
}
/* délais en cascade pour les listes */
.step:nth-child(2){ transition-delay: 0.08s; }
.step:nth-child(3){ transition-delay: 0.16s; }
.step:nth-child(4){ transition-delay: 0.24s; }
.step:nth-child(5){ transition-delay: 0.32s; }
.step:nth-child(6){ transition-delay: 0.4s; }

/* ===== Section locale : nouveau layout ===== */
.locale__head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.locale__head .badge{ margin-bottom: 16px; }
.locale__title{
  font-size: clamp(34px, 4vw, 50px);
  margin-bottom: 14px;
}
.locale__lead{
  font-size: 16px;
  color: #6b6258;
  line-height: 1.55;
}
.locale__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  align-items: stretch;
}
.locale__map{ aspect-ratio: auto; max-width: 100%; }
.map-bg{ width: 100%; height: 100%; object-fit: contain; }

.locale__side{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Carte "Leads 100% exclusifs" (sombre) */

/* Carte "Capacité d'assurance" (claire) */
.capa-card{
  background: #fff;
  border-radius: 22px;
  padding: 28px 28px 24px;
  box-shadow: 0 10px 30px rgba(20,15,5,.04);
  flex: 1;
}
.capa-card h3{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #1a1a1a;
}
.capa-card p{
  font-size: 14px;
  line-height: 1.55;
  color: #6b6258;
  margin: 0 0 20px;
}
.mini-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #FAF6EB;
  border-radius: 12px;
}
.mini-row img{
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mini-row span{ font-size: 13.5px; font-weight: 500; color: #1a1a1a; }

@media (max-width: 1024px){
  .locale__grid{ grid-template-columns: 1fr; gap: 24px; }
  .locale__map{ max-width: 600px; margin: 0 auto; }
}

/* Marquee défilant : 1 ligne d'items qui passent en boucle */
.capa-card__marquee{
  overflow: hidden;
  margin: 0 -28px -4px;       /* déborde le padding de la carte */
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.capa-card__track{
  display: flex;
  gap: 22px;
  width: max-content;
  animation: capaMarquee 28s linear infinite;
}
@keyframes capaMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.capa-card__marquee .mini-row{
  background: transparent;       /* pas de fond */
  padding: 6px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.capa-card__marquee .mini-row img{ width: 36px; height: 36px; }
.capa-card__marquee .mini-row span{ font-size: 14px; font-weight: 500; }

/* pause au survol */
.capa-card__marquee:hover .capa-card__track{ animation-play-state: paused; }

/* fix marquee débordement + image carte visible */
body, html{ overflow-x: clip !important; }
.capa-card{ overflow: hidden; }
.locale__map{
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 380px;
}
.locale__map .map-bg{
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.locale__grid{ min-width: 0; }
.locale__grid > *{ min-width: 0; }

/* titre Capacité : moins bold */
.capa-card h3{
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* titre principal section process */
.proc2__head{ text-align: center; margin-bottom: 50px; }
.proc2__main-title{
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0;
}

/* sous-titre section process */
.proc2__main-sub{
  font-size: 17px;
  line-height: 1.55;
  color: #6b6258;
  max-width: 680px;
  margin: 14px auto 0;
}

/* ===== Carte "Audit de qualification" (photo équipe N&B, carré) ===== */

/* audit-card : moins haute et en couleur (pas N&B) */

/* ===== Hero partenaires ===== */
.hero__partners{
  margin-top: 28px;
}
.hero__partners-label{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7f6e;
  margin-bottom: 14px;
}
.hero__partners-list{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.partner{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  box-shadow: 0 4px 12px rgba(20,15,5,.04);
}
.partner strong{
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.005em;
}
.partner strong em{
  font-style: normal;
  font-weight: 500;
  color: #6b6258;
}

@media (max-width: 640px){
  .hero__partners-list{ gap: 10px; }
  .partner{ padding: 6px 12px 6px 6px; }
  .partner strong{ font-size: 12px; }
}

/* logos partenaires : utilise les vrais logos via CDN simpleicons */
.partner__brand img,
img.partner__brand{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* badges partenaires officiels (images PNG) */
.partner-badge{
  height: 44px;
  width: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.hero__partners-list{ align-items: center; gap: 22px; }

@media (max-width: 640px){
  .partner-badge{ height: 36px; }
  .hero__partners-list{ gap: 14px; }
}

/* mockup CRM en image (override de l'ancienne carte) */
img.crm-card{
  width: 100% !important;
  height: auto !important;
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(20,15,5,.08);
  margin-bottom: 18px;
}

/* badges partenaires : virer les fonds blancs des PNG via mix-blend-mode */
.partner-badge{
  mix-blend-mode: multiply;
}

/* descendre les badges */
.hero__partners{ margin-top: 40px !important; }

/* texte capa-card : noir + bold sur les mots clés */
.capa-card p{
  color: #1a1a1a !important;
  font-weight: 500 !important;
  font-size: 14.5px;
  line-height: 1.65;
}
.capa-card p strong{
  font-weight: 700;
  color: #1a1a1a;
}

/* uniformiser : tous les paragraphes descriptifs en noir + weight 500 (au lieu du gris beige) */
.step p,
.benefit span,
.process-card p,
.proc2__callout span,
.proc2__main-sub{
  color: #1a1a1a !important;
  font-weight: 500;
}
.step p strong,
.process-card p strong,
.benefit span strong,
.capa-card p strong{
  font-weight: 700;
}

/* Hero : image full hauteur, bord droit de l'écran */
.hero{
  position: relative;
  min-height: 760px;
  padding: 50px 0 80px;
  overflow: hidden;
}
.hero__inner{
  position: relative;
  z-index: 2;
  display: block !important;
  max-width: 2000px;
  padding: 0 24px;
}
.hero__content{ max-width: 580px; }
.hero__visual{
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  margin: 0;
}
.hero__visual img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  margin: 0 !important;
}

@media (max-width: 1024px){
  .hero{ min-height: auto; padding-bottom: 0; }
  .hero__visual{ position: relative !important; width: 100%; height: 420px; margin-top: 40px; }
}

/* hero lead + bouton + titre plateforme : ajustements */
.hero__lead{ color: #000 !important; font-weight: 500; }
.btn--primary{ background: #000 !important; }
.btn--primary:hover{ background: #1a1a1a !important; }
.plateforme__title{ font-weight: 500 !important; }

/* hero sans image : revert min-height et padding */
.hero{ min-height: auto !important; padding: 50px 0 80px !important; }

/* sous-titres process en noir */
.proc2__sub,
.proc2__main-sub{ color: #000 !important; font-weight: 500; }

/* footer en 3 colonnes égales + centrées + logo plus grand */
.site-footer__inner{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 40px !important;
  align-items: center;
}
.footer-col{ display: flex; flex-direction: column; }
.footer-col--brand{ justify-content: center; }
.footer-col--contact{ justify-content: center; align-items: flex-start; }
.footer-col--info{ justify-content: center; }

/* logo plus grand */
.site-footer__logo{ height: 22px !important; }
.site-footer__tag{ font-size: 14.5px !important; line-height: 1.35; }

@media (max-width: 760px){
  .site-footer__inner{ grid-template-columns: 1fr !important; gap: 30px !important; }
  .footer-col{ align-items: flex-start; }
}

/* footer col brand : logo en haut, slogan en dessous (stack vertical) */
.footer-col--brand{
  align-items: flex-start;
  gap: 14px;
}
.site-footer__tag{ display: block; margin: 0; }

/* hero avec nouvelle image : restore full hauteur + image droite */
.hero{
  min-height: 760px !important;
  padding: 50px 0 80px !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero__inner{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
}
.hero__content{ max-width: 580px; }
.hero__visual{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 50% !important;
  z-index: 1 !important;
  margin: 0 !important;
}
.hero__visual img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  margin: 0 !important;
}
@media (max-width: 1024px){
  .hero{ min-height: auto !important; padding-bottom: 0 !important; }
  .hero__visual{ position: relative !important; width: 100% !important; height: 420px !important; margin-top: 40px !important; }
}

/* "Partenaire officiel de :" en noir + plus bas (sans rallonger le hero) */
.hero__partners-label{ color: #000 !important; }
.hero__partners{ margin-top: 80px !important; }

/* titres : moins thick */
.hero__title{ font-weight: 500 !important; }
.proc2__main-title{ font-weight: 500 !important; }
.locale__title{ font-weight: 500 !important; }

/* footer : texte slogan sur une ligne + barre visible */
.site-footer__tag{
  font-size: 14.5px !important;
  white-space: nowrap;
}

/* image hero en entier (pas cut) */
.hero__visual img{
  object-fit: contain !important;
  object-position: center right !important;
}

/* ===== Carte Verticales couvertes v2 ===== */

/* halo du pill en beige clair (couleur des sections crème) */
.nav-pill{
  box-shadow:
    0 0 0 7px rgba(251, 248, 241, 0.85),
    0 12px 30px rgba(20, 15, 5, 0.05) !important;
}

/* illustration shield 3D en haut de la carte Verticales */

/* image hero collée en bas (fin de section) */
.hero__visual{
  top: auto !important;
  bottom: 0 !important;
  right: 0 !important;
  height: auto !important;
  width: 50% !important;
  max-height: 90% !important;
}
.hero__visual img{
  object-fit: contain !important;
  object-position: bottom right !important;
  height: auto !important;
  width: 100% !important;
}

/* ===== Carte Verticales v3 (icône bouclier + titre énorme + 4 rows + illustration) ===== */
.v3{
  padding: 22px 20px 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

/* hero image VRAIMENT collée à la fin de section */
.hero__visual{
  max-height: 100% !important;
  height: 100% !important;
}
.hero__visual img{
  object-position: bottom right !important;
  height: 100% !important;
}

/* fix pill menu mobile : compact et pas de débordement */
@media (max-width: 760px){
  .nav-pill{
    padding: 5px 5px 5px 16px !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .nav-pill__logo img{ height: 16px !important; }
  .nav-pill__nav{ display: none !important; }
  .nav-pill__cta{
    margin: 0 !important;
    padding: 5px 5px 5px 14px !important;
    gap: 8px !important;
  }
  .nav-pill__cta-text strong{ font-size: 12.5px !important; }
  .nav-pill__cta-text em{ display: none !important; }
  .nav-pill__avatar,
  .nav-pill__avatar img{ width: 28px !important; height: 28px !important; }
  .nav-pill__dot{ width: 7px !important; height: 7px !important; }
  .site-header__burger{ display: none !important; }
  .site-header{ padding: 14px 0 !important; }
}

/* mobile : trust items empilés verticalement */
@media (max-width: 760px){
  .hero__trust{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start;
  }
}

/* image hero TOUT EN BAS (touche la ligne de fin de section) */
.hero{
  padding-bottom: 0 !important;
}
.hero__content{
  padding-bottom: 60px;
}
.hero__visual{
  top: auto !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 50% !important;
  height: auto !important;
  max-height: 100% !important;
}
.hero__visual img{
  object-fit: contain !important;
  object-position: right bottom !important;
  display: block !important;
  height: auto !important;
  width: 100% !important;
}

/* === Mobile : menu simplifié + image hero au-dessus === */
@media (max-width: 760px){
  /* pill mobile : look classique (pas de fond pill, juste logo + CTA simple) */
  .nav-pill{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: visible !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  .nav-pill__logo{ flex-shrink: 0; }
  .nav-pill__logo img{ height: 28px !important; }
  .nav-pill__nav{ display: none !important; }
  .nav-pill__cta{
    background: #000 !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    margin: 0 !important;
    gap: 0 !important;
    font-size: 13px !important;
  }
  .nav-pill__cta-text strong{ font-size: 13px !important; }
  .nav-pill__cta-text em,
  .nav-pill__avatar{ display: none !important; }
  .site-header{ padding: 18px 0 !important; }

  /* image hero AU-DESSUS du contenu */
  .hero{ padding-top: 80px !important; }
  .hero__inner{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
  }
  .hero__visual{
    position: relative !important;
    order: -1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 360px !important;
    margin: 0 !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
  }
  .hero__visual img{
    height: auto !important;
    width: 100% !important;
    max-height: 360px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .hero__content{ padding-bottom: 0 !important; }
}

/* Audit de qualification : moins thick */

/* "Réserver votre appel découverte" : moins thick */
.booking .section-title{ font-weight: 500 !important; }

/* footer brand : logo au-dessus, slogan en dessous (stack vertical) */
.footer-col--brand{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.site-footer__tag{ white-space: normal !important; line-height: 1.4; }

/* === Mobile : VRAI menu (header blanc + burger + dropdown) === */
@media (max-width: 760px){
  /* header blanc fixé */
  .site-header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background: #fff !important;
    background-image: none !important;
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(20,15,5,.06);
    z-index: 9999 !important;
  }
  .site-header__inner{ height: 60px; padding: 0 16px; }

  /* pill mobile : juste logo + burger, pas de pill background */
  .nav-pill{
    position: static !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    height: 60px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }
  .nav-pill__logo img{ height: 26px !important; }
  .nav-pill__cta{ display: none !important; }

  /* burger affiché à droite */
  .site-header__burger{
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 10000;
    position: relative;
  }
  .site-header__burger span{
    display: block;
    width: 22px; height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .site-header__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .site-header__burger[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  /* menu dropdown */
  .nav-pill__nav{
    display: none;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff;
    padding: 20px 24px 28px;
    border-top: 1px solid #eee;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 18px !important;
    box-shadow: 0 8px 24px rgba(20,15,5,.08);
    margin: 0 !important;
  }
  .nav-pill__nav.is-open{ display: flex !important; }
  .nav-pill__link{
    font-size: 16px !important;
    padding: 6px 0 !important;
  }

  /* compenser le header fixed (pas de double saut) */
  body{ padding-top: 60px; }

  /* image hero cachée sur mobile */
  .hero__visual{ display: none !important; }
  .hero__inner{ display: block !important; }
  .hero{ padding-top: 96px !important; }   /* dégage le header fixe (60px) + air */
  .hero__content{ padding-bottom: 0 !important; }

  /* marge sous les partenaires (pas collé à la fin de section) */
  .hero__partners{ margin-bottom: 50px !important; padding-bottom: 10px; }
}

/* mobile : steps alignés à gauche (compacter pour matcher le titre) */
@media (max-width: 760px){
  .proc2__col{ padding: 24px 20px !important; }
  .proc2__steps{ padding: 0 !important; margin: 0 !important; }
  .step{
    grid-template-columns: 24px 32px 1fr !important;
    gap: 10px !important;
  }
  .step__num{
    width: 22px !important; height: 22px !important;
    font-size: 11px !important;
    margin-top: 4px;
  }
  .step__icon{
    width: 32px !important; height: 32px !important;
    border-radius: 8px;
  }
  .step h4{ font-size: 15px !important; }
  .step p{ font-size: 13px !important; }
}

/* === Animation menu mobile (slide + fade) === */
@media (max-width: 760px){
  .nav-pill__nav{
    display: flex !important;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .nav-pill__nav.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  }
  .nav-pill__nav .nav-pill__link{
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .nav-pill__nav.is-open .nav-pill__link{ opacity: 1; transform: translateY(0); }
  .nav-pill__nav.is-open .nav-pill__link:nth-child(1){ transition-delay: 0.08s; }
  .nav-pill__nav.is-open .nav-pill__link:nth-child(2){ transition-delay: 0.14s; }
  .nav-pill__nav.is-open .nav-pill__link:nth-child(3){ transition-delay: 0.2s; }
  .nav-pill__nav.is-open .nav-pill__link:nth-child(4){ transition-delay: 0.26s; }
}

/* === Hero image touche pile la fin de section (responsive) === */
.hero__visual{
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 50% !important;
  height: auto !important;
  max-height: none !important;
}
.hero__visual img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  display: block !important;
}

/* === Hero image : force le bas du visible (legs) à toucher la fin de section
   La PNG a un padding transparent en bas → on translate l'IMG pour compenser.
   Valeur en %, scale auto avec la taille du conteneur (responsive). === */
.hero{ overflow: hidden !important; }
.hero__visual img{
  transform: translateY(3%) !important;
}
@media (max-width: 1280px){
  .hero__visual img{ transform: translateY(2.5%) !important; }
}
@media (max-width: 1024px){
  .hero__visual img{ transform: translateY(2%) !important; }
}

/* === Titre hero : remplit sa colonne (la colonne est bornée par .hero__content) === */
.hero__title{
  max-width: 100% !important;
  width: auto !important;
  position: relative;
  z-index: 3;
  text-wrap: pretty;          /* remplit chaque ligne (greedy) au lieu d'égaliser → + de mots/ligne */
}
.hero__content{ max-width: 100% !important; }
/* On garde les autres éléments du content (lead, ctas, trust, partners) dans une colonne lisible */
.hero__lead,
.hero__ctas,
.hero__trust,
.hero__partners{ max-width: 580px; }

/* === Animation hero title : chaque lettre fade + slide rapidement === */
.hero__title .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: charIn .45s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 22ms);
  white-space: pre;
}
@keyframes charIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* === Titre hero : mots non-cassables, lettres animées dedans === */
.hero__title .word{
  display: inline-block;
  white-space: nowrap;
}

/* === Verticales couvertes : titre au dessus + 4 items en 2x2 dessous === */
.card--verticals{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.card--verticals .verticals__head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.card--verticals .verticals__head h3{
  font-family: 'Geist', serif;
  font-weight: 600 !important;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
/* line d'accent : couleur du site (gold beige) */
.card--verticals .verticals__accent{
  display: block;
  width: 36px; height: 2px;
  background: #b8a684 !important;
  border-radius: 2px;
}
/* items empilés 1 par ligne pour que tout le label soit lisible */
.card--verticals .verticals__items{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.card--verticals .vitem{
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  min-width: 0;
}
.card--verticals .vitem__check{ display: none !important; }
.card--verticals .vitem__icon{
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #f5f1e8);
  border-radius: 7px;
}
.card--verticals .vitem__icon svg{ width: 16px; height: 16px; stroke: #b8a684 !important; }
.card--verticals .vitem__check{
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(184,166,132,.25);
  border-radius: 50%;
  flex-shrink: 0;
}
.card--verticals .vitem__label{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card--verticals .tags{ display: none !important; }

/* mobile : items en pleine ligne (1 colonne) pour respirer */
@media (max-width: 760px){
  .card--verticals .verticals__items{ grid-template-columns: 1fr; }
  .card--verticals .verticals__head h3{ font-size: 20px; }
  .card--verticals .vitem__label{ font-size: 12.5px; }
}

/* === proc2 column titles : weight allégé pour matcher les autres titres === */
.proc2__title{ font-weight: 500 !important; }

/* locale lead : en noir */
.locale__lead{ color: #1a1a1a !important; }

/* =====================================================
   Pages légales (mentions, confidentialité, CG)
   ===================================================== */
.legal-body{
  background: var(--bg, #faf7f0);
  color: var(--text, #1a1a1a);
}

/* Header simplifié */

/* Page legal */
.legal-page{ padding: 60px 0 100px; }
.legal-page__inner{
  max-width: 820px;
  margin: 0 auto;
}
.legal-page__head{
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.legal-page__kicker{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  color: #b8a684 !important;
  margin: 0 0 12px;
}
.legal-page h1{
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text, #1a1a1a);
}
.legal-page__updated{
  font-size: 13px;
  color: #6b6258;
  margin: 0;
}

.legal-section{ margin-bottom: 40px; }
.legal-section h2{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--text, #1a1a1a);
}
.legal-section h3{
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--text, #1a1a1a);
}
.legal-section p{
  font-size: 15px;
  line-height: 1.7;
  color: #2a2520;
  margin: 0 0 14px;
}
.legal-section a{
  color: #8a7f6e !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-section a:hover{ color: #b8a684 !important; }
.legal-list{
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal-list li{
  font-size: 15px;
  line-height: 1.7;
  color: #2a2520;
  margin-bottom: 8px;
}
.legal-list li::marker{ color: #b8a684; }

/* Mobile */
@media (max-width: 760px){
  .legal-page{ padding: 32px 0 60px; }
  .legal-page h1{ font-size: 30px; }
  .legal-page__head{ margin-bottom: 32px; padding-bottom: 22px; }
  .legal-section{ margin-bottom: 28px; }
  .legal-section h2{ font-size: 19px; }
}

/* === Footer : indicateur "vous êtes ici" (pages légales) === */
.footer-col--info ul a.is-active{
  color: #b8a684 !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 760px){
  .footer-col--info ul a.is-active{ flex-wrap: wrap; }
}

/* === Pages légales : retire les anciens styles header simplifié (plus utilisés) === */
.legal-page{ padding-top: 40px; }
@media (max-width: 760px){
  .legal-page{ padding-top: 24px; }
}

/* === Restauration .audit-card (utilisé en HTML) === */
.audit-card{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,15,5,.08);
}

.audit-card__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}

.audit-card__overlay{
  position: relative;
  z-index: 1;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.15) 100%);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.audit-card h3{
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}

.audit-card p{
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.audit-card{ aspect-ratio: 5 / 4 !important; }

.audit-card__bg{ filter: none !important; }

.audit-card h3{ font-weight: 500 !important; }


/* === FIXES MOBILE (override final, max specificity) === */
.card--verticals .vitem__icon svg,
.card--verticals .vitem__icon svg path,
.card--verticals .vitem__icon svg rect,
.card--verticals .vitem__icon svg circle{
  stroke: #b8a684 !important;
}

/* qual-bar widths : appliquées partout avec specificité maximale */
.card.card--quality .qual-bar.qual-bar--w1{ width: 100% !important; }
.card.card--quality .qual-bar.qual-bar--w2{ width: 90%  !important; }
.card.card--quality .qual-bar.qual-bar--w3{ width: 76%  !important; }

/* =====================================================
   NOS OFFRES — pricing section
   ===================================================== */
.offres{ padding: 100px 0 110px; }

/* HEAD : texte gauche + image droite */
.offres__head{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
.offres__head-left{ display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.kicker-pill{
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(184,166,132,.16);
  color: #8a7f6e;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.offres__title{
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  color: #1a1a1a;
}
.offres__lead{
  font-size: 15px;
  line-height: 1.6;
  color: #4a4338;
  max-width: 520px;
  margin: 4px 0 0;
}
.offres__guarantee{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1a1a;
}
.g-dot{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.offres__head-img{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.offres__head-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* === GRID des 3 cartes === */
.offres__grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 56px;
}

.offer-card{
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(26,26,26,.06);
  border-radius: 18px;
  padding: 26px 24px 26px;
  position: relative;
}
.offer-card--featured{
  /* même dimensions exactes que les 2 autres ; emphase via outline + ombre */
  box-shadow:
    0 0 0 2px #1a1a1a,
    0 20px 50px rgba(26,26,26,.10);
}

.offer-card__head{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 78px;
}
/* card 1 (Pack Test) a un <p class="offer-card__sub"> en plus */
.offer-card--basic .offer-card__head{ min-height: 64px; }
/* cards 2 & 3 (pas de sub paragraph) : compense head + sub + gap (~128px) */
.offer-card:not(.offer-card--basic) .offer-card__head{ min-height: 135px; }
.offer-card__num{
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: #f4f0e6;
  color: #8a7f6e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.offer-card__num--dark{
  background: #1a1a1a;
  color: #fff;
}
.offer-card__title{
  font-family: 'Geist', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
  color: #1a1a1a;
}
.offer-card__badge{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(184,166,132,.18);
  color: #8a7f6e;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.offer-card__sub-inline{
  display: block;
  font-size: 13.5px;
  color: #4a4338;
  margin-top: 2px;
  line-height: 1.45;
}
.offer-card__sub{
  font-size: 13.5px;
  color: #4a4338;
  line-height: 1.5;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26,26,26,.06);
  min-height: 46px;
}

/* STATS (2 colonnes : valeur + label) */
.offer-card__stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 6px 0 8px;
}
.offer-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.offer-stat__icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #f5f1e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.offer-stat__value{
  display: block;
  font-family: 'Geist', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  line-height: 1;
}
.offer-stat__value small{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4a4338;
  margin-left: 4px;
}
.offer-stat__label{
  display: block;
  font-size: 12px;
  color: #6b6258;
  margin-top: 4px;
}

/* FEATURES list */
.offer-card__features{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-card__features li{
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a1a;
}
.offer-card__features li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #b8a684 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.2l3.2 3.2 6.5-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 11px 11px;
}

/* PRIX MINIMUM box (cream) */
.offer-card__price-min{
  background: #f8f4ec;
  border-radius: 12px;
  padding: 14px 16px;
}
.price-min__title{
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #8a7f6e;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.offer-card__price-min ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-card__price-min li{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #4a4338;
}
.offer-card__price-min li strong{
  font-size: 11.5px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}
.offer-card__price-min .dot-icon{
  width: 16px; height: 16px;
  border-radius: 4px;
  background: #b8a684 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>") no-repeat center / 10px 10px;
  opacity: .8;
}

/* PRIX RÉEL box */
.offer-card__price-real{
  margin-top: auto;
  border-radius: 14px;
  padding: 18px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.offer-card__price-real--cream{
  background: #f4f0e6;
}
.offer-card__price-real--dark{
  background: #1a1a1a;
  color: #fff;
}
.offer-card__price-real--dark .price-real__label,
.offer-card__price-real--dark .price-real__value,
.offer-card__price-real--dark .price-real__sub{ color: #fff; }
.price-real__label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8a7f6e;
  text-transform: uppercase;
}
.price-real__value{
  font-family: 'Geist', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.price-real__value strong{ font-weight: 600; }
.price-real__sub{
  font-size: 12px;
  color: #6b6258;
  font-style: italic;
}

/* OPTIONS one-time */
.offres__options{
  background: rgba(184,166,132,.10);
  border-radius: 18px;
  padding: 28px 28px 28px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 28px;
}
.offres__options-text{ display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.offres__options-text h3{
  font-family: 'Geist', serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: #1a1a1a;
  line-height: 1.15;
}
.offres__options-note{
  font-style: italic;
  font-size: 12.5px;
  color: #6b6258;
  margin: 0;
  position: relative;
  padding-left: 26px;
}
.offres__options-note::before{
  content: "↘";
  position: absolute;
  left: 0; top: 0;
  font-size: 16px;
  color: #b8a684;
  font-style: normal;
}
.offres__options-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.opt-card{
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(26,26,26,.05);
}
.opt-card__icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(184,166,132,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.opt-card strong{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.opt-card span{
  font-size: 12.5px;
  color: #6b6258;
}

/* CALLOUT humain bas */
.offres__callout{
  background: #f8f4ec;
  border-radius: 18px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 64px 1.4fr 1fr;
  align-items: center;
  gap: 24px;
}
.offres__callout-avatar{
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
}
.offres__callout-text strong{
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.offres__callout-text p{
  font-size: 13px;
  line-height: 1.55;
  color: #4a4338;
  margin: 0;
}
.offres__callout-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offres__callout-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #1a1a1a;
}
.cl-check{
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #b8a684 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.2l3.2 3.2 6.5-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 11px 11px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1100px){
  .offres__grid{ grid-template-columns: 1fr; gap: 16px; }
  .offer-card--featured{ transform: none; }
  .offres__head{ grid-template-columns: 1fr; gap: 28px; }
  .offres__head-img{ max-height: 280px; }
  .offres__options{ grid-template-columns: 1fr; gap: 22px; }
  .offres__options-grid{ grid-template-columns: 1fr; }
  .offres__callout{ grid-template-columns: 1fr; text-align: left; }
  .offres__callout-avatar{ width: 56px; height: 56px; }
}
@media (max-width: 760px){
  .offres{ padding: 60px 0 70px; }
  .offres__title{ font-size: 28px; }
  .offer-card{ padding: 22px 20px; }
  .offer-card__title{ font-size: 19px; }
  .offer-stat__value{ font-size: 24px; }
  .offres__options{ padding: 22px 18px; }
  .offres__callout{ padding: 20px 18px; }
}

/* =====================================================
   Page standalone /offres (sans menu — pour client)
   ===================================================== */
.offres-only-body{
  background: var(--bg-cream, #FBF8F1);
  background-image: url(../img/noise-bg-cdn.png);
  background-repeat: repeat;
  background-size: 340px auto;
}
.offres-only-header{
  padding: 28px 0 0;
}
.offres-only-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px 10px 22px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(20,15,5,.06);
}
.offres-only-header__logo img{ height: 26px; display: block; }
.offres-only-header__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.offres-only-header__cta:hover{ background: #2a2a2a; }
.offres-only-header__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

/* la section offres : retire l'alternance cream/blanc (déjà sur le body) */
.offres-only-body .offres{ background: transparent !important; }
.offres-only-body .offres::after{ display: none !important; }

.offres-only-footer{
  padding: 32px 0 40px;
  text-align: center;
}
.offres-only-footer span{
  font-size: 12px;
  color: #6b6258;
}

@media (max-width: 760px){
  .offres-only-header__inner{ padding: 8px 8px 8px 16px; }
  .offres-only-header__logo img{ height: 22px; }
  .offres-only-header__cta{ padding: 8px 14px; font-size: 12.5px; }
}


/* === proc2 steps : grossir le contenu UNIQUEMENT sur très grands écrans (2K/4K) ===
   (en dessous de 2000px = laptops/écrans normaux → tailles de base, pas de scaling) */
@media (min-width: 2000px){
  .proc2__col{ padding: 48px 48px; }
  .proc2__title{ font-size: 38px; }
  .proc2__sub{ font-size: 16px; margin-bottom: 40px; }
  .proc2__steps{ gap: 28px; }
  .step{ grid-template-columns: 32px 48px 1fr; gap: 18px; }
  .step__num{ width: 30px; height: 30px; font-size: 13px; }
  .step__icon{ width: 46px; height: 46px; border-radius: 12px; }
  .step__icon svg{ width: 22px; height: 22px; }
  .step h4{ font-size: 18px; margin-bottom: 6px; }
  .step p{ font-size: 15px; line-height: 1.55; }
}
@media (min-width: 2600px){
  .proc2__col{ padding: 56px 56px; }
  .proc2__title{ font-size: 44px; }
  .step h4{ font-size: 20px; }
  .step p{ font-size: 16px; }
}

/* === RÈGLE HERO UNIQUE (remplace tous les hacks par breakpoints) =====================
   Le texte vit dans la moitié gauche, l'image dans la moitié droite (left edge = 50vw).
   La colonne texte est bornée pour que son bord droit reste 50px à gauche de 50vw,
   À TOUTE largeur : au-delà de --container, le centrage du conteneur déplace le bord
   droit du texte exactement à la même vitesse (½vw) que le bord gauche de l'image (50vw),
   donc l'écart reste constant (50px) — jamais de chevauchement, aucun breakpoint requis. */
@media (min-width: 1025px){
  /* image : démarre à 50vw (juste après le texte), largeur plafonnée à 1100px
     → écran normal : remplit la moitié droite ; écran géant : reste près du texte (pas étalée au bord) */
  .hero__visual{
    left: 50vw !important;
    right: auto !important;
    width: min(50vw, 1100px) !important;
  }
  .hero__content{
    max-width: min(calc(var(--container) / 2 - 64px), calc(50vw - 64px)) !important;
  }
}

/* === proc2 sur grands écrans : conteneur à largeur lisible (2000px, comme les autres
   sections) + contenu agrandi + étapes centrées verticalement pour remplir la carte =====
   (une grille 2 colonnes à 3000-4000px de large rend les lignes illisibles → on garde
   le conteneur à 2000px et on grossit le contenu pour qu'il REMPLISSE la carte) */
@media (min-width: 2000px){
  .proc2__container{ max-width: 2000px !important; }
  .proc2__steps{ gap: 34px !important; }
  /* contenu plus grand */
  .step{ grid-template-columns: 40px 60px 1fr !important; gap: 26px !important; }
  .step__num{ width: 34px !important; height: 34px !important; font-size: 15px !important; }
  .step__icon{ width: 60px !important; height: 60px !important; border-radius: 14px !important; }
  .step__icon svg{ width: 26px !important; height: 26px !important; }
  .step h4{ font-size: 23px !important; margin-bottom: 8px !important; }
  .step p{ font-size: 17px !important; line-height: 1.6 !important; }
  .proc2__title{ font-size: 46px !important; }
  .proc2__sub{ font-size: 18px !important; margin-bottom: 44px !important; }
}

/* === Mobile : logo centré dans le header, burger en absolu à droite === */
@media (max-width: 760px){
  .site-header__inner{ position: relative !important; }
  .nav-pill{ justify-content: center !important; }
  .site-header__burger{
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* === proc2 : les 2 colonnes remplissent toute leur hauteur (toutes tailles ≥ 2 colonnes) ===
   - étapes : grandissent + se répartissent (space-between) → remplissent la carte gauche
   - callout : collé en bas → remplit la carte droite */
@media (min-width: 1025px){
  .proc2__col{ display: flex; flex-direction: column; }
  .proc2__steps{ flex: 1 1 auto; justify-content: space-between; }
  .proc2__callout{ margin-top: auto; }
}