/* =============================================================================
 * Espace.com — Reprise de l'ancien systeme clair.
 *
 * Le kit Elementor porte encore les regles de la version precedente : cartes
 * blanches, filets #E6E6E6, survols en translateY(-3px). Ce fichier les
 * neutralise et rebranche chaque composant sur le systeme "Champ
 * gravitationnel". Il se charge APRES espace-da.css.
 *
 * Il ne redefinit jamais une couleur pilotable depuis Elementor : les fonds de
 * section et les couleurs de texte restent modifiables dans l'editeur.
 * ========================================================================== */

/* --- 1. Neutralisation des anciens survols ------------------------------- *
 * L'ancien geste souleve la carte. Le nouveau l'enfonce. Les deux ne peuvent
 * pas coexister : on coupe l'ancien a la racine.                             */
.esp-bento > a.e-con:hover,
.esp-cardgrid > a.e-con:hover,
a.esp-offercard:hover,
a.esp-flatcard:hover,
.esp-projcard:hover,
.esp-proj:hover{transform:none;}

/* La touche reprend la main, avec une specificite suffisante pour passer
   devant les selecteurs de l'ancien kit. */
.esp-bento > .e-con.esp-touche-bloc:hover,
.esp-offergrid > .e-con.esp-touche-bloc:hover,
.e-con.esp-touche-bloc:hover{
  transform:translateY(var(--esp-depth));
  border-color:var(--esp-line-hi)!important;
}

/* --- 2. Bento des expertises --------------------------------------------- *
 * La repartition 7/5 - 5/7 - 12 est conservee, c'est une bonne grille. Seule
 * la matiere change : chaque cellule devient un hublot sur le champ.        */
.esp-bento{gap:18px;}
.esp-bento > .e-con{
  border:0!important;
  padding:28px!important;
  min-height:236px;
}
.esp-bento > a.e-con::after{content:none;} /* l'ancienne fleche en absolu */
.esp-bento .esp-bentobody{padding-bottom:0;}

/* --- 3. Numeros de rubrique : monospace, comme une reference de mission --- */
.esp-num{
  font-family:var(--esp-mono)!important;
  font-size:11px!important;
  letter-spacing:.2em!important;
  color:var(--esp-ink-3)!important;
  margin-bottom:14px!important;
}
.esp-num::before{content:"—— ";opacity:.5;}

/* --- 4. Reperes (Etre visible / compris / credible / choisi) -------------- */
.esp-pilier{padding:30px 26px 32px!important;}
/* L'ancien filet vertical entre colonnes n'a plus lieu d'etre : chaque repere
   est desormais un objet autonome. */
.esp-pilier::before{display:none!important;}
.esp-pilier .elementor-icon svg{
  width:32px;height:32px;stroke:var(--esp-ink);fill:none;stroke-width:1.4;
  transition:transform .35s var(--esp-rebond);
}
.esp-pilier:hover .elementor-icon svg{transform:scale(1.12) rotate(-4deg);}
.esp-pilier .elementor-icon-box-title{margin:18px 0 9px!important;}

/* --- 5. Frise methode : cinq jalons sur une trajectoire ------------------- */
.esp-frise{
  display:grid;grid-template-columns:repeat(5,1fr);gap:28px;
  position:relative;
}
@media (max-width:1024px){.esp-frise{grid-template-columns:repeat(2,1fr);gap:34px;}}
@media (max-width:767px){.esp-frise{grid-template-columns:1fr;}}
.esp-frise > .e-con{position:relative;display:flex;flex-direction:column;}
/* L'ancienne numerotation de .esp-steps est remplacee par le jalon rond. */
.esp-frise > .e-con::before{content:none;}
.esp-frise > .e-con + .e-con::after{content:none;}

/* --- 6. Bandeau de chiffres ---------------------------------------------- */
.esp-stat + .esp-stat::before{background:var(--esp-line)!important;}
.esp-stat{padding:0 26px;}
.esp-statlist .elementor-icon-list-item{color:var(--esp-ink-2);}
.esp-statlist .elementor-icon-list-item:last-child .elementor-icon-list-text{color:var(--esp-ink);}
.esp-statlist .elementor-icon-list-icon svg{stroke:currentColor;fill:none;}

/* --- 7. Offres ----------------------------------------------------------- */
.esp-offergrid{gap:18px;}
.esp-offergrid > .e-con{padding:34px!important;min-height:268px;}
.esp-offergrid > .e-con.esp-touche-bloc--phare{padding:42px 34px!important;}
a.esp-offercard::after{content:none;} /* fleche geree par .esp-fleche */
.esp-badgetag{
  font-family:var(--esp-mono)!important;
  font-size:10px!important;letter-spacing:.16em!important;
  background:var(--esp-ink)!important;color:var(--esp-void)!important;
  border-radius:5px!important;padding:6px 10px!important;
}

