/* ==============================
   Global CSS (HTML + Lucide, no framework)
   ============================== */

/* -------- Reset -------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit}

/* -------- Thème -------- */
:root{
  --bg:#fff;
  --bg-soft:#f8fafc;         /* slate-50 */
  --ink:#0f172a;             /* slate-900 */
  --muted:#64748b;           /* slate-500/600 */
  --border:#e5e7eb;          /* gray-200 */
  --shadow:0 10px 30px rgba(2,8,23,.06);

  --primary:#111827;         /* boutons noir/gris */
  --primary-ink:#fff;
  
  --green_home:#d1fae5;

  /* Palette icônes */
  --indigo-500:#6366f1;
  --emerald-500:#10b981;
  --rose-500:#f43f5e;
  --orange-500:#f97316;
  --violet-500:#8b5cf6;
  --cyan-500:#06b6d4;

  /* Badges logo */
  --indigo-300:#a5b4fc; --indigo-600:#4f46e5;
  --emerald-300:#6ee7b7; --emerald-600:#059669;
  --orange-300:#fdba74; --orange-600:#ea580c;

  /* Icônes (responsive) */
  --icon-size: clamp(18px, 1.4vw, 22px);
  --icon-block-size: clamp(20px, 1.6vw, 24px);
  --icon-title-size: clamp(18px, 1.5vw, 22px);
}

/* -------- Base -------- */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(to bottom,#f8fafc,#fff,#f8fafc);
}

.container{max-width:1280px;margin-inline:auto;padding-inline:1rem}
.section{padding:4rem 0}
.min-h-screen{min-height:100vh}

h1,h2,h3,h4{line-height:1.2;margin:0}
/* p{margin:.75rem 0 0;color:var(--muted)} */
.text-muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.mt-6{margin-top:1.5rem}
.center-between{display:flex;align-items:center;justify-content:space-between}
.flex{display:flex;gap:.5rem;align-items:center}
.center-end{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}
.round-xl{border-radius:1rem}
.round-2xl{border-radius:1.25rem}

/* ==============================
   Header / Navigation
   ============================== */
.header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
}

.nav{display:none; gap:1.25rem; align-items:center; font-size:1.1rem}
.nav a{color:var(--ink); text-decoration:none}
.nav a:hover{color:var(--primary)}
@media(min-width:768px){ .nav{display:flex} }

/* ==============================
   Pills
   ============================== */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;font-size:.75rem;
  border:1px solid var(--border);
  background:#fff;color:var(--muted);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(2,8,23,.06)
}

/* ==============================
   Boutons
   ============================== */
button,[role="button"]{cursor:pointer}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.1rem;font-weight:600;
  border-radius:.75rem;
  background:var(--primary);color:var(--primary-ink);
  border:1px solid var(--primary);
  transition:transform .15s ease,opacity .15s ease,background .15s ease,border-color .15s;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px);opacity:.95}
