/* ============================================================
   Passerelle entre la charte ALOIA (app.css) et le DOM d'Elementor.
   Elementor enveloppe chaque widget dans .elementor-widget >
   .elementor-widget-container : les regles de app.css ecrites pour la
   maquette statique ne tombent pas toujours au bon endroit. Ce fichier
   ne fait que ce raccord, il n'invente aucun style.
   ============================================================ */

/* ------------------------------------------------------------------
   app.css vient de la maquette statique : ses regles de mise en page
   (display:grid, colonnes) ecrasent le display:var(--display) des
   conteneurs Elementor et cassent les largeurs reglees dans l'editeur.
   On leur rend la main ici ; app.css ne sert plus qu'a la decoration.
   ------------------------------------------------------------------ */
.e-con.hero,.e-con.studio,.e-con.event,.e-con.disc,.e-con.story,
.e-con.pagehead,.e-con.courses,.e-con.community,.e-con.faq,
.e-con.closing,.e-con.brandline,.e-con.band,.e-con.plans,
.e-con.card,.e-con.evt,.e-con.variant,.e-con.cube,.e-con.sub,
.e-con.studio-side,.e-con.studio-content,.e-con.event-panel,
.e-con.disc-body,.e-con.story-body,.e-con.pagehead-side,
.e-con.card-body,.e-con.faq-list,.e-con.anchors,.e-con.pricegroup,
.e-con.wrap,.e-con.variants,.e-con.evts,.e-con.courses-grid,
.e-con.cubes,.e-con.subs,.e-con.footer-grid,.e-con.topbar-wrap,
.e-con.navbar-wrap,.e-con.footer-bottom-wrap{
  display:var(--display);
  grid-template-columns:none;
}

/* Les conteneurs Elementor sont en flex via --display : on retablit les grilles
   du design. Il faut redefinir la variable, un simple display:grid ne suffit pas. */
.e-con.e-con.courses-grid,.e-con.e-con.evts,.e-con.e-con.variants,
.e-con.e-con.cubes,.e-con.e-con.subs{--display:grid}
.e-con.e-con.courses-grid{grid-template-columns:repeat(4,1fr);gap:26px}
.e-con.e-con.evts{grid-template-columns:repeat(3,1fr);gap:26px}
.e-con.e-con.variants{grid-template-columns:repeat(3,1fr);gap:20px}
.e-con.e-con.cubes{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:18px}
.e-con.e-con.subs{grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px}
.courses-grid > .e-con,.evts > .e-con,.variants > .e-con,
.cubes > .e-con,.subs > .e-con{width:auto;max-width:none}

/* ---------- Cartes de cours ---------- */
.e-con.card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 16px 44px rgba(61,37,0,.10);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.e-con.card:hover{transform:translateY(-10px);box-shadow:0 30px 66px rgba(61,37,0,.18)}
.card .card-img{aspect-ratio:5/7;overflow:hidden;width:100%}
.card .card-img .elementor-widget-container,
.card .card-img figure,
.card .card-img .elementor-image{height:100%;margin:0}
.card .card-img img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;
  transition:transform .7s var(--ease);
}
.card .card-img img[src*="cours-prive"]{object-position:center 70%}
.e-con.card:hover .card-img img{transform:scale(1.07)}
.e-con.card-body{gap:12px}
.card-body .elementor-widget-heading{margin:0}

/* Boutons : la classe du design s'applique au widget, le style est sur le <a>. */
.card-btn .elementor-button{
  padding:12px 24px;font-size:12px;letter-spacing:.12em;border-radius:50px;
}
.btn-hero .elementor-button{
  padding:21px 44px;font-size:15px;box-shadow:0 16px 40px rgba(61,37,0,.35);
}
@media (max-width:760px){
  .btn-hero .elementor-button{padding:17px 30px;font-size:13.5px}
}

/* ---------- Hero ---------- */
.hero .hero-logo img{filter:drop-shadow(0 18px 50px rgba(0,0,0,.45))}
.hero .hero-tagline p{
  margin:0;font-weight:600;letter-spacing:.3em;
  font-size:clamp(11px,1.6vw,14px);text-transform:uppercase;
}
@media (max-width:760px){.hero .hero-logo img{filter:none}}

/* ---------- Bande signature ---------- */
.brandline .elementor-heading-title{
  font-size:clamp(24px,4.6vw,56px);line-height:1.06;font-weight:800;
}
.brandline .dots::before,.brandline .dots::after{background:var(--brown)}

/* ---------- Bloc concept / recit ---------- */
.studio-lead p{margin:0;font-weight:600;font-size:clamp(19px,2.2vw,25px);line-height:1.4}
.story-strong p{margin:0;font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.45}

/* ---------- Bloc evenement ---------- */
.event-place p{margin:0;font-weight:700;font-size:13px;letter-spacing:.14em}
.event-note p{margin:0;max-width:46ch}

