/* =====================================================================
   CRÉATION DE SITES WEB AVEC CMS — reprend le design de la page d’accueil
   Charte SYO Web : Gliker (titres) · Schibsted Grotesk · JetBrains Mono
   #FF8A3D / #F57323 · noir · blanc — classes préfixées « cm- »
   ===================================================================== */
.cm{
  --cm-bg:#FFFFFF; --cm-soft:#F5F5F7; --cm-card:#FFFFFF;
  --cm-ink:#0B0B0C; --cm-dim:#6E6E73; --cm-mute:#A1A1A6;
  --cm-line:rgba(0,0,0,.08); --cm-line2:rgba(0,0,0,.14);
  --cm-acc:#FF8A3D; --cm-acc2:#F57323; --cm-acc-soft:#FFF3EA;
  --cm-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -22px rgba(0,0,0,.22);
  --cm-ease:cubic-bezier(.22,.8,.24,1);
  --cm-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cm-display:"Gliker","Schibsted Grotesk",system-ui,sans-serif;
  --cm-mono:"JetBrains Mono",ui-monospace,monospace;
  display:block; background:var(--cm-bg); overflow-x:clip;
}
/* Tout ce qui suit ne touche que les sections 2 à 8 (.cm-sec) : le hero reste intact */
.cm-sec{ color:var(--cm-ink); font-family:var(--cm-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
html[data-theme="dark"] .cm{
  --cm-bg:#000; --cm-soft:#111113; --cm-card:#161618;
  --cm-ink:#F5F5F7; --cm-dim:#A1A1A6; --cm-mute:#6E6E73;
  --cm-line:rgba(255,255,255,.09); --cm-line2:rgba(255,255,255,.16);
  --cm-acc-soft:rgba(255,138,61,.14);
  --cm-shadow:0 18px 40px -22px rgba(0,0,0,.8);
}

/* header-1.css impose « Gliker » sur a, span, button, h1, h2 :
   on rétablit la typographie de texte, sauf pour les titres. */
.cm-sec :is(a,span,button,p,li,small,b,em,blockquote,summary,figcaption){ font-family:var(--cm-sans) !important; }
.cm-sec .cm-h2, .cm-sec .cm-h2 *{ font-family:var(--cm-display) !important; }
.cm-sec :is(.cm-eyebrow,.cm-svc__no,.cm-step__no,.cm-qa__no,.cm-work__bar em,.cm-trust__label){ font-family:var(--cm-mono) !important; }

:where(.cm-sec) *{ box-sizing:border-box; }
:where(.cm-sec) :where(h2,h3,p,ul,ol,figure,blockquote){ margin:0; padding:0; }
:where(.cm-sec) :where(ul,ol){ list-style:none; }
.cm-sec a{ color:inherit; text-decoration:none; }
.cm-sec img{ display:block; max-width:100%; }
.cm-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.cm-wrap{ width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.cm-sec{ padding:88px 0; }
.cm-sec + .cm-sec{ border-top:1px solid var(--cm-line); }

/* Apparition au scroll (activée par home.js) */
.cm-js .cm-rv{ opacity:0; transform:translateY(18px); }
.cm-js .cm-rv.in{ opacity:1; transform:none; transition:opacity .8s var(--cm-ease), transform .8s var(--cm-ease); }

/* ---------- Typographie commune ---------- */
.cm-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cm-acc2); margin-bottom:.9rem; }
.cm-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cm-acc); box-shadow:0 0 0 4px rgba(255,138,61,.18); }
.cm-h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); line-height:1.1; font-weight:400; letter-spacing:-.02em; max-width:20ch; }
.cm-muted{ color:var(--cm-mute); }
.cm-acc{ color:var(--cm-acc); }
.cm-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; margin-bottom:2.6rem; }
.cm-head__side{ max-width:400px; color:var(--cm-dim); font-size:.95rem; }
.cm-head__side p{ color:var(--cm-dim); }
.cm-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .2s; }
.cm-link:hover{ color:var(--cm-acc2); }

.cm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cm-chips > span{ font-size:12px !important; font-weight:500; padding:.3rem .65rem; border-radius:999px; background:var(--cm-soft); color:var(--cm-dim); }

