/*
Theme Name: Resto & Potin — Enfant
Theme URI: https://restoetpotin.com
Description: Thème enfant de Hello Elementor pour Resto & Potin
Author: Fondeviolle
Template: hello-elementor
Version: 1.0.0
Text Domain: restoetpotin-enfant
*/
/* ===============================
   Thème enfant actif
   =============================== */
@import url("../hello-elementor/style.css");

/* Personnalisations spécifiques */
body {
  background-color: #f7ecd7;
}
/* =========================================================
   VARIABLES
   ======================================================= */
:root{
  /* Couleurs */
  --pg-cream:#f7ecd7;
  --pg-brown:#3e2818;
  --pg-brown-700:#4a2f1f;
  --pg-brown-800:#3b2518;

  /* Boutons */
  --pg-btn-bg:#8b3f0f;
  --pg-btn-bd:#7a3b22;
  --pg-btn-ink:#fff;

  /* États */
  --pg-success-bg:#ecfff0;
  --pg-success-bd:#b9e6b9;
  --pg-error-bg:#fff1f1;
  --pg-error-bd:#f1b6b6;

  /* Layout */
  --pg-radius:16px;
  --pg-pad:18px;
  --pg-gap:14px;
  --pg-max:1120px;

  /* Cartes */
  --card-img-h:190px;

  /* HÉRO : badge */
  --badgeW:380px;
  --badgeRight:24px;
  --noteX:0.12;
  --badge:url('https://restoetpotin.com/wp-content/uploads/2025/08/BADGE-MONTAGE-SANS-NOTE.png');
}

html{scroll-behavior:smooth}
body{background:var(--pg-cream)}

/* =========================================================
   BANDE MARRON (Section Elementor)
   ======================================================= */
.pg-band-section.elementor-section{
  background:linear-gradient(180deg,var(--pg-brown-700),var(--pg-brown-800));
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,0,0,.35);
}
.pg-band-section .elementor-container{max-width:var(--pg-max)}
.pg-band-section .elementor-widget:not(:last-child){margin-bottom:18px}

/* =========================================================
   COMPOSANTS GÉNÉRIQUES
   ======================================================= */
.pg-card{
  background:var(--pg-cream);
  border:3px solid var(--pg-brown);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.pg-title{margin:.25rem 0 1rem;font-weight:800;color:var(--pg-brown)}
.pg-label{display:block;margin-bottom:.35rem;color:var(--pg-brown);font-weight:700}

.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--pg-gap)}
@media (max-width:780px){.pg-grid{grid-template-columns:1fr}}
.pg-stack{display:grid;gap:10px}

/* médias / inputs / avis */
.pg-photo{
  min-height:140px;border:2px solid var(--pg-brown);border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--pg-cream);overflow:hidden
}
.pg-photo img{width:100%;height:100%;object-fit:cover}
.pg-input,.pg-text,.pg-avis{background:#fff;border:2px solid #d8c3a1;border-radius:10px;padding:.65rem .8rem}
.pg-text{min-height:140px}

.pg-chip{
  display:inline-flex;gap:.5rem;align-items:center;
  background:var(--pg-cream);border:2px solid #d8c3a1;border-radius:999px;
  padding:.45rem .8rem;color:var(--pg-brown);font-size:.95rem
}

/* Boutons */
.pg-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border-radius:10px;border:2px solid var(--pg-btn-bd);
  padding:.6rem 1rem;background:var(--pg-btn-bg);color:var(--pg-btn-ink);
  text-decoration:none;cursor:pointer;transition:transform .04s ease,filter .2s ease
}
.pg-btn:hover{filter:brightness(1.06)}
.pg-btn:active{transform:translateY(1px)}

