/* Atelier Focale — identité « REC » (11/11/2026)
   Parti pris : le rouge du voyant d'enregistrement, des aplats francs, des traits épais, des minutages.
   Deux couleurs seulement : encre et rouge signal, sur papier crème. Images : uniquement celles de Rémi, traitées en bichromie. */
:root{--papier:#F4EFE4;--encre:#121212;--rouge:#2F80FF;--rouge-fonce:#1F5FD0;--gris:#4B4A46;--blanc:#FFFDF8}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font:400 17px/1.6 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--rouge)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.w{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,9.4vw,124px);font-weight:800;line-height:.92;letter-spacing:-.035em}
h2{font-size:clamp(32px,5.4vw,68px);font-weight:800;line-height:.98;letter-spacing:-.03em}
h3{font-size:23px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:60ch}
.hl{background:linear-gradient(transparent 58%,var(--rouge) 58%,var(--rouge) 92%,transparent 92%);font-style:normal;padding:0 .06em}
.mono,.sur,.num,th,.etq,nav a,.tc{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}

/* En-tête */
header.haut{position:sticky;top:0;z-index:20;background:var(--papier);border-bottom:3px solid var(--encre)}
.haut .w{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;min-height:66px;flex-wrap:wrap;padding-block:10px}
.marque{font:800 22px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:var(--encre);text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.marque::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--rouge);animation:rec 1.6s steps(1) infinite}
.marque span{font-weight:800}
@keyframes rec{50%{opacity:.25}}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;padding:8px 10px;border:2px solid transparent}
nav a:hover{border-color:var(--encre)}
nav a[aria-current=page]{background:var(--encre);color:var(--papier)}

/* Ouverture */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(44px,7vw,90px);position:relative}
.hero .w{position:relative}
.sur{font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:0 0 22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sur::before{content:"REC";background:var(--rouge);color:var(--encre);font-weight:700;padding:5px 8px 4px;letter-spacing:.08em}
.hero p.chapo{font-size:clamp(19px,2.3vw,25px);line-height:1.4;margin:28px 0 32px;max-width:36ch;font-weight:500}
.duo{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.duo{grid-template-columns:1.25fr .75fr}}
.objectif{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin-inline:auto;border-radius:50%;border:3px solid var(--encre);overflow:hidden;background:var(--rouge);box-shadow:0 0 0 12px var(--papier),0 0 0 15px var(--encre)}
.objectif img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;display:block}
.pastille{position:absolute;right:0;bottom:-8px;width:132px;height:132px;border-radius:50%;background:var(--encre);color:var(--papier);display:grid;place-content:center;text-align:center;font:700 13px/1.25 "JetBrains Mono",monospace;text-transform:uppercase;transform:rotate(-12deg);text-decoration:none;border:3px solid var(--encre)}
.pastille b{display:block;font:800 30px/1 "Bricolage Grotesque",sans-serif;color:var(--rouge);letter-spacing:-.02em;text-transform:none}
.pastille:hover{background:var(--rouge);color:var(--encre)}.pastille:hover b{color:var(--encre)}
.cadre-objectif{position:relative;max-width:440px;margin-inline:auto;padding:18px}

/* Boutons */
.btn{display:inline-block;background:var(--encre);color:var(--papier);text-decoration:none;font:700 16px/1 "Instrument Sans",sans-serif;padding:18px 26px;border:3px solid var(--encre);cursor:pointer;box-shadow:5px 5px 0 var(--rouge);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--rouge)}
.btn.ligne{background:var(--papier);color:var(--encre);box-shadow:5px 5px 0 var(--encre)}
.btn.ligne:hover{box-shadow:2px 2px 0 var(--encre)}
.actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* Bandeau défilant */
.defile{background:var(--encre);color:var(--papier);border-block:3px solid var(--encre);overflow:hidden;white-space:nowrap;padding:14px 0}
.defile div{display:inline-block;animation:defile 38s linear infinite;font:700 clamp(18px,2.4vw,26px)/1 "Bricolage Grotesque",sans-serif}
.defile span{margin:0 22px}.defile i{color:var(--rouge);font-style:normal}
@keyframes defile{to{transform:translateX(-50%)}}

