/* Page carrefour « Travaillons ensemble » — styles propres au corps de page.
   Extrait de tasks/preview/travaillons-ensemble.html. Le CHROME (en-tête, menu
   mobile, pied, barre de progression, panneau-preuve) vient du thème (chrome.css) :
   ces blocs sont volontairement absents ici. Polices auto-hébergées via theme.json.

   Anti-collision : .bridge et .rise existent déjà site-wide dans content.css →
   renommées ici en .co-bridge / .co-rise (+ @keyframes co-rise). */
:root{
  --terre:     oklch(0.34 0.055 45);
  --spruce-900:oklch(0.22 0.026 182);
  --spruce-800:oklch(0.28 0.03 180);
  --spruce-700:oklch(0.36 0.03 178);
  --bourgogne: oklch(0.42 0.16 26);
  --bourgogne-vif: oklch(0.50 0.18 28);
  --bourgogne-900:oklch(0.32 0.12 27);
  --vert:      oklch(0.46 0.11 155); /* accent Se former (vert forêt) */
  --clay:      oklch(0.56 0.05 55);
  --sauge:     oklch(0.72 0.025 160);

  --bg:      oklch(0.985 0.003 100);
  --surface: oklch(0.965 0.005 95);
  --ink:     oklch(0.20 0.012 55);
  --ink-soft:oklch(0.42 0.012 50);
  --ink-body:oklch(0.35 0.014 50); /* corps de texte : contraste AA sur bg/surface */
  --line:    oklch(0.90 0.006 90);
  --line-strong: oklch(0.82 0.01 70);
  --on-dark: oklch(0.94 0.012 90);
  --on-dark-soft: oklch(0.78 0.02 130);

  --measure: 68ch;
  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1.08rem, 1.02rem + 0.32vw, 1.22rem);
  --step-1:  clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --step-3:  clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --step-4:  clamp(2.7rem, 1.9rem + 4vw, 5rem);

  --grotesk:"Schibsted Grotesk",system-ui,sans-serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--bourgogne);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}

/* ============================================================
   CARREFOUR — sections propres à la page
   ============================================================ */

/* boutons partagés */
.btn-a{font-family:var(--grotesk);font-weight:700;font-size:1rem;background:var(--ink);color:var(--bg);padding:.85rem 1.5rem;border-radius:9px;text-decoration:none;transition:background .2s,transform .2s;display:inline-flex;align-items:center;gap:.5rem}
.btn-a:hover{background:var(--bourgogne);transform:translateY(-1px)}
.btn-b{font-family:var(--grotesk);font-weight:700;font-size:1rem;color:var(--ink);padding:.85rem 1.4rem;border-radius:9px;text-decoration:none;border:1.5px solid var(--line-strong);transition:.2s;display:inline-flex;align-items:center;gap:.5rem}
.btn-b:hover{border-color:var(--ink)}