.cm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:46px; padding:0 1.3rem; border-radius:999px; font-size:.9rem; font-weight:600; white-space:nowrap; transition:background .25s, color .25s, border-color .25s, transform .25s var(--cm-ease); }
.cm-btn:hover{ transform:translateY(-1px); }
.cm-btn--dark{ background:var(--cm-ink); color:var(--cm-bg) !important; }
.cm-btn--dark:hover{ background:var(--cm-acc); color:#160B03 !important; }
.cm-btn--acc{ background:linear-gradient(135deg,var(--cm-acc),var(--cm-acc2)); color:#160B03 !important; box-shadow:0 14px 30px -14px rgba(245,115,35,.8); }
.cm-btn--line{ border:1px solid rgba(255,255,255,.28); color:#fff !important; }
.cm-btn--line:hover{ border-color:#fff; }

/* =====================================================================
   2. CONFIANCE
   ===================================================================== */
.cm-trust{ padding-top:56px; }
.cm-trust__label{ text-align:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cm-mute); margin-bottom:1.4rem !important; }
.cm-marquee{ overflow:hidden; padding:.4rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.cm-marquee__track{ display:flex; width:max-content; animation:cmMarquee 42s linear infinite; }
.cm-marquee:hover .cm-marquee__track{ animation-play-state:paused; }
.cm-marquee__track > span{ display:inline-flex; align-items:center; font-size:clamp(1.15rem,1.9vw,1.5rem) !important; font-weight:700; letter-spacing:-.03em; color:var(--cm-ink); opacity:.32; white-space:nowrap; transition:opacity .25s; }
.cm-marquee__track > span:hover{ opacity:1; }
.cm-marquee__track > span::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cm-acc); margin:0 2.6rem; opacity:.9; }
@keyframes cmMarquee{ to{ transform:translateX(-50%); } }

.cm-intro{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-top:64px; }
.cm-intro__img{ position:relative; margin:0; border-radius:24px; overflow:hidden; aspect-ratio:5/4; background:var(--cm-soft); }
.cm-intro__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--cm-ease); }
.cm-intro__img:hover img{ transform:scale(1.04); }
.cm-intro__img figcaption{ position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; padding:.7rem 1rem; border-radius:14px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#0B0B0C; }
.cm-intro__img figcaption b{ font-size:.95rem; font-weight:700; }
.cm-intro__img figcaption span{ font-size:.75rem; color:#6E6E73; }
.cm-intro .cm-h2{ max-width:none; }
.cm-intro__side{ margin-top:1.4rem; }
.cm-intro__side p{ color:var(--cm-dim); margin-bottom:1.1rem !important; }
.cm-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:40px; }
.cm-facts li{ padding:1.3rem 1.4rem; border-radius:18px; background:var(--cm-soft); }
.cm-facts b{ display:block; font-size:2rem; font-weight:700; letter-spacing:-.04em; line-height:1; margin-bottom:.5rem; }
.cm-facts li:first-child b{ color:var(--cm-acc2); }
.cm-facts span{ display:block; font-size:.86rem; color:var(--cm-dim); line-height:1.45; }

/* =====================================================================
   3. SERVICES
   ===================================================================== */
.cm-svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cm-svc__card{ position:relative; display:flex; flex-direction:column; gap:.7rem; padding:1.5rem; border-radius:22px; background:var(--cm-soft); border:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .35s var(--cm-ease), transform .35s var(--cm-ease); }
.cm-svc__card:hover{ background:var(--cm-card); border-color:var(--cm-line); box-shadow:var(--cm-shadow); transform:translateY(-4px); }
.cm-svc__card{ padding-top:.6rem !important; }
.cm-svc__media{ display:block; margin:0 -.9rem .4rem; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:var(--cm-card); }
.cm-svc__media img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1s var(--cm-ease); }
.cm-svc__card:hover .cm-svc__media img{ transform:scale(1.05); }
.cm-svc__top{ display:flex; justify-content:space-between; align-items:center; margin:-1.9rem .2rem .6rem; position:relative; }
.cm-svc__ic{ box-shadow:0 6px 16px -8px rgba(0,0,0,.35) !important; border:3px solid var(--cm-soft); }
.cm-svc__card:hover .cm-svc__ic{ border-color:var(--cm-card); }
.cm-svc__no{ align-self:flex-end; }
.cm-svc__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--cm-card); box-shadow:0 1px 2px rgba(0,0,0,.05); color:var(--cm-acc2); transition:background .3s, color .3s; }
.cm-svc__ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cm-svc__card:hover .cm-svc__ic{ background:var(--cm-ink); color:#fff; }
.cm-svc__no{ font-size:11px !important; color:var(--cm-mute); letter-spacing:.08em; }
.cm-svc__title{ font-size:1.12rem !important; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.cm-svc__desc{ font-size:.9rem !important; color:var(--cm-dim); line-height:1.55; flex:1; }
.cm-svc__card .cm-chips > span{ background:var(--cm-card); }
.cm-svc__go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem; font-size:.88rem !important; font-weight:600; color:var(--cm-ink); }
.cm-svc__go svg{ transition:transform .3s var(--cm-ease); }
.cm-svc__card:hover .cm-svc__go{ color:var(--cm-acc2); }
.cm-svc__card:hover .cm-svc__go svg{ transform:translate(2px,-2px); }

/* =====================================================================
   4. RÉALISATIONS
   ===================================================================== */
.cm-arrows{ display:flex; gap:8px; margin-top:1rem; }
.cm-arrows button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--cm-line2); background:var(--cm-card); color:var(--cm-ink); font-size:1rem; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.cm-arrows button:hover{ background:var(--cm-ink); color:var(--cm-bg); border-color:var(--cm-ink); }

.cm-work{ display:grid; grid-auto-flow:column; grid-auto-columns:min(420px, 82vw); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:4px max(20px, calc((100% - 1200px) / 2)) 10px; scroll-padding:0 max(20px, calc((100% - 1200px) / 2)); }
.cm-work::-webkit-scrollbar{ display:none; }
.cm-work__card{ scroll-snap-align:start; display:flex; flex-direction:column; }
.cm-work__shot{ position:relative; display:block; border-radius:20px; overflow:hidden; background:var(--cm-soft); border:1px solid var(--cm-line); }
.cm-work__bar{ display:flex; align-items:center; gap:5px; height:32px; padding:0 12px; background:var(--cm-card); border-bottom:1px solid var(--cm-line); }
.cm-work__bar i{ width:8px; height:8px; border-radius:50%; background:#E5E5EA; }
.cm-work__bar i:first-child{ background:var(--cm-acc); }
.cm-work__bar em{ margin-left:10px; font-style:normal; font-size:10.5px !important; color:var(--cm-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-work__img{ display:block; aspect-ratio:16/10; overflow:hidden; }
.cm-work__img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1s var(--cm-ease); }
.cm-work__shot:hover .cm-work__img img{ transform:scale(1.04); }
.cm-work__open{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .85rem; border-radius:999px; background:#fff; color:#0B0B0C !important; font-size:.8rem !important; font-weight:600; box-shadow:0 8px 20px -8px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--cm-ease); }
.cm-work__shot:hover .cm-work__open, .cm-work__shot:focus-visible .cm-work__open{ opacity:1; transform:none; }
.cm-work__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1rem; }
.cm-work__meta h3{ font-size:1.08rem; font-weight:700; letter-spacing:-.02em; }
.cm-work__meta span{ font-size:.8rem !important; color:var(--cm-mute); }
.cm-work__cat{ margin-top:.15rem !important; font-size:.8rem; color:var(--cm-acc2); font-weight:600; }
.cm-work__desc{ margin:.35rem 0 .8rem !important; font-size:.88rem; color:var(--cm-dim); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cm-work__cat:empty, .cm-work__desc:empty{ display:none; }
.cm-work__all{ scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; width:220px; padding:1.5rem; border-radius:20px; background:var(--cm-soft); font-weight:700; font-size:1.05rem; letter-spacing:-.02em; align-self:start; height:296px; transition:background .3s; }
.cm-work__all-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--cm-ink); color:#fff; transition:background .3s, transform .3s var(--cm-ease); }
.cm-work__all:hover .cm-work__all-ic{ background:var(--cm-acc); color:#160B03; transform:rotate(45deg); }
.cm-work{ grid-auto-columns:auto; }
.cm-work__card{ width:min(420px, 82vw); }
.cm-work__all:hover{ background:var(--cm-card); box-shadow:var(--cm-shadow); }

.cm-reel{ position:relative; margin-top:36px; border-radius:28px; overflow:hidden; aspect-ratio:16/7; background:#0B0B0C; }
.cm-reel__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cm-reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6)); pointer-events:none; }
.cm-reel__play{ position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:84px; height:84px; border-radius:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.35); color:#fff !important; transition:background .3s, transform .4s var(--cm-ease); }
.cm-reel__play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(255,255,255,.25); animation:cmPulse 2.4s ease-out infinite; }
@keyframes cmPulse{ from{ transform:scale(.9); opacity:1; } to{ transform:scale(1.35); opacity:0; } }
.cm-reel__play:hover{ background:var(--cm-acc); color:#160B03 !important; transform:translate(-50%,-50%) scale(1.06); }
.cm-reel__play svg{ margin-left:4px; }
.cm-reel__cap{ position:absolute; left:28px; right:28px; bottom:24px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; color:#fff; }
.cm-reel__k{ display:block; font-family:var(--cm-mono) !important; font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--cm-acc); }
.cm-reel__t{ margin-top:.35rem !important; font-size:clamp(1.2rem,2.2vw,1.8rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.cm-reel__ig{ display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .95rem; border-radius:999px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:.85rem !important; font-weight:600; color:#fff !important; white-space:nowrap; transition:background .3s; }
.cm-reel__ig:hover{ background:rgba(255,255,255,.28); }

/* =====================================================================
   5. MÉTHODE
   ===================================================================== */
.cm-method{ display:grid; grid-template-columns:.85fr 1.15fr; gap:14px; align-items:stretch; }
.cm-method__img{ position:relative; margin:0; border-radius:22px; overflow:hidden; min-height:420px; background:var(--cm-soft); }
.cm-method__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cm-method__img figcaption{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-radius:14px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#0B0B0C; font-size:.86rem; font-weight:600; line-height:1.4; }
.cm-method__dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--cm-acc); box-shadow:0 0 0 4px rgba(255,138,61,.2); }
.cm-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; counter-reset:none; }
.cm-step{ position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.5rem 1.4rem 1.4rem; border-radius:22px; border:1px solid var(--cm-line); background:var(--cm-card); transition:border-color .3s, box-shadow .35s var(--cm-ease); }
.cm-step::before{ content:""; position:absolute; left:1.4rem; right:1.4rem; top:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cm-acc),var(--cm-acc2)); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--cm-ease); }
.cm-step.in::before{ transform:scaleX(1); }
.cm-step:nth-child(2).in::before{ transition-delay:.15s; } .cm-step:nth-child(3).in::before{ transition-delay:.3s; } .cm-step:nth-child(4).in::before{ transition-delay:.45s; }
.cm-step:hover{ border-color:var(--cm-line2); box-shadow:var(--cm-shadow); }
.cm-step__no{ font-size:12px !important; color:var(--cm-acc2); margin-bottom:.8rem; }
.cm-step h3{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.cm-step p{ font-size:.88rem; color:var(--cm-dim); line-height:1.55; flex:1; }
.cm-step__lbl{ margin-top:.6rem; font-size:10.5px !important; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cm-mute); }