/* Notices */
.pg-success{margin:.6rem 0;padding:.6rem .9rem;border-radius:8px;background:var(--pg-success-bg);border:1px solid var(--pg-success-bd)}
.pg-error{margin:.6rem 0;padding:.6rem .9rem;border-radius:8px;background:var(--pg-error-bg);border:1px solid var(--pg-error-bd)}
.pg-emails{border:1px dashed #d8c3a1;border-radius:10px;padding:10px}
.pg-email{display:block;margin:.25rem 0}

/* A11y */
.pg-btn:focus,.pg-input:focus,.pg-text:focus{outline:2px solid #77c48a;outline-offset:2px}
.pg-input::placeholder,.pg-text::placeholder{opacity:.7}

/* =========================================================
   BANDES POTIGOURM (fond marron)
   ======================================================= */
.bandeau-pgm,.compte-potigourm-band{
  background:#6b4b2e;color:#fff;border-radius:14px;padding:24px 18px;
  max-width:1100px;margin:22px auto;box-sizing:border-box
}
.bandeau-pgm .pg-card,.compte-potigourm-band .pg-card{background:rgba(255,255,255,.06);border-color:#d6b28a;color:#fff}
.bandeau-pgm .pg-title,.compte-potigourm-band .pg-title{color:#fff}
.bandeau-pgm .pg-label,.compte-potigourm-band .pg-label{color:#f2e2cf}
.bandeau-pgm .pg-input,.bandeau-pgm .pg-avis,
.compte-potigourm-band .pg-input,.compte-potigourm-band .pg-avis{
  background:rgba(255,255,255,.12);border-color:#e8d6b8;color:#fff
}
.bandeau-pgm .pg-chip,.compte-potigourm-band .pg-chip{border-color:#e8d6b8;color:#fff;background:transparent}

/* =========================================================
   FICHE RESTAURANT
   ======================================================= */
.rp-resto{display:grid;gap:16px}
.rp-box{background:var(--pg-cream);border:2px solid var(--pg-brown);border-radius:16px;padding:16px}
.rp-title{margin:0 0 8px;color:var(--pg-brown);font-size:1.6rem}
.rp-b1{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:900px){.rp-b1{grid-template-columns:1fr}}
.rp-infos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rp-btn{display:inline-block;border:1px solid var(--pg-brown);border-radius:10px;padding:8px 12px;color:var(--pg-brown);text-decoration:none}
.rp-btn-eye{white-space:nowrap}

/* Note pigne */
.rp-note{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:12px;border:1px solid var(--pg-brown)}
.rp-note img{width:42px;height:auto;display:block}
.rp-note-value{font-size:1.6rem;font-weight:700}
.pigne-vert{background:#e6f6e6}
.pigne-jaune{background:#fff7df}
.pigne-rouge{background:#ffe5e5}

/* Photos (scroll horizontal) */
.rp-b2 .rp-photos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.rp-b2 .rp-photos figure{min-width:260px;height:170px;margin:0;scroll-snap-align:start;border-radius:12px;overflow:hidden;border:1px solid var(--pg-brown);background:#fff}
.rp-b2 .rp-photos img{width:100%;height:100%;object-fit:cover;display:block}

/* Présentation + bouton avis */
.rp-b3{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
@media (max-width:700px){.rp-b3{grid-template-columns:1fr}}
.rp-b5{min-height:40px}
.rp-b6{min-height:60px;text-align:center;font-size:.95rem;opacity:.85}

/* Ancre sous header fixe */
#moyenne{scroll-margin-top:110px}

/* =========================================================
   HÉRO + BADGE/RUBAN
   ======================================================= */
.hero-wrap{position:relative}
.rp-hero{
  position:relative;min-height:520px;background-size:cover;background-position:center;
  border-radius:16px;overflow:hidden
}
@media (max-width:640px){.rp-hero{min-height:340px}}

.rpM-badge{
  position:absolute;top:38%;right:var(--badgeRight);transform:translateY(-50%);
  width:var(--badgeW);aspect-ratio:3.3/1;background:var(--badge) center/contain no-repeat;
  z-index:2;pointer-events:none
}
.elementor-widget-shortcode.rpM-note{
  position:absolute;top:38%;
  right:calc(var(--badgeRight) + var(--noteX) * var(--badgeW));
  transform:translateY(-50%);z-index:3;pointer-events:none
}
.elementor-widget-shortcode.rpM-note .elementor-shortcode{
  font:800 clamp(22px,2.8vw,40px)/1 "Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.35)
}
@media (max-width:640px){
  :root{--badgeW:300px}
  .rpM-badge{top:42%;right:16px}
  .elementor-widget-shortcode.rpM-note{top:42%;right:calc(16px + var(--noteX) * var(--badgeW))}
}

/* =========================================================
   GRILLES / CARTES RESTAURANTS
   ======================================================= */
/* Conteneur 5 → 3 → 2 → 1 colonnes */
.rp-grid-restos,.grid-restos{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;align-items:stretch;max-width:1200px;margin:40px auto
}
@media (max-width:1100px){.rp-grid-restos,.grid-restos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:750px){ .rp-grid-restos,.grid-restos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){ .rp-grid-restos,.grid-restos{grid-template-columns:1fr}}
.rp-grid-restos > p,.grid-restos > p{margin:0;display:contents}

/* Carte standard .rp-card (utilisée par des shortcodes) */
.rp-card{
  background:var(--pg-cream);border-radius:14px;overflow:hidden;color:var(--pg-brown);
  display:flex;flex-direction:column;height:100%
}
.rp-card__img{width:100%;height:var(--card-img-h);object-fit:cover;display:block}
.rp-card__body{background:#fff;padding:10px 12px 12px}
.rp-card__title{margin:0 0 4px;color:#9b1c6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-card__city{margin:0 0 6px}
.rp-card__cuisine{margin:0;font-weight:700}
.rp-card__band{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 14px;background:#1f7a45;color:#fff;text-decoration:none;
  font-weight:800;font-size:1.1rem;line-height:1;border-bottom-left-radius:14px;border-bottom-right-radius:14px;margin-top:auto
}
.rp-card__pine{height:40px;width:auto;display:inline-block}

/* Ancienne “vignette” harmonisée sur la même base */
.vignette{
  background:var(--pg-cream);border-radius:14px;overflow:hidden;color:var(--pg-brown);
  display:flex;flex-direction:column;height:100%;text-decoration:none
}
.vignette .main-img,
.vignette img{width:100%;height:var(--card-img-h);object-fit:cover;display:block}
.vignette .content,
.vignette .contenu{background:#fff;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.vignette .rp-title,
.vignette h3{margin:0 0 4px;color:#9b1c6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vignette p{margin:0}
.vignette .type-cuisine{margin:0;font-weight:700}
.vignette .note,.vignette .rp-band,.vignette .pied{
  display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 14px;
  background:#1f7a45;color:#fff;border-bottom-left-radius:14px;border-bottom-right-radius:14px;margin-top:auto
}
.vignette .note img,.vignette .rp-band .rp-pigne,.vignette .pigne{height:26px;width:auto;display:inline-block}
.vignette .note .note-val,.vignette .rp-band .elementor-shortcode{font-size:1.05rem;font-weight:800;line-height:1}
.rp-card>p,.rp-card>br,.vignette>p,.vignette>br{display:none!important}

/* Page Tous vos Restos : titre compact */
.page-id-73 .grid-restos .vignette .rp-title{
  font-size:17px!important;line-height:1.2!important;margin:8px 10px 4px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-transform:none!important
}
@media (max-width:1024px){.page-id-73 .grid-restos .vignette .rp-title{font-size:16px!important}}
@media (max-width:640px){ .page-id-73 .grid-restos .vignette .rp-title{font-size:15px!important}}
.page-id-73 .grid-restos .vignette .type-cuisine{color:#9b1c6b!important;font-weight:700!important}

/* Section full width centrée */
.elementor-section.elementor-section-full_width>.elementor-container{max-width:var(--pg-max);margin:0 auto}

/* =========================================================
   BLOCS D’ACCUEIL / TUILES
   ======================================================= */
.hp-tiles{display:grid;gap:18px}
@media (min-width:640px){.hp-tiles{grid-template-columns:1fr 1fr}}
.hp-tile{
  display:block;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.18);
  background:transparent;transition:transform .12s ease, filter .2s ease
}
.hp-tile:hover{transform:translateY(-2px);filter:brightness(1.02)}
.hp-tile img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.hp-tile[style]{width:100%!important;max-width:none!important}

/* =========================================================
   HERO (RP) — variante bloc
   ======================================================= */
.rpB{width:100%}
.rpB-hero{
  position:relative;width:100%;min-height:42vw;max-height:520px;
  background-image:var(--hero-img);background-size:cover;background-position:center;border-radius:16px;overflow:hidden
}
@media (max-width:1024px){.rpB-hero{min-height:56vw;max-height:56vw;border-radius:12px}}
@media (max-width:680px){ .rpB-hero{min-height:62vw;max-height:62vw;border-radius:10px}}

.rpB-badge{
  position:absolute;top:var(--badge-top,24px);right:var(--badge-right,24px);
  width:var(--badge-w,340px);max-width:46%;height:auto;display:block;pointer-events:none
}
.rpB-legend{
  position:absolute;left:18px;bottom:18px;padding:10px 14px;background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);border-radius:10px;color:#fff
}
.rpB-title{margin:0;font-size:clamp(20px,2.6vw,32px);line-height:1.1}
.rpB-cat{font-style:italic;opacity:.9}

/* =========================================================
   GRILLE “CARDS” GÉNÉRIQUE (si besoin)
   ======================================================= */
.resto-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;padding:0 12px;margin:30px auto;max-width:100%;box-sizing:border-box
}
.resto-card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.1);transition:transform .3s ease}
.resto-card:hover{transform:scale(1.02)}
.resto-card img{width:100%;height:180px;object-fit:cover}
.resto-card h3{margin:10px 0 5px;font-size:18px;color:#b30059;text-align:center}
.resto-card p{margin:0;font-size:14px;text-align:center;color:#444}
.resto-card .note{background:#2e7d32;color:#fff;padding:8px 12px;font-size:16px;text-align:center}
@media (max-width:600px){.resto-card img{height:150px}}


/* --- Barre de filtre pays centrée --- */
#rp-filtre-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto 25px auto;
}

#rp-filtre-wrap > div {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  padding: 14px 22px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  max-width: 420px;
  width: 100%;
}

#rp-filtre-wrap p, 
#rp-filtre-wrap div {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

#rp-filtre-wrap select {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  font-size: 15px;
  background-color: #fafafa;
  text-align: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  #rp-filtre-wrap > div {
    max-width: 90%;
    padding: 12px 10px;
  }
}
.pgm-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.chip-country { border-left: 4px solid #1a3b2b; }
.chip-style { border-left: 4px solid #bd2269; }
/* RESET STRUCTURE HERO */
.rp-hero-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* INFOS */
.rp-hero-infos{
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

/* CHIPS GROUP */
.rp-hero-infos .rp-chip{
  margin:0;
}

/* PHOTO */
.rp-hero-photo{
  width:100%;
}
/* ========== ALLÉGER LES 2 BLOCS BLANCS ========== */

/* Bloc 1 (droite) : carte info -> glass plus fin, moins massive */
.rp-hero-2027 .rp-info{
  background:rgba(255,255,255,.58) !important;   /* ↓ beaucoup moins blanc */
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 14px 34px rgba(11,18,32,.18) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;

  padding:12px 12px 10px !important;            /* ↓ moins “gros bloc” */
  border-radius:18px !important;
  width:min(390px, 100%) !important;            /* ↓ un peu plus étroit */
}

/* Nom + sous-titre plus compacts */
.rp-hero-2027 .rp-name{
  font-size:17px !important;
  margin-bottom:4px !important;
}
.rp-hero-2027 .rp-sub{
  margin-top:6px !important;
  font-size:12.5px !important;
  opacity:.92;
}

/* Pills internes : plus légères, moins grises */
.rp-hero-2027 .rp-pill{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(11,18,32,.10) !important;
  min-height:40px !important;
  border-radius:14px !important;
}

/* Téléphone : plus discret et plus “airbnb” */
.rp-hero-2027 .rp-phone{
  background:rgba(189,34,105,.10) !important;
  border:1px solid rgba(189,34,105,.18) !important;
  padding:10px 12px !important;
  border-radius:16px !important;
}

/* Bloc 2 (gauche) : note + CTA -> compact + glass */
.rp-hero-2027 .rp-score{
  background:rgba(255,255,255,.50) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:0 14px 34px rgba(11,18,32,.18) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;

  padding:12px !important;
  border-radius:18px !important;
  width:min(300px, 100%) !important;            /* ↓ plus petit */
}

/* Bulle note : un peu plus petite */
.rp-hero-2027 .rp-bubble{
  width:72px !important;
  height:72px !important;
  border-radius:20px !important;
}

/* CTA avis : moins large, plus élégant */
.rp-hero-2027 .rp-cta-avis{
  min-height:50px !important;
  border-radius:16px !important;
  padding:10px 12px !important;
}

/* Hint : plus fin */
.rp-hero-2027 .rp-score-hint{
  margin-top:8px !important;
  font-size:11.5px !important;
  opacity:.92;
}

/* Bande de liens bas : un poil plus translucide + compacte */
.rp-hero-2027 .rp-link{
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  height:48px !important;
  padding:0 16px !important;
  border-radius:999px !important;
}

/* ========== BONUS : on “libère” la photo en rendant l’overlay moins sombre ========== */
.rp-hero-2027 .rp-bg::after{
  background:
    radial-gradient(900px 450px at 78% 20%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 100%) !important;
}

/* ======================================================
   HERO RESTAURANT 2027 — ÉQUILIBRE CINÉMA / COLONNE DROITE
   ====================================================== */

.rp-hero-2027{
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1.6fr 1fr; /* 👈 équilibre visuel */
  gap: 20px;
  align-items: stretch;
}

/* -----------------------
   COLONNE GAUCHE — IMAGE
   ----------------------- */
.rp-hero-left{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* 👈 format cinéma */
  min-height: 260px;
  background: #1a1a1a;
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

.rp-hero-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bande titre */
.rp-hero-left .rp-overlay{
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

/* -----------------------
   COLONNE DROITE — ACTIONS
   ----------------------- */
.rp-hero-right{
  border-radius: 24px;
  padding: 16px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 45px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* Adresse */
.rp-hero-right .rp-addr{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  font-weight: 600;
}

/* Boutons */
.rp-hero-right .rp-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  transition: all .15s ease;
}

.rp-hero-right .rp-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,.15);
}

/* Bouton MAP */
.rp-hero-right .rp-map{
  background: linear-gradient(90deg, rgba(189,34,105,.25), #fff);
  border-color: rgba(189,34,105,.4);
}

/* Bouton AVIS — clignotant */
.rp-hero-right .rp-avis{
  position: relative;
  border-color: #bd2269;
}

.rp-hero-right .rp-avis::after{
  content: "";
  width: 10px;
  height: 10px;
  background: #bd2269;
  border-radius: 50%;
  animation: rpPulse 1.4s infinite;
}

@keyframes rpPulse{
  0%{box-shadow:0 0 0 0 rgba(189,34,105,.5)}
  70%{box-shadow:0 0 0 12px rgba(189,34,105,0)}
  100%{box-shadow:0 0 0 0 rgba(189,34,105,0)}
}

/* -----------------------
   MOBILE
   ----------------------- */
@media (max-width: 980px){
  .rp-hero-2027{
    grid-template-columns: 1fr;
  }
  .rp-hero-left{
    aspect-ratio: 16 / 10;
  }
}