/* ==========================================================
   joelvandal.ca — Accueil « Cahier d'informaticien »
   ========================================================== */
:root{
  --creme:#fefaf2; --papier:#fbf6ea; --beige:#f6ecdc; --beige-2:#fbf2e3;
  --encre:#3a2633; --encre-d:#5a4652; --encre-l:#6a5562; --prune:#4a1a2f;
  --violet:#5d4ac4; --violet-f:#3f2f99; --violet-p:#f1edff;
  --rose:#e2557f; --rose-f:#b93a63; --turquoise:#2a9fa0; --turquoise-f:#1d7f80;
  --soleil:#ffd54f; --bois:#a8733f;
  --f-titre:'Fraunces',Georgia,serif;
  --f-main:'Caveat','Segoe Print',cursive;
  --f-texte:'Nunito','Segoe UI',system-ui,sans-serif;
  --f-8bit:'VT323',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--f-texte);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--violet-f)}
a:hover{color:#2f2275}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* --- typographie --- */
.fr{font-family:var(--f-titre)}
.cv{font-family:var(--f-main)}
.vt{font-family:var(--f-8bit)}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--turquoise-f);margin:0}
.titre{font-family:var(--f-titre);font-weight:700;color:var(--prune);font-size:clamp(32px,4.2vw,44px);line-height:1.1;margin:12px 0 0}
.titre em{font-weight:500;color:var(--violet)}
.intro{color:var(--encre-d);margin:10px auto 0;max-width:600px}
.center{text-align:center}
.sec-head{margin-bottom:50px}

