/* ==========================================================================
   ZUTIL — TOOL.CSS
   Version production

   Feuille de style commune aux pages d’outils d’accords mets-vins.

   PRINCIPES
   --------------------------------------------------------------------------
   1. Les classes HTML existantes sont conservées pour éviter toute régression.
   2. Les couleurs, espacements, rayons, ombres et effets sont centralisés.
   3. Les composants sont organisés par responsabilité.
   4. Les adaptations tablette et mobile sont regroupées en fin de fichier.
   5. Les interactions clavier et la réduction des animations sont prises
      en charge.
   6. Les images hero doivent idéalement mesurer 900 × 600 px (ratio 3/2).

   SOMMAIRE
   --------------------------------------------------------------------------
   01. Design tokens
   02. Fondations locales
   03. Hero
   04. Carte outil
   05. Résultat
   06. Sections de contenu
   07. Cartes associées
   08. FAQ
   09. CTA final
   10. États JavaScript
   11. Responsive tablette
   12. Responsive mobile
   13. Accessibilité
========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Toutes les valeurs réutilisables sont centralisées ici.
========================================================================== */

:root {
  /* Couleurs de marque */
  --zutil-color-bg: #fbf6ef;
  --zutil-color-surface: #ffffff;
  --zutil-color-text: #1f1713;
  --zutil-color-muted: #746960;
  --zutil-color-wine: #6b1230;
  --zutil-color-wine-dark: #330714;
  --zutil-color-gold: #b88a3b;
  --zutil-color-green: #55745b;

  /* Couleurs fonctionnelles */
  --zutil-color-border: rgba(51, 7, 20, 0.10);
  --zutil-color-border-gold: rgba(184, 138, 59, 0.25);
  --zutil-color-surface-glass: rgba(255, 255, 255, 0.80);
  --zutil-color-surface-glass-strong: rgba(255, 255, 255, 0.90);

  /* Hero : effet verre */
  --zutil-hero-overlay-bg: rgba(45, 24, 14, 0.30);
  --zutil-hero-overlay-border: rgba(255, 255, 255, 0.58);
  --zutil-hero-overlay-text: rgba(255, 255, 255, 0.94);
  --zutil-hero-overlay-blur: 14px;

  /* Dégradé doré du titre de la carte hero */
  --zutil-gold-light: #f7deae;
  --zutil-gold-medium: #e8c07a;
  --zutil-gold-dark: #c89242;

  /* Échelle d’espacement */
  --zutil-space-1: 4px;
  --zutil-space-2: 8px;
  --zutil-space-3: 12px;
  --zutil-space-4: 16px;
  --zutil-space-5: 20px;
  --zutil-space-6: 24px;
  --zutil-space-7: 28px;
  --zutil-space-8: 32px;
  --zutil-space-9: 36px;
  --zutil-space-10: 42px;
  --zutil-space-11: 46px;
  --zutil-space-12: 56px;
  --zutil-space-13: 70px;

  /* Rayons */
  --zutil-radius-sm: 18px;
  --zutil-radius-md: 26px;
  --zutil-radius-lg: 30px;
  --zutil-radius-xl: 34px;
  --zutil-radius-hero: 38px;
  --zutil-radius-pill: 999px;

  /* Ombres */
  --zutil-shadow-xs: 0 8px 22px rgba(80, 43, 20, 0.05);
  --zutil-shadow-sm: 0 14px 40px rgba(80, 43, 20, 0.07);
  --zutil-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.08);
  --zutil-shadow-lg: 0 24px 70px rgba(80, 43, 20, 0.13);
  --zutil-shadow-hero-overlay: 0 12px 28px rgba(0, 0, 0, 0.16);

  /* Transitions */
  --zutil-transition-fast: 180ms ease;
  --zutil-transition-base: 250ms ease;

  /* Typographie */
  --zutil-font-display: "Playfair Display", Georgia, serif;
  --zutil-leading-body: 1.7;

  /* Largeur minimale de sécurité dans les grilles */
  --zutil-grid-min: 0;
}


