/* LA PAGE CONTACT.

   Avant : un haut de page, puis le MÊME bandeau de contact que les seize autres
   pages. Le formulaire y avait l'air d'un pied de page. Ici c'est la pièce
   centrale : elle est sombre, pleine largeur, et le formulaire y est posé sur
   un panneau à lui.

   Le formulaire n'est pas écrit dans cette page : c'est la prise du module
   Sillon (Administration → Formulaires, emplacement « contact »). Le thème
   n'habille que ce que le module rend — d'où les classes en « s-form- ». */

body{background:var(--aio-ivory,#f8f5ed)}

/* ── le haut de page ────────────────────────────────────────────────────── */
.contact-hero{padding:104px 5.3% 70px;max-width:1520px;margin:auto;text-align:center}
.contact-hero .eyebrow{display:block}
.contact-hero h1{font-size:clamp(36px,4.6vw,70px);line-height:1.06;letter-spacing:-.05em;margin:16px auto 0}
.contact-hero h1 em{font-style:normal;color:var(--aio-orange,#ff7526)}
.contact-lead{font-size:19px;line-height:1.62;max-width:720px;margin:30px auto 0;color:#3d5257}
.contact-direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:56px auto 0;
  border-top:1px solid #12546926;padding-top:30px;max-width:980px;text-align:center}
.contact-direct a,.contact-direct-lieu{display:grid;gap:7px;text-decoration:none;color:inherit;justify-items:center}
.contact-direct span{font-size:11px;letter-spacing:.15em;font-weight:700;color:#7d8f93}
.contact-direct strong{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.contact-direct a:hover strong{color:var(--aio-orange,#ff7526)}

/* ── la pièce centrale : le formulaire ──────────────────────────────────── */
.contact-piece{background:var(--aio-ink,#101719);color:var(--aio-ivory,#f8f5ed);
  padding:110px 5.3% 120px;
  display:grid;grid-template-columns:1fr 1.25fr;gap:7%;align-items:start}
.contact-piece .eyebrow{color:#ff9d63}
.contact-piece h2{font-size:clamp(34px,3.9vw,58px);line-height:1.04;letter-spacing:-.05em;margin-bottom:40px}
.contact-piece h2 em{font-style:normal;color:var(--aio-orange,#ff7526)}
.contact-etapes{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.contact-etapes li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  border-top:1px solid #f8f5ed24;padding-top:20px}
.contact-etapes li>span{font-size:22px;font-weight:700;color:var(--aio-orange,#ff7526);letter-spacing:-.03em}
.contact-etapes strong{display:block;font-size:17px;margin-bottom:6px}
.contact-etapes p{font-size:15px;line-height:1.6;color:#c3d2d4;margin:0}

/* le panneau qui porte le formulaire : c'est lui qui dit « c'est ici » */
.contact-piece-formulaire{background:#16262c;border:1px solid #ffffff14;border-radius:26px;
  padding:38px 38px 34px;box-shadow:0 30px 70px rgba(4,12,15,.35)}

/* ── ce que rend le module, habillé ─────────────────────────────────────── */
.s-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;margin:0}
.s-form-champ--plein,.s-form-actions,.s-form-succes,.s-form-erreur{grid-column:1/-1}
.s-form-champ{display:grid;gap:8px;align-content:start;min-width:0}
.s-form-label{font-size:13px;letter-spacing:.03em;font-weight:700;color:#cfe0e2}
.s-form-obligatoire{color:var(--aio-orange,#ff7526)}
.s-form-aide{font-size:12.5px;line-height:1.5;color:#8ea3a7}
.s-form-input,.s-form-textarea{width:100%;font:inherit;font-size:15px;color:var(--aio-ivory,#f8f5ed);
  background:#0e1b20;border:1px solid #ffffff1f;border-radius:12px;padding:13px 15px;
  outline:none;transition:border-color .22s,background .22s}
.s-form-textarea{min-height:132px;max-height:280px;resize:vertical;line-height:1.5;display:block}
.s-form-input::placeholder,.s-form-textarea::placeholder{color:#7d9296}
.s-form-input:focus,.s-form-textarea:focus{border-color:var(--aio-orange,#ff7526);background:#122229;
  box-shadow:0 0 0 2px #ff752633}

/* les choix en pastilles : jamais de liste déroulante */
.s-form-groupe{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.s-form-groupe .s-form-label{flex:1 0 100%;margin-bottom:2px}
.s-form-option{display:inline-flex;align-items:center;gap:0;cursor:pointer}
.s-form-option .s-form-coche{position:absolute;opacity:0;width:0;height:0}
.s-form-option-texte{display:inline-block;padding:10px 16px;border-radius:30px;font-size:14px;
  border:1px solid #ffffff26;color:#d5e3e5;transition:background .2s,border-color .2s,color .2s}
.s-form-option:hover .s-form-option-texte{border-color:#ffffff4d}
.s-form-option .s-form-coche:checked+.s-form-option-texte{background:var(--aio-orange,#ff7526);
  border-color:var(--aio-orange,#ff7526);color:var(--aio-ink,#101719);font-weight:700}
.s-form-option .s-form-coche:focus-visible+.s-form-option-texte{outline:2px solid var(--aio-orange,#ff7526);outline-offset:3px}

.s-form-consentement{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:13.5px;line-height:1.55;color:#b7c8ca;cursor:pointer}
.s-form-consentement .s-form-coche{width:20px;height:20px;margin:1px 0 0;accent-color:var(--aio-orange,#ff7526)}
.s-form-consentement-lien{color:var(--aio-orange,#ff7526)}

.s-form-actions{margin:6px 0 0}
.s-form-submit{font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  background:var(--aio-orange,#ff7526);color:var(--aio-ink,#101719);border:0;border-radius:40px;
  padding:16px 30px;transition:transform .2s,filter .2s}
.s-form-submit:hover{transform:translateY(-2px);filter:brightness(1.06)}
.s-form-succes,.s-form-erreur{font-size:15px;line-height:1.55;padding:14px 18px;border-radius:14px;margin:0}
.s-form-succes{background:#1d3a32;border:1px solid #5fd6a5;color:#d8f5e8}
.s-form-erreur{background:#3a1d1d;border:1px solid #e2795f;color:#f8dcd4}
.contact-secours{display:grid;gap:12px;font-size:16px;line-height:1.6}
.contact-secours-lien{color:var(--aio-orange,#ff7526);font-weight:700}

/* ── les réseaux ────────────────────────────────────────────────────────── */
/* LES RÉSEAUX SUR UNE SEULE LIGNE : dans une colonne d'une grille à deux,
   les cinq icônes se cassaient en 3 + 2. La section passe en pleine largeur,
   titre centré au-dessus, les cinq alignés en dessous. */
.contact-autrement{padding:96px 5.3%;max-width:1520px;margin:auto;display:block;text-align:center}
.contact-autrement-tete{max-width:760px;margin:auto}
.contact-autrement h2{font-size:clamp(30px,3.2vw,46px);letter-spacing:-.045em;line-height:1.05}
.contact-autrement-tete p:not(.eyebrow){margin:20px auto 0;font-size:17px;line-height:1.62;color:#3d5257;max-width:620px}
.contact-reseaux{list-style:none;margin:40px auto 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:940px}
.contact-reseaux a{display:flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;color:inherit;
  padding:18px 20px;border:1px solid #12546929;border-radius:18px;background:#ffffff8c;
  transition:border-color .22s,transform .22s,background .22s}
.contact-reseaux a:hover{border-color:var(--aio-orange,#ff7526);transform:translateY(-3px);background:#fff}
.contact-reseaux svg{width:22px;height:22px;flex:none;fill:var(--aio-petrol,#125469)}
.contact-reseaux a:hover svg{fill:var(--aio-orange,#ff7526)}
.contact-reseaux span{font-size:15px;font-weight:700;letter-spacing:-.01em}

/* ── la foire aux questions ─────────────────────────────────────────────── */
.contact-faq{padding:20px 5.3% 130px;max-width:1520px;margin:auto;
  display:grid;grid-template-columns:1fr 1.35fr;gap:6%;align-items:start}
.contact-faq h2{font-size:clamp(30px,3.4vw,50px);letter-spacing:-.05em;line-height:1.04}
.contact-faq h2 em{font-style:normal;color:var(--aio-orange,#ff7526)}
.faq-liste{display:grid}
.faq-item{border-top:1px solid #12546926}
.faq-item:last-child{border-bottom:1px solid #12546926}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
  padding:26px 0;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"";flex:none;margin-left:auto;width:16px;height:16px;
  background:linear-gradient(var(--aio-petrol,#125469),var(--aio-petrol,#125469)) center/16px 2px no-repeat,
             linear-gradient(var(--aio-petrol,#125469),var(--aio-petrol,#125469)) center/2px 16px no-repeat;
  transition:transform .3s ease,background-color .2s}
.faq-item[open] summary:after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--aio-orange,#ff7526)}
.faq-item p{margin:0 0 28px;padding-right:8%;font-size:16.5px;line-height:1.7;color:#3d5257;max-width:70ch}
.faq-item[open] p{animation:faq-ouvre .35s ease both}
@keyframes faq-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  .contact-piece,.contact-faq{grid-template-columns:1fr;gap:38px}
  .contact-reseaux{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-piece{padding:70px 6% 80px}
  .contact-piece h2{margin-bottom:28px}
}
@media(max-width:700px){
  .contact-hero{padding:115px 6% 60px}
  .contact-direct{grid-template-columns:1fr;gap:22px}
  .s-form{grid-template-columns:1fr}
  .contact-piece-formulaire{padding:26px 22px 24px;border-radius:20px}
  .contact-autrement,.contact-faq{padding-left:6%;padding-right:6%}
}
@media(prefers-reduced-motion:reduce){.faq-item[open] p{animation:none}.faq-item summary:after{transition:none}}