.btn:focus{outline:2px solid #000;outline-offset:2px}

.btn-outline{
  background:#fff;color:var(--ink);
  border:1px solid var(--border);
}
.btn-outline:hover{background:#fafafa}

/* Variante primaire “site” (tes CTA audit) */
.btn-primary{
  background-color:#0A192F;
  color:#FFFFFF;
  border:none;
  padding:14px 28px;
  font-size:16px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 6px rgba(0,0,0,.20);
  text-decoration:none;
}
.btn-primary:hover{
  background-color:#112F54;
  transform:scale(1.03);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.btn-primary:active{
  transform:scale(0.98);
  box-shadow:0 2px 8px rgba(0,0,0,.20);
}

/* Bouton cookies (footer) */
.btn-cookie{
  background-color:#425b76;
  border:1px solid #425b76;
  border-radius:3px;
  padding:10px 16px;
  text-decoration:none;
  color:#fff;
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
}

/* ==============================
   Grilles / Cards
   ============================== */
.card{background:#fff;border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow);padding:1.25rem}
.card-lg{padding:1.5rem;border-radius:1.25rem}

.grid{display:grid;gap:1.25rem}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
@media(min-width:768px){.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cols-3{grid-template-columns:repeat(3,1fr)}}

/* ==============================
   Hero + gradients
   ============================== */
.hero{background:linear-gradient(135deg,#d1fae5 0%,#fff 50%,#e0e7ff 100%)}
.hero .frame{border:1px solid var(--border);border-radius:1.25rem;background:#fff;padding:1rem;box-shadow:var(--shadow)}
.bg-indigo-soft{background:linear-gradient(135deg,#e0e7ff,#fff)}
.bg-emerald-soft{background:linear-gradient(135deg,#d1fae5,#fff)}

/* Layout hero (tes utilitaires) */
.hero-grid{gap:2rem;align-items:center}
.flex-wrap-start{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-start}
.mt-0-15{margin-top:.15rem}
.mt-0-5{margin-top:.5rem}

/* Typo */
.hero-title{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:900;letter-spacing:-0.01em}
.hero-desc{font-size:1.05rem}
.section-title{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800}
.offer-title{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;display:flex;align-items:center;gap:.5rem}
.offer-subtitle{color:#1f2937;font-weight:600;margin-top:.15rem}
.block-title{font-weight:600}

/* CTA meeting */
.cta-meeting-container{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cta-meeting-subtext{font-size:.85rem;color:#555;font-weight:500;margin-left:4px}
.center-end .cta-meeting-container{align-items:flex-end}
.center-end .cta-meeting-subtext{margin-right:4px;margin-left:0}

/* ==============================
   Table
   ============================== */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.95rem}
thead{background:#f8fafc}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:0}

/* ==============================
   Offers (titlebar + logos)
   ============================== */
.titlebar{display:flex;align-items:center;gap:.75rem}
.logo-box{position:relative;width:48px;height:48px;flex-shrink:0}
.logo-badge{position:absolute;inset:0;border-radius:.5rem}
.logo-ring{position:absolute;inset:0;border-radius:.5rem;box-shadow:inset 0 0 0 2px currentColor;opacity:.8}
.logo-img{position:absolute;inset:4px;width:40px;height:40px;object-fit:contain;z-index:2}

.logo-indigo .logo-badge{background:var(--indigo-300)} .logo-indigo .logo-ring{color:var(--indigo-600)}
.logo-emerald .logo-badge{background:var(--emerald-300)} .logo-emerald .logo-ring{color:var(--emerald-600)}
.logo-orange .logo-badge{background:var(--orange-300)} .logo-orange .logo-ring{color:var(--orange-600)}

/* Listes */
.list-plain{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.list-tight li{line-height:1.35}

/* “Services communs” */
.services-grid{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:768px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.service-item{display:flex;align-items:flex-start;gap:.6rem;padding:1rem;border:1px solid var(--border);border-radius:.85rem;background:#fff;min-height:80px}

/* Support & SLA chips */
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem}
.pill-chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border);padding:.5rem .75rem;border-radius:.85rem;font-size:.9rem}

/* Disposition offres : image/inclus/benefits */
@media(min-width:1024px){
  .offer .grid.cols-3{
    grid-template-columns:repeat(3,1fr);
    grid-auto-flow:dense;
    grid-auto-rows:auto;
  }
  .offer [data-testid="block-inclus"]{grid-column:1;grid-row:1}
  .offer [data-testid="block-image"]{grid-column:2 / span 2;grid-row:1}
  .offer [data-testid="block-benefits"]{grid-column:1 / -1;grid-row:2}
}

.offer [data-testid="block-inclus"] h4{margin-bottom:.85rem}
.offer [data-testid="support-sla"] h4{margin-bottom:.85rem}

/* Bénéfices = chips */
.offer [data-testid="block-benefits"] .list-plain{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.5rem !important;
}
.offer [data-testid="block-benefits"] .service-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  padding:.5rem .75rem !important;
  border:1px solid var(--border) !important;
  border-radius:.85rem !important;
  background:#fff !important;
  min-height:initial !important;
  box-shadow:none !important;
}

/* ==============================
   Lucide icons (responsive & uniformes)
   ============================== */
.icon-indigo{color:var(--indigo-500)}
.icon-emerald{color:var(--emerald-500)}
.icon-rose{color:var(--rose-500)}
.icon-orange{color:var(--orange-500)}
.icon-violet{color:var(--violet-500)}
.icon-cyan{color:var(--cyan-500)}

.icon,.icon-20{
  width:var(--icon-size);
  height:var(--icon-size);
  min-width:var(--icon-size);
  display:inline-block;
  flex:0 0 var(--icon-size);
}

.icon-block{
  width:var(--icon-block-size);
  height:var(--icon-block-size);
  min-width:var(--icon-block-size);
  display:inline-block;
  flex:0 0 var(--icon-block-size);
}

.offer svg.lucide,
.service-item svg.lucide,
.pill-chip svg.lucide{
  width:var(--icon-size);
  height:var(--icon-size);
  min-width:var(--icon-size);
  display:inline-block;
  flex:0 0 var(--icon-size);
}

.titlebar svg.lucide{
  width:var(--icon-title-size);
  height:var(--icon-title-size);
  min-width:var(--icon-title-size);
  display:inline-block;
  flex:0 0 var(--icon-title-size);
}

/* ==============================
   Video vignette + modal
   ============================== */
.usecase-video{display:block;margin-top:.75rem}

.video-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#163562;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  cursor:pointer;
  border:0;
  color:#fff;
}
.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.92;
  transition:transform .25s ease,opacity .2s ease;
}
.video-thumb:hover img{transform:scale(1.02);opacity:1}
.play-badge{position:absolute;inset:auto auto 10px 10px;font-size:18px;padding:8px 10px}

/* Modal video */
.video_modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:9999;
}
.video_modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal__dialog{position:relative;width:min(92vw,980px);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal__dialog video{display:block;width:100%;height:auto;background:#000}
.modal__close{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;border:0;border-radius:999px;
  background:rgba(255,255,255,.9);
  font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.modal__close:hover{background:#fff}

/* Thumb logo (mask) */
.thumb-logo{
  display:block;
  width:360px;height:200px;margin:0 auto;
  background:currentColor;
  -webkit-mask:url("/res-fdr/logo_RPAF.svg") no-repeat center / contain;
          mask:url("/res-fdr/logo_RPAF.svg") no-repeat center / contain;
}

/* Effet arc-en-ciel (optionnel) */
.video-thumb[data-effect="rainbow"]{--logo-w:180px;--logo-h:72px;--rainbow-speed:8s}
.video-thumb[data-effect="rainbow"] .thumb-logo{
  width:var(--logo-w);height:var(--logo-h);
  background-image:linear-gradient(90deg,#ff004c,#ff9800,#ffe600,#00d084,#00bcd4,#3f51b5,#8e24aa,#ff004c);
  background-size:200% 100%;
  animation:rf-rainbow var(--rainbow-speed) linear infinite;
  -webkit-mask:url("/res-fdr/logo_RPAF.svg") no-repeat center / contain;
          mask:url("/res-fdr/logo_RPAF.svg") no-repeat center / contain;
}
@keyframes rf-rainbow{to{background-position:200% 50%}}
@media(prefers-reduced-motion:reduce){
  .video-thumb[data-effect="rainbow"] .thumb-logo{animation:none}
}

/* ==============================
   Lists as table (icon + text)
   ============================== */
.as-table-2{--ico:24px}
.as-table-2 li{
  display:grid;
  grid-template-columns:var(--ico) 1fr;
  align-items:start;
  gap:.6rem;
  padding:.25rem 0;
}
.as-table-2 svg{width:var(--ico);height:var(--ico);flex:none}
.as-table-2 .cell-text{line-height:1.45}

/* ==============================
   Modal Contact (version actuelle)
   ============================== */
.modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(2,6,23,.45);
  z-index:50;
  padding:1rem;
}
.modal.open{display:flex}

.dialog{
  width:min(920px,100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 40px 80px rgba(15,23,42,.25);
  padding:1.25rem 1.25rem 1.5rem;
}
.dialog-header{margin-bottom:.5rem}
.dialog-title{font-weight:800;font-size:1.25rem}
.dialog-desc{color:var(--muted);font-size:.95rem}
.close-x{margin-left:auto;border:none;background:#0000;font-size:1.25rem;cursor:pointer}

.form-grid{display:grid;gap:1rem}
@media(min-width:768px){.form-grid{grid-template-columns:1fr 1fr}}

.label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.35rem}
.input,.select,.textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  border-radius:.5rem;
  padding:.65rem .75rem;
  font-size:1rem;
}
.input:focus,.select:focus,.textarea:focus{outline:2px solid #000;outline-offset:2px}
.textarea{min-height:120px;resize:vertical}

.checkbox-row{display:flex;align-items:flex-start;gap:.5rem;font-size:.9rem}
.actions{display:flex;justify-content:flex-end;gap:.5rem}

/* HubSpot */
.modal.open .dialog{max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}
.hs-form-frame{padding:0 15px 20px}
.dialog-header{flex-shrink:0}

/* Footer helper */
.footer-center{text-align:center;margin-top:1rem}


/* --- CSS partagé (copié de index.html) pour garantir une cohérence parfaite --- */

    .btn-primary {
      background-color: #0A192F;
      color: #FFFFFF;
      border: none;
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.20);
      transition: all 0.3s cubic-bezier(.4,0,.2,1);
    }
    .btn-primary:hover {
      background-color: #112F54;
      transform: scale(1.03);
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }
    .btn-primary:active {
      transform: scale(0.98);
      box-shadow: 0 2px 4px rgba(0,0,0,0.20);
    }

    .btn-outline {
      background-color: #FFFFFF;
      border: 2px solid #0A192F;
      color: #0A192F;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.10);
      transition: all 0.3s cubic-bezier(.4,0,.2,1);
      height: auto;
      text-decoration: none;
    }
    .btn-outline:hover {
      background-color: #E6F2F0;
      color: #004D40;
      border-color: #004D40;
      transform: scale(1.02);
    }

    .cta-wrapper-left {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }

    .audit-subtext {
      font-size: 0.85rem;
      color: #555;
      font-weight: 500;
      line-height: 1.4;
    }

    .icon-video {
      width: 24px;
      height: 24px;
      display: block;
    }

    /* --- Ajustements spécifiques Hero "Approche" (propres, sans casser styles.css) --- */

    .hero .hero-header { margin-bottom: 1.5rem; }
    .hero .hero-title { margin: 0; line-height: 1.05; }
    .hero .hero-subtitle {
      margin: .35rem 0 0 0;
      font-size: clamp(1.1rem, 2.1vw, 1.5rem);
      font-weight: 650;
      line-height: 1.2;
      letter-spacing: -0.01em;
      opacity: .92;
    }

    .hero .hero-grid {
      align-items: start;
      gap: 2.5rem;
    }

    .hero .hero-left { max-width: 42rem; margin-top: 1.5rem;}
    .hero .hero-desc { margin: 0 0 1rem 0; line-height: 1.65; }

    .hero .hero-right { margin-top: 2rem; max-width: 36rem; }
    .hero .hero-right-title {
      margin: 0 0 1rem 0;
      font-weight: 650;
      letter-spacing: -0.01em;
      opacity: .85;
    }

    .hero .hero-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: .95rem;
    }

    .hero .hero-list-item {
      display: grid;
      grid-template-columns: 1.25rem 1fr;
      align-items: start;
      gap: .75rem;
      line-height: 1.55;
    }

    .hero .hero-bullet {
      width: 18px;
      height: 18px;
      opacity: .75;
      transform: translateY(2px);
    }

    .hero .hero-cta {
      margin-top: 1.25rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: flex-start;
      margin-left: 2.5rem;
	  
    }

    @media (max-width: 900px) {
      .hero .hero-right { margin-top: 0; }
    }
	
/* Approche – Hero : alignement pro */

	.hero-approche .hero-header,
	.hero-approche .hero-left,
	.hero-approche .hero-right {
	  text-align: left;
	}

/* Empêche les textes de s'étaler trop large */
	.hero-approche .hero-left {
		max-width: 44rem;
	}
	
	.hero-approche .hero-right {
	  margin-top: 1.5rem;          /* un peu moins haut que 2rem */
	  padding-left: 1.25rem;
	  border-left: 1px solid #e0e7ff;
	}
	@media (max-width: 900px) {
	  .hero-approche .hero-right {
		border-left: none;
		padding-left: 0;
	  }
	}

.hero-benefits-title{
  font-weight:700;
  margin-bottom:1rem;
}

.hero-benefits-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:1rem;
}

.hero-benefits-list li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  line-height:1.5;
}

.hero-benefits-list strong{
  font-weight:600;
  color:var(--ink);
}

.icon-muted{
  color:var(--muted);
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:.15rem;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
}

.hero-points li {
  padding-left: 1rem;
  margin-bottom: .6rem;
  border-left: 2px solid #e0e7ff;
  line-height: 1.55;
}


/* ==============================
   SECTION 2 — Frise alternée (axe central) — PREMIUM & STABLE
   Objectifs :
   - axe plus élégant (pas un simple border-left)
   - nodes (dots) qui "effacent" toujours la ligne (zéro artefact)
   - bridge dot bien présent entre 02 et 03
   ============================== */

#section-head {padding-bottom:10px;}

.method-axis{
/*   --axis-bg: #fff;                      fond réel de la section */
  --axis-line: rgba(15,23,42,.10);      /* couleur axe */
  --axis-node: rgba(15,23,42,.22);      /* bord nodes */
  --axis-gap: 56px;                     /* colonne centrale */
  --axis-halo: 10px;                    /* halo opaque pour couper l’axe */
  padding-top:10px;
}

/* Header */
.method-axis .section-head{max-width:52rem;margin-bottom:1.75rem}
.method-axis .section-title{margin:0;line-height:1.15}
.method-axis .section-subtitle{margin:.75rem 0 0 0;line-height:1.6}

/* Wrapper */
.method-axis .axis-wrap{
  position:relative;
  max-width:68rem;
  margin-inline:auto;
}

/* Timeline */
.method-axis .axis{
  list-style:none;
  margin:0;
  padding:.25rem 0;
  position:relative;
  isolation:isolate; /* peinture stable */
}

/* Axe central : rendu “design”
   -> on utilise un background (repeating-linear-gradient) au lieu d’un border-left
   -> évite les effets “subpixel” visibles dans les nodes */
.method-axis .axis::before{
  content:"";
  position:absolute;
  left:50%;
  top:.25rem;
  bottom:.25rem;
  transform:translateX(-50%);
  width:2px;
  background:linear-gradient(135deg,#d1fae5 0%, #e0e7ff 100%);
  opacity:.9;
  z-index:0;
  border-radius:999px;
}

/* Items alternés : même grille partout */
.method-axis .axis-item{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr var(--axis-gap) 1fr;
  column-gap:1.5rem;
  align-items:start;
  padding:1.05rem 0;
}

/* Cartes */
.method-axis .axis-card{
  position:relative;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.90);
  border-radius:18px;
  padding:1.05rem 1.15rem;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}

/* Typo interne */
.method-axis .axis-head{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  margin-bottom:.5rem;
}
.method-axis .axis-step{
  font-weight:750;
  letter-spacing:.06em;
  opacity:.55;
  min-width:2.1rem;
}
.method-axis .axis-title{
  margin:0;
  line-height:1.2;
  letter-spacing:-0.015em;
}
.method-axis .axis-text{margin:0 0 .45rem 0;line-height:1.65}
.method-axis .axis-note{margin:0;line-height:1.55;opacity:.92}

/* Placement gauche / droite */
.method-axis .axis-item.left  .axis-card{grid-column:1}
.method-axis .axis-item.right .axis-card{grid-column:3}

/* Connecteurs carte -> axe (sobres et parfaitement alignés) */
.method-axis .axis-item.left .axis-card::after,
.method-axis .axis-item.right .axis-card::after{
  content:"";
  position:absolute;
  top:1.15rem;
  width:1.4rem;
  height:1px;
  background:rgba(15,23,42,.14);
}
.method-axis .axis-item.left .axis-card::after{ right:-1.4rem; }
.method-axis .axis-item.right .axis-card::after{ left:-1.4rem; }

/* Node (dot) : “efface” l’axe grâce à un halo opaque
   -> IMPORTANT : le halo est plus grand que la largeur de l’axe + anti-aliasing */
.method-axis .axis-dot{
  grid-column:2;
  justify-self:center;
  margin-top:.85rem;

  width:14px;
  height:14px;
  border-radius:999px;

  background:#fff;
  border:2px solid var(--axis-node);

  /* halo opaque (coupe l’axe, même sur navigateurs capricieux) */
  box-shadow: 0 0 0 var(--axis-halo) var(--axis-bg);

  position:relative;
  z-index:3;
}

/* ========= BRIDGE =========
   On la met sur la même grille que les items, avec un dot dédié au centre.
*/
.method-axis .axis-bridge{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1fr var(--axis-gap) 1fr;
  column-gap:1.5rem;
  align-items:center;
  padding:.35rem 0 1.25rem 0;
}

/* Dot de bridge : exactement identique aux nodes des étapes */
.method-axis .axis-bridge-dot{
  grid-column:2;
  justify-self:center;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#e0e8fe;
  border:2px solid #e0e7ff;
  box-shadow: 0 0 0 var(--axis-halo) var(--axis-bg);
  position:relative;
  z-index:4;
}
/* .method-axis .axis-bridge-dot::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
}
 */
/* Bridge box centrée visuellement, sans casser la grille */
.method-axis .axis-bridge-box{
  grid-column: 1 / -1;
  max-width:32rem;
  margin:0 auto;
  border:1px solid #e0e7ff;
  background:linear-gradient(-135deg,#d1fae5 0%,#fff 50%,#e0e7ff 100%);
  border-radius:16px;
  padding:.85rem 1rem;
  line-height:1.6;
  font-size:.95em;
  opacity:.92;
  font-weight: 500;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  text-align: center;
}

/* ========= MOBILE =========
   Axe à gauche, 1 colonne, dots + bridge alignés sur le même rail.
*/
@media (max-width: 900px){
  .method-axis .axis::before{
    left:12px;
    transform:none;
  }

  .method-axis .axis-item{
    grid-template-columns: 34px 1fr;
    column-gap:1rem;
  }
  .method-axis .axis-dot{
    grid-column:1;
    margin-top:1rem;
  }
  .method-axis .axis-item.left  .axis-card,
  .method-axis .axis-item.right .axis-card{
    grid-column:2;
  }
  .method-axis .axis-item.left .axis-card::after,
  .method-axis .axis-item.right .axis-card::after{
    display:none;
  }

  .method-axis .axis-bridge{
    grid-template-columns: 34px 1fr;
    column-gap:1rem;
  }
  .method-axis .axis-bridge-dot{
    grid-column:1;
    justify-self:center;
  }
  .method-axis .axis-bridge-box{
    grid-column:2;
    max-width:100%;
    margin:0;
  }
}

/*  Personnalisation Couleurs    */
#met01 .axis-card{
	border: 1px solid #9be9c1;
}

#met01 .axis-dot{
	border: 2px solid #9be9c1;
	background: var(--green_home);
}
 #met01 .axis-card::after{
	 background:#9be9c1;
 }


#met02 .axis-card{
	border: 1px solid #a7b7ed;
}

#met02 .axis-dot{
	border: 2px solid #a7b7ed;
	background: #e0e7ff;
}

 #met02 .axis-card::after{
	 background:#a7b7ed;
 }


/* =========================
   Section 4 — Cadre & réassurance
   ========================= */

#cadre-reassurance .section-head {
  max-width: 62rem;
  margin-bottom: 2rem;
}

#cadre-reassurance .section-title {
  margin: 0;
}

#cadre-reassurance .section-subtitle {
  margin: .75rem 0 0 0;
  line-height: 1.65;
}

/* Liste sobre (sans cards) */
#cadre-reassurance .reassurance-list {
  display: grid;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

/* Bloc (mobile par défaut : 1 colonne avec séparation horizontale + ligne verticale par bloc) */
#cadre-reassurance .reassurance-item {
  position: relative;
  padding-left: 1.25rem;
}

#cadre-reassurance .reassurance-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: #e0e7ff;
}

#cadre-reassurance .reassurance-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Titres / texte */
#cadre-reassurance .reassurance-title {
  margin: 0 0 .4rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#cadre-reassurance .reassurance-text {
  margin: 0;
  line-height: 1.65;
}

