/* ==============================================================
   UPDY — Community management (page dédiée)
   CSS complet et autonome
   ============================================================== */

/* -------------------------
   0) Variables + Reset
   ------------------------- */

:root{
  --primary:#FF8C00;
  --primary-dark:#E07B00;
  --text:#1A1A1A;
  --muted:#666;
  --line:#ECECEC;
  --white:#fff;

  --radius:14px;
  --radius-sm:10px;

  --shadow-0:0 1px 2px rgba(0,0,0,.06);
  --shadow-1:0 2px 8px rgba(0,0,0,.08);
  --shadow-2:0 8px 22px rgba(0,0,0,.12);
  --shadow-3:0 12px 30px rgba(0,0,0,.16);

  --ease:cubic-bezier(.4,0,.2,1);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height:1.55;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* -------------------------
   1) Container & titres
   ------------------------- */

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

.section-pad{ padding:3rem 0; }

.section-title{
  text-align:center;
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:-.2px;
  margin:0 0 .6rem;
}

.section-sub{
  text-align:center;
  color:#6b6b6b;
  margin:0 auto 1.6rem;
  max-width:780px;
}

/* petite barre sous certains titres */
.section-title + .section-sub::before{
  content:"";
  display:block;
  width:46px;height:4px;border-radius:2px;
  background:var(--primary);
  margin:.25rem auto .9rem;
}

/* -------------------------
   2) Header + nav + dropdown
   ------------------------- */

header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-0);
}

header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem;
}

header .logo{
  width:140px;height:42px;
  background:url("assets/logo-updy.png") center/contain no-repeat;
  text-indent:-9999px; overflow:hidden; display:inline-block;
}

nav ul{ display:flex; gap:1.4rem; }
nav a{
  position:relative;
  font-weight:600;
  padding:.25rem 0;
}
nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--primary);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
nav a:hover{ color:var(--primary); }
nav a:hover::after{ transform:scaleX(1); }

