/* MCO2 Serv'Ice — effets et composants. Dépend de mco2-tokens.css. Tout respecte prefers-reduced-motion. */

/* 1. Le bloc : la surface de base du site */
.mco2-bloc{background:var(--mco2-nuit);color:var(--mco2-blanc);border-radius:var(--mco2-rayon-bloc);padding:var(--mco2-s6)}
.mco2-bloc h1,.mco2-bloc h2,.mco2-bloc h3{color:var(--mco2-blanc)}
.mco2-bloc .mco2-muted{color:#BFD0E3}

/* 2. Le franchissement : un élément qui sort du bloc (image, carte, chiffre), comme le 2 */
.mco2-sort{position:relative;z-index:2}
.mco2-sort--droite{margin-right:calc(-1 * var(--mco2-s8))}
.mco2-sort--haut{margin-top:calc(-1 * var(--mco2-s8))}
.mco2-sort--bas{margin-bottom:calc(-1 * var(--mco2-s8))}
@media (max-width:782px){.mco2-sort--droite,.mco2-sort--haut,.mco2-sort--bas{margin:0}}

/* 3. Le bord qui se sublime : transition entre une section nuit et une section claire */
.mco2-sublime{position:relative}
.mco2-sublime::after{content:"";position:absolute;left:0;right:0;bottom:-78px;height:80px;background:var(--mco2-nuit);
  -webkit-mask:url("../svg/bord-sublime-mask.svg") center/100% 100% no-repeat;mask:url("../svg/bord-sublime-mask.svg") center/100% 100% no-repeat;pointer-events:none}
.mco2-sublime--givre::after{background:var(--mco2-givre)}

/* 4. Particules : rares, orange, jamais en fond de texte. Un seul foyer par écran. */
.mco2-particules{position:relative;isolation:isolate}
.mco2-particules::before{content:"";position:absolute;inset:0;background:url("../svg/motif-particules.svg") repeat;background-size:240px;opacity:.55;z-index:-1;pointer-events:none}

/* 5. Boutons : bloc orange ; au survol, trois particules s'échappent en haut à droite */
.mco2-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.85rem 1.5rem;border-radius:var(--mco2-rayon);font:700 1rem/1 var(--mco2-texte);text-decoration:none;position:relative;transition:transform var(--mco2-vite) var(--mco2-courbe),background var(--mco2-vite)}
.mco2-btn--orange{background:var(--mco2-orange);color:#fff}.mco2-btn--orange:hover{background:#E84400;transform:translateY(-1px)}
.mco2-btn--nuit{background:var(--mco2-nuit);color:#fff}.mco2-btn--nuit:hover{background:var(--mco2-nuit-2)}
.mco2-btn--contour{border:2px solid var(--mco2-nuit);color:var(--mco2-nuit);background:transparent}.mco2-btn--contour:hover{background:var(--mco2-givre)}
.mco2-btn--orange::after{content:"";position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--mco2-orange) 0 3px,transparent 3.5px) 0 0/14px 14px no-repeat}
.mco2-btn--orange:hover::after{animation:mco2-echappe .7s var(--mco2-courbe) forwards}
@keyframes mco2-echappe{0%{opacity:0;transform:translate(0,6px) scale(.6)}40%{opacity:1}100%{opacity:0;transform:translate(10px,-14px) scale(1.1)}}
.mco2-btn:focus-visible,a:focus-visible{outline:3px solid var(--mco2-orange);outline-offset:3px}

/* 6. Liens : soulignement orange qui s'évapore au survol (plein -> pointillé) */
.mco2-lien{color:var(--mco2-nuit);font-weight:600;text-decoration:none;border-bottom:2px solid var(--mco2-orange);transition:border-bottom-style var(--mco2-vite)}
.mco2-lien:hover{border-bottom-style:dotted;color:var(--mco2-orange)}

/* 7. Cartes : pas d'ombre ; un filet haut bleu nuit, qui devient orange au survol ; la carte se soulève de 2 px */
.mco2-carte{background:#fff;border-top:var(--mco2-filet) solid var(--mco2-nuit);padding:var(--mco2-s3) 0;transition:border-color var(--mco2-vite),transform var(--mco2-moyen) var(--mco2-courbe)}
.mco2-carte:hover{border-top-color:var(--mco2-orange);transform:translateY(-2px)}

/* 8. Apparition au défilement (JS ajoute .est-visible) */
.mco2-reveal{opacity:0;transform:translateY(18px);transition:opacity var(--mco2-moyen) var(--mco2-courbe),transform var(--mco2-moyen) var(--mco2-courbe)}
.mco2-reveal.est-visible{opacity:1;transform:none}
.mco2-reveal[data-delai="1"]{transition-delay:60ms}.mco2-reveal[data-delai="2"]{transition-delay:120ms}.mco2-reveal[data-delai="3"]{transition-delay:180ms}

/* 9. Chiffres clés : Archivo Black, filet orange, valeur animée par JS (data-compte) */
.mco2-chiffre{border-top:var(--mco2-filet) solid var(--mco2-orange);padding-top:var(--mco2-s2)}
.mco2-chiffre strong{display:block;font:400 2.25rem/1 var(--mco2-titres);color:currentColor;font-variant-numeric:tabular-nums}
.mco2-chiffre span{font-size:var(--mco2-t-petit);opacity:.85}

/* 10. Titres : un mot clé en orange, un seul par titre */
h1,.mco2-h1{font:400 var(--mco2-t-hero)/var(--mco2-interligne-titre) var(--mco2-titres);letter-spacing:-.01em;color:var(--mco2-nuit)}
h2,.mco2-h2{font:400 var(--mco2-t-h2)/1.1 var(--mco2-titres);color:var(--mco2-nuit)}
.mco2-accent{color:var(--mco2-orange)}

/* 11. Formulaire WPForms : champs nets, focus orange, succès avec particules */
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container input[type=tel],.wpforms-container textarea,.wpforms-container select{border:2px solid var(--mco2-givre)!important;border-radius:var(--mco2-rayon)!important;padding:.8rem 1rem!important;font-family:var(--mco2-texte)!important}
.wpforms-container input:focus,.wpforms-container textarea:focus{border-color:var(--mco2-orange)!important;box-shadow:none!important;outline:none}
.wpforms-container button[type=submit]{background:var(--mco2-orange)!important;color:#fff!important;border:0!important;border-radius:var(--mco2-rayon)!important;font:700 1rem var(--mco2-texte)!important;min-height:48px;padding:.85rem 1.5rem!important}
.wpforms-confirmation-container-full{background:var(--mco2-nuit)!important;color:#fff!important;border:0!important;border-radius:var(--mco2-rayon-bloc)}
.wpforms-confirmation-container-full{position:relative}.wpforms-confirmation-container-full::after{content:"";position:absolute;top:-10px;right:18px;width:48px;height:36px;background:url("../svg/motif-particules.svg") -20px -150px/240px no-repeat}

/* 12. Barre de défilement : un filet orange qui progresse en haut de page (JS met --mco2-progression) */
.mco2-progression{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(var(--mco2-progression,0));background:var(--mco2-orange);z-index:999;pointer-events:none}

/* 13. Mouvement réduit : tout s'affiche, rien ne bouge */
@media (prefers-reduced-motion:reduce){
  .mco2-reveal{opacity:1;transform:none;transition:none}
  .mco2-btn--orange:hover::after{animation:none}
  .mco2-carte,.mco2-btn{transition:none}
  .mco2-progression{display:none}
}