/* =============================================================================
 * Espace.com — Systeme visuel "Champ gravitationnel"
 *
 * Etend a tout le site la direction posee par le hero : un fond noir traverse
 * par une grille d'espace-temps que la gravite courbe. Rien n'est repris des
 * cartes plates blanches de la version precedente.
 *
 * Le nom de l'agence a deux lectures, la mise en forme s'appuie sur les deux :
 *  - l'espace intersideral donne le vide, la gravite, les halos, les orbites ;
 *  - la touche Espace du clavier donne la mecanique : au survol un element
 *    s'ENFONCE et rebondit, il ne se souleve pas. C'est la signature tactile
 *    du site, et l'inverse exact du translateY(-3px) generique d'avant.
 *
 * Charge par espacecom-da.php. Les couleurs de fond et de texte restent
 * pilotees depuis Elementor pour que l'editeur garde la main ; ce fichier ne
 * porte que la matiere, la profondeur et le mouvement.
 * ========================================================================== */

/* --- Jetons -------------------------------------------------------------- */
:root{
  --esp-void:#09090B;          /* fond le plus profond, le vide */
  --esp-deep:#0F0F12;          /* fond de section courant */
  --esp-surface:#141418;       /* face d'une touche au repos */
  --esp-surface-hi:#1B1B21;    /* face d'une touche enfoncee */
  --esp-line:rgba(255,255,255,.09);
  --esp-line-hi:rgba(255,255,255,.24);
  --esp-ink:#FFFFFF;
  --esp-ink-2:#9A9AA4;
  --esp-ink-3:#63636C;
  --esp-radius:16px;
  --esp-radius-s:8px;
  --esp-depth:5px;             /* course d'enfoncement d'une touche */
  --esp-ease:cubic-bezier(.22,.61,.36,1);
  --esp-rebond:cubic-bezier(.34,1.42,.64,1);
  --esp-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* --- Le champ : grille d'espace-temps posee derriere tout le site --------- */
body{
  /* Le kit Elementor pose un fond blanc via .elementor-kit-8, plus specifique
     que ce selecteur. Sans !important, un hero transparent laisserait
     apparaitre du blanc sous du texte blanc. Cette feuille n'etant chargee que
     sur les pages, la declaration ne deborde pas sur les autres gabarits. */
  background-color:var(--esp-void)!important;
  /* Le champ et les halos sont des couches pleine largeur : on garantit qu'ils
     ne peuvent jamais provoquer de defilement horizontal. `clip` plutot que
     `hidden` pour ne pas casser les positionnements collants. */
  overflow-x:clip;
}

.esp-champ{
  position:fixed;top:0;left:0;
  width:100vw;height:100vh;max-width:100%;
  z-index:0;pointer-events:none;display:block;
}
/* Le contenu Elementor passe systematiquement au-dessus du champ. */
.elementor-location-header,
.elementor-location-footer,
.site-main,
main{position:relative;z-index:1;}

/* --- Sections : trois profondeurs de noir, jamais un aplat unique --------- */
.esp-sec{position:relative;}

/* Filet de securite sur l'encre. Le kit Elementor impose #111111 comme couleur
   de texte heritee : sur fond sombre, tout contenu sans couleur explicite
   serait noir sur noir. On redonne une encre lisible par defaut. Les reglages
   poses element par element dans Elementor restent prioritaires. */
.esp-sec,
.esp-sec p,.esp-sec li,.esp-sec dd,.esp-sec td,.esp-sec th,
.esp-sec blockquote,.esp-sec figcaption{color:var(--esp-ink-2);}
.esp-sec h1,.esp-sec h2,.esp-sec h3,
.esp-sec h4,.esp-sec h5,.esp-sec h6,
.esp-sec dt,.esp-sec strong,.esp-sec b{color:var(--esp-ink);}
.esp-sec a{color:var(--esp-ink);}
.esp-sec--void{background-color:var(--esp-void)!important;}
.esp-sec--deep{background-color:var(--esp-deep)!important;}
.esp-sec--nu{background-color:transparent!important;} /* laisse voir le champ */

/* Filet de separation : une ligne qui s'allume en son centre, comme un
   horizon eclaire par une source lointaine. */
.esp-horizon{position:relative;}
.esp-horizon::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}

/* Halo d'ambiance ancre en haut de section. */
.esp-halo::after{
  content:"";position:absolute;left:50%;top:0;
  width:min(1100px,120vw);height:420px;transform:translate(-50%,-58%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.06),transparent 70%);
  pointer-events:none;z-index:0;
}
.esp-halo>*{position:relative;z-index:1;}

