/* =========================================================
   CityCleaner — CSS additionnel GLOBAL (V20)
   Passe : consolidation sécurisée — 05
   Changements de cette passe :
   - formalisation documentaire des décisions canoniques
   - aucune modification visuelle volontaire sur le runtime
   - cc-fitx confirmé comme canon ; cc-fit conservé en shim legacy
   - Archive V2 confirmé comme couche archive active du fichier
   - header mobile Astra maintenu gelé en couche runtime dédiée
   - DS mis à jour pour refléter ces décisions
   ========================================================= */

/* =========================================================
   GOUVERNANCE CSS — DÉCISIONS CANONIQUES EN V20
   - FOUNDATION : canonique
   - HOMEPAGE HERO : variante Elementor HTML canonique
   - HOMEPAGE FIT : cc-fitx canonique
   - LEGACY COMPAT : cc-fit maintenu en shim temporaire hors homepage
   - ARCHIVE : V2 = couche active du fichier
   - ASTRA MOBILE HEADER : runtime gelé, hors refactor dans cette passe
   - RÈGLE DE MAINTENANCE : ne plus réintroduire de variante parallèle
     sans l’isoler explicitement en legacy ou runtime override
   ========================================================= */

/* =========================================================
CITYCLEANER — CSS ADDITIONNEL GLOBAL (TOKENS) — v1.3 (COMPLET)

IMPORTANT
- Cette version est un remplacement COMPLET.
- Elle inclut TOUS les tokens (espacements, containers, etc.).
- Elle ajoute : alternance de fonds par section + halos soft + chips standard.
- Elle évite la casse “cartes collées / gaps à 0” (qui arrive si les tokens manquent).

RÈGLE D’OR
Toute section CityCleaner doit dériver d’un composant existant
et respecter les tokens (pas d’ombres/espacements “à la main”).
========================================================= */

/* =========================================================
   01 — FOUNDATION / TOKENS / GLOBAL PRIMITIVES — CANONIQUE
   ========================================================= */

/* -----------------------------
0) TOKENS (source of truth)
----------------------------- */
:root{
  /* Brand */
  --cc-navy:#012148;
  --cc-turq:#27CFA9;
  --cc-sky:#46D9FF;
  --cc-violet:#8958FE;

  /* Surfaces */
  --cc-bg:#ffffff;
  --cc-bgSoft:#F7F9FB;

  /* Ink */
  --cc-ink78: rgba(1,33,72,.78);
  --cc-ink62: rgba(1,33,72,.62);
  --cc-ink50: rgba(1,33,72,.50);
  --cc-ink28: rgba(1,33,72,.28);
  --cc-ink18: rgba(1,33,72,.18);
  --cc-ink10: rgba(1,33,72,.10);
  --cc-ink08: rgba(1,33,72,.08);

  /* 8pt system (COMPLET) */
  --cc-4: 4px;
  --cc-8: 8px;
  --cc-12: 12px;
  --cc-16: 16px;
  --cc-20: 20px;
  --cc-24: 24px;
  --cc-28: 28px;
  --cc-32: 32px;
  --cc-36: 36px;
  --cc-40: 40px;
  --cc-48: 48px;
  --cc-56: 56px;
  --cc-64: 64px;
  --cc-72: 72px;
  --cc-96: 96px;
  --cc-120: 120px;

  /* Radius */
  --cc-r14: 14px;
  --cc-r16: 16px;
  --cc-r18: 18px;
  --cc-r22: 22px;
  --cc-r24: 24px;
  --cc-r999: 999px;

  /* Containers */
  --cc-container: min(1120px, calc(100% - 32px)); /* 16px padding latéral */
  --cc-container-narrow: min(760px, calc(100% - 32px));
  --cc-process: 720px;

  /* Shadows (fonctionnelles) */
  --cc-shadow-card: 0 10px 26px rgba(1,33,72,0.06);
  --cc-shadow-cta:  0 10px 24px rgba(1,33,72,0.12);
  --cc-shadow-ctaHover: 0 14px 30px rgba(1,33,72,0.16);
}

/* -----------------------------
1) Base typographique + rendu
----------------------------- */
html{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

body,
button, input, select, textarea,
h1,h2,h3,h4,h5,h6{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body{
  color: var(--cc-navy);
  background: var(--cc-bg);
}

strong{ font-weight:900; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }

/* Focus visible sobre */
:focus-visible{
  outline:2px solid rgba(1,33,72,.22);
  outline-offset:4px;
}

a,button{ -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* -----------------------------
2) Fond global premium (calme)
----------------------------- */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(1,33,72,0.065), transparent 60%),
    radial-gradient(1100px 650px at 90% 20%, rgba(39,207,169,0.065), transparent 60%),
    #FCFDFE;
}

/* -----------------------------
3) Normalisation Astra/Elementor (anti-surprises)
----------------------------- */
.elementor-section,
.elementor-widget,
.elementor-widget-wrap,
.elementor-column-wrap{
  box-sizing:border-box;
}

.elementor-widget-heading .elementor-heading-title{
  letter-spacing:inherit;
}

/* NOTE: on évite ici de forcer box-shadow:none sur .elementor-element,
   car cela peut tuer des ombres voulues sur des cards CityCleaner. */

/* -----------------------------
4) Containers CityCleaner (unifiés)
----------------------------- */
.cc-hero__inner,
.cc-delegate3__inner,
.cc-proof__inner,
.cc-plans__inner,
.cc-consumables__inner,
.cc-fitx__inner, /* CANON */
.cc-ops__inner,
.cc-faq__inner,
.cc-cta-final__inner{
  width:var(--cc-container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.cc-cta-final__inner{ width:var(--cc-container-narrow) !important; }
.cc-ops__grid,
.cc-faq__list{ max-width:var(--cc-process) !important; }

/* -----------------------------
5) BACKGROUNDS OFFICIELS PAR SECTION
(ton ordre réel de page)
----------------------------- */
.cc-hero{ background: var(--cc-bg); }
.cc-delegate3{ background: var(--cc-bgSoft); }
.cc-plans{ background: var(--cc-bg); }
.cc-fitx{ background: var(--cc-bgSoft); }
.cc-proof{ background: var(--cc-bg); }
.cc-ops{ background: var(--cc-bgSoft); }
.cc-faq{ background: var(--cc-bg); }
.cc-cta-final{ background: var(--cc-bgSoft); }

/* Halos premium ultra discrets UNIQUEMENT sur fonds soft */
.cc-delegate3,
.cc-fitx, /* CANON */
.cc-ops,
.cc-cta-final{
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(70,217,255,.07), transparent 60%),
    radial-gradient(760px 380px at 88% 15%, rgba(137,88,254,.06), transparent 55%),
    var(--cc-bgSoft);
}

/* -----------------------------
6) UI Family (classes réutilisables)
----------------------------- */
.cc-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cc-ink62);
  white-space:nowrap;
}

.cc-lead{
  font-size:16px;
  line-height:1.65;
  color:var(--cc-ink78);
  max-width:62ch;
}

.cc-body{
  font-size:15px;
  line-height:1.55;
  color:var(--cc-ink78);
  font-weight:650;
}

.cc-fine{
  font-size:14px;
  line-height:1.6;
  color:var(--cc-ink62);
  font-weight:650;
  font-style:normal;
}

.cc-hairline{ border-top:1px solid var(--cc-ink10); }

/* -----------------------------
7) CARDS — standards officiels
- Ombre uniquement pour les “cards primaires” (fonctionnel)
----------------------------- */
.cc-card{
  background:var(--cc-bg);
  border:1px solid var(--cc-ink10);
  border-radius:var(--cc-r24);
  box-shadow:none;
}

/* Card primaire (sections clés) */
.cc-card--elevated{
  box-shadow: var(--cc-shadow-card);
  border-radius: var(--cc-r18);
}

/* Auto-élévation : uniquement ce qui est vraiment “card” */
.cc-heroCard,
.cc-delegate3Card,
.cc-proofCard,
.cc-plan,
.cc-plansCard{
  box-shadow: var(--cc-shadow-card) !important;
  border-radius: var(--cc-r18) !important;
}

/* IMPORTANT : chips/tags NE DOIVENT PAS flotter */
.cc-chip,
.cc-delegate3__tag,
.cc-tag{
  box-shadow:none !important;
}

/* -----------------------------
8) CHIPS / TAGS — standard
----------------------------- */
.cc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:var(--cc-r999);
  border:1px solid var(--cc-ink10);
  color:var(--cc-ink62);
  background:transparent;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

/* -----------------------------
9) CTA — standard sobre (optionnel)
----------------------------- */
.cc-ctaPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:16px 18px;
  min-height:56px;
  border-radius:var(--cc-r16);
  text-decoration:none;
  font-weight:800;
  color:#fff !important;

  background: linear-gradient(90deg, var(--cc-navy), #06306A);
  border:1px solid rgba(1,33,72,0.15);
  box-shadow: var(--cc-shadow-cta);
  transition: transform 140ms ease, box-shadow 140ms ease;
  text-align:center;
}

.cc-ctaPrimary:hover{
  transform: translateY(-1px);
  box-shadow: var(--cc-shadow-ctaHover);
}

/* -----------------------------
10) Desktop “sans designer” (mise en colonne stable)
----------------------------- */
@media (min-width: 900px){
  .cc-hero__inner{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--cc-40);
    align-items:start;
  }

  .cc-delegate3__grid{ grid-template-columns:1fr 1fr; }
  .cc-proof__grid{ grid-template-columns:1fr 1fr; }
  .cc-fitx__grid{ grid-template-columns:1fr 1fr; }
  .cc-plans__grid{ grid-template-columns:repeat(4,1fr); }

  .cc-cta-final__inner{
    width:min(860px, calc(100% - 64px)) !important;
  }
}

/* -----------------------------
11) WhatsApp FAB — foundation legacy retiré
Le FAB canonique est défini plus bas dans la couche HOMEPAGE / runtime.
Ici, on ne garde plus de variante concurrente.
----------------------------- */

/* -----------------------------
12) Footer premium (utilitaire)
----------------------------- */
.cc-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  font-size: 13px;
  letter-spacing: .01em;
  color: var(--cc-ink62);
}

.cc-footer-left{
  font-weight: 600;
  color: var(--cc-ink62);
}

.cc-footer-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cc-footer-right a{
  color: var(--cc-ink62);
  text-decoration: none;
  font-weight: 600;
}

.cc-footer-right a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-sep{ color: var(--cc-ink28); }

@media (max-width: 640px){
  .cc-footer-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 16px;
  }
}
/* =========================================================
CityCleaner — RYTHME VERTICAL GLOBAL (DS)
Objectif : même respiration sur toutes les sections principales
Desktop ≈ 120px haut/bas | Mobile ≈ 72px haut/bas
CTA final : plus d’air pour “clôturer” (desktop 160px | mobile 96px)
IMPORTANT : on NE TOUCHE PAS au HERO (il garde sa mise en scène)
========================================================= */
:root{
  --cc-section-py-mobile: 72px;
  --cc-section-py-desktop: 120px;

  --cc-section-py-cta-mobile: 96px;
  --cc-section-py-cta-desktop: 160px;
}

/* Sections principales (hors Hero) */
.cc-delegate3__inner,
.cc-plans__inner,
.cc-fitx__inner,
.cc-proof__inner,
.cc-ops__inner,
.cc-faq__inner{
  padding-top: var(--cc-section-py-mobile) !important;
  padding-bottom: var(--cc-section-py-mobile) !important;
}

/* CTA final (effet “conclusion”) */
.cc-cta-final__inner{
  padding-top: var(--cc-section-py-cta-mobile) !important;
  padding-bottom: var(--cc-section-py-cta-mobile) !important;
}

@media (min-width: 900px){
  .cc-delegate3__inner,
  .cc-plans__inner,
  .cc-fitx__inner,
  .cc-proof__inner,
  .cc-ops__inner,
  .cc-faq__inner{
    padding-top: var(--cc-section-py-desktop) !important;
    padding-bottom: var(--cc-section-py-desktop) !important;
  }

  .cc-cta-final__inner{
    padding-top: var(--cc-section-py-cta-desktop) !important;
    padding-bottom: var(--cc-section-py-cta-desktop) !important;
  }
}

/* ===== Styles composants récupérés de la homepage (source of truth) ===== */

/* =========================================================
   03 — HOMEPAGE COMPONENTS — OFFICIEL
   Règles :
   - le HERO Elementor HTML reste la seule référence runtime
   - le support global du HERO legacy aligné DELEGATE3 a été retiré
     de ce fichier pour éviter une double autorité sur .cc-hero*
   - la homepage de référence conserve encore ce hero legacy dans un
     conteneur Elementor masqué sur desktop / tablet / mobile, avec
     son propre style inline local
   ========================================================= */

/* =========================================================
   LEGACY HERO — support global retiré en V18
   Motif : variante masquée sur tous les devices dans la homepage de
   référence + style local déjà embarqué dans le widget HTML legacy.
   Le HERO Elementor HTML ci-dessous reste le seul hero runtime canonique.
   ========================================================= */