/* --- matières --- */
.paper{background-color:var(--papier);background-image:radial-gradient(rgba(58,38,51,.035) 1px,transparent 1.4px),radial-gradient(rgba(58,38,51,.03) 1px,transparent 1.4px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.torn{clip-path:polygon(0% 1.5%,6% .4%,12% 1.2%,19% 0%,26% 1%,33% .3%,41% 1.4%,48% .2%,56% 1.1%,63% .4%,71% 1.3%,78% .1%,86% 1%,93% .3%,100% 1.2%,99.6% 20%,100% 45%,99.5% 70%,100% 98.6%,94% 99.7%,87% 98.8%,80% 100%,72% 98.9%,64% 99.8%,57% 98.7%,49% 99.9%,41% 98.8%,34% 99.6%,26% 98.7%,18% 100%,11% 98.9%,5% 99.7%,0% 98.8%,.4% 70%,0% 45%,.5% 20%)}
.ombre{filter:drop-shadow(0 14px 18px rgba(58,38,51,.16))}
.tape{position:absolute;height:30px;width:130px;opacity:.85;z-index:2;pointer-events:none}
.tape-t{background:repeating-linear-gradient(135deg,#7fd0cf 0 7px,#a9e1e0 7px 14px)}
.tape-y{background:var(--soleil)}
.tape-p{background:radial-gradient(rgba(255,255,255,.85) 2.2px,transparent 2.8px) 0 0/12px 12px,#f78da7}
.tape-w{background:rgba(255,255,255,.65);width:76px;height:24px}
.polaroid{background:#fff;padding:14px 14px 0;box-shadow:0 18px 30px -12px rgba(58,38,51,.35),0 2px 4px rgba(58,38,51,.08);margin:0;position:relative}
.polaroid figcaption,.polaroid .legende{font-family:var(--f-main);font-size:23px;text-align:center;padding:12px 4px 16px;line-height:1.15}
.bois{background:repeating-linear-gradient(178deg,rgba(80,45,20,.07) 0 2px,transparent 2px 13px),linear-gradient(180deg,#c99862,var(--bois));box-shadow:0 -6px 0 #8f5f31}
.vague{position:absolute;left:0;width:100%;display:block;pointer-events:none}

/* --- boutons --- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 28px;border-radius:999px;font-family:var(--f-texte);font-weight:800;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:filter .2s,transform .2s}
.btn svg{flex:none}
.btn-p{background:linear-gradient(180deg,#5d4ac4,#3f2f99);color:#fff;box-shadow:0 6px 14px -6px rgba(63,47,153,.6)}
.btn-p:hover{color:#fff;filter:brightness(1.1);transform:translateY(-1px)}
.btn-s{background:var(--violet-p);color:var(--violet-f);box-shadow:inset 0 0 0 2px #b3a8ef}
.btn-s:hover{background:#e6e0ff}
.btn[disabled]{opacity:.7;cursor:default}
.hl{display:inline-block;background:linear-gradient(transparent 62%,var(--soleil) 62%,var(--soleil) 92%,transparent 92%);text-decoration:none;font-family:var(--f-main);font-weight:700;font-size:23px;color:var(--violet-f)}

/* --- animations --- */
.flotte{animation:flotte 5s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-10px) rotate(4deg)}}
.clignote{animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.flotte,.clignote{animation:none}html{scroll-behavior:auto}}

/* ==========================================================
   EN-TÊTE
   ========================================================== */
.entete{position:sticky;top:0;z-index:50}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.logo{text-decoration:none;color:var(--encre);display:flex;flex-direction:column;line-height:1}
.logo b{font-family:var(--f-main);font-size:46px;font-weight:700;color:var(--prune)}
.logo b span{color:var(--violet)}
.logo small{font-size:14px;letter-spacing:.32em;color:var(--turquoise-f);font-weight:700;margin-left:40px}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.menu a{font-family:var(--f-main);font-size:25px;font-weight:600;color:var(--encre);text-decoration:none;padding:6px 10px}
.menu a:hover{color:var(--violet)}
.menu a.actif{box-shadow:inset 0 -3px 0 var(--violet)}
.menu a.langue{font-size:20px;color:var(--encre-l)}
.menu a.zone{background:var(--turquoise-f);color:#fff;border-radius:999px;padding:4px 22px;min-height:44px;display:inline-flex;align-items:center}
.menu a.zone:hover{background:#156667}
.burger{display:none;background:none;border:2px solid var(--encre);border-radius:12px;width:48px;height:44px;cursor:pointer;color:var(--encre)}
.entete .vague{bottom:-24px;height:26px}

/* ==========================================================
   HÉROS
   ========================================================== */
.heros{position:relative;overflow:hidden;background:linear-gradient(180deg,#f4e9d6 0%,#efe0c6 70%)}
.heros::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(140,105,70,.18) 2px,transparent 2.6px) 0 0/28px 28px}
.heros .bois{position:absolute;left:0;right:0;bottom:0;height:150px}
.heros .wrap{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px;padding-top:72px;padding-bottom:60px;min-height:640px}
.carte-intro{flex:0 1 480px;min-width:0;position:relative;z-index:3}
.carte-intro .tape{left:70px;top:-14px;transform:rotate(-4deg)}
.carte-intro .papier{padding:56px 46px 46px}
.carte-intro h1{margin:22px 0 0;font-family:var(--f-titre);font-size:clamp(38px,5vw,50px);line-height:1.02;font-weight:700;color:var(--prune)}
.carte-intro h1 em{font-weight:500;color:var(--violet)}
.carte-intro p.desc{margin:24px 0 0;font-size:18px;line-height:1.75;color:var(--encre-d)}
.carte-intro .actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:30px}
.postit{position:absolute;right:-70px;bottom:-40px;width:150px;padding:26px 16px 18px;background:#fffdf6;transform:rotate(-7deg);box-shadow:0 12px 20px -10px rgba(58,38,51,.4)}
.postit .tape{width:70px;height:22px;left:40px;top:-10px;transform:rotate(3deg)}
.postit p{margin:0;font-family:var(--f-main);font-size:24px;line-height:1.15;text-align:center}
.coeur{color:var(--rose)}

.scene{flex:1 1 560px;min-width:0;position:relative;min-height:560px}
.scene .portrait{position:absolute;right:70px;top:-10px;width:280px;transform:rotate(4deg);z-index:1}
.scene .portrait .tape{width:96px;height:26px;left:92px;top:-12px;transform:rotate(-3deg)}
.scene .portrait img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.moi-pixel{position:absolute;left:30px;top:40px;z-index:2}
.bulle{position:relative;display:inline-block;background:#fff;border:2px solid var(--encre);border-radius:18px;padding:6px 16px;font-family:var(--f-main);font-size:22px;transform:rotate(-3deg);margin-bottom:12px}
.bulle::after{content:"";position:absolute;left:40px;bottom:-11px;width:18px;height:18px;background:#fff;border-right:2px solid var(--encre);border-bottom:2px solid var(--encre);transform:rotate(45deg)}
.pixels{display:grid;grid-template-columns:repeat(20,var(--px,7px));grid-auto-rows:var(--px,7px);margin-left:20px;filter:drop-shadow(3px 3px 0 #fff) drop-shadow(-3px -3px 0 #fff) drop-shadow(3px -3px 0 #fff) drop-shadow(-3px 3px 0 #fff) drop-shadow(0 8px 10px rgba(58,38,51,.25))}
.pixels i{display:block}
.coeur-px{position:absolute}
.scene .st-arduino{position:absolute;left:10px;bottom:120px;width:190px;transform:rotate(-10deg);z-index:2}
.scene .st-c64{position:absolute;left:130px;bottom:30px;width:470px;z-index:3}
.scene .st-rpi{position:absolute;right:-30px;bottom:60px;width:230px;transform:rotate(8deg);z-index:4}
.scene .note-c64{position:absolute;left:260px;bottom:4px;margin:0;font-family:var(--f-main);font-size:22px;color:#fff;z-index:4;transform:rotate(-2deg)}

/* ==========================================================
   LIENS RAPIDES
   ========================================================== */
.rapides{position:relative;background-color:var(--beige);padding:46px 0 40px}
.rapides .vague.haut{top:-2px;height:18px}
.rapides .vague.bas{bottom:-2px;height:18px}
.rapides ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,42%),1fr));gap:20px}
.rapides a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;text-align:center;padding:8px;color:var(--encre)}
.rapides .ico{width:76px;height:76px;display:grid;place-items:center;border-radius:22px;border:2.5px solid var(--encre);box-shadow:3px 4px 0 var(--encre);transition:transform .25s}
.rapides a:hover .ico{transform:rotate(0) translateY(-4px) !important}
.rapides .nom{font-family:var(--f-main);font-size:30px;font-weight:700;color:var(--rose-f);line-height:1;margin-top:6px}
.rapides .sous{font-size:14px;color:var(--encre-d)}

/* ==========================================================
   À PROPOS
   ========================================================== */
.apropos{padding:90px 0 80px}
.apropos .wrap{display:flex;flex-wrap:wrap;gap:60px;align-items:center}
.apropos .polaroid{flex:0 1 400px;min-width:0;transform:rotate(-3deg)}
.apropos .polaroid .tape{left:140px;top:-14px;transform:rotate(2deg)}
.ecran-basic{font-family:var(--f-8bit);background:#40318d;border:16px solid #7869c4;padding:18px;color:#a9a0f0;font-size:22px;line-height:1.15;aspect-ratio:1/.92;overflow:hidden}
.ecran-basic p{margin:0}
.ecran-basic .c{text-align:center}
.ecran-basic .b{color:#fff}
.apropos .texte{flex:1 1 460px;min-width:0;position:relative}
.apropos .texte .papier{padding:56px 52px 50px}
.apropos .texte p.corps{font-size:17.5px;line-height:1.85;margin:18px 0 0;color:var(--encre-d)}
.apropos .st-arduino{position:absolute;right:-40px;bottom:-40px;width:160px;transform:rotate(12deg)}

/* ==========================================================
   SERVICES
   ========================================================== */
.services{background:var(--beige);padding:80px 0 90px}
.grille-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.service{padding:14px 14px 26px;box-shadow:0 16px 26px -14px rgba(58,38,51,.35)}
.service:nth-child(1){transform:rotate(-1deg)}
.service:nth-child(2){transform:rotate(.8deg)}
.service:nth-child(3){transform:rotate(-.6deg)}
.service>img,.service .code{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.service .code{background:#1d1a2e;padding:22px;font-family:var(--f-8bit);font-size:21px;line-height:1.25;color:#d8d2ff;overflow:hidden}
.service .code p{margin:0}
.code .k{color:#f78da7}.code .s{color:#7fd0cf}.code .f{color:var(--soleil)}
.service .corps{padding:22px 10px 0}
.service h3{margin:6px 0 8px;font-family:var(--f-main);font-size:34px;font-weight:700;line-height:1.05}
.service p{margin:0;line-height:1.7;color:var(--encre-d)}
.service .hl{margin-top:12px}

/* ==========================================================
   PROJETS
   ========================================================== */
.projets{padding:90px 0 80px}
.projets .wrap{position:relative}
.projets .st-rpi{position:absolute;right:10px;top:-30px;width:170px;transform:rotate(-12deg)}
.grille-projets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px}
.projet{text-align:center}
.projet .polaroid{padding-bottom:14px}
.projet .visuel{aspect-ratio:1/.9;display:grid;place-items:center;overflow:hidden}
.projet .visuel img{display:block}
.projet .visuel span{font-family:var(--f-8bit);font-size:54px;color:#fff}
.projet h3{margin:18px 0 0;font-family:var(--f-main);font-size:30px;font-weight:700;line-height:1.1}
.projet>p{margin:4px 0 0;font-size:14px;color:var(--encre-l)}
.plus{text-align:center;margin-top:50px}

/* ==========================================================
   PARCOURS
   ========================================================== */
.parcours{background:var(--beige-2);padding:80px 0 90px}
/* Ligne du temps : un « câble » central, fiches en alternance gauche/droite */
.ligne-temps{list-style:none;margin:0 auto;padding:0;position:relative;max-width:1000px}
.ligne-temps::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:6px;margin-left:-3px;border-radius:6px;background:repeating-linear-gradient(180deg,var(--turquoise-f) 0 14px,#7fd0cf 14px 22px)}
.etape{position:relative;display:flex;align-items:center;margin:0 0 34px;min-height:120px}
.etape:last-child{margin-bottom:0}
.etape .annee{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);z-index:2;background:var(--prune);color:#fff;font-family:var(--f-8bit);font-size:30px;line-height:1;padding:8px 14px;border:3px solid var(--creme);box-shadow:3px 4px 0 rgba(58,38,51,.35);white-space:nowrap}
.etape .fiche{width:calc(50% - 74px);background:#fff;padding:12px 12px 20px;box-shadow:0 16px 26px -14px rgba(58,38,51,.4);transform:rotate(var(--rot,0deg));transition:transform .25s}
.etape .fiche:hover{transform:rotate(0) translateY(-3px)}
.etape.droite{justify-content:flex-end}
.etape .visuel{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.etape .visuel img{display:block;width:100%;height:100%;object-fit:cover}
.etape .visuel img.detoure{width:82%;height:auto;object-fit:contain}
.etape .ecran{font-family:var(--f-8bit);font-size:22px;line-height:1.15;padding:16px 20px;width:84%;height:78%;border:10px solid #c9c2b0;border-radius:10px;overflow:hidden}
.etape .ecran p{margin:0}
.ecran-dos{background:#111;color:#d6d6d6}
.ecran-linux{background:#0b0f0c;color:#7cff9b}
.etape h3{margin:14px 6px 2px;font-family:var(--f-main);font-size:29px;font-weight:700;line-height:1.05}
.etape p{margin:0 6px;font-size:15.5px;line-height:1.6;color:var(--encre-d)}
.etape .ecran p{margin:0;font-size:22px;line-height:1.15;color:inherit}

/* ==========================================================
   TÉMOIGNAGES
   ========================================================== */
.temoignages{background:var(--beige);padding:80px 0 90px}
.mot{margin:0;padding:36px 30px 26px;box-shadow:0 14px 22px -14px rgba(58,38,51,.4);position:relative}
.mot .tape{left:42%;top:-10px}
.mot:nth-child(1){background:#fff3b0;transform:rotate(-1.5deg)}
.mot:nth-child(2){background:#fbd3df;transform:rotate(1deg)}
.mot:nth-child(3){background:#cdeceb;transform:rotate(-.6deg)}
.mot blockquote{margin:0;font-family:var(--f-main);font-size:25px;line-height:1.25}
.mot figcaption{margin-top:14px;font-weight:800;font-size:14px}
.mot figcaption span{display:block;font-weight:600;color:var(--encre-l);letter-spacing:.05em}

/* ==========================================================
   COULISSES (GitHub / LinkedIn)
   ========================================================== */
.coulisses{padding:90px 0 40px}
.coulisses .cartes{display:flex;flex-wrap:wrap;justify-content:center;gap:44px}
.coulisses a.polaroid{width:340px;max-width:100%;text-decoration:none;color:var(--encre);transition:transform .25s}
.coulisses a.polaroid:nth-child(1){transform:rotate(-2deg)}
.coulisses a.polaroid:nth-child(2){transform:rotate(1.8deg)}
.coulisses a.polaroid:hover{transform:rotate(0) translateY(-4px)}
.coulisses .cadre{aspect-ratio:1/.85;background:#f4ecdf;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.coulisses .cadre b{font-size:17px}
.coulisses .cadre span{font-size:15px;color:var(--encre-l)}

/* ==========================================================
   CONTACT + ÉTABLI
   ========================================================== */
.contact{position:relative;padding:70px 0 0;overflow:hidden}
.contact .wrap{position:relative;z-index:2;display:flex;justify-content:center}
.contact .feuille{position:relative;width:640px;max-width:100%}
.contact .tape-p{left:-24px;top:6px;transform:rotate(-30deg)}
.contact .tape-y{right:-24px;top:6px;transform:rotate(28deg)}
.contact form{background-color:#fffdf7;background-image:linear-gradient(90deg,transparent 64px,#f3a7b8 64px,#f3a7b8 66px,transparent 66px),repeating-linear-gradient(#fffdf7 0 33px,#bfe0f2 33px 34px);padding:46px 40px 40px 92px;display:flex;flex-direction:column;gap:14px}
.contact h2{margin:0;font-family:var(--f-main);font-size:42px;font-weight:700;line-height:1.05}
.contact h2 span{color:var(--rose-f)}
.contact p{margin:0;color:var(--encre-d);line-height:1.7}
.contact .ligne{display:flex;flex-wrap:wrap;gap:14px}
.contact label{flex:1 1 200px;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
.contact input,.contact textarea{font:inherit;font-weight:400;font-size:16px;border:1.5px solid #e7d3ae;background:#fff;color:var(--encre)}
.contact input{min-height:46px;border-radius:999px;padding:0 18px}
.contact textarea{border-radius:18px;padding:12px 18px;resize:vertical}
.contact input:focus,.contact textarea:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px rgba(93,74,196,.2)}
.contact .pot{position:absolute;left:-9999px}
.contact .btn{align-self:flex-start}
.contact .etat{font-family:var(--f-main);font-size:24px;font-weight:600;min-height:1em}
.contact .etat.ok{color:var(--turquoise-f)}
.contact .etat.err{color:var(--rose-f)}
.contact .direct{font-size:15px}
.etabli{position:relative;height:300px;margin-top:-40px}
.etabli .bois{position:absolute;left:0;right:0;bottom:0;height:120px}
.etabli img{position:absolute}
.etabli .st-c64{left:3%;bottom:40px;width:420px;max-width:45%;transform:rotate(-4deg)}
.etabli .st-arduino{left:40%;bottom:60px;width:170px;max-width:22%;transform:rotate(9deg)}
.etabli .st-rpi{right:4%;bottom:40px;width:330px;max-width:36%;transform:rotate(-6deg)}

/* ==========================================================
   PIED DE PAGE
   ========================================================== */
.pied{position:relative;background:var(--turquoise-f);color:#e8f6f5;padding:50px 0 30px}
.pied .vague{top:-18px;height:20px}
.pied .haut{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.pied .marque{flex:1 1 260px;min-width:0}
.pied .marque b{font-family:var(--f-main);font-size:44px;font-weight:700;color:#fff;line-height:1}
.pied .marque b span{color:var(--soleil)}
.pied .marque p{margin:10px 0 0;line-height:1.6;max-width:300px}
.pied nav{flex:2 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}
.pied h2{margin:0 0 8px;font-family:var(--f-main);font-size:28px;color:var(--soleil);font-weight:600}
.pied ul{list-style:none;margin:0;padding:0;line-height:2}
.pied a{color:#e8f6f5;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .bas{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#cdeceb}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1100px){
  .postit{right:-20px;bottom:-50px}
}
@media (max-width:900px){
  .burger{display:inline-grid;place-items:center}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);flex-direction:column;align-items:stretch;padding:12px 24px 24px;box-shadow:0 16px 24px -16px rgba(58,38,51,.4)}
  .entete.ouvert .menu{display:flex}
  .menu a{padding:10px 4px}
  .menu a.zone{justify-content:center;margin-top:8px}
  .heros .wrap{padding-top:48px}
  .scene{min-height:460px}
  .scene .portrait{right:10px;width:220px}
  .scene .st-c64{left:16%;width:68%}
  .scene .st-rpi{right:0;width:34%}
  .scene .st-arduino{width:26%;bottom:150px}
  .scene .note-c64{left:30%}
  .apropos .st-arduino{right:-10px;width:120px}
  .ligne-temps::before{left:18px}
  .etape,.etape.droite{justify-content:flex-end;flex-direction:column;align-items:stretch;padding-left:44px}
  .etape .annee{position:relative;left:auto;top:auto;transform:rotate(-3deg);align-self:flex-start;margin:0 0 -8px -34px;font-size:26px}
  .etape .fiche{width:100%}
}
@media (max-width:600px){
  body{font-size:16px}
  .logo b{font-size:38px}
  .logo small{margin-left:30px}
  .carte-intro .papier{padding:48px 26px 36px}
  .postit{display:none}
  .moi-pixel{--px:5px;left:0;top:0}
  .scene{min-height:380px}
  .scene .portrait{width:180px}
  .apropos .texte .papier{padding:44px 26px 40px}
  .contact form{padding:40px 22px 30px 52px;background-image:linear-gradient(90deg,transparent 34px,#f3a7b8 34px,#f3a7b8 36px,transparent 36px),repeating-linear-gradient(#fffdf7 0 33px,#bfe0f2 33px 34px)}
  .etabli{height:200px}
  .projets .st-rpi{display:none}
  .scene .st-arduino{display:none}
  .rapides .nom{font-size:25px}
  .rapides .ico{width:64px;height:64px}
}


/* Ligne du temps : visuels dessinés (2019, 2025, 2026) */
.etape .lecteur,.etape .vehicule{width:88%;height:auto;display:block}
.carte-affaires{width:72%;aspect-ratio:1.75;background:#fffdf7;box-shadow:0 10px 18px -8px rgba(58,38,51,.45);transform:rotate(-4deg);padding:6% 8%;display:flex;flex-direction:column;justify-content:center;gap:2px;position:relative;border-top:6px solid var(--turquoise-f)}
.carte-affaires b{font-family:var(--f-main);font-size:clamp(24px,3vw,34px);color:var(--prune);line-height:1}
.carte-affaires b span{color:var(--violet)}
.carte-affaires small{font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap;color:var(--turquoise-f);text-transform:uppercase}
.carte-affaires i{font-style:normal;font-family:var(--f-8bit);font-size:18px;color:var(--encre-l);margin-top:8px}

.lien-etape{margin:8px 6px 0;font-size:21px}

/* Illustrations plates : contour blanc façon autocollant, comme l'ours de Laura */
.sticker{filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 12px 14px rgba(58,38,51,.28))}
.service>img.illus{object-fit:contain;padding:8% 6%}
.projet .visuel img{filter:drop-shadow(0 10px 12px rgba(58,38,51,.22))}
.etape .visuel img.detoure{filter:drop-shadow(0 10px 12px rgba(58,38,51,.22))}