/* Adoucit le cadre autour des cartes */
.page-contrat .encadre {
  border: 1px solid #e2e8f0;   /* gris clair au lieu du bleu pétant */
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Rééquilibre les colonnes (création/illustration) */
.page-contrat .section-split {
  grid-template-columns: 1fr 1fr; /* au lieu de 1.05fr / .95fr */
  align-items: start;             /* aligne les 2 en haut */
}

/* Illustration : occupe une vraie hauteur pour éviter le "trou" */
.page-contrat .split-illu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-contrat .svg-split {
  width: 100%;
  max-width: 380px;  /* pas trop large */
  min-height: 240px; /* garde du volume visuel */
}
/* Bande de couleur full-bleed pour la section "Contrats de maintenance" */
.page-contrat #maintenance{
  position: relative;
  z-index: 0;          /* nouveau contexte d'empilement */
}

/* Fond qui s'étend bord à bord derrière le container */
/* Mobile/tablette : tu gardes ton 100vw et donc le x-scroll si tu veux */
.page-contrat #maintenance::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#f0f9ff 0%, #e0f2fe 100%);
  z-index:-1;
  border-top:1px solid #e6e9ef;
  border-bottom:1px solid #e6e9ef;
}

/* Desktop : full-bleed sans débordement => plus de barre */
@media (min-width:981px){
  .page-contrat #maintenance{ position:relative; z-index:0; }
  .page-contrat #maintenance::before{
    /* on abandonne 100vw pour une largeur "bord à bord" sans overflow */
    inset:0 calc(50% - 50vw);
    left:auto;
    transform:none;
    width:auto;
  }
}

/* Centre les 2 cartes de la section maintenance */
.page-contrat #maintenance .prices {
  grid-template-columns: repeat(2, minmax(280px, 360px)); /* 2 colonnes fixes */
  justify-content: center; /* centre le bloc dans la section */
  gap: 24px; /* espace entre les cartes */
}
/* Titres en "bulle" */
.page-contrat .bandeau h2 {
  display: inline-block;
  background: linear-gradient(135deg, #6366f1, #0ea5e9); /* violet → bleu */
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px; /* forme pilule */
  font-size: 1.6rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(99,102,241,.25);
}
/* ===== Domain checker ===== */
.page-contrat .domain-check{
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(2,6,23,.08);
  text-align: center;
}

.page-contrat .domain-check h2{
  margin: 0 0 16px;
  font: 800 clamp(1.3rem,2.6vw,1.8rem)/1.2 "Poppins",system-ui,sans-serif;
  color: #0f172a;
}

.page-contrat .dc-form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.page-contrat .dc-input{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  background:#f8fafc;
  border:1px solid #d5dbe3;
  border-radius: 12px;
}
.page-contrat .dc-prefix{
  color:#64748b;
  font-weight:600;
}
.page-contrat #dc-domain{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font: 600 16px/1 Inter, system-ui, sans-serif;
  color:#0b1220;
}
.page-contrat #dc-domain::placeholder{ color:#94a3b8; }

.page-contrat #dc-btn{
  padding:12px 18px;
  border-radius:12px;
}