/* =========
       CITYCLEANER HERO (Elementor HTML)
       ========= */

    .cc-hero {
      --navy: #012148;
      --turq: #27CFA9;
      --blue: #46D9FF;
      --violet: #8958FE;
      --text: #0B1B33;
      --muted: #5C6B84;
      --line: rgba(1, 33, 72, 0.10);
      --card: #ffffff;

      padding: clamp(40px, 6vw, 88px) 0;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(70, 217, 255, 0.10), transparent 60%),
                  radial-gradient(900px 500px at 90% 10%, rgba(137, 88, 254, 0.08), transparent 55%),
                  linear-gradient(#ffffff, #ffffff);
      color: var(--text);
    }

    .cc-hero__inner {
      width: min(1120px, 92vw);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: clamp(18px, 4vw, 56px);
      align-items: start;
    }

    .cc-hero__kicker {
      font-size: 12px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
      font-weight: 700;
    }

    .cc-hero__title {
      font-size: clamp(34px, 4.2vw, 56px);
      line-height: 1.05;
      margin: 0 0 18px 0;
      color: var(--navy);
      font-weight: 800;
    }

    .cc-hero__title--accent {
      color: var(--navy);
      position: relative;
      display: inline-block;
    }

    .cc-hero__title--accent::after {
      content: "";
      display: block;
      height: 8px;
      margin-top: 10px;
      width: 62%;
      background: linear-gradient(90deg, rgba(39, 207, 169, 0.55), rgba(70, 217, 255, 0.35));
      border-radius: 999px;
    }

    .cc-hero__subtitle {
      font-size: 16px;
      line-height: 1.6;
      margin: 0 0 18px 0;
      color: var(--text);
      max-width: 62ch;
    }

    .cc-hero__bullets {
      margin: 0 0 26px 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.8;
      font-size: 14px;
    }

    .cc-hero__ctaRow {
      display: grid;
      gap: 12px;
      max-width: 520px;
    }

    .cc-hero__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      padding: 16px 18px;
      min-height: 56px;
      border-radius: 16px;
      text-decoration: none;
      font-weight: 800;
      color: #ffffff !important;
      background: linear-gradient(90deg, var(--navy), #06306A);
      border: 1px solid rgba(1, 33, 72, 0.15);
      box-shadow: 0 10px 24px rgba(1, 33, 72, 0.12);
      transition: transform 140ms ease, box-shadow 140ms ease;
      text-align: center;
    }

    .cc-hero__cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(1, 33, 72, 0.16);
    }

    /* Icône WhatsApp (blanc, discrète) */
    .cc-hero__ctaIco{
      display:inline-flex;
      width:18px;
      height:18px;
      flex:0 0 18px;
    }
    .cc-hero__ctaIco svg{
      width:18px;
      height:18px;
      color:#ffffff;
    }

    .cc-hero__micro {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }

    /* Card (scopée hero pour éviter conflit avec ton système global) */
    .cc-heroCard {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 10px 26px rgba(1, 33, 72, 0.06);
    }

    .cc-card__title {
      font-size: 12px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 16px;
      font-weight: 800;
    }

    .cc-card__item {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 12px;
      align-items: start;
      padding: 10px 0;
    }

    .cc-ico {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(39, 207, 169, 0.10);
      border: 1px solid rgba(39, 207, 169, 0.18);
      color: var(--navy);
    }

    .cc-ico svg {
      width: 18px;
      height: 18px;
      stroke: var(--navy);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .cc-card__label {
      font-weight: 900;
      color: var(--navy);
      font-size: 14px;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .cc-card__desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .cc-card__divider {
      height: 1px;
      background: var(--line);
      margin: 6px 0;
    }

    /* Responsive */
    @media (max-width: 920px) {
      .cc-hero__inner { grid-template-columns: 1fr; }
      /* Décision : on cache "Inclus" sur mobile + tablette */
      .cc-hero__right { display: none; }
    }

/* =========================================================
       DELEGATE3 — aligné HERO (calme, premium, continuité)
       ========================================================= */

    .cc-delegate3{
      background: transparent;
    }

    .cc-delegate3__inner{
      padding: var(--cc-56) 0 var(--cc-64);
    }

    .cc-delegate3__title{
      margin:0 0 var(--cc-16);
      font-weight:950;
      font-size: clamp(26px, 6.2vw, 40px);
      line-height:1.1;
      color: var(--cc-navy);
      text-wrap: balance;
    }

    .cc-delegate3__lead{
      margin:0;
      max-width:62ch;
      font-size:16px;
      line-height:1.65;
      color: var(--cc-ink78);
    }

    .cc-delegate3__grid{
      margin-top: var(--cc-32);
      display:grid;
      gap: var(--cc-16);
      grid-template-columns: 1fr;
      align-items: start;
    }

    /* Carte — plus proche du HERO */
    .cc-delegate3Card{
      background: var(--cc-bg);
      border: 1px solid var(--cc-ink10);
      border-radius: 18px; /* proche hero */
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(1, 33, 72, 0.06); /* hero-like */
    }

    /* Header carte — on enlève le gros bloc gris, on garde une légère teinte */
    .cc-delegate3Card__top{
      padding: 22px 20px 14px;
      background: transparent;
      border-bottom: 1px solid var(--cc-ink10);
    }

    .cc-delegate3Card__kicker{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--cc-ink62);
      margin-bottom: 10px;
      white-space: nowrap;
    }

    .cc-delegate3Card__head{
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }

    .cc-delegate3Card__ico{
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 12px;
      background: rgba(39, 207, 169, 0.10);
      border: 1px solid rgba(39, 207, 169, 0.18);
      margin-top: 1px;
    }

    .cc-delegate3Card__ico svg{
      width: 18px;
      height: 18px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8; /* align hero */
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-delegate3Card__h{
      margin:0;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.25;
      color: var(--cc-navy);
    }

    .cc-delegate3Card__list{
      list-style:none;
      margin:0;
      padding: 16px 20px 20px;
      display:grid;
      gap: 14px;
    }

    .cc-delegate3Card__list li{
      display:flex;
      gap: 12px;
      font-size: 15px;
      line-height: 1.55;
      color: var(--cc-ink78);
      font-weight: 650;
    }

    .cc-delegate3Card__miniIco{
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top: 1px;
      opacity: .95;
    }

    .cc-delegate3Card__miniIco svg{
      width: 20px;
      height: 20px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8; /* align hero */
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-delegate3__statement{
      margin-top: var(--cc-40);
      padding-top: var(--cc-16);
      border-top: 1px solid var(--cc-ink10);
      display:flex;
      gap: 12px;
      max-width: 720px;
    }

    .cc-delegate3__statementIco{
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top: 1px;
      opacity: .95;
    }

    .cc-delegate3__statementIco svg{
      width: 20px;
      height: 20px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-delegate3__statementLine,
    .cc-delegate3__optionCopy{
      font-size: 15px;
      line-height: 1.55;
      font-weight: 650;
      color: var(--cc-ink78);
    }

    .cc-delegate3__optionLine{
      margin-top: var(--cc-8);
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap: var(--cc-8);
    }

    .cc-delegate3__tag{
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 900;
      border-radius: var(--cc-r999);
      border: 1px solid var(--cc-ink10);
      color: var(--cc-ink62);
      background: transparent;
      white-space: nowrap;
    }

    @media (min-width:900px){
      .cc-delegate3__grid{
        grid-template-columns: 1fr 1fr;
      }
    }

/* =========================================================
       CC PLANS — Scoped CSS (cohérence avec HERO)
       ========================================================= */

    .cc-plans{
      /* Palette (alignée avec CityCleaner) */
      --cc-navy:#012148;
      --cc-turq:#27CFA9;
      --cc-blue:#46D9FF;
      --cc-violet:#8958FE;

      --cc-ink:#0B1B33;
      --cc-ink78:rgba(11,27,51,.78);
      --cc-ink62:rgba(11,27,51,.62);
      --cc-line:rgba(1,33,72,.10);

      --cc-bg:#ffffff;
      --cc-bgSoft:#F7F9FB;

      /* Rayons / ombres */
      --cc-r16:16px;
      --cc-r18:18px;
      --cc-r999:999px;
      --cc-shadow:0 10px 26px rgba(1,33,72,.06);
      --cc-shadowHover:0 14px 30px rgba(1,33,72,.07);

      /* Espacements (fallback, au cas où le global n’existe pas) */
      --cc-8:8px;
      --cc-10:10px;
      --cc-12:12px;
      --cc-14:14px;
      --cc-16:16px;
      --cc-18:18px;
      --cc-20:20px;
      --cc-24:24px;
      --cc-28:28px;
      --cc-32:32px;
      --cc-40:40px;
      --cc-56:56px;
      --cc-64:64px;

      color:var(--cc-ink);
      background: transparent;
    }

    /* Fond doux si alternance de sections */
    .cc-plans[data-bg="soft"]{
      background:
        radial-gradient(900px 500px at 12% 10%, rgba(70,217,255,.06), transparent 55%),
        radial-gradient(900px 520px at 88% 10%, rgba(137,88,254,.05), transparent 55%),
        linear-gradient(var(--cc-bgSoft), var(--cc-bgSoft));
    }
    .cc-plans[data-bg="white"]{ background:var(--cc-bg); }

    .cc-plans__inner{
      width:min(1120px, 92vw);
      margin:0 auto;
      padding:clamp(40px, 6vw, 88px) 0;
    }

    .cc-plans__header{ max-width:72ch; }

    .cc-plans__kicker{
      font-size:12px;
      letter-spacing:.10em;
      text-transform:uppercase;
      color:var(--cc-ink62);
      margin-bottom:var(--cc-14);
      font-weight:800;
    }

    .cc-plans__title{
      margin:0 0 var(--cc-12);
      color:var(--cc-navy);
      font-weight:950;
      letter-spacing:-.01em;
      line-height:1.08;
      font-size:clamp(26px, 4.2vw, 40px);
      text-wrap:balance;
    }

    .cc-plans__lead{
      margin:0;
      color:var(--cc-ink78);
      font-size:16px;
      line-height:1.65;
    }
    .cc-plans__lead strong{ color:var(--cc-navy); font-weight:900; }

    .cc-plans__radio{
      position:absolute; opacity:0;
      width:1px; height:1px;
      pointer-events:none;
    }

    /* Sélecteur (mobile) */
    .cc-plans__pick{
      margin:var(--cc-20) 0 0;
      padding:var(--cc-8);
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:var(--cc-8);
      border:1px solid var(--cc-line);
      border-radius:var(--cc-r16);
      background:var(--cc-bg);
      box-shadow:0 8px 18px rgba(1,33,72,.04);
    }
    .cc-plans__legend{
      position:absolute;width:1px;height:1px;
      padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
      border:0;white-space:nowrap;
    }
    .cc-plans__seg{
      display:flex;align-items:center;justify-content:center;
      min-height:40px;
      padding:10px 8px;
      border-radius:var(--cc-r16);
      border:1px solid transparent;
      background:transparent;
      color:var(--cc-ink78);
      font-weight:900;
      font-size:14px;
      letter-spacing:.02em;
      cursor:pointer;
      user-select:none;
    }
    #ccp-studio:checked ~ .cc-plans__pick label[for="ccp-studio"],
    #ccp-t1:checked     ~ .cc-plans__pick label[for="ccp-t1"],
    #ccp-t2:checked     ~ .cc-plans__pick label[for="ccp-t2"],
    #ccp-t3:checked     ~ .cc-plans__pick label[for="ccp-t3"]{
      background:rgba(1,33,72,.04);
      border-color:rgba(1,33,72,.10);
      color:var(--cc-navy);
    }

    /* Grid pricing */
    .cc-plans__grid{
      margin-top:var(--cc-16);
      display:grid;
      grid-template-columns:1fr;
      gap:var(--cc-16);
    }

    .cc-onlyMobile{ display:block; }
    .cc-onlyDesktop{ display:none; }

    /* Mobile : une seule carte affichée (sans JS) */
    .cc-plans__card{ display:none; }
    #ccp-studio:checked ~ .cc-plans__pick ~ .cc-plans__grid article:nth-child(1){ display:block; }
    #ccp-t1:checked     ~ .cc-plans__pick ~ .cc-plans__grid article:nth-child(2){ display:block; }
    #ccp-t2:checked     ~ .cc-plans__pick ~ .cc-plans__grid article:nth-child(3){ display:block; }
    #ccp-t3:checked     ~ .cc-plans__pick ~ .cc-plans__grid article:nth-child(4){ display:block; }

    /* Card (cohérente avec le HERO : border fin + ombre douce) */
    .cc-plans__card{
      overflow:hidden;
      background:var(--cc-bg);
      border:1px solid var(--cc-line);
      border-radius:var(--cc-r18);
      box-shadow:var(--cc-shadow);
      transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    }
    @media (hover:hover){
      .cc-plans__card:hover{
        transform:translateY(-1px);
        box-shadow:var(--cc-shadowHover);
        border-color:rgba(1,33,72,.14);
      }
    }

    .cc-plans__cardTop{
      padding:28px var(--cc-24) var(--cc-18);
      background:var(--cc-bgSoft);
      border-bottom:1px solid var(--cc-line);
    }

    .cc-plans__planKicker{
      margin:0 0 var(--cc-12);

          font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:12px;
      color:rgba(1,33,72,.70);
      white-space:nowrap;
    }

    .cc-plans__priceRow{
      display:flex;
      align-items:baseline;
      gap:var(--cc-16);
      margin:0 0 var(--cc-10);
    }
    .cc-plans__amount{
      font-size:44px;
      line-height:1;
      letter-spacing:-.03em;
      font-weight:950;
      color:var(--cc-navy);
      font-variant-numeric:tabular-nums;
    }
    .cc-plans__unit{
      font-size:14px;
      font-weight:750;
      color:rgba(1,33,72,.60);
      letter-spacing:.05em;
      white-space:nowrap;
    }

    .cc-plans__meta{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
    }
    .cc-plans__pill{
      display:inline-flex;
      align-items:center;
      font-size:14px;
      font-weight:900;
      color:rgba(1,33,72,.78);
      padding:10px 12px;
      border-radius:var(--cc-r999);
      background:var(--cc-bg);
      border:1px solid var(--cc-line);
      white-space:nowrap;
    }
    .cc-plans__extraInline{
      font-size:13px;
      color:rgba(1,33,72,.62);
      font-weight:650;
      white-space:nowrap;
    }
    .cc-plans__extraInline strong{ color:var(--cc-navy); font-weight:900; }

    .cc-plans__hint{
      padding:12px var(--cc-24) 14px;
      color:rgba(1,33,72,.62);
      font-size:13px;
      font-weight:650;
      line-height:1.5;
      background:var(--cc-bg);
    }

    /* Ligne “Inclus…” (desktop) + SVG */
    .cc-plans__includedLine{
      margin-top:var(--cc-12);
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--cc-ink62);
      font-size:14px;
      line-height:1.55;
      font-weight:650;
    }
    .cc-plans__includedLine strong{ color:var(--cc-navy); font-weight:900; }

    .cc-plans__includedIco{
      width:22px;height:22px;
      flex:0 0 22px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top:2px;
      color:var(--cc-navy);
      opacity:.86;
    }
    .cc-plans__includedIco svg{
      width:22px;height:22px;
      stroke:currentColor;
      fill:none;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
    }

    /* CTA (identique HERO : sobre, non agressif, mais ferme) */
    .cc-plans__ctaSolo{
      margin-top:var(--cc-16);
      display:grid;
      gap:10px;
      max-width:760px;
    }
    .cc-plans__ctaFine{
      font-size:14px;
      color:var(--cc-ink62);
      font-weight:650;
    }
    .cc-plans__ctaBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:16px 18px;
      min-height:56px;
      border-radius:16px;
      text-decoration:none !important;
      font-weight:900;
      color:#ffffff !important;
      background:linear-gradient(90deg, var(--cc-navy), #06306A);
      border:1px solid rgba(1,33,72,.15);
      box-shadow:0 10px 24px rgba(1,33,72,.12);
      transition:transform 140ms ease, box-shadow 140ms ease;
      text-align:center;
      width:fit-content;
    }
    .cc-plans__ctaBtn:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 30px rgba(1,33,72,.16);
    }

    /* Mobile : CTA full-width + respiration avant l’accordéon */

    /* Mobile : version “compact” (anti-bloc de texte) */
    @media (max-width:899px){
      .cc-plans__includedLine{ display:none !important; }
      .cc-plans__hint{ display:none; } /* remplacé par les chips */
      .cc-plans__ctaSolo{ gap:8px; }
      .cc-plans__micro{ font-size:12px; }
    }

    /* Chips (mobile) */
    .cc-plans__chips{
      margin-top:14px;
      display:grid;
      align-items:stretch;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      align-items:stretch;
      gap:10px;
    }
    
    .cc-plans__chip{
      display:flex;
      align-items:center;
      gap:10px;
      padding:11px 12px;
      border:1px solid var(--cc-line);
      border-radius:14px;
      background:#ffffff;
      box-shadow:0 8px 18px rgba(1,33,72,.04);
      color:var(--cc-ink78);
      font-size:13px;
      font-weight:750;
      min-height:52px;               /* même hauteur visuelle */
    }
    
    /* Chips : grille parfaite + pas de coupure de mots (override thèmes) */
    .cc-plans__chip{ width:100%; }
      min-width:0;                 /* autorise le wrap dans une grille */
      display:block;
      line-height:1.25;
      white-space:normal;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;        /* max 2 lignes */
      -webkit-box-orient:vertical;
      overflow-wrap:break-word;    /* évite le dépassement */
      word-break:normal;
      hyphens:auto;               /* autorise coupure propre en FR si besoin */
    }

      display:-webkit-box;           /* limite le débordement */
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      line-height:1.25;
    }
    
    .cc-plans__chip strong{ color:var(--cc-navy); font-weight:900; }
    .cc-plans__chipIco{
      width:28px;height:28px;
      flex:0 0 28px;
      display:grid;
      place-items:center;
      border-radius:12px;
      background:rgba(39,207,169,.10);
      border:1px solid rgba(39,207,169,.18);
      color:var(--cc-navy);
      overflow:hidden;
      line-height:0; /* évite tout décalage */
    }
    .cc-plans__chipIco svg{
      display:block;
      transform-box: fill-box;
      transform-origin: center;
      transform-box: fill-box;
      transform-origin:center;
      transform:translateY(0.9px);
      width:18px;height:18px;
      margin:0;
      stroke:currentColor;
      fill:none;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
      opacity:.92;
    }

    /* Accordéon : aérer sans ajouter de texte */
    @media (max-width:899px){
      .cc-plans__detailsBody{ padding:14px 14px 16px; }
      .cc-plans__detailsGrid{ gap:14px; }
      .cc-plans__detailsKicker{ margin-bottom:6px; }
      .cc-plans__list{ gap:10px; font-size:13px; }
      .cc-plans__detailsFoot{ font-size:13px; }
    }

    @media (max-width:899px){
      .cc-plans__ctaBtn{
        width:100%;
        justify-content:center;
      }
      .cc-plans__details{ margin-top:28px; }
    }

    .cc-plans__ctaIco{ display:inline-flex; width:18px;height:18px; flex:0 0 18px; color:#fff; }
    .cc-plans__ctaIco svg{ width:18px;height:18px; color:#fff; }

    .cc-plans__micro{
  font-size:12px;
  color:var(--cc-ink62);
  line-height:1.4;
}

/* Mobile : réduire la densité de texte autour du CTA */
@media (max-width:899px){
  .cc-plans__ctaFine{ display:none; }
  .cc-plans__micro{ max-width:48ch; }
  .cc-plans__hint{ font-size:12.5px; }
}

/* Details (secondaire) : accordéon natif, sobre */
    .cc-plans__details{
      margin-top:var(--cc-16);
      overflow:hidden;
      background:var(--cc-bg);
      border:1px solid var(--cc-line);
      border-radius:var(--cc-r18);
      box-shadow:var(--cc-shadow);
    }
    .cc-plans__summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:var(--cc-navy);
      font-weight:900;
      border-bottom:1px solid var(--cc-line);
      background:rgba(1,33,72,.02);
    }
    .cc-plans__summary::-webkit-details-marker{ display:none; }
    .cc-plans__summaryTitle{ font-size:14px; }
    .cc-plans__summaryIco{
      width:28px;height:28px;
      flex:0 0 28px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      background:rgba(39,207,169,.10);
      border:1px solid rgba(39,207,169,.18);
      color:var(--cc-navy);
    }
    .cc-plans__summaryIco svg{
      width:18px;height:18px;
      stroke:currentColor;
      fill:none;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
    }

    /* Accessibilité : focus visible */
    .cc-plans__seg:focus-visible,
    .cc-plans__ctaBtn:focus-visible,
    .cc-plans__summary:focus-visible{
      outline:3px solid rgba(70,217,255,.55);
      outline-offset:3px;
      border-radius:14px;
    }

    /* Respect préférence utilisateur */
    @media (prefers-reduced-motion: reduce){
      .cc-plans__card,
      .cc-plans__ctaBtn{ transition:none !important; }
      .cc-plans__ctaBtn:hover{ transform:none !important; }
    }

    .cc-plans__chev{ color:rgba(1,33,72,.62); font-weight:900; }
    details[open] .cc-plans__chev{ transform:rotate(180deg); }

    .cc-plans__detailsBody{ padding:16px 18px 18px; background:var(--cc-bgSoft); }
    .cc-plans__detailsGrid{ display:grid; gap:16px; }
    .cc-plans__detailsKicker{
      font-size:12px;
      letter-spacing:.08em;
      font-weight:900;
      text-transform:uppercase;
      color:var(--cc-ink62);
      margin-bottom:8px;
      white-space:nowrap;
    }

    
    /* Amélioration mobile : items CADRE en cartes lisibles */
    .cc-plans__list--muted li{
      background:#ffffff;
      border:1px solid var(--cc-line);
      border-radius:14px;
      padding:12px 14px;
      margin-bottom:8px;
    }
    .cc-plans__list--muted li::before{ display:none; }

    @media (min-width:900px){
      .cc-plans__list--muted li{
        background:transparent;
        border:none;
        padding-left:16px;
        margin-bottom:0;
      }
      .cc-plans__list--muted li::before{ display:block; }
    }

    /* Lists */
    .cc-plans__list strong{ color:var(--cc-navy); font-weight:900; }

    .cc-plans__list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:10px;
      color:var(--cc-ink78);
      font-size:14px;
      line-height:1.55;
      font-weight:650;
    }
    .cc-plans__list li{ position:relative; padding-left:16px; }
    .cc-plans__list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.62em;
      width:6px;height:6px;
      border-radius:999px;
      background:rgba(39,207,169,.55);
    }
    .cc-plans__list--muted li::before{ background:rgba(1,33,72,.18); }

    
    /* Mobile : INCLUS aussi en “mini-cartes” (meilleure lecture + symétrie) */
    @media (max-width:899px){
      .cc-plans__list--icons li{
        background:#ffffff;
        border:1px solid var(--cc-line);
        border-radius:14px;
        padding:12px 14px;
      }
      .cc-plans__ico{ margin-top:0; }
    }
    @media (min-width:900px){
      .cc-plans__list--icons li{
        background:transparent;
        border:none;
        border-radius:0;
        padding:0;
      }
    }

    
    /* Cadre : alignement visuel premium (évite l’effet “puces bas de gamme”) */
    .cc-plans__list--cadre li{
      font-weight:650;
    }
    @media (max-width:899px){
      .cc-plans__list--cadre li{
        padding:12px 14px;
      }
      .cc-plans__list--cadre li span{ line-height:1.45; }
    }

    
    .cc-plans__itemText{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .cc-plans__sub{
      color:var(--cc-ink62);
      font-size:13px;
      font-weight:650;
      line-height:1.35;
    }

    /* Mobile : INCLUS ultra-compact (pas de sous-ligne) */
    @media (max-width:899px){
      .cc-plans__sub{ display:none; }
      .cc-plans__list--icons li{ padding:12px 12px; }
      .cc-plans__list--icons{ gap:10px; }
    }

    /* Icons list (only INCLUS) */
    .cc-plans__list--icons li{
      padding-left:0;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .cc-plans__list--icons li::before{ display:none; }
    .cc-plans__ico{
      width:24px;height:24px;
    .cc-plans__ico--cadre{
      border-radius:12px;
      background:rgba(70,217,255,.10);
      border:1px solid rgba(70,217,255,.20);
    }

      flex:0 0 24px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top:1px;
    }
    .cc-plans__ico svg{
      display:block;
      width:24px;height:24px;
      transform-box: fill-box;
      transform-origin: center;
      transform:translateY(0.7px);
      stroke:var(--cc-navy);
      fill:none;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
      opacity:.92;
    }

    .cc-plans__detailsFoot{
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid var(--cc-line);
      color:var(--cc-ink62);
      font-size:14px;
      line-height:1.55;
      font-weight:650;
      display:grid;
      gap:6px;
    }
    .cc-plans__detailsFoot strong{ color:var(--cc-navy); font-weight:900; }

    /* Desktop */
    @media (min-width:900px){
      .cc-plans__pick{ display:none; }

      .cc-plans__card{ display:block; }
      .cc-plans__grid{ grid-template-columns:repeat(4, 1fr); }

      .cc-onlyMobile{ display:none; }
      .cc-onlyDesktop{ display:flex; }

      .cc-plans__detailsGrid{ grid-template-columns:1fr 1fr; gap:18px; }

      .cc-plans__ctaSolo{ margin-top:var(--cc-24); }
      .cc-plans__details{ margin-top:var(--cc-24); }
    }
  
    /* Mobile : éviter la répétition — masquer INCLUS dans l’accordéon (déjà visible via les chips) */
    @media (max-width:899px){
        display:none;
      }
    }

  
    @media (max-width:380px){
      .cc-plans__chip{ font-size:12.5px; }
    }

  
    /* Hairline visible (élément réel) — robust against theme overrides */
    .cc-plans .cc-plans__hairline{
      display:block !important;
      width:100% !important;
      height:1px !important;
      background:rgba(1,33,72,.18) !important;
      box-shadow:0 1px 0 rgba(255,255,255,.70) inset !important;
      margin:-4px 0 14px !important;
      opacity:1 !important;
    }

    /* Top meta “Apple” : plus léger, plus propre */
    .cc-plans .cc-plans__topmeta{
      color:rgba(1,33,72,.55) !important;
      font-weight:700 !important;
      letter-spacing:.08em !important;
    }

  
/* Divider (hairline) — robust Elementor-safe */
.cc-plans .cc-plans__divider{
  margin-left:var(--cc-24) !important;
  width:calc(100% - (var(--cc-24) * 2)) !important;
  border:0 !important;
  height:1px !important;
  margin:6px 0 14px !important;
  background:rgba(1,33,72,.16) !important;
  display:block !important;
}


.cc-plans__ctaMicro{
  display:block;
  font-size:12px;
  color:rgba(1,33,72,.55);
  margin-top:6px;
}


/* Mobile : cartes "Cadre" compactes (max 2 lignes) */
@media (max-width: 768px){
  .cc-plans__detailsCol .cc-plans__cardText,
  .cc-plans__detailsCol p,
  .cc-plans__detailsCol span{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}


/* Fix mobile: icônes bien contenues dans les blocs */
@media (max-width:768px){
  .cc-plans__detailsCol .cc-card,
  .cc-plans__detailsCol .cc-plans__card{
    padding-left:20px !important;
  }

  .cc-plans__ico{
    margin-left:2px;
    overflow:hidden;
  }
}

/* =========================================================
       cc-fitx — PATCH DS v1.3 (tokens only, no container overrides)
       CANON HOMEPAGE : cc-fitx
       NOTE : le legacy cc-fit est désormais isolé plus bas dans un shim de compatibilité.
       ========================================================= */

    .cc-fitx{
      background: transparent;
    }

    .cc-fitx__inner{
      padding: var(--cc-56) 0 var(--cc-64);
    }

    .cc-fitx__header{
      margin-bottom: var(--cc-32);
    }

    .cc-fitx__title{
      margin:0 0 var(--cc-16);
      font-weight:950;
      font-size: clamp(26px, 6.2vw, 40px);
      line-height:1.1;
      color: var(--cc-navy);
      text-wrap: balance;
      letter-spacing:-0.01em;
    }

    .cc-fitx__lead{
      margin:0;
      max-width:62ch;
      font-size:16px;
      line-height:1.65;
      color: var(--cc-ink78);
      text-wrap: pretty;
    }
    .cc-fitx__lead strong{ color: var(--cc-navy); font-weight:900; }

    .cc-fitx__grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--cc-16);
      align-items: stretch;
    }
    @media (min-width:900px){
      .cc-fitx__grid{ grid-template-columns: 1fr 1fr; }
    }

    .cc-fitxCard{
      background: var(--cc-bg);
      border: 1px solid var(--cc-ink10);
      border-radius: var(--cc-r18);
      box-shadow: var(--cc-shadow-card);
      overflow: hidden;
      display:flex;
      flex-direction:column;
      min-height:100%;
    }

    .cc-fitxCard__top{
      padding: 22px 20px 14px;
      background: transparent;
      border-bottom: 1px solid var(--cc-ink10);
    }

    .cc-fitxCard__kicker{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--cc-ink62);
      margin-bottom: 10px;
      white-space: nowrap;
    }

    .cc-fitxCard__head{
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }

    .cc-fitxCard__ico{
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 12px;
      background: rgba(39, 207, 169, 0.10);
      border: 1px solid rgba(39, 207, 169, 0.18);
      margin-top: 1px;
    }

    .cc-fitxCard--nofit .cc-fitxCard__ico{
      background: rgba(1,33,72,0.04);
      border: 1px solid var(--cc-ink10);
    }

    .cc-fitxCard__ico svg{
      width: 18px;
      height: 18px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-fitxCard__title{
      margin:0;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.25;
      color: var(--cc-navy);
      letter-spacing:-0.01em;
    }

    .cc-fitxCard__body{
      padding: 16px 20px 20px;
      display:flex;
      flex-direction:column;
      flex:1 1 auto;
    }

    .cc-fitxCard__section-title{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--cc-ink62);
      margin: 0 0 16px;
      white-space: nowrap;
    }

    .cc-fitxCard__list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap: 14px;
      max-width:62ch;
    }

    .cc-fitxCard__li{
      display:flex;
      gap: 12px;
      font-size: 15px;
      line-height: 1.55;
      color: var(--cc-ink78);
      font-weight: 650;
    }

    .cc-fitxCard__miniIco{
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top: 1px;
      opacity: .95;
    }

    .cc-fitxCard__miniIco svg{
      width: 20px;
      height: 20px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-fitxCard__fine{
      margin-top:auto;
      padding-top: 16px;
      border-top: 1px solid var(--cc-ink10);
      margin-bottom:0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--cc-ink62);
      font-weight: 650;
      font-style: normal;
    }

    /* =========================================================
       LEGACY COMPAT SHIM — cc-fit
       Statut : shim transitoire de compatibilité uniquement.
       - la homepage runtime charge désormais cc-fitx uniquement
       - aucun nouveau template ne doit repartir sur cc-fit
       - ce shim conserve un rendu non cassant si un ancien template
         référence encore cc-fit hors homepage
       - à supprimer après inventaire complet des anciens templates
       ========================================================= */

    .cc-fit{
      background:
        radial-gradient(900px 420px at 12% 10%, rgba(70,217,255,.07), transparent 60%),
        radial-gradient(760px 380px at 88% 15%, rgba(137,88,254,.06), transparent 55%),
        var(--cc-bgSoft);
    }

    .cc-fit__inner{
      width:var(--cc-container) !important;
      margin-left:auto !important;
      margin-right:auto !important;
      padding-top: var(--cc-section-py-mobile) !important;
      padding-bottom: var(--cc-section-py-mobile) !important;
    }

    .cc-fit__grid{
      display:grid;
      grid-template-columns:1fr;
      gap:var(--cc-16);
      align-items:stretch;
    }

    @media (min-width:900px){
      .cc-fit__inner{
        padding-top: var(--cc-section-py-desktop) !important;
        padding-bottom: var(--cc-section-py-desktop) !important;
      }

      .cc-fit__grid{
        grid-template-columns:1fr 1fr;
      }
    }












    /* =========================================================
       CityCleaner — PROOF (scopé, compatible CSS additionnel global)
       - Pas de container local
       ========================================================= */

    .cc-proof{ background: transparent; }

    .cc-proof__inner{
      padding: var(--cc-56) 0 var(--cc-56);
    }

    .cc-proof__title{
      margin: 0 0 var(--cc-16);
      font-weight: 950;
      font-size: clamp(28px, 5.6vw, 42px);
      line-height: 1.08;
      color: var(--cc-navy);
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    .cc-proof__lead{
      margin: 0;
      color: var(--cc-ink78);
      font-size: 16px;
      line-height: 1.7;
      max-width: 62ch;
    }

    .cc-proof__grid{
      margin-top: var(--cc-32);
      display: grid;
      gap: var(--cc-16);
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .cc-proofCard{
      background: var(--cc-bg);
      border: 1px solid var(--cc-ink10);
      border-radius: var(--cc-r18);
      overflow: hidden;
      display:flex;
      flex-direction:column;
      min-height:100%;
    }

    .cc-proofCard__top{
      padding: 22px 20px 14px;
      background: transparent;
      border-bottom: 1px solid var(--cc-ink10);
    }

    .cc-proofCard__kicker{
      font-size: 12px;
      letter-spacing: .10em;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--cc-ink62);
      margin-bottom: var(--cc-12);
      white-space: nowrap;
    }

    .cc-proofCard__head{
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .cc-proofCard__badge{
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(39, 207, 169, 0.10);
      border: 1px solid rgba(39, 207, 169, 0.18);
      margin-top: 1px;
    }

    .cc-proofCard__badge svg{
      width: 18px;
      height: 18px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-proofCard__h{
      margin: 0;
      font-size: 18px;
      font-weight: 900;
      color: var(--cc-navy);
      line-height: 1.25;
      padding-top: 2px;
      letter-spacing:-0.01em;
    }

    .cc-proofCard__list{
      list-style: none;
      margin: 0;
      padding: var(--cc-16) 20px var(--cc-16);
      display: grid;
      gap: var(--cc-14, 14px);
    }

    .cc-proofCard__list li{
      display: flex;
      gap: 12px;
      font-size: 15px;
      line-height: 1.55;
      font-weight: 650;
      color: var(--cc-ink78);
    }

    .cc-proofCard__ico{
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      opacity: .95;
    }

    .cc-proofCard__ico svg{
      width: 20px;
      height: 20px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-proofCard__bottom{
      margin-top:auto;
      padding: var(--cc-16) 20px 20px;
      border-top: 1px solid var(--cc-ink10);
      background: var(--cc-bg);
    }

    .cc-proofCard__fine{
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--cc-ink62);
      font-style: normal;
      font-weight: 650;
    }

    @media (min-width: 900px){
      .cc-proof__grid{ grid-template-columns: 1fr 1fr; }
      .cc-proofCard:nth-child(3){ grid-column: 1 / -1; }
    }

"Espacements v1" (trop intrusif / casse la cohérence)
- On ne redéfinit PAS de width/container ici (géré par le CSS global)


        CityCleaner fonctionne avec un cadre structuré : standards par typologie, rotations planifiées,
        exécution stable — sans sollicitation de votre part.




          Le même fonctionnement à chaque rotation, sans ajustement ni arbitrage de votre côté.


          Les rotations s’enchaînent selon un cadre planifié, sans coordination de votre part.


          Le logement est prêt comme prévu. La fiabilité repose sur des standards clairs, pas sur l’improvisation.


        Le détail opérationnel est géré en interne. Vous n’avez rien à piloter.


    /* =========================================================
       OPS — 3 principes (CSS scopé)
       Compatible CSS additionnel (tokens --cc-*)
       Utilise .cc-card global (border/radius/no shadow)
       ========================================================= */

    .cc-ops{ background: transparent; }
    .cc-ops__inner{ padding: var(--cc-56) 0 var(--cc-56); }

    .cc-ops__title{
      margin: 0 0 var(--cc-16);
      color: var(--cc-navy);
      font-weight: 950;
      line-height: 1.1;
      font-size: clamp(26px, 6.2vw, 40px);
      text-wrap: balance;
      letter-spacing: -0.01em;
    }

    .cc-ops__lead{
      margin: 0;
      color: var(--cc-ink78);
      font-size: 16px;
      line-height: 1.65;
      max-width: 62ch;
    }

    .cc-ops__kicker{
      margin-top: var(--cc-32);
      font-size: 12px;
      letter-spacing: .10em;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--cc-ink62);
      white-space: nowrap;
    }

    .cc-ops__grid{
      margin-top: var(--cc-16);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--cc-16);
      align-items: stretch;
    }

    @media (min-width: 900px){
      .cc-ops__grid{ grid-template-columns: 1fr 1fr 1fr; }
    }

    .cc-ops__card{
      padding: var(--cc-24);
      display: flex;
      flex-direction: column;
      gap: var(--cc-12);
      min-height: 100%;
    }

    .cc-ops__top{
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .cc-ops__badge{
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(39, 207, 169, 0.10);
      border: 1px solid rgba(39, 207, 169, 0.18);
      margin-top: 1px;
    }

    .cc-ops__badge svg{
      width: 18px;
      height: 18px;
      stroke: var(--cc-navy);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cc-ops__cardTitle{
      margin: 0;
      color: var(--cc-navy);
      font-weight: 900;
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: -0.01em;
      padding-top: 2px;
    }

    .cc-ops__cardText{
      margin: 0;
      color: var(--cc-ink78);
      font-size: 15px;
      line-height: 1.55;
      font-weight: 650;
      max-width: 62ch;
    }

    .cc-ops__closing{
      margin-top: var(--cc-24);
      border: 1px solid var(--cc-ink10);
      border-radius: var(--cc-r24);
      background: var(--cc-bgSoft);
      padding: var(--cc-16) 20px;
    }

    .cc-ops__closingText{
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--cc-ink62);
      font-weight: 650;
      font-style: normal;
    }

/* FAQ — Phase 2 (CSS mince + rotation chevron) */

    .cc-faq{ background:transparent; }
    .cc-faq__inner{ padding:var(--cc-48) 0 var(--cc-56); }

    .cc-faq__header{ margin-bottom:var(--cc-16); }

    .cc-faq__title{
      margin:0 0 var(--cc-16);
      color:var(--cc-navy);
      font-weight:950;
      line-height:1.1;
      font-size:clamp(26px,6.2vw,40px);
      text-wrap:balance;
      letter-spacing:-.01em;
    }

    .cc-faq__lead{
      margin:0;
      color:var(--cc-ink78);
      font-size:16px;
      line-height:1.65;
      max-width:60ch;
    }

    /* max-width géré par global via .cc-faq__list */
    .cc-faq__list{
      display:grid;
      gap:var(--cc-16);
      margin:0;
      padding:0;
    }

    .cc-faq__item{
      background:var(--cc-bg);
      border:1px solid var(--cc-ink10);
      border-radius:var(--cc-r24);
      overflow:hidden;
    }

    .cc-faq__item[open] .cc-faq__summary{
      background:var(--cc-bgSoft);
      border-bottom:1px solid var(--cc-ink10);
    }

    .cc-faq__summary{
      list-style:none;
      cursor:pointer;
      padding:var(--cc-16) var(--cc-24);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:var(--cc-16);

      color:var(--cc-navy);
      font-weight:900;
      font-size:16px;
      line-height:1.35;
    }
    .cc-faq__summary::-webkit-details-marker{ display:none; }

    .cc-faq__summary:focus-visible{
      outline:2px solid rgba(1,33,72,.22);
      outline-offset:4px;
      border-radius:var(--cc-r16);
    }

    .cc-faq__q{
      display:block;
      min-width:0;
      flex:1 1 auto;
    }

    .cc-faq__chev{
      width:24px;height:24px;
      display:flex;align-items:center;justify-content:center;
      flex:0 0 24px;
      margin-top:2px;
      opacity:.75;
    }

    .cc-faq__chev svg{
      width:20px;height:20px;
      stroke:var(--cc-navy);
      fill:none;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
      transform:rotate(0deg);
      transition:transform 140ms linear;
      transform-origin:50% 50%;
      vector-effect:non-scaling-stroke;
    }

    .cc-faq__item[open] .cc-faq__chev{ opacity:1; }
    .cc-faq__item[open] .cc-faq__chev svg{ transform:rotate(180deg); }

    .cc-faq__content{
      padding:var(--cc-12) var(--cc-24) var(--cc-16);
      color:var(--cc-ink78);
      font-size:15px;
      line-height:1.65;
      font-weight:650;
      padding-bottom:calc(var(--cc-16) + var(--cc-24)); /* safe-zone WA flottant */
    }

    .cc-faq__content p{ margin:10px 0; }
    .cc-faq__content strong{ color:var(--cc-navy); font-weight:900; }

    /* Bullets cohérents (silencieux, propres) */
    .cc-faq__bullets{
      margin:8px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
    }
    .cc-faq__bullets li{
      position:relative;
      padding-left:18px;
      margin:0;
    }
    .cc-faq__bullets li::before{
      content:"";
      position:absolute;
      left:0;
      top:.62em;
      width:4px;height:4px;
      border-radius:999px;
      background:rgba(1,33,72,.38);
    }

    /* Phrase clé (style “Proof-like”) */
    .cc-faq__key{
      margin-top:10px;
      color:var(--cc-ink62);
      font-size:14px;
      line-height:1.6;
      font-weight:650;
    }

    .cc-faq__note{ margin:10px 0 0; color:var(--cc-ink78); }

    @media (max-width:767px){
      .cc-faq__inner{ padding:44px 0 var(--cc-56); }
      .cc-faq__summary{ padding:14px 16px; font-size:15.5px; }
      .cc-faq__content{ padding:10px 16px 14px; padding-bottom:calc(14px + var(--cc-24)); }
    }

    @media (prefers-reduced-motion: reduce){
      .cc-faq__chev svg{ transition:none; }
    }

/* =========================================================
   02 — GLOBAL RHYTHM — CANONIQUE
   Note : cette couche porte les respirations de sections et les
   patches d'espacement validés (FAQ / CTA final).
   ========================================================= */

/* cc-patch-007 — Design System Espacements v1 (FAQ) */
    .cc-faq.cc-patch-007 .cc-faq__inner{
      width:min(1280px, calc(100% - 40px));
      margin:0 auto;
      padding-top:120px;
      padding-bottom:120px;
    }

    .cc-faq.cc-patch-007 .cc-faq__header{
      margin-bottom:40px;
    }

    .cc-faq.cc-patch-007 .cc-faq__title{
      margin-bottom:24px;
    }

    .cc-faq.cc-patch-007 .cc-faq__list{
      gap:24px;
    }

    .cc-faq.cc-patch-007 .cc-faq__summary{
      padding-left:32px;
      padding-right:32px;
      padding-top:20px;
      padding-bottom:20px;
    }

    .cc-faq.cc-patch-007 .cc-faq__content{
      padding-left:32px;
      padding-right:32px;
      padding-bottom:calc(20px + var(--cc-24));
    }

    @media (max-width: 767px){
      .cc-faq.cc-patch-007 .cc-faq__inner{
        width:calc(100% - 40px);
        padding-top:72px;
        padding-bottom:72px;
      }

      .cc-faq.cc-patch-007 .cc-faq__header{
        margin-bottom:28px;
      }

      .cc-faq.cc-patch-007 .cc-faq__title{
        margin-bottom:20px;
      }

      .cc-faq.cc-patch-007 .cc-faq__list{
        gap:20px;
      }

      .cc-faq.cc-patch-007 .cc-faq__summary{
        padding-left:24px;
        padding-right:24px;
        padding-top:16px;
        padding-bottom:16px;
      }

      .cc-faq.cc-patch-007 .cc-faq__content{
        padding-left:24px;
        padding-right:24px;
        padding-bottom:calc(16px + var(--cc-24));
      }
    }

.cc-cta-final{ background:transparent; }

    .cc-cta-final__inner{
      padding:var(--cc-56) 0;
      text-align:center;
    }

    .cc-cta-final__text{
      margin:0 auto var(--cc-24);
      color:var(--cc-navy);
      font-size:16px;
      line-height:1.65;
      font-weight:650;
      max-width:62ch;
      padding-bottom:0; /* géré par le rythme vertical global */
    }
    .cc-cta-final__text strong{ font-weight:900; }

    .cc-cta-final__ctaRow{
      display:grid;
      gap:12px;
      justify-items:center;
    }

    /* IMPORTANT : le style du bouton vient de .cc-ctaPrimary (CSS additionnel).
       Ici, on ne gère que largeur / alignement spécifiques à la section. */
    .cc-cta-final__cta{
      max-width:560px;
      width:auto;
      font-size:16px;
      line-height:1.2;
    }

    .cc-cta-final__cta:focus-visible{
      outline:2px solid rgba(1,33,72,.22);
      outline-offset:4px;
    }

    .cc-cta-final__ico{
      display:inline-flex;
      width:18px;
      height:18px;
      flex:0 0 18px;
    }
    .cc-cta-final__ico svg{
      width:18px;
      height:18px;
      color:#ffffff;
    }

    .cc-cta-final__micro{
      font-size:12px;
      color:var(--cc-ink62);
      line-height:1.4;
      max-width:62ch;
    }

    @media (max-width:767px){
      .cc-cta-final__cta{
        width:100%;
        max-width:520px;
      }
    }

/* cc-patch-008 — Design System Espacements v1 (CTA Final) */
    .cc-cta-final.cc-patch-008 .cc-cta-final__inner{
      width:min(1280px, calc(100% - 40px));
      margin:0 auto;
      padding-top:120px;
      padding-bottom:120px;
    }

    .cc-cta-final.cc-patch-008 .cc-cta-final__text{
      margin-bottom:40px;
    }

    .cc-cta-final.cc-patch-008 .cc-cta-final__ctaRow{
      gap:16px;
    }

    .cc-cta-final.cc-patch-008 .cc-cta-final__cta{
      max-width:620px;
    }

    @media (max-width:767px){
      .cc-cta-final.cc-patch-008 .cc-cta-final__inner{
        width:calc(100% - 40px);
        padding-top:72px;
        padding-bottom:72px;
      }

      .cc-cta-final.cc-patch-008 .cc-cta-final__text{
        margin-bottom:28px;
      }

      .cc-cta-final.cc-patch-008 .cc-cta-final__ctaRow{
        gap:12px;
      }

      .cc-cta-final.cc-patch-008 .cc-cta-final__cta{
        max-width:520px;
      }
    }

:root{
    --cc-navy:#012148;
    --cc-shadow: 0 10px 28px rgba(1,33,72,.16);
  }

  .cc-fab{
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(34px, env(safe-area-inset-bottom));
    z-index: 999999;

    display: flex;
    align-items: center;
    gap: 10px;

    /* Invisible reveal: ultra subtle */
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.985);
    filter: blur(0.2px);
    pointer-events: none;

    transition:
      opacity .65s cubic-bezier(.22, 1, .36, 1),
      transform .75s cubic-bezier(.22, 1, .36, 1),
      filter .75s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform, filter;
  }

  .cc-fab.is-visible{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    pointer-events: auto;
  }

  /* Ghost button */
  .cc-fab__btn{
    width: 56px;
    height: 56px;
    border-radius: 999px;

    background: transparent;
    border: 2.5px solid var(--cc-navy);
    box-shadow: var(--cc-shadow);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    /* micro feedback, premium */
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .cc-fab__btn:focus-visible{
    box-shadow: var(--cc-shadow), 0 0 0 4px rgba(1,33,72,.18);
  }

  /* Optional: tiny hover only for devices that support it (no label on hover) */
  @media (hover:hover){
    .cc-fab__btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 32px rgba(1,33,72,.18);
    }
  }

  .cc-fab__icon{
    width: 24px;
    height: 24px;
    display: block;
  }

  /* Label: tap only */
  .cc-fab__label{
    max-width: min(72vw, 320px);
    background: rgba(1,33,72,.96);
    color: #fff;

    border-radius: 14px;
    padding: 10px 12px;

    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .1px;

    box-shadow: var(--cc-shadow);
    border: 1px solid rgba(255,255,255,.10);

    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cc-fab.is-open .cc-fab__label{
    opacity: 1;
    transform: translateX(0);
  }

  @media (max-width: 360px){
    .cc-fab__btn{ width: 52px; height: 52px; }
    .cc-fab__icon{ width: 22px; height: 22px; }
    .cc-fab__label{ font-size: 13px; padding: 9px 11px; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .cc-fab{
      transition: opacity .01s linear;
      transform: none;
      filter: none;
    }
    .cc-fab__btn,
    .cc-fab__label{
      transition: none;
    }
  }








/* =========================================================
   05 — SEO PAGES ONLY — SCOPED / SAFE
   ========================================================= */

/* =========================================================
CITYCLEANER — SEO PAGES ONLY (SAFE PATCH)
IMPORTANT:
- N'affecte PAS la homepage
- S'applique UNIQUEMENT aux pages SEO construites via Page Factory
- Requiert d’ajouter la classe "cc-seo-page" sur le wrapper HTML principal
========================================================= */

.cc-seo-page .cc-section{
  width:100%;
  margin:0;
  padding:0;
}

.cc-seo-page .cc-section__inner{
  width:min(1120px, calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}

@media (min-width:900px){
  .cc-seo-page .cc-section__inner{
    padding-left:24px;
    padding-right:24px;
  }
}

/* stacks */
.cc-seo-page .cc-stack{ display:flex; flex-direction:column; gap:16px; }
.cc-seo-page .cc-stack--lg{ display:flex; flex-direction:column; gap:24px; }

/* grids */
@media (min-width:900px){
  .cc-seo-page .cc-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  .cc-seo-page .cc-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .cc-seo-page .cc-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
}

/* prose */
.cc-seo-page .cc-prose{ max-width:68ch; }








/* =========================================================
   04 — BLOG / ARTICLE / ARCHIVE
   ========================================================= */

/* How-to steps */
.cc-article__steps{
  margin: var(--cc-24) 0;
  padding: var(--cc-16);
  border-radius: var(--cc-r24);
  background: var(--cc-bg);
  box-shadow: var(--cc-shadow-card);
}
@media (min-width: 900px){ .cc-article__steps{ padding: var(--cc-20); } }
.cc-article__stepsTitle{ margin: 0 0 var(--cc-12); }

/* Checklist */
.cc-article__checklist{
  margin: var(--cc-24) 0;
  padding: var(--cc-16);
  border-radius: var(--cc-r24);
  background: var(--cc-bgSoft);
  box-shadow: var(--cc-shadow-card);
}
@media (min-width: 900px){ .cc-article__checklist{ padding: var(--cc-20); } }
.cc-article__checklistTitle{ margin: 0 0 var(--cc-12); }





























/* =========================================================
   CITYCLEANER — BLOG SYSTEM — FUSION WP SAFE (V1)
   Contient :
   - BLOG LAYOUT LAYER (V2) — version WP SAFE (sans clamp())
   - BLOG LAYER FINAL (icons typographiques, aucun SVG)
   Compatible Customizer WordPress strict
   Scoped uniquement à .cc-article
   ========================================================= */

/* =========================================================
   1) BLOG LAYOUT LAYER (V2) — WP SAFE
   ========================================================= */

/* Article rhythm */
.cc-article{
  padding-top:56px;
  padding-bottom:56px;
}
@media (min-width:900px){
  .cc-article{
    padding-top:96px;
    padding-bottom:96px;
  }
}

/* Reading width */
.cc-article__container{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}
@media (min-width:900px){
  .cc-article__container{
    padding-left:32px;
    padding-right:32px;
  }
}

/* Header spacing */
.cc-article__header{margin-bottom:56px;}
@media (min-width:900px){
  .cc-article__header{margin-bottom:104px;}
}

.cc-article__lede{
  margin-top:24px;
  font-size:1.125rem;
  line-height:1.7;
  opacity:.82;
}

/* Sections vertical rhythm */
.cc-article__section{
  padding-top:72px;
  padding-bottom:72px;
  position:relative;
  z-index:0;
  background:transparent !important;
}
@media (min-width:900px){
  .cc-article__section{
    padding-top:120px;
    padding-bottom:120px;
  }
}

/* Full bleed alternance */
.cc-article__section:nth-child(even)::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--cc-bgSoft);
  z-index:-1;
}

.cc-article__section + .cc-article__section{
  border-top:1px solid rgba(1,33,72,.06);
}

/* Typographic rhythm */
.cc-article h2{margin-bottom:28px;}
.cc-article h3{margin-top:36px;margin-bottom:18px;}
.cc-article p{margin-bottom:20px;}
.cc-article ul,.cc-article ol{margin-bottom:24px;padding-left:1.2em;}
.cc-article li{margin-bottom:10px;}

/* Mass blocks */
.cc-article__keypoints,
.cc-article__callout,
.cc-article__steps,
.cc-article__checklist,
.cc-article__compare,
.cc-article__decision{
  margin-top:56px;
  margin-bottom:56px;
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(1,33,72,.08);
  background:#ffffff;
  box-shadow:0 10px 30px rgba(1,33,72,.05);
}
@media (min-width:900px){
  .cc-article__keypoints,
  .cc-article__callout,
  .cc-article__steps,
  .cc-article__checklist,
  .cc-article__compare,
  .cc-article__decision{
    padding:40px;
  }
}

/* Separator */
.cc-article__sep{
  height:1px;
  margin-top:80px;
  margin-bottom:80px;
  background:linear-gradient(
    to right,
    transparent,
    rgba(1,33,72,.15),
    transparent
  );
}

/* FAQ */
.cc-article__faq{margin-top:56px;}
.cc-article__faq-item{
  padding:24px 0;
  border-bottom:1px solid rgba(1,33,72,.08);
}

/* Accent H2 (barre turquoise) */
.cc-article h2{
  position:relative;
  padding-left:var(--cc-16);
}
.cc-article h2::before{
  content:"";
  position:absolute;
  left:0;
  top:0.15em;
  width:4px;
  height:1.1em;
  border-radius:var(--cc-r999);
  background:var(--cc-turq);
  opacity:.95;
}

/* =========================================================
   2) BLOG LAYER — ICONS + STRUCTURE (NO SVG)
   ========================================================= */

/* Keypoints */
.cc-article__keypointsTitle{
  font-size:12px;
  letter-spacing:.08em;
  font-weight:900;
  text-transform:uppercase;
  color:var(--cc-ink62);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.cc-article__keypointsTitle::before{
  content:"✦";
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(70,217,255,.14);
  border:1px solid rgba(70,217,255,.20);
  font-weight:900;
  font-size:13px;
}

/* Checklist grid */
.cc-article__checklist ul{
  list-style:none;
  padding-left:0;
  margin:0;
}

.cc-article__checklist li{
  display:grid;
  grid-template-columns:22px minmax(110px,170px) 1fr;
  column-gap:14px;
  align-items:start;
  margin-bottom:12px;
  line-height:1.55;
}

.cc-article__checklist li::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:rgba(39,207,169,.12);
  border:1px solid rgba(39,207,169,.18);
  font-weight:900;
}

.cc-article__checklist li>strong:first-child{
  grid-column:2;
  margin:0;
}
.cc-article__checklist li>strong:first-child~*{
  grid-column:3;
}

/* Callout */
.cc-article__callout{
  position:relative;
  padding-left:calc(var(--cc-24) + 32px);
  padding-top:24px;
  padding-bottom:24px;
}

.cc-article__callout::before{
  content:"";
  position:absolute;
  left:var(--cc-24);
  top:24px;
  bottom:24px;
  width:2px;
  border-radius:999px;
  background:rgba(1,33,72,.18);
}

.cc-article__callout::after{
  content:"i";
  position:absolute;
  left:calc(var(--cc-24) + 8px);
  top:26px;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(1,33,72,.06);
  border:1px solid rgba(1,33,72,.10);
  font-weight:900;
  font-size:13px;
}

.cc-article__callout strong:first-child{
  display:block;
  font-weight:900;
  margin-bottom:8px;
}

/* =========================================================
   FIN — BLOG SYSTEM FUSION WP SAFE
   ========================================================= */

.cc-article h2{
  font-weight:900;
  font-size:28px;
}

@media (min-width:900px){
  .cc-article h2{
    font-size:32px;
  }
}








































/* =========================================================
   CityCleaner — BLOG FAQ ALIGNMENT (Homepage FAQ parity)
   Scope: .cc-article__faq only
   - Sans calc()
   - Conserve le trait turquoise du H2 (ne touche pas h2::before)
   ========================================================= */

/* 1) Reset du rythme "article" dans la zone FAQ */
.cc-article .cc-article__faq h3{
  margin: 0;
  font-family: inherit;
}

/* 2) Gap entre items (homepage patch : 24px / mobile:20px) */
.cc-article .cc-article__faq h3:not(:first-of-type){
  margin-top: 24px;
}
@media (max-width: 767px){
  .cc-article .cc-article__faq h3:not(:first-of-type){
    margin-top: 20px;
  }
}

/* 3) Header carte (équivalent summary "open") */
.cc-article .cc-article__faq h3{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  padding: 20px 52px 20px 32px;

  background: var(--cc-bgSoft);
  color: var(--cc-navy);

  font-weight: 900;
  font-size: 16px;
  line-height: 1.35;

  border: 1px solid var(--cc-ink10);
  border-top-left-radius: var(--cc-r24);
  border-top-right-radius: var(--cc-r24);
}

/* 4) Chevron décoratif (sans SVG) */
.cc-article .cc-article__faq h3::after{
  content: "";
  position: absolute;
  right: 32px;
  top: 50%;
  width: 10px;
  height: 10px;

  border-right: 2.2px solid var(--cc-navy);
  border-bottom: 2.2px solid var(--cc-navy);

  transform: translateY(-50%) rotate(225deg);
  transform-origin: 50% 50%;
}

/* 5) Corps carte (équivalent .cc-faq__content)
      -> Sans calc() : padding-bottom fixe */
.cc-article .cc-article__faq h3 + .cc-body{
  margin: 0;

  padding: 12px 32px 44px 32px; /* 44px = (20px + ~24px) sans calc */

  background: var(--cc-bg);
  color: var(--cc-ink78);

  font-size: 15px;
  line-height: 1.65;
  font-weight: 650;

  border-left: 1px solid var(--cc-ink10);
  border-right: 1px solid var(--cc-ink10);
  border-bottom: 1px solid var(--cc-ink10);

  border-bottom-left-radius: var(--cc-r24);
  border-bottom-right-radius: var(--cc-r24);
}

/* 6) Mobile parity (homepage patch) */
@media (max-width: 767px){
  .cc-article .cc-article__faq h3{
    padding: 16px 48px 16px 24px;
    font-size: 15.5px;
  }

  .cc-article .cc-article__faq h3::after{
    right: 24px;
  }

  .cc-article .cc-article__faq h3 + .cc-body{
    padding: 10px 24px 40px 24px; /* 40px = (16px + ~24px) sans calc */
  }
}

/* 7) Garde-fou : plusieurs .cc-body consécutifs */
.cc-article .cc-article__faq h3 + .cc-body + .cc-body{
  margin-top: -10px;
  padding-top: 0;
}

/* 8) Neutralisation de l'ancien style non canonique (si jamais présent) */
.cc-article .cc-article__faq .cc-article__faq-item{
  padding: 0;
  border: 0;
}









































.cc-article .cc-article__keypoints,
.cc-article .cc-article__callout,
.cc-article .cc-article__steps,
.cc-article .cc-article__checklist,
.cc-article .cc-article__decision{
  box-shadow:none;
  background:var(--cc-bg);
  border:1px solid var(--cc-ink10);
  border-radius:var(--cc-r24);
  padding:var(--cc-16);
  margin:var(--cc-40) 0;
}

@media (min-width:900px){
  .cc-article .cc-article__keypoints,
  .cc-article .cc-article__callout,
  .cc-article .cc-article__steps,
  .cc-article .cc-article__checklist,
  .cc-article .cc-article__decision{
    padding:var(--cc-20);
  }
}

.cc-article .cc-article__keypointsTitle,
.cc-article .cc-article__calloutTitle,
.cc-article .cc-article__stepsTitle,
.cc-article .cc-article__checklistTitle{
  margin:0 0 var(--cc-8);
  padding:0 var(--cc-8);
  font-size:12px;
  letter-spacing:.08em;
  font-weight:900;
  text-transform:uppercase;
  color:var(--cc-ink62);
  display:block;
}

.cc-article .cc-article__keypointsTitle::before,
.cc-article .cc-article__callout::after{
  content:none;
}

/* Keypoints */
.cc-article .cc-article__keypoints ul{
  list-style:none;
  margin:0;
  padding:0;
}
.cc-article .cc-article__keypoints li{
  margin:0;
  padding:var(--cc-16) var(--cc-8);
  border-top:1px solid var(--cc-ink10);
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  color:var(--cc-ink78);
}
.cc-article .cc-article__keypoints li:first-child{border-top:none;}

/* Steps */
.cc-article .cc-article__steps ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:ccStep;
}
.cc-article .cc-article__steps li{
  margin:0;
  padding:var(--cc-16) var(--cc-8);
  border-top:1px solid var(--cc-ink10);
  display:flex;
  align-items:flex-start;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  color:var(--cc-ink78);
  counter-increment:ccStep;
}
.cc-article .cc-article__steps li:first-child{border-top:none;}
.cc-article .cc-article__steps li::before{
  content:counter(ccStep);
  width:24px;
  height:24px;
  margin:1px var(--cc-16) 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(70,217,255,0.10);
  border:1px solid rgba(70,217,255,0.20);
  font-weight:900;
  font-size:13px;
  color:var(--cc-navy);
  flex:0 0 24px;
}

/* Checklist */
.cc-article .cc-article__checklist ul{
  list-style:none;
  margin:0;
  padding:0;
}
.cc-article .cc-article__checklist li{
  margin:0;
  padding:var(--cc-16) var(--cc-8);
  border-top:1px solid var(--cc-ink10);
  display:flex;
  align-items:flex-start;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  color:var(--cc-ink78);
}
.cc-article .cc-article__checklist li:first-child{border-top:none;}
.cc-article .cc-article__checklist li::before{
  content:"✓";
  width:24px;
  height:24px;
  margin:1px var(--cc-16) 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(39,207,169,0.12);
  border:1px solid rgba(39,207,169,0.18);
  font-weight:900;
  font-size:13px;
  color:var(--cc-navy);
  flex:0 0 24px;
}
.cc-article .cc-article__checklist li strong{
  font-weight:900;
  color:var(--cc-navy);
}

/* Callout */
.cc-article .cc-article__callout{
  position:relative;
  padding-left:48px;
}
.cc-article .cc-article__callout::before{
  content:"";
  position:absolute;
  left:var(--cc-16);
  top:var(--cc-16);
  bottom:var(--cc-16);
  width:2px;
  border-radius:999px;
  background:var(--cc-ink18);
}
.cc-article .cc-article__callout p{margin:0;}
.cc-article .cc-article__callout p + p{margin-top:var(--cc-12);}

/* Decision */
.cc-article .cc-article__decision{
  background:var(--cc-bgSoft);
}
.cc-article .cc-article__decision p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  color:var(--cc-ink78);
}
.cc-article .cc-article__decision strong{
  font-weight:900;
  color:var(--cc-navy);
}















































