/* AI Decision Radar : page commerciale. Tokens = VISUAL_SPEC_RADAR.md §2 (thème clair du site). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/jetbrainsmono.woff2') format('woff2')}

:root{
  --bg:#EBF0F6;--ink:#0E2033;--body:#33475B;--mut:#5C6E80;
  --steel-l:#2E6A98;--steel-l-hover:#245A86;--steel:#33597A;--rule:#D7E0EA;
  --cyan:#0E9DC4;--cyan-text:#0A7592;
  --band:#0E2033;--band-hi:#EBF0F6;--band-body:#B4C3D2;--band-mut:#8FA3B7;--band-rule:#2A3F55;--band-cyan:#0E9DC4;
  --band-steel:#8FB8D8;--white:#FFFFFF;--foot:#E3EAF2;--foot-rule:#D5DFE9;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --pad:72px;
}
@media (min-width:768px){:root{--pad:112px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--body);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
@media (min-width:768px){body{font-size:1.0625rem}}
img,svg{display:block;max-width:100%}
p,ul,ol,h1,h2,h3,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--steel-l);outline-offset:2px}
.band :focus-visible{outline-color:var(--band-cyan)}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
@media (min-width:768px){.wrap{padding-inline:40px}}
.grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px}
@media (min-width:1024px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}}

/* Typographie */
h1,h2{font-weight:700;color:var(--ink);text-wrap:balance}
h1{font-size:2.25rem;line-height:1.03;letter-spacing:-.022em}
h2{font-size:1.75rem;line-height:1.08;letter-spacing:-.018em}
@media (min-width:768px){
  h1{font-size:clamp(2.5rem,5vw,4.25rem)}
  h2{font-size:clamp(1.875rem,3.2vw,2.75rem)}
}
h3{font-weight:700;color:var(--ink);font-size:1.0625rem;line-height:1.3}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-weight:700;font-size:.6875rem;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-l)}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
@media (min-width:768px){.eyebrow{font-size:.75rem}}
.chapo{margin-top:24px;max-width:60ch;font-size:1.125rem;line-height:1.5}
@media (min-width:768px){.chapo{font-size:1.25rem}}
.num{font-family:var(--mono);font-weight:600;color:var(--cyan-text)}

/* Header */
.site-head{position:sticky;top:0;z-index:40;height:64px;background:rgba(235,240,246,.94);border-bottom:1px solid transparent}
.site-head.is-scrolled{border-bottom-color:var(--rule)}
.head-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:28px;height:28px;border-radius:50%}
.brand span{font-weight:700;font-size:.9375rem;line-height:1;letter-spacing:.24em;color:var(--ink)}
@media (min-width:768px){.brand img{width:32px;height:32px}}
.head-link{font-size:.9375rem;font-weight:600;color:var(--steel-l);text-decoration:none;padding:8px 0}
.head-link:hover{color:var(--steel-l-hover);text-decoration:underline;text-underline-offset:4px}

/* Bouton du site (.btn.p en clair) et adresse en clair */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--sans);letter-spacing:.02em;padding:13px 22px;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:background-color .12s ease-out}
.btn.p{background:var(--steel-l);color:var(--white)}
.btn.p:hover{background:var(--steel-l-hover)}
.act{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:32px}
.addr{font-weight:600;font-size:1.0625rem;color:var(--steel-l);text-decoration:underline;text-underline-offset:4px;text-align:center;overflow-wrap:anywhere}
.addr:hover{color:var(--steel-l-hover)}
@media (min-width:768px){
  .act{flex-direction:row;align-items:center;gap:24px}
  .btn{width:auto}
  .addr{text-align:left}
}

/* Hero */
.hero{position:relative;padding:48px 0 var(--pad);isolation:isolate}
.hero .grid{align-items:center;row-gap:48px}
.hero h1{max-width:14ch}
.mentions{display:flex;flex-wrap:wrap;margin-top:32px;font:400 .75rem/1.4 var(--mono);color:var(--mut)}
.mentions li{padding:2px 16px}
.mentions li:first-child{padding-left:0}
.mentions li+li{border-left:1px solid var(--rule)}
@media (max-width:479px){.mentions{flex-direction:column;gap:4px}.mentions li{padding:0}.mentions li+li{border-left:0}}
@media (min-width:768px){.mentions{font-size:.8125rem}.hero{padding-top:72px}}
@media (min-width:1024px){
  .hero-text{grid-column:1 / span 7}
  .hero-visual{grid-column:8 / span 5}
}
.hero-visual .rd{width:100%;max-width:440px;margin-inline:auto;overflow:visible}
@media (min-width:1280px){
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url('fond-nodes.webp') center top/cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,black 0,black calc(50% - 650px),transparent calc(50% - 570px),transparent calc(50% + 570px),black calc(50% + 650px),black 100%);
    mask-image:linear-gradient(90deg,black 0,black calc(50% - 650px),transparent calc(50% - 570px),transparent calc(50% + 570px),black calc(50% + 650px),black 100%)}
}