/* ---------- Cartes communaute ---------- */
.e-con.evt{
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 14px 38px rgba(61,37,0,.09);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.e-con.evt:hover{transform:translateY(-8px);box-shadow:0 26px 54px rgba(61,37,0,.15)}
.evt .elementor-heading-title{letter-spacing:.16em}

/* ---------- Textes centres ---------- */
.community-intro p{margin:0;max-width:70ch;margin-inline:auto}
.community-note p{margin:0;font-weight:600;font-size:15px}

/* ---------- FAQ ---------- */
.faq-list .elementor-accordion .elementor-accordion-item{
  background:var(--cream);border:2px solid transparent;border-radius:20px;
  margin-bottom:14px;overflow:hidden;
}
.faq-list .elementor-accordion .elementor-tab-title{
  border:0;padding:20px 26px;font-weight:600;font-size:17.5px;
}
.faq-list .elementor-accordion .elementor-tab-title.elementor-active{border:0}
.faq-list .elementor-accordion-item:has(.elementor-active){border-color:var(--yellow)}
.faq-list .elementor-tab-content{border:0;padding:0 26px 20px;color:var(--brown-soft);font-size:16px}
.faq-list .elementor-accordion-icon{color:var(--brown)}

/* ---------- Pages interieures ---------- */
.pagehead-lead p{margin:0;font-weight:600;font-size:clamp(18px,2.1vw,24px);line-height:1.4}
.pricegroup-sub p{margin:0;font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.band-lead p{margin:0;font-weight:600;font-size:clamp(18px,2.1vw,23px);line-height:1.45}
.band-note p{margin:0;font-size:15px}
.disc-meta p{margin:0}

/* Les pastilles d'ancres et les pilules d'info sont rendues en HTML brut. */
.anchors-inner a,.disc-meta li{text-decoration:none}

/* ---------- Adaptations ---------- */
@media (max-width:1100px){
  .e-con.e-con.courses-grid{grid-template-columns:repeat(2,1fr)}
  .e-con.e-con.variants{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .e-con.e-con.evts{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
}
@media (max-width:760px){
  .e-con.e-con.courses-grid{grid-template-columns:1fr;gap:20px}
  .e-con.e-con.variants{grid-template-columns:1fr}
  .e-con.e-con.cubes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}

/* L'accordeon herite de la typo globale "Titres" (majuscules, 800) : on
   revient a l'intitule de question de la maquette. */
.faq-list .elementor-accordion .elementor-tab-title,
.faq-list .elementor-accordion .elementor-tab-title .elementor-accordion-title,
.faq-list .elementor-accordion .elementor-tab-title a{
  font-family:var(--font);font-size:17.5px;font-weight:600;line-height:1.5;
  text-transform:none;letter-spacing:0;color:var(--brown);
}
.faq-list .elementor-accordion .elementor-tab-title.elementor-active,
.faq-list .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title{
  color:var(--brown);
}
.faq-list .elementor-accordion .elementor-accordion-icon{color:var(--brown);width:auto}
.faq-list .elementor-accordion .elementor-tab-content p{margin:0}

/* ============================================================
   En-tete et pied de page (modeles Header Footer Elementor)
   ============================================================ */
a.topbar{position:static;height:auto;padding:10px 16px;width:100%}
.topbar-wrap{padding:0}
.navbar-wrap{position:sticky;top:0;z-index:50}
.nav-logo-img img{height:34px;width:auto}

.footer-grid .footer-h4{
  font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow);margin:18px 0 7px;
}
.footer-grid .footer-h4:first-child{margin-top:0}
.footer-grid .footer-p{
  font-size:15px;color:rgba(255,251,242,.82);margin:0;line-height:1.75;
}
.footer-grid .footer-p a,.footer-links a{color:rgba(255,251,242,.82)}
.footer-grid .footer-p a:hover,.footer-links a:hover{color:var(--yellow)}
.footer-baseline{
  margin:14px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.18em;
  color:rgba(255,251,242,.6);line-height:2;
}
.footer-bottom-wrap{border-top:1px solid rgba(255,251,242,.14)}
.footer-bottom-p{
  margin:0;text-align:center;font-size:13px;color:rgba(255,251,242,.55);
}
.footer-bottom-p a{color:var(--yellow)}
.footer-grid .app-note,.footer-grid .newsletter-note{
  font-size:15px;line-height:1.75;color:rgba(255,251,242,.72);margin:0 0 22px;
}
.footer-grid .app-badges{margin-bottom:0}

.footer-grid .socials-w{margin:20px 0 6px}
.footer-grid .social-handle{
  display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:50px;
  border:2px solid rgba(255,251,242,.28);color:rgba(255,251,242,.82);
  font-weight:600;font-size:14px;margin-top:10px;
}
.footer-grid .social-handle:hover{background:var(--yellow);border-color:var(--yellow);color:var(--brown)}