/* CityCleaner BLOG components parity - WordPress Customizer safe (no markup, ASCII only) */

.cc-article .cc-article__keypoints,
.cc-article .cc-article__callout,
.cc-article .cc-article__steps,
.cc-article .cc-article__checklist,
.cc-article .cc-article__decision{
  background: var(--cc-bg);
  border: 1px solid var(--cc-ink10);
  border-radius: var(--cc-r24);
  box-shadow: none;
  padding: var(--cc-16);
  margin: var(--cc-40) 0;
}

@media (min-width: 900px){
  .cc-article .cc-article__keypoints,
  .cc-article .cc-article__callout,
  .cc-article .cc-article__steps,
  .cc-article .cc-article__checklist,
  .cc-article .cc-article__decision{
    padding: var(--cc-20);
  }
}

.cc-article .cc-article__keypointsTitle,
.cc-article .cc-article__calloutTitle,
.cc-article .cc-article__stepsTitle,
.cc-article .cc-article__checklistTitle{
  margin: 0 0 var(--cc-8);
  padding: 0 var(--cc-8);
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--cc-ink62);
  display: block;
}

.cc-article .cc-article__keypointsTitle.cc-hairline{
  border-top: 1px solid var(--cc-ink10);
  padding-top: var(--cc-12);
}