/* Desktop : 2 colonnes, on supprime la séparation horizontale (border-top), on garde la ligne verticale par bloc */
@media (min-width: 980px) {
  #cadre-reassurance .reassurance-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 1.75rem;
  }

  #cadre-reassurance .reassurance-item {
    border-top: 0;
    padding-top: 0;
  }
}

/* Mobile : si tu préfères ne PAS afficher la ligne verticale, garde ceci.
   (Sinon supprime ce bloc pour conserver les lignes verticales sur mobile aussi.) */
@media (max-width: 980px) {
  #cadre-reassurance .reassurance-item {
    padding-left: 0;
  }

  #cadre-reassurance .reassurance-item::before {
    display: none;
  }
}

/* =========================
   Section "Les changements au quotidien"
   Layout éditorial (h3 + p)
   ========================= */

#benefices .service-item {
  display: block;              /* ⬅️ on annule le flex */
  padding: 1.25rem;
}

#benefices .service-item h3 {
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

#benefices .service-item p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}

/* =========================
   Section 5 — Transition vers les offres + CTA final (PROPRE)
   Scope: #transition-offres
   ========================= */

.section-transition-offres{
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  background: linear-gradient(135deg, #d1fae5 0%, #fff 50%, #e0e7ff 100%);
}

/* Intro */
#transition-offres .transition-wrap{
  max-width: 760px;
}