/* Sections */
section{padding:clamp(52px,8vw,110px) 0;border-top:3px solid var(--encre)}
section.teinte{background:var(--rouge);color:var(--encre)}
section.teinte p{font-size:clamp(18px,2vw,22px);font-weight:500;max-width:48ch}
section.nuit{background:var(--encre);color:var(--papier)}
section.nuit a{color:var(--papier)}
.grille{display:grid;gap:22px;grid-template-columns:1fr;margin-top:38px}
@media(min-width:760px){.grille.c2{grid-template-columns:1fr 1fr}.grille.c3{grid-template-columns:repeat(3,1fr)}}
.carte{background:var(--blanc);border:3px solid var(--encre);padding:26px;box-shadow:7px 7px 0 var(--encre);position:relative}
.carte h3{margin-bottom:10px}.carte p:last-child{margin-bottom:0}
.grille.c3 .carte:nth-child(2){transform:translateY(14px)}
@media(max-width:759px){.grille.c3 .carte:nth-child(2){transform:none}}
.num{display:inline-block;background:var(--encre);color:var(--papier);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px 5px;margin-bottom:16px}
.num::before{content:"● ";color:var(--rouge)}
.prix{font:800 clamp(38px,4.6vw,54px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;margin:8px 0 8px}
.prix small{font:500 14px/1.2 "JetBrains Mono",monospace;letter-spacing:0;display:block;margin-top:6px;color:var(--gris)}
.carte.phare{background:var(--rouge);box-shadow:7px 7px 0 var(--encre)}
.carte.phare .prix small{color:var(--encre)}
.carte.phare a{text-decoration-color:var(--encre)}
.etq{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--encre);color:var(--papier);padding:6px 9px 5px;margin-bottom:14px}
ul.liste{list-style:none;padding:0;margin:14px 0 0}
ul.liste li{padding:10px 0 10px 26px;border-top:2px solid var(--encre);position:relative;font-weight:500}
ul.liste li::before{content:"";position:absolute;left:2px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--rouge);border:2px solid var(--encre)}
.carte.phare ul.liste li::before{background:var(--papier)}

/* Bande image : le territoire */
.territoire{position:relative;padding:0;background:var(--rouge);overflow:hidden;min-height:min(72vh,620px);display:grid;align-items:end}
.territoire img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25);mix-blend-mode:multiply}
.territoire .w{position:relative;padding-block:clamp(36px,6vw,72px);width:100%}
.territoire h2{color:var(--papier);font-size:clamp(40px,8vw,112px);text-shadow:0 2px 0 rgba(18,18,18,.25)}
.territoire p{background:var(--encre);color:var(--papier);display:inline-block;padding:10px 14px;margin:18px 0 0;font:500 14px/1.4 "JetBrains Mono",monospace;max-width:none}

/* Portrait */
.portrait{border:3px solid var(--encre);box-shadow:9px 9px 0 var(--rouge);max-width:380px;width:100%;display:block;margin-inline:auto;transform:rotate(1.5deg)}
.portrait img{display:block;width:100%;height:auto}
.legende{font:500 13px/1.4 "JetBrains Mono",monospace;margin-top:22px;text-align:center}

/* Tableau minuté */
table{width:100%;border-collapse:collapse;margin-top:28px;font-size:17px;border:3px solid var(--encre);background:var(--blanc)}
th,td{text-align:left;padding:15px 14px;border-bottom:2px solid var(--encre);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--encre);color:var(--papier)}
td.h{white-space:nowrap;font:700 15px/1.6 "JetBrains Mono",monospace;color:var(--encre);width:1%}
td.h::before{content:"● ";color:var(--rouge)}
.table-defile{overflow-x:auto}

/* Questions */
details{border-top:3px solid var(--encre);padding:18px 0}details:last-of-type{border-bottom:3px solid var(--encre)}
summary{cursor:pointer;font:700 clamp(18px,2.2vw,22px)/1.3 "Bricolage Grotesque",sans-serif;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:800 26px/1 "Bricolage Grotesque",sans-serif;color:var(--rouge)}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0}

/* Formulaire */
form{display:grid;gap:18px;max-width:580px;margin-top:32px}
label{font:700 14px/1.3 "Instrument Sans",sans-serif;display:grid;gap:8px}
input,textarea,select{font:500 16px/1.4 "Instrument Sans",sans-serif;padding:14px;border:3px solid var(--encre);border-radius:0;background:var(--blanc);color:var(--encre);width:100%}
.piege{position:absolute;left:-9999px}
.note{font-size:14px}
#merci{display:none;background:var(--rouge);border:3px solid var(--encre);padding:22px;max-width:580px;margin-top:28px;font-weight:600;box-shadow:7px 7px 0 var(--encre)}

/* Pied */
footer{background:var(--encre);color:var(--papier);padding:48px 0 30px;font-size:14px;border-top:3px solid var(--encre);overflow:hidden}
footer a{color:var(--papier)}
footer .w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.geant{font:800 clamp(56px,15.5vw,230px)/.82 "Bricolage Grotesque",sans-serif;letter-spacing:-.05em;white-space:nowrap;margin:34px 0 -0.08em;color:var(--rouge);text-align:center}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.defile div,.marque::before{animation:none}.btn{transition:none}}