/* ==========================================================================
   02. FONDATIONS LOCALES
   Ces règles restent ciblées afin de ne pas perturber le reste du site.
========================================================================== */

.hero,
.tool-card,
#result,
.section,
.final-cta-card {
  min-width: 0;
}

.primary-btn,
.pairing-btn,
.retry-btn {
  -webkit-tap-highlight-color: transparent;
}

.primary-btn,
.related-card {
  text-decoration: none;
}


/* ==========================================================================
   03. HERO
========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--zutil-space-9);
  padding: var(--zutil-space-13) 0 var(--zutil-space-10);
}


/* Badge placé au-dessus du titre */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--zutil-space-2);

  margin: 0 0 var(--zutil-space-6);
  padding: 9px var(--zutil-space-4);

  color: var(--zutil-color-wine-dark);
  background: rgba(184, 138, 59, 0.14);
  border: 1px solid rgba(184, 138, 59, 0.24);
  border-radius: var(--zutil-radius-pill);

  font-size: 0.88rem;
  font-weight: 900;
}


/* Titre principal */
.hero h1,
h1 {
  max-width: 780px;
  margin: 0 0 var(--zutil-space-6);

  color: var(--zutil-color-wine-dark);
  font-family: var(--zutil-font-display);
  font-size: clamp(3.1rem, 7vw, 6.5rem);
  line-height: 0.90;
  letter-spacing: -3px;
  text-wrap: balance;
}


/* Partie colorée du titre */
.gradient-text {
  color: transparent;
  background: linear-gradient(
    135deg,
    var(--zutil-color-wine),
    var(--zutil-color-gold),
    var(--zutil-color-green)
  );
  background-clip: text;
  -webkit-background-clip: text;
}


/* Description située sous le titre */
.hero-description {
  max-width: 680px;
  margin: 0 0 30px;

  color: var(--zutil-color-muted);
  font-size: 1.14rem;
  line-height: 1.85;
}


/* Actions du hero */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zutil-space-3);
}


/* Bouton principal */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 15px 22px;

  color: var(--zutil-color-surface);
  background: linear-gradient(
    135deg,
    var(--zutil-color-wine),
    var(--zutil-color-wine-dark)
  );
  border-radius: var(--zutil-radius-pill);
  box-shadow: 0 15px 35px rgba(107, 18, 48, 0.25);

  font-weight: 900;

  transition:
    transform var(--zutil-transition-fast),
    box-shadow var(--zutil-transition-fast);
}


/* Note secondaire à côté du bouton */
.secondary-note {
  color: var(--zutil-color-muted);
  font-size: 0.95rem;
  font-weight: 700;
}


/* Conteneur de l’image hero
   Le ratio 3/2 correspond aux fichiers 900 × 600 px. */
.hero-image {
  position: relative;
  isolation: isolate;

  width: 100%;
  aspect-ratio: 3 / 2;
  min-width: 0;
  overflow: hidden;

  background: #1a0f0a;
  border: 10px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--zutil-radius-hero);
  box-shadow: var(--zutil-shadow-lg);
}


/* Image du hero */
.hero-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* Carte de conseil superposée à l’image */
.floating-card {
  position: absolute;
  z-index: 2;

  right: 22px;
  bottom: 20px;
  left: 22px;

  padding: var(--zutil-space-5) var(--zutil-space-6);

  background: var(--zutil-hero-overlay-bg);
  border: 1px solid var(--zutil-hero-overlay-border);
  border-radius: 28px;
  box-shadow: var(--zutil-shadow-hero-overlay);

  -webkit-backdrop-filter: blur(var(--zutil-hero-overlay-blur));
  backdrop-filter: blur(var(--zutil-hero-overlay-blur));
}


