.ccm{
    /* Variables locales (tu peux les ajuster) */
    --tint-1:#10367A;
    --tint-2:#D3D3D3;
    --text:#000000;
    --muted:#5f6b7c;
    --accent:#FE5716;
    --accent-2:#8ee6d0;
    --ring:#cfd8ff;
    --warn:#b98500;
    --radius:18px;
    --shadow-lg: 0 20px 60px rgba(15, 23, 42, .08);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, .06);
    --border:#e8eef7;

    color:var(--text);
    font:16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  .ccm .wrap{max-width:1080px;margin:auto;padding:0} /* pas de padding ni d'arrière-plan page */

  /* Carte “verre mat” */
  .ccm .glass{
    position:relative; border-radius:var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
    border:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow:hidden;
  }
  /* Liseré décoratif discret */
  .ccm .glass::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: conic-gradient(from var(--spin, 0deg), rgba(122,156,255,.30), rgba(142,230,208,.30), rgba(122,156,255,.30));
    mask: radial-gradient(120% 120% at 50% 50%, transparent 48%, #000 56%, transparent 64%);
    opacity:.55; transition:opacity .4s ease; animation: ccm-spin 16s linear infinite;
  }
  @keyframes ccm-spin{to{--spin:360deg}}
  .ccm .glass:hover::before{opacity:.75}

  .ccm .inner{position:relative; z-index:1; padding:42px 28px}

  /* Eyebrow + Title */
  .ccm .eyebrow{
    display:inline-flex; gap:10px; align-items:center;
    padding:8px 12px; border-radius:999px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:#10367A; background: linear-gradient(90deg, #D3D3D3, #f9f9f9);
    border:1px solid var(--border);
    box-shadow: var(--shadow-md); font-weight:700;
  }
  .ccm .title{
    margin:16px 0 6px; font-size:clamp(28px, 4.2vw, 46px); line-height:1.08;
    background: linear-gradient(90deg, #10367A 0%, #FE5716 35%, #10367A 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; letter-spacing:-.02em;
  }
  .ccm .subtitle{margin:0 0 22px; color:var(--muted)}

  /* Steps */
  .ccm .steps{
    list-style:none; margin:26px 0 0; padding:0;
    display:grid; gap:14px; grid-template-columns: repeat(6, minmax(230px, 1fr));
    overflow:auto; scroll-snap-type: x mandatory;
  }
  .ccm .steps::-webkit-scrollbar{height:10px}
  .ccm .steps::-webkit-scrollbar-thumb{background:#dee7f7; border-radius:999px}
  .ccm .steps::-webkit-scrollbar-track{background:#f2f6fd}
  .ccm .step{
    scroll-snap-align:start; display:flex; gap:14px; align-items:flex-start;
    padding:18px; border-radius:16px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border:1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .ccm .step:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(15, 23, 42, .10);
    border-color:#dbe6f5;
  }
  .ccm .badge{
    flex:0 0 40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800;
    background:linear-gradient(180deg, #10367A, #FE5716);
    border:1px solid #dfe8f6; color:#ffffff;
  }
  .ccm .step h3{margin:2px 0 6px; font-size:16px; letter-spacing:.2px; color:#0f172a}
  .ccm .step p{margin:0; color:var(--muted); font-size:14px}

  /* CTA + note */
  .ccm .cta{
    margin:28px 0 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:linear-gradient(180deg, #10367A, #D3D3D3);
  }
  .ccm .note{
    display:flex; gap:10px; align-items:center;
    font-weight:700; font-size:14px; color:var(--warn);
    background:#fff6db; border:1px solid #ffe7a3; border-radius:12px; padding:10px 12px;
  }
  .ccm .note svg{flex:0 0 18px}
  .ccm .btn{
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border-radius:14px; font-weight:800; letter-spacing:.02em; text-decoration:none;
    color:#0b1324; border:1px solid #dfe7f6;
    background: linear-gradient(90deg, #10367A 0%, #FE5716 100%);
    box-shadow: var(--shadow-md);
    transform: translateZ(0);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  }
  .ccm .btn:hover{ transform: translateY(-2px); filter:saturate(1.08); box-shadow: 0 16px 40px rgba(15,23,42,.10); border-color:#d0dcf0 }
  .ccm .btn:active{ transform: translateY(0) }
  .ccm .btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
  .ccm .btn .shine{ position:absolute; inset:-2px; border-radius:inherit; overflow:hidden; pointer-events:none}
  .ccm .btn .shine::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, rgba(255,255,255,.75) 0%, transparent 28% 72%, rgba(255,255,255,.6) 100%);
    opacity:.28; transform: translateX(-35%); filter: blur(6px);
    animation: ccm-shine 3.6s ease-in-out infinite;
  }
  @keyframes ccm-shine{ 50%{ transform: translateX(30%)} 100%{ transform: translateX(110%)} }

  /* Reveal doux */
  .ccm .reveal{opacity:0; transform: translateY(8px) scale(.99); transition: opacity .6s ease, transform .6s ease}
  .ccm .reveal.in{opacity:1; transform:none}

  /* A11y motion */
  @media (prefers-reduced-motion: reduce){
    .ccm .glass::before, .ccm .btn .shine::before{animation:none}
    .ccm .reveal{transition:none}
  }