/* =====================================================================
   6. RÉSULTATS
   ===================================================================== */
.cm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:22px; border:1px solid var(--cm-line); border-radius:22px; overflow:hidden; }
.cm-stats li{ padding:1.6rem 1.5rem; }
.cm-stats li + li{ border-left:1px solid var(--cm-line); }
.cm-stats b{ display:block; font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.cm-stats li:first-child b{ color:var(--cm-acc2); }
.cm-stats span{ display:block; margin-top:.55rem; font-size:.85rem; color:var(--cm-dim); }
.cm-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cm-tool{ display:flex; flex-direction:column; gap:1rem; padding:1.4rem; border-radius:22px; background:var(--cm-soft); }
.cm-tool__head{ display:flex; align-items:center; gap:.8rem; }
.cm-tool__logo{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--cm-card); font-weight:800; font-size:1.05rem !important; color:var(--cm-acc2); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.cm-tool h3{ font-size:.98rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.cm-tool small{ display:block; font-size:.8rem; color:var(--cm-dim); }
.cm-tool__shot{ display:block; border-radius:14px; overflow:hidden; background:var(--cm-card); aspect-ratio:16/9; }
.cm-tool__shot img{ width:100%; height:100%; object-fit:cover; object-position:top left; }
.cm-tool p{ font-size:.88rem; color:var(--cm-dim); line-height:1.55; }
.cm-reviews{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px; }
.cm-review{ display:flex; flex-direction:column; gap:.9rem; padding:1.5rem; border-radius:22px; border:1px solid var(--cm-line); }
.cm-review__stars{ color:var(--cm-acc); letter-spacing:.14em; font-size:.85rem !important; }
.cm-review blockquote{ font-size:.98rem; line-height:1.55; flex:1; }
.cm-review figcaption{ display:flex; align-items:center; gap:.7rem; }
.cm-review__av{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--cm-acc-soft); color:var(--cm-acc2); font-weight:700; }
.cm-review b{ display:block; font-size:.9rem; }
.cm-review small{ display:block; font-size:.8rem; color:var(--cm-dim); }

/* =====================================================================
   7. FAQ
   ===================================================================== */
.cm-faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.cm-faq__side{ position:sticky; top:calc(var(--syo-header-height, 116px) + 24px); }
.cm-talk{ display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; align-items:center; margin-top:2rem; padding:.6rem .6rem 1.1rem; border-radius:22px; background:var(--cm-soft); }
.cm-talk__img{ grid-column:1 / -1; display:block; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-bottom:.6rem; }
.cm-talk__img img{ width:100%; height:100%; object-fit:cover; }
.cm-talk > :not(.cm-talk__img){ margin-left:.5rem; margin-right:.5rem; }
.cm-talk .cm-btn{ width:calc(100% - 1rem) !important; }
.cm-talk__logo{ grid-row:span 1; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--cm-ink); color:var(--cm-acc); font-weight:800; font-size:1.1rem !important; }
.cm-talk b{ display:block; font-size:.95rem; }
.cm-talk small{ display:block; font-size:.82rem; color:var(--cm-dim); }
.cm-talk .cm-btn{ grid-column:1 / -1; margin-top:.6rem; width:100%; }
.cm-faq__list{ border-top:1px solid var(--cm-line2); }
.cm-qa{ border-bottom:1px solid var(--cm-line); }
.cm-qa summary{ display:flex; align-items:center; gap:1rem; padding:1.15rem 0; cursor:pointer; list-style:none; }
.cm-qa summary::-webkit-details-marker{ display:none; }
.cm-qa__no{ font-size:11px !important; color:var(--cm-mute); flex:none; width:22px; }
.cm-qa__q{ flex:1; font-size:1rem !important; font-weight:600; letter-spacing:-.01em; transition:color .2s; }
.cm-qa summary:hover .cm-qa__q{ color:var(--cm-acc2); }
.cm-qa__ic{ position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--cm-soft); transition:background .3s, transform .3s var(--cm-ease); }
.cm-qa__ic::before, .cm-qa__ic::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.6px; border-radius:2px; background:var(--cm-ink); transform:translate(-50%,-50%); }
.cm-qa__ic::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s var(--cm-ease); }
.cm-qa[open] .cm-qa__ic{ background:var(--cm-acc); }
.cm-qa[open] .cm-qa__ic::after{ transform:translate(-50%,-50%) rotate(0); }
.cm-qa[open] .cm-qa__q{ color:var(--cm-ink); }
.cm-qa p{ padding:0 2.8rem 1.25rem 38px; font-size:.92rem; color:var(--cm-dim); line-height:1.65; }