/* Titre doré de la carte */
.floating-card strong {
  display: block;
  margin: 0 0 var(--zutil-space-2);

  background: linear-gradient(
    180deg,
    var(--zutil-gold-light) 0%,
    var(--zutil-gold-medium) 45%,
    var(--zutil-gold-dark) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;

  color: var(--zutil-gold-medium);
  -webkit-text-fill-color: transparent;

  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}


/* Texte de la carte */
.floating-card span {
  display: block;

  color: var(--zutil-hero-overlay-text);
  font-weight: 500;
  line-height: 1.55;
}


/* ==========================================================================
   04. CARTE OUTIL
========================================================================== */

.tool-card {
  padding: 30px;

  background: var(--zutil-color-surface-glass);
  border: 1px solid var(--zutil-color-surface-glass-strong);
  border-radius: var(--zutil-radius-xl);
  box-shadow: var(--zutil-shadow-lg);

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}


/* En-tête de la carte outil */
.tool-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zutil-space-5);

  margin: 0 0 var(--zutil-space-6);
  padding: 0 0 var(--zutil-space-6);

  border-bottom: 1px solid var(--zutil-color-border);
}


.tool-head h2 {
  margin: 0 0 var(--zutil-space-2);

  color: var(--zutil-color-wine-dark);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -1.4px;
  text-wrap: balance;
}


.tool-head p {
  max-width: 680px;
  margin: 0;

  color: var(--zutil-color-muted);
  line-height: var(--zutil-leading-body);
}


/* Badge indiquant le nombre de choix */
.badge {
  flex: 0 0 auto;

  padding: 10px 15px;

  color: var(--zutil-color-surface);
  background: var(--zutil-color-wine-dark);
  border-radius: var(--zutil-radius-pill);

  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}


/* Titre de catégorie */
.category-title {
  margin: var(--zutil-space-7) 0 14px;

  color: var(--zutil-color-gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}


/* Grille de choix */
.pairing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--zutil-grid-min), 1fr));
  gap: 14px;
}


/* Bouton d’accord */
.pairing-btn {
  min-height: 56px;
  padding: 18px 12px;

  color: var(--zutil-color-wine-dark);
  background: var(--zutil-color-surface);
  border: 1px solid var(--zutil-color-border);
  border-radius: var(--zutil-radius-sm);
  box-shadow: var(--zutil-shadow-xs);

  font: inherit;
  font-weight: 900;
  cursor: pointer;

  transition:
    transform var(--zutil-transition-base),
    color var(--zutil-transition-base),
    background var(--zutil-transition-base),
    box-shadow var(--zutil-transition-base);
}


/* État actif également utilisé par JavaScript */
.pairing-btn.active {
  color: var(--zutil-color-surface);
  background: linear-gradient(
    135deg,
    var(--zutil-color-wine),
    var(--zutil-color-wine-dark)
  );
  box-shadow: 0 16px 35px rgba(107, 18, 48, 0.24);
  transform: translateY(-3px);
}


/* ==========================================================================
   05. RÉSULTAT
========================================================================== */

#result {
  display: none;

  margin-top: 34px;
  padding: var(--zutil-space-7);

  background: linear-gradient(135deg, #ffffff, #fff7eb);
  border: 1px solid var(--zutil-color-border-gold);
  border-radius: var(--zutil-radius-lg);

  animation: zutil-reveal 350ms ease forwards;
}


@keyframes zutil-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.result-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: var(--zutil-space-7);
}


.pairing-img {
  width: 220px;
  height: 220px;

  object-fit: cover;
  border: 5px solid var(--zutil-color-surface);
  border-radius: 28px;
  box-shadow: 0 16px 35px rgba(80, 43, 20, 0.14);
}


.result-label {
  margin: 0 0 9px;

  color: var(--zutil-color-gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}


.wine-title {
  margin: 0 0 14px;

  color: var(--zutil-color-wine-dark);
  font-family: var(--zutil-font-display);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -1px;
  text-wrap: balance;
}


.wine-desc {
  margin: 0 0 var(--zutil-space-5);

  color: var(--zutil-color-muted);
  font-size: 1.02rem;
  line-height: 1.8;
}


/* Conseils associés au résultat */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--zutil-grid-min), 1fr));
  gap: var(--zutil-space-3);

  margin-top: 18px;
}