/* ---------- HERO sapin sombre ---------- */
.co-hero{position:relative;overflow:hidden;background:var(--spruce-900);color:var(--on-dark);isolation:isolate}
.co-hero .glowwrap{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
/* voile : garde la moitié gauche (le texte) bien sombre, laisse l'aurore vivre à droite */
.co-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(97deg,var(--spruce-900) 26%,oklch(0.22 0.026 182 / .55) 55%,transparent 92%)}
.co-hero .g{position:absolute;border-radius:50%;filter:blur(72px);mix-blend-mode:screen}
.co-hero .g1{width:62%;height:130%;left:-10%;top:-32%;background:radial-gradient(ellipse at center,oklch(0.72 0.13 168 / .5),transparent 70%);animation:codrift 23s ease-in-out infinite,coglow 8s ease-in-out infinite}
.co-hero .g2{width:52%;height:120%;right:-8%;top:-24%;background:radial-gradient(ellipse at center,oklch(0.66 0.15 300 / .42),transparent 72%);animation:codrift2 27s ease-in-out infinite,coglow 6.5s ease-in-out infinite;animation-delay:-1s,-2s}
.co-hero .g3{width:46%;height:90%;left:40%;bottom:-34%;background:radial-gradient(ellipse at center,oklch(0.7 0.13 195 / .4),transparent 74%);animation:codrift 31s ease-in-out infinite,coglow 9s ease-in-out infinite;animation-delay:-8s,-3s}
/* rideaux d'aurore, moitié droite seulement */
.co-hero .cur{position:absolute;top:-24%;height:150%;width:24%;filter:blur(30px);mix-blend-mode:screen;border-radius:46% 54% 48% 52%/60% 62% 40% 38%;transform-origin:50% 15%}
.co-hero .c1{left:52%;background:linear-gradient(180deg,transparent 6%,oklch(0.82 0.16 156 / .62) 44%,transparent 82%);animation:cosway 12s ease-in-out infinite}
.co-hero .c2{left:66%;background:linear-gradient(180deg,transparent 8%,oklch(0.78 0.14 182 / .55) 46%,transparent 84%);animation:cosway2 14s ease-in-out infinite;animation-delay:-3s}
.co-hero .c3{left:80%;width:20%;background:linear-gradient(180deg,transparent 6%,oklch(0.66 0.16 320 / .5) 46%,transparent 82%);animation:cosway 16s ease-in-out infinite;animation-delay:-7s}
.co-hero .st{position:absolute;width:2px;height:2px;border-radius:50%;background:oklch(0.96 0.02 90);box-shadow:0 0 4px oklch(0.96 0.02 90 / .7);animation:cotwinkle 6s ease-in-out infinite}
.co-wrap{max-width:1000px;margin:0 auto;padding:clamp(4rem,10vw,7.5rem) clamp(1.2rem,4vw,2.5rem) clamp(3.5rem,7vw,5.5rem)}
.co-kicker{font-family:var(--grotesk);font-weight:600;font-size:.9rem;color:var(--sauge);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.4rem}
.co-kicker::before{content:"";width:26px;height:1.5px;background:var(--sauge);display:inline-block}
.co-hero h1{font-family:var(--grotesk);font-weight:800;font-size:var(--step-4);line-height:1.02;letter-spacing:-.04em;max-width:16ch;text-wrap:balance;color:var(--on-dark);text-shadow:0 1px 3px oklch(0.15 0.03 200 / .82),0 2px 26px oklch(0.16 0.03 200 / .6)}
/* halo sombre serré : lisibilité au-dessus des rideaux d'aurore, surtout en mobile empilé (C5) */
.co-hero .lead{font-size:var(--step-1);line-height:1.45;color:var(--on-dark);max-width:58ch;margin-top:1.5rem;font-weight:400;text-shadow:0 0 2px oklch(0.15 0.03 200 / .72),0 1px 4px oklch(0.15 0.03 200 / .9),0 2px 24px oklch(0.16 0.03 200 / .58)}
.co-hero .lead b{color:var(--on-dark);font-weight:600}
.hero-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:2.3rem}
.co-hero .btn-a{background:var(--on-dark);color:var(--spruce-900)}
.co-hero .btn-a:hover{background:var(--bg)}
.co-hero .btn-b{color:var(--on-dark);border-color:oklch(0.6 0.03 178 / .55);background:oklch(0.5 0.03 178 / .1)}
.co-hero .btn-b:hover{border-color:var(--on-dark);background:oklch(0.5 0.03 178 / .24)}

/* Mobile : le hero remplissait tout le 1er écran → les 2 portes (la vraie
   décision) n'apparaissaient qu'à peine. On rogne le hero pour les remonter. */
@media(max-width:600px){
  .co-wrap{padding-top:2.4rem;padding-bottom:2.1rem}
  .co-hero h1{font-size:clamp(2.15rem,8.5vw,2.6rem)}
  .co-hero .lead{margin-top:1.1rem}
  .hero-row{margin-top:1.5rem}
  .doors{padding-top:2rem}
}

/* ---------- LES DEUX PORTES ---------- */
.doors{max-width:1150px;margin:0 auto;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.2rem,4vw,2.5rem) clamp(2rem,4vw,3rem);scroll-margin-top:5.5rem}
.doors-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,2.6vw,2rem)}
.door{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(1.7rem,3.4vw,2.7rem);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.door:hover{transform:translateY(-4px);box-shadow:0 24px 54px oklch(0.2 0.02 60 / .11)}
.door .top{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.door .ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;flex-shrink:0}
.door .ico svg{width:27px;height:27px;stroke-width:1.9}
.door .tag{font-family:var(--grotesk);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;padding:.32rem .7rem;border-radius:100px}
.door h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-2);letter-spacing:-.03em;line-height:1.04}
.door h2 a{color:var(--ink);text-decoration:none;transition:opacity .2s}
.door h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.door .promise{font-family:var(--grotesk);font-weight:600;font-size:1.24rem;line-height:1.3;color:var(--ink);margin-top:.9rem;text-wrap:balance}
.door .body{font-size:var(--step-0);line-height:1.6;color:var(--ink-body);margin-top:.85rem}
.door ul{list-style:none;margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem}
.door li{font-family:var(--grotesk);font-weight:600;font-size:var(--step-0);line-height:1.3;color:var(--ink);display:flex;align-items:baseline;gap:.6rem}
.door li .mk{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative;top:.4em}
.door .grant{font-size:var(--step-0);color:var(--ink-body);margin-top:1.3rem;line-height:1.55}
.door .go{margin-top:auto;padding-top:1.9rem}
.door .go a{font-family:var(--grotesk);font-weight:800;font-size:1.12rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.3rem;border-radius:10px;border:1.6px solid;transition:background .2s var(--ease),color .2s var(--ease),gap .2s var(--ease)}
.door .go a .arr{transition:transform .2s var(--ease)}
.door .go a:hover{gap:.7rem}
.door .go a:hover .arr{transform:translateX(3px)}

