/* ============================================================
   Costa Services — Motion & composants 2026 (V100)
   Chargé sur toutes les pages. Désactivé si prefers-reduced-motion.
   ============================================================ */

/* ---------- Bandeau fin du cuivre (toutes pages) ---------- */
.cu-banner{display:block;background:var(--dk,#0f172a);color:#fff;text-decoration:none;border-bottom:3px solid var(--red,#e30613);position:relative;z-index:1000}
.cu-banner-in{max-width:1280px;margin:0 auto;padding:10px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;font-size:13.5px;line-height:1.45;text-align:center}
.cu-banner strong{color:#fff}
.cu-banner .cu-cta{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;color:#fff}
.cu-banner:hover .cu-cta{color:#ffb3b7}
.cu-dot{width:8px;height:8px;border-radius:50%;background:#ff3b45;flex-shrink:0;box-shadow:0 0 0 0 rgba(255,59,69,.6)}
.cu-banner:focus-visible{outline:3px solid #ffb3b7;outline-offset:-3px}

/* ---------- Carte interlocuteur (hero accueil) ---------- */
.hero-contact{background:#fff;color:var(--tx,#1e293b);border-radius:18px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:16px;position:relative}
.hero-contact .hc-lbl{font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#c00510}
.hero-contact .hc-who{display:flex;gap:16px;align-items:center}
.hero-contact .hc-av{width:72px;height:72px;border-radius:50%;background:var(--rl,#fff0f0);color:var(--red,#e30613);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.hero-contact .hc-av::after{content:'';position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#16a34a;border:3px solid #fff}
.hero-contact .hc-name{font-family:var(--ft);font-weight:800;font-size:20px;color:var(--dk,#0f172a);line-height:1.2}
.hero-contact .hc-role{font-size:13.5px;color:var(--g6,#475569)}
.hero-contact p{margin:0;font-size:14.5px;color:var(--g7,#334155);line-height:1.6}
.hero-contact .hc-rows{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--g7,#334155)}
.hero-contact .hc-rows div{display:flex;gap:10px;align-items:center}
.hero-contact .hc-rows svg{width:17px;height:17px;color:var(--red,#e30613);flex-shrink:0}
.hero-contact .hc-dl{border-top:1px solid var(--g2,#e2e8f0);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.hero-contact .hc-dl a{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--dk,#0f172a);text-decoration:none;padding:8px 10px;border-radius:9px;background:var(--g0,#f8fafc);border:1px solid var(--g2,#e2e8f0);transition:border-color .2s,transform .2s}
.hero-contact .hc-dl a:hover{border-color:var(--red,#e30613);transform:translateX(3px)}
.hero-contact .hc-dl b{font-weight:700}
.hero-contact .hc-dl span{font-size:12px;font-weight:700;color:#9b0410;white-space:nowrap}

/* ---------- Cartes échéances ---------- */
.ech-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--g2,#e2e8f0);border-radius:14px;padding:26px;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.16,.8,.3,1),box-shadow .25s,border-color .25s}
.ech-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--ech,#e30613);transform-origin:left;transition:transform .5s ease}
.ech-card:hover{transform:translateY(-4px);box-shadow:var(--shl);border-color:var(--g3,#cbd5e1)}
.ech-card .ech-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ech-card .ech-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ech-bg,#fff0f0);color:var(--ech,#e30613)}
.ech-card .ech-ico svg{width:24px;height:24px}
.ech-card .ech-tag{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--ech-bg,#fff0f0);color:var(--ech-tx,#9b0410);white-space:nowrap}
.ech-card h3{font-family:var(--ft);font-size:21px;font-weight:800;color:var(--dk,#0f172a);margin:0;line-height:1.2}
.ech-card p{margin:0;font-size:14.5px;color:var(--g6,#475569);line-height:1.65}
.ech-card .ech-date{font-family:var(--ft);font-weight:800;font-size:15px;color:var(--ech-tx,#9b0410)}
.ech-card .more{margin-top:auto;color:var(--ech-tx,#9b0410)}

/* ---------- Prix indicatifs sur cartes ---------- */
.from-chip{display:inline-flex;align-items:baseline;gap:4px;margin-top:12px;font-size:12px;color:var(--g6,#475569);background:var(--g0,#f8fafc);border:1px solid var(--g2,#e2e8f0);border-radius:999px;padding:4px 11px}
.from-chip b{font-family:var(--ft);font-size:14px;font-weight:800;color:var(--dk,#0f172a)}

/* ---------- Bloc renvoi contextuel (pages produits) ---------- */
.ctx-callout{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--g2,#e2e8f0);border-radius:14px;padding:22px 26px;box-shadow:0 2px 12px rgba(15,23,42,.05)}
.ctx-callout .cc-l{display:flex;gap:14px;align-items:flex-start;flex:1 1 420px}
.ctx-callout .cc-ico{width:44px;height:44px;border-radius:12px;background:var(--rl,#fff0f0);color:var(--red,#e30613);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ctx-callout .cc-ico svg{width:22px;height:22px}
.ctx-callout strong{display:block;font-size:16px;color:var(--dk,#0f172a);margin-bottom:3px}
.ctx-callout span{font-size:14px;color:var(--g6,#475569);line-height:1.6}

/* ---------- Avis : appel à laisser un avis ---------- */
.review-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--dk,#0f172a);color:#fff;border-radius:14px;padding:20px 24px}
.review-cta span{font-size:15px}
.review-cta a{background:#fff;color:var(--dk,#0f172a);text-decoration:none;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px;white-space:nowrap}

/* ---------- Pages 2026 : composants partagés ---------- */
.p26-hero{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#fff;position:relative;overflow:hidden}
.p26-hero{padding:64px 0}
.p26-hero .w{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
.p26-hero h1{font-size:clamp(30px,4.2vw,50px);font-weight:900;letter-spacing:-1.2px;line-height:1.08;margin:12px 0 16px;color:#fff}
.p26-hero .p26-lead{font-size:17px;color:rgba(255,255,255,.78);line-height:1.7;margin:0 0 24px;max-width:640px}
.p26-hero .p26-ctas{display:flex;flex-wrap:wrap;gap:12px}
.p26-hero .lbl-red{background:var(--red,#e30613);color:#fff}
.p26-hero.p26-blue{background:linear-gradient(135deg,#0f2a6b 0%,#1348d0 100%)}
.p26-panel{background:#fff;color:var(--tx,#1e293b);border-radius:18px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.p26-panel h2{font-family:var(--ft);font-size:21px;font-weight:800;color:var(--dk,#0f172a);margin:4px 0 14px;line-height:1.25}
.p26-panel .p26-k{font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#c00510}

/* Test cuivre interactif */
.cu-check{display:flex;flex-direction:column;gap:8px}
.cu-opt{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--g2,#e2e8f0);background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .2s,background .2s,transform .15s}
.cu-opt:hover{border-color:var(--g4,#94a3b8)}
.cu-opt:active{transform:scale(.99)}
.cu-opt[aria-pressed="true"]{border-color:var(--red,#e30613);background:var(--rl,#fff0f0)}
.cu-opt .cu-box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--g4,#94a3b8);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:background .2s,border-color .2s}
.cu-opt[aria-pressed="true"] .cu-box{background:var(--red,#e30613);border-color:var(--red,#e30613)}
.cu-opt .cu-box svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.cu-opt[aria-pressed="true"] .cu-box svg{opacity:1;transform:none}
.cu-opt .cu-t{display:flex;flex-direction:column}
.cu-opt .cu-t b{font-size:14.5px;font-weight:600;color:var(--dk,#0f172a)}
.cu-opt .cu-t small{font-size:12.5px;color:var(--g6,#475569)}
.cu-res{margin-top:12px;border-radius:10px;padding:14px 16px;background:var(--dk,#0f172a);color:#fff;transition:background .3s}
.cu-res.zero{background:var(--g1,#f1f5f9);color:var(--dk,#0f172a)}
.cu-res b{font-family:var(--ft);font-size:18px;font-weight:800;display:block}
.cu-res span{font-size:13.5px}

/* Frise calendrier */
.cu-tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:8px}
.cu-tl::before{content:'';position:absolute;left:0;right:0;top:15px;height:4px;border-radius:2px;background:var(--g2,#e2e8f0)}
.cu-tl .cu-tl-fill{position:absolute;left:0;top:15px;height:4px;border-radius:2px;background:var(--red,#e30613);width:var(--tl,52%);transform-origin:left}
.cu-tl-step{position:relative;padding-top:42px}
.cu-tl-step::before{content:'';position:absolute;top:6px;left:0;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--g4,#94a3b8)}
.cu-tl-step.done::before{border-color:var(--red,#e30613);background:var(--red,#e30613)}
.cu-tl-step.next::before{border-color:var(--red,#e30613);background:#fff;box-shadow:0 0 0 6px var(--rl,#fff0f0)}
.cu-tl-step .cu-tl-k{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--g6,#475569)}
.cu-tl-step.next .cu-tl-k{color:#9b0410}
.cu-tl-step .cu-tl-d{font-family:var(--ft);font-size:22px;font-weight:800;color:var(--dk,#0f172a);margin:2px 0 6px}
.cu-tl-step.next .cu-tl-d{color:#9b0410}
.cu-tl-step p{font-size:14px;color:var(--g6,#475569);line-height:1.6;margin:0}

/* Étapes numérotées */
.p26-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.p26-step{background:#fff;border:1px solid var(--g2,#e2e8f0);border-radius:14px;padding:24px;transition:transform .25s,box-shadow .25s}
.p26-step:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.p26-step .n{width:38px;height:38px;border-radius:50%;background:var(--red,#e30613);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-family:var(--ft)}
.p26-step.bl .n{background:var(--bl,#1a5aff)}
.p26-step h3{font-size:17px;font-weight:800;color:var(--dk,#0f172a);margin:0 0 6px}
.p26-step p{font-size:14px;color:var(--g6,#475569);line-height:1.65;margin:0}

/* Liste mesures NIS2 */
.p26-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p26-list li{background:#fff;border:1px solid var(--g2,#e2e8f0);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;font-size:14.5px;color:var(--g7,#334155);line-height:1.6}
.p26-list li .num{font-family:var(--ft);font-weight:800;color:var(--red,#e30613);font-size:18px;min-width:28px}
.p26-list li strong{color:var(--dk,#0f172a)}

/* Questions reçues */
.p26-q{background:var(--g0,#f8fafc);border:1px solid var(--g2,#e2e8f0);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--g7,#334155);margin-bottom:9px}

/* Bloc prix indicatifs */
.p26-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.p26-price{background:#fff;border:1px solid var(--g2,#e2e8f0);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:6px}
.p26-price .k{font-size:13px;font-weight:700;color:var(--g6,#475569)}
.p26-price .v{font-family:var(--ft);font-size:28px;font-weight:800;color:var(--dk,#0f172a);line-height:1.1}
.p26-price .v small{font-family:var(--f);font-size:13px;font-weight:600;color:var(--g6,#475569)}
.p26-price .d{font-size:13.5px;color:var(--g6,#475569);line-height:1.55}
.p26-note{font-size:12.5px;color:var(--g6,#475569);margin-top:12px}

/* FAQ (details natif) */
.p26-faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.p26-faq details{background:#fff;border:1px solid var(--g2,#e2e8f0);border-radius:12px;padding:16px 20px;transition:border-color .2s}
.p26-faq details[open]{border-color:var(--red,#e30613)}
.p26-faq summary{font-weight:700;color:var(--dk,#0f172a);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;font-size:15.5px}
.p26-faq summary::-webkit-details-marker{display:none}
.p26-faq summary::after{content:'+';font-size:22px;line-height:1;color:var(--red,#e30613);transition:transform .25s}
.p26-faq details[open] summary::after{transform:rotate(45deg)}
.p26-faq details p{margin:10px 0 0;color:var(--g6,#475569);font-size:14.5px;line-height:1.7}

@media(max-width:900px){
  .p26-hero{padding:44px 0 48px}
  .p26-hero .w{grid-template-columns:1fr;gap:32px}
  .cu-tl,.p26-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p26-prices{grid-template-columns:1fr}
  .p26-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cu-tl,.p26-steps{grid-template-columns:1fr}
  .cu-tl::before,.cu-tl .cu-tl-fill{display:none}
  .cu-banner-in{font-size:12.5px;padding:9px 16px;gap:6px 10px}
  .cu-long{display:none}
  .hero-contact{padding:22px}
}

/* ============================================================
   ANIMATIONS (uniquement si l'utilisateur les accepte)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.mx .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1);transition-delay:var(--rv-d,0s)}
  html.mx .rv.rv-in{opacity:1;transform:none}
  html.mx .rv-l{opacity:0;transform:translateX(-26px)}
  html.mx .rv-l.rv-in{opacity:1;transform:none}
  html.mx .rv-s{opacity:0;transform:scale(.96)}
  html.mx .rv-s.rv-in{opacity:1;transform:none}

  .cu-dot{animation:cuPulse 2.2s ease-out infinite}
  @keyframes cuPulse{0%{box-shadow:0 0 0 0 rgba(255,59,69,.6)}70%{box-shadow:0 0 0 10px rgba(255,59,69,0)}100%{box-shadow:0 0 0 0 rgba(255,59,69,0)}}

  .hero-contact{animation:hcFloat 7s ease-in-out infinite}
  @keyframes hcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .hero-contact .hc-av::after{animation:hcOnline 2.4s ease-out infinite}
  @keyframes hcOnline{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

  /* Soulignement animé des mots clés du H1 d'accueil */
  .hero h1 em{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 3px;background-position:0 96%;transition:background-size 1.1s cubic-bezier(.16,.8,.3,1) .5s}
  html.mx-ready .hero h1 em{background-size:100% 3px}

  html.mx .ech-card::before{transform:scaleX(0)}
  html.mx .ech-card.rv-in::before{transform:scaleX(1);transition-delay:calc(var(--rv-d,0s) + .3s)}

  html.mx .cu-tl .cu-tl-fill{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.16,.8,.3,1) .2s}
  html.mx .cu-tl.rv-in .cu-tl-fill{transform:scaleX(1)}
  .cu-tl-step.next::before{animation:tlPulse 2.2s ease-out infinite}
  @keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(227,6,19,.35)}70%{box-shadow:0 0 0 12px rgba(227,6,19,0)}100%{box-shadow:0 0 0 0 rgba(227,6,19,0)}}

  .cu-res{animation:none}
  .cu-res.bump{animation:resBump .35s ease}
  @keyframes resBump{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}

  .btn-hp,.btn-red{transition:transform .2s,box-shadow .2s,background .2s}
  .btn-hp:hover,.btn-red:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(227,6,19,.28)}
}
@media print{html.mx .rv{opacity:1!important;transform:none!important}}

/* Liens « more » des composants 2026 */
.p26-price .more,.ech-card .more{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--red,#e30613);text-decoration:none}
.ech-card .more{color:var(--ech-tx,#9b0410)}
.p26-price .more:hover{text-decoration:underline}

/* Icônes des cartes sans taille inline */
.cico svg{width:22px;height:22px}
.hero-kpis{flex-wrap:wrap}

/* ============================================================
   V101 — LARGEUR FLUIDE : contenu bord à bord avec marges
   Marge latérale : 20 px (mobile) → 4 vw → 80 px (grand écran)
   Les conteneurs à largeur de lecture volontaire (style inline) sont conservés.
   ============================================================ */
:root{--gut:clamp(20px,4vw,80px)}
.w{max-width:none!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important}
.hero-in{max-width:none!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.nav-in{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
.cu-banner-in{max-width:none;padding-left:var(--gut);padding-right:var(--gut)}
.sh .sub,.hero-sub,.p26-lead{max-width:760px}
.sol-in,.funnel-bar-in{max-width:none!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important}
.w[style*="max-width:980px"],.w[style*="max-width:1000px"],.w[style*="max-width:1080px"],.w[style*="max-width:1100px"]{max-width:none!important}
.ctx-callout{max-width:none}
@media(min-width:1700px){.g3{gap:28px}.g4{gap:24px}}
@media(max-width:900px){.hero-in{grid-template-columns:1fr}}

/* V101 — /ia-solutions : grille de services forcée en 1 colonne sur mobile (style inline en 2 colonnes) */
@media(max-width:920px){.svcs{grid-template-columns:minmax(0,1fr)!important}}