/* =============================================================================
 * Espace.com — Composants propres aux pages interieures.
 *
 * Complete espace-da.css et espace-da-reprise.css pour les briques qui
 * n'existent pas sur la page d'accueil : hero de page, prose legale, FAQ en
 * accordeon, formulaire de contact, formules tarifaires, encadres.
 * Se charge en dernier.
 * ========================================================================== */

/* --- 1. Hero de page : une fenetre sur le champ -------------------------- *
 * Le fond opaque est retire pour laisser passer la grille d'espace-temps
 * dessinee en fond de site. Chaque page s'ouvre ainsi sur le meme espace que
 * la page d'accueil, sans avoir a dupliquer le canvas du hero.               */
.esp-herop{background-color:transparent!important;background-image:none!important;}
.esp-herop::after{
  content:"";position:absolute;left:50%;top:0;
  width:min(1200px,130vw);height:520px;transform:translate(-50%,-42%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.07),transparent 70%);
  pointer-events:none;z-index:0;
}
.esp-herop > *{position:relative;z-index:1;}

/* --- 2. Prose des pages legales ----------------------------------------- *
 * Mentions legales, confidentialite, CGV. Colonne de lecture etroite, gris
 * clair sur noir, et un filet a gauche qui rappelle la trame du champ.       */
.esp-richblock,.esp-rich{max-width:74ch;}
.esp-richblock p,.esp-rich p,
.esp-richblock li,.esp-rich li{color:var(--esp-ink-2)!important;}
.esp-richblock h2,.esp-rich h2,
.esp-richblock h3,.esp-rich h3{color:var(--esp-ink)!important;}
.esp-richblock a,.esp-rich a{
  color:var(--esp-ink)!important;
  text-decoration:none;border-bottom:1px solid var(--esp-line-hi);
  transition:border-bottom-color .25s var(--esp-ease);
}
.esp-richblock a:hover,.esp-rich a:hover{border-bottom-color:var(--esp-ink);}
.esp-richblock dt,.esp-rich dt{color:var(--esp-ink)!important;font-family:var(--esp-mono);font-size:12px;letter-spacing:.06em;}
.esp-richblock dd,.esp-rich dd{color:var(--esp-ink-2)!important;}
.esp-richblock dl,.esp-rich dl{
  border-left:1px solid var(--esp-line);padding-left:22px;
}

/* --- 3. Listes de definition (le constat, ce qui est inclus) ------------- */
.esp-deflist > .e-con + .e-con{border-top-color:var(--esp-line)!important;}
.esp-deflist > .e-con::before{color:var(--esp-ink-3)!important;font-family:var(--esp-mono)!important;}
.esp-deflist > .e-con{transition:padding-left .3s var(--esp-ease);}
.esp-deflist > .e-con:hover{padding-left:72px;}
.esp-dt .elementor-heading-title{color:var(--esp-ink)!important;}

/* --- 4. Cartes de grille : chaque carte devient une touche --------------- */
.esp-cardgrid{gap:18px;}
.esp-cardgrid > .e-con{
  padding:28px!important;
  min-height:0;
}
.esp-cardgrid > .e-con::after{content:none;} /* ancienne fleche du kit */
.esp-cardgrid--num > .e-con::before{
  color:var(--esp-ink-2)!important;
  font-family:var(--esp-mono)!important;
  letter-spacing:.2em!important;
}
.esp-cardtitle .elementor-heading-title{color:var(--esp-ink)!important;}

/* --- 5. FAQ en accordeon ------------------------------------------------- */
.esp-faq .elementor-accordion-item{
  border:0!important;border-bottom:1px solid var(--esp-line)!important;
}
.esp-faq .elementor-accordion-item:first-child{border-top:1px solid var(--esp-line)!important;}
.esp-faq .elementor-tab-title{
  padding:22px 0!important;
  transition:padding-left .3s var(--esp-ease),color .25s var(--esp-ease);
}
.esp-faq .elementor-tab-title a,
.esp-faq .elementor-tab-title .elementor-accordion-title{color:var(--esp-ink)!important;}
.esp-faq .elementor-tab-title:hover{padding-left:12px!important;}
.esp-faq .elementor-tab-content{
  padding:0 0 24px!important;border:0!important;
  color:var(--esp-ink-2)!important;background:transparent!important;
}
.esp-faq .elementor-tab-content p{color:var(--esp-ink-2)!important;}
.esp-faq .elementor-accordion-icon{color:var(--esp-ink-2)!important;}

