/**
 * home-fix.css — Override final pour la page d'accueil Yoozi.
 * Chargé en dernier dans wp_enqueue_scripts pour battre toute règle existante
 * (Elementor frontend.css, post-16.css, luxury-polish.css).
 *
 * Sélecteurs ultra-spécifiques préfixés par .elementor-section.
 */

/* ============================================
   0. CONTAINER WIDTH — aligner Elementor sur Blocksy 1290px
   Par défaut Elementor "boxed" limite à 1140px, on étend à 1290px
   pour que toutes les pages aient une largeur visuellement cohérente.
   ============================================ */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1290px;
}

/* ============================================
   0.B. STRUCTURES HTML INTERNES — grids pour blobs HTML
   Sections rendues comme widgets HTML contenant des items au lieu
   de sections Elementor avec colonnes.
   ============================================ */
/* Ethics : 4 piliers dans un widget HTML */
.yoozi-ethics-band .elementor-widget-html,
.yoozi-ethics-band .elementor-widget-html > .elementor-widget-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .yoozi-ethics-band .elementor-widget-html,
  .yoozi-ethics-band .elementor-widget-html > .elementor-widget-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .yoozi-ethics-band .elementor-widget-html,
  .yoozi-ethics-band .elementor-widget-html > .elementor-widget-container {
    grid-template-columns: 1fr;
  }
}

/* Timeline : 4 étapes dans .yoozi-timeline-rail */
.yoozi-timeline-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 32px 24px 0;
}
.yoozi-timeline-rail::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: rgba(200, 169, 110, 0.35);
  z-index: 0;
}
.yoozi-timeline-step {
  position: relative;
  text-align: center;
  z-index: 1;
}
.yoozi-timeline-step .yoozi-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yoozi-gold, #C8A96E);
  box-shadow: 0 0 0 6px var(--yoozi-cream, #FAF6EE);
  margin: 0 auto 18px;
}
.yoozi-timeline-step .yoozi-timeline-year {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  color: var(--yoozi-gold, #C8A96E);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 8px;
  white-space: nowrap;
}
.yoozi-timeline-step h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--yoozi-dark, #1F1F1F);
  margin: 0 0 12px;
}
.yoozi-timeline-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--yoozi-grey, #6B6B6B);
  margin: 0;
}
@media (max-width: 900px) {
  .yoozi-timeline-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .yoozi-timeline-rail::before { display: none; }
  .yoozi-timeline-step .yoozi-timeline-year { white-space: normal; }
}
@media (max-width: 540px) {
  .yoozi-timeline-rail { grid-template-columns: 1fr; }
}

