/* ==========================================================================
   WebHopper · contact.css
   Sections propres a la page contact. Depend de tokens.css et base.css.
   ========================================================================== */

/* ---- En-tete ---- */
.contact-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(1.8rem,4vw,2.8rem)}
.contact-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,5.6vw,4.2rem);
  letter-spacing:-.03em;line-height:1.04;color:var(--charbon);max-width:15ch;margin:1.5rem 0}
.contact-lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink);max-width:58ch;line-height:1.7}
.contact-points{display:grid;gap:1rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--border-clair)}
@media(min-width:860px){.contact-points{grid-template-columns:repeat(3,1fr);gap:1.8rem}}
.contact-point{display:flex;gap:.8rem;align-items:flex-start;color:var(--charbon);font-weight:500;
  font-size:.98rem;line-height:1.5;max-width:34ch}
.contact-point svg{width:20px;height:20px;color:var(--ambre);flex-shrink:0;margin-top:2px}

/* ---- Grille formulaire + coordonnees ---- */
.contact-grid{display:grid;gap:clamp(1.6rem,3.5vw,2.6rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
@media(min-width:980px){.contact-grid{grid-template-columns:1.32fr .68fr;align-items:start}}

/* ---- Formulaire ---- */
.form-card{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-section);
  padding:clamp(1.5rem,3.5vw,2.6rem)}
.form-card h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.4rem,2.4vw,1.9rem);
  letter-spacing:-.02em;line-height:1.12;color:var(--charbon);margin-bottom:.6rem}
.fc-lead{color:var(--ink);font-size:.99rem;line-height:1.65;margin-bottom:1.9rem;max-width:52ch}

.f-duo{display:grid;gap:0}
@media(min-width:620px){.f-duo{grid-template-columns:1fr 1fr;gap:0 1.1rem}}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.field label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--charbon);line-height:1.3}
.field .opt{font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--pierre)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;color:var(--charbon);
  background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-btn);
  padding:13px 14px;width:100%;min-height:48px;transition:border-color .2s ease, box-shadow .2s ease}
.field textarea{min-height:158px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--pierre);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ambre);
  box-shadow:0 0 0 3px rgba(222,99,0,.18);outline:none}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1918' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}

.check{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.2rem}
.check input{width:20px;height:20px;min-height:0;flex-shrink:0;margin-top:2px;accent-color:var(--ambre);cursor:pointer}
.check label{font-family:var(--font-body);font-size:.94rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink);line-height:1.55;cursor:pointer}
.form-send{margin-top:.4rem}
.form-send .btn{width:100%;justify-content:center}
@media(min-width:620px){.form-send .btn{width:auto}}
.form-note{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--border-clair);
  display:flex;gap:.65rem;align-items:flex-start;color:var(--pierre);font-size:.89rem;line-height:1.6}
.form-note svg{width:16px;height:16px;color:var(--ambre);flex-shrink:0;margin-top:3px}

/* ---- Colonne de droite ---- */
.aside-card{background:linear-gradient(160deg,var(--blanc) 0%,var(--ambre-pale) 130%);
  border:1px solid var(--border-clair);border-radius:var(--r-section);padding:clamp(1.5rem,3vw,2.1rem)}
.aside-card + .aside-card{margin-top:1.4rem}
.aside-card h2{font-family:var(--font-display);font-weight:800;font-size:1.28rem;letter-spacing:-.015em;
  color:var(--charbon);margin-bottom:1.5rem}
.ci{display:flex;gap:.9rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--border-clair)}
.ci:first-of-type{padding-top:0}
.ci:last-child{border-bottom:0;padding-bottom:0}
.ci-icon{width:36px;height:36px;border-radius:var(--r-tag);background:var(--blanc);
  border:1px solid rgba(222,99,0,.4);color:var(--ambre);display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.ci-icon svg{width:17px;height:17px}
.ci-lbl{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--pierre);margin-bottom:.35rem;line-height:1}
.ci-val{color:var(--charbon);font-weight:600;font-size:1rem;line-height:1.4;word-break:break-word}
/* display:block indispensable : en inline, le margin-top est ignore et le texte
   se colle a la valeur qui precede. */
.ci-note{display:block;color:var(--ink);font-size:.9rem;line-height:1.55;margin-top:.4rem;font-weight:400}

.social{display:flex;gap:.7rem;margin-top:1.5rem}
.social a{width:46px;height:46px;border-radius:var(--r-tag);border:1px solid var(--border-clair);
  background:var(--blanc);display:flex;align-items:center;justify-content:center;color:var(--charbon);
  transition:border-color .2s ease, color .2s ease, transform .2s var(--ease)}
.social a:hover{border-color:var(--ambre);color:var(--ambre);transform:translateY(-2px)}
.social svg{width:19px;height:19px}

/* ---- Ce qui se passe ensuite ---- */
.next{display:grid;gap:0;counter-reset:etape}
.next li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:1rem 0;border-bottom:1px solid var(--border-clair)}
.next li:first-child{padding-top:0}
.next li:last-child{border-bottom:0;padding-bottom:0}
.next .nn{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;color:var(--ambre);
  padding-top:.2rem;line-height:1}
.next .nt{color:var(--ink);font-size:.96rem;line-height:1.6}

/* ---- Portrait de la colonne de droite ----
   Un visage juste a cote du formulaire : le visiteur voit a qui il ecrit. */
.contact-photo{margin:0 0 1.4rem}
.contact-photo img{width:100%;height:auto;display:block;border-radius:var(--r-section);
  border:1px solid var(--border-clair)}
.contact-photo figcaption{margin-top:.85rem;display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--charbon);line-height:1.4}
.contact-photo figcaption::before{content:"";width:20px;height:2px;background:var(--ambre);flex-shrink:0}