/* --- 6. Formulaire de contact -------------------------------------------- */
.esp-form .elementor-field-group > label{
  font-family:var(--esp-mono)!important;
  font-size:11px!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--esp-ink-2)!important;margin-bottom:9px!important;
}
.esp-form .elementor-field-textual{
  background-color:rgba(255,255,255,.035)!important;
  border:1px solid var(--esp-line)!important;
  border-radius:var(--esp-radius-s)!important;
  color:var(--esp-ink)!important;
  padding:15px 16px!important;
  transition:border-color .25s var(--esp-ease),background-color .25s var(--esp-ease),box-shadow .25s var(--esp-ease);
}
.esp-form .elementor-field-textual::placeholder{color:var(--esp-ink-3)!important;opacity:1;}
.esp-form .elementor-field-textual:focus{
  border-color:var(--esp-line-hi)!important;
  background-color:rgba(255,255,255,.06)!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.05)!important;
  outline:none;
}
/* Le menu deroulant natif s'affiche avec les couleurs du systeme. */
.esp-form select.elementor-field-textual{color-scheme:dark;}
.esp-form .elementor-button[type="submit"]{
  background-color:var(--esp-ink)!important;color:var(--esp-void)!important;
  border:1px solid var(--esp-ink)!important;border-radius:var(--esp-radius-s)!important;
  transition:background-color .2s var(--esp-ease),color .2s var(--esp-ease);
}
.esp-form .elementor-button[type="submit"]:hover{
  background-color:transparent!important;color:var(--esp-ink)!important;
}
.esp-form .elementor-message{color:var(--esp-ink)!important;}
.esp-form .elementor-field-subgroup label,
.esp-form .elementor-field-option label{color:var(--esp-ink-2)!important;}

/* --- 7. Formules tarifaires ---------------------------------------------- */
.esp-plangrid{gap:18px;}
.esp-plancard{padding:34px!important;}
.esp-planprice{border-bottom-color:var(--esp-line)!important;}
.esp-planprice .elementor-heading-title,
.esp-planprice p{color:var(--esp-ink)!important;}
.esp-planlist .elementor-icon-list-item{color:var(--esp-ink-2)!important;}
.esp-planlist .elementor-icon-list-text{color:var(--esp-ink-2)!important;}
.esp-planlist .elementor-icon-list-text::before{color:var(--esp-ink-3)!important;}

/* --- 8. Encadre a completer ---------------------------------------------- */
.esp-notebox{
  border:1px dashed var(--esp-line-hi)!important;
  background:rgba(255,255,255,.025)!important;
  border-radius:var(--esp-radius)!important;
}
.esp-notebox .elementor-heading-title{color:var(--esp-ink)!important;}
.esp-notebox p{color:var(--esp-ink-2)!important;}

/* --- 9. Bloc coordonnees ------------------------------------------------- */
.esp-coordbox{padding:34px!important;}
.esp-coordbox .elementor-divider-separator{border-top-color:var(--esp-line)!important;}
.esp-coordbox a{color:var(--esp-ink)!important;}

/* --- 10. Boutons hérités des fonds clairs -------------------------------- *
 * Ces variantes etaient dessinees pour du noir sur blanc. Sur fond sombre
 * elles s'inversent.                                                        */
.esp-btn-ghost-dark .elementor-button{
  background-color:transparent!important;color:var(--esp-ink)!important;
  border-color:var(--esp-line-hi)!important;
}
.esp-btn-ghost-dark .elementor-button:hover{
  background-color:var(--esp-ink)!important;color:var(--esp-void)!important;
  border-color:var(--esp-ink)!important;
}