/* --- 8. A propos --------------------------------------------------------- */
.esp-aboutquote::before{color:var(--esp-ink-3);}
.esp-taglist .elementor-icon-list-item{
  border:1px solid var(--esp-line)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.03);
  transition:border-color .25s var(--esp-ease),background-color .25s var(--esp-ease);
}
.esp-taglist .elementor-icon-list-item:hover{
  border-color:var(--esp-line-hi)!important;
  background:rgba(255,255,255,.07);
}
.esp-taglist .elementor-icon-list-text{
  font-family:var(--esp-mono)!important;
  font-size:10px!important;letter-spacing:.14em!important;
  color:var(--esp-ink-2)!important;
}

/* --- 9. Avis clients : la carte de temoignage passe sur fond sombre ------- */
.esp-review{
  background:var(--esp-surface)!important;
  border:1px solid var(--esp-line)!important;
  border-radius:var(--esp-radius)!important;
  padding:28px!important;
  transition:border-color .3s var(--esp-ease),background-color .3s var(--esp-ease),transform .2s var(--esp-ease);
}
.esp-review:hover{
  background:var(--esp-surface-hi)!important;
  border-color:var(--esp-line-hi)!important;
  transform:translateY(var(--esp-depth));
}
.esp-review p{color:var(--esp-ink)!important;}
.esp-review .who{color:var(--esp-ink-2)!important;}
.esp-review .who b{color:var(--esp-ink)!important;}
.esp-stars{color:var(--esp-ink)!important;}

/* --- 10. Bandes d'appel a l'action sous une grille ------------------------ */
.esp-ctaband,
.esp-ctaband--light{
  border-top:1px solid var(--esp-line)!important;
  padding-top:28px!important;
}

/* --- 11. Boutons sur fond sombre ----------------------------------------- */
/* Ces liens n'avaient aucune couleur de texte declaree : ils heritaient du
   #111111 du kit et devenaient invisibles sur fond sombre (1,01:1). */
.esp-linkbtn .elementor-button{
  color:var(--esp-ink)!important;
  background:transparent!important;
  font-family:var(--esp-mono)!important;
  font-size:12px!important;letter-spacing:.1em!important;
  border-bottom-color:var(--esp-line-hi)!important;
  transition:border-bottom-color .25s var(--esp-ease),padding-right .25s var(--esp-ease);
}
.esp-linkbtn .elementor-button:hover{color:var(--esp-ink)!important;}
.esp-linkbtn .elementor-button:hover{border-bottom-color:var(--esp-ink)!important;}

/* Le bouton plein du bas de page : blanc sur noir, il s'inverse au survol. */
.esp-btn-onlight .elementor-button{
  background-color:var(--esp-ink)!important;color:var(--esp-void)!important;
  border-color:var(--esp-ink)!important;
}
.esp-btn-onlight .elementor-button:hover{
  background-color:transparent!important;color:var(--esp-ink)!important;
}

/* --- 12. Dernier appel : le puits de gravite maximal ---------------------- *
 * La section finale n'a pas de fond plat. Une source lumineuse centrale
 * derriere le bouton, comme un astre vers lequel toute la page tombe.       */
.esp-final{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 160% at 50% 118%,
    rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 34%,transparent 66%),
    #060607!important;
}
.esp-final::before{
  content:"";position:absolute;left:50%;bottom:-58%;
  width:min(880px,140vw);aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 40px rgba(255,255,255,.014),0 0 0 90px rgba(255,255,255,.010);
  pointer-events:none;
}
.esp-final > *{position:relative;z-index:1;}

/* --- 13. Echelonnement des apparitions dans une grille ------------------- */
.esp-anim .esp-stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--esp-ease),transform .7s var(--esp-ease);
}
.esp-anim .esp-stagger.esp-vu > *{opacity:1;transform:none;}
.esp-stagger.esp-vu > *:nth-child(1){transition-delay:0ms}
.esp-stagger.esp-vu > *:nth-child(2){transition-delay:80ms}
.esp-stagger.esp-vu > *:nth-child(3){transition-delay:160ms}
.esp-stagger.esp-vu > *:nth-child(4){transition-delay:240ms}
.esp-stagger.esp-vu > *:nth-child(5){transition-delay:320ms}
.esp-stagger.esp-vu > *:nth-child(6){transition-delay:400ms}

/* --- 14. Etats vides assumes -------------------------------------------- *
 * Le portefeuille de realisations n'a pas encore d'entree publiee. Plutot
 * qu'un vide, des emplacements en attente, explicitement identifies.        */