/* --- Surtitres : la touche de clavier, litteralement ---------------------- */
.esp-touche{
  display:inline-flex!important;align-items:center;gap:.6em;
  font-family:var(--esp-mono)!important;
  font-size:11px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;
  color:var(--esp-ink-2)!important;
  padding:7px 13px 8px!important;
  border:1px solid var(--esp-line)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.03)!important;
  box-shadow:0 2px 0 0 rgba(255,255,255,.06);
  width:auto!important;
}
/* Le curseur clignotant du terminal, avant le libelle. */
.esp-touche::before{
  content:"";width:6px;height:6px;border-radius:1px;
  background:var(--esp-ink);opacity:.85;
  animation:esp-clignote 1.9s steps(1,end) infinite;
}
@keyframes esp-clignote{0%,55%{opacity:.85}56%,100%{opacity:.12}}

/* --- La touche : brique de base de toutes les cartes du site -------------- */
.esp-touche-bloc{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--esp-surface)!important;
  border:1px solid var(--esp-line)!important;
  border-radius:var(--esp-radius)!important;
  box-shadow:0 var(--esp-depth) 0 0 rgba(255,255,255,.055),
             0 18px 40px -22px rgba(0,0,0,.95);
  transition:transform .2s var(--esp-ease),
             box-shadow .2s var(--esp-ease),
             border-color .3s var(--esp-ease),
             background-color .3s var(--esp-ease);
}
/* Halo qui suit le curseur a l'interieur de la touche. */
.esp-touche-bloc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.10),transparent 62%);
  opacity:0;transition:opacity .35s var(--esp-ease);
}
.esp-touche-bloc>*{position:relative;z-index:1;}

.esp-touche-bloc:hover,
.esp-touche-bloc:focus-within{
  transform:translateY(var(--esp-depth));
  box-shadow:0 0 0 0 rgba(255,255,255,.055),
             0 6px 20px -14px rgba(0,0,0,.95);
  border-color:var(--esp-line-hi)!important;
  background:var(--esp-surface-hi)!important;
}
.esp-touche-bloc:hover::before,
.esp-touche-bloc:focus-within::before{opacity:1;}

/* Relachement : le rebond de la touche qui remonte. */
.esp-touche-bloc:not(:hover){transition-timing-function:var(--esp-rebond);}

/* Variante mise en avant : la touche est deja enfoncee, elle s'illumine. */
.esp-touche-bloc--phare{
  background:linear-gradient(160deg,#1D1D24,#0E0E11)!important;
  border-color:var(--esp-line-hi)!important;
  box-shadow:0 var(--esp-depth) 0 0 rgba(255,255,255,.10),
             0 26px 60px -28px rgba(0,0,0,1);
}

/* --- Fleche de lien : elle s'eloigne, aspiree hors de la carte ------------ */
.esp-fleche{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--esp-mono);font-size:13px;letter-spacing:.06em;
  color:var(--esp-ink);text-decoration:none;
}
.esp-fleche::after{
  content:"\2192";display:inline-block;
  transition:transform .28s var(--esp-ease);
}
.esp-touche-bloc:hover .esp-fleche::after,
.esp-fleche:hover::after{transform:translateX(7px);}

/* --- Visuels en attente : une fenetre sur le champ, pas une trame rayee --- *
 * Remplace l'ancien placeholder a rayures diagonales. Champ d'etoiles fixe,
 * anneau d'orbite et derive lente : le bloc tient debout tel quel en
 * attendant les photos, et signale clairement qu'il est en attente.          */
.esp-hublot{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--esp-radius);
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(255,255,255,.10),transparent 58%),
    linear-gradient(155deg,#17171C 0%,#0B0B0E 58%,#141419 100%)!important;
}
/* Poussiere d'etoiles : deux nappes de points a des densites differentes. */
.esp-hublot::before{
  content:"";position:absolute;inset:-40%;z-index:0;
  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%);
  animation:esp-derive 26s linear infinite alternate;
}
/* Anneau d'orbite, decentre, coupe par le cadre. */
.esp-hublot::after{
  content:"";position:absolute;z-index:0;
  width:78%;aspect-ratio:1;right:-16%;bottom:-30%;
  border:1px solid rgba(255,255,255,.13);border-radius:50%;
  box-shadow:inset 0 0 60px rgba(255,255,255,.05);
  transition:transform .8s var(--esp-ease);
}
.esp-touche-bloc:hover .esp-hublot::after,
.esp-hublot:hover::after{transform:rotate(16deg) scale(1.06);}
@keyframes esp-derive{from{transform:translate3d(0,0,0)}to{transform:translate3d(14px,-10px,0)}}