.page-contrat .dc-result{
  margin-top: 14px;
  min-height: 40px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  font-weight:600;
  font-size:15px;
}
.page-contrat .dc-result.ok{ color:#16a34a; }
.page-contrat .dc-result.ko{ color:#dc2626; }
.page-contrat .dc-result.load{ color:#2563eb; }

.page-contrat .domain-check h2{
  margin:0 0 18px;
  font:800 clamp(1.4rem,2.8vw,2rem)/1.15 "Poppins",system-ui,sans-serif;
  color:#2563eb;   /* bleu */
  letter-spacing:-.2px;
}

/* mobile */
@media (max-width:680px){
  .page-contrat .dc-form{ grid-template-columns: 1fr; }
  .page-contrat #dc-btn{ width:100%; }
}

/* Bouton supplémentaire affiché seulement si dispo */
.page-contrat #dc-action .btn {
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 6px 16px rgba(22, 163, 74, .25);
}
.page-contrat #dc-action .btn:hover {
  transform: translateY(-2px);
}
/* Forcer le curseur "main" sur le bouton Vérifier */
#dc-btn,
.page-contrat .dc-form button,
.page-contrat .btn {
  cursor: pointer !important;
}

/* Si un calque invisible recouvre le bouton, on s'assure qu'il reçoit bien les events */
.page-contrat .domain-check,
.page-contrat .domain-check * {
  pointer-events: auto;
}

/* Au cas où un pseudo-élément de section recouvre (z-index) */
.page-contrat .section.cta { position: relative; z-index: 0; }
#dc-btn { position: relative; z-index: 1; }

/* ===== Page background with gradient blobs ===== */
.page-formulaire{
  background: radial-gradient(60% 80% at 10% 0%, rgba(99,102,241,.08), transparent 60%),
              radial-gradient(60% 80% at 90% 10%, rgba(14,165,233,.08), transparent 60%),
              var(--bg);
}
.fm-bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.fm-bg .blob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.45;}
.fm-bg .b1{width:380px;height:380px;left:-80px;top:-80px;background:radial-gradient(40% 40% at 30% 30%, #6366f1, transparent 60%);}
.fm-bg .b2{width:300px;height:300px;right:-60px;top:120px;background:radial-gradient(40% 40% at 70% 30%, #0ea5e9, transparent 60%);}
.fm-bg .b3{width:280px;height:280px;left:40%;bottom:-120px;background:radial-gradient(40% 40% at 50% 50%, #22d3ee, transparent 60%);}

/* ===== HERO ===== */
.fm-hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center;}
.fm-hero-text h1{font:800 clamp(2rem,4vw,2.6rem)/1.1 Poppins,Inter,sans-serif; margin:0 0 8px;}
.fm-hero-text p{color:#334155; font-size:18px; margin:0 0 8px;}
.fm-hero-text .ticks{display:grid; gap:6px; padding:0; margin:8px 0 0; list-style:none; color:#334155;}

.fm-hero-card .glass{
  border-radius:22px; padding:16px; border:1px solid rgba(255,255,255,.6);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  backdrop-filter: blur(8px) saturate(130%); box-shadow: 0 12px 30px rgba(2,6,23,.12);
}
.fm-hero-card .bars{display:flex; gap:8px; margin-bottom:12px;}
.fm-hero-card .bars span{height:8px; flex:1; border-radius:999px; background:linear-gradient(90deg,#dbeafe,#e9d5ff);}
.fm-hero-card .tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.fm-hero-card .tiles i{display:block; height:76px; border-radius:14px; background:#f8fafc; border:1px solid #e5e7eb;}
.fm-hero-card .tiles i.wide{grid-column:span 3; height:56px;}

/* ===== STEPPER ===== */
.fm-steps{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;}
.fm-steps .line{height:2px; width:42px; background:#dbe2ec; border-radius:4px;}
.fm-steps .dot{display:grid; place-items:center;}
.fm-steps .dot span{
  width:30px;height:30px;border-radius:999px; display:grid; place-items:center;
  background:#e2e8f0; color:#0f172a; font-weight:700;
}
.fm-steps .dot.active span{ background:linear-gradient(135deg, var(--pri), var(--acc)); color:#fff; box-shadow:0 6px 16px rgba(99,102,241,.25); }
.fm-steps .dot small{display:block; text-align:center; color:#64748b; margin-top:4px; font-size:12px}

/* ===== FORM WRAP + CARD ===== */
.fm-wrap{position:relative;}
.fm-card{
  background:#fff; border-radius:22px; border:1px solid #e6e9ef;
  box-shadow: 0 16px 40px rgba(2,6,23,.14);
  padding:24px; display:grid; gap:22px;
}

/* ===== TABS ===== */
.fm-tabs{display:flex; gap:10px; justify-content:center; margin-bottom:6px;}
.fm-tabs .tab{
  border:1px solid #d7dce4; background:#fff; color:#0f172a; font-weight:700;
  padding:10px 14px; border-radius:999px; cursor:pointer; transition:.18s ease;
}
.fm-tabs .tab.active{
  background: linear-gradient(135deg,var(--pri),var(--acc)); color:#fff; border-color:transparent;
  box-shadow:0 8px 18px rgba(99,102,241,.25);
}

/* ===== PICK CARDS ===== */
.fm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px;}
.fm-grid.hidden{display:none;}
.pick{cursor:pointer; user-select:none;}
.pick .pick-body{
  border:1px solid #e5e7eb; border-radius:16px; padding:16px;
  background:
     radial-gradient(120% 120% at 110% -10%, rgba(99,102,241,.10), transparent 60%),
     radial-gradient(120% 120% at -10% 120%, rgba(14,165,233,.10), transparent 60%),
     #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.pick .badge{
  display:inline-block; font-size:12px; font-weight:800; color:#fff; padding:6px 10px; border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#0ea5e9); box-shadow:0 6px 16px rgba(99,102,241,.25); margin-bottom:8px;
}
.pick .badge.hot{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.pick .badge.gold{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.pick h3{ margin:0 0 4px; font:800 18px/1.2 Poppins,Inter,sans-serif; }
.pick p{ margin:0 0 8px; color:#475569; }
.pick .price{ font-weight:800; color:#0b1220; }
.pick.active .pick-body,
.pick:hover .pick-body{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--pri) 40%, #e5e7eb);
  box-shadow:0 16px 42px rgba(2,6,23,.12);
}

/* ===== SECTIONS ===== */
.fm-section .bandeau{ text-align:center; margin:8px 0 12px; }
.fm-section .bandeau h2{
  display:inline-block;
  background:linear-gradient(135deg,var(--pri),var(--acc));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font:800 clamp(1.4rem,2.6vw,1.8rem)/1.15 Poppins,Inter,sans-serif;
}

/* ===== Fields ===== */
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field label{ display:block; font-weight:700; margin:6px 0 6px; color:#0f172a; }
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid #d5dbe3; background:#f9fafb;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; font-size:15px;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--pri); background:#fff; box-shadow: 0 0 0 4px var(--ring); outline:0;
}

/* Consent */
.consent{
  display:flex; gap:10px; align-items:flex-start; color:#475569;
  background:#f1f5f9; border:1px solid #e6e9ef; border-radius:12px; padding:12px;
}

/* Submit */
.fm-submit{ display:grid; gap:6px; justify-items:center; }
.btn.big{ padding:14px 26px; border-radius:14px; box-shadow:0 10px 24px rgba(99,102,241,.25); cursor:pointer; }
.btn.big:hover{ transform: translateY(-2px); }

/* Misc */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.hidden{ display:none !important; }

/* Responsive */
@media (max-width:980px){
  .fm-hero-inner{ grid-template-columns:1fr; }
  .fm-grid{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; }
}

/* ===== Dézoom visuel (page contrat uniquement) ===== */
.page-contrat {
  font-size: 15px; /* texte un peu plus petit (≈ -6%) */
}

/* largeur + espacements un peu réduits */
.page-contrat .container { max-width: 1040px; padding: 20px; }
.page-contrat .section   { padding: 32px 0; }

/* titres un cran en dessous */
.page-contrat h1 { font-size: 40px; line-height: 1.1; }
.page-contrat h2 { font-size: 28px; }
.page-contrat h3 { font-size: 20px; }

/* boutons plus compacts */
.page-contrat .btn       { padding: 10px 16px; border-radius: 10px; }

/* cartes tarifs un peu plus serrées */
.page-contrat .prices          { gap: 14px; }
.page-contrat .price-card      { padding: 16px; border-radius: 18px; }
.page-contrat .price-card h3   { font-size: 16px; padding: 5px 8px; }
.page-contrat .price-card .big { font-size: 24px; margin: 6px 0 8px; }
.page-contrat .price-card li   { margin: 6px 0; }

/* colonnes & éléments divers un peu resserrés */
.page-contrat .grid-2,
.page-contrat .gallery,
.page-contrat .cards { gap: 14px; }

/* section-split (si utilisée sur cette page) */
.page-contrat .section-split { gap: 20px; }
.page-contrat .svg-split     { max-width: 340px; min-height: 220px; }

/* consentements / inputs */
.page-contrat input,
.page-contrat textarea,
.page-contrat select { padding: 10px; border-radius: 10px; }


/* Prix simple et plus petit */
.price-card .pc-price{
  display:inline-block;
  margin:6px 0 14px;
  padding:6px 14px;
  border-radius:12px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.25);
  font-size:1.1rem;
  font-weight:700;
  color:#16a34a;
  backdrop-filter:blur(4px);
}

/* Liste avec bulles */
.price-card .pc-features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.price-card .pc-features li{
  position:relative;
  padding:10px 14px 10px 38px;
  border-radius:12px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(6px);
  font-size:.95rem;
  color:#0f172a;
}

/* Icône check dans chaque bulle */
.price-card .pc-features li::before{
  content:"✔";
  position:absolute;
  left:12px; top:50%;
  transform:translateY(-50%);
  font-size:.85rem;
  font-weight:700;
  color:#16a34a;
}
/* Variante NON inclus */
.price-card .pc-features li.no{
  background:rgba(254,226,226,.6); /* rouge clair translucide */
  border:1px solid rgba(239,68,68,.25);
  color:#991b1b;
}
.price-card .pc-features li.no::before{
  content:"✖";
  color:#ef4444;
}
/* S'assure que le SVG prend toute la largeur */
.hero-illu .svg-hero {
  display: block;
  width: 100%;
  height: auto;
}

/* Animation texte : flottement + respiration */
.hero-illu .svg-hero text {
  transform-box: fill-box;
  transform-origin: left center;
  animation: textFloat 6s ease-in-out infinite,
             textFade 8s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Décalages pour ne pas que tout bouge en même temps */
.hero-illu .svg-hero text:nth-of-type(1){ animation-delay: 0s, 0s; }
.hero-illu .svg-hero text:nth-of-type(2){ animation-delay: .4s, .6s; }
.hero-illu .svg-hero text:nth-of-type(3){ animation-delay: .8s, 1.2s; }

/* Keyframes */
@keyframes textFloat {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-2px) }
}
@keyframes textFade {
  0%,100% { opacity: .95 }
  50%     { opacity: .75 }
}
/* ===== Mobile only (contrat) — carrousel horizontal propre ===== */
@media (max-width: 680px){

  /* Section tarifs/maintenance : devient un rail horizontal scrollable */
  .page-contrat .prices{
    display: flex;
    overflow-x: auto;               /* scroll visible (on ne le masque pas) */
    gap: 14px;
    padding: 0 16px;                /* évite que les cartes collent aux bords */
    scroll-snap-type: x mandatory;  /* snap fluide */
    -webkit-overflow-scrolling: touch;
  }

  /* Chaque carte prend la largeur utile sans être coupée */
  .page-contrat .prices .price-card{
    flex: 0 0 auto;
    width: calc(100vw - 48px);      /* viewport - padding/gap => pas de coupe */
    scroll-snap-align: center;
  }

  /* Bandeau/galeries si tu les utilises aussi en slider horizontal */
  .page-contrat .cards,
  .page-contrat .gallery{
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 0 16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .page-contrat .cards > *,
  .page-contrat .gallery > *{
    flex: 0 0 auto;
    width: calc(100vw - 48px);
    scroll-snap-align: start;
  }

  /* Hero/sections : resserre un peu pour garder tout lisible */
  .page-contrat .section{ padding: 24px 0; }
  .page-contrat h1{ font-size: 32px; }
  .page-contrat h2{ font-size: 24px; }
  .page-contrat h3{ font-size: 18px; }
}

/* Desktop intact. Si tu as appliqué le fix PC pour #maintenance::before, garde-le : */
@media (min-width: 981px){
  .page-contrat #maintenance{ position:relative; z-index:0; }
  .page-contrat #maintenance::before{
    inset:0 calc(50% - 50vw);  /* full-bleed sans overflow */
    left:auto; transform:none; width:auto;
  }
}
/* Consent compact, inline */
.page-contrat .consent{
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;   /* plus de gros fond */
  border:0;                 /* plus de cadre */
  border-radius:0;
  padding:0;                /* plus de gros padding */
  margin:8px 0 0;
}

.page-contrat .consent input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;                 /* aligne bien avec le texte */
  flex-shrink:0;
  accent-color: var(--pri); /* couleur du check */
}

.page-contrat .consent .text{
  color:#475569;
  font-size:14px;
  line-height:1.4;
}

/* Option mobile : un poil d'air sans refaire un bloc énorme */
@media (max-width:680px){
  .page-contrat .consent{ gap:10px; }
}
/* Force l'épaisseur comme la page claire */
.topbar .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0 !important;
  height:auto !important;
}

/* Liens du menu (évite qu’un line-height gonfle la barre) */
.topbar nav a{
  line-height:1.2;
  padding:0;
  margin-left:14px;
}
/* Espaces boutons et blocs du wizard */
.fm-card .fm-submit { margin-top: 24px; }

#btn-login      { margin: 10px 0 16px; }   /* bouton Se connecter */
#btn-register   { margin: 14px 0 0; }      /* bouton Créer mon compte */

.fm-submit .btn { margin: 6px 8px 0 0; }   /* boutons Suivant/Précédent */
.fm-submit .btn.big { margin-top: 10px; }  /* bouton Suivant (grand) */

/* Espaces entre inputs et sections */
.fm-card .row { display:flex; gap:16px; margin-bottom:12px; }
.fm-card .field { flex:1; }
hr { margin: 18px 0; }

/* Option: plus d’air sous le bloc "Tu as déjà un compte ?" */
section[data-step="2"] .bandeau + .row { margin-top: 10px; }