/* ==========================================================================
   ESPACE CLIENT MY IBS
   --------------------------------------------------------------------------
   Feuille autonome, chargée UNIQUEMENT sur les trois pages du module.

   Elle reprend la grammaire visuelle du site, pas celle de la page devis (qui
   est l'exception : pleine page sombre) :

     — un HÉROS sombre arrondi, détaché des bords, comme les pages intérieures
       (`.hero-root` dans solead.css) ;
     — un corps BLANC à colonne de 1200 px ;
     — les formulaires dans une CARTE sombre à bandeau turquoise, exactement le
       traitement de la section « Parlons de vos projets » — c'est la façon dont
       ce site présente un formulaire.

   Les valeurs typographiques sont recopiées telles quelles depuis solead.css
   (44/48.4, 15.9/25.3, 14.4, 13.7/19.2…) : elles sont déjà passées par l'échelle
   compressée du site, il ne faut donc surtout pas les « arrondir ».

   Tout est préfixé `ec-` et enfermé dans `body.ec-page`. On ne réutilise AUCUNE
   classe du thème : elles appartiennent à des blocs Elementor qui peuvent être
   retouchés depuis l'éditeur sans qu'on le sache.
   ========================================================================== */

body.ec-page {
  --ec-teal:   #0C959B;
  --ec-navy:   #001E36;
  --ec-encre:  #000;
  --ec-gris:   #676767;
  --ec-ligne:  #E6EAED;
  --ec-champ:  rgba( 255, 255, 255, .17 );
  --ec-champ-bd: #C6C7C7;
  --ec-ph:     rgba( 255, 255, 255, .48 );
  --ec-rouge:  #D8484D;

  background: #fff;
}

/* Le moteur d'apparition du site travaille sur les conteneurs `.e-con`
   d'Elementor, que nos pages ne contiennent pas — sauf l'en-tête et le pied.
   Cette règle est une ceinture : si un `.sl-rv` atterrissait un jour dans un
   formulaire, un champ resterait invisible et le client ne pourrait pas le
   remplir. Un formulaire ne s'anime pas. */
html.sl-rv-on .ec-main .sl-rv,
html.sl-rv-on .ec-main .sl-rv.sl-rv-in {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}

body.ec-page .ec-main p,
body.ec-page .ec-main h1,
body.ec-page .ec-main h2 { margin: 0; }

/* --------------------------------------------------------------------------
   HÉROS
   --------------------------------------------------------------------------
   Même objet que `.hero-root` : carte sombre arrondie, détachée de 20 px des
   bords, image de fond voilée par un dégradé. Seule la hauteur change — 560 px
   conviennent à une page vitrine, pas à un écran de connexion : le formulaire
   passerait sous la ligne de flottaison. */

.ec-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  width: calc( 100% - 40px );
  min-height: 420px;
  margin: 20px auto;
  padding: 140px 24px 44px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #061119;
  background-image: url("/wp-content/uploads/2026/07/3b00ac24a3fe88d7571f90311548e7bb4dd1c671-scaled.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ec-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 90deg,
    rgba( 2, 14, 22, .88 ) 0%,
    rgba( 2, 14, 22, .60 ) 38%,
    rgba( 2, 14, 22, .15 ) 70%,
    rgba( 2, 14, 22, .05 ) 100% );
  pointer-events: none;
}

.ec-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
}

.ec-hero-eyebrow {
  color: #fff;
  font-family: Geist, Inter, sans-serif;
  font-size: 13.7px;
  font-weight: 500;
  line-height: 19.2px;
}

.ec-hero-titre {
  color: #fff !important;
  font-family: "Instrument Sans", Inter, sans-serif !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 48.4px !important;
  letter-spacing: -0.88px;
  text-align: left;
}

.ec-hero-texte {
  max-width: 480px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 13.7px;
  font-weight: 400;
  line-height: 22.8px;
}

/* --------------------------------------------------------------------------
   CORPS
   -------------------------------------------------------------------------- */

.ec-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 15px 100px;
}

/* Page de connexion / inscription : la carte est plus étroite mais reste CALÉE
   À GAUCHE, sur le bord du titre du héros. Une carte centrée dans une colonne de
   1200 px flotterait sans rapport avec le titre qui la surplombe. */
.ec-main--seule .ec-carte { max-width: 760px; }

.ec-colonnes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}

.ec-colonnes > .ec-carte { flex: 1 1 0; min-width: 0; }

/* --------------------------------------------------------------------------
   CARTE DE FORMULAIRE
   -------------------------------------------------------------------------- */