#transition-offres .transition-lead{
  line-height: 1.75;
  margin: .9rem auto 0;
  max-width: 760px;
}

/* =========================
   Grille 2 colonnes (critères / note offres)
   ========================= */

#transition-offres .transition-grid{
  margin-top: clamp(1.2rem, 3.2vw, 1.8rem);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.criteria {
  max-width:36em;
  padding-left: 1rem;
}

@media (min-width: 980px){
  #transition-offres .transition-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================
   Gauche : critères (allégé + rail premium)
   ========================= */

#transition-offres .transition-kicker{
  margin: 0 0 .75rem 0;
  font-weight: 650;
  opacity: .95;
}

#transition-offres .criteria-list{
  list-style: none;
  padding: 0 0 0 .25rem;
  margin: 1.8rem 0 0 0;
  display: grid;
  gap: .55rem;
  position: relative;
}

/* rail vertical discret */
#transition-offres .criteria-list::before{
  content:"";
  position:absolute;
  top: .35rem;
  bottom: .35rem;
  width: 1px;
  background: #e0e7ff;
}

#transition-offres .criteria-item{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .75rem;
  align-items: start;
  padding: .35rem 0 .55rem;
}

#transition-offres .criteria-ico{
  width: 18px;
  height: 18px;
  opacity: .85;
  margin-top: .15rem;
}

