/* ============ Periplea — styles communs & responsive ============ */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---------- image slots ---------- */
.pp-img { position: relative; width: 100%; height: 100%; overflow: hidden; display: block; }
.pp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-credit { position: absolute; left: 8px; bottom: 6px; font-size: 9.5px; line-height: 1;
  color: rgba(255,255,255,.9); background: rgba(0,0,0,.38); padding: 3px 8px; border-radius: 99px;
  opacity: 0; transition: opacity .2s; z-index: 3; white-space: nowrap; max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis; }
.pp-img:hover .pp-credit { opacity: 1; }

/* ---------- accordéons ---------- */
.pp-acc-item { cursor: pointer; }
.pp-acc-item:not(.open) .pp-acc-body { display: none; }

/* ---------- filtres ---------- */
.pp-filter-btn { cursor: pointer; }
.pp-filter-item.pp-hidden, .pp-featured.pp-hidden { display: none !important; }

/* ---------- cartes cliquables (services home) ---------- */
.pp-card-link { cursor: pointer; }

/* ---------- vues liste / grille ---------- */
[data-action="view-list"], [data-action="view-grid"] { cursor: pointer; }

/* ---------- chatbot « Camille » (agent IA MeetYourSchool / Meetly) ----------
   La conversation elle-même est une iframe servie par meetyourschool.com et
   chartée côté plateforme (couleur #173EFF, avatar, textes).
   Le LANCEUR, le PANNEAU et la BULLE D'ACCROCHE sont injectés dans CETTE page
   par le loader : on les recharte donc ici, aux couleurs et polices Periplea.
   Les !important sont nécessaires : le loader pose des styles inline.
   NB : le libellé du lanceur est en CSS car le loader ignore `launcherText`
   dès qu'un avatar est défini — le garder synchro avec le champ du bot. */

/* lanceur : pastille blanche avatar + libellé (reprend la maquette Camille) */
.meetly-launcher {
  width: auto !important; height: auto !important;
  right: 22px !important; bottom: 22px !important;
  padding: 8px 20px 8px 8px !important;
  gap: 11px;
  background: #fff !important;
  border: 1px solid #EEEDF5 !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 40px rgba(80,70,150,.22) !important;
  transition: transform .15s ease, box-shadow .25s ease !important;
}
.meetly-launcher::after {
  content: "Une question ? Camille te répond";
  font: 600 14px 'Poppins', sans-serif; color: #16151a; white-space: nowrap;
}
.meetly-launcher:hover { transform: translateY(-2px) !important;
  box-shadow: 0 20px 48px rgba(23,62,255,.26) !important; }
.meetly-launcher:active { transform: translateY(0) scale(.98) !important; }
.meetly-launcher::before { display: none !important; }   /* halo pulsé : hors charte */
.meetly-launcher-img { width: 40px !important; height: 40px !important; flex: 0 0 40px; }
.meetly-launcher-dot { left: 34px; right: auto !important; bottom: 7px !important;
  width: 11px !important; height: 11px !important; background: #05E3A4 !important; }
.meetly-launcher-dismiss { top: -6px !important; right: -2px !important; }

/* panneau de conversation */
.meetly-container {
  right: 22px !important; bottom: 94px !important;
  width: 380px !important; max-width: calc(100vw - 32px) !important;
  border-radius: 20px !important;
  border: 1px solid #EEEDF5 !important;
  box-shadow: 0 26px 70px rgba(23,62,255,.18) !important;
}

/* bulle d'accroche */
.meetly-teaser {
  right: 22px !important; bottom: 94px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important; border-color: #EEEDF5 !important;
  box-shadow: 0 18px 44px rgba(80,70,150,.20) !important;
  font-family: 'DM Sans', sans-serif;
}
.meetly-teaser .t-title { font-family: 'Poppins', sans-serif; font-size: 14.5px; color: #16151a; }
.meetly-teaser .t-sub { font-size: 13.5px; color: #4a4954; }
.meetly-teaser .t-cta { font-family: 'Poppins', sans-serif; font-weight: 600; padding: 8px 14px !important; }

/* réponses rapides */
.meetly-choices .choice-btn { font-family: 'DM Sans', sans-serif !important; border-color: #E7E6F0 !important; }
.meetly-choices .choice-btn:hover { border-color: #173EFF !important; color: #173EFF; }

/* ---------- burger / menu mobile ---------- */
.pp-burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e2e0e8;
  background: #fff; cursor: pointer; align-items: center; justify-content: center; font-size: 17px;
  flex-shrink: 0; color: #16151a; }
.pp-mobile-menu { position: fixed; inset: 0; z-index: 300; background: rgba(255,255,255,.98);
  display: none; flex-direction: column; padding: 92px 30px 30px; overflow: auto; }
.pp-mobile-menu.open { display: flex; }
.pp-mobile-menu a { font-size: 20px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid #eee;
  font-family: 'Poppins', sans-serif; color: #16151a; text-decoration: none; }
.pp-mobile-close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid #e2e0e8; background: #fff; font-size: 20px; cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  [data-grid="4"], [data-grid="5"], [data-grid="6"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid="3"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 980px) {
  .pp-nav-links { display: none !important; }
  .pp-burger { display: inline-flex !important; }
}
@media (max-width: 900px) {
  /* hero home : colonne */
  [style*="min-height:520px"] { flex-direction: column !important; min-height: auto !important;
    gap: 30px !important; padding-top: 96px; }
  div[style*="width:43%"] { width: 100% !important; }
  /* héros en grille 2 colonnes -> 1 colonne */
  [data-grid="2"] { grid-template-columns: 1fr !important; }
  /* sections flex côte à côte -> colonne */
  section[style*="align-items:stretch"] { flex-direction: column !important; }
  section[style*="align-items:stretch"] > div[style*="min-height:380px"] { min-height: 240px !important; }
}
@media (max-width: 700px) {
  .pp-nav-right > a { display: none !important; }
}
@media (max-width: 640px) {
  [data-grid] { grid-template-columns: 1fr !important; }
  [data-autorows] { grid-auto-rows: auto !important; }
  [data-autorows] > div { min-height: 200px; }
  [data-span2] { grid-column: auto !important; }
  h1[style] { font-size: clamp(30px, 9vw, 42px) !important; letter-spacing: -1px !important; }
  h2[style] { font-size: clamp(23px, 6.5vw, 30px) !important; letter-spacing: -0.6px !important; }
  section[style] { padding-left: 20px !important; padding-right: 20px !important; }
  /* chatbot : le lanceur retombe sur une pastille ronde (avatar seul) */
  .meetly-launcher { padding: 8px !important; }
  .meetly-launcher::after { display: none; }
  .meetly-launcher-dot { left: auto !important; right: 4px !important; bottom: 4px !important; }
  .meetly-container { bottom: 84px !important; }
  .meetly-teaser { bottom: 84px !important; }
}