/* ==========================================================================
   PAGE CONTACT
   Deux volets côte à côte : le formulaire posé sur une carte claire, et à
   droite une photo sur laquelle empiète une carte sombre portant les
   coordonnées. Le décalage entre les deux crée la profondeur ; il disparaît
   sur les largeurs réduites, où les volets s'empilent.
   ========================================================================== */

/* Le conteneur Elementor qui porte le shortcode ne doit rien contraindre :
   la section gère elle-même sa largeur et ses marges. */
.sm-ct-host,
.sm-ct-host > .e-con-inner,
.sm-ct-host .elementor-widget-shortcode,
.sm-ct-host .elementor-widget-container{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}

.sm-ct{
  --sm-ct-radius:26px;
  position:relative;
  display:block;
  width:100%;
  /* l'en-tête flotte au-dessus du contenu : on lui laisse la place */
  padding:clamp(130px,14vw,180px) 0 clamp(72px,8vw,110px);
}

/* voile décoratif derrière le volet gauche */
.sm-ct::before{
  content:"";
  position:absolute;
  inset:0 38% 0 0;
  background:
    radial-gradient(60% 70% at 18% 22%, rgba(94,96,205,.10), transparent 70%),
    var(--sm-paper);
  pointer-events:none;
}

.sm-ct__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:0;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
}

/* --------------------------------------------------------------------------
   Volet gauche : intitulé et formulaire
   -------------------------------------------------------------------------- */
.sm-ct__panel{
  position:relative;
  z-index:2;
  background:#fff;
  border:1px solid var(--sm-line);
  border-radius:var(--sm-ct-radius);
  padding:clamp(30px,4vw,52px);
  box-shadow:0 40px 90px -50px rgba(16,17,39,.42);
}

.sm-ct__kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sm-brand);
}
.sm-ct__kicker::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--sm-brand);
}

.sm-ct__h1{
  margin:0 0 14px;
  font-size:clamp(30px,4vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--tc-title);
}
.sm-ct__h1 em{
  font-style:normal;
  color:var(--sm-brand);
}

.sm-ct__lede{
  margin:0 0 30px;
  max-width:46ch;
  font-size:16.5px;
  line-height:1.65;
  color:var(--tc-text);
}

/* --------------------------------------------------------------------------
   Volet droit : photo et carte des coordonnées
   -------------------------------------------------------------------------- */
/* La carte des coordonnées n'est pas posée en absolu : elle est placée dans le
   flux du bloc photo, aligné en bas à droite. Le bloc s'adapte donc toujours à
   sa hauteur et la carte ne peut jamais déborder sur le fond de la page. */
.sm-ct__aside{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:560px;
  padding:clamp(16px,3vw,34px);
  border-radius:var(--sm-ct-radius);
  overflow:hidden;
  /* la carte de gauche mord sur la photo */
  margin-left:-56px;
}
.sm-ct__photo{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* la fenêtre de recadrage remonte : un cadrage centré coupe les visages,
     qui se trouvent dans le tiers supérieur de l'image */
  object-position:center 38%;
  display:block;
}
/* la photo est assombrie côté carte pour que le texte tienne */
.sm-ct__aside::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(105deg,rgba(8,9,28,.55) 0%,rgba(8,9,28,.12) 46%,transparent 78%);
}

.sm-ct__info{
  position:relative;
  z-index:2;
  width:min(360px,100%);
  background:rgba(12,14,38,.90);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(160,168,255,.20);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.75);
}

.sm-ct__row{
  padding:22px clamp(18px,2.4vw,26px);
}
.sm-ct__row + .sm-ct__row{
  border-top:1px solid rgba(160,168,255,.16);
}