#transition-offres .criteria-text strong{
  display: block;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

#transition-offres .criteria-text .text-muted{
  display: block;
  margin-top: .25rem;
  line-height: 1.55;
  font-size: .95rem;
  opacity: .92;
}

#transition-offres .transition-note{
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid #e0e7ff;
  line-height: 1.7;
  opacity: .92;
  max-width: 46rem;
}

/* =========================
   Droite : encart offres (léger)
   ========================= */

/* =========================
   OFFERS-NOTE — intégration propre (texte 5/5 inchangé)
   Scope: #transition-offres .offers-note
   ========================= */

#transition-offres .offers-note{
  max-width: 50rem;
  margin: 0 0 0 1rem;
}

#transition-offres .offers-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: 1.1rem;
  color: var(--ink);
}

#transition-offres .offers-body{
  margin-top: .55rem;
  display: grid;
  gap: .7rem;
}

/* paragraphes */
#transition-offres .offers-paragraph{
  margin: 0;
  line-height: 1.65;
}



/* bloc “Starter est limité…” en lignes propres */
#transition-offres .offers-line{
  margin: 0;
  line-height: 1.65;
}

/* Pills */
#transition-offres .offers-pills{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .15rem;
}

#transition-offres .offer-pill{
  display: inline-flex;
  align-items: center;
  padding: .28rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  font-weight: 650;
  font-size: .92rem;
  color: var(--ink);
}

