/* ══════════════════════════════════════════════════════════════════
   EATALIA v6.2.1 — Front-page stylesheet
   Complète les blocs dont les classes CSS étaient orphelines :
   - .ea-ticker (marquee horizontal animé)
   - .ea-reviews-carousel (carousel avis clients)
   - .ea-instagram-grid (grille Instagram)
   - .ea-shortcode-section (wrapper générique)
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════ TICKER / MARQUEE (v6.16.2) ══════════════
   Style entièrement piloté par CSS custom properties injectées
   en attribut style="" sur l'élément .ea-ticker depuis front-page.php.
   Variables disponibles :
     --ticker-font   : font-family (string)
     --ticker-size   : taille en px (utilisée comme borne max via clamp)
     --ticker-color  : couleur du texte
     --ticker-bg     : couleur de fond
     --ticker-sep    : couleur du séparateur (optionnel, défaut = ticker-color)
     --ticker-italic : "italic" ou "normal"
   ═════════════════════════════════════════════════════════ */
.ea-ticker {
  overflow: hidden;
  padding-block: 1.1rem;
  position: relative;
  /* Couleurs pilotées par les vars (defaults sûrs si vars absentes) */
  background: var(--ticker-bg, var(--col-surface, #FFFFFF));
  color:      var(--ticker-color, var(--col-ink, #3D3024));
  /* Bordure subtile en haut/bas (couleur dérivée du texte) */
  border-block: 1px solid color-mix(in srgb, var(--ticker-color, #3D3024) 12%, transparent);
  /* Fade doux sur les bords pour effet pro */
  --ticker-fade: 80px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--ticker-fade),
    #000 calc(100% - var(--ticker-fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--ticker-fade),
    #000 calc(100% - var(--ticker-fade)),
    transparent 100%
  );
}

/* Track défilant */
.ea-ticker__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  will-change: transform;
  animation: eap-ticker-scroll 40s linear infinite;
}

/* Vitesses modulables via data-speed */
.ea-ticker[data-speed="slow"]   .ea-ticker__track { animation-duration: 60s; }
.ea-ticker[data-speed="normal"] .ea-ticker__track { animation-duration: 40s; }
.ea-ticker[data-speed="fast"]   .ea-ticker__track { animation-duration: 22s; }

/* Pause au hover pour lisibilité */
.ea-ticker:hover .ea-ticker__track { animation-play-state: paused; }

/* Items — pilotés par les CSS vars du Customizer */
.ea-ticker__item {
  font-family: var(--ticker-font, 'Fraunces', 'Cormorant Garamond', serif);
  font-style:  var(--ticker-italic, italic);
  /* v6.16.3 — FIX : la taille choisie par l'utilisateur EST la borne haute
     (avant : 2vw cappait la taille sur grand écran, le réglage était ignoré).
     - max  = taille exacte choisie (atteinte sur desktop)
     - pref = ~85% + 0.5vw (légère adaptation fluide)
     - min  = 65% de la taille (lisible sur mobile, jamais < 12px) */
  font-size:   clamp(
    max(12px, calc(var(--ticker-size, 24px) * 0.65)),
    calc(var(--ticker-size, 24px) * 0.85 + 0.5vw),
    var(--ticker-size, 24px)
  );
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: inherit;
}

.ea-ticker__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Séparateur ~40% de la taille du texte */
  font-size: calc(var(--ticker-size, 24px) * 0.45);
  /* Couleur dédiée si fournie, sinon couleur texte avec opacité réduite */
  color: var(--ticker-sep, var(--ticker-color, currentColor));
  opacity: var(--ticker-sep-opacity, 0.55);
  flex-shrink: 0;
  line-height: 1;
}
/* Si l'utilisateur a défini une couleur de séparateur explicite,
   on retire l'opacité (sa couleur est déjà choisie) */
.ea-ticker[style*="--ticker-sep"] .ea-ticker__sep {
  opacity: 1;
}

/* Animation (translation de -50% car contenu dupliqué EXACTEMENT 2x — règle d'or n°8) */
@keyframes eap-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ea-ticker__track { animation: none; transform: none; }
  .ea-ticker {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
  }
}

/* ══════════════ CAROUSEL AVIS CLIENTS ══════════════ */
.ea-reviews-carousel {
  position: relative;
  overflow: hidden;
  padding-block: 0.5rem;
}

.ea-reviews-track {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--rev-cols, 3), 1fr);
  transition: transform 0.5s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  will-change: transform;
}

