/* ==== GroupMaker – Pro (thème clair) ==== */
:root{
  --brand:#2c3e50;          /* bleu ardoise (header GroupMaker) */
  --brand-2:#18a2b8;        /* accent */
  --ink:#1f2a37;            /* texte principal */
  --muted:#6b7280;          /* texte secondaire */
  --bg:#f7f9fc;             /* fond page clair */
  --card:#ffffff;           /* fond cartes */
  --line:rgba(17,24,39,.08);/* bordures subtiles */
  --radius:14px;
  --shadow:0 6px 24px rgba(31,42,55,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);}

/* Hero / bannière */
.pro-hero{
  position:relative;min-height:340px;
  background:#e9eef5 center/cover no-repeat;
  display:flex;align-items:flex-end;border-bottom:1px solid var(--line);
}
.pro-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.75))}
.pro-hero__content{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;gap:1rem;
  width:100%;max-width:1100px;margin:0 auto;padding:28px 20px;
}
.pro-hero__brand h1{margin:.25rem 0 0;font-size:28px;line-height:1.2;color:var(--brand)}
.tagline{margin:.25rem 0 0;color:var(--muted)}
.pro-logo{
  width:72px;height:72px;object-fit:cover;border-radius:16px;
  border:1px solid var(--line);background:#fff;
}
.pro-hero__cta .btn{margin-left:.5rem}

/* Layout principal */
.pro-main{padding:18px;max-width:1100px;margin:0 auto}

/* Cartes génériques */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:14px 0;box-shadow:var(--shadow);
}
.card.subtle{background:#fafbff;border-style:dashed}

/* Grilles */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}

/* Breakpoints GroupMaker : Mobile <= 767, Tablette 768–1023, Desktop >= 1024 */
@media (max-width:1023px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* Badges (features) */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pro-badge{
  background:#eef6fb;color:#0f4d63;border:1px solid #d6e9f2;
  border-radius:999px;padding:.25rem .6rem;font-size:.85rem
}

/* Horaires */
.opening{list-style:none;padding:0;margin:.5rem 0;color:var(--muted)}
.opening li{padding:.15rem 0}

/* Offres */
.pro-offres h2{margin:6px 0 10px;color:var(--brand)}
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Tablette : 2 colonnes */
@media (max-width:1023px){
  .offers-grid{grid-template-columns:repeat(2,1fr)}
}
/* Mobile : 1 colonne */
@media (max-width:767px){
  .offers-grid{grid-template-columns:1fr}
}

.offer-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow)
}
.offer-head{display:flex;align-items:center;gap:.5rem}
.badge{
  display:inline-block;padding:.2rem .5rem;border-radius:8px;
  font-size:.75rem;border:1px solid var(--line);color:var(--brand)
}
.badge-pro{background:#eef6fb;border-color:#d6e9f2;color:#0f4d63}
.offer-text{color:#0f4d63;margin:.25rem 0 .5rem;font-weight:500}
.offer-meta{list-style:none;padding:0;margin:.25rem 0 .75rem;color:var(--muted)}
.offer-meta li{margin:.15rem 0}
.offer-cta{display:flex;gap:.5rem}

/* Champs de formulaire */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
select,
textarea{
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.18);
  border-radius:12px;
  background:#fff; color:var(--ink);
  font:inherit; box-sizing:border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(44,62,80,.12);
}

/* Boutons */
.btn{
  display:inline-block;background:#fff;color:var(--brand);
  border:1px solid var(--line);border-radius:10px;padding:.55rem .9rem;
  text-decoration:none;transition:transform .03s ease, box-shadow .2s ease;
}
.btn:hover{box-shadow:0 6px 20px rgba(31,42,55,.10)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}

/* Titres de sections */
.pro-infos h2,.pro-about h2,.pro-contact h2{color:var(--brand);margin:4px 0 8px}

.pro-adminbar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid rgba(17,24,39,.08);box-shadow:0 4px 12px rgba(31,42,55,.05)}
.pro-adminbar__inner{max-width:1100px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:10px;color:#2c3e50;font-size:14px}
.pro-adminbar .sep{width:1px;height:18px;background:rgba(17,24,39,.08)}
.pro-adminbar .flex{flex:1}
.pro-adminbar .status{color:#6b7280}
.btn.sm{padding:.35rem .6rem;font-size:.875rem;border-radius:8px}