/* met Croissance en évidence sans “changer le graphisme global” */
#transition-offres .offer-pill.is-primary{
  border-color: rgba(15,23,42,.18);
  background: rgba(255,255,255,.95);
  box-shadow: 0 1px 0 rgba(15,23,42,.05);
}

/* phrase de fin */
#transition-offres .offers-foot{
  margin: 0;
  line-height: 1.65;
  opacity: .95;
}

@media (max-width: 980px){
  #transition-offres .offers-note{ max-width: 100%; }
  #transition-offres .offers-callout{ padding: .6rem .75rem; }
}

#transition-offres .offers-callout{
  margin: 0 4rem 0 1rem;
  align-items: start;

  padding: .65rem .8rem;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid #e0e7ff;

  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
  
  border-left: 2px solid #e0e7ff;
}

#transition-offres .offers-callout-icon{
  width: 16px;
  height: 16px;
  color: var(--muted);
  margin-top: .2rem;
}


/* =========================
   CTA card (stable, compact, premium)
   ========================= */

#transition-offres .cta-card{
  margin-top: clamp(1.6rem, 4vw, 2.3rem);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(2,8,23,.08);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);

  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 980px){
  #transition-offres .cta-card{
    grid-template-columns: 1.35fr 1fr;
    gap: 1.75rem;
  }
}