/* Navigation (flèches + dots) */
.ea-reviews-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.ea-reviews-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--col-surface, #FFFFFF);
  border: 1px solid var(--col-border, rgba(61,48,36,0.10));
  color: var(--col-ink, #3D3024);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(61,48,36,0.05));
}
.ea-reviews-arrow:hover {
  background: var(--col-primary, #C4572E);
  color: #FFFFFF;
  border-color: var(--col-primary, #C4572E);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(61,48,36,0.08));
}
.ea-reviews-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Dots de pagination */
.ea-reviews-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--col-border-strong, rgba(61,48,36,0.22));
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease, ease);
  margin: 0 0.2rem;
}
.ea-reviews-dot:hover {
  background: var(--col-ink-soft, #5A4A3A);
}
.ea-reviews-dot.active {
  width: 28px;
  border-radius: 99px;
  background: var(--col-primary, #C4572E);
}

/* Section dark : ajuster les couleurs des contrôles */
.ea-section--dark .ea-reviews-arrow,
.ea-section--primary .ea-reviews-arrow {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #FFFFFF;
}
.ea-section--dark .ea-reviews-arrow:hover,
.ea-section--primary .ea-reviews-arrow:hover {
  background: #FFFFFF;
  color: var(--col-primary, #C4572E);
  border-color: #FFFFFF;
}
.ea-section--dark .ea-reviews-dot,
.ea-section--primary .ea-reviews-dot {
  background: rgba(255,255,255,0.2);
}
.ea-section--dark .ea-reviews-dot.active,
.ea-section--primary .ea-reviews-dot.active {
  background: var(--col-accent, #CE9426);
}

/* Responsive : réduire cols sur tablette/mobile */
@media (max-width: 900px) {
  .ea-reviews-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .ea-reviews-track {
    grid-template-columns: 1fr !important;
  }
  .ea-reviews-arrow { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   GRILLE INSTAGRAM (v6.17.0 — section autonome via CSS vars --i-*)
   Vars injectées en style="" sur .ea-instagram-section :
     --i-title, --i-hl, --i-handle (couleurs)
     --i-font-t, --i-title-size    (typo titre)
     --i-cols, --i-gap, --i-radius (layout)
   Effets hover : .ea-instagram-hover--{overlay|zoom|darken|none}
   ══════════════════════════════════════════════════════════════════ */
.ea-instagram-section {
  background-color: var(--i-bg, #26201A);
  /* v6.18.2 — padding-top/bottom injectés en inline depuis Customizer (configurable 0-200px) */
}
.ea-instagram__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.ea-instagram__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--i-handle, #CE9426);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: opacity 250ms ease;
}
.ea-instagram__handle:hover { opacity: 0.85; }
.ea-instagram__title {
  font-family: var(--i-font-t, var(--font-display, 'Cormorant Garamond', serif));
  font-size: clamp(
    max(22px, calc(var(--i-title-size, 40px) * 0.65)),
    calc(var(--i-title-size, 40px) * 0.85 + 0.5vw),
    var(--i-title-size, 40px)
  );
  font-weight: 600;
  line-height: 1.1;
  color: var(--i-title, #FFFFFF);
  letter-spacing: -0.02em;
  margin: 0;
}
.ea-instagram__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--i-hl, #C4572E);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.ea-instagram-grid {
  display: grid;
  grid-template-columns: repeat(var(--i-cols, 6), 1fr);
  gap: var(--i-gap, 8px);
}

.ea-instagram-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--i-radius, 8px);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 350ms ease;
  text-decoration: none;
  color: inherit;
}
.ea-instagram-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 350ms ease;
}

/* Overlay (icône IG sur fond gradient) */
.ea-instagram-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--i-hl, #C4572E) 75%, transparent) 0%,
    color-mix(in oklab, var(--i-handle, #CE9426) 60%, transparent) 100%
  );
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

/* ─── Effets hover (variantes) ─── */
.ea-instagram-hover--overlay .ea-instagram-item:hover .ea-instagram-item__overlay {
  opacity: 1;
}
.ea-instagram-hover--zoom .ea-instagram-item:hover img {
  transform: scale(1.08);
}
.ea-instagram-hover--darken .ea-instagram-item:hover img {
  filter: brightness(0.7);
}

/* CTA "Voir plus" — v6.18.2 : bouton autonome 3 styles, plus de problème btn--outline */
.ea-instagram__actions {
  text-align: center;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.ea-instagram__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 250ms ease,
              background-color 250ms ease,
              color 250ms ease,
              border-color 250ms ease,
              box-shadow 250ms ease;
  border: 2px solid transparent;
  line-height: 1.2;
}
.ea-instagram__cta-arrow {
  display: inline-block;
  transition: transform 250ms ease;
}
.ea-instagram__cta:hover .ea-instagram__cta-arrow {
  transform: translateX(4px);
}
/* Style SOLID — fond plein, hover assombrit */
.ea-instagram__cta--solid {
  background: var(--i-cta-bg, #C4572E);
  color: var(--i-cta-color, #FFFFFF);
  border-color: var(--i-cta-bg, #C4572E);
}
.ea-instagram__cta--solid:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--i-cta-bg, #C4572E) 40%, transparent);
}
/* Style OUTLINE — bordure, hover remplit */
.ea-instagram__cta--outline {
  background: transparent;
  color: var(--i-cta-color, #FFFFFF);
  border-color: var(--i-cta-border, #C4572E);
}
.ea-instagram__cta--outline:hover {
  background: var(--i-cta-bg, #C4572E);
  color: var(--i-cta-color, #FFFFFF);
  transform: translateY(-2px);
}
/* Style GHOST — pas de fond ni bordure, juste underline animé */
.ea-instagram__cta--ghost {
  background: transparent;
  color: var(--i-cta-color, #FFFFFF);
  border-color: transparent;
  padding-inline: 0;
  border-radius: 0;
  border-bottom: 1.5px solid currentColor;
}
.ea-instagram__cta--ghost:hover {
  color: var(--i-cta-bg, #C4572E);
  gap: 1rem;
}

/* v6.18.2 — Grille sociaux sous le titre/handle
   Le data-count permet d'ajuster automatiquement la disposition (1, 2, 3, 4 ou 5 icônes) */
.ea-instagram__socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.ea-instagram__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--i-socials-size, 28px) + 18px);
  height: calc(var(--i-socials-size, 28px) + 18px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--i-socials, #CE9426) 14%, transparent);
  color: var(--i-socials, #CE9426);
  text-decoration: none;
  transition: background-color 250ms ease,
              color 250ms ease,
              transform 250ms ease;
}
.ea-instagram__social svg {
  width: var(--i-socials-size, 28px);
  height: var(--i-socials-size, 28px);
  display: block;
}
.ea-instagram__social:hover {
  background: var(--i-socials, #CE9426);
  color: var(--i-socials-hover, #FFFFFF);
  transform: translateY(-3px) scale(1.05);
}

/* Wrapper générique quand Instagram vient d'un shortcode externe */
.ea-instagram-shortcode { width: 100%; }
.ea-instagram-shortcode > :first-child { margin-top: 0; }
.ea-instagram-shortcode > :last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 768px) {
  /* Si user a mis 6 cols → on tombe à 3 sur tablette */
  .ea-instagram-grid { grid-template-columns: repeat(min(var(--i-cols, 6), 3), 1fr); }
}
@media (max-width: 480px) {
  /* Sur mobile, max 2 cols quoi qu'il arrive */
  .ea-instagram-grid { grid-template-columns: repeat(min(var(--i-cols, 6), 2), 1fr); }
}

/* ══════════════ SHORTCODE SECTION (wrapper générique) ══════════════ */
.ea-shortcode-section {
  width: 100%;
  padding-block: clamp(1rem, 3vw, 2rem);
}
.ea-shortcode-section > :first-child { margin-top: 0; }
.ea-shortcode-section > :last-child { margin-bottom: 0; }

/* Empêche les shortcodes d'avis/reviews de casser le layout */
.ea-shortcode-section iframe,
.ea-shortcode-section img {
  max-width: 100%;
  height: auto;
}

/* ══════════════ CORRECTIFS DIVERS (badge dynamique manquant) ══════════════ */

/* Ces classes étaient générées dynamiquement depuis PHP comme "ea-badge--{$variant}"
   Si une variante n'existe pas dans le CSS, le badge ne s'affiche pas — on fournit un fallback */
.ea-badge,
[class*="ea-badge--"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}