.cc-article .cc-article__keypointsTitle::before,
.cc-article .cc-article__calloutTitle::before,
.cc-article .cc-article__stepsTitle::before,
.cc-article .cc-article__checklistTitle::before{
  content: none;
  display: none;
}

.cc-article .cc-article__keypoints ul,
.cc-article .cc-article__checklist ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-article .cc-article__keypoints li,
.cc-article .cc-article__checklist li{
  margin: 0;
  padding: var(--cc-16) var(--cc-8);
  border-top: 1px solid var(--cc-ink10);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
  color: var(--cc-ink78);
}

.cc-article .cc-article__keypoints li:first-child,
.cc-article .cc-article__checklist li:first-child{
  border-top: none;
}

.cc-article .cc-article__checklist li{
  display: flex;
  align-items: flex-start;
  gap: var(--cc-16);
}

.cc-article .cc-article__checklist li::before{
  content: "\2713";
  width: 24px;
  height: 24px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(39,207,169,0.12);
  border: 1px solid rgba(39,207,169,0.18);
  font-weight: 900;
  font-size: 13px;
  color: var(--cc-navy);
  flex: 0 0 24px;
}

.cc-article .cc-article__checklist li strong{
  font-weight: 900;
  color: var(--cc-navy);
}

.cc-article .cc-article__steps ol{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ccStep;
}

