/* ============================================================
   V3 — surcouche sur maquette-v2.css
   Principe : LA COULEUR EST DANS LES BLOCS, PAS DANS LES SECTIONS.
   Seul le cobalt occupe des pleines sections. Le reste respire
   sur crème, et chaque carte porte sa couleur.
   ============================================================ */
:root{
--yellow-soft:#fff2bf;--pink-soft:#ffe0f2;
--sh-ink-sm:7px 7px 0 0 var(--ink);--sh-ink-md:12px 12px 0 0 var(--ink);
}

/* ---------- 0. ON RETIRE LES SALLES DE COULEUR ---------- */
#preuves,#propositions-metier,#metier,#works,#preview-7j,#garanties{
background-color:var(--paper);
background-image:linear-gradient(rgba(33,48,234,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(33,48,234,.09) 1px,transparent 1px);
background-size:var(--grid-size);color:var(--ink);border:none}
#faq{background-color:var(--paper)!important;background-image:radial-gradient(rgba(33,48,234,.14) 1.4px,transparent 1.5px);background-size:22px 22px;border:none}

/* ---------- 1. PLUS AUCUNE BORDURE GAUCHE ---------- */
.arg,.module,.sector{border:2.5px solid var(--ink)!important;border-left-width:2.5px!important;border-top-width:2.5px!important;border-left-color:var(--ink)!important;border-top-color:var(--ink)!important}

/* ---------- 2. « POURQUOI ÇA MARCHE » : 4 BLOCS, 4 COULEURS ---------- */
.args{gap:var(--s3)}
.arg{box-shadow:var(--sh-ink-sm);transition:transform .18s,box-shadow .18s}
.arg:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-ink-md)}
#preuves .arg:nth-child(1){background:var(--yellow)!important}
#preuves .arg:nth-child(2){background:var(--pink)!important}
#preuves .arg:nth-child(3){background:var(--cyan)!important}
#preuves .arg:nth-child(4){background:var(--lime)!important}
#preuves .arg p{color:rgba(18,19,28,.78)}
#preuves .arg-n{background:var(--ink);color:#fff;border-radius:var(--r-md);width:52px;height:52px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1rem;opacity:1}
#preuves .arg .tag{display:inline-block;margin-top:var(--s2);background:var(--white);color:var(--ink);border-radius:var(--r-pill);padding:.3rem .85rem;font-weight:700;font-size:.8rem}
#preuves .kicker{background:var(--ink);color:#fff}

/* ---------- 3. SECTEURS : 3 BLOCS, 3 COULEURS ---------- */
.sector{box-shadow:var(--sh-ink-sm);transition:transform .18s,box-shadow .18s}
.sector:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-ink-md)}
#propositions-metier .sector:nth-child(1){background:var(--yellow)!important}
#propositions-metier .sector:nth-child(2){background:var(--cyan)!important}
#propositions-metier .sector:nth-child(3){background:var(--pink)!important}
#propositions-metier .sector p{color:rgba(18,19,28,.78)}
#propositions-metier .sector .pill{background:var(--ink);color:#fff}

/* ---------- 4. BESOINS MÉTIER : bandeau de couleur en tête, pas de liseré ---------- */
.module{box-shadow:var(--sh-ink-sm);position:relative;overflow:hidden;padding-top:calc(var(--s3) + 8px)}
.module::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--cobalt)}
#metier .modules .module:nth-child(1)::before{background:var(--yellow)}
#metier .modules .module:nth-child(2)::before{background:var(--pink)}
#metier .modules .module:nth-child(3)::before{background:var(--cyan)}
#metier .modules .module:nth-child(4)::before{background:var(--lime)}
#metier .modules .module:nth-child(5)::before{background:var(--violet)}
#metier .modules .module:nth-child(6)::before{background:var(--orange)}
.module .p{background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:.2rem .7rem;font-weight:700;font-size:.82rem}
#metier .i .pill{background:var(--cobalt-soft);color:var(--cobalt)}

/* ---------- 5. MÉTHODE : plus de bleu sur bleu, plus compact ---------- */
#process .steps{grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(max-width:900px){#process .steps{grid-template-columns:1fr}}
#process .step{grid-template-columns:1fr;gap:0;position:relative}
#process .step-dot{position:absolute;top:-16px;left:-14px;z-index:2;width:52px;height:52px;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink)}
#process .step:nth-child(2) .step-dot{background:var(--pink)}
#process .step:nth-child(3) .step-dot{background:var(--cyan)}
#process .step:nth-child(4) .step-dot{background:var(--lime)}
#process .step:nth-child(5) .step-dot{background:var(--violet)}
#process .step:nth-child(6) .step-dot{background:var(--white)}
#process .step-card{background:var(--white);border:2.5px solid var(--ink);box-shadow:var(--sh-ink-sm);padding:var(--s4) var(--s3) var(--s3);height:100%}
#process .step-card h3{font-size:clamp(18px,1.9vw,23px)}
#process .step-card p{font-size:15px;line-height:1.55;color:var(--ink-soft)}
#process .step-card .pill{background:var(--cobalt);color:#fff}
#process .sec-intro{color:rgba(255,255,255,.86)}
.liftoff{margin-top:var(--s4)}
.liftoff .banner{border:2.5px solid var(--ink);box-shadow:6px 6px 0 0 var(--ink)}