/* Testimonials : 3 colonnes dans .yoozi-testimonials-grid */
.yoozi-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) {
  .yoozi-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   0.C-bis. NOTRE PRINCIPE — neutraliser overlay gradient (trompe la perception)
   et forcer le container à utiliser 100% de la largeur de la section.
   ============================================ */
.elementor-element-1ecced2 > .elementor-background-overlay {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}
.elementor-element-1ecced2 > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* ============================================
   0.C. NOTRE PRINCIPE — centrage absolu de tous les widgets
   Approche brutale : section/container/column/widget-wrap tout en 100%,
   chaque widget en text-align center, paragraphes avec max-width 720 + margin auto.
   ============================================ */
.elementor-element-1ecced2,
.elementor-element-1ecced2 > .elementor-container,
.elementor-element-1ecced2 .elementor-column.elementor-element-0d3e8dc,
.elementor-element-1ecced2 .elementor-widget-wrap.elementor-element-populated {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* CRITICAL : flex override pour que la column passe de 50% à 100% */
.elementor-column.elementor-element-0d3e8dc,
.elementor-element-0d3e8dc.elementor-column,
.elementor-element-1ecced2 .elementor-element-0d3e8dc {
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-element-1ecced2 .elementor-widget-wrap.elementor-element-populated {
  text-align: center !important;
}
.elementor-element-1ecced2 .elementor-element-d8b34d3,
.elementor-element-1ecced2 .elementor-element-b516213,
.elementor-element-1ecced2 .elementor-element-2a65dd7 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.elementor-element-1ecced2 .elementor-element-b516213 .elementor-widget-container,
.elementor-element-1ecced2 .elementor-element-2a65dd7 .elementor-widget-container,
.elementor-element-1ecced2 .elementor-element-d8b34d3 .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.elementor-element-1ecced2 .elementor-element-b516213 p,
.elementor-element-1ecced2 .elementor-element-2a65dd7 p {
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.7 !important;
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: 0.05em !important;
  margin: 0 auto 14px !important;
  max-width: 720px !important;
  text-align: center !important;
  display: block !important;
}
.elementor-element-1ecced2 .elementor-element-d8b34d3 .elementor-heading-title {
  margin: 0 auto !important;
  max-width: 720px !important;
  text-align: center !important;
  display: block !important;
}

/* ============================================
   0.D. TIMELINE YEAR — taille uniforme
   "Fonscolombe" doit avoir la même taille visuelle que "1885", "2025", "2026".
   On force 28px partout, en autorisant le wrap pour les mots longs.
   ============================================ */
.yoozi-timeline-rail .yoozi-timeline-year,
.yoozi-timeline-step .yoozi-timeline-year {
  font-family: 'Nunito', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--yoozi-gold, #C8A96E) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  margin: 0 0 8px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ============================================
   0.E. FOOTER — tailles uniformes (demande client)
   Tous les textes du footer (titres, menus, paragraphes, formulaires)
   à 13px Nunito. Seuls les widget-titles gardent le bold pour la hiérarchie.
   ============================================ */
.ct-footer [data-row="middle"] .widget-title,
.ct-footer [data-row="middle"] .widget-menu li a,
.ct-footer [data-row="middle"] .widget-menu li,
.ct-footer [data-row="middle"] p,
.ct-footer [data-row="middle"] .yoozi-nl-form input[type="email"] {
  font-family: 'Nunito', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.05em !important;
}
.ct-footer [data-row="middle"] .widget-title {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  color: #2A2A2A !important;
}
.ct-footer [data-row="middle"] .widget-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ct-footer [data-row="middle"] .widget-menu li {
  margin-bottom: 6px;
  font-weight: 400 !important;
}
.ct-footer [data-row="middle"] .widget-menu li a {
  text-transform: uppercase !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  color: #2A2A2A !important;
  transition: color 200ms ease;
}
.ct-footer [data-row="middle"] .widget-menu li a:hover {
  color: var(--yoozi-gold, #C8A96E) !important;
}

/* ============================================
   1. ETHICS — Mathieu 2026-05-12 :
   4 piliers sur une ligne desktop, 2x2 tablette, 1 col mobile.
   Les 4 yoozi-ethics-item sont dans un widget HTML unique,
   on applique la grille sur le widget + son container.
   ============================================ */
.yoozi-ethics-band .elementor-widget-html,
.yoozi-ethics-band .elementor-widget-html > .elementor-widget-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px 32px !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.yoozi-ethics-band .elementor-widget-html .yoozi-ethics-item {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: center;
}
@media (max-width: 900px) {
  .yoozi-ethics-band .elementor-widget-html,
  .yoozi-ethics-band .elementor-widget-html > .elementor-widget-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 640px !important;
    gap: 36px 28px !important;
  }
}
@media (max-width: 480px) {
  .yoozi-ethics-band .elementor-widget-html,
  .yoozi-ethics-band .elementor-widget-html > .elementor-widget-container {
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
    gap: 28px !important;
  }
}

/* ============================================
   2. TIMELINE — 4 colonnes (1885 / Fonscolombe / 2025 / 2026)
   ============================================ */
.elementor-section.yoozi-timeline-rail > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}
.elementor-section.yoozi-timeline-rail > .elementor-container > .elementor-column.yoozi-timeline-step {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  min-width: 0 !important;
}
.yoozi-timeline-rail .yoozi-timeline-year .elementor-heading-title {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .elementor-section.yoozi-timeline-rail > .elementor-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .yoozi-timeline-rail .yoozi-timeline-year .elementor-heading-title {
    white-space: normal !important;
  }
}

/* ============================================
   3. ENZO TEASER — 2 colonnes (portrait + texte)
   ============================================ */
.elementor-section.yoozi-enzo-teaser-grid > .elementor-container {
  display: grid !important;
  grid-template-columns: 0.8fr 1.3fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}
.elementor-section.yoozi-enzo-teaser-grid > .elementor-container > .elementor-column.yoozi-enzo-portrait,
.elementor-section.yoozi-enzo-teaser-grid > .elementor-container > .elementor-column.yoozi-enzo-text {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  min-width: 0 !important;
}
@media (max-width: 900px) {
  .elementor-section.yoozi-enzo-teaser-grid > .elementor-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ============================================
   4. TESTIMONIALS — 3 colonnes
   ============================================ */
.elementor-section.yoozi-testimonials-grid > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}
.elementor-section.yoozi-testimonials-grid > .elementor-container > .elementor-column.yoozi-testimonial {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  min-width: 0 !important;
}
@media (max-width: 900px) {
  .elementor-section.yoozi-testimonials-grid > .elementor-container {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   5. RITUELS — 4 cards (apéritif/brunch/toast/dîner)
   yoozi-rituels-inner est sur la SECTION (même élément que .elementor-section)
   donc on utilise .elementor-section.yoozi-rituels-inner (pas d'espace).
   ============================================ */
.elementor-section.yoozi-rituels-inner > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}
.elementor-section.yoozi-rituels-inner > .elementor-container > .elementor-column.yoozi-rituel-col {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  min-width: 0 !important;
}
@media (max-width: 900px) {
  .elementor-section.yoozi-rituels-inner > .elementor-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 540px) {
  .elementor-section.yoozi-rituels-inner > .elementor-container {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   6. BOUTEILLES — grille 2x2 (demande Mathieu 2026-05-05)
   ============================================ */
.elementor-section.yoozi-bottles-row > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 48px 56px !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
  padding: 0 24px !important;
}
.elementor-section.yoozi-bottles-row > .elementor-container > .elementor-column.yoozi-product-card {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  min-width: 0 !important;
}
.yoozi-bottles-row .yoozi-bottle-wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto 18px !important;
}
.yoozi-bottles-row .yoozi-bottle-wrap img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}
@media (max-width: 540px) {
  .elementor-section.yoozi-bottles-row > .elementor-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    max-width: 380px !important;
  }
}

/* ============================================
   7. BADGES HOVER — éliminés (demande client)
   ============================================ */
.yoozi-quality-badges,
.yoozi-quality-badge,
.yoozi-product-card .yoozi-quality-badges,
.yoozi-product-card:hover .yoozi-quality-badges {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================
   8. TIMELINE — alignement parfait des points sur chaque colonne
   Fix demande 2026-05-01 : chaque dot doit être centré sur la
   colonne du texte, et le rail horizontal doit relier les 4 dots
   exactement (et non border-to-border de la grille).
   ============================================ */
.yoozi-timeline-rail {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 32px 0 0 !important;
  position: relative !important;
  align-items: start !important;
}
.yoozi-timeline-rail::before {
  /* Le rail relie le centre de la 1re colonne au centre de la dernière :
     left = (100% / 8), right = (100% / 8). */
  left: 12.5% !important;
  right: 12.5% !important;
  top: 38px !important;
}
.yoozi-timeline-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 16px !important;
}
.yoozi-timeline-step .yoozi-timeline-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--yoozi-gold, #C8A96E) !important;
  box-shadow: 0 0 0 6px var(--yoozi-cream, #FAF6EE) !important;
  margin: 0 0 18px !important;
  flex: 0 0 12px !important;
}
.yoozi-timeline-step .yoozi-timeline-year {
  text-align: center !important;
  width: 100% !important;
}
.yoozi-timeline-step h3 {
  text-align: center !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}
.yoozi-timeline-step p {
  text-align: center !important;
  width: 100% !important;
  max-width: 220px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  .yoozi-timeline-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .yoozi-timeline-rail::before { display: none !important; }
}
@media (max-width: 540px) {
  .yoozi-timeline-rail { grid-template-columns: 1fr !important; }
}

/* ============================================
   9. FOOTER MASCOTTE — chat | (paragraphe + logo Yoozi en bas)
   La colonne footer widget-area-1 reçoit un layout flex côté image.
   Demande 2026-05-01 : logo Yoozi sous le paragraphe + texte plus large.
   ============================================ */
/* Mathieu 2026-05-05 (point 24) : logo Yoozi en haut, chat dessous, phrase sous le chat. */
.yoozi-foot-mascot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 320px;
}
.yoozi-foot-mascot__logo {
  width: 110px;
  height: auto;
  display: block;
  margin: 0;
  order: 0;
}
.yoozi-foot-mascot__cat {
  width: 120px;
  height: auto;
  display: block;
  order: 1;
}
.yoozi-foot-mascot__copy {
  display: block;
  margin: 0;
  order: 2;
}
.yoozi-foot-mascot__text {
  font-family: 'Nunito', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--y-ink, #1a1a1a) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  font-style: italic;
}
@media (max-width: 540px) {
  .yoozi-foot-mascot { gap: 10px; align-items: center; text-align: center; }
  .yoozi-foot-mascot__cat { width: 96px; }
  .yoozi-foot-mascot__logo { width: 90px; }
}

/* DEBUG retiré après diagnostic. Cause trouvée : flex-basis 50% non overridé. */



/* ============================================
   10. FOOTER CTA "PARLONS-EN" — form câblé yoozi_footer_contact
   ============================================ */
.yoozi-footer-cta {
  text-align: center;
  padding: 40px 20px;
  max-width: 560px;
  margin: 0 auto;
}
.yoozi-footer-cta__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 10px !important;
  color: #1F2A44 !important;
  text-transform: none !important;
}
.yoozi-footer-cta__sub {
  font-family: 'Nunito', sans-serif !important;
  font-size: 13px !important;
  color: #6B6B6B !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 22px !important;
  text-transform: none !important;
  line-height: 1.55 !important;
}
.yoozi-footer-contact-form {
  display: flex !important;
  align-items: center !important;
  max-width: 450px !important;
  margin: 0 auto !important;
  border-bottom: 2px solid #2A2A2A !important;
  padding-bottom: 4px !important;
  position: relative;
}
.yoozi-footer-contact-form input[type="email"] {
  border: none !important;
  background: transparent !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  flex: 1 !important;
  outline: none !important;
  padding: 8px 0 !important;
  color: #2A2A2A !important;
  letter-spacing: 1px !important;
}
.yoozi-footer-contact-form button[type="submit"] {
  border: none;
  background: #2A2A2A;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 200ms ease, transform 200ms ease;
}
.yoozi-footer-contact-form button[type="submit"]:hover {
  background: var(--yoozi-gold, #C8A96E);
  transform: translateX(2px);
}
.yoozi-footer-contact-form button.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.yoozi-footer-contact-notice {
  margin: 14px auto 0 !important;
  max-width: 450px !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  min-height: 1em;
}
.yoozi-footer-contact-notice.is-success {
  color: var(--yoozi-gold, #C8A96E) !important;
}
.yoozi-footer-contact-notice.is-error {
  color: #C24545 !important;
}