/*
 * carte.css — CSS page carte Da Zietto v3.4 (CC-3 §5.3).
 * Extrait verbatim du <style> de dazietto-carte-v3.4.html.
 *
 * Transformations vs maquette (coherence CC-2 style.css) :
 *   Cormorant Garamond -> var(--font-heading)
 *   Dancing Script     -> var(--font-accent)
 *   Inter              -> var(--font-body)
 *   Playfair Display   -> CONSERVE litteral (carte-only, pas de var partagee, Piege B)
 *
 * Le :root ci-dessous est SCOPE page carte : carte.css est charge
 * uniquement par carte.html (jamais par la vitrine). Il redefinit les
 * vars carte (--paper-cream*, --tag-*, --shadow-card*) et OVERRIDE
 * --accent-gold (#B8860B carte vs #F5B544 vitrine). Zero pollution
 * vitrine (Piege B / §9.2). Les --font-* viennent du :root inline
 * de layout.html.twig (charge avant carte.css sur la page carte).
 */
  :root {
    --primary-rose: #F4D5D5;
    --primary-rose-soft: #FBE9E9;
    --primary-rose-deep: #E8B8B8;
    --secondary-nacre: #F8F4ED;
    --paper-cream: #F5EFE3;
    --paper-cream-deep: #EDE3D0;
    --paper-cream-darker: #E2D4BC;
    --accent-brown: #7A2B02;
    --accent-brown-dark: #5C1F00;
    --accent-gold: #B8860B;
    --tag-bg: rgba(122, 43, 2, 0.08);
    --tag-border: rgba(122, 43, 2, 0.18);
    --text-primary: #311B09;
    --text-secondary: #5F2C0D;
    --border-decorative: rgba(122, 43, 2, 0.22);
    --shadow-card: 0 4px 16px rgba(49, 27, 9, 0.1);
    --shadow-card-hover: 0 12px 32px rgba(49, 27, 9, 0.18);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: var(--font-heading);
    background: var(--paper-cream);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ====== BANDEAU TOPBAR ====== */
  .menu-topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(49, 27, 9, 0.97);
    color: var(--secondary-nacre);
    padding: 12px 28px;
    display: flex; justify-content: space-between; align-items: center;
    backdrop-filter: blur(10px);
    font-family: var(--font-body); font-size: 13px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
  .menu-topbar .brand-mini {
    display: flex; align-items: center; gap: 12px;
    color: var(--secondary-nacre); text-decoration: none;
  }
  .menu-topbar .brand-mini img.mascotte { height: 36px; width: auto; }
  .menu-topbar .brand-mini img.wordmark {
    height: 20px; width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.92;
  }
  .menu-topbar .actions { display: flex; gap: 10px; align-items: center; }
  .menu-topbar a.btn-back, .menu-topbar a.btn-shop {
    padding: 8px 16px; border-radius: 6px;
    text-decoration: none; font-size: 13px; font-weight: 500;
    transition: all 0.15s;
  }
  .menu-topbar a.btn-back {
    color: var(--secondary-nacre);
    border: 1px solid rgba(248, 244, 237, 0.3);
  }
  .menu-topbar a.btn-back:hover { background: rgba(248, 244, 237, 0.1); }
  .menu-topbar a.btn-shop {
    background: var(--accent-brown);
    color: var(--secondary-nacre);
  }
  .menu-topbar a.btn-shop:hover { background: var(--accent-brown-dark); }

  /* ====== HERO ÉDITORIAL (couverture magazine) ====== */
  .hero-cover {
    min-height: 92vh;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(ellipse at 30% 20%, var(--primary-rose-soft) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(184, 134, 11, 0.12) 0%, transparent 50%),
      var(--paper-cream);
    padding: 80px 32px;
    overflow: hidden;
  }
  /* Décorations dispersées */
  .hero-deco {
    position: absolute;
    opacity: 0.35;
    pointer-events: none;
  }
  .hero-deco.top-left { top: 8%; left: 5%; width: 90px; transform: rotate(-15deg); }
  .hero-deco.top-right { top: 12%; right: 8%; width: 110px; transform: rotate(20deg); }
  .hero-deco.bottom-left { bottom: 10%; left: 6%; width: 140px; transform: rotate(8deg); }
  .hero-deco.bottom-right { bottom: 15%; right: 4%; width: 95px; transform: rotate(-12deg); }

  .hero-content {
    text-align: center;
    max-width: 760px;
    z-index: 2;
    position: relative;
  }
  .hero-content .wordmark-hero {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 24px;
  }
  .hero-content .wordmark-hero img { width: 100%; height: auto; display: block; }
  .hero-content .mascotte-hero {
    width: 200px; height: 200px;
    margin: 20px auto 24px;
    display: block;
  }
  .hero-content .tagline-main {
    font-family: var(--font-accent);
    font-size: clamp(36px, 6vw, 56px);
    color: var(--accent-brown);
    line-height: 1.15;
    margin: 12px 0 6px;
  }
  .hero-content .tagline-fr {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 19px;
    color: var(--text-secondary);
    margin-bottom: 36px;
  }
  .hero-content .intro {
    font-size: 20px;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto 32px;
  }
  .hero-content .intro strong { color: var(--text-primary); font-weight: 600; }
  .hero-flourish {
    color: var(--accent-gold);
    margin: 28px auto;
    max-width: 200px;
  }
  .hero-flourish svg { width: 100%; height: auto; display: block; }
  .hero-content .scroll-hint {
    margin-top: 28px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.7;
    animation: bounce 2.4s infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
  }

  /* ====== EN-TÊTE DE SECTION ====== */
  .section-intro {
    max-width: 880px;
    margin: 0 auto;
    padding: 100px 32px 60px;
    text-align: center;
    position: relative;
  }
  .section-intro .section-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--accent-brown);
    margin-bottom: 16px;
  }
  .section-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 12px;
  }
  .section-intro h2 .accent {
    font-style: italic;
    font-weight: 400;
    color: var(--accent-brown);
  }
  .section-intro .lead {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 22px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 16px auto 0;
    line-height: 1.55;
  }
  .section-intro .deco-divider {
    color: var(--accent-gold);
    max-width: 180px;
    margin: 28px auto 0;
  }
  .section-intro .deco-divider svg { width: 100%; height: auto; }

  /* ====== MOSAÏQUE PIZZAS (asymétrique magazine) ====== */
  .pizzas-mosaic {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 100px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 28px;
    position: relative;
  }

  /* Tailles : large=8 cols, medium=6 cols, small=4 cols (sur 12) */
  .pizza-card--large { grid-column: span 8; }
  .pizza-card--medium { grid-column: span 6; }
  .pizza-card--small { grid-column: span 4; }

  .pizza-card {
    background: var(--secondary-nacre);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
  }
  .pizza-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
  }
  /* Variation chromatique légère pour casser la monotonie */
  .pizza-card:nth-child(2n) { background: var(--paper-cream); }
  .pizza-card:nth-child(3n) { background: var(--paper-cream-deep); }

  /* Décoration SVG dans le coin de la carte */
  .card-decoration {
    position: absolute;
    top: -10px; right: -10px;
    width: 130px; height: 130px;
    opacity: 0.55;
    transform: rotate(10deg);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.4s;
  }
  .card-decoration svg { width: 100%; height: 100%; display: block; }
  .pizza-card:hover .card-decoration {
    opacity: 0.85;
    transform: rotate(0deg) scale(1.05);
  }

  /* Petites cartes : décoration plus modeste */
  .pizza-card--small .card-decoration {
    width: 90px; height: 90px;
  }
  /* Grandes cartes : décoration plus généreuse */
  .pizza-card--large .card-decoration {
    width: 170px; height: 170px;
  }

  .card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .card-category {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-brown);
    margin-bottom: 10px;
    opacity: 0.85;
  }
  .card-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.05;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }
  .card-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.3;
  }
  .card-tagline {
    font-family: var(--font-accent);
    font-size: 22px;
    color: var(--accent-brown);
    margin-bottom: 16px;
    line-height: 1.2;
  }
  .card-story {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 22px;
    flex: 1;
  }
  .card-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
  }
  .tag {
    display: inline-block;
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    color: var(--accent-brown);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* ====== SECTION CITATION INTERCALAIRE ====== */
  .quote-section {
    background: linear-gradient(135deg, var(--paper-cream-deep) 0%, var(--paper-cream-darker) 100%);
    padding: 80px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .quote-section::before, .quote-section::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.15), transparent);
    border-radius: 50%;
    pointer-events: none;
  }
  .quote-section::before { top: -50px; left: -50px; }
  .quote-section::after { bottom: -50px; right: -50px; }
  .quote-italian {
    font-family: var(--font-accent);
    font-size: clamp(36px, 5vw, 58px);
    color: var(--accent-brown);
    line-height: 1.2;
    max-width: 760px;
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
  }
  .quote-french {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 20px;
    color: var(--text-secondary);
    margin-top: 8px;
    position: relative; z-index: 1;
  }

  /* ====== "+8 AUTRES" CARD ====== */
  .more-pizzas {
    grid-column: span 12;
    background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-brown-dark) 100%);
    color: var(--secondary-nacre);
    border-radius: 16px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
  }
  .more-pizzas::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(248, 244, 237, 0.08), transparent 70%);
    pointer-events: none;
  }
  .more-pizzas h3 {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative; z-index: 1;
  }
  .more-pizzas .subtitle {
    font-family: var(--font-accent);
    font-size: 26px;
    color: var(--primary-rose);
    margin-bottom: 18px;
    position: relative; z-index: 1;
  }
  .more-pizzas p {
    font-size: 17px;
    max-width: 640px;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 16px;
    position: relative; z-index: 1;
  }
  .more-pizzas .pizza-names {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--primary-rose);
    margin-bottom: 28px;
    position: relative; z-index: 1;
    line-height: 1.8;
  }
  .more-pizzas .btn-marchand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--secondary-nacre);
    color: var(--accent-brown);
    padding: 16px 36px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative; z-index: 1;
  }
  .more-pizzas .btn-marchand:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  }

  /* ====== DOLCI (cookies grille originale, conservée pour compat) ====== */
  .dolci-section {
    background: var(--paper-cream);
    padding: 80px 32px;
  }
  .dolci-grid {
    max-width: 1100px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
  }
  .dolci-card {
    background: var(--secondary-nacre);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-card);
  }
  .dolci-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
  .dolci-card .icon {
    font-size: 42px;
    margin-bottom: 12px;
    display: block;
  }
  .dolci-card h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .dolci-card p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
  }
  .dolci-signature {
    text-align: center;
    margin: 28px auto;
    max-width: 620px;
    font-family: var(--font-accent);
    font-size: 26px;
    color: var(--accent-brown);
    padding: 0 32px;
  }

  

  /* ====== PAGE FINALE CTA ====== */
  .final-page {
    background:
      radial-gradient(ellipse at 50% 20%, var(--primary-rose-soft) 0%, transparent 60%),
      linear-gradient(135deg, var(--paper-cream-deep) 0%, var(--secondary-nacre) 100%);
    padding: 120px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .final-page .final-deco {
    color: var(--accent-gold);
    max-width: 240px;
    margin: 0 auto 32px;
    opacity: 0.7;
  }
  .final-page .final-deco svg { width: 100%; height: auto; }
  .final-page .tagline-italian {
    font-family: var(--font-accent);
    font-size: clamp(38px, 5.5vw, 56px);
    color: var(--accent-brown);
    margin-bottom: 8px;
    line-height: 1.15;
  }
  .final-page h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
  .final-page .intro-final {
    max-width: 580px;
    margin: 0 auto 44px;
    font-size: 19px;
    color: var(--text-secondary);
    line-height: 1.75;
  }
  .final-page .cta-big {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--accent-brown);
    color: var(--secondary-nacre);
    padding: 22px 56px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(122, 43, 2, 0.4);
    transition: all 0.2s;
  }
  .final-page .cta-big:hover {
    background: var(--accent-brown-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(122, 43, 2, 0.5);
  }
  .final-page .cta-link-back {
    display: block;
    margin-top: 28px;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 16px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
  }
  .final-page .cta-link-back:hover { color: var(--accent-brown); }

  /* ====== FOOTER MINIMAL ====== */
  .menu-footer {
    background: var(--text-primary);
    color: rgba(248, 244, 237, 0.7);
    text-align: center;
    padding: 28px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;
  }
  .menu-footer a {
    color: var(--primary-rose);
    text-decoration: none;
    margin: 0 8px;
  }
  .menu-footer a:hover { text-decoration: underline; }

  /* ====== BOUTON FLOTTANT ====== */
  .floating-cta {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 50;
    background: var(--accent-brown);
    color: var(--secondary-nacre);
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(122, 43, 2, 0.45);
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .floating-cta:hover {
    background: var(--accent-brown-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(122, 43, 2, 0.55);
  }

  /* ====== SECTION COOKIES UNCLE FRED'Z ====== */
  .cookies-section {
    background: linear-gradient(180deg, var(--paper-cream) 0%, var(--paper-cream-deep) 100%);
    padding: 80px 32px 100px;
    position: relative;
  }
  .cookies-intro-text,
  .cookies-outro-text {
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 0 16px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  .cookies-intro-text p strong,
  .cookies-outro-text p strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .cookies-outro-text {
    margin-top: 60px;
    margin-bottom: 60px;
    position: relative;
  }
  .cookies-outro-text::before,
  .cookies-outro-text::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--border-decorative);
    margin: 0 auto;
  }
  .cookies-outro-text::before { margin-bottom: 28px; }
  .cookies-outro-text::after { margin-top: 28px; }

  /* Grille 3 cookies */
  .cookies-trio {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .cookie-card {
    background: var(--secondary-nacre);
    border-radius: 18px;
    padding: 32px 28px 36px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cookie-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
  }
  .cookie-visual {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
    transition: transform 0.4s;
  }
  .cookie-visual svg { width: 100%; height: 100%; display: block; }
  .cookie-card:hover .cookie-visual {
    transform: rotate(-5deg) scale(1.08);
  }
  .cookie-name {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .cookie-tagline {
    font-family: var(--font-accent);
    font-size: 20px;
    color: var(--accent-brown);
    margin-bottom: 14px;
  }
  .cookie-desc {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  .cookie-desc strong { color: var(--text-primary); font-weight: 600; }

  /* Cookie STAR (pleine largeur, mise en avant solo) */
  .cookie-star {
    max-width: 1180px;
    margin: 20px auto 0;
    background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-brown-dark) 100%);
    color: var(--secondary-nacre);
    border-radius: 18px;
    padding: 50px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    align-items: center;
    box-shadow: 0 10px 32px rgba(122, 43, 2, 0.25);
    position: relative;
    overflow: hidden;
  }
  .cookie-star::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(248, 244, 237, 0.1), transparent 70%);
    pointer-events: none;
  }
  .cookie-star-visual {
    width: 100%;
    aspect-ratio: 1;
    background: var(--secondary-nacre);
    border-radius: 50%;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
  }
  .cookie-star-visual svg { width: 100%; height: 100%; display: block; }
  .cookie-star-content {
    position: relative;
    z-index: 1;
  }
  .cookie-star-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary-rose);
    margin-bottom: 12px;
  }
  .cookie-star-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }
  .cookie-star-tagline {
    font-family: var(--font-accent);
    font-size: 28px;
    color: var(--primary-rose);
    margin-bottom: 18px;
  }
  .cookie-star-desc {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 22px;
    opacity: 0.95;
  }
  .cookie-star-desc strong { font-weight: 600; }
  .cookie-star-quote {
    font-family: var(--font-accent);
    font-size: 24px;
    color: var(--primary-rose);
    padding-top: 18px;
    border-top: 1px solid rgba(248, 244, 237, 0.2);
    line-height: 1.3;
  }
  .cookie-star-quote .quote-fr {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 14px;
    color: rgba(248, 244, 237, 0.7);
    margin-top: 4px;
  }

  /* ====== RESPONSIVE ====== */
  @media (max-width: 1024px) {
    .pizza-card--large { grid-column: span 12; }
    .pizza-card--medium { grid-column: span 6; }
    .pizza-card--small { grid-column: span 6; }
  }
  @media (max-width: 1024px) {
    .cookies-trio { grid-template-columns: repeat(2, 1fr); }
    .cookie-star {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 36px 28px;
      text-align: center;
    }
    .cookie-star-visual {
      max-width: 220px;
      margin: 0 auto;
    }
  }
  @media (max-width: 720px) {
    .pizza-card--large,
    .pizza-card--medium,
    .pizza-card--small { grid-column: span 12; }
    .cookies-trio { grid-template-columns: 1fr; }
    .pizzas-mosaic { padding: 0 16px 60px; gap: 20px; }
    .pizza-card { padding: 28px 24px; min-height: auto; }
    .card-decoration { width: 90px !important; height: 90px !important; }
    .hero-cover { min-height: 80vh; padding: 60px 24px; }
    .hero-deco { display: none; }
    .hero-content .mascotte-hero { width: 150px; height: 150px; }
    .section-intro { padding: 60px 24px 40px; }
    .more-pizzas { padding: 36px 24px; }
    .more-pizzas h3 { font-size: 28px; }
    .dolci-grid { grid-template-columns: 1fr; }
    .floating-cta { bottom: 14px; right: 14px; padding: 12px 20px; font-size: 13px; }
  }