/*
Theme Name: ESDI Starter
Theme URI: https://esdi.pro
Author: ESDI
Author URI: https://esdi.pro
Description: Block theme starter ESDI — base neutre déclinée par client (palette et typos dans theme.json). Gutenberg/FSE, sans page builder.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esdi-starter
*/

/* Les styles structurants vivent dans theme.json.
   Ici : uniquement les micro-interactions et détails non exprimables en JSON. */

/* Boutons — transition douce et léger relief au survol */
.wp-block-button__link {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Liens de navigation — soulignement animé discret */
.wp-block-navigation a {
  text-decoration: none;
  transition: color 0.15s ease;
}
.wp-block-navigation a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Images — coins légèrement adoucis par défaut */
.wp-block-image img,
.wp-block-gallery .wp-block-image img {
  border-radius: 6px;
}

/* Cartes de services (pattern) — survol discret */
.esdi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.esdi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Animations modernes — amélioration progressive.
   Les états "caché avant révélation" ne s'appliquent que si le JS a posé
   .esdi-js sur <html> ; sans JS ou avec prefers-reduced-motion, tout est
   visible et immobile. Voir assets/js/esdi-animations.js.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* --- Révélation au défilement --------------------------------------- */
.esdi-js .esdi-reveal,
.esdi-js .esdi-reveal-left,
.esdi-js .esdi-reveal-right {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.esdi-js .esdi-reveal        { transform: translateY(28px); }
.esdi-js .esdi-reveal-left   { transform: translateX(-36px); }
.esdi-js .esdi-reveal-right  { transform: translateX(36px); }
.esdi-js .esdi-reveal.is-visible,
.esdi-js .esdi-reveal-left.is-visible,
.esdi-js .esdi-reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Cascade sur les enfants directs --------------------------------- */
.esdi-js .esdi-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.esdi-js .esdi-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.esdi-js .esdi-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.esdi-js .esdi-stagger.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.esdi-js .esdi-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.esdi-js .esdi-stagger.is-visible > *:nth-child(5) { transition-delay: 0.48s; }
.esdi-js .esdi-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

/* --- Hero : entrée du contenu au chargement + Ken Burns --------------- */
.esdi-hero-intro .wp-block-cover__inner-container,
.wp-block-group.esdi-hero-intro > * {
  animation: esdi-fade-up 0.9s ease 0.15s both;
}
.esdi-kenburns img.wp-block-cover__image-background {
  animation: esdi-kenburns 22s ease-in-out infinite alternate;
}
@keyframes esdi-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes esdi-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* --- Zoom doux sur les images (galeries, cartes) ---------------------- */
.esdi-zoom-hover .wp-block-image {
  overflow: hidden;
  border-radius: 6px;
}
.esdi-zoom-hover .wp-block-image img {
  transition: transform 0.5s ease;
}
.esdi-zoom-hover .wp-block-image img:hover {
  transform: scale(1.05);
}

/* --- En-tête collant avec ombre au défilement -------------------------- */
.esdi-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.25s ease;
}
.esdi-header.is-scrolled {
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1);
}

/* --- Marque : écusson + lockup deux lignes (surtitre + nom en serif) ---- */
.esdi-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.esdi-brand:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.esdi-brand__badge {
  width: 44px;
  height: 44px;
  display: block;
}
.esdi-brand__text {
  display: grid;
  line-height: 1.15;
}
.esdi-brand__eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-2);
}
.esdi-brand__name {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
  transition: color 0.2s ease;
}
.esdi-brand:hover .esdi-brand__name {
  color: var(--wp--preset--color--primary);
}

/* --- DA Eau & Ciel : badges, avis, téléphone sticky --------------------- */
/* Badge pratique posé sur les cartes photo (« Dès 8 ans », « En famille »…) */
.esdi-badge {
  display: inline-block;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2em 0.9em;
  border-radius: 999px;
}
/* CTA pilule du header */
.esdi-header .wp-block-button__link {
  border-radius: 999px;
}
/* Étoiles d'avis — seule note chaude de la DA */
.esdi-etoiles {
  color: #FFD37A;
  letter-spacing: 2px;
}
/* Bande avis : note géante + citations serif italique */
.esdi-avis-note {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
}
.esdi-avis blockquote {
  border: none;
  margin: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
}
.esdi-avis blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: inherit;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
/* Téléphone sticky, tout le site (injecté par parts/footer.html) */
.esdi-tel-sticky {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 200;
  background: var(--wp--preset--color--accent);
  color: #FFFFFF;
  font-weight: 700;
  padding: 0.65em 1.2em;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(14, 44, 59, 0.35);
  text-decoration: none;
}
.esdi-tel-sticky:hover,
.esdi-tel-sticky:focus-visible {
  background: var(--wp--preset--color--primary);
  color: #FFFFFF;
}
@media print {
  .esdi-tel-sticky { display: none; }
}

/* --- Compteurs animés --------------------------------------------------- */
.esdi-count {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Saisonnalité — le markup contient les deux saisons, le CSS n'affiche que
   la bonne (classe body posée en PHP). En hiver, le JS peut poser
   .esdi-hiver-b sur <body> pour alterner le hero (fallback sans JS : hero A).
   ========================================================================== */
.esdi-saison-ete .esdi-hiver { display: none !important; }
.esdi-saison-hiver .esdi-ete { display: none !important; }
.esdi-saison-hiver.esdi-hiver-b .esdi-hero-hiver-a { display: none !important; }
.esdi-saison-hiver:not(.esdi-hiver-b) .esdi-hero-hiver-b { display: none !important; }

/* ==========================================================================
   Layout v0.3.0 — rail d'activités, encart sticky, grilles, kicker.
   ========================================================================== */

/* Sur-titre (kicker) au-dessus des titres de hero */
.esdi-kicker {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Rail d'activités phares : 4 colonnes desktop, défilement à snap sur mobile */
.esdi-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 781px) {
  .esdi-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--wp--preset--spacing--30));
    padding-inline: var(--wp--preset--spacing--30);
  }
  .esdi-rail::-webkit-scrollbar { display: none; }
  .esdi-rail > * {
    flex: 0 0 76%;
    scroll-snap-align: center;
  }
}
.esdi-rail-card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.esdi-rail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.esdi-rail-card a {
  color: inherit;
  text-decoration: none;
}

/* Encart tarifs sticky (pages activités) */
.esdi-sticky {
  position: sticky;
  top: 96px;
}
@media (max-width: 781px) {
  .esdi-sticky { position: static; }
  /* L'encart tarifs passe AVANT le contenu sur mobile */
  .wp-block-columns:has(> .esdi-tarifs-col) { display: flex; flex-direction: column; }
  .esdi-tarifs-col { order: -1; }
}

/* Grille de cartes (portails Été/Hiver) */
.esdi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* --- Respect strict de prefers-reduced-motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .esdi-hero-intro .wp-block-cover__inner-container,
  .esdi-kenburns img.wp-block-cover__image-background {
    animation: none;
  }
  .esdi-card, .esdi-zoom-hover .wp-block-image img, .wp-block-button__link {
    transition: none;
  }
}