/* ==========================================================================
   Edabos — Contact
   Vient après style.css : réutilise ses tokens (couleurs, radius, ombres,
   .btn, .badge, .qa, .panel). Ce fichier ne couvre que les composants
   inédits à cette page : le hero court, la grille formulaire + canaux,
   les champs, et la bande « ce qui se passe ensuite ».
   Breakpoints identiques au reste du site : >=1440 / 810-1439 / <810.
   ========================================================================== */

/* --------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------- */
.ct-hero{padding:168px 0 92px}
.ct-hero .badge{margin-bottom:22px}
.ct-hero .h1{max-width:720px;margin-bottom:20px}
.ct-hero .lead{max-width:620px;margin-bottom:30px}

/* Réponse sous 24 h ouvrées — pastille de réassurance */
.ct-hero__note{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:36px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.9);
  font-family:Geist,sans-serif;font-size:13.5px;font-weight:500;color:#3d3e42;
}
.ct-hero__note i{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:#31c56a;box-shadow:0 0 0 3px rgba(49,197,106,.22);
}

/* Boutons du CTA final (même règle que sur la page accompagnement, reprise
   ici pour que cette page ne dépende pas de accompagnement.css). */
.cta-final__actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

/* --------------------------------------------------------------
   2. Grille principale : formulaire + canaux directs
   -------------------------------------------------------------- */
.ct-main{padding:96px 0 110px}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start;text-align:left}

/* --------------------------------------------------------------
   3. Formulaire
   -------------------------------------------------------------- */
.cform{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:34px 34px 30px;
  display:flex;flex-direction:column;gap:20px;
}
.cform__head{display:flex;flex-direction:column;gap:6px;margin-bottom:2px}
.cform__title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:24px;letter-spacing:-.5px;color:var(--ink)}
.cform__sub{font-size:14px;line-height:1.6;color:var(--ink-soft)}

.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfield{display:flex;flex-direction:column;gap:7px;min-width:0}
.cfield__label{
  font-family:Geist,sans-serif;font-size:13.5px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:5px;
}
.cfield__label em{font-style:normal;font-weight:500;color:var(--ink-mute)}
.cfield__hint{font-size:12.5px;line-height:1.5;color:var(--ink-mute)}

