/* ======================================================
   Iliade Digital — Devis Gratuit (UX polish)
   File: assets/css/devis-gratuit.css
   Dépend: variables.css + styles.css
   Objectifs:
   - Hiérarchie claire Question -> Réponses -> Champs optionnels
   - Séparation visuelle “étape”
   - Choix premium (selected très lisible)
   - Form lisible sur mobile (espaces + tailles)
   ====================================================== */

.il-devis{
  --bg-soft: var(--bg-soft, #F2F3F4);
  --line: var(--line, #E6E8EE);
  --ink: var(--text, #111827);
  --muted: var(--muted, #666672);
  --brand: var(--brand-green, #17A051);

  --shadow: var(--shadow-md, 0 14px 34px rgba(16,19,35,.12));
  --shadow-sm: var(--shadow-sm, 0 10px 22px rgba(16,19,35,.08));

  --r-14: var(--radius-sm, 14px);
  --r-16: var(--radius-md, 16px);

  --pad-card: clamp(14px, 3.2vw, 20px);
  --gap: 12px;
  --gap-lg: 16px;

  color: var(--ink);
}

/* ======================================================
   HERO
   ====================================================== */
.il-devis__hero{
  padding-block: clamp(24px, 5vw, 54px);
  background:
    radial-gradient(800px 420px at 15% 20%, rgba(23,160,81,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(16,19,35,.06), transparent 60%),
    linear-gradient(var(--bg, #fff), var(--bg, #fff));
  border-bottom: 1px solid var(--line);
}

.il-devis__hero-grid{
  display: grid;
  gap: clamp(16px, 3vw, 26px);
  align-items: start;
}

@media (min-width: 980px){
  .il-devis__hero-grid{
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
  }
}

.il-devis__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--brand);
  margin: 0 0 10px;
}

.il-devis__lead{
  color: var(--muted);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
}

.il-devis__bullets{
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none !important;
  display: grid;
  gap: 10px;
}
.il-devis__bullets li{
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  opacity: .95;
}

/* ======================================================
   CARD FORM (force un rendu premium même si .il-card change)
   ====================================================== */
.il-devis__card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  box-shadow: var(--shadow);
  padding: var(--pad-card);
}

/* Top: progress + titre */
.il-devis__top{
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.il-devis__title{
  font-family: var(--font-head);
  font-weight: 950;
  font-size: 16px;
}

.il-devis__progress{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.il-devis__bar{
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(16,19,35,.06);
  overflow: hidden;
}
.il-devis__bar span{
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(23,160,81,.45);
  border-radius: 999px;
  transition: width .25s var(--ease, cubic-bezier(.2,.8,.2,1));
}

.il-devis__steps{
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--muted);
  font-size: 13px;
}

/* Honeypot */
.il-hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ======================================================
   Steps
   ====================================================== */
.il-step{ display: none; }
.il-step.is-active{ display: block; }

/* ======================================================
   TYPO & HIERARCHY (la clé du “brouillon”)
   - 1er .il-label = QUESTION (grosses)
   - labels dans .il-field = secondaires
   ====================================================== */

/* Question principale (label direct sous .il-step) */
.il-step > .il-label{
  display: block;
  margin: 6px 0 10px;
  font-family: var(--font-head);
  font-weight: 950;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}

/* Sous-texte implicite via espacement (pas besoin de phrase) */
.il-step > .il-label + .il-choices,
.il-step > .il-label + .il-checks{
  margin-top: 10px;
}

/* Champs (optionnels / secondaires) */
.il-field{
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(16,19,35,.10);
}
.il-step .il-field:first-of-type{
  padding-top: 0;
  border-top: 0;
}

/* Label de champ */
.il-field .il-label{
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(16,19,35,.72);
  letter-spacing: .2px;
}

/* Inputs base (si ton styles.css ne suffit pas) */
.il-input,
.il-select,
.il-textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  background: #fff;
  color: var(--ink);
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
}

.il-textarea{
  min-height: 98px;
  resize: vertical;
  line-height: 1.45;
}

.il-input:focus,
.il-select:focus,
.il-textarea:focus{
  border-color: rgba(23,160,81,.45);
  box-shadow: 0 0 0 4px rgba(23,160,81,.12);
}

::placeholder{ color: rgba(16,19,35,.45); }

/* ======================================================
   Layout grids
   ====================================================== */
.il-mt{ margin-top: 14px; }
.il-mt-sm{ margin-top: 10px; }

.il-grid2{
  display: grid;
  gap: 12px;
}
@media (min-width: 680px){
  .il-grid2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================
   Choices (réponses) — plus premium + selected évident
   ====================================================== */
.il-choices{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 520px){
  .il-choices{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.il-choice{
  min-height: 56px;
  border-radius: var(--r-16);
  border: 1px solid var(--line);
  background: linear-gradient(#fff, #fff);
  cursor: pointer;

  font-family: var(--font-head);
  font-weight: 950;
  text-align: left;
  padding: 0 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  box-shadow: 0 1px 0 rgba(16,19,35,.02);
  transition: transform .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease), box-shadow .12s var(--ease);
}

.il-choice:hover{
  border-color: rgba(23,160,81,.22);
  background: rgba(23,160,81,.05);
  box-shadow: 0 10px 22px rgba(16,19,35,.06);
}

.il-choice:active{ transform: translateY(1px); }

/* Selected = très lisible (brouillon -> premium) */
.il-choice.is-selected{
  border-color: rgba(23,160,81,.55);
  background:
    radial-gradient(420px 160px at 15% 20%, rgba(23,160,81,.18), transparent 60%),
    linear-gradient(#fff, #fff);
  box-shadow: 0 14px 30px rgba(23,160,81,.12);
  position: relative;
}
.il-choice.is-selected::after{
  content: "✓";
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(23,160,81,.14);
  color: var(--brand);
  font-weight: 900;
}

/* ======================================================
   Checks (étape 3) — plus lisible
   ====================================================== */
.il-checks{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.il-check{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: rgba(16,19,35,.02);
  transition: border-color .12s var(--ease), background .12s var(--ease);
}

.il-check input{
  width: 18px;
  height: 18px;
}

.il-check:has(input:checked){
  border-color: rgba(23,160,81,.35);
  background: rgba(23,160,81,.06);
}

/* ======================================================
   Consent / help
   ====================================================== */
.il-consent{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(16,19,35,.65);
  line-height: 1.45;
}
.il-consent input{ margin-top: 3px; }

.il-help{
  font-size: 12px;
  color: rgba(16,19,35,.55);
}

/* ======================================================
   Actions (footer du form)
   - On ancre visuellement (et on sépare) pour que ça fasse “tunnel”
   ====================================================== */
.il-devis__actions{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.il-devis__actions .il-btn{
  flex: 1 1 auto;
  justify-content: center;
  border-radius: var(--r-16);
  min-height: 48px;
}

/* (optionnel) rendre “Continuer” plus dominant */
.il-devis__actions [data-il-devis-next],
.il-devis__actions [data-il-devis-submit]{
  box-shadow: 0 14px 26px rgba(23,160,81,.14);
}

.is-hidden{ display: none !important; }

/* Message */
.il-devis__msg{
  margin-top: 12px;
  font-size: 14px;
  color: rgba(16,19,35,.65);
}
.il-devis__msg[data-type="error"]{ color: #b42318; }
.il-devis__msg[data-type="success"]{ color: var(--brand); }

/* ======================================================
   Mobile micro-optimisations (lisibilité)
   ====================================================== */
@media (max-width: 520px){
  .il-step > .il-label{ font-size: 17px; }
  .il-choice{ min-height: 54px; }
  .il-devis__card{ padding: clamp(12px, 4vw, 16px); }
}

/* ======================================================
   PATCH FINESSE UI — réponses + champs (moins “gras”)
   À coller en FIN de fichier
   ====================================================== */

/* Couleurs fines */
.il-devis{
  --fine-line: rgba(16,19,35,.12);
  --fine-line-2: rgba(16,19,35,.10);
  --soft-fill: rgba(16,19,35,.015);
  --soft-fill-2: rgba(16,19,35,.025);
}

/* ====== Réponses (boutons choix) : plus compact + moins gras ====== */
.il-choices{ gap: 10px; }

.il-choice{
  min-height: 48px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;

  border: 1px solid var(--fine-line) !important;
  background: #fff !important;

  font-weight: 800 !important;
  font-size: 15px !important;

  box-shadow: none !important;
}

.il-choice:hover{
  background: var(--soft-fill-2) !important;
  border-color: rgba(16,19,35,.16) !important;
  box-shadow: 0 10px 22px rgba(16,19,35,.05) !important;
}

/* Selected : léger, net, sans “gros halo” */
.il-choice.is-selected{
  border-color: rgba(23,160,81,.32) !important;
  background: rgba(23,160,81,.06) !important;
  box-shadow: 0 14px 26px rgba(23,160,81,.10) !important;
}

.il-choice.is-selected::after{
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
  background: rgba(23,160,81,.12) !important;
}

/* ====== Inputs / Select / Textarea : fine border grise claire ====== */
.il-input,
.il-select,
.il-textarea{
  border: 1px solid var(--fine-line-2) !important;
  background: rgba(255,255,255,.96) !important;
  border-radius: 14px !important;
  padding: 11px 12px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.il-input:hover,
.il-select:hover,
.il-textarea:hover{
  border-color: rgba(16,19,35,.16) !important;
}

.il-input:focus,
.il-select:focus,
.il-textarea:focus{
  border-color: rgba(23,160,81,.38) !important;
  box-shadow: 0 0 0 3px rgba(23,160,81,.10) !important;
}

/* Placeholder un peu plus discret */
.il-devis ::placeholder{
  color: rgba(16,19,35,.40) !important;
}

/* Labels secondaires un cran plus fins */
.il-field .il-label{
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: rgba(16,19,35,.62) !important;
}

/* Question principale : un peu moins énorme */
.il-step > .il-label{
  font-size: 17px !important;
  font-weight: 900 !important;
}

/* Séparateur optionnel : plus léger */
.il-field{
  border-top-color: rgba(16,19,35,.10) !important;
}

/* ====== Boutons actions : un peu moins “brique” ====== */
.il-devis__actions .il-btn{
  min-height: 46px !important;
  border-radius: 14px !important;
}

.il-devis__actions [data-il-devis-next],
.il-devis__actions [data-il-devis-submit]{
  box-shadow: 0 14px 22px rgba(23,160,81,.12) !important;
}

/* Mobile très petit : encore plus compact */
@media (max-width: 420px){
  .il-choice{
    min-height: 46px !important;
    font-size: 14.5px !important;
  }
}


/* ======================================================
   PATCH — Checkboxes vertes (branding Iliade)
   Remplace le bleu natif par le vert brand
   ====================================================== */

/* Reset apparence native */
.il-devis input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(16,19,35,.28);
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition:
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

/* Hover */
.il-devis input[type="checkbox"]:hover{
  border-color: rgba(23,160,81,.45);
}

/* Checked = vert */
.il-devis input[type="checkbox"]:checked{
  background: var(--brand-green, #17A051);
  border-color: var(--brand-green, #17A051);
  box-shadow: 0 6px 14px rgba(23,160,81,.25);
}

/* Check icon */
.il-devis input[type="checkbox"]:checked::before{
  content: "✓";
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

/* Focus clavier (a11y) */
.il-devis input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(23,160,81,.18);
}

/* Ligne sélectionnée : léger fond vert (déjà propre mais on harmonise) */
.il-check:has(input[type="checkbox"]:checked){
  background: rgba(23,160,81,.06) !important;
  border-color: rgba(23,160,81,.22) !important;
}

/* ======================================================
   PATCH — Consent mobile (case + texte full width + lien à la ligne)
   ====================================================== */

.il-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;              /* autorise retour à la ligne */
  width: 100%;
}

/* la case ne doit pas rétrécir */
.il-consent input[type="checkbox"]{
  flex: 0 0 auto;
  margin-top: 3px;
}

/* le texte prend toute la largeur restante */
.il-consent{
  line-height: 1.35;
}

/* Sur mobile : le lien passe sous le texte */
@media (max-width: 520px){
  .il-consent a{
    display: block;             /* force une nouvelle ligne */
    width: 100%;
    margin-left: calc(18px + 10px); /* aligne sous le texte (case + gap) */
    margin-top: 4px;
    white-space: normal;
  }
}



/* =========================
   Popup confirmation (Devis)
   ========================= */
.il-devis-pop{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.il-devis-pop.is-open{ display: block; }

.il-devis-pop__overlay{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
}

.il-devis-pop__panel{
  position: relative;
  width: min(520px, calc(100% - 28px));
  margin: 10vh auto 0;
  background: #fff;
  border: 1px solid rgba(230,234,240,1);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(16,19,35,.20);
  padding: 18px 18px 16px;
}

.il-devis-pop__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(23,160,81,.12);
  border: 1px solid rgba(191,232,209,1);
  color: #17A051;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 26px;
}

.il-devis-pop__title{
  margin-top: 12px;
  font-weight: 900;
  font-size: 18px;
  color: #0F172A;
}

.il-devis-pop__text{
  margin-top: 8px;
  color: #475467;
  line-height: 1.6;
  font-size: 14px;
  background: #ECFDF3;
  border: 1px solid #BFE8D1;
  border-radius: 14px;
  padding: 10px 12px;
}

.il-devis-pop__actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.il-devis-pop-lock{ overflow: hidden; }