/* dropdown */
nav li.dropdown{ position:relative; }
nav li .dropdown-menu{
  position:absolute; left:0; top:calc(100% + 10px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-2);
  padding:.45rem 0;
  min-width:240px;
  display:none;
  z-index:10;
}
nav li .dropdown-menu a{
  display:block; padding:.6rem .9rem; font-weight:600; color:#2C2C2C;
}
nav li .dropdown-menu a:hover{ background:#f7f7f7; color:var(--primary); }
nav li.dropdown:hover .dropdown-menu{ display:block; }

/* -------------------------
   3) Boutons
   ------------------------- */

.btn-primary{
  display:inline-block;
  background:linear-gradient(90deg,#ff9500 0%,#ff7b00 100%);
  color:#fff;
  font-weight:600;
  border:none;
  border-radius:10px;
  padding:.68rem 1.2rem;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.btn-primary:active{ transform:translateY(0); filter:brightness(.92); }

.btn-secondary{
  display:inline-block; background:#fff; color:var(--primary);
  border:2px solid var(--primary); border-radius:10px;
  padding:.6rem 1rem; font-weight:700; transition:.2s;
}
.btn-secondary:hover{ background:var(--primary); color:#fff; }

/* -------------------------
   4) HERO (compatible .cm-hero & .hero-service)
   ------------------------- */

.cm-hero,
.hero-service{
  background:linear-gradient(140deg,#ffb254 0%,#FF8C00 45%,#ffb254 100%);
  color:#fff;
  text-align:center;
  padding:4rem 0 3rem;
}

.cm-hero .container,
.hero-service .container{ max-width:1100px; }

.cm-hero h1,
.hero-service h1{
  margin:.3rem 0 .6rem;
  font-size:2.2rem; font-weight:700; letter-spacing:.2px;
}

.cm-hero .hero-sub,
.hero-service .hero-sub{
  max-width:780px; margin:0 auto 1.3rem; opacity:.95; font-weight:500;
}

/* badges au-dessus du titre si nécessaires */
.hero-badges{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.8rem; }
.badge{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); color:#fff; padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.85rem; }

/* KPIs */
.kpi-row, .hero-kpis{
  display:flex; flex-wrap:wrap; gap:1.1rem; justify-content:center; margin:1.6rem 0 1rem;
}
.kpi-row > div, .hero-kpis > div{
  background:rgba(255,255,255,.96);
  border-radius:12px; padding:1rem 1.4rem; min-width:180px;
  text-align:center; box-shadow:var(--shadow-1); transition:transform .2s ease;
}
.kpi-row > div:hover, .hero-kpis > div:hover{ transform:translateY(-2px); }
.kpi-number{
  display:block; font-size:1.7rem; font-weight:700; color:var(--primary);
  line-height:1.1; margin-bottom:.3rem; font-variant-numeric:tabular-nums;
}
.kpi-label{ font-size:.95rem; color:#222; opacity:.96; }

/* CTA du hero: on ajoute un cadre doux pour l’intégrer */
.cm-hero .btn-primary,
.hero-service .btn-primary{ margin-top:1rem; }

/* -------------------------
   5) “Ce que vous pouvez attendre…”
   ------------------------- */

.expect{
  padding:3.2rem 0 2.4rem;
}

.cards-grid{
  max-width:1100px; margin:0 auto; padding:0 1rem;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
}

.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:1rem 1rem .95rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }

.card .card-head{
  display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.35rem;
}

/* pastille icône */
.card .ico{
  width:28px;height:28px;min-width:28px;border-radius:8px;
  display:grid; place-items:center;
  background:rgba(255,140,0,.12); color:var(--primary);
  font-weight:800; font-size:16px; line-height:1;
}

.card h3{
  font-size:1rem; margin:.2rem 0 .35rem; font-weight:700; color:#1f1f1f;
}
.card p{ margin:0; color:#505050; font-size:.95rem; line-height:1.45; }
.card ul{ margin:.4rem 0 0 1.1rem; color:#505050; font-size:.95rem; line-height:1.45; }
.card ul li{ margin:.25rem 0; }

/* petite note */
.note-center{ text-align:center; color:#7a7a7a; margin-top:.7rem; }

/* -------------------------
   6) “Ce qu’on fait chaque mois”
   ------------------------- */

.monthlies{ padding:2.4rem 0 2.2rem; }
.monthlies .grid-2{
  max-width:1100px; margin:0 auto; padding:0 1rem;
  display:grid; gap:1.1rem; grid-template-columns:repeat(2, minmax(300px, 1fr));
}
@media (max-width:920px){
  .monthlies .grid-2{ grid-template-columns:1fr; }
}

.monthlies .card{ padding:1rem 1.1rem .9rem; }
.monthlies .card h4{
  margin:.1rem 0 .35rem; font-size:1.02rem; font-weight:800; color:#1c1c1c;
}
.monthlies .card ul{ margin:.4rem 0 0 1.1rem; }
.monthlies .card .ico{ background:rgba(255,140,0,.14); }

/* -------------------------
   7) Bandeau CTA bas de page
   ------------------------- */

.cta-wide{
  background:linear-gradient(0deg,#fff 0%,#fff 48%, #fff6ec 48%, #fff6ec 100%);
  padding:2rem 0 2.6rem;
}
.cta-wide .inner{
  max-width:960px; margin:0 auto; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:1.2rem 1rem; box-shadow:var(--shadow-1);
}
.cta-wide h3{ margin:.1rem 0 .5rem; font-size:1.25rem; }
.cta-wide p{ margin:0 0 .9rem; color:#6b6b6b; }

/* -------------------------
   8) Footer
   ------------------------- */

.footer{
  background:linear-gradient(135deg, #1a1a1a 0%, #2b2b2b 100%);
  color:#eee;
  margin-top:3rem;
}
.footer .footer-container{ max-width:1200px; margin:0 auto; padding:2.4rem 1rem; }
.footer-top{
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:1.6rem;
}
.footer-brand{ flex:1 1 260px; }
.footer-logo{ height:70px; display:block; margin-bottom:.8rem; }
.footer-brand p{ color:#cfcfcf; max-width:320px; margin:0; }

.footer-links{ display:flex; gap:3rem; }
.footer-links h4,
.footer-contact h4{ margin:.1rem 0 .6rem; color:#fff; font-size:1rem; }
.footer-links ul{ margin:0; padding:0; list-style:none; }
.footer-links li{ margin:.35rem 0; }
.footer-links a{ color:#d2d2d2; }
.footer-links a:hover{ color:var(--primary); }

.footer-contact p{ margin:.25rem 0; }
.footer-contact a{ color:#d2d2d2; }
.footer-contact a:hover{ color:var(--primary); }

.footer-bottom{ text-align:center; color:#bdbdbd; padding:1rem 0 .4rem; }

/* -------------------------
   9) Utilitaires
   ------------------------- */

.m-0{ margin:0!important; } .mt-1{ margin-top:.25rem!important; }
.mt-2{ margin-top:.5rem!important; } .mt-3{ margin-top:1rem!important; }
.mb-1{ margin-bottom:.25rem!important; } .mb-2{ margin-bottom:.5rem!important; }
.mb-3{ margin-bottom:1rem!important; }

.text-center{ text-align:center!important; }
.text-muted{ color:#777!important; }

/* -------------------------
   10) Responsive global
   ------------------------- */

@media (max-width:860px){
  .cm-hero h1,.hero-service h1{ font-size:1.9rem; }
  .kpi-number{ font-size:1.85rem; }
  nav ul{ gap:1rem; }
}

@media (max-width:640px){
  header .container{ padding:.8rem 1rem; }
  .kpi-row > div, .hero-kpis > div{ min-width:160px; }
  .section-title{ font-size:1.5rem; }
}

/* -------------------------
   11) Sélecteurs “de secours”
   ------------------------- */

/* anciennes classes vues dans tes pages : réutilisées ici pour compat */
.cards, .features, .features-grid{ display:contents; } /* neutralise sans casser */

/* HERO */
.cm-hero{ background:linear-gradient(140deg,#ffb254 0%,#FF8C00 45%,#ffb254 100%); color:#fff; text-align:center; padding:4rem 0 3rem; }
.cm-hero__inner{ max-width:1100px; margin:0 auto; padding:0 1rem; }
.cm-hero h1{ margin:.3rem 0 .6rem; font-size:2.2rem; font-weight:700; letter-spacing:.2px; }
.cm-hero-sub{ max-width:780px; margin:0 auto 1.3rem; opacity:.95; font-weight:500; }

/* KPIs (hero) */
.cm-kpis{ display:flex; flex-wrap:wrap; gap:1.1rem; justify-content:center; margin:1.6rem 0 1rem; }
.cm-kpi{ background:rgba(255,255,255,.96); border-radius:12px; padding:1rem 1.4rem; min-width:180px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .2s ease; }
.cm-kpi:hover{ transform:translateY(-2px); }
.cm-kpi-number{ display:block; font-size:1.7rem; font-weight:700; color:#FF8C00; line-height:1.1; margin-bottom:.3rem; font-variant-numeric:tabular-nums; }
.cm-kpi-number .slash{ padding:0 .08em; }
.cm-kpi-label{ font-size:.95rem; color:#222; opacity:.96; }

/* SECTION RÉSULTATS (cartes) */
.cm-results{ padding:3.2rem 0 2.4rem; }
.cm-results .cm-lead{ text-align:center; color:#6b6b6b; margin:0 auto 1.6rem; max-width:780px; }
.cm-cards{ max-width:1100px; margin:0 auto; padding:0 1rem; display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.cm-card{ background:#fff; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.08); padding:1rem 1rem .95rem; transition:transform .2s ease, box-shadow .2s ease; }
.cm-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.cm-card-head{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.35rem; }
.cm-icon{ width:28px; height:28px; min-width:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,140,0,.12); color:#FF8C00; font-weight:800; font-size:16px; line-height:1; }
.cm-card h3{ font-size:1rem; margin:.2rem 0 .35rem; font-weight:700; color:#1f1f1f; }
.cm-card-body{ color:#505050; font-size:.95rem; line-height:1.45; }
.cm-note{ text-align:center; color:#7a7a7a; margin-top:.7rem; }

/* SECTION “CHAQUE MOIS” */
.cm-monthly{ padding:2.4rem 0 2.2rem; }
.cm-month-grid{ max-width:1100px; margin:0 auto; padding:0 1rem; display:grid; gap:1.1rem; grid-template-columns:repeat(2,minmax(300px,1fr)); }
@media (max-width:920px){ .cm-month-grid{ grid-template-columns:1fr; } }
.cm-step{ background:#fff; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.08); padding:1rem 1.1rem .9rem; transition:transform .2s ease, box-shadow .2s ease; display:flex; gap:.8rem; }
.cm-step:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.cm-ic{ width:28px; height:28px; min-width:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,140,0,.14); color:#FF8C00; font-weight:800; font-size:16px; }
.cm-step-body h4{ margin:.1rem 0 .35rem; font-size:1.02rem; font-weight:800; color:#1c1c1c; }
.cm-step-body ul{ margin:.3rem 0 0 1.1rem; color:#505050; font-size:.95rem; line-height:1.45; }

/* CTA propre */
.cm-cta{ background:#fff; padding:2rem 0; }
.cm-cta__inner{ max-width:960px; margin:0 auto; text-align:center; background:#fff; border:1px solid #ECECEC; border-radius:14px; padding:1.2rem 1rem; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cm-cta h3{ margin:.1rem 0 .6rem; font-size:1.25rem; }
.cm-btn{ display:inline-block; font-weight:600; border-radius:10px; padding:.68rem 1.2rem; }
.cm-btn--primary{ background:linear-gradient(90deg,#ff9500 0%,#ff7b00 100%); color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.18); transition:transform .15s ease, filter .2s ease, box-shadow .2s ease; }
.cm-btn--primary:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px rgba(0,0,0,.2); }

/* FOOTER (alias) */
.cm-footer{ background:linear-gradient(135deg,#1a1a1a 0%,#2b2b2b 100%); color:#eee; margin-top:3rem; }
.cm-footer .footer-container{ max-width:1200px; margin:0 auto; padding:2.4rem 1rem; }
.cm-footer .footer-top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:1.6rem; }
.cm-footer .footer-brand{ flex:1 1 260px; }
.cm-footer .footer-logo{ height:70px; display:block; margin-bottom:.8rem; }
.cm-footer .footer-brand p{ color:#cfcfcf; max-width:320px; margin:0; }
.cm-footer .footer-links{ display:flex; gap:3rem; }
.cm-footer .footer-links h4, .cm-footer .footer-contact h4{ margin:.1rem 0 .6rem; color:#fff; font-size:1rem; }
.cm-footer .footer-links a{ color:#d2d2d2; }
.cm-footer .footer-links a:hover{ color:#FF8C00; }
.cm-footer .footer-contact p{ margin:.25rem 0; }
.cm-footer .footer-contact a{ color:#d2d2d2; }
.cm-footer .footer-contact a:hover{ color:#FF8C00; }
.cm-footer .footer-bottom{ text-align:center; color:#bdbdbd; padding:1rem 0 .4rem; }

/* Bande réseaux sociaux sous le CTA */
.cm-social-strip{
  display:flex; align-items:center; justify-content:center;
  gap:.8rem; margin: .9rem 0 0;
  opacity:.95;
}
.cm-social{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:8px; background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.cm-social svg{ width:18px; height:18px; }
.cm-social:hover{ transform: translateY(-2px); background: rgba(255,255,255,.28); }

/* Couleurs de marque au survol (discret, garde l’esthétique) */
.cm-fb:hover svg { color:#1877F2; fill:currentColor; }
.cm-ig:hover svg { color:#E1306C; fill:currentColor; }
.cm-tk:hover svg { color:#111;    fill:currentColor; }
.cm-li:hover svg { color:#0A66C2; fill:currentColor; }
.cm-x:hover  svg { color:#111;    fill:currentColor; }