/* Téléphone : menu sur une seule ligne qui défile, étiquette REC au-dessus du texte */
@media(max-width:759px){
.haut .w{gap:6px;padding-block:10px 0}
nav{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 40px);margin-inline:-20px;padding:0 20px 10px;scrollbar-width:none;gap:2px}
nav::-webkit-scrollbar{display:none}
nav a{white-space:nowrap;padding:7px 9px;font-size:12px}
.sur{font-size:12px;margin-bottom:16px}
.pastille{width:112px;height:112px;font-size:11px}.pastille b{font-size:25px}
.portrait{max-width:300px}
}

/* Sur fond encre : le bouton principal passe au rouge pour rester lisible */
section.nuit .btn{background:var(--rouge);color:var(--encre);border-color:var(--rouge);box-shadow:5px 5px 0 var(--papier)}
section.nuit .btn:hover{box-shadow:2px 2px 0 var(--papier)}
section.nuit .btn.ligne{background:var(--papier);border-color:var(--papier);box-shadow:5px 5px 0 var(--rouge)}
section.nuit .btn.ligne:hover{box-shadow:2px 2px 0 var(--rouge)}

/* ================= V3 : le site qui bouge (10/11/2026) ================= */
.barre{position:fixed;top:0;left:0;height:5px;width:100%;background:var(--rouge);transform-origin:0 50%;transform:scaleX(0);z-index:40;pointer-events:none}
.tc{font-size:12.5px;font-weight:700;background:var(--encre);color:var(--papier);padding:6px 9px 5px;display:none;font-variant-numeric:tabular-nums}
.tc::before{content:"● ";color:var(--rouge)}
@media(min-width:1100px){.tc{display:inline-block}}

/* Curseur (souris seulement) */
.curseur{position:fixed;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--papier);pointer-events:none;z-index:60;mix-blend-mode:difference;transition:width .2s,height .2s,margin .2s;display:none}
@media(hover:hover) and (pointer:fine){.js .curseur{display:block}}
.curseur.gros{width:88px;height:88px;margin:-44px 0 0 -44px}

/* Entrées */
@keyframes leve{from{transform:translateY(60px) rotate(1.5deg);opacity:0}to{transform:none;opacity:1}}
.js .hero h1{animation:leve .8s cubic-bezier(.2,.8,.2,1) both}
.js .hero .sur{animation:leve .6s cubic-bezier(.2,.8,.2,1) both}
.js .hero .chapo,.js .hero .actions{animation:leve .8s .15s cubic-bezier(.2,.8,.2,1) both}
.hl{background-repeat:no-repeat}
.js .hl{background-size:0 100%;transition:background-size .7s .35s cubic-bezier(.2,.8,.2,1)}
.js .hl.vu,.js .vu .hl{background-size:100% 100%}
.js .r{opacity:0;transform:translateY(46px)}
.js .r.vu{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .15s;transition-delay:var(--d,0s)}
.carte{transition:transform .15s,box-shadow .15s}
@media(hover:hover){.carte:hover{transform:translate(-4px,-4px) rotate(-.6deg)!important;box-shadow:12px 12px 0 var(--rouge);transition-delay:0s!important}.carte.phare:hover{box-shadow:12px 12px 0 var(--encre)}}

/* Ouverture : le viseur */
.hero.une{padding-bottom:clamp(60px,9vw,120px)}
.hero.une h1{font-size:clamp(50px,10.4vw,142px)}
.cadre-viseur{position:relative;max-width:440px;width:100%;margin-inline:auto;padding:0 14px 26px 0}
.viseur{position:relative;aspect-ratio:4/5;border:3px solid var(--encre);background:var(--rouge);box-shadow:12px 12px 0 var(--encre);transform:rotate(2deg);overflow:hidden}
.viseur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:0}
.viseur img.on{opacity:1}
.viseur .eclair{position:absolute;inset:0;background:var(--papier);opacity:0;pointer-events:none}
.viseur .eclair.go{animation:eclair .28s ease-out}
@keyframes eclair{0%{opacity:.85}100%{opacity:0}}
.hud{position:absolute;font:700 12px/1 "JetBrains Mono",monospace;background:var(--encre);color:var(--papier);padding:6px 8px 5px;text-transform:uppercase;letter-spacing:.04em;z-index:2;font-variant-numeric:tabular-nums}
.hud.a{top:12px;left:12px}.hud.a::before{content:"● ";color:var(--rouge);animation:rec 1.6s steps(1) infinite}
.hud.b{top:12px;right:12px}.hud.c{bottom:12px;left:12px;background:var(--papier);color:var(--encre)}.hud.d{bottom:12px;right:12px}
.mire{position:absolute;inset:26%;border:2px solid var(--papier);opacity:.55;z-index:1;pointer-events:none}
.mire::before,.mire::after{content:"";position:absolute;background:var(--papier)}
.mire::before{left:50%;top:38%;bottom:38%;width:2px}.mire::after{top:50%;left:38%;right:38%;height:2px}
.cadre-viseur .pastille{right:-6px;bottom:0;z-index:3;animation:balance 3.2s ease-in-out infinite}
@keyframes balance{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-4deg) scale(1.06)}}