.tip {
  padding: 15px;

  background: var(--zutil-color-surface);
  border: 1px solid var(--zutil-color-border);
  border-radius: var(--zutil-radius-sm);

  font-size: 0.9rem;
}


.tip strong {
  display: block;
  margin: 0 0 5px;

  color: var(--zutil-color-wine-dark);
}


.tip span {
  color: var(--zutil-color-muted);
  line-height: 1.55;
}


/* Bouton permettant de relancer l’outil */
.retry-btn {
  min-height: 44px;
  margin-top: 22px;
  padding: 13px var(--zutil-space-5);

  color: var(--zutil-color-surface);
  background: var(--zutil-color-wine-dark);
  border: 0;
  border-radius: var(--zutil-radius-pill);

  font: inherit;
  font-weight: 900;
  cursor: pointer;

  transition:
    transform var(--zutil-transition-fast),
    box-shadow var(--zutil-transition-fast);
}


/* ==========================================================================
   06. SECTIONS DE CONTENU
========================================================================== */

.section {
  padding: var(--zutil-space-10) 0;
}


.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zutil-space-5);

  margin: 0 0 var(--zutil-space-6);
}


.section-head h2 {
  margin: 0;

  color: var(--zutil-color-wine-dark);
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -1.5px;
  text-wrap: balance;
}


.section-head p {
  max-width: 720px;
  margin: var(--zutil-space-2) 0 0;

  color: var(--zutil-color-muted);
  line-height: var(--zutil-leading-body);
}


.content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--zutil-grid-min), 1fr));
  gap: 18px;
}


.info-card,
.related-card,
.faq {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--zutil-color-surface-glass-strong);
  box-shadow: var(--zutil-shadow-sm);
}


.info-card {
  padding: var(--zutil-space-6);
  border-radius: 28px;
}


.info-card strong {
  display: block;
  margin: 0 0 10px;

  color: var(--zutil-color-wine-dark);
  font-size: 1.08rem;
}


.info-card p {
  margin: 0;

  color: var(--zutil-color-muted);
  line-height: 1.75;
}


/* ==========================================================================
   07. CARTES ASSOCIÉES
========================================================================== */

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--zutil-grid-min), 1fr));
  gap: 18px;
}


.related-card {
  padding: 22px;
  border-radius: var(--zutil-radius-md);

  transition:
    transform var(--zutil-transition-base),
    box-shadow var(--zutil-transition-base);
}


.related-card small {
  color: var(--zutil-color-gold);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}


.related-card h3 {
  margin: 10px 0 var(--zutil-space-2);
  color: var(--zutil-color-wine-dark);
}


.related-card p {
  margin: 0;

  color: var(--zutil-color-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}


/* ==========================================================================
   08. FAQ
========================================================================== */

.faq {
  padding: var(--zutil-space-7);
  border-radius: 32px;
  box-shadow: var(--zutil-shadow-lg);
}


.faq details {
  padding: 18px 0;
  border-bottom: 1px solid var(--zutil-color-border);
}


.faq details:last-child {
  border-bottom: 0;
}


.faq summary {
  color: var(--zutil-color-wine-dark);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}


.faq summary::marker {
  color: var(--zutil-color-gold);
}


.faq p {
  margin: var(--zutil-space-3) 0 0;

  color: var(--zutil-color-muted);
  line-height: 1.75;
}


/* ==========================================================================
   09. CTA FINAL
========================================================================== */

.final-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zutil-space-6);

  padding: var(--zutil-space-8);

  background: linear-gradient(135deg, #fff7ed, #ffffff);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 28px;
  box-shadow: var(--zutil-shadow-md);
}


.final-cta-card h2 {
  margin: var(--zutil-space-2) 0 10px;
  color: var(--zutil-color-wine-dark);
}


