/* ==========================================================================
   INVESTORAMA GROUP — Page CONTACT
   Blocs propres a la page. Tout ce qui sert ailleurs va dans components-v2.css
   (voir .ivr-phero / .ivr-form).
   ========================================================================== */
html { scroll-padding-block-start: calc(var(--ivr-header-h-scrolled) + var(--ivr-space-8)); }

/* --------------------------------------------------------------------------
   HERO — coordonnees calees en bas a gauche.
   La photo est en plein jour et le coin bas-gauche tombe sur un batiment, pas
   sur du ciel : le voile doit y etre nettement plus dense que sur les heros
   heure bleue, sinon le texte blanc devient illisible.
   -------------------------------------------------------------------------- */
.ivr-chero .ivr-phero__scrim {
  background:
    linear-gradient(
      to top,
      rgb(2 18 42 / 0.92) 0%,
      rgb(2 18 42 / 0.74) 32%,
      rgb(2 18 42 / 0.34) 66%,
      rgb(2 18 42 / 0.30) 100%
    ),
    linear-gradient(
      to right,
      rgb(2 18 42 / 0.70) 0%,
      rgb(2 18 42 / 0.30) 52%,
      rgb(2 18 42 / 0.12) 100%
    );
}

/* le degrade lateral est physique : le redeclarer en RTL */
[dir="rtl"] .ivr-chero .ivr-phero__scrim {
  background:
    linear-gradient(
      to top,
      rgb(2 18 42 / 0.92) 0%,
      rgb(2 18 42 / 0.74) 32%,
      rgb(2 18 42 / 0.34) 66%,
      rgb(2 18 42 / 0.30) 100%
    ),
    linear-gradient(
      to left,
      rgb(2 18 42 / 0.70) 0%,
      rgb(2 18 42 / 0.30) 52%,
      rgb(2 18 42 / 0.12) 100%
    );
}

/* ---- coordonnees ---- */
.ivr-coords {
  display: grid;
  gap: var(--ivr-space-6) var(--ivr-space-10);
  grid-template-columns: 1fr;
  margin: 0;
  margin-block-start: var(--ivr-space-6);
  padding-block-start: var(--ivr-space-8);
  border-block-start: var(--ivr-rule) solid rgb(255 255 255 / 0.24);
}

@media (min-width: 46rem) { .ivr-coords { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 68rem) {
  .ivr-coords { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}

.ivr-coords__item { display: grid; gap: var(--ivr-space-2); align-content: start; }

/* intitule en petite capitale, la donnee dessous */
.ivr-coords__label {
  font-size: var(--ivr-text-2xs);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-widest);
  text-transform: uppercase;
  color: var(--ivr-blue-300);
}

.ivr-coords__value {
  margin: 0;
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-gray-0);
}

.ivr-coords__value a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-coords__value a:hover { color: var(--ivr-blue-300); }

/* RTL — telephone / fax / e-mail.
   Les chiffres sont "weak LTR" : isoles, ils se lisent bien, mais le "+"
   et les espaces separateurs passent sous l'algorithme bidi arabe et le
   numero se rend a l'envers ("212+ 5 39 343 784"). On isole la valeur en
   LTR, comme deja fait pour le footer et le meta du header (sections.css).
   L'adresse, elle, reste en RTL : c'est du texte arabe. */
[dir="rtl"] .ivr-coords__value a[href^="tel:"],
[dir="rtl"] .ivr-coords__value a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   CARTE DE CONTACT — formulaire a gauche, plan a droite.
   -------------------------------------------------------------------------- */
.ivr-cwrap {
  display: grid;
  gap: 0;
  overflow: hidden;
  background-color: var(--ivr-surface);
  border: var(--ivr-rule) solid var(--ivr-border-subtle);
  border-radius: var(--ivr-radius-card);
  box-shadow: var(--ivr-shadow-md);
}

@media (min-width: 68rem) {
  .ivr-cwrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.ivr-cwrap__form {
  display: grid;
  gap: var(--ivr-space-8);
  align-content: start;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.ivr-cwrap__head { display: grid; gap: var(--ivr-space-4); justify-items: start; }

.ivr-cwrap__heading {
  font-size: var(--ivr-text-xl);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-tight);
  letter-spacing: var(--ivr-tracking-tight);
}

.ivr-cwrap__lead {
  max-inline-size: var(--ivr-measure);
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
}

/* --------------------------------------------------------------------------
   PLAN — chargement a la demande.
   Le <iframe> n'est cree qu'au clic : tant que le visiteur ne l'a pas demande,
   aucune requete ne part vers Google. Meme regle que la lightbox video, et
   c'est ce qui evite un tiers depose avant tout consentement.
   -------------------------------------------------------------------------- */
.ivr-map {
  position: relative;
  min-block-size: 22rem;
  background-color: var(--ivr-surface-muted);
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
}

@media (min-width: 68rem) {
  .ivr-map {
    border-block-start: 0;
    border-inline-start: var(--ivr-rule) solid var(--ivr-border-subtle);
  }
}

.ivr-map__face {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--ivr-space-4);
  place-content: center;
  justify-items: center;
  padding: var(--ivr-space-8);
  text-align: center;
}

.ivr-map__pin { color: var(--ivr-blue-600); }

.ivr-map__addr {
  max-inline-size: 30ch;
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
}

.ivr-map__note {
  max-inline-size: 34ch;
  font-size: var(--ivr-text-xs);
  color: var(--ivr-text-subtle);
}

.ivr-map iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.ivr-map.is-loaded .ivr-map__face { display: none; }