.esp-attente{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:767px){.esp-attente{grid-template-columns:1fr;}}
.esp-attente > .e-con{aspect-ratio:4/3;padding:0!important;}

/* --- 15. Widgets Elementor : la classe est posee sur l'enveloppe --------- *
 * _css_classes place la classe sur le <div> du widget, pas sur le titre lui
 * meme. Les reglages de typographie d'Elementor visent .elementor-heading-title
 * avec une specificite plus forte : il faut donc viser le titre interne.     */
.esp-touche .elementor-heading-title,
.esp-num .elementor-heading-title,
.esp-etiquette .elementor-heading-title{
  font-family:var(--esp-mono)!important;
  margin:0!important;
}
.esp-touche .elementor-heading-title{
  font-size:11px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--esp-ink-2)!important;
  line-height:1!important;
}
/* Contraste : #63636C sur une face de touche tombe a 3,2:1, sous le seuil AA
   pour du texte de 11px. On remonte au gris de texte courant. */
.esp-num .elementor-heading-title{
  font-size:11px!important;letter-spacing:.2em!important;
  color:var(--esp-ink-2)!important;line-height:1!important;
}
/* Meme raison : l'etiquette d'un visuel en attente doit rester lisible. */
.esp-etiquette .elementor-heading-title{
  font-size:10px!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:rgba(255,255,255,.58)!important;line-height:1.3!important;
}
/* La numerotation decorative appartient a l'enveloppe, pas au titre. */
.esp-num .elementor-heading-title::before{content:"\2014\2014 ";opacity:.5;}
.esp-num::before{content:none;}
.esp-etiquette .elementor-heading-title::before{content:"[ ";}
.esp-etiquette .elementor-heading-title::after{content:" ]";}
.esp-etiquette::before,.esp-etiquette::after{content:none;}

/* --- 16. Cellule de bento : touche ET hublot sur le meme element --------- *
 * Les deux composants voudraient chacun leur ::before. Plutot que de les
 * faire s'ecraser, le halo qui suit le curseur est peint ici comme premiere
 * couche de fond, au-dessus du champ d'etoiles du hublot.                    */
.esp-touche-bloc.esp-hublot{
  background:
    radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.11),transparent 60%),
    radial-gradient(120% 90% at 78% 12%,rgba(255,255,255,.10),transparent 58%),
    linear-gradient(155deg,#17171C 0%,#0B0B0E 58%,#141419 100%)!important;
}
/* Le ::before de la touche est neutralise ici : le hublot a besoin du sien
   pour les etoiles. */
.esp-touche-bloc.esp-hublot::before{
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%,rgba(255,255,255,.62),transparent 60%),
    radial-gradient(1.1px 1.1px at 62% 14%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 62%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 34% 72%,rgba(255,255,255,.38),transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 58%,rgba(255,255,255,.40),transparent 60%),
    radial-gradient(1px 1px at 48% 44%,rgba(255,255,255,.30),transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 30%,rgba(255,255,255,.48),transparent 60%),
    radial-gradient(1px 1px at 70% 86%,rgba(255,255,255,.34),transparent 60%);
  background-color:transparent;
  inset:-40%;opacity:1;
  animation:esp-derive 26s linear infinite alternate;
}

/* --- 17. Rangees fantomes des grilles Elementor -------------------------- *
 * Le conteneur grille d'Elementor declare deux rangees par defaut, meme quand
 * le contenu n'en occupe qu'une : la frise methode (5 elements sur 5 colonnes)
 * et la grille des offres (3 sur 3) tramaient donc une rangee vide de la
 * hauteur d'une carte, soit plus de 230px de blanc mort en bas de section.
 *
 * On rend les rangees auto : chacune se cale sur son contenu, et les cartes
 * d'une meme rangee continuent de s'aligner en hauteur (etirement par defaut).
 * Le bento et la mosaique du hero gardent leurs rangees, elles sont voulues.
 */
.esp-frise,
.esp-offergrid,
.esp-plangrid,
.esp-cardgrid,
.esp-attente,
.esp-aboutgrid{
  /* Elementor ecrit ces rangees dans une regle par page, plus specifique que
     ce selecteur de classe : le !important est ici necessaire. */
  --e-con-grid-template-rows:auto;
  grid-template-rows:auto!important;
  grid-auto-rows:auto!important;
}

/* --- 18. Accessibilite --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .esp-stagger > *{opacity:1!important;transform:none!important;}
  .esp-pilier:hover .elementor-icon svg{transform:none;}
  .esp-review:hover,
  .e-con.esp-touche-bloc:hover,
  .esp-bento > .e-con.esp-touche-bloc:hover,
  .esp-offergrid > .e-con.esp-touche-bloc:hover{transform:none;}
}