/* Etiquette du visuel en attente, en monospace, dans un coin. */
.esp-etiquette{
  position:absolute!important;left:16px;bottom:13px;right:16px;z-index:2;
  margin:0!important;
  font-family:var(--esp-mono)!important;font-size:10px!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  color:rgba(255,255,255,.58)!important;
}
.esp-etiquette::before{content:"[ ";}
.esp-etiquette::after{content:" ]";}

/* --- Apparitions au defilement ------------------------------------------- *
 * Regle de securite : rien n'est masque tant que .esp-anim n'est pas pose sur
 * <html>. Cette classe est ajoutee par un script en tete de document. Si le
 * JavaScript est absent, bloque ou casse, la page s'affiche entierement plutot
 * que de laisser des sections invisibles.                                    */
.esp-anim .esp-r{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--esp-ease),transform .7s var(--esp-ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.esp-anim .esp-r.esp-vu{opacity:1;transform:none;}

/* Titres : montee ligne par ligne, masquee par un cache. */
.esp-anim .esp-r--titre{opacity:1;transform:none;}
.esp-r--titre .esp-ligne{display:block;overflow:hidden;}
.esp-anim .esp-r--titre .esp-ligne>span{
  display:block;transform:translateY(105%);
  transition:transform .8s var(--esp-ease);
  transition-delay:calc(var(--l,0) * 90ms);
}
.esp-anim .esp-r--titre.esp-vu .esp-ligne>span{transform:none;}

/* --- Compteurs ----------------------------------------------------------- */
.esp-compteur{font-variant-numeric:tabular-nums;}

/* --- Curseur personnalise ------------------------------------------------ */
.esp-curseur{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  transition:width .25s var(--esp-ease),height .25s var(--esp-ease),
             margin .25s var(--esp-ease),background-color .25s var(--esp-ease),
             opacity .25s var(--esp-ease);
  opacity:0;
}
.esp-curseur--actif{opacity:1;}
.esp-curseur--pointe{
  width:62px;height:62px;margin:-31px 0 0 -31px;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.7);
}
.esp-curseur-point{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--esp-ink);opacity:0;transition:opacity .25s var(--esp-ease);
}
.esp-curseur-point--actif{opacity:1;}
@media (hover:none),(max-width:1024px){.esp-curseur,.esp-curseur-point{display:none;}}

/* --- Boutons magnetiques ------------------------------------------------- */
.esp-aimant .elementor-button,
.esp-aimant.elementor-button{will-change:transform;}

/* --- Frise methode : une trajectoire orbitale, plus une frise plate ------- */
.esp-orbite{position:relative;}
.esp-orbite .esp-trace{
  position:absolute;left:0;right:0;top:26px;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--esp-line-hi),transparent);
}
.esp-orbite .esp-trace::after{
  content:"";position:absolute;left:0;top:50%;
  width:var(--avance,0%);height:1px;transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.15));
  box-shadow:0 0 14px 1px rgba(255,255,255,.45);
  transition:width .25s linear;
}
@media (max-width:1024px){.esp-orbite .esp-trace{display:none;}}

/* Jalon numerote sur la trajectoire. */
.esp-jalon{position:relative;}
.esp-jalon::before{
  content:counter(esps,decimal-leading-zero);
  counter-increment:esps;
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin-bottom:20px;
  border:1px solid var(--esp-line);border-radius:50%;
  background:var(--esp-deep);
  font-family:var(--esp-mono);font-size:13px;letter-spacing:.08em;
  color:var(--esp-ink-2);
  transition:border-color .3s var(--esp-ease),color .3s var(--esp-ease),
             box-shadow .3s var(--esp-ease),background-color .3s var(--esp-ease);
}
.esp-orbite{counter-reset:esps;}
.esp-jalon:hover::before,.esp-jalon.esp-vu::before{
  border-color:rgba(255,255,255,.55);color:var(--esp-ink);
  box-shadow:0 0 0 6px rgba(255,255,255,.04),0 0 26px rgba(255,255,255,.20);
}

/* --- Rail horizontal ----------------------------------------------------- */
.esp-rail{scrollbar-width:none;}
.esp-rail::-webkit-scrollbar{display:none;}

/* --- Accessibilite : tout le mouvement se coupe -------------------------- */
@media (prefers-reduced-motion:reduce){
  .esp-r,.esp-r--titre .esp-ligne>span{opacity:1!important;transform:none!important;}
  .esp-hublot::before{animation:none;}
  .esp-touche::before{animation:none;opacity:.85;}
  .esp-curseur,.esp-curseur-point{display:none;}
  .esp-touche-bloc,.esp-touche-bloc::before,.esp-fleche::after{transition:none;}
  .esp-touche-bloc:hover{transform:none;}
}