#transition-offres .cta-title{
  margin: 0;
  font-size: clamp(1.25rem, 2.0vw, 1.65rem); /* ✅ clamp corrigé */
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

#transition-offres .cta-desc{
  margin: .6rem 0 0;
  line-height: 1.65;
  max-width: 44rem;
}

/* Réassurance : supporte .cta-bullets OU .cta-proof */
#transition-offres .cta-bullets,
#transition-offres .cta-proof{
  list-style: none;
  padding: 0;
  margin: .85rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.1rem;
  color: var(--muted);
  font-size: .95rem;
}

#transition-offres .cta-bullets li,
#transition-offres .cta-proof li{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

#transition-offres .cta-bullet-ico,
#transition-offres .cta-proof .icon{
  width: 16px;
  height: 16px;
  min-width: 16px;
  color: var(--muted);
  opacity: .85;
}

/* Colonne droite CTA */
#transition-offres .cta-card-right{
  display: flex;
  justify-content: flex-end;
}

#transition-offres .cta-actions{
  display: grid;
  gap: .7rem;
  justify-items: end;
  align-content: center;
}

/* Boutons : largeur cohérente, moins “massif” */
#transition-offres .btn-lg{
  padding: 11px 18px;
  border-radius: 10px;
}

#transition-offres .cta-actions .btn-lg{
  min-width: 320px;
  justify-content: center;
}

