/* ============================================================
   ALOÉ BIEN-ÊTRE - contact.css
   Chargé par contact.php : formulaire, coordonnées, carte, FAQ.
   ============================================================ */

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--white);border:1px solid #eaeaea;border-radius:10px;margin-bottom:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--fl-green-lime);box-shadow:0 10px 26px rgba(45,90,39,.08)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:bold;color:var(--fl-green-dark);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--fl-green-lime);font-size:.85rem;transition:transform .3s}
.faq details[open] summary::after{content:"\f068"}
.faq .faq-a{padding:0 22px 20px;color:var(--muted);font-size:.96rem}

/* ---------- Formulaire ---------- */
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;background:var(--bg-light);padding:44px;border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-method{display:flex;align-items:center;gap:15px;margin-bottom:18px;font-weight:bold}
.contact-method i{font-size:1.4rem;color:var(--fl-green-lime);width:28px}
.form{display:flex;flex-direction:column;gap:18px}
.form .field label{display:block;font-size:.85rem;font-weight:bold;color:var(--fl-green-dark);margin-bottom:6px}
.form .field input,.form .field select,.form .field textarea{width:100%;padding:14px;border:1px solid #cbd5e1;border-radius:8px;font-family:inherit;font-size:1rem;outline:none;background:#fff;transition:border-color .3s,box-shadow .3s}
.form .field input:focus,.form .field select:focus,.form .field textarea:focus{border-color:var(--fl-green-lime);box-shadow:0 0 0 3px rgba(140,198,63,.2)}
.form textarea{resize:vertical;min-height:120px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.consent input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--fl-green-lime)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:992px){
  .contact-wrap{grid-template-columns:1fr;gap:32px}
}
@media (max-width:768px){
  .contact-wrap{padding:26px 20px}
}

/* ============================================================
   PAGE CONTACT : note Google + carte Maps (colonne droite)
   ============================================================ */
.contact-aside{display:flex;flex-direction:column;gap:18px}
.gmb-rating{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid #e6ede1;border-radius:12px;padding:16px 20px;box-shadow:0 6px 18px rgba(45,90,39,.06)}
.map-embed{border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.10);border:1px solid #e6ede1;line-height:0}
.map-embed iframe{width:100%;height:300px;border:0;display:block}
.contact-directs{display:flex;flex-direction:column;gap:4px;background:var(--white);border:1px solid #e6ede1;border-radius:12px;padding:14px 20px}
.contact-directs .contact-method{margin-bottom:0;padding:8px 0}
@media (max-width:992px){
  .map-embed iframe{height:260px}
}

/* Titre colonne contact */
.aside-title{font-size:1.15rem;color:var(--fl-green-dark);margin-bottom:8px}

/* Lien avis Google (sans note) */
.gmb-link{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:bold;color:var(--fl-green-dark);font-size:.95rem}
.gmb-link i{color:#4285F4;font-size:1.2rem}
.gmb-link:hover{color:var(--fl-green-lime)}

/* ---------- Messages d'erreur du formulaire ---------- */
.form-erreur{border-left-color:#d9534f;background:#fdecea;color:#a12a20;margin:0 0 20px}
.field-erreur{margin:6px 0 0;font-size:.82rem;font-weight:bold;color:#a12a20}
.form .field .est-en-erreur,.form .est-en-erreur{border-color:#d9534f;background:#fffafa}
.form button[disabled]{opacity:.7;cursor:progress}

/* ---------- Badge reCAPTCHA ---------- */
/* Google le place en bas à droite, là où se trouve déjà le bouton WhatsApp :
   on le passe à gauche. Ses styles sont écrits en ligne par le script Google,
   d'où le !important. Réduit au logo, il se déplie vers la droite au survol. */
.grecaptcha-badge{left:14px!important;right:auto!important;width:70px!important;transition:width .3s ease!important}
.grecaptcha-badge:hover,.grecaptcha-badge:focus-within{width:256px!important}
@media (max-width:768px){
  /* au-dessus de la barre d'action fixée en bas (69 px) */
  .grecaptcha-badge{bottom:80px!important}
}

/* ---------- Carte Google Maps en attente de consentement ---------- */
/* L'aperçu occupe exactement la place de la carte, pour qu'aucun contenu ne
   saute au moment où l'iframe est insérée. */
.map-placeholder{line-height:1.5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:300px;padding:24px;border:0;cursor:pointer;text-align:center;font-family:inherit;background:linear-gradient(135deg,#eef3ea,#dfe9d8);color:var(--fl-green-dark);transition:background .3s}
.map-placeholder:hover{background:linear-gradient(135deg,#e6efe0,#d5e2cb)}
.map-placeholder i{font-size:2rem;color:var(--fl-green-lime)}
.map-titre{font-family:'Arial Black',Arial,sans-serif;font-size:1rem}
.map-note{font-size:.8rem;color:var(--muted);max-width:280px;line-height:1.4}
@media (max-width:992px){
  .map-placeholder{height:260px}
}

/* Lien de secours quand le script est indisponible : sans lui, l'apercu de
   carte ne menerait nulle part. */
.map-lien{display:block;padding:12px 20px;text-align:center;font-size:.88rem;font-weight:bold;color:var(--fl-green-dark);background:var(--white);border-top:1px solid #e6ede1;line-height:1.5}
.map-lien:hover{color:var(--fl-green-lime)}

/* Le bandeau de consentement recouvre le coin bas gauche : on remonte le
   badge reCAPTCHA tant qu'il est affiché. */
body.a-bandeau-cookies .grecaptcha-badge{bottom:110px!important}
@media (max-width:600px){
  body.a-bandeau-cookies .grecaptcha-badge{bottom:250px!important}
}