.cfield input[type=text],
.cfield input[type=email],
.cfield input[type=tel],
.cfield input[type=url],
.cfield select,
.cfield textarea{
  width:100%;
  border-radius:12px;
  border:1px solid #dfe1e5;
  background:#fff;
  padding:0 14px;
  font-family:Geist,sans-serif;font-size:15px;color:var(--ink);
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
.cfield input,.cfield select{height:48px}
.cfield textarea{padding:13px 14px;line-height:1.55;min-height:148px;resize:vertical}
.cfield input::placeholder,.cfield textarea::placeholder{color:#9a9ca2}

.cfield input:hover,.cfield select:hover,.cfield textarea:hover{border-color:#c6c9ce}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{
  border-color:#111;box-shadow:0 0 0 3px rgba(17,17,26,.08);
}
/* Erreur signalée uniquement après une tentative d'envoi */
.cform.is-checked :invalid{border-color:#e0655d;box-shadow:0 0 0 3px rgba(224,101,93,.12)}
/* La case à cocher n'a pas de bordure : on la signale par un contour */
.cform.is-checked input[type=checkbox]:invalid{outline:2px solid #e0655d;outline-offset:2px;box-shadow:none}

/* Flèche du <select> (aucune image : dégradés CSS) */
.cfield select{
  padding-right:40px;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,#5c5d61 50%),
    linear-gradient(135deg,#5c5d61 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

/* Piège à robots : invisible pour l'utilisateur, rempli par les scripts */
.cform__trap{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

.cform__consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.cform__consent input{
  width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:#111;cursor:pointer;
}
.cform__consent span{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.cform__consent a{text-decoration:underline;text-underline-offset:2px}

.cform__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cform__submit{--btn-h:52px;padding:0 30px}

/* Message d'état (succès / erreur), rendu par contact.js */
.cform__status{
  display:none;gap:11px;align-items:flex-start;
  padding:15px 17px;border-radius:14px;
  font-size:14px;line-height:1.55;
}
.cform__status.is-shown{display:flex}
.cform__status.is-ok{background:#eefaf1;border:1px solid #cdeed8;color:#1d6b3a}
.cform__status.is-ko{background:#fdf1f0;border:1px solid #f6d5d2;color:#a3382f}
.cform__status svg{width:18px;height:18px;flex:none;margin-top:1px}

/* --------------------------------------------------------------
   4. Colonne de droite : canaux directs
   -------------------------------------------------------------- */
.cside{display:flex;flex-direction:column;gap:14px;position:sticky;top:104px}
.cway{
  display:flex;align-items:flex-start;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:18px 18px;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
a.cway:hover{border-color:#c3c6cb;transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.cway__ico{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--grey-panel);color:#111;
  display:grid;place-items:center;
}
.cway__ico svg{width:18px;height:18px}
.cway__ico img{width:20px;height:20px}
.cway__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cway__title{font-family:Geist,sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.cway__value{font-size:14px;line-height:1.45;color:var(--ink);word-break:break-word}
.cway__text{font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* Encart horaires */
.chours{
  background:var(--grey-panel);border-radius:18px;padding:20px 20px;
  display:flex;flex-direction:column;gap:12px;
}
.chours__title{
  display:flex;align-items:center;gap:9px;
  font-family:Geist,sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);
}
.chours__title svg{width:16px;height:16px;flex:none;color:#111}
.chours__list{display:flex;flex-direction:column;gap:8px}
.chours__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:Geist,sans-serif;font-size:13.5px;color:var(--ink-soft);
}
.chours__list b{font-weight:600;color:var(--ink);white-space:nowrap}

/* --------------------------------------------------------------
   5. « Ce qui se passe ensuite » — 3 étapes
   -------------------------------------------------------------- */
#ensuite .h2{margin-bottom:52px}
.cnext{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.cnext__step{
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:30px 28px;display:flex;flex-direction:column;gap:12px;
}
.cnext__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:#121315;color:#fff;
  font-family:Geist,sans-serif;font-weight:600;font-size:14.5px;
}
.cnext__title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.4px;color:var(--ink)}
.cnext__text{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.cnext__delay{
  margin-top:auto;padding-top:12px;
  font-family:Geist,sans-serif;font-size:12.5px;font-weight:600;color:var(--ink-mute);
}

/* --------------------------------------------------------------
   6. Responsive — ordinateur portable / tablette (810–1439px)
   -------------------------------------------------------------- */
@media (max-width:1439.98px){
  .ct-hero{padding:146px 0 78px}
  .ct-main{padding:80px 0 90px}
  .ct-grid{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
  .cform{padding:28px 26px 26px}
  .cform__title{font-size:22px}
  .cnext{gap:16px}
  .cnext__step{padding:26px 22px}
}

/* --------------------------------------------------------------
   7. Responsive — téléphone (<810px)
   -------------------------------------------------------------- */
@media (max-width:809.98px){
  .ct-hero{padding:114px 0 56px}
  .ct-hero .h1{max-width:340px}
  .ct-hero .lead{max-width:330px;margin-bottom:24px}
  .ct-hero__note{font-size:12.5px;padding:7px 12px}

  .ct-main{padding:56px 0 64px}
  /* Les canaux directs passent au-dessus du formulaire :
     sur téléphone, un appel ou un WhatsApp convertit mieux qu'un champ. */
  .ct-grid{grid-template-columns:1fr;gap:16px}
  .cside{position:static;order:-1;gap:12px}

  .cform{padding:22px 18px 22px;border-radius:20px}
  .cform__title{font-size:21px}
  .cform__row{grid-template-columns:1fr;gap:14px}
  /* 16px minimum : en dessous, iOS zoome au focus */
  .cfield input[type=text],
  .cfield input[type=email],
  .cfield input[type=tel],
  .cfield input[type=url],
  .cfield select,
  .cfield textarea{font-size:16px}
  .cfield select{background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px}
  .cform__submit{width:100%}
  .cform__foot{gap:12px}

  .cway{padding:15px 15px;border-radius:16px}
  .chours{padding:17px 16px;border-radius:16px}

  #ensuite .h2{margin-bottom:30px}
  .cnext{grid-template-columns:1fr;gap:14px}
  .cnext__step{padding:22px 20px}
  .cnext__delay{padding-top:8px}
}