/* Sections */
.sec{padding:var(--pad) 0;border-top:1px solid var(--rule)}
.sec h2{max-width:20ch}
.sec .chapo{margin-bottom:0}
.sec p:not(.eyebrow):not(.chapo){max-width:68ch}

/* Radar : classes SVG partagées */
.rd{display:block;overflow:visible}
.rd-grid{fill:none;stroke:var(--rule);stroke-width:1}
.rd-area{fill:var(--cyan);fill-opacity:.28;stroke:var(--steel);stroke-width:2.25;stroke-linejoin:round}
.rd-dot{fill:var(--steel)}
.rd-ray{stroke:transparent;stroke-width:3;transition:stroke .12s ease-out}
.rd-pt{fill:transparent;transition:fill .12s ease-out}
.rd-lbl{font:700 19px var(--sans);fill:var(--ink);transition:fill .12s ease-out}
@media (max-width:479px){.rd-lbl{font-size:20px}}
.ax.is-active .rd-ray{stroke:var(--cyan)}
.ax.is-active .rd-pt{fill:var(--cyan)}
.ax.is-active .rd-lbl{fill:var(--cyan-text)}
.rd--dark .rd-grid{stroke:var(--band-rule)}
.rd--dark .rd-area{fill-opacity:.35;stroke:var(--band-steel)}
.rd--dark .rd-dot{fill:var(--band-steel)}
.rd--dark .rd-lbl{fill:var(--band-hi)}

/* 01 : critères */
.s01-grid{row-gap:0}
.s01-grid .s-visual{margin-top:40px}
.s01-grid .rd{width:100%;max-width:480px;margin-inline:auto}
.note{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px;text-align:center}
.note-nom{font-weight:700;font-size:.6875rem;letter-spacing:.18em;color:var(--steel-l);text-transform:uppercase}
.note-val{font:400 2rem/1.1 var(--mono);color:var(--mut)}
.note-val b{font-weight:600;color:var(--ink)}
.vals{margin-top:24px;font-size:.9375rem}
.vals summary{cursor:pointer;font-weight:600;color:var(--steel-l);padding:8px 0}
.vals table{width:100%;border-collapse:collapse;margin-top:8px}
.vals th,.vals td{padding:10px 8px 10px 0;border-top:1px solid var(--rule);text-align:left;vertical-align:top;font-size:.875rem;line-height:1.4}
.vals th{color:var(--ink);font-weight:700;width:30%}
.vals .num{text-align:right;color:var(--ink);white-space:nowrap;padding-right:0}
.crit-list{margin-top:40px}
.crit{display:block;width:100%;padding:20px 0;border-top:1px solid var(--rule);pointer-events:none}
.crit-list li:last-child .crit{border-bottom:1px solid var(--rule)}
.crit-nom{display:block;font-weight:700;color:var(--ink)}
.crit-q{display:block;margin-top:4px;max-width:60ch}
.regle{margin-top:32px;font-weight:600;color:var(--ink)}
@media (min-width:1024px){
  .s01-grid .s-head{grid-column:1 / span 6;grid-row:1}
  .s01-grid .crit-list{grid-column:1 / span 6;grid-row:2}
  .s01-grid .regle{grid-column:1 / span 6;grid-row:3}
  .s01-grid .s-visual{grid-column:8 / span 5;grid-row:1 / span 3;margin-top:0;align-self:start}
  .crit{pointer-events:auto;padding:18px 16px;margin-left:-16px;width:calc(100% + 32px);transition:background-color .12s ease-out}
  .crit:hover,.crit[aria-pressed="true"]{background:var(--foot)}
  .crit-list{margin-top:32px}
}

/* 02 : décisions */
.dec-list{margin-top:48px}
.dec{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;padding:20px 0;border-top:1px solid var(--rule)}
.dec:last-child{border-bottom:1px solid var(--rule)}
.dec .num{grid-row:1;font-size:.875rem;padding-top:4px}
.dec-mot{grid-column:2;font-weight:800;font-size:1rem;letter-spacing:.02em;color:var(--ink)}
.dec-txt{grid-column:2}
@media (min-width:768px){
  .dec{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:24px 0}
  .dec .num{grid-column:1;padding:0}
  .dec-mot{grid-column:2 / span 3;font-size:1.125rem}
  .dec-txt{grid-column:5 / span 7}
}