.ec-carte {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient( 120% 85% at 12% 0%, rgba( 12, 149, 155, .55 ) 0%, rgba( 12, 149, 155, 0 ) 58% ),
    linear-gradient( 180deg, #01303F 0%, #001622 62%, #000D14 100% );
}

.ec-carte-tete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
  min-height: 110.75px;
  padding: 18px 40px;
  background: linear-gradient( 90deg, #0C959B 0%, #001E36 50%, #0C959B 100% );
}

.ec-carte-tete-txt {
  color: #fff;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28.6px;
}

.ec-carte-tete-sous {
  color: rgba( 255, 255, 255, .78 );
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  font-weight: 400;
  line-height: 22.1px;
}

.ec-carte-corps { padding: 44px 40px 52px; }

.ec-carte-titre {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-family: "DM Sans", Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 28.6px !important;
}

.ec-carte-texte {
  margin: 0 0 22px !important;
  color: rgba( 255, 255, 255, .72 );
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 15.9px;
  font-weight: 400;
  line-height: 25.3px;
}

.ec-carte-texte strong { color: #fff; font-weight: 500; }

.ec-sep {
  height: 1px;
  margin: 38px 0 30px;
  border: 0;
  background: rgba( 255, 255, 255, .16 );
}

/* --------------------------------------------------------------------------
   CHAMPS
   -------------------------------------------------------------------------- */

/* Le pot de miel : hors écran plutôt qu'en `display:none`, que certains robots
   savent repérer. */
.ec-piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ec-grille {
  display: grid;
  grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
  gap: 0 18px;
}

.ec-champ {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 18px !important;
}

.ec-label {
  margin: 0 0 8px;
  color: #fff;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 15.9px;
  font-weight: 400;
  line-height: 25.3px;
}

.ec-etoile { color: #fff; opacity: .7; }

body.ec-page .ec-saisie {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 14px 28px;
  border: 1px solid var(--ec-champ-bd);
  border-radius: 14px;
  background: var(--ec-champ);
  color: #fff;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  font-weight: 400;
  line-height: normal;
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
}

body.ec-page .ec-saisie::placeholder { color: var(--ec-ph); opacity: 1; }

body.ec-page .ec-saisie:focus {
  outline: none;
  border-color: rgba( 255, 255, 255, .45 );
  background: rgba( 255, 255, 255, .12 );
}

/* Le remplissage automatique de Chrome repeint le fond en blanc et rendrait le
   texte blanc illisible. On ne peut pas annuler ce fond : on le remplace par une
   ombre interne de la couleur voulue, seul moyen accepté. */
body.ec-page .ec-saisie:-webkit-autofill,
body.ec-page .ec-saisie:-webkit-autofill:hover,
body.ec-page .ec-saisie:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0B3A48 inset;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

.ec-champ.is-invalide .ec-saisie {
  border-color: #FFB3B5;
  background: rgba( 216, 72, 77, .16 );
}

.ec-aide,
.ec-erreur {
  margin-top: 7px;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 13px;
  line-height: 19px;
}

.ec-aide   { color: rgba( 255, 255, 255, .55 ); }
.ec-erreur { color: #FFD9D9; }

/* Bouton « afficher le mot de passe », posé par le JS, calé dans le champ. */
.ec-oeil {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 8px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba( 255, 255, 255, .12 );
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}

.ec-champ--mdp.has-aide .ec-oeil { bottom: 36px; }
.ec-oeil:hover { background: rgba( 255, 255, 255, .22 ); }

/* Case à cocher : la coche reste alignée sur la PREMIÈRE ligne du texte, même
   quand la mention RGPD tient sur trois lignes. */
.ec-case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba( 255, 255, 255, .82 );
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  line-height: 22.1px;
  cursor: pointer;
}

.ec-case input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ec-teal);
}

.ec-champ--case { display: block; }

.ec-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 2px 0 26px;
}

/* --------------------------------------------------------------------------
   BOUTON
   --------------------------------------------------------------------------
   Reprise du bouton du site : gélule de 55 px, dégradé turquoise → marine,
   pastille blanche fléchée. La flèche est un SVG en ligne plutôt que le PNG de
   la médiathèque, qui pourrait disparaître à un ménage. */

body.ec-page .ec-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  min-width: 207px;
  height: 55px;
  margin-top: 8px;
  padding: 12px 62px 12px 28px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient( 90deg, rgba( 12, 149, 155, .61 ) 0%, rgba( 0, 32, 56, .61 ) 100% );
  box-shadow:
    0 0 0 1px rgba( 105, 87, 186, .25 ),
    0 2px 4px 0 rgba( 0, 0, 0, .25 ),
    0 1px 0 0 rgba( 255, 255, 255, .35 ) inset;
  -webkit-backdrop-filter: blur( 6px );
  backdrop-filter: blur( 6px );
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 13.7px;
  font-weight: 500;
  line-height: 19.2px;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease, opacity .2s ease;
}

