/* ============================================================
   CONTACT LAYOUT
   ============================================================ */
.wrapper-contact {
    padding: 60px 0 60px;
    position: relative;
    background-image: url(../images/bg/bg-services.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}
.contact-grid{display:grid;grid-template-columns:1fr .62fr;gap:44px;align-items:flex-start;margin-bottom: 40px;}

/* ---------- Form card ---------- */
.form-card{
  background:#fff;border:1px solid var(--white-line);border-radius:22px;padding:44px;position:relative;overflow:hidden;
}
.form-card .step-motif{position:absolute;top:28px;right:32px;opacity:.5;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:13px;font-weight:700;color:var(--primary-color);}
.field label .req{color:var(--second-color);}
.field input,.field select,.field textarea{
  border:1.5px solid var(--white-line);border-radius:11px;padding:13px 16px;font-family:var(--font-body);
  font-size:14px;color:var(--black-color);background:var(--white-fog);transition:border-color .3s,background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--second-color);background:#fff;
}
.field textarea{resize:vertical;min-height:120px;}
.field-consent{display:flex;align-items:flex-start;gap:10px;margin:22px 0 26px;}
.field-consent input{margin-top:3px;}
.field-consent label{font-size:12.5px;color:var(--color-grey);}
.form-note{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--color-grey);}
.form-note i{color:#2FAE64;}

/* ---------- Sidebar ---------- */
.contact-sidebar{position: relative;display:flex;flex-direction:column;gap:16px;}
.quick-method{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 10px 20px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--white-line);
  transition:.3s;
  z-index: 1;
}
.quick-method:hover{border-color: var(--second-color);transform:translateX(4px);}
.quick-method .qi{
  flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
}
.quick-method.phone .qi{background:var(--second-color);}
.quick-method.whatsapp .qi{background:#25D366;}
.quick-method.email .qi{background:var(--primary-color);}
.quick-method .ql{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-grey);font-family:var(--font-mono);}
.quick-method strong{display:block;font-size:15px;color:var(--primary-color);margin:2px 0;}
.quick-method span{font-size:12px;color:var(--color-grey);}

.info-panel{
  background:var(--primary-color);
  color:#fff;
  border-radius:18px;
  padding: 20px 30px;
  margin-top:6px;
}
.info-row{display:flex;gap:14px;padding: 12px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.info-row:last-of-type{border-bottom:none;}
.info-row .ii{color:var(--second-color-light);font-size:15px;margin-top:2px;}
.info-row .il{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#9494B8;font-family:var(--font-mono);}
.info-row strong{display:block;font-size:14.5px;margin-top:3px;}
.info-social{display:flex;gap:10px;margin-top: 15px;}
.info-social a{
  width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13px;transition:.3s;
}
.info-social a:hover{background:var(--second-color);}


/* ============================================================
   MAP
   ============================================================ */
.map-wrap{position:relative;border-radius:22px;overflow:hidden;height:420px;border:1px solid var(--white-line);}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02);}
.map-card{
  position:absolute;bottom:24px;left:24px;background:#fff;border-radius:16px;padding:22px 24px;
  box-shadow:0 20px 40px -16px rgba(27,20,100,.28);max-width:260px;
}
.map-card .mi{
  width:38px;height:38px;border-radius:10px;background:var(--second-color);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:15px;margin-bottom:12px;
}
.map-card strong{display:block;font-size:15px;color:var(--primary-color);}
.map-card span{font-size:12.5px;color:var(--color-grey);}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
/* ── La colonne de gauche : photo + identité + contacts directs ───────────── */
/* Une image seule ne dit rien. Ici on met un visage, un nom, et le moyen de
   joindre cette personne : la FAQ devient une conversation, pas une liste. */
.se-faq-wrap {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 44px; align-items: start;
}
.wrapper-fog {
    position: relative;
    padding: 60px 0 120px;
}
.wrapper-fog::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/bg/services-bg.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    pointer-events: none;
}

.wrap-faq {
    display: flex;
    gap: 45px;
}
.fq-aside {position: relative;width: 30%;}

.fq-photo {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 18px 44px rgba(10,14,31,.14);
}
.fq-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le voile : il porte le nom sans écraser le visage */
.fq-photo-voile {
  position: absolute; inset: auto 0 0 0; height: 52%;
  background: linear-gradient(0deg, rgba(10,14,31,.9) 12%, rgba(10,14,31,.4) 52%, transparent);
}
.fq-photo-id {position: absolute;left: 20px;right: 20px;bottom: 18px;margin-bottom: 20px;}
.fq-photo-nom {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2;
}
.fq-photo-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--second-color-light);
  margin-top: 3px;
}
/* La bulle chevauche la photo et la carte : elle fait le lien */
.fq-bulle {
  position: absolute;
  right: -13px;
  top: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--second-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 10px 28px rgba();
  z-index: 2;
}
.fq-bulle::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(242, 101, 3, .40);
  animation: fq-pulse 2.4s infinite;
}
@keyframes fq-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.42); opacity: 0; }
}

.fq-carte {
  margin-top: -22px; margin-left: 18px; margin-right: -8px;
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 16px; padding: 26px 20px 18px;
  box-shadow: 0 12px 34px rgba(10,14,31,.08);
}
.fq-carte .fq-carte-p {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.55;
  margin: 0 0 16px;
}
.fq-carte-contacts { display: grid; gap: 8px; }
.fq-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--se-gray-50);
  border: 1px solid transparent;
  text-decoration: none; transition: all .18s;
}
.fq-contact:hover {
  background: #fff; border-color: rgba(230,57,70,.3);
  transform: translateX(3px);
}
.fq-contact-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(242, 101, 3, .10);
  color: var(--second-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all .18s;
}
.fq-contact:hover .fq-contact-ic {background: var(--second-color);color: #fff;}
.fq-contact-wa .fq-contact-ic { background: rgba(37,211,102,.12); color: #25D366; }
.fq-contact-wa:hover { border-color: rgba(37,211,102,.4); }
.fq-contact-wa:hover .fq-contact-ic { background: #25D366; color: #fff; }
.fq-contact-l {
  display: block; font-size: 10.5px; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .5px;
}
.fq-contact-v {
  display: block; font-family: var(--font-heading);
  font-size: 13.5px; font-weight: 700; color: var(--se-ink); margin-top: 1px;
}



.faq-list{max-width: 800px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{background:#fff;border:1px solid var(--white-line);border-radius:14px;overflow:hidden;transition:border-color .3s;}
.faq-item.open{border-color: var(--second-color);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;cursor:pointer;
}
.faq-q h4{font-size:15.5px;color:var(--primary-color);font-weight:700;}
.faq-plus{
  flex:none;width:30px;height:30px;border-radius:9px;background:var(--white-fog);display:flex;align-items:center;
  justify-content:center;color:var(--primary-color);font-size:13px;transition:transform .35s var(--ease),background .3s,color .3s;
}
.faq-item.open .faq-plus{background:var(--second-color);color:#fff;transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a-inner{padding:0 26px 24px;font-size:14px;color:var(--color-grey);}