/* Se former — accent vert forêt (croissance, pédagogie) */
.door.former{background:oklch(0.965 0.014 156);border-color:oklch(0.85 0.03 156)}
.door.former .ico{background:var(--vert);color:var(--on-dark)}
.door.former .tag{background:oklch(0.46 0.11 155 / .15);color:var(--vert)}
.door.former h2 a{color:var(--vert)}
.door.former li .mk{background:var(--vert)}
.door.former .go a{color:var(--vert);border-color:var(--vert)}
.door.former .go a:hover{background:var(--vert);color:var(--on-dark)}
.door.former:hover{border-color:var(--vert)}

/* Déléguer — accent bourgogne (action, construction) */
.door.deleg{background:oklch(0.965 0.014 26);border-color:oklch(0.86 0.03 28)}
.door.deleg .ico{background:var(--bourgogne);color:var(--on-dark)}
.door.deleg .tag{background:oklch(0.5 0.18 28 / .15);color:var(--bourgogne)}
.door.deleg h2 a{color:var(--bourgogne)}
.door.deleg li .mk{background:var(--bourgogne)}
.door.deleg .go a{color:var(--bourgogne);border-color:var(--bourgogne)}
.door.deleg .go a:hover{background:var(--bourgogne);color:var(--on-dark)}
.door.deleg:hover{border-color:var(--bourgogne)}

@media(max-width:760px){
  .doors-grid{grid-template-columns:1fr}
  .door ul{grid-template-columns:1fr}
}

/* ---------- LE PONT (thèse d'autonomie) ---------- */
.co-bridge{position:relative;overflow:hidden;isolation:isolate;background:var(--spruce-900);color:var(--on-dark);margin-top:clamp(2.5rem,5vw,4rem)}
.co-bridge .glowwrap{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.co-bridge .g{position:absolute;border-radius:50%;filter:blur(84px);mix-blend-mode:screen}
.co-bridge .bg1{width:56%;height:160%;left:-10%;top:-30%;background:radial-gradient(ellipse at center,oklch(0.7 0.12 168 / .4),transparent 72%);animation:codrift 26s ease-in-out infinite,coglow 9s ease-in-out infinite}
.co-bridge .bg2{width:50%;height:150%;right:-8%;bottom:-30%;background:radial-gradient(ellipse at center,oklch(0.62 0.14 300 / .3),transparent 74%);animation:codrift2 31s ease-in-out infinite,coglow 7s ease-in-out infinite;animation-delay:-4s,-2s}
.bridge-wrap{max-width:960px;margin:0 auto;padding:clamp(4rem,8vw,6.2rem) clamp(1.6rem,6vw,4rem);position:relative;z-index:1}
.co-bridge h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-2);letter-spacing:-.03em;color:var(--on-dark);text-wrap:balance;text-align:center}
.co-bridge p{font-size:calc(var(--step-0) + .04rem);line-height:1.8;color:var(--on-dark-soft);margin-top:1.6rem;max-width:66ch;margin-inline:auto;text-align:center}
.co-bridge p b{color:var(--on-dark);font-weight:600}

