/* Comment ça marche : surcouche propre à la page (préfixe cm-) */

/* ---------- Fonds ---------- */
.sec.cm-mist{background:var(--mist)}
.sec.cm-sand{background:var(--bg-alt)}
.sec.cm-band{background:var(--pet);border-top:0}
.cm-band h2,.cm-band .h-xl{color:var(--pet-fg)}
.cm-band .mute,.cm-band .label,.cm-band .lead{color:var(--pet-mute)}
.cm-band .eyebrow i{background:#FFB020}
.cm-band .adv b{color:var(--pet-fg)}
.cm-band .adv p{color:var(--pet-mute)}
.cm-band .adv li.hot b{color:#2A1308}
.cm-band .adv li.hot p{color:#6A4A38}

/* ---------- Mise en place : visio + frise ---------- */
.cm-setup{display:grid;gap:44px;margin-top:52px;align-items:start}
@media (min-width:980px){.cm-setup{grid-template-columns:1fr 1fr;gap:72px}}
.cm-visio .win{max-width:560px;margin:0 auto}
.cm-cam{position:relative;aspect-ratio:16/11;overflow:hidden;background:#2A1B12}
.cm-cam img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.cm-rec{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(15,49,56,.82);color:#F3EDE4;font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}
.cm-rec i{width:8px;height:8px;border-radius:50%;background:#FF6B2C}
.cm-visio.on .cm-rec i{animation:cmBlink 1.4s ease-in-out infinite}
@keyframes cmBlink{50%{opacity:.25}}
.cm-name{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:10px;background:rgba(246,237,225,.92);color:#2A1308;font-size:13px;font-weight:600}
.cm-check{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-check li{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(var(--fg-rgb),.03);border:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--t2)}
.cm-check svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--line);color:transparent;transition:background .35s,color .35s}
.cm-check li.on{color:var(--t1)}
.cm-check li.on svg{background:#C8613B;color:#FFF8EF;animation:cmPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes cmPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.cm-tl{position:relative;list-style:none;margin:0;padding:0 0 0 34px;display:grid;gap:26px}
.cm-tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line-2)}
.cm-tl::after{content:"";position:absolute;left:9px;top:8px;width:2px;height:calc(100% - 16px);background:linear-gradient(180deg,#C8613B,#FF6B2C);transform-origin:top;transform:scaleY(var(--p,0))}
.cm-tl li{position:relative}
.cm-tl li::before{content:"";position:absolute;left:-31px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg-white);border:2px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .3s}
.cm-tl li.on::before{background:#FF6B2C;border-color:#FF6B2C;box-shadow:0 0 0 5px rgba(255,107,44,.18)}
.cm-when{font-family:var(--f-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sec-txt)}
.cm-tl b{display:block;margin-top:4px;font-family:var(--f-d);font-weight:600;font-size:21px;letter-spacing:-.025em}
.cm-tl p{margin-top:4px;color:var(--t2);font-size:15.5px}
.cm-note{margin-top:40px;padding:16px 20px;border-radius:16px;background:var(--bg-alt);font-size:15.5px;color:var(--t2);max-width:760px}
.cm-note b{color:var(--t1)}

/* ---------- Une journée avec Sam ---------- */
.cm-day{margin-top:52px}
.cm-sky{display:flex;align-items:center;gap:12px;margin:0 auto 22px;max-width:1100px}
.cm-sun{flex:none;width:22px;height:22px;border-radius:50%;background:#FFB020;box-shadow:0 0 0 6px rgba(255,176,32,.2)}
.cm-moon{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pet);color:#FFB020}
.cm-bar{flex:1;height:4px;border-radius:4px;background:var(--mist-line);overflow:hidden}
.cm-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#FFB020,#FF6B2C 50%,#17414A);transform-origin:left;transform:scaleX(0);transition:transform 2.6s cubic-bezier(.65,0,.35,1)}
.cm-day.on .cm-bar i{transform:scaleX(1)}
.cm-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.cm-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cm-cards{grid-template-columns:repeat(4,1fr)}}
.cm-cards li{display:flex;flex-direction:column;gap:8px;padding:20px 18px 18px;border-radius:22px;background:var(--card);border:1px solid var(--mist-line);box-shadow:0 18px 40px -30px rgba(15,49,56,.5)}
.cm-t{font-family:var(--f-d);font-weight:600;font-size:34px;letter-spacing:-.04em;line-height:1;color:var(--pet-txt)}
.cm-ch{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--t2)}
.cm-ch img{width:18px;height:18px}
.cm-q{font-size:15.5px;font-weight:600;color:var(--t1);line-height:1.4}
.cm-a{font-size:14.5px;color:var(--t2);flex:1}
.cm-cards .st{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.cm-cards .st.va{background:var(--va-bg);color:var(--va-fg)}
.cm-cards .cm-night{background:var(--pet-2);border-color:var(--pet-2)}
.cm-night .cm-t{color:#FFB020}
.cm-night .cm-ch,.cm-night .cm-a{color:var(--pet-mute)}
.cm-night .cm-q{color:var(--pet-fg)}
.cm-night .cm-st{background:rgba(255,176,32,.16);color:#FFB020}
.cm-cards li{opacity:0;transform:translateY(28px) scale(.96)}
.cm-day.on .cm-cards li{animation:cmIn .75s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i) * .55s + .2s)}
@keyframes cmIn{to{opacity:1;transform:none}}
.cm-space{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:40px auto 0;max-width:900px;padding:18px 22px;border-radius:20px;background:var(--card);border:1px solid var(--mist-line)}
.cm-space p{flex:1;min-width:220px;color:var(--t2);font-size:15.5px}
.cm-space p b{color:var(--t1)}
.cm-sp-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(23,65,74,.12);color:var(--pet-txt)}

/* ---------- Réglages animés ---------- */
.cm-settings .seg{position:relative}
.cm-settings .seg span{position:relative;z-index:1;transition:color .3s}
.cm-settings .seg span.on{background:transparent;box-shadow:none}
.cm-settings .seg .cm-knob{position:absolute;z-index:0;top:3px;bottom:3px;border-radius:6px;background:var(--sel-bg);box-shadow:var(--sel-shadow),inset 0 0 0 1px rgba(200,97,59,.35);transition:left .55s cubic-bezier(.34,1.4,.64,1),width .55s cubic-bezier(.34,1.4,.64,1)}
.cm-toggle{background:#C9B49A;transition:background .4s}
.cm-toggle::after{right:auto;left:2px;transition:left .4s cubic-bezier(.34,1.56,.64,1)}
.cm-toggle.on{background:var(--sec)}
.cm-toggle.on::after{left:16px}

/* ---------- Sécurité + ce qu'il faut ---------- */
.cm-safe{display:grid;gap:12px;margin-top:44px}
@media (min-width:700px){.cm-safe{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cm-safe{grid-template-columns:repeat(4,1fr)}}
.cm-safe > div{padding:22px 20px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
.cm-safe b{display:block;margin-top:14px;font-family:var(--f-d);font-weight:600;font-size:19px;letter-spacing:-.025em}
.cm-safe > div > span:last-child{display:block;margin-top:6px;font-size:14.5px;color:var(--t2)}
.cm-safe > div:nth-child(2) .e-ic,.cm-safe > div:nth-child(3) .e-ic{background:rgba(23,65,74,.12);color:var(--pet-txt)}
.cm-need{display:grid;gap:30px;margin-top:84px}
@media (min-width:980px){.cm-need{grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}}
.cm-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cm-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.cm-list b{display:block;font-weight:600;font-size:16.5px}
.cm-list p{font-size:14.5px;color:var(--t2);margin-top:2px}
.cm-box{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:2px solid var(--line-2);color:transparent;transition:background .3s,border-color .3s,color .3s}
.cm-list li.on .cm-box{background:#C8613B;border-color:#C8613B;color:#FFF8EF;animation:cmPop .5s cubic-bezier(.34,1.56,.64,1)}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .cm-cards li{opacity:1;transform:none;animation:none!important}
  .cm-bar i{transform:none;transition:none}
  .cm-tl::after{transform:scaleY(1)}
  .cm-rec i,.cm-check li.on svg,.cm-list li.on .cm-box{animation:none!important}
  .cm-settings .seg .cm-knob,.cm-toggle,.cm-toggle::after{transition:none}
}