/* =====================================================================
   8. AUDIT GRATUIT
   ===================================================================== */
.cm-sec--last{ padding-bottom:96px; }
.cm-cta{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:center; padding:clamp(1.8rem,4vw,3.4rem); border-radius:28px; background:#0B0B0C; color:#F5F5F7; }
.cm-cta::before{ content:""; position:absolute; right:-10%; top:-60%; width:55%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,138,61,.45), transparent 65%); filter:blur(20px); pointer-events:none; }
.cm-cta > *{ position:relative; }
.cm-eyebrow--light{ color:var(--cm-acc); }
.cm-cta .cm-h2{ color:#fff; max-width:16ch; }
.cm-cta p{ margin-top:1rem !important; max-width:52ch; color:rgba(245,245,247,.7); font-size:.98rem; }
.cm-cta__btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.cm-score{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.cm-score__ring{ position:relative; width:150px; height:150px; }
.cm-score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cm-score__ring circle{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:8; }
.cm-score__ring circle.v{ stroke:var(--cm-acc); stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.6s var(--cm-ease) .3s; }
.cm-cta.in .cm-score__ring circle.v{ stroke-dashoffset:52; }
.cm-score__ring b{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.6rem !important; font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1; }
.cm-score__ring b small{ margin-top:.3rem; font-size:10.5px !important; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.cm-score ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:260px; }
.cm-score li{ font-size:11.5px; font-weight:500; padding:.3rem .65rem; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(245,245,247,.82); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .cm-sec{ padding:68px 0; }
  .cm-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .cm-head__side{ max-width:560px; }
  .cm-intro, .cm-faq, .cm-cta, .cm-method{ grid-template-columns:1fr; gap:2rem; }
  .cm-method{ gap:14px; }
  .cm-method__img{ min-height:0; aspect-ratio:16/9; }
  .cm-reel{ aspect-ratio:16/9; }
  .cm-faq__side{ position:static; }
  .cm-facts, .cm-stats{ grid-template-columns:repeat(2,1fr); }
  .cm-stats li:nth-child(3){ border-left:0; }
  .cm-stats li:nth-child(n+3){ border-top:1px solid var(--cm-line); }
  .cm-svc, .cm-tools{ grid-template-columns:repeat(2,1fr); }
  .cm-score{ flex-direction:row; justify-content:flex-start; }
}
@media (max-width:640px){
  .cm-sec{ padding:56px 0; }
  .cm-wrap{ width:calc(100% - 32px); }
  .cm-intro{ margin-top:44px; }
  .cm-svc, .cm-tools, .cm-steps, .cm-reviews{ grid-template-columns:1fr; }
  .cm-facts b{ font-size:1.6rem; }
  .cm-work{ padding-left:16px; padding-right:16px; scroll-padding:0 16px; }
  .cm-qa p{ padding:0 0 1.2rem 38px; }
  .cm-reel{ aspect-ratio:4/5; border-radius:22px; }
  .cm-reel__cap{ left:18px; right:18px; bottom:18px; flex-direction:column; align-items:flex-start; }
  .cm-reel__play{ width:68px; height:68px; }
  .cm-intro__img{ aspect-ratio:4/3; }
  .cm-score{ flex-direction:column; }
  .cm-cta__btns .cm-btn{ width:100%; }
  .cm-work__open{ opacity:1; transform:none; }
  .cm-svc__top{ margin-bottom:.4rem; }
  .cm-svc__card{ padding:1.25rem; }
  .cm-step__no{ margin-bottom:.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .cm-sec *{ animation:none !important; transition:none !important; }
  .cm-js .cm-rv{ opacity:1; transform:none; }
  .cm-marquee__track{ flex-wrap:wrap; width:auto; justify-content:center; }
}

/* =====================================================================
   VERSION « STYLÉE » — bento éditorial
   ===================================================================== */

/* Numéro de section dans le sur-titre : 02 — L'agence */
.cm-eyebrow em{ font-style:normal; color:var(--cm-ink); opacity:.35; margin-right:.2rem; }
.cm-eyebrow em::after{ content:" —"; }
.cm-eyebrow--light em{ color:#fff; }

/* Fond : légère grille + lueur orange derrière certaines sections */
.cm-trust, #methode, #faq{ position:relative; }
.cm-trust::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--cm-line) 1px, transparent 1px), linear-gradient(90deg, var(--cm-line) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse 70% 55% at 50% 30%, #000 10%, transparent 70%); }
#methode::before{ content:""; position:absolute; right:-10%; top:10%; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,138,61,.12), transparent 65%); filter:blur(30px); }
.cm-trust > *, #methode > *{ position:relative; z-index:1; }

/* Halo orange qui suit la souris sur les cartes (piloté par home.js) */
[data-cm-glow]{ position:relative; isolation:isolate; }
[data-cm-glow]::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,138,61,.16), transparent 65%); }
[data-cm-glow]:hover::after{ opacity:1; }

