/* ============================================================
   Pizzeria Pepper — styles additionnels (100% hors-ligne)
   ============================================================ */

/* ---------- 1. Pizzas des offres (zoom + rotation au scroll) ----------
   Le transform est piloté par custom.js ; on garantit ici un
   clipping propre (coins arrondis) pendant l'effet. */
section[data-framer-name="Specials Offers"] [data-framer-name="Pizzas Stack"] [data-framer-name="Photo"] {
  overflow: hidden !important;
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------- 2. Carrousel de témoignages ---------- */
/* Masque les contrôles natifs morts (disabled + opacity 0) */
fieldset.framer--slideshow-controls { display: none !important; }

/* Transition douce du rail de slides */
.pp-car-track {
  transition: transform .65s cubic-bezier(.3, .75, .25, 1) !important;
  will-change: transform;
}

/* Cartes non sélectionnées : assombries + léger flou.
   Le <li> est en display:contents (non stylable) : le filtre porte
   sur son enfant direct, la carte visible. La carte sélectionnée
   (pp-active) reste parfaitement nette. */
.pp-car-track > li > div,
.pp-car-track > li.pp-dim,
.pp-car-track > li.pp-active {
  transition: filter .5s ease;
}
.pp-car-track > li > div.pp-dim,
.pp-car-track > li.pp-dim {
  filter: brightness(.42) saturate(.85) blur(3px);
}
.pp-car-track > li > div.pp-active,
.pp-car-track > li.pp-active {
  filter: none;
}

/* Flèches rondes
   z-index 4 : volontairement sous la navbar fixe (z-index 10) — les
   flèches passent ainsi SOUS la barre de navigation au lieu de la
   recouvrir (aucun ancêtre ne crée de contexte d'empilement, la
   comparaison se fait au niveau racine). Elles restent au-dessus des
   cartes du rail (z-index auto) et dans les limites de leur section. */
.pp-car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .25s cubic-bezier(.22, .68, .32, 1.2), background-color .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.pp-car-btn svg { display: block; pointer-events: none; }
.pp-car-prev { left: 16px; }
.pp-car-next { right: 16px; }
.pp-car-btn:hover {
  background: rgb(255, 0, 60);
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 10px 26px rgba(255, 0, 60, .45);
}
.pp-car-btn:active { transform: translateY(-50%) scale(.95); }
.pp-car-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- 3. Menu — onglets de catégories sans rechargement ---------- */
/* Cadre glissant : se place SOUS les onglets (z-index 0) dont les cartes
   sont rendues transparentes par custom.js — il ne masque jamais le texte. */
.pp-tab-glider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 24px;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(228, 228, 228);
  box-shadow: 0 3px 12px rgba(26, 26, 26, .10);
  pointer-events: none;
  transition: transform .45s cubic-bezier(.3, .75, .25, 1),
              width .45s cubic-bezier(.3, .75, .25, 1),
              height .45s cubic-bezier(.3, .75, .25, 1);
  will-change: transform, width, height;
}
.pp-tab-glider.pp-noanim { transition: none !important; }

/* Fondu de l'échange de catégorie (liste + titre + sous-titre) */
.pp-menu-swap,
.pp-menu-fade {
  transition: opacity .18s ease, transform .18s ease;
}
.pp-menu-leaving {
  opacity: 0 !important;
  transform: translateY(6px);
}

/* ---------- 4. Boutons — animations de hover ---------- */
/* Transition du boîtier (échelle + ombre) */
a.pp-btn {
  transition: transform .28s cubic-bezier(.22, .68, .32, 1.15), box-shadow .28s ease !important;
  will-change: transform;
}
a.pp-btn:hover {
  transform: scale(1.05) translateY(-2px) !important;
  z-index: 5;
}
/* Boutons ROUGES : grossissent + ombre rouge */
a.pp-btn-red:hover {
  box-shadow: 0 14px 30px rgba(255, 0, 60, .45) !important;
}
/* Boutons NOIRS : deviennent rouges + grossissent + ombre */
a.pp-btn-dark:hover {
  box-shadow: 0 14px 30px rgba(255, 0, 60, .40) !important;
}
.pp-btn-surface {
  transition: background-color .28s ease !important;
}
a.pp-btn-dark:hover .pp-btn-surface,
a.pp-btn-dark.pp-btn-surface:hover {
  background-color: rgb(255, 0, 60) !important;
}
/* Boutons BLANCS : grossissent + ombre douce */
a.pp-btn-white:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}
/* Léger enrichissement du clic */
a.pp-btn:active { transform: scale(1.01) translateY(0) !important; }

/* ---------- 5. Pizza du hero — effet scroll (piloté par custom.js) ----------
   Le transform est appliqué au conteneur INTERNE de pepperoni_pizza :
   l'animation d'apparition Framer (WAAPI) pilote le parent, on compose
   donc sur l'enfant. Aucun clipping nécessaire (section hero en
   overflow:hidden + image pizza ronde sur fond transparent). */