body.ec-page .ec-btn::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%230c2e33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  pointer-events: none;
}

body.ec-page .ec-btn:hover:not([disabled]),
body.ec-page .ec-btn:focus-visible:not([disabled]) {
  transform: translateY( -2px );
  filter: brightness( 1.06 );
}

body.ec-page .ec-btn[disabled] {
  opacity: .5;
  transform: none;
  filter: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   LIENS ET BANDEAUX
   -------------------------------------------------------------------------- */

.ec-lien-fin,
.ec-lien-bas a {
  color: #fff;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba( 255, 255, 255, .45 );
  transition: text-decoration-color .2s ease;
}

.ec-lien-fin:hover,
.ec-lien-bas a:hover { text-decoration-color: #fff; }

.ec-lien-bas {
  margin: 26px 0 0 !important;
  color: rgba( 255, 255, 255, .70 );
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  line-height: 22.1px;
}

.ec-notice {
  margin: 0 0 26px !important;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  line-height: 22.1px;
}

.ec-notice strong { font-weight: 500; }

.ec-notice--ok {
  background: rgba( 47, 163, 107, .16 );
  border: 1px solid rgba( 47, 163, 107, .45 );
  color: #C9F3D6;
}

.ec-notice--ko {
  background: rgba( 216, 72, 77, .16 );
  border: 1px solid rgba( 216, 72, 77, .45 );
  color: #FFD9D9;
}

.ec-notice--info {
  background: rgba( 12, 149, 155, .18 );
  border: 1px solid rgba( 12, 149, 155, .5 );
  color: #D6F4F5;
}

/* --------------------------------------------------------------------------
   COLONNE DE NAVIGATION (page compte)
   --------------------------------------------------------------------------
   Bloc clair bordé, comme la colonne latérale du blog : c'est le pendant clair
   de la carte sombre, et le site s'en sert déjà pour une colonne de service. */

.ec-nav {
  flex: 0 0 340px;
  box-sizing: border-box;
  width: 340px;
  padding: 32px 28px;
  border: 1px solid var(--ec-ligne);
  border-radius: 20px;
  background: #fff;
}

.ec-nav-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ec-nav-item + .ec-nav-item { margin-top: 8px; }

.ec-nav-item a {
  display: block;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

.ec-nav-item a:hover { background: #F4F7F8; }

.ec-nav-item.is-actif a {
  background: rgba( 12, 149, 155, .08 );
  border-color: rgba( 12, 149, 155, .45 );
}

.ec-nav-titre {
  display: block;
  color: var(--ec-encre);
  font-family: Inter, sans-serif;
  font-size: 15.9px;
  font-weight: 500;
  line-height: 24px;
}

.ec-nav-item.is-actif .ec-nav-titre { color: var(--ec-teal); }

.ec-nav-sous {
  display: block;
  margin-top: 2px;
  color: var(--ec-gris);
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 13px;
  line-height: 19px;
}

.ec-nav-mail {
  margin: 24px 0 14px !important;
  padding-top: 20px;
  border-top: 1px solid var(--ec-ligne);
  color: var(--ec-gris);
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 13px;
  line-height: 19px;
  word-break: break-all;
}

.ec-deconnexion {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border: 1px solid #000;
  border-radius: 30px;
  background: #fff;
  color: #0c2e33;
  font-family: Inter, sans-serif;
  font-size: 13.7px;
  font-weight: 500;
  line-height: 19.2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}

.ec-deconnexion:hover { background: #f0f0f0; }

/* --------------------------------------------------------------------------
   DEMANDES
   -------------------------------------------------------------------------- */

.ec-vide {
  margin: 0 !important;
  color: rgba( 255, 255, 255, .78 );
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 15.9px;
  line-height: 25.3px;
}

.ec-vide strong { color: #fff; font-weight: 500; }

.ec-demandes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ec-demande + .ec-demande { margin-top: 16px; }

.ec-demande {
  padding: 22px 26px;
  border: 1px solid rgba( 255, 255, 255, .16 );
  border-radius: 20px;
  background: rgba( 255, 255, 255, .05 );
}

.ec-demande-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ec-demande-titre {
  color: #fff;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 15.9px;
  font-weight: 500;
  line-height: 25.3px;
}

.ec-demande-date {
  margin-top: 2px !important;
  color: rgba( 255, 255, 255, .55 );
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 13px;
  line-height: 19px;
}

.ec-pastille {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 1px solid rgba( 12, 149, 155, .55 );
  border-radius: 999px;
  background: rgba( 12, 149, 155, .20 );
  color: #BFEFF1;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  white-space: nowrap;
}

/* Dossier clôturé : on sort du turquoise d'action sans passer au rouge — ce
   n'est pas un échec, c'est une fin. */
.ec-pastille--clos {
  border-color: rgba( 255, 255, 255, .28 );
  background: rgba( 255, 255, 255, .08 );
  color: rgba( 255, 255, 255, .82 );
}

.ec-jauge {
  overflow: hidden;
  height: 3px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba( 255, 255, 255, .16 );
}

.ec-jauge-barre {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ec-teal);
  transition: width .35s cubic-bezier( .22, .61, .36, 1 );
}

.ec-details { margin-top: 18px; }

.ec-details summary {
  color: #fff;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba( 255, 255, 255, .45 );
}

.ec-details summary::-webkit-details-marker { display: none; }
.ec-details summary::before { content: "+ "; text-decoration: none; }
.ec-details[open] summary::before { content: "− "; }

.ec-recap { margin: 16px 0 0; padding: 0; }

.ec-recap-ligne {
  display: grid;
  grid-template-columns: 44% minmax( 0, 1fr );
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba( 255, 255, 255, .09 );
}

.ec-recap dt,
.ec-recap dd {
  margin: 0;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  line-height: 22.1px;
}

.ec-recap dt { color: rgba( 255, 255, 255, .58 ); }
.ec-recap dd { color: #fff; font-weight: 500; }

.ec-recap-titre {
  margin: 18px 0 2px;
  color: #7FE1E5;
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 22.1px;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ
   -------------------------------------------------------------------------- */

body.ec-page :focus-visible {
  outline: 2px solid #7FE1E5;
  outline-offset: 2px;
}

.ec-nav :focus-visible { outline-color: var(--ec-teal); }

/* --------------------------------------------------------------------------
   ADAPTATIONS
   --------------------------------------------------------------------------
   Mêmes seuils que la section Contact du site (1400 / 1100 / 900 / 620) : les
   ruptures tombent au même endroit sur toutes les pages. */

@media (max-width: 1400px) {
  .ec-hero { min-height: 380px; padding: 130px 24px 40px; }
  .ec-hero-titre { font-size: 41.1px !important; line-height: 47.4px !important; }
  .ec-colonnes { gap: 32px; }
  .ec-nav { flex-basis: 300px; width: 300px; }
  .ec-shell { padding: 80px 15px 90px; }
}

@media (max-width: 1100px) {
  .ec-hero-titre { font-size: 35.3px !important; line-height: 41.7px !important; }
  .ec-carte-tete { min-height: 96px; padding: 16px 28px; }
  .ec-carte-tete-txt { font-size: 16.6px; line-height: 24px; }
  .ec-carte-corps { padding: 34px 28px 42px; }
  .ec-label { font-size: 15.2px; line-height: 22.8px; }
}

@media (max-width: 900px) {
  .ec-colonnes { flex-direction: column; align-items: stretch; gap: 24px; }
  .ec-nav { flex: 1 1 auto; width: 100%; }
  .ec-nav-liste { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px; }
  .ec-nav-item + .ec-nav-item { margin-top: 0; }
}

@media (max-width: 640px) {
  .ec-grille { grid-template-columns: minmax( 0, 1fr ); }
  .ec-nav-liste { grid-template-columns: minmax( 0, 1fr ); }
}

@media (max-width: 620px) {
  .ec-hero {
    width: calc( 100% - 24px );
    min-height: 300px;
    margin: 12px auto;
    padding: 120px 18px 32px;
    border-radius: 16px;
  }
  .ec-hero-titre { font-size: 26.7px !important; line-height: 31.7px !important; }
  .ec-hero-texte { font-size: 14.4px; line-height: 22.1px; }
  .ec-shell { padding: 56px 15px 70px; }
  .ec-carte { border-radius: 18px; }
  .ec-carte-tete { min-height: 74px; padding: 14px 18px; }
  .ec-carte-tete-txt { font-size: 15.2px; line-height: 22.8px; }
  .ec-carte-tete-sous { font-size: 13px; line-height: 19px; }
  .ec-carte-corps { padding: 26px 18px 34px; }
  body.ec-page .ec-saisie { padding: 12px 18px; }
  .ec-oeil { right: 8px; padding: 7px 12px; }
  .ec-demande { padding: 18px 18px; border-radius: 16px; }
  .ec-recap-ligne { grid-template-columns: minmax( 0, 1fr ); gap: 2px; }
  body.ec-page .ec-btn { width: 100%; min-width: 0; }
}