/* Bandes croisées */
.croix{position:relative;height:clamp(150px,21vw,270px);overflow:hidden;background:var(--papier)}
.croix .defile{position:absolute;left:-10%;width:120%;top:50%;border:3px solid var(--encre)}
.croix .defile.un{transform:translateY(-50%) rotate(-3.2deg);z-index:2}
.croix .defile.deux{transform:translateY(-50%) rotate(2.6deg);background:var(--rouge);color:var(--encre)}
.croix .defile.deux div{animation-direction:reverse;animation-duration:30s}
.croix .defile.deux i{color:var(--papier)}

/* Les métiers : galerie qui défile */
section.metiers{padding:0;background:var(--encre);color:var(--papier)}
.metiers .tete{padding:clamp(52px,8vw,96px) 20px 30px}
.metiers .tete p{margin:16px 0 0;font:500 14px/1.5 "JetBrains Mono",monospace;color:var(--papier);opacity:.8}
.piste{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 60px;scrollbar-width:none}
.piste::-webkit-scrollbar{display:none}
.metier{flex:0 0 min(76vw,400px);scroll-snap-align:center;position:relative;aspect-ratio:4/5;border:3px solid var(--papier);background:var(--rouge);overflow:hidden;margin:0}
.metier:nth-child(even){background:var(--papier)}
.metier img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.metier:hover img{filter:none;mix-blend-mode:normal;transform:scale(1.06)}}
.metier figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--encre);color:var(--papier);padding:14px 16px 16px;border-top:3px solid var(--papier)}
.metier b{display:block;font:800 clamp(28px,3.4vw,44px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.metier figcaption span{display:block;margin-top:8px;font:500 13px/1.4 "JetBrains Mono",monospace}
.metier figcaption span::before{content:"● ";color:var(--rouge)}
.metier i{position:absolute;top:10px;right:10px;font:500 10.5px/1 "JetBrains Mono",monospace;font-style:normal;background:var(--encre);color:var(--papier);padding:5px 6px 4px;text-transform:uppercase;letter-spacing:.04em;z-index:2}
.metier .n{position:absolute;top:10px;left:10px;font:800 15px/1 "Bricolage Grotesque",sans-serif;background:var(--rouge);color:var(--encre);padding:6px 8px;z-index:2}
.metiers.epingle{height:var(--h)}
.metiers.epingle .colle{position:sticky;top:66px;height:calc(100vh - 66px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.metiers.epingle .tete{padding-top:0;padding-bottom:26px;width:100%}
.metiers.epingle .piste{overflow:visible;scroll-snap-type:none;will-change:transform;padding-bottom:0;padding-left:max(20px,calc((100vw - 1160px)/2 + 20px))}
.metiers.epingle .metier{flex:0 0 auto;height:min(56vh,540px)}

/* Bande géante liée au scroll */
.geant-defile{overflow:hidden;padding:22px 0 14px;border-top:3px solid var(--encre);background:var(--papier)}
.geant-defile div{font:800 clamp(64px,15vw,220px)/.95 "Bricolage Grotesque",sans-serif;white-space:nowrap;letter-spacing:-.04em;will-change:transform;color:var(--encre)}
.geant-defile b{color:var(--rouge)}
.territoire{border-top:3px solid var(--encre)}
.territoire img{will-change:transform}
@media(prefers-reduced-motion:reduce){.js .hero h1,.js .hero .sur,.js .hero .chapo,.js .hero .actions,.cadre-viseur .pastille,.hud.a::before{animation:none}.js .r{opacity:1;transform:none}.js .hl{background-size:100% 100%}.curseur{display:none!important}}

/* Tablette : les prix restent sur une ligne */
.prix{white-space:nowrap}.prix small{white-space:normal}
@media(min-width:760px) and (max-width:1020px){.grille.c3{gap:16px}.grille.c3 .carte{padding:20px 18px}.prix{font-size:clamp(28px,4.3vw,44px)}}

/* Le voyant REC reste rouge, quelle que soit la couleur du site */
:root{--rec:#FF3B1F}
.marque::before{background:var(--rec)}
.sur::before{background:var(--rec);color:var(--blanc)}
.hud.a::before,.tc::before{color:var(--rec)}

/* Page exemple : cartes de sujets */
.metiers .tete a{color:var(--papier)}
.grille.c3 .carte h3{font-size:20px}