/* 03 : bande inversée */
.band{background:var(--band);color:var(--band-body);padding:var(--pad) 0;border-top:1px solid var(--band-rule);border-bottom:1px solid var(--band-rule)}
.band h2{color:var(--band-hi);max-width:20ch}
.band .eyebrow{color:var(--band-mut)}
.band .s-head p:not(.eyebrow){margin-top:24px;max-width:60ch}
.band .s-head h2+p{margin-top:24px}
.band .s-head p:nth-of-type(4){color:var(--band-hi);font-size:1.125rem}
.band .src{font:400 .75rem/1.5 var(--mono);color:var(--band-mut);margin-top:24px}
.band .s-head p.src{max-width:none}
.band .s-visual{margin-top:48px}
.band .rd{width:100%;max-width:480px;margin-inline:auto}
.extrait{margin-top:48px}
.extrait table{width:100%;border-collapse:collapse}
.extrait th,.extrait td{padding:14px 12px 14px 0;border-top:1px solid var(--band-rule);text-align:left;vertical-align:top;font-size:.9375rem;line-height:1.45}
.extrait tr:last-child th,.extrait tr:last-child td{border-bottom:1px solid var(--band-rule)}
.extrait th{color:var(--band-hi);font-weight:700}
.extrait td{color:var(--band-body)}
.extrait .num{font-family:var(--mono);font-weight:600;color:var(--band-hi);text-align:right;padding-right:0;white-space:nowrap}
@media (max-width:1023px){
  .extrait th{display:block;padding-bottom:0;border-bottom:0}
  .extrait tr:last-child th,.extrait tr:last-child td{border-bottom:0}
  .extrait table{border-bottom:1px solid var(--band-rule)}
  .extrait tr{display:grid;grid-template-columns:1fr auto;column-gap:16px}
  .extrait tr th{grid-column:1 / span 2}
  .extrait tr td:nth-child(2){grid-column:1;padding-top:4px;border-top:0}
  .extrait tr td.num{grid-column:2;padding-top:4px;border-top:0}
}
.dec-label{margin-top:40px;font-weight:700;font-size:.6875rem;letter-spacing:.18em;color:var(--band-mut)}
.dec-big{margin-top:8px;font-weight:800;font-size:2.25rem;line-height:1.05;letter-spacing:.02em;color:var(--band-hi);hyphens:none;overflow-wrap:normal;word-break:keep-all}
.dec-action{margin-top:16px;color:var(--band-body);font-size:1.0625rem}
@media (min-width:768px){.dec-big{font-size:clamp(2.5rem,5vw,3.5rem)}.dec-label{font-size:.75rem}}
@media (min-width:1024px){
  .band .s-head{grid-column:1 / span 6;grid-row:1}
  .band .s-visual{grid-column:8 / span 5;grid-row:1;margin-top:0;align-self:center}
  .extrait{grid-column:1 / -1;grid-row:2;margin-top:72px}
  .extrait th,.extrait td{padding:16px 16px 16px 0}
  .extrait th{width:24%}
  .extrait td.num{padding-right:0}
  .extrait table{max-width:760px}
}

/* 04 : livrables (liste à gauche, texte à droite) */
.s04-grid{row-gap:0}
.liv-list{margin-top:48px}
.liv-list li{align-content:start;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;padding:20px 0;border-top:1px solid var(--rule)}
.liv-list li:last-child{border-bottom:1px solid var(--rule)}
.liv-list .num{grid-row:1 / span 2;font-size:.875rem;padding-top:3px}
.liv-list b{grid-column:2;color:var(--ink)}
.liv-list span:last-child{grid-column:2}
.gains{margin-top:48px}
.gains li{padding:16px 0;border-top:1px solid var(--rule)}
.gains ul{margin-top:16px}
.gains .option{margin-top:24px;color:var(--mut)}
@media (min-width:1024px){
  .s04-grid .s-head{grid-column:8 / span 5;grid-row:1}
  .liv-list{grid-column:1 / span 6;grid-row:1 / span 2;margin-top:8px;align-self:start;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .gains{grid-column:8 / span 5;grid-row:2;margin-top:48px}
}

/* 05 : indépendance */
.eng-list{margin-top:48px}
.eng-list li{display:grid;grid-template-columns:32px 1fr;padding:20px 0;border-top:1px solid var(--rule)}
.eng-list li:last-child{border-bottom:1px solid var(--rule)}
.eng-list .num{padding-top:2px;font-size:.875rem}
.eng-list b{color:var(--ink)}
.road{display:grid;grid-template-columns:minmax(0,1fr);margin-top:64px}
.road>div{padding:32px 0}
.road>div+div{border-top:1px solid var(--rule)}
.road h3{font-size:.75rem;letter-spacing:.18em;color:var(--steel-l);margin-bottom:16px}
@media (min-width:768px){
  .road{grid-template-columns:1fr 1fr}
  .road>div{padding:0 40px 0 0}
  .road>div+div{border-top:0;border-left:1px solid var(--rule);padding:0 0 0 40px}
}

/* CTA */
.cta-in{display:flex;flex-direction:column;gap:48px}
.cta .chapo{margin-top:24px}
.cta-logo{width:96px;height:96px;border-radius:50%}
@media (min-width:768px){.cta-in{flex-direction:row;align-items:center;justify-content:space-between}}

/* Footer du site, thème clair */
.site-foot{background:var(--foot);border-top:1px solid var(--foot-rule);padding:40px 0 30px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px}
.site-foot .brand span{font-size:.8125rem;letter-spacing:.22em}
.site-foot .brand img{width:24px;height:24px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 20px}
.foot-links a,.ec-prefs{font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--body);text-decoration:none;padding:6px 0}
.foot-links a:hover,.ec-prefs:hover{color:var(--steel-l)}
.foot-line{margin-top:24px;font-size:.9375rem;color:var(--body)}
.foot-bar{margin-top:16px;padding-top:16px;border-top:1px solid var(--foot-rule);font:400 .75rem/1.5 var(--mono);color:var(--body)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important}
}