/* --- 11. Articles (page Blog) -------------------------------------------- */
.elementor-posts .elementor-post{
  background:var(--esp-surface)!important;
  border:1px solid var(--esp-line)!important;
  border-radius:var(--esp-radius)!important;
  overflow:hidden;
  transition:transform .2s var(--esp-ease),border-color .3s var(--esp-ease);
}
.elementor-posts .elementor-post:hover{
  transform:translateY(var(--esp-depth));
  border-color:var(--esp-line-hi)!important;
}
.elementor-posts .elementor-post__title,
.elementor-posts .elementor-post__title a{color:var(--esp-ink)!important;}
.elementor-posts .elementor-post__excerpt p,
.elementor-posts .elementor-post__meta-data{color:var(--esp-ink-2)!important;}

/* --- 12. En-tete et pied de page ----------------------------------------- */

/* Le survol du menu passait a #6B6B6B, soit 3,5:1 sur le noir : sous le seuil
   AA. Il s'eclaircit desormais au lieu de s'eteindre, et le soulignement porte
   l'etat actif. */
.esp-header .elementor-nav-menu .elementor-item{
  position:relative;
  transition:color .2s var(--esp-ease);
}
.esp-header .elementor-nav-menu .elementor-item:hover,
.esp-header .elementor-nav-menu .elementor-item.elementor-item-active{
  color:var(--esp-ink)!important;
}
.esp-header .elementor-nav-menu .elementor-item::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--esp-ease);
}
.esp-header .elementor-nav-menu .elementor-item:hover::after,
.esp-header .elementor-nav-menu .elementor-item.elementor-item-active::after{transform:scaleX(1);}
.esp-header .elementor-nav-menu--dropdown{
  background-color:var(--esp-surface)!important;
  border:1px solid var(--esp-line)!important;
  border-radius:var(--esp-radius)!important;
}

/* Intitules de colonne du pied de page, en monospace. */
.esp-foot-label .elementor-heading-title{
  font-family:var(--esp-mono)!important;
  font-size:11px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;
  color:var(--esp-ink-2)!important;
}
/* Plusieurs textes du pied de page portent encore #6B6B6B, soit 3,6:1 sur le
   fond du systeme : sous le seuil AA. La couleur vient de styles en ligne du
   contenu, hors de portee des reglages Elementor, d'ou la reprise ici. Les
   boutons sont exclus : ils ont leur propre paire de couleurs. */
.esp-footer p,
.esp-footer li,
.esp-footer a:not(.elementor-button),
.esp-footer .elementor-icon-list-text{
  color:var(--esp-ink-2)!important;
  transition:color .2s var(--esp-ease);
}
.esp-footer a:not(.elementor-button):hover,
.esp-footer .elementor-icon-list-item:hover .elementor-icon-list-text{
  color:var(--esp-ink)!important;
}

/* --- 13. Lien d'evitement ------------------------------------------------ *
 * Herite du #111111 du theme : invisible sur fond sombre des qu'il prend le
 * focus au clavier. On le redessine dans le systeme.                        */
.skip-link,.screen-reader-text:focus{
  background-color:var(--esp-ink)!important;
  color:var(--esp-void)!important;
  border-radius:var(--esp-radius-s)!important;
  font-family:var(--esp-mono)!important;
  font-size:12px!important;letter-spacing:.1em!important;
  padding:14px 20px!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.16)!important;
}

/* --- 14. Prise de focus visible partout --------------------------------- *
 * Sur un site sombre, l'anneau de focus par defaut se voit mal. */
.esp-sec a:focus-visible,
.esp-sec button:focus-visible,
.esp-sec .elementor-button:focus-visible,
.esp-sec input:focus-visible,
.esp-sec textarea:focus-visible,
.esp-sec select:focus-visible{
  outline:2px solid var(--esp-ink);
  outline-offset:3px;
  border-radius:var(--esp-radius-s);
}

/* --- 15. Accessibilite --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .esp-deflist > .e-con:hover{padding-left:62px;}
  .esp-faq .elementor-tab-title:hover{padding-left:0!important;}
  .elementor-posts .elementor-post:hover{transform:none;}
}