.cc-article .cc-article__steps li{
  margin: 0;
  padding: var(--cc-16) var(--cc-8);
  border-top: 1px solid var(--cc-ink10);
  display: flex;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
  color: var(--cc-ink78);
  counter-increment: ccStep;
}

.cc-article .cc-article__steps li:first-child{
  border-top: none;
}

.cc-article .cc-article__steps li::before{
  content: counter(ccStep);
  width: 24px;
  height: 24px;
  margin: 1px var(--cc-16) 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(70,217,255,0.10);
  border: 1px solid rgba(70,217,255,0.20);
  font-weight: 900;
  font-size: 13px;
  color: var(--cc-navy);
  flex: 0 0 24px;
}

.cc-article .cc-article__callout{
  position: static;
}

.cc-article .cc-article__callout::before,
.cc-article .cc-article__callout::after{
  content: none;
  display: none;
}

.cc-article .cc-article__callout p{
  margin: 0;
  color: var(--cc-ink78);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
}

.cc-article .cc-article__decision p{
  margin: 0;
  color: var(--cc-ink78);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
}












































/* =========================================================
   CityCleaner BLOG — Alignement STRICT sur "Ce que vous déléguez vraiment"
   Scope: .cc-article uniquement
   1 seul bloc, Customizer-safe (pas de clamp/min/data-uri/mask)
========================================================= */

/* ========== 1) CARD SHELL (surface + hairline + radius + ombre) ========== */
.cc-article .cc-article__keypoints,
.cc-article .cc-article__callout,
.cc-article .cc-article__steps,
.cc-article .cc-article__checklist,
.cc-article .cc-article__decision{
  background: var(--cc-bg);
  border: 1px solid var(--cc-ink10);
  border-radius: 18px;          /* = modèle homepage */
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;              /* = modèle homepage */
  padding: 0;                    /* header + body gèrent l’espace */
  margin: var(--cc-40) 0;
}

/* Neutralise les styles "callout barre" hérités */
.cc-article .cc-article__callout{ padding-left: 0; position: static; }
.cc-article .cc-article__callout::before,
.cc-article .cc-article__callout::after{ content: none; display: none; }

/* ========== 2) HEADER DE CARTE (kicker + séparation hairline) ========== */
/* Titres déjà typés */
.cc-article .cc-article__keypointsTitle,
.cc-article .cc-article__calloutTitle,
.cc-article .cc-article__stepsTitle,
.cc-article .cc-article__checklistTitle{
  display: block;
  margin: 0;
  padding: 22px 20px 14px;       /* top spacing homepage */
  border-top: 0;
  border-bottom: 1px solid var(--cc-ink10); /* hairline interne */
  background: transparent;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--cc-ink62);
  white-space: nowrap;
}

/* Décision rapide : le titre n’a PAS de classe dédiée -> on cible "le 1er cc-hairline du bloc" */
.cc-article .cc-article__decision > p.cc-hairline:first-child{
  display: block;
  margin: 0;
  padding: 22px 20px 14px;
  border-top: 0;
  border-bottom: 1px solid var(--cc-ink10);
  background: transparent;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--cc-ink62);
  white-space: nowrap;
}

/* Anti double-hairline (si cc-hairline injecte une ligne) */
.cc-article .cc-hairline.cc-article__keypointsTitle,
.cc-article .cc-hairline.cc-article__calloutTitle,
.cc-article .cc-hairline.cc-article__stepsTitle,
.cc-article .cc-hairline.cc-article__checklistTitle,
.cc-article .cc-article__decision > p.cc-hairline:first-child{
  border-top: 0;
}

/* ========== 3) BODY PADDING (comme la liste homepage) ========== */
/* Paragraphes (callout + décision) */
.cc-article .cc-article__callout > p.cc-body,
.cc-article .cc-article__decision > p.cc-body{
  margin: 0;
  padding: 16px 20px 20px;

  color: var(--cc-ink78);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
}

/* ========== 4) LIST STYLE HOMEPAGE (grid + gap, sans séparateurs, icône simple) ========== */
.cc-article .cc-article__keypoints ul.cc-body,
.cc-article .cc-article__checklist ul.cc-body,
.cc-article .cc-article__steps ol.cc-body{
  list-style: none;
  margin: 0;
  padding: 16px 20px 20px;

  display: grid;
  gap: 14px;                     /* = modèle homepage */
}

/* Items = flex gap 12, pas de border-top, pas de padding row */
.cc-article .cc-article__keypoints li,
.cc-article .cc-article__checklist li,
.cc-article .cc-article__steps li{
  margin: 0;
  padding: 0;
  border: 0;

  display: flex;
  align-items: flex-start;
  gap: 12px;

  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
  color: var(--cc-ink78);
}

/* Override : l’ancien CSS mettait des pastilles + border-top -> on force le style "icone simple" */
.cc-article .cc-article__steps ol.cc-body{ counter-reset: ccStep; }
.cc-article .cc-article__steps li{ counter-increment: ccStep; }

/* Faux "pictos" (fallback sans SVG, alignés 24x24 comme homepage) */
.cc-article .cc-article__keypoints li::before,
.cc-article .cc-article__checklist li::before,
.cc-article .cc-article__steps li::before{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 1px;
  opacity: .95;

  color: var(--cc-navy);
  font-weight: 900;
  line-height: 1;

  background: transparent;  /* supprime l’effet pastille */
  border: 0;                /* supprime l’effet pastille */
  border-radius: 0;
}

/* Keypoints = chevron sobre */
.cc-article .cc-article__keypoints li::before{ content: "›"; font-size: 20px; }

/* Checklist = check sobre */
.cc-article .cc-article__checklist li::before{ content: "✓"; font-size: 18px; }

/* Steps = numéro sobre (sans cercle) */
.cc-article .cc-article__steps li::before{ content: counter(ccStep); font-size: 14px; }

/* Accent typographique interne */
.cc-article .cc-article__keypoints li strong,
.cc-article .cc-article__checklist li strong,
.cc-article .cc-article__steps li strong,
.cc-article .cc-article__decision strong{
  font-weight: 900;
  color: var(--cc-navy);
}

/* ========== 5) MOBILE COMPACT (mêmes règles, spacing réduit) ========== */
@media (max-width: 640px){
  .cc-article .cc-article__keypoints,
  .cc-article .cc-article__callout,
  .cc-article .cc-article__steps,
  .cc-article .cc-article__checklist,
  .cc-article .cc-article__decision{
    margin: var(--cc-32) 0;
  }

  .cc-article .cc-article__keypointsTitle,
  .cc-article .cc-article__calloutTitle,
  .cc-article .cc-article__stepsTitle,
  .cc-article .cc-article__checklistTitle,
  .cc-article .cc-article__decision > p.cc-hairline:first-child{
    padding: 18px 16px 12px;
  }

  .cc-article .cc-article__callout > p.cc-body,
  .cc-article .cc-article__decision > p.cc-body{
    padding: 14px 16px 16px;
  }

  .cc-article .cc-article__keypoints ul.cc-body,
  .cc-article .cc-article__checklist ul.cc-body,
  .cc-article .cc-article__steps ol.cc-body{
    padding: 14px 16px 16px;
    gap: 12px;
  }
}






/* =========================================================
   CityCleaner BLOG — Titres blocs unifiés (Apple-like, alignés homepage)
   Scope: .cc-article uniquement
   Objectif: même sensation que “Ce que vous déléguez vraiment”
========================================================= */

