/* Exploration S1 : styles autonomes, sans effet sur les pages publiques. */
@font-face{font-family:Barlow;src:url('assets/fonts/Barlow-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/BarlowCondensed-ExtraBold.woff') format('woff');font-weight:800;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-Regular.woff') format('woff');font-weight:400;font-display:swap}
/* Palette historique du site (styles.css) : rouge HM, ocre, ivoire et charbon.
   Les tons ivoire clair et papier viennent des jetons du collègue mobile (vesta-app). */
:root{--brand:#b72a1f;--accent:#d4a017;--paper:#efe6d2;--paper-soft:#f5eedd;--paper-light:#fbf7ec;--ink:#1a1a1a;--line:#b5ab8e;--line-soft:#d4c9ac;--mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.5 Barlow,Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;cursor:pointer;border-radius:0}
button:disabled{cursor:default}
button[hidden],[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
section:target{scroll-margin-top:24px}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,figure{margin:0}
p+p{margin-top:16px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95}
h2{font-size:clamp(44px,5vw,72px);text-transform:uppercase;letter-spacing:-.015em}
h3{font-size:32px;line-height:1.05}
.wrap{max-width:1600px;margin-inline:auto;padding-inline:48px}
/* Haut de page : le bandeau d'édition et l'en-tête forment une seule bande charbon,
   à toutes les largeurs. L'accueil ivoire commence sous le filet rouge. */
.edition{background:var(--ink);color:var(--paper);padding:9px 48px;display:flex;justify-content:space-between;gap:16px;font:11px/1.5 var(--mono);letter-spacing:.035em;text-transform:uppercase;border-bottom:1px solid rgb(239 230 210 / .2)}
.header-band{background:var(--ink);color:var(--paper)}
.header-band a:focus-visible{outline-color:var(--paper)}
.header{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:36px;border-bottom:1px solid var(--brand)}
.brand{display:block;flex-shrink:0;padding-block:16px}
.brand img{width:290px;height:auto}
.header nav{display:flex;gap:34px;align-items:center;font-size:16px}
.header nav a{text-decoration:none;padding:12px 0}
.header nav a:hover{text-decoration:underline}
.header .nav-cta{display:flex;align-items:center;gap:24px;border-bottom:2px solid var(--accent);color:var(--paper)}
/* Accueil ivoire et rouge, le même à toutes les largeurs : titre Barlow en casse naturelle,
   repères et liens rouges, ocre réservé aux petits accents. */
.hero{display:grid;grid-template-columns: .78fr 1.22fr;gap:44px;padding-top:46px;padding-bottom:56px;align-items:center}
.eyebrow{font:11px/1.6 var(--mono);letter-spacing:.035em;text-transform:uppercase}
.hero-copy .eyebrow{color:var(--brand);display:flex;gap:9px;align-items:center;white-space:nowrap}
.square{display:inline-block;width:8px;height:8px;flex-shrink:0;background:var(--accent)}
h1{font-family:Barlow,Arial,sans-serif;font-weight:400;color:var(--ink);font-size:clamp(56px,6vw,92px);line-height:1.04;letter-spacing:-.035em;margin:25px 0 24px}
h1 span{display:inline-block;position:relative;color:var(--brand)}
.intro{font-size:20px;line-height:1.45;max-width:385px;margin-bottom:28px}
/* Bouton de page : rouge plein, sans ombre dure. Le bouton du terminal garde le style de la chatbox. */
.button{min-height:52px;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:var(--brand);color:var(--paper);border:1px solid var(--brand);padding:12px 19px;text-decoration:none;font-size:17px;line-height:1.4;transition:background-color .15s,border-color .15s,transform .15s,box-shadow .15s}
.button:hover{background:var(--ink);border-color:var(--ink)}
.button span{font-size:24px;line-height:1}
.text-link{min-height:44px;display:inline-flex;align-items:center;gap:18px;padding:9px 0;background:none;border:0;border-bottom:1px solid currentColor;color:var(--brand);text-decoration:none;font-size:16px;line-height:1.4}
.hero-copy>.text-link{display:flex;width:max-content;margin-top:19px}
.text-link:hover{border-bottom-width:2px;padding-bottom:8px}
/* Illustration sur l'ivoire, cadre allégé : un filet charbon autour de l'image, légende Barlow. */
.hero-world{position:relative;align-self:center;color:var(--ink);margin-top:25px}
.world-heading{display:flex;justify-content:space-between;align-items:center;padding:17px 0;color:var(--brand);font:13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.025em}
.world-heading>span:last-child{font:32px/1 var(--mono)}
.world-image{border:1px solid var(--ink);overflow:hidden}
.world-image img{width:100%;height:auto}
.hero-world figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 0;font-size:22px;line-height:1.25}
.image-note{font:10px/1.6 var(--mono);text-align:right}
.chapter-strip{display:flex;justify-content:space-around;align-items:center;gap:20px;background:var(--brand);color:var(--paper);padding:20px 48px;font:800 30px/1.05 var(--display);text-transform:uppercase;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.strip-spark{display:block;flex:none;width:34px;height:34px;background:var(--accent);clip-path:polygon(46% 0,54% 0,54% 37%,79% 12%,85% 18%,61% 43%,100% 43%,100% 54%,62% 54%,87% 79%,80% 86%,55% 62%,55% 100%,45% 100%,45% 62%,19% 87%,12% 80%,37% 55%,0 55%,0 45%,37% 45%,12% 19%,19% 12%,46% 38%)}
.possibilities{display:grid;grid-template-columns: .8fr 1.2fr;gap:96px;padding-block:94px 90px}
.section-intro .eyebrow,.first-step .eyebrow{color:var(--brand);margin-bottom:23px}
.section-intro h2{color:var(--brand);margin-bottom:24px}
.section-intro>p:not(.eyebrow){max-width:335px}
.small-note{font:11px/1.65 var(--mono)}
.section-intro .small-note{margin-top:28px}
.possibility{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:26px 0 28px;border-top:1px solid var(--brand)}
.possibility:last-child{border-bottom:1px solid var(--brand)}
.number{color:var(--brand);font:12px/1.5 var(--mono);padding-top:4px}
.possibility h3{color:var(--brand);margin-bottom:10px}
.possibility p{font-size:18px;max-width:550px;line-height:1.45}
.possibility .text-link{margin-top:10px}
.role{background:var(--brand);color:var(--paper);padding-block:80px 86px;position:relative}
.role a:focus-visible,.role button:focus-visible{outline-color:var(--paper)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}
.role-heading .eyebrow{margin-bottom:26px}
.role-heading h2{font-size:clamp(64px,6.2vw,90px)}
.role-lead{font-size:24px;line-height:1.4;max-width:560px;margin-bottom:28px}
.role-step{border-top:1px solid var(--line);padding-top:19px;margin-top:24px}
.role-step .eyebrow{display:block;margin-bottom:10px}
.role-step h3{font-size:29px;margin-bottom:9px}
.role-step p{font-size:18px;line-height:1.45}
.orbit{display:block;position:relative;width:175px;height:90px;overflow:hidden;border-bottom:2px solid var(--paper);margin-top:36px}
.orbit:before{content:'';display:block;border:1px solid var(--paper);border-radius:50%;width:144px;height:144px;position:absolute;top:25px;left:15px}
.orbit:after{content:'';position:absolute;width:65px;height:65px;border-radius:50%;background:var(--accent);left:54px;top:35px}
.orbit i{position:absolute;display:block;width:18px;height:18px;border-radius:50%;background:var(--paper);right:0;top:8px}
.first-step{display:grid;grid-template-columns:1fr 1fr;gap:110px;padding-block:88px 76px}
.first-step h2{color:var(--brand);font-size:clamp(48px,5vw,72px)}
.coffee-copy>p{max-width:505px}
.coffee-copy .button{margin-block:23px}
.coffee-copy .small-note{margin-top:0}
.closing{display:flex;align-items:center;justify-content:space-between;color:var(--brand);padding-block:35px;border-bottom:1px solid var(--line)}
.closing p{font:800 clamp(30px,4vw,56px)/1 var(--display);text-transform:uppercase}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font:10px/1.7 var(--mono);padding-block:25px}
.pixel-flame{display:block;flex:none;width:18px;height:23px;background:var(--accent);clip-path:polygon(40% 0,60% 0,60% 20%,80% 20%,80% 40%,100% 40%,100% 80%,80% 80%,80% 100%,20% 100%,20% 80%,0 80%,0 40%,20% 40%,20% 20%,40% 20%)}
/* Terminal intégré au fil de la page, ouvert dès le chargement.
   Couleurs du collègue mobile (vesta-app) : cadre charbon, surface ivoire clair,
   barre rouge, cartes sur papier, boutons rouges à ombre dure. La bulle de l'utilisateur
   est charbon sur ivoire clair, le pendant du rouge dans la charte, pour ne pas se confondre
   avec le bouton d'action rouge placé sous la réponse. */
.terminal-section{background:var(--ink);padding-block:90px}
.terminal{max-width:800px;margin-inline:auto;color:var(--ink);border:2px solid var(--ink);background:var(--paper-soft);box-shadow:8px 8px 0 var(--brand)}
.terminal-bar{display:flex;align-items:center;gap:12px;background:var(--brand);color:var(--paper-soft);padding:12px 15px;border-bottom:2px solid var(--ink)}
.terminal-bar h2{flex:1;font:16px/1.4 var(--mono);letter-spacing:0}
.terminal-bar h2:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
.terminal-content{padding:22px 25px}
.terminal-disclosure{font:11px/1.65 var(--mono);padding-bottom:18px;border-bottom:1px solid var(--line)}
.intention-choice{margin:18px 0 24px;padding:0;border:0;min-width:0}
.intention-choice legend{font:13px/1.5 var(--mono);margin-bottom:12px}
.intention-choice>div{display:flex;flex-wrap:wrap;gap:8px}
.intention-choice button{background:var(--paper-soft);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);min-height:44px;padding:8px 12px;font-size:16px}
.intention-choice button[aria-pressed=true]{background:var(--brand);color:var(--paper-soft);border-color:var(--brand)}
.speaker{font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;margin:17px 0 8px}
.user-message{background:var(--ink);color:var(--paper);margin-left:38px;border:1px solid var(--ink);padding:14px 17px;font-size:20px;line-height:1.35}
.answer{background:var(--paper-light);border:1px solid var(--line-soft);border-left:3px solid var(--accent);padding:16px 18px;font-size:18px;line-height:1.4}
.answer .question{margin-top:12px;color:var(--brand)}
.refine{display:flex;align-items:center;gap:12px;min-height:52px;width:calc(100% - 20px);margin:18px 0 0 20px;background:var(--brand);color:var(--paper-soft);border:1px solid var(--brand);box-shadow:3px 3px 0 var(--ink);padding:12px 15px;text-align:left;font-size:17px;line-height:1.35}
.refine[aria-disabled=true]{box-shadow:none;background:var(--paper-soft);color:var(--ink);border-color:var(--ink);cursor:default}
.result{scroll-margin-top:88px;border-top:3px solid var(--brand);margin-top:24px;padding-top:3px;animation:arrive .2s ease-out}
.result h3{font-size:34px;color:var(--brand);margin-bottom:10px}
.result>p:not(.speaker){font-size:17px;line-height:1.4}
.result-artifact{padding:17px 20px;background:var(--paper-light);border:1px solid var(--line-soft);border-left:5px solid var(--accent);margin:18px 0}
.result-artifact ul{list-style:none;margin:12px 0 0;padding:0;font:14px/1.65 var(--mono)}
.result-artifact li{border-top:1px solid var(--line-soft);padding:8px 0}
.result .memory-note{font:11px/1.6 var(--mono)!important;border-left:2px solid var(--brand);padding-left:12px;margin-block:18px}
.result .button{color:var(--paper-soft);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.result .button:hover{background:var(--brand);border-color:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.result .text-link{display:flex;width:max-content;margin-top:15px}
.terminal-bottom{display:flex;gap:13px;font:10px/1.7 var(--mono);padding-top:20px;margin-top:24px;border-top:1px solid var(--line)}
.terminal-bottom>span{font-size:18px;color:var(--brand)}
/* Review S1 : titres noirs, accents rouge et ocre conservés. */
.section-intro h2,.possibility h3,.first-step h2{color:var(--ink)}
/* Review web : cadence des fonds, la même à toutes les largeurs.
   Charbon (édition et en-tête) · ivoire (accueil) · rouge (bandeau) · ivoire (possibilités) · charbon (terminal) · rouge (rôle) · ivoire (café) · charbon (clôture et pied). */
.role{background:var(--brand);color:var(--paper-soft)}
.role-step{border-top-color:rgb(245 238 221 / .45)}
.closing-band,.footer-band{background:var(--ink);color:var(--paper)}
.closing{color:var(--paper);border-bottom-color:rgb(239 230 210 / .3)}
.footer{padding-bottom:40px}
.footer-band a:focus-visible{outline-color:var(--paper)}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed;z-index:50;top:12px;left:12px;padding:15px;background:var(--paper);color:var(--ink)}
@keyframes arrive{from{transform:translateY(5px)}to{transform:translateY(0)}}
@media(min-width:1600px){.hero{gap:64px}.hero-world{margin-top:0}}
@media(max-width:1100px){.wrap{padding-inline:30px}.edition{padding-inline:30px}.header nav{gap:20px}.brand img{width:250px}.hero{gap:28px;grid-template-columns:.85fr 1.15fr}.hero-copy .eyebrow{font-size:9px;white-space:normal}.hero h1{font-size:clamp(50px,7.6vw,80px)}.hero-world figcaption{font-size:20px;padding-top:18px}.image-note{display:none}.world-heading{padding:14px 0;font-size:11px}.intro{font-size:18px}.possibilities{gap:52px}.role-grid,.first-step{gap:64px}.chapter-strip{font-size:25px;padding-inline:30px}}
@media(max-width:760px){.wrap{padding-inline:20px}.edition{padding:8px 20px;font-size:9px}.edition>span:first-child{display:none}.edition{justify-content:center}.header{min-height:90px;gap:16px}.brand img{width:220px}.header nav>a:not(.nav-cta){display:none}.header .nav-cta{font-size:14px;gap:8px;padding-block:8px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding-top:29px;padding-bottom:44px}.hero-copy .eyebrow{font-size:10px}.hero h1{font-size:clamp(44px,11vw,72px);margin:22px 0}.hero h1 br:nth-child(2){display:none}.intro{font-size:19px;max-width:520px;margin-bottom:23px}.hero-copy>.text-link{display:flex;width:max-content;margin-top:15px}.hero-world{margin-top:0}.world-heading{padding:12px 0}.world-heading>span:last-child{font-size:24px}.hero-world figcaption{font-size:22px;padding-top:16px}.image-note{display:block;font-size:9px}.chapter-strip{padding:17px 20px;gap:13px;font-size:21px}.strip-spark{font-size:28px}.chapter-strip>.strip-spark:last-child{display:none}.possibilities{display:block;padding-block:54px}.section-intro h2{font-size:56px}.section-intro>p:not(.eyebrow){max-width:500px}.section-intro .small-note{margin-top:17px}.possibility-list{margin-top:30px}.possibility{grid-template-columns:28px 1fr;gap:12px}.possibility h3{font-size:30px}.role{padding-block:54px}.role-grid{grid-template-columns:1fr;gap:30px}.role-heading h2{font-size:64px}.role-heading{position:relative}.orbit{position:absolute;right:0;bottom:0;width:110px;height:76px}.orbit:before{width:95px;height:95px;left:8px}.orbit:after{width:45px;height:45px;left:35px;top:39px}.orbit i{width:14px;height:14px}.role-lead{font-size:22px}.first-step{grid-template-columns:1fr;gap:26px;padding-block:54px}.first-step h2{font-size:56px}.closing{padding-block:28px}.closing p{font-size:36px}.closing img{width:58px}.footer{gap:12px}.terminal-section{padding-block:54px}.footer>span{width:100%}}
@media(max-width:420px){.wrap{padding-inline:16px}.header{min-height:82px}.brand img{width:185px}.header .nav-cta{font-size:12px;max-width:92px}.header .nav-cta span{display:none}.hero-copy .eyebrow{font-size:9px}.world-image{aspect-ratio:1.22}.world-image img{height:100%;width:100%;object-fit:cover;object-position:66% center}.image-note{display:none}.chapter-strip{font-size:19px;padding:17px 16px;gap:12px}.section-intro h2,.first-step h2{font-size:50px}.role-heading h2{font-size:59px}.role-heading .eyebrow{font-size:10px}.closing p{font-size:31px}.closing img{width:49px}.orbit{width:95px;right:0}.orbit:after{left:25px}.orbit:before{left:0}.terminal-content{padding:16px}.terminal-bar{padding:8px 10px;gap:8px}.terminal-bar h2{font-size:14px}.terminal-bar .pixel-flame{width:14px;height:19px}.terminal{box-shadow:5px 5px 0 var(--brand)}.user-message{margin-left:16px;font-size:18px}.refine{margin-left:10px;width:calc(100% - 10px)}.intention-choice button{font-size:14px;padding-inline:9px}.result-artifact{padding:14px}.result .button{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.button,.refine,.intention-choice button{box-shadow:none;border:2px solid ButtonText}.intention-choice button[aria-pressed=true]{outline:3px solid Highlight}.square,.pixel-flame{background:ButtonText}}
/* Ajustements du premier contrôle visuel : signature. */
@media(max-width:760px){.brand img{width:174px}.header{min-height:106px}.strip-spark{width:26px;height:26px}}
@media(max-width:420px){.brand img{width:155px}.header{min-height:95px}}
/* Review uniformisation : l'accueil ivoire et rouge validé sur téléphone devient la règle
   à toutes les largeurs (voir les règles de base h1, .button, .hero-world) ; l'en-tête
   passe sur charbon pour se détacher de l'accueil. Aucune règle mobile distincte ne subsiste. */

@media(max-width:360px){.orbit{position:relative;margin-top:24px}}
/* Review image mobile : sur téléphone, l'illustration entre dans le premier écran, entre le titre
   et l'introduction, comme sur bureau où titre et image partagent l'écran. Le bloc de texte se
   dissout (display:contents) pour intercaler la figure ; l'ordre du DOM et la tabulation ne changent pas.
   La légende prend une taille de légende pour ne pas se confondre avec l'introduction qui la suit. */
@media(max-width:760px){.hero{gap:0}.hero-copy{display:contents}.hero-copy .eyebrow{order:1}.hero h1{order:2}.hero-world{order:3}.intro{order:4;margin-top:26px}.hero-copy>.button{order:5;align-self:flex-start}.hero-copy>.text-link{order:6}.hero-world figcaption{font-size:17px;line-height:1.3;padding-top:14px}}