.pp-hero-zoom {
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------- 6. FAQ / horaires — éléments dépliables ----------
   Flèche chevron dans le slot droit de l'en-tête : rotation 180°
   quand la carte est ouverte. Contenu : hauteur animée via
   grid-template-rows (0fr -> 1fr) — fluide, sans mesure JS, et
   indépendante du contenu. Durées/courbes alignées sur le reste
   du site (.55s, cubic-bezier(.3,.75,.25,1)). */
.pp-acc-head {
  display: flex;
  align-items: center;
}
.pp-acc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgb(26, 26, 26);
  transition: transform .45s cubic-bezier(.3, .75, .25, 1),
              color .3s ease;
}
.pp-acc-arrow svg { display: block; }
.pp-acc {
  cursor: pointer;
  /* La carte Framer est un flex column avec row-gap:48px : ce gap
     s'appliquerait aussi au panneau replié (hauteur 0) et gonflerait
     la carte de 48px. On l'annule — l'espacement visuel est assuré
     par le padding du contenu (.pp-acc-body). */
  row-gap: 0 !important;
}
.pp-acc:hover .pp-acc-arrow { color: rgb(255, 0, 60); }
.pp-acc.pp-acc-open .pp-acc-arrow { transform: rotate(180deg); }
.pp-acc:focus-visible {
  outline: 2px solid rgb(255, 0, 60);
  outline-offset: 2px;
}

/* Panneau repliable */
.pp-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.3, .75, .25, 1);
}
.pp-acc.pp-acc-open .pp-acc-panel { grid-template-rows: 1fr; }
.pp-acc-inner {
  overflow: hidden;
  min-height: 0;
}
.pp-acc-body {
  padding: 20px 0 8px;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(51, 51, 51);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, .75, .25, 1);
}
.pp-acc.pp-acc-open .pp-acc-body {
  opacity: 1;
  transform: none;
  transition-delay: .08s; /* laisse la hauteur démarrer d'abord */
}

/* Contenu : rangées étiquette / description / valeur */
.pp-acc-note {
  margin: 0 0 12px;
  color: rgb(85, 85, 85);
}
.pp-acc-note-end { margin: 12px 0 0; }
.pp-acc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-acc-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(26, 26, 26, .08);
}
.pp-acc-note + .pp-acc-list li:first-child { border-top: 0; padding-top: 2px; }
.pp-acc-k {
  font-weight: 600;
  color: rgb(26, 26, 26);
  white-space: nowrap;
}
.pp-acc-v {
  flex: 1;
  min-width: 0;
  color: rgb(85, 85, 85);
}
.pp-acc-tag {
  margin-left: auto;
  color: rgb(255, 0, 60);
  font-weight: 600;
  white-space: nowrap;
}

/* Mobile : les rangées passent sur deux lignes lisibles */
@media (max-width: 809.98px) {
  .pp-acc-list li {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .pp-acc-k { flex-basis: calc(100% - 110px); }
  .pp-acc-tag { order: 2; }
  .pp-acc-v { order: 3; flex-basis: 100%; }
}

/* ---------- 7. Localisations — zoom image + pill "View Map" suiveur ----------
   Zoom : transform sur l'image (compositor), clipping assuré par le
   conteneur photo (overflow:hidden présent côté Framer). La pill est
   positionnée par custom.js (translate3d lissé) : aucune transition
   sur SON transform pour ne pas se battre avec la boucle rAF — le
   scale/fondu passe par l'élément interne .pp-viewmap-in. */
.pp-loc img {
  transition: transform .65s cubic-bezier(.22, .68, .32, 1);
  will-change: transform;
  backface-visibility: hidden;
}
.pp-loc.pp-loc-hover img { transform: scale(1.08); }

.pp-viewmap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  will-change: transform, opacity;
}
.pp-viewmap.pp-on { opacity: 1; }
.pp-viewmap-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  transform: scale(.8) translateY(4px);
  transition: transform .32s cubic-bezier(.22, .68, .32, 1.15);
}
.pp-viewmap.pp-on .pp-viewmap-in { transform: scale(1) translateY(0); }
.pp-viewmap-in svg { display: block; }

/* ---------- 8. Pizza de la newsletter — rotation lente continue ----------
   Les keyframes ré-intègrent le translateX(-50%) de centrage présent
   en inline : la rotation tourne autour du centre de la pizza sans
   casser son positionnement. 96 s/tour (2× plus lent), linéaire,
   sans interruption. */
@keyframes pp-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
section [data-framer-name="Pizza Stack"] [data-framer-name="pepperoni_pizza"] {
  animation: pp-spin 96s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------- 9. Accessibilité — prefers-reduced-motion ----------
   On neutralise les mouvements décoratifs ; les transitions
   fonctionnelles (accordéon, fondu de la pill) restent quasi
   instantanées pour ne rien casser. */
@media (prefers-reduced-motion: reduce) {
  section [data-framer-name="Pizza Stack"] [data-framer-name="pepperoni_pizza"] { animation: none; }
  .pp-loc img { transition: none; }
  .pp-loc.pp-loc-hover img { transform: none; }
  .pp-acc-panel,
  .pp-acc-body,
  .pp-acc-arrow,
  .pp-viewmap,
  .pp-viewmap-in,
  .pp-car-track {
    transition-duration: .01s !important;
  }
}