/* Kicker header (uniformisé) */
.cc-article .cc-article__keypointsTitle,
.cc-article .cc-article__calloutTitle,
.cc-article .cc-article__stepsTitle,
.cc-article .cc-article__checklistTitle,
.cc-article .cc-article__decisionTitle,
.cc-article .cc-article__decision > p.cc-hairline:first-child{
  /* Layout */
  display: block;                 /* évite les micro-décalages de baseline en flex */
  margin: 0;
  padding: 22px 20px 14px;

  /* Hairline interne identique pattern card */
  border-top: 0;
  border-bottom: 1px solid var(--cc-ink10);
  background: transparent;

  /* Typo (verrouillée) */
  font-size: 12px !important;
  line-height: 1.15 !important;   /* baseline plus “net” */
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: var(--cc-ink62) !important;

  /* Rendu Apple+++ */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Sécurité : si .cc-hairline injecte une ligne en haut */
.cc-article .cc-hairline.cc-article__keypointsTitle,
.cc-article .cc-hairline.cc-article__calloutTitle,
.cc-article .cc-hairline.cc-article__stepsTitle,
.cc-article .cc-hairline.cc-article__checklistTitle,
.cc-article .cc-article__decision > p.cc-hairline:first-child{
  border-top: 0;
}

/* MOBILE compact (mêmes proportions, padding réduit) */
@media (max-width: 640px){
  .cc-article .cc-article__keypointsTitle,
  .cc-article .cc-article__calloutTitle,
  .cc-article .cc-article__stepsTitle,
  .cc-article .cc-article__checklistTitle,
  .cc-article .cc-article__decisionTitle,
  .cc-article .cc-article__decision > p.cc-hairline:first-child{
    padding: 18px 16px 12px;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}






















/* CityCleaner — Article : icône “badge” comme homepage (cercle + navy) */
.cc-article .cc-article__title--ico{
  display: flex;
  align-items: center;
  gap: 10px; /* espace badge -> texte */
}

/* Le badge circulaire */
.cc-article .cc-article__title--ico .cc-article__ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;

  /* fond + bordure façon homepage (ajuste si besoin) */
  background: rgba(39, 207, 169, 0.10);   /* turquoise très léger */
  border: 1px solid rgba(39, 207, 169, 0.25);

  flex: 0 0 auto;
}

/* Le SVG : navy net, jamais gris, centré */
.cc-article .cc-article__title--ico .cc-article__ico svg,
.cc-article .cc-article__title--ico .cc-article__ico svg *{
  stroke: #012148 !important;
  fill: none !important;
  opacity: 1 !important;
  filter: none !important;
  vector-effect: non-scaling-stroke;
}

/* Option : fixe la taille si Elementor la modifie */
.cc-article .cc-article__title--ico .cc-article__ico svg{
  width: 18px !important;
  height: 18px !important;
}





























/* FIX Methode — WP safe */
.cc-article .cc-article__steps li{
  display:flex !important;
  align-items:flex-start !important;
}

.cc-article .cc-article__steps li::before{
  flex:0 0 24px !important;
}

.cc-article .cc-article__steps li > *{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.cc-article .cc-article__steps li p{
  margin:0 !important;
}


/* =========================================================
CityCleaner — PATCH BLOG V5
Objectif : verrouiller les titres de cartes éditoriales, le CTA final
et le rendu blog canonique demandé par le pipeline V2.
========================================================= */

/* Titre de carte : le texte reste stable même si le SVG / flex change */
.cc-article .cc-article__title--ico .cc-article__titleText{
  display:inline-block;
  min-width:0;
}

/* Sécurité : si .cc-hairline est présent sur le titre décision */
.cc-article .cc-hairline.cc-article__decisionTitle{
  border-top:0;
}

/* CTA final blog : vraie clôture d’article, indépendante du système homepage */
.cc-article .cc-article__ctaEnd{
  padding-top:var(--cc-section-py-mobile);
  padding-bottom:var(--cc-section-py-mobile);
}

.cc-article .cc-article__ctaEnd .cc-article__container{
  display:flex;
  justify-content:center;
  padding-top:var(--cc-32);
  border-top:1px solid var(--cc-ink10);
}

.cc-article .cc-article__ctaEnd .cc-ctaPrimary{
  width:fit-content;
}

@media (min-width: 900px){
  .cc-article .cc-article__ctaEnd{
    padding-top:var(--cc-section-py-cta-mobile);
    padding-bottom:var(--cc-section-py-cta-mobile);
  }

  .cc-article .cc-article__ctaEnd .cc-article__container{
    padding-top:var(--cc-40);
  }
}


/* =========================================================
CityCleaner — PATCH BLOG V6
Objectif : finaliser la clôture d’article avec texte de transition,
CTA final orienté selon l’intention et icône WhatsApp blog-safe.
Ce patch complète V5 sans casser l’historique.
========================================================= */

/* Clôture d’article : texte passerelle + CTA final unique */
.cc-article .cc-article__ctaEnd .cc-article__container{
  flex-direction:column;
  align-items:flex-start;
  gap:var(--cc-16);
}

.cc-article .cc-article__ctaEnd .cc-body{
  margin:0;
  max-width:62ch;
}

.cc-article .cc-article__ctaEnd .cc-ctaPrimary{
  width:fit-content;
  max-width:100%;
}

.cc-article .cc-article__ctaEnd .cc-article__ctaIco{
  display:inline-flex;
  width:18px;
  height:18px;
  flex:0 0 18px;
  align-items:center;
  justify-content:center;
}

.cc-article .cc-article__ctaEnd .cc-article__ctaIco svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

@media (max-width: 639px){
  .cc-article .cc-article__ctaEnd .cc-ctaPrimary{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
CityCleaner — PATCH BLOG V7
Objectif : finaliser la clôture d’article après QA approfondie.
- texte passerelle lisible et naturel
- CTA final aligné avec sa destination réelle
- icône WhatsApp strictement réservée au bouton final externe
========================================================= */

.cc-article .cc-article__ctaEnd .cc-body{
  color:var(--cc-ink78);
}

.cc-article .cc-article__ctaEnd .cc-body + .cc-ctaPrimary{
  margin-top:4px;
}

.cc-article .cc-article__ctaEnd .cc-ctaPrimary .cc-article__ctaIco{
  margin-right:2px;
}

@media (min-width:900px){
  .cc-article .cc-article__ctaEnd .cc-body{
    max-width:56ch;
  }
}


/* =========================================================
CityCleaner — PATCH BLOG V8
Objectif : rendre le rendu article définitivement lisible et stable.
- CTA final centré et espacé proprement
- icône WhatsApp rendue visible même si le SVG inline varie
- corps d’article plus confortable (lead-like, mais scoped article)
- liens éditoriaux visibles au repos et navy au survol
- cartes éditoriales avec un relief légèrement plus lisible
========================================================= */

/* 1) CTA final : vraie pile verticale centrée */
.cc-article .cc-article__ctaEnd .cc-article__container{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:var(--cc-20) !important;
}

.cc-article .cc-article__ctaEnd .cc-body{
  margin:0 auto !important;
  max-width:60ch !important;
  text-align:center !important;
}

.cc-article .cc-article__ctaEnd .cc-ctaPrimary{
  align-self:center !important;
  justify-content:center !important;
}

.cc-article .cc-article__ctaEnd .cc-body + .cc-ctaPrimary{
  margin-top:0 !important;
}

/* 2) Icône WhatsApp : fallback CSS visuel définitif */
.cc-article .cc-article__ctaEnd .cc-article__ctaIco{
  position:relative;
  display:inline-flex !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  flex:0 0 18px !important;
  align-items:center !important;
  justify-content:center !important;
  margin-right:2px !important;
}

.cc-article .cc-article__ctaEnd .cc-article__ctaIco svg{
  display:none !important;
}

.cc-article .cc-article__ctaEnd .cc-article__ctaIco::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20.52 3.48A11.87 11.87 0 0 0 12.07 0C5.5 0 .16 5.34.16 11.91c0 2.1.55 4.15 1.59 5.96L0 24l6.32-1.66a11.9 11.9 0 0 0 5.75 1.47h.01c6.57 0 11.91-5.34 11.91-11.91 0-3.18-1.24-6.16-3.47-8.42Z'/%3E%3Cpath fill='%23012148' d='M17.06 14.5c-.28-.14-1.67-.82-1.93-.91-.26-.09-.45-.14-.64.14-.19.28-.73.91-.9 1.09-.16.19-.33.21-.61.07-.28-.14-1.16-.43-2.2-1.37-.81-.72-1.36-1.61-1.52-1.89-.16-.28-.02-.43.12-.57.12-.12.28-.33.42-.49.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.49-.07-.14-.64-1.54-.88-2.12-.23-.55-.47-.47-.64-.48h-.55c-.19 0-.49.07-.75.35-.26.28-.98.96-.98 2.34 0 1.37 1 2.69 1.14 2.88.14.19 1.96 3 4.75 4.2.66.28 1.18.45 1.58.58.66.21 1.26.18 1.73.11.53-.08 1.67-.68 1.9-1.34.23-.65.23-1.21.16-1.33-.07-.12-.26-.19-.54-.33Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* 3) Corps d’article : confort proche du lead, sans toucher au global */
.cc-article p.cc-body,
.cc-article .cc-article__callout > p.cc-body,
.cc-article .cc-article__decision > p.cc-body,
.cc-article .cc-article__faq h3 + .cc-body,
.cc-article ul.cc-body,
.cc-article ol.cc-body,
.cc-article li{
  font-size:16px !important;
  line-height:1.68 !important;
  color:var(--cc-ink78) !important;
  font-weight:560 !important;
}

.cc-article .cc-article__lede .cc-body{
  font-size:16px !important;
  line-height:1.68 !important;
  font-weight:560 !important;
}

/* 4) Gras utile : plus lisible, jamais agressif */
.cc-article .cc-body strong,
.cc-article .cc-lead strong,
.cc-article li strong{
  color:var(--cc-navy) !important;
  font-weight:780 !important;
}

/* 5) Liens de corps d’article : visibles au repos, navy au hover/focus */
.cc-article .cc-body a,
.cc-article .cc-lead a,
.cc-article li a{
  color:var(--cc-navy) !important;
  font-weight:760 !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(1,33,72,.22) !important;
  box-shadow:inset 0 -0.08em 0 rgba(39,207,169,.14);
  transition:color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.cc-article .cc-body a:hover,
.cc-article .cc-body a:focus,
.cc-article .cc-lead a:hover,
.cc-article .cc-lead a:focus,
.cc-article li a:hover,
.cc-article li a:focus,
.cc-article .cc-body a:visited,
.cc-article .cc-lead a:visited,
.cc-article li a:visited{
  color:var(--cc-navy) !important;
  border-bottom-color:var(--cc-navy) !important;
  box-shadow:inset 0 -0.08em 0 rgba(1,33,72,.12);
}

/* 6) Cartes éditoriales : un relief un peu plus lisible, sans agressivité */
.cc-article .cc-article__keypoints,
.cc-article .cc-article__callout,
.cc-article .cc-article__steps,
.cc-article .cc-article__checklist,
.cc-article .cc-article__decision{
  border-color:rgba(1,33,72,.10) !important;
  box-shadow:0 14px 34px rgba(1,33,72,.08) !important;
}

@media (max-width: 639px){
  .cc-article p.cc-body,
  .cc-article .cc-article__callout > p.cc-body,
  .cc-article .cc-article__decision > p.cc-body,
  .cc-article .cc-article__faq h3 + .cc-body,
  .cc-article ul.cc-body,
  .cc-article ol.cc-body,
  .cc-article li{
    font-size:15.5px !important;
    line-height:1.66 !important;
  }

  .cc-article .cc-article__ctaEnd .cc-ctaPrimary{
    width:100% !important;
  }
}


/* =========================================================
PATCH V11 — ARTICLE MOBILE HARDENING + FAQ INTERACTIVE + FAB SAFETY
Objectif :
- aucun débordement horizontal
- cartes plus verticales et lisibles
- FAQ interactive mobile-safe
- lecture premium sur smartphone
- disparition du floating WhatsApp sur article mobile
========================================================= */
@media (max-width: 767px){
  .cc-article,
  .cc-article *{
    box-sizing:border-box;
    min-width:0;
  }

  .cc-article{
    overflow-x:clip;
  }

  .cc-article .cc-article__container{
    width:min(100%, 680px);
    overflow-x:clip;
  }

  .cc-article h1,
  .cc-article h2,
  .cc-article h3,
  .cc-article p,
  .cc-article li,
  .cc-article a,
  .cc-article strong,
  .cc-article summary,
  .cc-article button{
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
  }

  .cc-article .cc-body,
  .cc-article .cc-body li,
  .cc-article .cc-body p{
    font-size:16.5px !important;
    line-height:1.72 !important;
    letter-spacing:-0.005em;
    font-weight:560 !important;
  }

  .cc-article .cc-lead{
    font-size:17px !important;
    line-height:1.70 !important;
  }

  .cc-article .cc-article__keypoints,
  .cc-article .cc-article__callout,
  .cc-article .cc-article__steps,
  .cc-article .cc-article__checklist,
  .cc-article .cc-article__decision{
    padding:20px 18px !important;
    border-radius:18px !important;
  }

  .cc-article .cc-article__checklist li,
  .cc-article .cc-article__steps li{
    display:block !important;
    padding-left:0 !important;
    min-width:0;
  }

  .cc-article .cc-article__checklist li strong,
  .cc-article .cc-article__steps li strong{
    display:inline !important;
    margin-right:6px;
    min-width:0;
  }

  .cc-article .cc-article__faq details,
  .cc-article .cc-faq__item{
    overflow:hidden;
    border-radius:18px;
  }

  .cc-article .cc-article__faq summary,
  .cc-article .cc-faq__trigger{
    list-style:none;
    cursor:pointer;
    display:block;
    width:100%;
  }

  .cc-article .cc-article__faq summary::-webkit-details-marker,
  .cc-article .cc-faq__trigger::-webkit-details-marker{
    display:none;
  }

  .cc-article .cc-article__ctaEnd .cc-article__container{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:18px !important;
  }

  .cc-article .cc-article__ctaEnd .cc-body{
    max-width:36ch;
    margin:0 auto !important;
  }

  .cc-article .cc-article__ctaEnd .cc-ctaPrimary{
    width:100%;
    max-width:320px;
    justify-content:center;
  }

  body.single-post .cc-fab,
  body.single .cc-fab,
  body.blog .cc-fab{
    display:none !important;
  }
}

.cc-article .cc-body a,
.cc-article .cc-lead a,
.cc-article li a{
  color:var(--cc-ink) !important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}

.cc-article .cc-body a:hover,
.cc-article .cc-body a:focus,
.cc-article .cc-body a:visited,
.cc-article .cc-lead a:hover,
.cc-article .cc-lead a:focus,
.cc-article li a:hover,
.cc-article li a:focus{
  color:var(--cc-ink) !important;
}


/* =====================================================================
CityCleaner PATCH V12 — article mobile runtime fixes
Scope: article only. No homepage selectors touched.
Fixes:
1) kicker mobile wrap
2) editorial cards vertical reading on smartphone
3) article FAQ parity on current blog markup
4) runtime safety against floating WhatsApp overlap on article pages
===================================================================== */

/* FAQ article — canonical styling on actual blog markup */
.cc-article .cc-faq__item{
  margin:0;
  background:var(--cc-bg);
  border:1px solid var(--cc-ink10);
  border-radius:var(--cc-r24);
  overflow:hidden;
}

.cc-article .cc-faq__item + .cc-faq__item{
  margin-top:24px;
}

.cc-article .cc-faq__item[open] .cc-faq__trigger{
  background:var(--cc-bgSoft);
  border-bottom:1px solid var(--cc-ink10);
}

.cc-article .cc-faq__trigger{
  list-style:none;
  cursor:pointer;
  display:block;
  width:100%;
  margin:0;
  padding:20px 52px 20px 32px;
  position:relative;

  color:var(--cc-navy);
  font-weight:900;
  font-size:16px;
  line-height:1.35;
}

.cc-article .cc-faq__trigger::-webkit-details-marker{
  display:none;
}

.cc-article .cc-faq__trigger::after{
  content:"";
  position:absolute;
  right:32px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2.2px solid var(--cc-navy);
  border-bottom:2.2px solid var(--cc-navy);
  transform:translateY(-60%) rotate(45deg);
  transform-origin:50% 50%;
  opacity:.78;
}

.cc-article .cc-faq__item[open] .cc-faq__trigger::after{
  transform:translateY(-40%) rotate(225deg);
  opacity:1;
}

.cc-article .cc-faq__panel{
  padding:12px 32px calc(20px + var(--cc-24));
  color:var(--cc-ink78);
}

.cc-article .cc-faq__panel .cc-body{
  margin:0;
  font-size:15px;
  line-height:1.65;
  font-weight:650;
}

/* Runtime safety — article reading always wins over floating widgets */
body.single-post .cc-fab,
body.single .cc-fab{
  display:none !important;
}

@supports selector(body:has(.cc-article)){
  body:has(.cc-article) .cc-fab{
    display:none !important;
  }
}

@media (max-width:767px){

  /* 1) Kicker — allow wrapping on article mobile only */
  .cc-article .cc-kicker{
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* 2) Editorial cards — keep vertical reading, avoid pseudo-columns */
  .cc-article .cc-article__keypoints,
  .cc-article .cc-article__callout,
  .cc-article .cc-article__steps,
  .cc-article .cc-article__checklist,
  .cc-article .cc-article__decision{
    padding:20px 18px !important;
    border-radius:18px !important;
  }

  .cc-article .cc-article__keypoints ul.cc-body,
  .cc-article .cc-article__checklist ul.cc-body,
  .cc-article .cc-article__steps ol.cc-body{
    padding:14px 0 0 !important;
    display:grid !important;
    gap:14px !important;
  }

  .cc-article .cc-article__keypoints li,
  .cc-article .cc-article__checklist li,
  .cc-article .cc-article__steps li{
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    min-width:0;
    padding:0 !important;
    border:0 !important;
    overflow-wrap:anywhere;
  }

  .cc-article .cc-article__keypoints li::before,
  .cc-article .cc-article__checklist li::before,
  .cc-article .cc-article__steps li::before{
    flex:0 0 24px !important;
    margin:2px 0 0 0 !important;
  }

  .cc-article .cc-article__keypoints li > *,
  .cc-article .cc-article__checklist li > *,
  .cc-article .cc-article__steps li > *{
    min-width:0;
  }

  /* 3) FAQ article — homepage-like spacing on current article classes */
  .cc-article .cc-faq__item{
    border-radius:18px;
  }

  .cc-article .cc-faq__item + .cc-faq__item{
    margin-top:20px;
  }

  .cc-article .cc-faq__trigger{
    padding:16px 48px 16px 24px;
    font-size:15.5px;
  }

  .cc-article .cc-faq__trigger::after{
    right:24px;
  }

  .cc-article .cc-faq__panel{
    padding:10px 24px calc(16px + var(--cc-24));
  }
}


/* =====================================================================
CityCleaner PATCH V14 — readability + anti-hyphenation + article finish (no HTML post-edit)
Scope: article only. Extends V12 without touching homepage.
Targets:
1) reduce aggressive auto-hyphenation on mobile
2) restore lead/body hierarchy
3) de-columnise 'Profils non compatibles'
4) soften CTA ending into a more editorial closure
5) keep FAQ trigger readable without requiring any HTML post-edit
===================================================================== */


@media (max-width:767px){

  /* 1) Anti-hyphenation — no premium article should read like broken syllables */
  .cc-article h1,
  .cc-article h2,
  .cc-article h3,
  .cc-article p,
  .cc-article li,
  .cc-article a,
  .cc-article strong,
  .cc-article summary,
  .cc-article button{
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  @supports (text-wrap: balance){
    .cc-article h1,
    .cc-article h2,
    .cc-article h3,
    .cc-article .cc-kicker{
      text-wrap:balance;
    }
  }

  @supports (text-wrap: pretty){
    .cc-article p,
    .cc-article li,
    .cc-article summary,
    .cc-article .cc-body,
    .cc-article .cc-lead{
      text-wrap:pretty;
    }
  }

  /* 2) Lead / body hierarchy — close, but not flattened */
  .cc-article .cc-body,
  .cc-article .cc-body li,
  .cc-article .cc-body p{
    font-size:16px !important;
    line-height:1.74 !important;
    letter-spacing:-0.004em;
    font-weight:500 !important;
  }

  .cc-article .cc-lead{
    font-size:17.25px !important;
    line-height:1.68 !important;
    letter-spacing:-0.006em;
    font-weight:620 !important;
  }

  /* 3) Checklist block — remove any last pseudo-column behaviour */
  .cc-article .cc-article__checklist ul.cc-body{
    display:grid !important;
    gap:16px !important;
    padding-top:14px !important;
  }

  .cc-article .cc-article__checklist li{
    display:block !important;
    padding:0 !important;
    min-width:0;
    border:0 !important;
  }

  .cc-article .cc-article__checklist li::before{
    display:none !important;
    content:none !important;
  }

  .cc-article .cc-article__checklist li strong{
    display:block !important;
    margin:0 0 6px 0 !important;
    font-size:15px !important;
    line-height:1.25 !important;
    hyphens:none !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /* 4) CTA end — less campaign, more editorial finish */
  .cc-article .cc-article__ctaEnd .cc-article__container{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left !important;
    gap:14px !important;
  }

  .cc-article .cc-article__ctaEnd .cc-body{
    max-width:40ch !important;
    margin:0 !important;
  }

  .cc-article .cc-article__ctaEnd .cc-ctaPrimary{
    width:min(100%, 360px) !important;
    max-width:360px !important;
    justify-content:center !important;
  }
}


/* =====================================================================
CityCleaner PATCH V15 — last-mile list integrity + mobile title polish
Scope: article only. No HTML post-edit required.
Targets:
1) kill anonymous-flex-item breaks inside keypoints/checklist items
2) keep short threshold terms (ex: "4 biens") readable in-flow
3) keep checklist labels + colon semantically tied on mobile
4) slightly reduce over-tall H2 blocks on smartphone
===================================================================== */

/* Keypoints + checklist: never use flex on inline-rich list items */
.cc-article .cc-article__keypoints ul.cc-body,
.cc-article .cc-article__checklist ul.cc-body{
  display:grid !important;
  gap:14px !important;
  padding-left:0 !important;
  margin-left:0 !important;
  list-style:none !important;
}

.cc-article .cc-article__keypoints li,
.cc-article .cc-article__checklist li{
  display:block !important;
  position:relative !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 0 32px !important;
  border:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

.cc-article .cc-article__keypoints li::before,
.cc-article .cc-article__checklist li::before{
  position:absolute !important;
  left:0 !important;
  top:.14em !important;
  margin:0 !important;
  flex:none !important;
  transform:none !important;
}

.cc-article .cc-article__keypoints li strong,
.cc-article .cc-article__checklist li strong{
  display:inline !important;
  margin:0 !important;
  font-size:inherit !important;
  line-height:inherit !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

.cc-article .cc-article__keypoints li strong{
  font-weight:800 !important;
}

.cc-article .cc-article__checklist li strong{
  font-weight:800 !important;
}

/* Mobile polish */
@media (max-width:767px){

  /* keep list items readable without pseudo-column feel */
  .cc-article .cc-article__keypoints ul.cc-body,
  .cc-article .cc-article__checklist ul.cc-body{
    gap:16px !important;
    padding-top:14px !important;
  }

  .cc-article .cc-article__keypoints li,
  .cc-article .cc-article__checklist li{
    padding-left:30px !important;
    font-size:16px !important;
    line-height:1.72 !important;
  }

  .cc-article .cc-article__keypoints li::before,
  .cc-article .cc-article__checklist li::before{
    top:.18em !important;
  }

  /* prevent the checklist label from looking detached from its description */
  .cc-article .cc-article__checklist li strong{
    display:inline !important;
  }

  /* slightly calmer mobile H2 rhythm without flattening hierarchy */
  .cc-article h2{
    font-size:clamp(26px, 6.6vw, 31px) !important;
    line-height:1.16 !important;
    letter-spacing:-0.018em !important;
  }

  /* make the final button feel anchored to the editorial closure */
  .cc-article .cc-article__ctaEnd .cc-ctaPrimary{
    align-self:flex-start !important;
  }
}







/* Masquer la ligne meta au-dessus des articles */
.single-post .entry-meta,
.single-post .post-meta,
.single-post .ast-single-post-meta,
.single-post .ast-above-title-meta,
.single-post .ast-breadcrumbs,
.single-post .elementor-post-info,
.single-post .cat-links,
.single-post .byline,
.single-post .posted-on,
.single-post .comments-link {
  display: none !important;
}








/* =========================================================
CITYCLEANER — SHARE BLOCK ARTICLE
Objectif : bloc de partage discret, premium, aligné article
À coller tout en bas du CSS additionnel
========================================================= */

.single-post .entry-content .sharedaddy,
.single-post .entry-content .wp-block-jetpack-sharing-buttons{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--cc-ink10);
}

.single-post .entry-content .sharedaddy h3.sd-title,
.single-post .entry-content .wp-block-jetpack-sharing-buttons .wp-block-jetpack-sharing-buttons__label{
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--cc-ink62) !important;
}

.single-post .entry-content .sharedaddy ul,
.single-post .entry-content .jetpack-sharing-buttons__services-list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.single-post .entry-content .sharedaddy li,
.single-post .entry-content .jetpack-sharing-buttons__services-list li{
  margin: 0 !important;
}

.single-post .entry-content .sharedaddy a,
.single-post .entry-content .jetpack-sharing-buttons__services-list a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px;
  padding: 0 14px !important;
  border: 1px solid var(--cc-ink10) !important;
  border-radius: var(--cc-r14) !important;
  background: var(--cc-bg) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: var(--cc-navy) !important;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.single-post .entry-content .sharedaddy a:hover,
.single-post .entry-content .jetpack-sharing-buttons__services-list a:hover{
  background: var(--cc-bgSoft) !important;
  border-color: var(--cc-ink18) !important;
  transform: translateY(-1px);
}

.single-post .entry-content .sharedaddy a:focus-visible,
.single-post .entry-content .jetpack-sharing-buttons__services-list a:focus-visible{
  outline: 2px solid rgba(1,33,72,.22);
  outline-offset: 4px;
}

.single-post .entry-content .sharedaddy svg,
.single-post .entry-content .jetpack-sharing-buttons__services-list svg{
  width: 16px;
  height: 16px;
}

@media (max-width: 640px){
  .single-post .entry-content .sharedaddy,
  .single-post .entry-content .wp-block-jetpack-sharing-buttons{
    margin-top: 24px;
    padding-top: 16px;
  }

  .single-post .entry-content .sharedaddy a,
  .single-post .entry-content .jetpack-sharing-buttons__services-list a{
    min-height: 40px;
    padding: 0 12px !important;
    font-size: 13.5px !important;
  }
}




/* CITYCLEANER — micro-ajustements bloc partage */

.single-post .entry-content .sharedaddy,
.single-post .entry-content .wp-block-jetpack-sharing-buttons{
  margin-top: 18px !important;
  padding-top: 14px !important;
}

.single-post .entry-content .sharedaddy h3.sd-title,
.single-post .entry-content .wp-block-jetpack-sharing-buttons .wp-block-jetpack-sharing-buttons__label{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cc-ink50) !important;
  margin-bottom: 10px !important;
}

/* Masquer le lien d’admin/personnalisation si affiché */
.single-post .entry-content .sd-title + a,
.single-post .entry-content a.sharing-anchor,
.single-post .entry-content .sharedaddy .sharing-hidden + a,
.single-post .entry-content .sharedaddy .sd-content ul + a{
  display: none !important;
}

.single-post .entry-content .sharedaddy,
.single-post .entry-content .wp-block-jetpack-sharing-buttons{
  margin-top: 14px !important;
  padding-top: 12px !important;
}









/* =========================================================
   Archive cleanup legacy retiré en V17
   - pré-pack archive redondant supprimé
   - Archive V1 retiré du runtime de ce fichier
   - Archive V2 devient la seule couche archive canonique ici
   ========================================================= */

/* =========================================================
CANON — ARCHIVE COHERENCE PACK V2
Objectif : cette couche est la référence archive active du fichier.
Note maintenance : ne pas réintroduire un pré-pack archive parallèle.
========================================================= */



/* =========================================================
CITYCLEANER — ARCHIVE COHERENCE PACK V2
Objectif : aligner la page Articles avec la homepage CityCleaner
à partir des tokens DS + du CSS additionnel actuel.
À coller tout en bas du CSS additionnel.
========================================================= */

/* 1) Archive blog : même ambiance globale calme que le site */
.blog,
.archive{
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(1,33,72,0.045), transparent 60%),
    radial-gradient(1100px 650px at 90% 20%, rgba(39,207,169,0.045), transparent 60%),
    #FCFDFE;
}

/* 2) Conteneur central propre, comme une section CityCleaner */
.blog .site-main,
.archive .site-main{
  width: min(1120px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--cc-56);
  padding-bottom: var(--cc-72);
}

/* 3) Carte article archive : shell unique, premium et sobre */
.blog article,
.archive article{
  max-width: 940px;
  margin: 0 auto;
  background: var(--cc-bg);
  border: 1px solid var(--cc-ink10);
  border-radius: var(--cc-r24);
  box-shadow: none;
  padding: clamp(28px, 3vw, 40px);
}

/* 4) Titre archive : rapprochement homepage/article */
.blog article .entry-title,
.archive article .entry-title,
.blog article .entry-title a,
.archive article .entry-title a{
  margin: 0 0 var(--cc-20) 0 !important;
  color: var(--cc-navy) !important;
  text-decoration: none !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(34px, 4.1vw, 50px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* 5) Extrait : même tonalité que les leads CityCleaner */
.blog article .entry-content,
.archive article .entry-content,
.blog article .entry-summary,
.archive article .entry-summary,
.blog article .entry-content p,
.archive article .entry-content p,
.blog article .entry-summary p,
.archive article .entry-summary p{
  color: var(--cc-ink78) !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  font-weight: 650 !important;
}

/* 6) Meta archive : sécurité totale */
.blog .posted-on,
.blog .byline,
.blog .cat-links,
.blog .comments-link,
.blog .entry-meta,
.blog .ast-above-title-meta,
.blog .ast-single-post-order,
.archive .posted-on,
.archive .byline,
.archive .cat-links,
.archive .comments-link,
.archive .entry-meta,
.archive .ast-above-title-meta,
.archive .ast-single-post-order{
  display: none !important;
}

/* 7) Lien lire la suite : discret mais premium */
.blog a.more-link,
.archive a.more-link,
.blog .read-more,
.archive .read-more{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: var(--cc-24) !important;
  color: var(--cc-navy) !important;
  text-decoration: none !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
}

.blog a.more-link:hover,
.archive a.more-link:hover,
.blog .read-more:hover,
.archive .read-more:hover{
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* 8) Si un thème ajoute une image ou autre bloc avant le titre */
.blog .post-thumbnail,
.archive .post-thumbnail,
.blog .entry-header .post-thumb,
.archive .entry-header .post-thumb{
  margin-bottom: var(--cc-24);
}

/* 9) Footer : même respiration que la homepage */
.blog .site-footer,
.archive .site-footer{
  margin-top: var(--cc-56);
}

/* 10) Pas de bouton WA flottant sur les archives */
.blog .cc-fab,
.archive .cc-fab,
.blog .cc-waFloat,
.archive .cc-waFloat{
  display: none !important;
}

/* 11) Mobile : garder une carte lisible, sans effet “thème brut” */
@media (max-width: 921px){
  .blog .site-main,
  .archive .site-main{
    padding-top: var(--cc-32);
    padding-bottom: var(--cc-40);
  }

  .blog article,
  .archive article{
    border-radius: var(--cc-r18);
    padding: 22px 20px;
  }

  .blog article .entry-title,
  .archive article .entry-title,
  .blog article .entry-title a,
  .archive article .entry-title a{
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.12 !important;
  }

  .blog article .entry-content,
  .archive article .entry-content,
  .blog article .entry-summary,
  .archive article .entry-summary,
  .blog article .entry-content p,
  .archive article .entry-content p,
  .blog article .entry-summary p,
  .archive article .entry-summary p{
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}













/* =========================================================
CITYCLEANER — PAGE ARTICLES ONLY (V3)
Ne touche ni la homepage ni l'article individuel
========================================================= */

/* Fond archive uniquement */
.blog,
.archive {
  background:
    linear-gradient(180deg, rgba(70,217,255,.04) 0%, rgba(247,249,251,0) 180px),
    #f7f9fb;
}

/* Zone principale archive */
.blog .site-content,
.archive .site-content,
.blog main,
.archive main {
  padding-top: 24px;
  padding-bottom: 28px;
}

/* Conteneur */
.blog .content-area,
.archive .content-area {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Carte article */
.blog article,
.archive article {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 980px;
  margin: 0 auto 20px auto;
  background: #fff;
  border: 1px solid rgba(1,33,72,.08);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(1,33,72,.035);
  padding: 34px 40px 30px;
}

/* Titre */
.blog article .entry-title,
.archive article .entry-title {
  margin: 0 0 14px 0 !important;
  max-width: none !important;
  width: 100%;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  color: #012148 !important;
}

/* Lien du titre */
.blog article .entry-title a,
.archive article .entry-title a {
  color: #012148 !important;
  text-decoration: none !important;
}

/* Meta masquée */
.blog .entry-meta,
.archive .entry-meta,
.blog .posted-on,
.archive .posted-on,
.blog .byline,
.archive .byline,
.blog .cat-links,
.archive .cat-links,
.blog .comments-link,
.archive .comments-link,
.blog .author,
.archive .author {
  display: none !important;
}

/* Résumé / extrait */
.blog article .entry-content,
.archive article .entry-content,
.blog article .entry-summary,
.archive article .entry-summary {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 64ch;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
  color: rgba(1,33,72,.80) !important;
}

/* Supprimer les espacements parasites du thème */
.blog article p:last-child,
.archive article p:last-child,
.blog article .entry-content > *:last-child,
.archive article .entry-content > *:last-child,
.blog article .entry-summary > *:last-child,
.archive article .entry-summary > *:last-child {
  margin-bottom: 0 !important;
}

/* Lire la suite */
.blog a.more-link,
.archive a.more-link,
.blog .read-more,
.archive .read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #012148 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(1,33,72,.18);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.blog a.more-link:hover,
.archive a.more-link:hover,
.blog .read-more:hover,
.archive .read-more:hover {
  color: #27cfa9 !important;
  border-color: rgba(39,207,169,.42);
  transform: translateY(-1px);
}

/* WhatsApp flottant masqué sur archive */
.blog .cc-waFloat,
.archive .cc-waFloat,
.blog .cc-waFab,
.archive .cc-waFab,
.blog .cc-whatsapp-float,
.archive .cc-whatsapp-float {
  display: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  .blog .site-content,
  .archive .site-content,
  .blog main,
  .archive main {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .blog .content-area,
  .archive .content-area {
    padding: 0 16px;
  }

  .blog article,
  .archive article {
    max-width: none;
    padding: 24px 22px 22px;
    border-radius: 18px;
  }

  .blog article .entry-title,
  .archive article .entry-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .blog article .entry-content,
  .archive article .entry-content,
  .blog article .entry-summary,
  .archive article .entry-summary {
    max-width: none;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}














/* =========================================================
CITYCLEANER — PAGE ARTICLES ONLY
Fix hover cohérent sur "Lire la suite"
========================================================= */

.blog a.more-link,
.archive a.more-link,
.blog .read-more,
.archive .read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #012148 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(1,33,72,.18);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

/* Forcer tous les sous-éléments à suivre la même couleur */
.blog a.more-link *,
.archive a.more-link *,
.blog .read-more *,
.archive .read-more * {
  color: inherit !important;
}

/* Hover unique et cohérent */
.blog a.more-link:hover,
.archive a.more-link:hover,
.blog .read-more:hover,
.archive .read-more:hover,
.blog a.more-link:focus,
.archive a.more-link:focus,
.blog .read-more:focus,
.archive .read-more:focus,
.blog a.more-link:active,
.archive a.more-link:active,
.blog .read-more:active,
.archive .read-more:active {
  color: #27cfa9 !important;
  border-bottom-color: rgba(39,207,169,.42) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Visité = même couleur de base */
.blog a.more-link:visited,
.archive a.more-link:visited,
.blog .read-more:visited,
.archive .read-more:visited {
  color: #012148 !important;
}

/* Si le thème injecte une couleur hover via span */
.blog a.more-link:hover *,
.archive a.more-link:hover *,
.blog .read-more:hover *,
.archive .read-more:hover * {
  color: inherit !important;
}









@media (max-width: 767px) {
  .blog article .entry-title,
  .archive article .entry-title {
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .blog article,
  .archive article {
    padding: 22px 20px 20px !important;
    border-radius: 18px !important;
  }

  .blog .site-content,
  .archive .site-content,
  .blog main,
  .archive main {
    padding-top: 12px !important;
    padding-bottom: 20px !important;
  }
}


/* =========================================================
   06 — ASTRA / ELEMENTOR RUNTIME OVERRIDES — GELÉ
   Important : couche de compatibilité thème/builder.
   Ne pas simplifier ni baisser la spécificité dans cette passe.
   ========================================================= */

/* ========================================================================== 
   CityCleaner — Patch final burger menu mobile (Astra / off-canvas)
   Périmètre strict : menu mobile uniquement
   Breakpoint : Astra mobile <= 921px

   IMPORTANT
   - Remplacer le bloc actuel dédié au burger / off-canvas mobile.
   - Ne pas empiler ce patch par-dessus les anciens doublons burger.
   - Ce patch ne touche ni la homepage hors menu mobile, ni l'article, ni l'archive.
   ========================================================================== */

@media (max-width: 921px) {

  /* ------------------------------------------------------------------------
     P0 — Assainissement / scope strict mobile Astra
     ------------------------------------------------------------------------ */

  #ast-mobile-header,
  #ast-mobile-header * {
    -webkit-tap-highlight-color: transparent;
  }

  /* ------------------------------------------------------------------------
     P1 — Trigger fermé : conserver la direction actuelle, stabiliser la famille
     ------------------------------------------------------------------------ */

  #ast-mobile-header .ast-button-wrap .menu-toggle,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle,
  #ast-mobile-header .ast-mobile-menu-trigger-minimal,
  #ast-mobile-header .ast-mobile-menu-trigger-minimal .menu-toggle {
    background: var(--cc-navy, #012148) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--cc-r24, 24px) !important;
    box-shadow: 0 8px 24px rgba(1, 33, 72, 0.12) !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle {
    min-width: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
      background-color .22s ease,
      box-shadow .22s ease,
      transform .18s ease !important;
  }

  #ast-mobile-header .menu-toggle .ast-mobile-svg,
  #ast-mobile-header .menu-toggle .ahfb-svg-iconset,
  #ast-mobile-header .menu-toggle svg {
    fill: currentColor !important;
    color: #ffffff !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle:hover,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:hover {
    background: var(--cc-navy, #012148) !important;
    box-shadow: 0 10px 28px rgba(1, 33, 72, 0.14) !important;
    transform: translateY(-1px) !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle:active,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 6px 18px rgba(1, 33, 72, 0.14) !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle:focus,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:focus {
    outline: none !important;
    box-shadow: 0 8px 24px rgba(1, 33, 72, 0.12) !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle:focus-visible,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:focus-visible {
    outline: 2px solid rgba(39, 207, 169, 0.55) !important;
    outline-offset: 3px !important;
  }

  /* ------------------------------------------------------------------------
     P1 — Drawer off-canvas : surface premium, calme, cohérente homepage
     ------------------------------------------------------------------------ */

  .ast-mobile-popup-drawer {
    background: rgba(1, 33, 72, 0.18) !important;
    backdrop-filter: saturate(120%) blur(2px);
    -webkit-backdrop-filter: saturate(120%) blur(2px);
  }

  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      var(--cc-bg, #f7f9fb) 100%
    ) !important;
    width: min(88vw, 400px) !important;
    max-width: 400px !important;
    border-left: 1px solid rgba(1, 33, 72, 0.08) !important;
    box-shadow:
      -16px 0 40px rgba(1, 33, 72, 0.10),
      -2px 0 10px rgba(1, 33, 72, 0.06) !important;
    position: relative !important;
  }

  /* option de continuité haute discrète */
  .ast-mobile-popup-drawer .ast-mobile-popup-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(39, 207, 169, 0),
      rgba(39, 207, 169, 0.35),
      rgba(39, 207, 169, 0)
    );
    pointer-events: none;
  }

  /* ------------------------------------------------------------------------
     P1 — Zone haute du drawer / close : calmer l'objet, rétablir la parenté
     ------------------------------------------------------------------------ */

  .ast-mobile-popup-header {
    padding: 22px 22px 12px !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }

  .ast-mobile-popup-header .menu-toggle-close,
  .ast-mobile-popup-header .close-drawer,
  .ast-mobile-popup-header .ast-close-popup {
    min-width: 56px !important;
    min-height: 56px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: var(--cc-r24, 24px) !important;
    border: 1px solid rgba(1, 33, 72, 0.10) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--cc-navy, #012148) !important;
    box-shadow:
      0 6px 20px rgba(1, 33, 72, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
      background-color .22s ease,
      border-color .22s ease,
      box-shadow .22s ease,
      transform .18s ease !important;
  }

  .ast-mobile-popup-header .menu-toggle-close svg,
  .ast-mobile-popup-header .close-drawer svg,
  .ast-mobile-popup-header .ast-close-popup svg,
  .ast-mobile-popup-header .menu-toggle-close .ahfb-svg-iconset,
  .ast-mobile-popup-header .close-drawer .ahfb-svg-iconset,
  .ast-mobile-popup-header .ast-close-popup .ahfb-svg-iconset {
    fill: currentColor !important;
    color: var(--cc-navy, #012148) !important;
  }

  .ast-mobile-popup-header .menu-toggle-close:hover,
  .ast-mobile-popup-header .close-drawer:hover,
  .ast-mobile-popup-header .ast-close-popup:hover {
    background: #ffffff !important;
    border-color: rgba(39, 207, 169, 0.28) !important;
    box-shadow: 0 10px 24px rgba(1, 33, 72, 0.08) !important;
    transform: translateY(-1px) !important;
  }

  .ast-mobile-popup-header .menu-toggle-close:active,
  .ast-mobile-popup-header .close-drawer:active,
  .ast-mobile-popup-header .ast-close-popup:active {
    transform: scale(0.98) !important;
    box-shadow: 0 5px 14px rgba(1, 33, 72, 0.08) !important;
  }

  .ast-mobile-popup-header .menu-toggle-close:focus,
  .ast-mobile-popup-header .close-drawer:focus,
  .ast-mobile-popup-header .ast-close-popup:focus {
    outline: none !important;
  }

  .ast-mobile-popup-header .menu-toggle-close:focus-visible,
  .ast-mobile-popup-header .close-drawer:focus-visible,
  .ast-mobile-popup-header .ast-close-popup:focus-visible {
    outline: 2px solid rgba(39, 207, 169, 0.55) !important;
    outline-offset: 3px !important;
  }

  /* ------------------------------------------------------------------------
     P2 — Corps du menu : hiérarchie plus premium, moins “bloc système”
     ------------------------------------------------------------------------ */

  .ast-mobile-popup-content,
  .ast-mobile-popup-content .ast-builder-menu-mobile,
  .ast-mobile-popup-content .main-navigation,
  .ast-mobile-popup-content nav {
    background: transparent !important;
  }

  .ast-mobile-popup-content {
    padding: 6px 0 22px !important;
  }

  .ast-mobile-popup-content .main-header-menu,
  .ast-mobile-popup-content .menu,
  .ast-mobile-popup-content ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .ast-mobile-popup-content .menu-item,
  .ast-mobile-popup-content .page_item {
    margin: 0 !important;
    position: relative !important;
  }

  .ast-mobile-popup-content .menu-item + .menu-item,
  .ast-mobile-popup-content .page_item + .page_item {
    border-top: 1px solid rgba(1, 33, 72, 0.08) !important;
  }

  .ast-mobile-popup-content .menu-link,
  .ast-mobile-popup-content .main-header-menu a,
  .ast-mobile-popup-content .menu-item > a,
  .ast-mobile-popup-content .page_item > a {
    display: block !important;
    padding: 20px 24px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cc-navy, #012148) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    transition:
      background-color .18s ease,
      color .18s ease,
      padding-left .18s ease !important;
  }

  /* sous-texte visuel léger via indentation premium au survol/focus */
  .ast-mobile-popup-content .menu-link:hover,
  .ast-mobile-popup-content .main-header-menu a:hover,
  .ast-mobile-popup-content .menu-item > a:hover,
  .ast-mobile-popup-content .page_item > a:hover {
    background: rgba(39, 207, 169, 0.07) !important;
    color: var(--cc-navy, #012148) !important;
    padding-left: 28px !important;
  }

  /* ------------------------------------------------------------------------
     P3 — États interactifs unifiés
     ------------------------------------------------------------------------ */

  .ast-mobile-popup-content .menu-link:focus,
  .ast-mobile-popup-content .main-header-menu a:focus,
  .ast-mobile-popup-content .menu-item > a:focus,
  .ast-mobile-popup-content .page_item > a:focus {
    outline: none !important;
    background: rgba(39, 207, 169, 0.07) !important;
    color: var(--cc-navy, #012148) !important;
  }

  .ast-mobile-popup-content .menu-link:focus-visible,
  .ast-mobile-popup-content .main-header-menu a:focus-visible,
  .ast-mobile-popup-content .menu-item > a:focus-visible,
  .ast-mobile-popup-content .page_item > a:focus-visible {
    outline: 2px solid rgba(39, 207, 169, 0.46) !important;
    outline-offset: -2px !important;
    background: rgba(39, 207, 169, 0.08) !important;
  }

  .ast-mobile-popup-content .menu-link:active,
  .ast-mobile-popup-content .main-header-menu a:active,
  .ast-mobile-popup-content .menu-item > a:active,
  .ast-mobile-popup-content .page_item > a:active {
    background: rgba(1, 33, 72, 0.06) !important;
    color: var(--cc-navy, #012148) !important;
  }

  .ast-mobile-popup-content .current-menu-item > a,
  .ast-mobile-popup-content .current_page_item > a,
  .ast-mobile-popup-content .current-menu-ancestor > a,
  .ast-mobile-popup-content .current_page_ancestor > a {
    background: rgba(1, 33, 72, 0.05) !important;
    color: var(--cc-navy, #012148) !important;
    font-weight: 800 !important;
  }

  /* neutralisation ciblée des résidus Astra trop visibles */
  .ast-mobile-popup-content .menu-item > a:focus,
  .ast-mobile-popup-content .menu-link:focus,
  .ast-mobile-popup-header button:focus,
  #ast-mobile-header .menu-toggle:focus {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     P4 — Sous-menus / toggles éventuels (sécurisation cohérente)
     ------------------------------------------------------------------------ */

  .ast-mobile-popup-content .ast-menu-toggle,
  .ast-mobile-popup-content .submenu-with-border .ast-menu-toggle {
    color: var(--cc-navy, #012148) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .ast-mobile-popup-content .ast-menu-toggle:hover,
  .ast-mobile-popup-content .ast-menu-toggle:focus,
  .ast-mobile-popup-content .ast-menu-toggle:focus-visible {
    color: var(--cc-navy, #012148) !important;
    background: rgba(39, 207, 169, 0.07) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     P5 — Micro-ajustements petits écrans
     ------------------------------------------------------------------------ */

  @media (max-width: 420px) {
    .ast-mobile-popup-drawer .ast-mobile-popup-inner {
      width: 88vw !important;
    }

    .ast-mobile-popup-header {
      padding: 18px 18px 10px !important;
    }

    .ast-mobile-popup-header .menu-toggle-close,
    .ast-mobile-popup-header .close-drawer,
    .ast-mobile-popup-header .ast-close-popup {
      min-width: 52px !important;
      min-height: 52px !important;
      width: 52px !important;
      height: 52px !important;
    }

    .ast-mobile-popup-content .menu-link,
    .ast-mobile-popup-content .main-header-menu a,
    .ast-mobile-popup-content .menu-item > a,
    .ast-mobile-popup-content .page_item > a {
      padding: 18px 20px !important;
      font-size: 15.5px !important;
    }

    .ast-mobile-popup-content .menu-link:hover,
    .ast-mobile-popup-content .main-header-menu a:hover,
    .ast-mobile-popup-content .menu-item > a:hover,
    .ast-mobile-popup-content .page_item > a:hover {
      padding-left: 24px !important;
    }
  }
}


/* ========================================================================
   CITYCLEANER — V17 MICRO-CORRECTION FINALE BURGER MOBILE
   Cible : 1) supprimer halo repos, 2) masquer trigger à l’ouverture,
           3) stabiliser le drawer, 4) rapprocher le close du trigger
   ======================================================================== */
@media (max-width: 921px) {
  /* 1) Halo turquoise au repos : neutralisation du wrapper + état fermé propre */
  #ast-mobile-header [data-section="section-header-mobile-trigger"],
  #ast-mobile-header .ast-mobile-menu-trigger-wrap,
  #ast-mobile-header .ast-builder-layout-element[data-section="section-header-mobile-trigger"],
  #ast-mobile-header .ast-button-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle {
    outline: none !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(1, 33, 72, 0.12) !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle:focus,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(1, 33, 72, 0.12) !important;
  }

  #ast-mobile-header .ast-button-wrap .menu-toggle:focus-visible,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:focus-visible {
    outline: 2px solid rgba(1, 33, 72, 0.14) !important;
    outline-offset: 2px !important;
    box-shadow: 0 10px 24px rgba(1, 33, 72, 0.12) !important;
  }

  /* 2) Quand le drawer est ouvert, le trigger ne doit plus polluer visuellement */
  .ast-mobile-popup-drawer.active ~ #masthead #ast-mobile-header .menu-toggle,
  .ast-mobile-popup-drawer.active ~ #ast-mobile-header .menu-toggle,
  body.ast-main-header-nav-open #ast-mobile-header .menu-toggle,
  body.ast-popup-nav-open #ast-mobile-header .menu-toggle,
  body.ast-mobile-popup-active #ast-mobile-header .menu-toggle,
  body.ast-off-canvas-menu-open #ast-mobile-header .menu-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.92) !important;
    box-shadow: none !important;
  }

  /* Sécurisation des couches : le drawer et son overlay doivent passer clairement devant */
  .ast-mobile-popup-drawer {
    z-index: 999999 !important;
    background: rgba(1, 33, 72, 0.24) !important;
    backdrop-filter: saturate(118%) blur(2px) !important;
    -webkit-backdrop-filter: saturate(118%) blur(2px) !important;
  }

  /* 3) Drawer moins "carte flottante", plus panneau assumé */
  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    width: min(94vw, 420px) !important;
    max-width: 420px !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    border-left: 1px solid rgba(1, 33, 72, 0.07) !important;
    box-shadow:
      -20px 0 44px rgba(1, 33, 72, 0.12),
      -2px 0 10px rgba(1, 33, 72, 0.05) !important;
  }

  .ast-mobile-popup-drawer .ast-mobile-popup-inner::before {
    opacity: .55 !important;
  }

  .ast-mobile-popup-header {
    padding: 18px 18px 10px !important;
  }

  .ast-mobile-popup-content {
    padding-top: 2px !important;
  }

  /* 4) Close encore plus frère du burger : moins autonome, plus compact */
  .ast-mobile-popup-header .menu-toggle-close,
  .ast-mobile-popup-header .close-drawer,
  .ast-mobile-popup-header .ast-close-popup {
    min-width: 52px !important;
    min-height: 52px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(1, 33, 72, 0.09) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 14px rgba(1, 33, 72, 0.06) !important;
  }

  .ast-mobile-popup-header .menu-toggle-close:hover,
  .ast-mobile-popup-header .close-drawer:hover,
  .ast-mobile-popup-header .ast-close-popup:hover {
    background: #ffffff !important;
    border-color: rgba(1, 33, 72, 0.12) !important;
    box-shadow: 0 8px 18px rgba(1, 33, 72, 0.08) !important;
    transform: translateY(-1px) !important;
  }

  .ast-mobile-popup-header .menu-toggle-close:focus-visible,
  .ast-mobile-popup-header .close-drawer:focus-visible,
  .ast-mobile-popup-header .ast-close-popup:focus-visible {
    outline: 2px solid rgba(1, 33, 72, 0.14) !important;
    outline-offset: 2px !important;
  }

  /* Liens : un peu moins de vide en tête pour calmer l’effet de grande sheet blanche */
  .ast-mobile-popup-content .menu-link,
  .ast-mobile-popup-content .main-header-menu a,
  .ast-mobile-popup-content .menu-item > a,
  .ast-mobile-popup-content .page_item > a {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  @media (max-width: 420px) {
    .ast-mobile-popup-drawer .ast-mobile-popup-inner {
      width: 96vw !important;
    }
  }
}
/* ========================================================================
   CITYCLEANER — V18 ULTRA-FINITION BURGER MOBILE
   Cible : effacer le liseré gris résiduel autour du burger fermé,
           sans toucher au drawer ni au close.
   ======================================================================== */
@media (max-width: 921px) {
  /* 1) Neutraliser tout halo de wrapper autour du trigger */
  #ast-mobile-header [data-section="section-header-mobile-trigger"],
  #ast-mobile-header .ast-builder-layout-element[data-section="section-header-mobile-trigger"],
  #ast-mobile-header .ast-mobile-menu-trigger-wrap,
  #ast-mobile-header .ast-button-wrap,
  #ast-mobile-header .ast-mobile-menu-buttons {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* 2) État fermé / après fermeture : un seul volume navy, sans double liseré */
  body:not(.ast-main-header-nav-open):not(.ast-popup-nav-open):not(.ast-mobile-popup-active):not(.ast-off-canvas-menu-open) #ast-mobile-header .ast-button-wrap .menu-toggle,
  body:not(.ast-main-header-nav-open):not(.ast-popup-nav-open):not(.ast-mobile-popup-active):not(.ast-off-canvas-menu-open) #ast-mobile-header .menu-toggle.main-header-menu-toggle,
  body:not(.ast-main-header-nav-open):not(.ast-popup-nav-open):not(.ast-mobile-popup-active):not(.ast-off-canvas-menu-open) #ast-mobile-header .ast-mobile-menu-trigger-minimal,
  body:not(.ast-main-header-nav-open):not(.ast-popup-nav-open):not(.ast-mobile-popup-active):not(.ast-off-canvas-menu-open) #ast-mobile-header .ast-mobile-menu-trigger-minimal .menu-toggle {
    border: 0 !important;
    outline: 0 !important;
    filter: none !important;
    background-clip: padding-box !important;
    box-shadow: 0 6px 16px rgba(1, 33, 72, 0.10) !important;
  }

  /* 3) Pas de sur-signalisation au tap/click standard */
  #ast-mobile-header .ast-button-wrap .menu-toggle:hover,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:hover,
  #ast-mobile-header .ast-button-wrap .menu-toggle:focus,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:focus,
  #ast-mobile-header .ast-button-wrap .menu-toggle:active,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:active {
    border: 0 !important;
    outline: none !important;
    box-shadow: 0 6px 16px rgba(1, 33, 72, 0.10) !important;
  }

  /* 4) Le focus visible reste accessible, mais nettement plus discret */
  #ast-mobile-header .ast-button-wrap .menu-toggle:focus-visible,
  #ast-mobile-header .menu-toggle.main-header-menu-toggle:focus-visible {
    outline: 2px solid rgba(1, 33, 72, 0.10) !important;
    outline-offset: 2px !important;
    box-shadow: 0 6px 16px rgba(1, 33, 72, 0.10) !important;
  }
}