@media (max-width: 980px){
  #transition-offres .cta-card-right{ justify-content: flex-start; }
  #transition-offres .cta-actions{ justify-items: start; }
  #transition-offres .cta-actions .btn-lg{ min-width: 100%; }
}

/* Subtext sous le bouton RDV (compatible avec ta classe existante) */
#transition-offres .cta-meeting-container{
  display: grid;
  gap: .25rem;
  justify-items: end;
  align-items: start;
}

@media (max-width: 980px){
  #transition-offres .cta-meeting-container{
    justify-items: start;
  }
}

#transition-offres .cta-meeting-subtext{
  font-size: .82rem;
  color: var(--muted);
  opacity: .9;
  margin: 0;
}

/* =========================
   PATCH CTA CARD — #transition-offres (fix régression)
   Colle ce bloc TOUT EN BAS du CSS
   ========================= */

#transition-offres .cta-card-right{
  display:flex;
  justify-content:flex-end;
}

/* La pile de boutons : largeur stable + alignement net */
#transition-offres .cta-actions{
  width: min(360px, 100%);
  display:grid;
  gap:.75rem;
  justify-items:stretch;      /* <-- évite les widths chelous */
  align-content:center;
}

/* Les 2 boutons prennent exactement la même largeur */
#transition-offres .cta-actions .btn-lg{
  width: 100%;
  min-width: 0;               /* <-- neutralise les anciens min-width */
  justify-content:center;
}

/* IMPORTANT : neutralise les styles globaux sur .cta-meeting-container */
#transition-offres .cta-meeting-container{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  width:100%;
  gap:.3rem;
}

/* Sous-texte toujours sous le bouton, centré */
#transition-offres .cta-meeting-subtext{
  display:block;
  width:100%;
  text-align:center;
  margin:0;
  font-size:.82rem;
  color:var(--muted);
  opacity:.9;
}

/* Réassurance : 3 items lisibles, pas de split “Sans / engagement” */
#transition-offres .cta-proof,
#transition-offres .cta-bullets{
  margin:.85rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap:.75rem 1.25rem;
  align-items:center;
}

#transition-offres .cta-proof li,
#transition-offres .cta-bullets li{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  white-space:nowrap;         /* <-- empêche “Sans / engagement” */
}

@media (max-width: 980px){
  #transition-offres .cta-card-right{justify-content:flex-start;}
  #transition-offres .cta-proof,
  #transition-offres .cta-bullets{
    grid-template-columns: 1fr;
    gap:.45rem;
  }
  #transition-offres .cta-proof li,
  #transition-offres .cta-bullets li{
    white-space:normal;
  }
}

#transition-offres .cta-card-left{
	margin-left: 3rem;
}

/* ==============================
   Footer
   ============================== */
.footer{
  background:#f8fafc;
  border-top:1px solid var(--border);
  padding:2.5rem 0;
  font-size:.95rem;
}
.footer .row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--ink)}

/* ==============================
   HubSpot Meetings (Diagnostic) — modal sizing only
   Scope: #diagnostic-modal
   ============================== */
#diagnostic-modal .meetings-iframe-container{
  width: 100%;
  min-height: 680px;
}
#diagnostic-modal .meetings-iframe-container iframe{
  width: 100% !important;
  min-height: 680px !important;
  border: 0 !important;
}