/* ---------- 6. BADGES : couleur pleine, aucune bordure ---------- */
.pill,.kicker,.level-tag,.eyebrow-pill,.hero-stack-item,.mock-card .cap span,.mock-card .mc-url,.work-url{border:none!important;box-shadow:none!important}
.kicker{background:var(--cobalt);color:#fff}
.kicker.pink{background:var(--pink);color:var(--ink)}
.kicker.yellow{background:var(--yellow);color:var(--ink)}
.kicker.cyan{background:var(--cyan);color:var(--ink)}
.kicker.paper,.kicker.white{background:var(--white);color:var(--cobalt)}
.on-ink .kicker,.hero .kicker{background:var(--lime);color:var(--ink)}
.on-ink .kicker.pink,.hero .kicker.pink{background:var(--pink);color:var(--ink)}
.pill{background:var(--cobalt-soft);color:var(--cobalt);font-weight:700}
.on-ink .pill:not(.step-card .pill){background:rgba(255,255,255,.16);color:#fff}
.level-tag{background:var(--ink);color:#fff}

/* ---------- 7. MUR DIAGONAL : serré + entraîné par le scroll ---------- */
.diag{gap:10px;margin-bottom:10px}
.diag-track{gap:10px}
.figure{box-shadow:5px 5px 0 0 var(--ink);border:2.5px solid var(--ink)}
@supports (animation-timeline:view()){
.diag-wrap{view-timeline-name:--diagview;view-timeline-axis:block}
.diag-wrap .diag-track{animation:slide linear both;animation-timeline:--diagview;animation-range:cover 0% cover 100%;animation-iteration-count:1}
.diag-wrap .diag.reverse .diag-track{animation-direction:reverse}
}

/* ---------- 8. LES EFFETS : révélation pilotée par le scroll, sans JS ---------- */
@supports (animation-timeline:view()){
[data-anim]{opacity:1;transform:none;animation:revealUp linear both;animation-timeline:view(block);animation-range:entry 0% entry 46%}
[data-anim].in{opacity:1}
}
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-anim]{animation:none!important;opacity:1;transform:none}}

/* ---------- 9. FINITIONS ---------- */
.guarantee .ico,.offer-card .ico{background:var(--cobalt);color:#fff;border:2.5px solid var(--ink)}
#garanties .guarantee:nth-child(1) .ico{background:var(--yellow);color:var(--ink)}
#garanties .guarantee:nth-child(2) .ico{background:var(--lime);color:var(--ink)}
#garanties .guarantee:nth-child(3) .ico{background:var(--cyan);color:var(--ink)}
#garanties .guarantee:nth-child(4) .ico{background:var(--pink);color:var(--ink)}
#offre .offer-card:nth-child(3n+1) .ico{background:var(--pink);color:var(--ink)}
#offre .offer-card:nth-child(3n+2) .ico{background:var(--yellow);color:var(--ink)}
#offre .offer-card:nth-child(3n+3) .ico{background:var(--cyan);color:var(--ink)}
.testi .av{background:var(--yellow);color:var(--ink)}
.steps-mini .n{background:var(--cobalt);color:#fff}
.btn.lg{box-shadow:var(--sh-ink-sm)}
.btn.lg:hover{box-shadow:var(--sh-ink-md);transform:translate(-2px,-2px)}
.price-sticker{box-shadow:10px 10px 0 0 var(--pink)}
.badge-round{background:var(--yellow);border:3px solid var(--ink);box-shadow:6px 6px 0 0 var(--ink)}

/* ---------- 10. MISSIONS RÉCENTES : MÊME HAUTEUR, ALIGNÉES ---------- */
.works{align-items:stretch}
.works .work:nth-child(even){margin-top:0!important}
.work{display:flex;flex-direction:column;height:100%}
.work .shot{aspect-ratio:16/9;flex:0 0 auto}
.work .cap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem}
.work .cap .r{margin-top:auto}

/* ---------- 11. LES OMBRES NE SONT PLUS ROGNÉES ---------- */
/* overflow:hidden coupe au bord de la boîte de padding : on lui donne de l'air */
.marquee{padding:12px 0 16px;margin:-12px 0 -16px}
.diag{padding:10px 0 14px;margin-bottom:-4px}
.diag-wrap{padding:calc(var(--s4) + 8px) 0 calc(var(--s4) + 14px)}
.hscroll{padding:10px 4px 18px;margin:-10px -4px -18px}