/* ---------- PREUVES nommées & chiffrées ---------- */
.proof{max-width:1000px;margin:0 auto;padding:clamp(3.5rem,7vw,5.2rem) clamp(1.2rem,4vw,2.5rem)}
.proof-head{max-width:44rem}
.proof-head h2{font-family:var(--grotesk);font-weight:800;font-size:clamp(1.6rem, 1.05rem + 2vw, 2.15rem);letter-spacing:-.03em;color:var(--ink);text-wrap:balance;line-height:1.08}
.proof-head p{font-size:var(--step-0);line-height:1.6;color:var(--ink-body);margin-top:1rem;max-width:56ch}
.proof-list{margin-top:2.4rem;border-top:1px solid var(--line-strong)}
.proof-item{display:grid;grid-template-columns:minmax(0,12rem) 1fr;gap:.5rem 2.2rem;align-items:baseline;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.proof-item .fig{font-family:var(--grotesk);font-weight:800;font-size:clamp(1.5rem, 1rem + 1.7vw, 1.95rem);letter-spacing:-.025em;color:var(--bourgogne);line-height:1.08;white-space:nowrap}
.proof-item .figsub{display:block;font-size:.5em;font-weight:700;letter-spacing:0;color:var(--ink-body);white-space:nowrap;margin-top:.15rem}
.proof-item .desc{font-size:var(--step-0);line-height:1.55;color:var(--ink)}
.proof-item .desc span{color:var(--ink-body)}
.proof-foot{margin-top:2rem}
.proof-foot a{font-family:var(--grotesk);font-weight:700;font-size:1.02rem;color:var(--bourgogne);text-decoration:none;display:inline-flex;align-items:center;gap:.45rem}
.proof-foot a .arr{transition:transform .2s var(--ease)}
.proof-foot a:hover .arr{transform:translateX(4px)}
@media(max-width:620px){
  .proof-item{grid-template-columns:1fr;gap:.35rem}
}

/* ---------- QUI EST ALEXANDRE ---------- */
.about-band{border-top:1px solid var(--line);background:var(--surface)}
.about-wrap{max-width:1040px;margin:0 auto;padding:clamp(3.8rem,7vw,5.6rem) clamp(1.5rem,5vw,3rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-portrait{width:184px;height:184px;border-radius:50%;object-fit:cover;object-position:center 30%;flex-shrink:0;border:4px solid var(--bg);box-shadow:0 16px 42px oklch(0.2 0.02 60 / .18);background:var(--spruce-800)}
.about-text h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-1);letter-spacing:-.02em;color:var(--ink)}
.about-text p{font-size:var(--step-0);line-height:1.72;color:var(--ink-body);margin-top:1rem;max-width:56ch}
.about-text p b{color:var(--ink);font-weight:600}
.about-text .lnk{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--grotesk);font-weight:700;font-size:1.02rem;color:var(--bourgogne);text-decoration:none;margin-top:1.5rem}
.about-text .lnk .arr{transition:transform .2s var(--ease)}
.about-text .lnk:hover .arr{transform:translateX(4px)}
@media(max-width:600px){
  .about-wrap{grid-template-columns:1fr;gap:1.8rem;text-align:left}
  .about-portrait{width:132px;height:132px}
}

/* ---------- CTA final (bourgogne profond) ---------- */
.cta-final{background:var(--bourgogne-900);color:var(--on-dark);position:relative;overflow:hidden}
.cta-final::after{content:"";position:absolute;right:-10%;top:-40%;width:50%;height:180%;background:radial-gradient(ellipse at center,oklch(0.55 0.16 30 / .5),transparent 68%);pointer-events:none}
.cta-wrap{max-width:1140px;margin:0 auto;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,5vw,3.5rem);position:relative;z-index:1;display:grid;grid-template-columns:1.5fr auto;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.cta-final h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-2);letter-spacing:-.03em;line-height:1.06;color:var(--on-dark);text-wrap:balance;max-width:34ch}
.cta-final p{font-size:var(--step-0);line-height:1.6;color:oklch(0.9 0.02 40);margin-top:1.1rem;max-width:52ch}
.cta-final .row{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;margin-top:0}
.cta-final .btn-light{font-family:var(--grotesk);font-weight:700;font-size:1.08rem;background:var(--bg);color:var(--ink);padding:1rem 1.8rem;border-radius:10px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.cta-final .btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 30px oklch(0.15 0.05 30 / .35)}
.cta-final .fine{font-family:var(--sans);font-size:.95rem;color:oklch(0.86 0.03 40)}
@media(max-width:720px){.cta-wrap{grid-template-columns:1fr;gap:1.7rem}}

/* ---------- motion ---------- */
@keyframes codrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(1.08)}}
@keyframes codrift2{0%,100%{transform:translate(0,0) scale(1.04)}50%{transform:translate(-5%,-3%) scale(.94)}}
@keyframes coglow{0%,100%{opacity:.42}50%{opacity:.78}}
@keyframes cosway{0%,100%{transform:translateX(-4%) skewX(-5deg) scaleY(.95);opacity:.3}50%{transform:translateX(5%) skewX(4deg) scaleY(1.08);opacity:.6}}
@keyframes cosway2{0%,100%{transform:translateX(4%) skewX(5deg) scaleY(1.06);opacity:.56}50%{transform:translateX(-5%) skewX(-4deg) scaleY(.92);opacity:.28}}
@keyframes cotwinkle{0%,100%{opacity:.14}50%{opacity:.82}}
@keyframes co-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.co-rise{animation:co-rise .8s var(--ease) both}
.co-rise.d1{animation-delay:.08s}.co-rise.d2{animation-delay:.16s}.co-rise.d3{animation-delay:.24s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{scroll-behavior:auto!important}
  .co-rise{animation:none}
  .co-hero .g,.co-hero .cur,.co-hero .st,.co-bridge .g{animation:none!important}
  .door,.door .go a,.proof-foot a .arr{transition:none!important}
}