.final-cta-card p {
  max-width: 720px;
  margin: 0;

  color: var(--zutil-color-muted);
  line-height: var(--zutil-leading-body);
}


/* ==========================================================================
   10. ÉTATS JAVASCRIPT
========================================================================== */

.is-hidden {
  display: none !important;
}


.is-visible {
  display: block !important;
}


/* ==========================================================================
   11. INTERACTIONS SOURIS
   Les effets de survol ne sont appliqués que sur les appareils qui les
   prennent réellement en charge.
========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .primary-btn:hover,
  .retry-btn:hover {
    box-shadow: 0 18px 38px rgba(107, 18, 48, 0.30);
    transform: translateY(-2px);
  }

  .pairing-btn:hover {
    color: var(--zutil-color-surface);
    background: linear-gradient(
      135deg,
      var(--zutil-color-wine),
      var(--zutil-color-wine-dark)
    );
    box-shadow: 0 16px 35px rgba(107, 18, 48, 0.24);
    transform: translateY(-3px);
  }

  .related-card:hover {
    box-shadow: var(--zutil-shadow-lg);
    transform: translateY(-5px);
  }
}


/* ==========================================================================
   12. RESPONSIVE — TABLETTE
   Point de rupture principal : la colonne hero passe sur une seule colonne.
========================================================================== */

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .pairing-grid,
  .tips-grid,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .result-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pairing-img {
    margin-inline: auto;
  }
}


/* ==========================================================================
   13. RESPONSIVE — MOBILE
   La carte reste dans l’image et conserve le même effet que sur desktop,
   mais elle devient plus transparente et plus compacte.
========================================================================== */

@media (max-width: 768px) {
  .final-cta-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .floating-card {
    right: 7%;
    bottom: 6%;
    left: 7%;

    padding: 17px 18px;

    background: rgba(45, 24, 14, 0.22);
    border-color: rgba(255, 255, 255, 0.62);
    border-radius: 24px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .floating-card strong {
    margin-bottom: var(--zutil-space-2);
    font-size: 15px;
    line-height: 1.35;
  }

  .floating-card span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.48;
  }
}


@media (max-width: 650px) {
  header {
    position: static;
  }

  .nav-center {
    display: none;
  }

  h1 {
    letter-spacing: -2px;
  }

  .hero {
    gap: var(--zutil-space-7);
    padding: var(--zutil-space-11) 0 var(--zutil-space-8);
  }

  .hero-image {
    border-width: 7px;
    border-radius: var(--zutil-radius-lg);
  }

  .tool-card {
    padding: 22px;
  }

  .tool-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pairing-grid,
  .tips-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .pairing-img {
    width: 190px;
    height: 190px;
  }
}


/* Très petits écrans */
@media (max-width: 420px) {
  .hero {
    padding-top: 34px;
  }

  .floating-card {
    right: 6%;
    bottom: 5%;
    left: 6%;

    padding: 15px 16px;
    border-radius: 22px;
  }

  .floating-card strong {
    font-size: 14px;
  }

  .floating-card span {
    font-size: 13px;
    line-height: 1.44;
  }

  .tool-card,
  .faq,
  .final-cta-card {
    border-radius: var(--zutil-radius-md);
  }
}


/* ==========================================================================
   14. ACCESSIBILITÉ
========================================================================== */

/* Focus clavier visible */
.primary-btn:focus-visible,
.pairing-btn:focus-visible,
.retry-btn:focus-visible,
.related-card:focus-visible,
.faq summary:focus-visible {
  outline: 3px solid rgba(184, 138, 59, 0.60);
  outline-offset: 3px;
}


/* Réduction des animations selon la préférence système */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Meilleur contraste quand le navigateur désactive la transparence */
@media (prefers-contrast: more) {
  .floating-card {
    background: rgba(45, 24, 14, 0.72);
    border-color: rgba(255, 255, 255, 0.90);
  }

  .floating-card span {
    color: #ffffff;
  }
}