.sm-ct__label{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff;
}
.sm-ct__label svg{
  width:19px;
  height:19px;
  flex:none;
  stroke:var(--sm-brand-lift);
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sm-ct__value{
  margin:0;
  font-size:15.5px;
  line-height:1.55;
  color:rgba(226,229,255,.80);
}
.sm-ct__value a{
  color:rgba(226,229,255,.80);
  text-decoration:none;
  transition:color .25s var(--sm-e);
}
.sm-ct__value a:hover{color:#fff}
.sm-ct__value--todo{
  color:rgba(226,229,255,.45);
  font-style:italic;
}

/* rangée des réseaux */
.sm-ct__social{
  display:flex;
  gap:9px;
  margin-top:2px;
}
.sm-ct__social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(160,168,255,.22);
  background:rgba(255,255,255,.05);
  transition:background-color .28s var(--sm-e),border-color .28s var(--sm-e),transform .28s var(--sm-e);
}
.sm-ct__social a:hover{
  background:var(--sm-brand);
  border-color:var(--sm-brand);
  transform:translateY(-2px);
}
.sm-ct__social svg{
  width:18px;
  height:18px;
  fill:rgba(226,229,255,.85);
}
.sm-ct__social a:hover svg{fill:#fff}

/* --------------------------------------------------------------------------
   Formulaire MetForm : on l'habille aux couleurs de la maison
   -------------------------------------------------------------------------- */
.sm-ct__panel .mf-input-wrapper{margin-bottom:16px}

.sm-ct__panel .mf-input,
.sm-ct__panel input[type=text],
.sm-ct__panel input[type=email],
.sm-ct__panel input[type=tel],
.sm-ct__panel textarea,
.sm-ct__panel select{
  width:100%;
  border:1px solid var(--sm-line) !important;
  border-radius:13px !important;
  background:#FBFBFE !important;
  padding:14px 16px !important;
  font-size:15px;
  color:var(--tc-title);
  transition:border-color .25s var(--sm-e),box-shadow .25s var(--sm-e),background-color .25s var(--sm-e);
}
.sm-ct__panel textarea{min-height:132px;resize:vertical}

.sm-ct__panel .mf-input:focus,
.sm-ct__panel input:focus,
.sm-ct__panel textarea:focus{
  outline:none;
  background:#fff !important;
  border-color:var(--sm-brand) !important;
  box-shadow:0 0 0 4px rgba(94,96,205,.14);
}
.sm-ct__panel ::placeholder{color:var(--sm-dim);opacity:1}

.sm-ct__panel .mf-input-label{
  display:block;
  margin-bottom:7px;
  font-size:13.5px;
  font-weight:600;
  color:var(--tc-title);
}

.sm-ct__panel button[type=submit],
.sm-ct__panel .mf-btn{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:99px;
  background:var(--sm-brand);
  color:#fff;
  font-size:15px;
  font-weight:600;
  padding:15px 30px;
  cursor:pointer;
  transition:transform .4s var(--sm-e),box-shadow .4s var(--sm-e),background-color .3s var(--sm-e);
}
.sm-ct__panel button[type=submit]:hover,
.sm-ct__panel .mf-btn:hover{
  background:var(--sm-brand-deep);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -14px rgba(94,96,205,.8);
}

/* case à cocher du consentement */
.sm-ct__panel .mf-input-wrapper input[type=checkbox]{
  width:auto;
  accent-color:var(--sm-brand);
  margin-right:8px;
}

/* messages de retour */
.sm-ct__panel .mf-response-message,
.sm-ct__panel .mf-error-message{
  border-radius:13px;
  padding:13px 16px;
  font-size:14.5px;
}

/* --------------------------------------------------------------------------
   Bande inférieure : réponse sous 24 h, courriel direct
   -------------------------------------------------------------------------- */
.sm-ct__foot{
  position:relative;
  max-width:1240px;
  margin:clamp(40px,6vw,72px) auto 0;
  padding-inline:clamp(16px,4vw,40px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
.sm-ct__card{
  background:#fff;
  border:1px solid var(--sm-line);
  border-radius:18px;
  padding:22px 24px;
}
.sm-ct__card h3{
  margin:0 0 6px;
  font-size:15.5px;
  color:var(--tc-title);
}
.sm-ct__card p{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--tc-text);
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .sm-ct__grid{grid-template-columns:1fr;gap:0}
  .sm-ct::before{inset:0}
  .sm-ct__aside{
    margin-left:0;
    margin-top:-30px;
    min-height:520px;
    padding-top:clamp(180px,30vw,240px);
  }
  .sm-ct__info{width:100%}
}

@media (max-width:600px){
  .sm-ct__aside{min-height:400px}
  .sm-ct__social a{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .sm-ct__social a,
  .sm-ct__panel button[type=submit]{transition:none}
}