/* ---------- 2. Confiance : bento ---------- */
.cm-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:14px; margin-top:56px; }
.cm-b{ border-radius:24px; background:var(--cm-soft); padding:1.5rem; overflow:hidden; transition:transform .4s var(--cm-ease), box-shadow .4s var(--cm-ease), background .3s; }
.cm-b:hover{ transform:translateY(-3px); box-shadow:var(--cm-shadow); }
.cm-b--photo{ grid-column:span 2; grid-row:span 3; position:relative; margin:0; padding:0; min-height:420px; }
.cm-b--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--cm-ease); }
.cm-b--photo:hover img{ transform:scale(1.05); }
.cm-b--photo::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); }
.cm-b--photo figcaption{ position:absolute; left:18px; bottom:18px; z-index:2; display:flex; align-items:center; gap:.55rem; padding:.6rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#0B0B0C; }
.cm-b--photo figcaption b{ font-size:.9rem; font-weight:700; }
.cm-b--photo figcaption span:not(.cm-live){ font-size:.78rem; color:#6E6E73; }
.cm-live{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:cmLive 2s infinite; }
@keyframes cmLive{ 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.cm-b--intro{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; gap:.9rem; padding:2rem; background:var(--cm-card); border:1px solid var(--cm-line); }
.cm-b--intro .cm-eyebrow{ margin-bottom:0; }
.cm-b--intro .cm-h2{ max-width:none; font-size:clamp(1.5rem,2.4vw,2rem); }
.cm-b--intro p{ color:var(--cm-dim); font-size:.93rem; }
.cm-b--intro .cm-link{ align-self:flex-start; }
.cm-b--stat{ display:flex; flex-direction:column; justify-content:space-between; gap:1rem; }
.cm-b--stat b{ font-size:clamp(2.2rem,3.6vw,3rem); font-weight:700; letter-spacing:-.05em; line-height:1; }
.cm-b--stat span{ font-size:.86rem; color:var(--cm-dim); line-height:1.45; }
.cm-b--acc{ background:linear-gradient(140deg,#FF8A3D,#F57323); color:#160B03; }
.cm-b--acc span{ color:rgba(22,11,3,.72) !important; }
.cm-b--dark{ background:#0B0B0C; color:#fff; }
.cm-b--dark span{ color:rgba(255,255,255,.62) !important; }
.cm-avatars{ display:flex; }
.cm-avatars i{ display:grid; place-items:center; width:30px; height:30px; margin-left:-8px; border-radius:50%; border:2px solid #FF8A3D; background:#160B03; color:#fff; font-style:normal; font-size:11px; font-weight:700; }
.cm-avatars i:first-child{ margin-left:0; }
.cm-avatars i:last-child{ background:#fff; color:#160B03; }

/* ---------- 3. Services : bento, la 1re carte en grand ---------- */
.cm-svc{ grid-template-columns:repeat(3,1fr); }
.cm-svc__card--big{ grid-column:span 2; display:grid !important; grid-template-columns:1.1fr .9fr; grid-template-rows:auto auto 1fr auto auto; column-gap:1.6rem; padding:.6rem !important; }
.cm-svc__card--big .cm-svc__media{ grid-column:1; grid-row:1 / -1; margin:0 !important; aspect-ratio:auto; height:100%; min-height:300px; }
.cm-svc__card--big > :not(.cm-svc__media){ grid-column:2; padding-right:1rem; }
.cm-svc__card--big .cm-svc__top{ margin:1.2rem 0 .6rem !important; }
.cm-svc__card--big .cm-svc__title{ font-size:1.5rem !important; }
.cm-svc__card--big .cm-svc__go{ margin-bottom:1rem; }
.cm-svc__card{ overflow:hidden; }
.cm-svc__card--wide{ grid-column:span 3; grid-template-columns:1fr 1.4fr; }
.cm-svc__card--wide .cm-svc__media{ grid-column:2; min-height:240px; }
.cm-svc__card--wide > :not(.cm-svc__media){ grid-column:1; padding:0 0 0 1rem; }

/* ---------- 4. Réalisations : cartes plus grandes, légère inclinaison au survol ---------- */
.cm-work__card{ width:min(460px, 84vw); }
.cm-work__shot{ transition:transform .5s var(--cm-ease), box-shadow .5s var(--cm-ease); }
.cm-work__shot:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }

/* ---------- 5. Méthode : grands numéros en contour ---------- */
.cm-step__no{ font-size:2.6rem !important; font-weight:700; letter-spacing:-.04em; line-height:1; color:transparent !important; -webkit-text-stroke:1.2px var(--cm-acc); font-family:var(--cm-sans) !important; transition:color .3s; }
.cm-step:hover .cm-step__no{ color:var(--cm-acc) !important; }

/* ---------- 8. CTA : bordure animée ---------- */
.cm-cta{ box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(245,115,35,.45); }

/* Responsive bento */
@media (max-width:1024px){
  .cm-bento{ grid-template-columns:repeat(2,1fr); }
  .cm-b--photo, .cm-b--intro{ grid-column:span 2; }
  .cm-b--photo{ grid-row:auto; min-height:300px; }
  .cm-svc__card--big{ grid-column:span 2; }
  .cm-svc__card--wide{ grid-column:span 2; }
  .cm-svc{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .cm-svc{ grid-template-columns:1fr; }
  .cm-svc__card--big, .cm-svc__card--wide{ grid-column:auto; }
  .cm-bento{ gap:10px; }
  .cm-b{ padding:1.2rem; }
  .cm-b--intro{ padding:1.4rem; }
  .cm-svc__card--big{ grid-column:auto; display:flex !important; padding-top:.6rem !important; }
  .cm-svc__card--big .cm-svc__media{ min-height:0; aspect-ratio:16/9; }
  .cm-svc__card--big > :not(.cm-svc__media){ padding-right:0; padding-left:0; }
  .cm-svc__card--big .cm-svc__top{ margin:-1.9rem .2rem .6rem !important; }
  .cm-svc__card--big .cm-svc__title{ font-size:1.12rem !important; }
  .cm-step__no{ font-size:2rem !important; }
}


/* =====================================================================
   PAGE CRÉATION DE SITES WEB AVEC CMS — compléments
   (reprend les composants de la page d'accueil : mêmes sur-titres, bento,
   cartes, méthode, avis, FAQ et bloc final)
   ===================================================================== */
#intro,#cur-dot,#cur-ring{display:none!important}
body.locked{overflow:auto!important;height:auto!important}
.cm-sec :is(h3,label,legend,input,select,textarea,dt,dd,cite){ font-family:var(--cm-sans) !important; }
.cm-sec .cm-h1, .cm-sec .cm-h1 *{ font-family:var(--cm-display) !important; }
.cm-sec :is(.cm-eyebrow em){ font-family:var(--cm-mono) !important; }
:where(.cm-sec) :where(h1,dl,dd,fieldset){ margin:0; padding:0; }
.cm-sec fieldset{ border:0; min-width:0; }
.cm-sec [hidden]{ display:none !important; }
.cm-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.cm-sec{ scroll-margin-top:calc(var(--syo-header-height, 116px) + 16px); }

/* tailles de police compactes */
.cm-sec{ font-size:14.5px; }
.cm-h2{ font-size:clamp(1.5rem,2.5vw,2.1rem); }
.cm-b--intro .cm-h2{ font-size:clamp(1.35rem,2.1vw,1.8rem); }

/* boutons complémentaires */
.cm-btn{ height:44px; font-size:.86rem; border:1px solid transparent; cursor:pointer; }
.cm-btn--ghost{ border-color:var(--cm-line2); color:var(--cm-ink) !important; background:transparent; }
.cm-btn--ghost:hover{ border-color:var(--cm-ink); }
.cm-btn--acc:hover{ box-shadow:0 18px 34px -14px rgba(245,115,35,.9); }

/* ---------- 1. Hero ---------- */
.cm-hero{ padding-top:calc(var(--syo-header-height, 116px) + 40px); padding-bottom:64px; border-top:0 !important; }
.cm-hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.cm-h1{ font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08; font-weight:400; letter-spacing:-.025em; }
.cm-lede{ margin-top:1.1rem !important; max-width:54ch; color:var(--cm-dim); font-size:.95rem; }
.cm-cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.cm-quick{ margin-top:1.8rem; padding:1rem; border-radius:20px; background:var(--cm-soft); }
.cm-quick__t{ display:flex; align-items:center; gap:.8rem; font-size:.86rem; }
.cm-quick__t span{ display:inline-flex; align-items:center; gap:.3rem; color:var(--cm-dim); font-size:.76rem; }
.cm-quick__row{ display:grid; grid-template-columns:1fr 1fr 1.1fr auto; gap:8px; margin-top:.7rem; }
.cm-quick input, .cm-quick select{ width:100%; height:44px; padding:0 .9rem; border:1px solid transparent; border-radius:999px; background:var(--cm-card); color:var(--cm-ink); font-size:.85rem; outline:none; transition:border-color .25s; }
.cm-quick input:focus, .cm-quick select:focus{ border-color:var(--cm-acc); }
.cm-bento--hero{ margin-top:0; grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(130px,auto); }
.cm-bento--hero .cm-b--photo{ grid-column:span 2; grid-row:span 2; min-height:340px; }

/* ---------- 2. Preuve sociale ---------- */
.cm-trust{ padding-top:56px !important; }
.cm-proofrow{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-top:36px; align-items:stretch; }
.cm-proofrow__side{ display:flex; flex-direction:column; justify-content:center; gap:.9rem; padding:1.5rem; border-radius:22px; background:var(--cm-soft); }
.cm-proofrow__side p{ font-size:.82rem; font-weight:600; color:var(--cm-dim); }
.cm-proofrow__side .cm-chips > span{ background:var(--cm-card); }

/* ---------- 3. Constat ---------- */
#constat .cm-bento{ margin-top:0; }
.cm-ps{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.cm-ps__row{ display:grid; gap:.5rem; padding:1.1rem 1.2rem; border-radius:18px; border:1px solid var(--cm-line); }
.cm-ps__row p{ display:flex; gap:.5rem; align-items:flex-start; font-size:.86rem; line-height:1.5; }
.cm-ps__row svg{ flex:none; margin-top:.2rem; }
.cm-ps__pb{ color:var(--cm-mute); }
.cm-ps__pb svg{ color:#DC2626; }
.cm-ps__sol{ font-weight:600; }
.cm-ps__sol svg{ color:var(--cm-acc2); }
.cm-publics{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:14px; padding:1.2rem 1.4rem; border-radius:22px; background:var(--cm-soft); }
.cm-publics > p{ font-weight:700; font-size:.9rem; }
.cm-publics .cm-chips{ flex:1; }
.cm-publics .cm-chips > span{ background:var(--cm-card); }

/* ---------- 4. Méthode ---------- */
.cm-step__lbl{ text-transform:none; letter-spacing:0; font-size:.8rem !important; color:var(--cm-ink); font-weight:600; }

/* ---------- 5. Réalisations ---------- */
.cm-work__img img{ font-size:0; color:transparent; }

/* ---------- 6. Étude de cas ---------- */
.cm-bento--case{ margin-top:0; }
.cm-case{ display:grid; gap:.6rem; margin-top:.3rem !important; }
.cm-case > div{ display:grid; grid-template-columns:95px 1fr; gap:.8rem; padding-top:.6rem; border-top:1px solid var(--cm-line); }
.cm-case dt{ font-weight:700; font-size:.82rem; }
.cm-case dd{ font-size:.84rem; color:var(--cm-dim); }
.cm-b--quote{ grid-column:span 2; display:flex; flex-direction:column; justify-content:space-between; gap:1rem; }
.cm-b--quote blockquote{ font-size:.95rem; line-height:1.55; color:#fff; }
.cm-note{ margin-top:14px !important; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.8rem; color:var(--cm-mute); }

/* ---------- 7. Offres ---------- */
.cm-svc__list{ display:grid; gap:.35rem; }
.cm-svc__list > span{ display:flex; gap:.45rem; align-items:flex-start; font-size:.86rem; color:var(--cm-dim); }
.cm-svc__list svg{ flex:none; margin-top:.25rem; color:var(--cm-acc2); }
.cm-svc__ic svg{ width:22px; height:22px; }
.cm-svc__card .cm-svc__no{ font-size:10.5px !important; }
.cm-svc__card--big .cm-svc__no{ padding:.2rem .6rem; border-radius:999px; background:linear-gradient(135deg,#FF8A3D,#F57323); color:#160B03; letter-spacing:.02em; }
.cm-svc__card--wide .cm-svc__no{ background:none; padding:0; color:var(--cm-mute); }
.cm-svc__card:not(.cm-svc__card--big) .cm-svc__no{ align-self:flex-end; }
.cm-included{ display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-top:14px; }
.cm-included .cm-eyebrow{ margin-bottom:.9rem; }
.cm-included ul{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.2rem; }
.cm-included .cm-b--dark ul{ grid-template-columns:1fr; }
.cm-included li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.86rem; }
.cm-included li svg{ flex:none; margin-top:.22rem; color:var(--cm-acc2); }
.cm-included .cm-b--dark li svg{ color:var(--cm-acc); }
.cm-included .cm-b--dark p{ margin-top:1rem !important; font-size:.8rem; color:rgba(255,255,255,.6); }
.cm-included .cm-b--dark p b{ color:#fff; }

/* ---------- 8. Avis ---------- */
.cm-reviews{ grid-template-columns:repeat(3,1fr); margin-top:0; }
.cm-review blockquote{ font-size:.93rem; }
.cm-review--wide{ height:100%; }

/* ---------- 9. Équipe ---------- */
.cm-team{ display:grid; grid-template-columns:repeat(7,1fr); gap:14px; }
.cm-team li{ display:flex; flex-direction:column; padding:.5rem .5rem 1rem; border-radius:22px; background:var(--cm-soft); transition:transform .4s var(--cm-ease), box-shadow .4s var(--cm-ease); }
.cm-team li:hover{ transform:translateY(-3px); box-shadow:var(--cm-shadow); }
.cm-team__ph{ position:relative; display:block; aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--cm-card); }
.cm-team__ph::before{ content:attr(data-i); position:absolute; inset:0; display:grid; place-items:center; font-weight:700; font-size:1.15rem; color:var(--cm-acc2); }
.cm-team__ph img{ position:relative; width:100%; height:100%; object-fit:cover; }
.cm-team b{ margin:.75rem .4rem 0; font-size:.84rem; line-height:1.3; }
.cm-team small{ margin:0 .4rem; font-size:.74rem; color:var(--cm-dim); }

/* ---------- 10. Garanties ---------- */
.cm-guar{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cm-guar__card{ display:flex; flex-direction:column; gap:.6rem; padding:1.4rem; border-radius:22px; background:var(--cm-soft); transition:background .3s, box-shadow .35s var(--cm-ease), transform .35s var(--cm-ease); }
.cm-guar__card:hover{ background:var(--cm-card); box-shadow:var(--cm-shadow); transform:translateY(-3px); }
.cm-guar__card .cm-svc__ic{ margin-bottom:.3rem; }
.cm-guar__card:hover .cm-svc__ic{ background:var(--cm-ink); color:#fff; }
.cm-guar__card h3{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.cm-guar__card p{ font-size:.86rem; color:var(--cm-dim); }

/* ---------- 12. Articles ---------- */
.cm-posts{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cm-post{ display:flex; flex-direction:column; gap:.7rem; padding:.6rem .6rem 1.2rem; border-radius:22px; background:var(--cm-soft); transition:background .3s, box-shadow .35s var(--cm-ease), transform .35s var(--cm-ease); }
.cm-post:hover{ background:var(--cm-card); box-shadow:var(--cm-shadow); transform:translateY(-4px); }
.cm-post .cm-svc__media{ margin:0 0 .2rem; aspect-ratio:16/10; }
.cm-post .cm-svc__media img{ font-size:0; color:transparent; }
.cm-post > :not(.cm-svc__media){ margin:0 .5rem; }
.cm-post .cm-chips > span{ background:var(--cm-card); }
.cm-post .cm-svc__title{ font-size:.95rem !important; flex:1; }
.cm-post:hover .cm-svc__go{ color:var(--cm-acc2); }

/* ---------- 13. Bloc final + formulaire ---------- */
.cm-cta{ grid-template-columns:1fr 1fr; align-items:stretch; }
.cm-cta__main{ display:flex; flex-direction:column; justify-content:center; }
.cm-cta__list{ display:grid; gap:.45rem; margin-top:1.3rem !important; }
.cm-cta__list li{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:rgba(245,245,247,.85); }
.cm-cta__list svg{ color:var(--cm-acc); }
.cm-formbox{ padding:clamp(1.3rem,2.6vw,2rem); border-radius:22px; background:#fff; color:#0B0B0C; }
.cm-msg{ padding:.8rem 1rem; border-radius:12px; margin-bottom:1rem; font-size:.88rem; }
.cm-msg.ok{ background:#EAF7EE; color:#14532D; }
.cm-msg.err{ background:#FDECEC; color:#7F1D1D; }
.cm-msg a{ font-weight:700; text-decoration:underline !important; }
.cm-form-steps{ display:flex; gap:6px; margin-bottom:1.4rem !important; padding:5px; border-radius:999px; background:#F5F5F7; }
.cm-form-steps li{ flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.45rem; border-radius:999px; font-family:var(--cm-mono) !important; font-size:10.5px !important; text-transform:uppercase; letter-spacing:.08em; color:#A1A1A6; transition:background .35s, color .35s; }
.cm-form-steps li span{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; font-size:10px !important; }
.cm-form-steps li.on{ background:#fff; color:#0B0B0C; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.cm-form-steps li.on span{ background:linear-gradient(135deg,#FF8A3D,#F57323); color:#160B03; }
.cm-form legend{ margin-bottom:.9rem; font-size:1.05rem; font-weight:700; }
.cm-step-f{ display:grid; gap:.85rem; }
.cm-form:not(.is-js) .cm-step-f + .cm-step-f{ margin-top:1.5rem; }
.cm-2col{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.cm-form label{ display:grid; gap:.35rem; font-size:.8rem; font-weight:600; color:#3A3A3C; }
.cm-form :is(input:not([type=checkbox]),select,textarea){ width:100%; padding:.72rem .9rem; border:1px solid #E5E5EA; border-radius:14px; background:#FAFAFA; color:#0B0B0C; font-size:.88rem; font-weight:400; outline:none; transition:border-color .3s, box-shadow .3s; }
.cm-form :is(input,select,textarea):focus{ border-color:#FF8A3D; box-shadow:0 0 0 4px rgba(255,138,61,.15); background:#fff; }
.cm-form textarea{ resize:vertical; min-height:110px; }
.cm-form .cm-cgu{ display:flex; gap:.6rem; align-items:flex-start; font-weight:400; font-size:.78rem; color:#6E6E73; }
.cm-cgu input{ margin-top:.2rem; accent-color:#F57323; }
.cm-cgu a{ text-decoration:underline !important; }
.cm-form-nav{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.4rem; }
.cm-formbox .cm-btn--ghost{ color:#0B0B0C !important; border-color:#D1D1D6; }
.cm-formbox .cm-btn--dark{ background:#0B0B0C; color:#fff !important; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cm-hero__grid, .cm-proofrow, .cm-included{ grid-template-columns:1fr; }
  .cm-ps{ grid-template-columns:1fr; }
  .cm-reviews{ grid-template-columns:1fr 1fr; }
  .cm-team{ grid-template-columns:repeat(4,1fr); }
  .cm-guar{ grid-template-columns:1fr 1fr; }
  .cm-posts{ grid-template-columns:1fr 1fr; }
  .cm-b--quote{ grid-column:span 2; }
  .cm-quick__row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .cm-quick__row, .cm-reviews, .cm-guar, .cm-posts, .cm-2col, .cm-included ul{ grid-template-columns:1fr; }
  .cm-quick__row .cm-btn, .cm-cta-row .cm-btn{ width:100%; }
  .cm-team{ grid-template-columns:repeat(2,1fr); }
  .cm-bento--hero .cm-b--photo{ min-height:260px; }
  .cm-b--quote{ grid-column:auto; }
  .cm-case > div{ grid-template-columns:1fr; gap:.15rem; }
  .cm-form-nav{ flex-wrap:wrap; }
  .cm-form-nav .cm-btn{ flex:1; }
  .cm-form-steps li{ font-size:9.5px !important; }
}

/* ajustements */
.cm-bento--case .cm-b--quote{ grid-column:span 1; }
.cm-b--stat b{ font-size:clamp(1.55rem,2.5vw,2.1rem); }
.cm-svc__card--big .cm-svc__list{ align-content:start; align-self:start; }
.cm-svc__card--big{ grid-template-rows:auto auto auto auto auto 1fr !important; }
.cm-btn--line{ border-color:rgba(255,255,255,.28) !important; color:#fff !important; }
.cm-btn--line:hover{ border-color:#fff !important; }
@media (max-width:1024px){ .cm-bento--case .cm-b--quote{ grid-column:span 2; } }
@media (max-width:640px){ .cm-bento--case .cm-b--quote{ grid-column:auto; } }
.cm-b--photo img, .cm-svc__media img, .cm-method__img img, .cm-talk__img img{ font-size:0; color:transparent; }

/* sans pastilles décoratives (point vert « en ligne », point orange des sur-titres) */
.cm-eyebrow::before{ display:none !important; }
.cm-live, .cm-method__dot{ display:none !important; }
.cm-b--photo figcaption{ padding-left:1rem; }

/* =====================================================================
   CONTENU INTÉGRÉ (texte fourni) — prose, guide, choix du CMS
   ===================================================================== */
.cm-lede p + p{ margin-top:.7rem !important; }
.cm-cta-row .cm-link{ align-self:center; }
.cm-prose p{ color:var(--cm-dim); font-size:.93rem; line-height:1.65; }
.cm-prose p + p{ margin-top:.55rem !important; }
.cm-prose strong{ color:var(--cm-ink); font-weight:600; }
.cm-prose h3{ font-size:1.08rem; font-weight:700; letter-spacing:-.015em; line-height:1.3; margin:0 0 .7rem; color:var(--cm-ink); }
.cm-b--dark.cm-prose h3, .cm-b--dark.cm-prose strong{ color:#fff; }
.cm-b--dark.cm-prose p{ color:rgba(245,245,247,.72); }

/* Hero : suite de l’introduction */
.cm-hero__more{ display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem 2.6rem; margin-top:clamp(2rem,4vw,3rem); padding-top:1.6rem; border-top:1px solid var(--cm-line); }
.cm-hero__more p{ color:var(--cm-dim); font-size:.93rem; line-height:1.65; }
.cm-hero__more strong{ color:var(--cm-ink); font-weight:600; }

/* 02 · Pourquoi un CMS */
.cm-why{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; margin-bottom:14px; }
.cm-why__txt{ padding:2rem; border:1px solid var(--cm-line); border-radius:24px; background:var(--cm-card); }
.cm-why__side{ display:grid; gap:14px; }
.cm-why__side .cm-b--photo{ min-height:220px; }
.cm-why__card{ padding:1.6rem; }

/* 03 · Méthode : 7 étapes */
.cm-steps .cm-step:last-child:nth-child(odd){ grid-column:1 / -1; }

/* 06 · Offres : 4ᵉ carte en miroir */
@media (min-width:641px){
  .cm-svc__card--rev{ grid-template-columns:.9fr 1.1fr; }
  .cm-svc__card--rev .cm-svc__media{ grid-column:2 !important; }
  .cm-svc__card--rev > :not(.cm-svc__media){ grid-column:1 !important; padding:0 0 0 1rem !important; }
}
.cm-svc__card--rev .cm-svc__no{ background:none; padding:0; color:var(--cm-mute); }
.cm-choose{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.cm-choose__card{ display:flex; flex-direction:column; padding:1.6rem; }
.cm-choose__card:not(.cm-b--dark){ background:var(--cm-card); border:1px solid var(--cm-line); }
.cm-choose__card .cm-btn{ margin-top:1.2rem; align-self:flex-start; }

/* 08 · Équipe : pourquoi SYO WEB */
.cm-syo{ columns:2; column-gap:2.6rem; margin-bottom:1.6rem; }
.cm-syo p{ break-inside:avoid; }

/* 10 · Guide */
.cm-guide{ display:grid; grid-template-columns:260px 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.cm-guide__toc{ position:sticky; top:100px; max-height:calc(100vh - 120px); overflow:auto; padding:1.2rem; border:1px solid var(--cm-line); border-radius:20px; background:var(--cm-card); scrollbar-width:thin; }
.cm-guide__toc > p{ font-family:var(--cm-mono) !important; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cm-mute); margin-bottom:.6rem !important; }
.cm-guide__toc a{ display:flex; gap:.6rem; padding:.36rem .5rem; border-radius:10px; font-size:.8rem; line-height:1.35; color:var(--cm-dim); transition:background .2s, color .2s; }
.cm-guide__toc a em{ font-style:normal; font-family:var(--cm-mono) !important; font-size:.68rem; color:var(--cm-mute); padding-top:.1rem; }
.cm-guide__toc a:hover{ color:var(--cm-ink); background:var(--cm-soft); }
.cm-guide__toc a.on{ color:#160B03; background:linear-gradient(135deg,#FF8A3D,#F57323); }
.cm-guide__toc a.on em{ color:#160B03; }
.cm-guide__body{ min-width:0; }
.cm-ch{ position:relative; padding:2rem 0; border-top:1px solid var(--cm-line); scroll-margin-top:100px; }
.cm-ch:first-child{ border-top:0; padding-top:0; }
.cm-ch__no{ display:block; font-family:var(--cm-mono) !important; font-size:.72rem; color:var(--cm-acc2); margin-bottom:.5rem; }
.cm-sec .cm-ch__h{ font-family:var(--cm-display) !important; font-weight:400; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 1rem; max-width:34ch; }
.cm-ch p{ max-width:68ch; }
.cm-ch__sub{ margin-top:1.4rem; padding:1.4rem 1.5rem; border-radius:20px; background:var(--cm-soft); }
.cm-ch__img{ margin-top:1.3rem; border-radius:20px; overflow:hidden; aspect-ratio:16/7; background:var(--cm-soft); }
.cm-ch__img img{ width:100%; height:100%; object-fit:cover; font-size:0; color:transparent; }
.cm-sectors{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:1.4rem; }
.cm-sectors__card{ padding:1.4rem; background:var(--cm-card); border:1px solid var(--cm-line); }
.cm-sectors__card h3{ font-size:1rem; }
.cm-sectors__card p{ font-size:.88rem; }

/* 13 · CTA final */
.cm-cta .cm-h2{ max-width:24ch; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.cm-cta__txt p{ margin-top:.55rem !important; font-size:.9rem; line-height:1.6; max-width:60ch; }
.cm-cta__txt p:first-child{ margin-top:1rem !important; }
.cm-cta__txt strong, .cm-cta__strong strong{ color:#fff; font-weight:600; }
.cm-cta .cm-cta__strong{ margin-top:1.2rem !important; color:#fff; font-size:.98rem; }
.cm-cta{ align-items:start; }

@media (max-width:1024px){
  .cm-why, .cm-guide{ grid-template-columns:1fr; }
  .cm-guide__toc{ position:static; max-height:none; }
  .cm-guide__toc ol{ columns:2; column-gap:1rem; }
  .cm-choose{ grid-template-columns:1fr 1fr; }
  .cm-choose__card.cm-b--dark{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .cm-hero__more, .cm-choose, .cm-sectors{ grid-template-columns:1fr; }
  .cm-syo{ columns:1; }
  .cm-why__txt{ padding:1.4rem; }
  .cm-guide__toc ol{ columns:1; }
  .cm-guide__toc{ display:none; }
}
.cm-why__side{ grid-template-columns:1fr !important; }
.cm-why__side > *{ grid-column:auto !important; }
.cm-guide__toc a.on, .cm-guide__toc a.on em{ color:#160B03 !important; }

/* Listes du contenu (« ; ») */
.cm-list{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 .9rem !important; }
.cm-list li{ padding:.32rem .75rem; border-radius:999px; border:1px solid var(--cm-line2); background:var(--cm-card); font-size:.82rem; color:var(--cm-ink); line-height:1.35; }
.cm-b--dark .cm-list li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#F5F5F7; }
.cm-hero__more{ display:block; columns:2; column-gap:2.6rem; }
.cm-hero__more p{ break-inside:avoid; margin-bottom:.55rem !important; }
@media (max-width:640px){ .cm-hero__more{ columns:1; } }