/* =====================================================================
   07 · EXTRAS — blocs de contenu réutilisables
   ---------------------------------------------------------------------
   Classes à utiliser dans l'éditeur WordPress (bloc HTML personnalisé
   ou champ « Classe CSS additionnelle ») et shortcodes du thème.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BANNIÈRE PROMO « coupon »
   <div class="notification-bar">
     <h4>5€ de réduction…</h4>
     <p>Utilisez le code <span class="notification-code">5euros</span></p>
     <p>*Conditions…</p>
   </div>
   --------------------------------------------------------------------- */
.notification-bar {
  position: relative;
  margin: .75rem 0 1.25rem;
  padding: 1.35rem 1.25rem 1.1rem;
  text-align: center;
  color: var(--ui-text);
  background: var(--brand-surface-alt);
  border: 2px dashed var(--brand-primary);
  border-radius: var(--brand-radius);
}

/* Ciseaux posés sur le pointillé */
.notification-bar::before {
  content: "✂";
  position: absolute;
  top: 0;
  left: 1.5rem;
  padding: 0 .35rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--brand-primary);
  background: var(--brand-surface);
  transform: translateY(-55%);
}

.notification-bar h3,
.notification-bar h4 {
  margin: 0 0 .5rem;
  font-family: var(--brand-font-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ui-title);
}

.notification-bar p {
  margin: .3rem 0;
  color: var(--ui-text);
}

.notification-bar p:last-child {
  margin-top: .6rem;
  font-size: .8125rem;
  font-style: italic;
  color: var(--ui-text-soft);
}

.notification-code,
.promo-code {
  display: inline-block;
  margin: .15rem .2rem;
  padding: .2em .8em;
  font-family: var(--brand-font-body);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand-on-accent);
  background: var(--brand-accent);
  border-radius: var(--brand-radius-sm);
}

/* ---------------------------------------------------------------------
   2. INFOS DU RESTAURANT — shortcode [restaurant_info]
   Statut ouvert/fermé + adresse + téléphone
   --------------------------------------------------------------------- */
.merchant-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  font-size: .9375rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
}

.merchant-info a {
  font-weight: 500;
  color: var(--ui-text);
  text-decoration: none;
}

.merchant-info a:hover { color: var(--ui-link-hover); }

.opening-hours {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35em .9em;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
}

.opening-hours::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.opening-hours.open {
  color: var(--brand-on-primary);
  background: var(--brand-success);
}

.opening-hours.open::before { animation: wfc-pulse 2s ease-in-out infinite; }

.opening-hours.closed {
  color: var(--brand-primary-dark);
  background: var(--ui-primary-soft);
}

@keyframes wfc-pulse {
  50% { opacity: .35; }
}

/* Horaires de la semaine — shortcode [horaires_restaurant] */
ul.restaurant-hours {
  container-type: inline-size;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
}

ul.restaurant-hours li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 1rem;
  margin: 0;
  padding: .6rem 1rem;
}

ul.restaurant-hours li + li { border-top: 1px dashed var(--brand-border); }

.restaurant-hours__day {
  font-weight: 600;
  color: var(--ui-text);
}

/* Un créneau par élément : dans un bloc étroit, les créneaux s'empilent tous */
.restaurant-hours__slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1rem;
  color: var(--ui-text-soft);
  font-variant-numeric: tabular-nums;
}

.restaurant-hours__slot { white-space: nowrap; }

@container (max-width: 400px) {
  .restaurant-hours__slots {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* Zones de livraison — shortcode [zones_livraison]
   1 colonne sur mobile, 2 dans une page avec barre latérale, une par tranche
   en pleine largeur (--delivery-zones-count posé par le shortcode) : jamais
   de carte orpheline sur une ligne. */
.delivery-zones {
  container-type: inline-size;
  margin: 0 0 1.25rem;
}

.delivery-zones__grid {
  display: grid;
  gap: 1rem;
}

@container (min-width: 30rem) {
  .delivery-zones__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 60rem) {
  .delivery-zones__grid { grid-template-columns: repeat(var(--delivery-zones-count, 4), minmax(0, 1fr)); }
}

.delivery-zones__band {
  padding: 1rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
}

.delivery-zones__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .75rem;
  margin: 0 0 .6rem;
  font-weight: 700;
  color: var(--ui-text);
}

.delivery-zones__title span {
  padding: .15em .75em;
  font-size: .8125rem;
  color: var(--brand-on-accent);
  background: var(--brand-accent);
  border-radius: 999px;
}

ul.delivery-zones__towns {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--ui-text-soft);
}

ul.delivery-zones__towns li {
  margin: 0;
  padding: .15rem 0;
}

/* ---------------------------------------------------------------------
   3. AVIS GOOGLE (widget Trustindex)
   --------------------------------------------------------------------- */
.ti-widget { margin-bottom: 1.25rem; }

/* ---------------------------------------------------------------------
   4. CLASSES UTILITAIRES DE CONTENU
   --------------------------------------------------------------------- */

/* Intertitre décoratif (ex. « Contact », « Horaires ») */
.title1 {
  margin-bottom: .5rem;
  font-family: var(--brand-font-display);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ui-title);
}

.title1 strong { font-weight: 400; }

/* Encadré d'information */
.notification {
  display: block;
  margin-bottom: .75rem;
  padding: .6rem 1rem;
  text-align: center;
  color: var(--ui-text);
  background: var(--ui-accent-soft);
  border-radius: var(--brand-radius-sm);
}

/* Mention « à emporter uniquement » */
.pickup-only {
  margin-left: .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--brand-primary-dark);
}

/* Encadré aux couleurs PayPal */
.paragraphe {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.25rem;
  color: #FFFFFF;
  background-color: #003087;
  border-radius: var(--brand-radius-sm);
}

/* Logos de paiement (description PayGreen au checkout) */
.payment-icons { margin: .5rem 0; }

.payment-icons img { max-width: 100%; }