/* Atelier WD — gabarit « Cockpit » (v2, 08/10/2026).
   Seuls le fin liseré vert et la barre de titre (calque/) viennent du site ; le vert n'existe ici que sur le bouton Atelier.
   Principe (recherche LOCA-273) : coque mate en plans, une seule source lumineuse identifiable (l'écran, dont le reflet
   rouge-chaud teinte la coque), ombres directionnelles venues du haut (contact + portée, deux au plus), aucun motif. */
@font-face{font-family:"CS Coque";src:url(polices/cs-coque-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"CS Coque";src:url(polices/cs-coque-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"CS Coque";src:url(polices/cs-coque-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"CS Coque";src:url(polices/cs-coque-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Coque Mono";src:url(polices/ubuntu-sans-mono-var.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --plan-2:#171a1e; --plan-3:#1f2328;
  --arete:#2c3238; --arete-haute:#3b434b;
  --texte:#cfd4d9; --doux:#8c949c; --titre:#eef1f3;
  --reflet:255,72,58;
  --vert:#5dffb0; --vert-sourd:#2fd58a;
  --contact:0 2px 5px #000000d9;
  --portee:0 22px 44px -22px #000000f2;
}

/* ── La coque : le fond est gardé, sans motif ── */
.coque{position:relative;display:flex;flex-direction:column;overflow:hidden!important;color:var(--texte);font:500 14px/1.45 "CS Coque",system-ui,sans-serif;
  background:radial-gradient(120% 70% at 50% -10%,#1d2126 0%,transparent 60%),linear-gradient(180deg,#0f1114,#08090b)}
.coque::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(140% 110% at 50% 45%,transparent 62%,#00000073 100%)}
.coque > *{position:relative;z-index:1}
.coque :where(button,textarea){font-family:inherit;color:inherit}

/* Panneaux : plans mats, arête haute éclairée, ombre de contact + portée */
.pont,.rampe-outils,.chat{background:var(--plan-2);border:1px solid var(--arete);border-top-color:var(--arete-haute);box-shadow:var(--contact),var(--portee)}

/* ── Le pont ── */
.pont{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 16px;margin:10px 10px 0;padding:8px 10px;border-radius:10px;z-index:10!important}
.pont-projet{display:flex;align-items:center;gap:8px;min-width:0}
.projet-nom b{color:var(--titre);font-weight:600;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.pont-choix{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.pont-etat{display:flex;align-items:center;padding:0 6px}
.voyant{width:8px;height:8px;border-radius:50%;background:#3a3f45}
.voyant.allume{background:#d9dee3;box-shadow:0 0 6px #ffffff66}
.voyant.travaille{animation:clignote 1s steps(2) infinite}
@keyframes clignote{50%{opacity:.25}}
.lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Commandes ── */
.m-bouton{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;min-height:32px;border:1px solid var(--arete);border-top-color:var(--arete-haute);border-radius:7px;cursor:pointer;text-decoration:none;color:var(--texte);
  background:var(--plan-3);box-shadow:0 1px 2px #000c;font-size:12.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.m-bouton:hover:not(:disabled){background:#262b31;color:var(--titre);border-color:#3f474f}
.m-bouton:active:not(:disabled){box-shadow:inset 0 1px 3px #000}
.m-bouton:disabled{opacity:.45;cursor:not-allowed}
.m-bouton[aria-pressed="true"]{background:#2a2f35;color:var(--titre);border-color:#6b737b}
.m-icone{padding:6px 10px;font-size:14px}
.m-choix{font-size:13px}
.m-etiq{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);border-right:1px solid #ffffff17;padding-right:6px}
.m-principal{background:#e9ecef;color:#0b0c0e;border-color:#ffffff;font-weight:700}
.m-principal:hover:not(:disabled){background:#ffffff;color:#000}
.m-bouton:focus-visible,.menu-liste button:focus-visible,.chat textarea:focus-visible,.vider:focus-visible{outline:2px solid #ffffff;outline-offset:2px;box-shadow:0 0 0 5px #000}

/* Menus déroulants */
.menu{position:relative}
.menu-liste{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:220px;padding:6px;display:flex;flex-direction:column;gap:2px;border-radius:8px;
  background:#15181b;border:1px solid var(--arete);border-top-color:var(--arete-haute);box-shadow:var(--contact),0 24px 48px -16px #000}
.menu-liste[hidden]{display:none}
.menu-large{min-width:280px;max-height:60vh;overflow:auto}
.menu-liste button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-radius:5px;color:var(--texte);font:500 13px "CS Coque",sans-serif}
.menu-liste button small{color:var(--doux);font-size:11px}
.menu-liste button:hover:not(:disabled){background:#ffffff0d;color:var(--titre)}
.menu-liste button.actif{background:#ffffff12;color:var(--titre)}
.menu-liste button:disabled{opacity:.4;cursor:default}
.menu-groupe{padding:8px 10px 3px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.menu-liste .fichier{padding-left:24px;font:12px "Coque Mono",monospace;color:var(--doux);cursor:default}

/* ── La rampe : seul le bouton Atelier porte du vert ── */
.rampe{display:flex;justify-content:center;padding:14px 10px 12px}
.faisceau{display:none}
.rampe-outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px;border-radius:12px}
.m-atelier{padding:7px 24px;letter-spacing:.2em;text-transform:uppercase;color:#eafff5;border-color:#2f8f66;background:#14261e;
  box-shadow:0 1px 2px #000c,0 0 0 1px #5dffb026,0 0 18px -4px #5dffb080;text-shadow:0 0 8px #5dffb066}
.m-atelier:hover:not(:disabled){background:#183025;border-color:var(--vert-sourd);color:#fff}
.m-atelier[aria-expanded="true"]{background:#1b3a2c;box-shadow:inset 0 1px 3px #000,0 0 0 1px #5dffb040,0 0 22px -4px #5dffb099}

/* ── La soute : l'écran est la source de lumière ── */
.soute{position:relative;flex:1;min-height:0;display:flex;gap:12px;padding:0 10px 10px}
.soute.chat-gauche{flex-direction:row-reverse}
.ecran{position:relative;flex:1 1 0;min-width:0;min-height:0;padding:6px;border-radius:12px;background:#050607;border:1px solid #000;
  box-shadow:0 0 0 1px var(--arete),var(--contact),0 0 70px -18px rgba(var(--reflet),.30)}
.soute::before{content:"";position:absolute;left:8%;right:8%;bottom:-40px;height:140px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 60% at 50% 0%,rgba(var(--reflet),.16),transparent 70%);filter:blur(6px)}
.soute > *{position:relative;z-index:1}
.ecran-vitre{position:relative;height:100%;overflow:auto;border-radius:8px;background:#000;box-shadow:inset 0 0 0 1px #ffffff10}
.lueur{position:absolute;right:4px;bottom:4px;width:30px;height:30px;cursor:default;background:radial-gradient(circle,#ffffff99 0 1px,#ffffff1a 2px,transparent 55%)}

/* Désignation : traits neutres */
.ecran-vitre.designe *:hover{outline:1px dashed #6b737b;outline-offset:2px;cursor:crosshair}
.ecran-vitre .marque{outline:2px solid #1d2024!important;outline-offset:2px;box-shadow:0 0 0 4px #ffffffcc}
.ecran-vitre .retouche{animation:retouche 1.2s ease 2}
@keyframes retouche{50%{background-color:#fff7d6}}

/* ── Le chat : un seul bouton principal ── */
.chat{width:min(360px,38%);display:flex;flex-direction:column;gap:10px;padding:12px;overflow:auto;border-radius:12px;
  box-shadow:var(--contact),var(--portee),-30px 0 60px -40px rgba(var(--reflet),.22)}
.soute.chat-gauche .chat{box-shadow:var(--contact),var(--portee),30px 0 60px -40px rgba(var(--reflet),.22)}
.chat[hidden]{display:none}
.chat-tete{display:flex;align-items:center;gap:8px}
.chat-tete b{flex:1;color:var(--titre);font-weight:600;font-size:14px;letter-spacing:.04em}
.badge-demo{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);border:1px solid var(--arete);border-radius:4px;padding:1px 6px}
.vider{all:unset;align-self:flex-end;cursor:pointer;font-size:11.5px;color:var(--doux);border-bottom:1px dotted #5a626a;margin-bottom:-6px}
.vider:hover{color:var(--titre)}
.vider[hidden]{display:none}
.elements{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.elements:empty{display:none}
.elements li{font:12px/1.4 "Coque Mono",monospace;background:#0d0f11;border:1px solid var(--arete);border-radius:6px;padding:5px 8px;color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.elements li em{color:var(--doux);font-style:normal}
.resume-config{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.resume-config span{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--arete);color:var(--doux)}
.chat textarea{resize:vertical;min-height:96px;padding:10px;border-radius:8px;background:#0d0f11;border:1px solid var(--arete);color:var(--titre);font:13.5px/1.5 "CS Coque",sans-serif;box-shadow:inset 0 2px 4px #000}
.chat textarea::placeholder{color:#6d757d}
.envoi{display:flex;align-items:center;justify-content:space-between;gap:10px}
.etat{margin:0;font-size:12px;color:var(--doux);min-height:1em}
.reponse pre{margin:0;white-space:pre-wrap;font:12.5px/1.5 "Coque Mono",monospace;background:#0d0f11;border:1px solid var(--arete);border-radius:8px;padding:10px;color:var(--texte)}

/* ── Secret « sas » ── */
.sas-marque{display:none}
.coque.sas .ecran{box-shadow:0 0 0 1px #7a2a2a,var(--contact),0 0 90px -10px rgba(var(--reflet),.6)}
.coque.sas::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(90% 70% at 50% 60%,rgba(var(--reflet),.10),transparent 70%);animation:sas 1.8s ease-in-out infinite}
.coque.sas .sas-marque{display:block;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;z-index:30;pointer-events:none;
  font:700 12px "CS Coque",sans-serif;letter-spacing:.5em;color:#ffb3ab;padding:6px 14px 6px 20px;border:1px solid #a63a33;border-radius:6px;background:#140707e6}
@keyframes sas{50%{opacity:.4}}
/* Secret « lumière de service » */
.coque.service .ecran::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:24%;z-index:5;pointer-events:none;border-radius:8px;
  background:linear-gradient(180deg,transparent,#ffffff26 50%,transparent);animation:balaye 2.2s linear 2}
@keyframes balaye{from{transform:translateY(-40%);opacity:0}15%{opacity:1}to{transform:translateY(320%);opacity:0}}

/* ── Petits écrans ── */
@media (max-width:820px){
  .pont{grid-template-columns:1fr}
  .pont-projet{flex-wrap:wrap}
  .projet-nom{flex-basis:100%}
  .pont-choix{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .pont-etat{display:none}
  .soute{flex-direction:column!important}
  .chat{width:auto;flex:0 0 auto;max-height:58%;order:2}
  .menu-liste{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-height:50vh;overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  .voyant.travaille,.coque.sas::after,.coque.service .ecran::after,.ecran-vitre .retouche{animation:none}
}

/* ── Le tatouage : le visage alien, incrusté uniquement dans les panneaux noirs ──
   Une seule image fixe (background-attachment: fixed) vue à travers chaque panneau : elle passe de l'un à l'autre
   comme si elle était gravée dans la coque. Le fond (ombres rouges) et la page affichée ne sont jamais touchés.
   Le voile de la couleur du panneau règle la présence du visage (plus le voile est opaque, plus il est discret). */
:root{--voile:rgba(23,26,30,.50);
  --tatouage:url(images/alien.webp) no-repeat fixed left -3vw top -32vh / auto 108vh,url(images/oeil-cosmique.webp) no-repeat fixed right -18vh top 42vh / 57vh 57vh,url(images/etoiles.webp) no-repeat fixed right 0 top 0 / auto 100vh}
.pont,.rampe-outils,.chat{background:linear-gradient(var(--voile),var(--voile)),var(--tatouage),var(--plan-2)}
.ecran{background:linear-gradient(rgba(5,6,7,.45),rgba(5,6,7,.45)),var(--tatouage),#050607}
/* chat à gauche : les deux images changent de côté */
.coque.chat-gauche{--tatouage:url(images/alien.webp) no-repeat fixed right -3vw top -32vh / auto 108vh,url(images/oeil-cosmique.webp) no-repeat fixed left -18vh top 42vh / 57vh 57vh,url(images/etoiles-gauche.webp) no-repeat fixed left 0 top 0 / auto 100vh}
/* les zones de lecture restent opaques : on voit ce qu'on fait */
.chat textarea,.elements li,.reponse pre,.menu-liste{background-color:#0d0f11}
@media (max-width:820px){
  .coque,.coque.chat-gauche{--tatouage:url(images/alien.webp) no-repeat left -30vw top 0 / auto 70vh,url(images/oeil-cosmique.webp) no-repeat right -20vw bottom 0 / 50vw 50vw}
}