/* Inceptioncode — L'Enquête. S'appuie sur les couleurs, polices et boutons de os.css. */

body.enquete { min-height: 100vh; display: flex; flex-direction: column; }
.enquete main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter) 80px; overflow-x: clip; }
.honeypot { position: absolute; left: -9999px; }

/* EN-TÊTE : logo, nom de la page, les huit actes */
.e-tete { display: flex; align-items: center; gap: 20px; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: rgba(5,5,8,.9); backdrop-filter: blur(14px); }
.e-titre { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); padding-left: 20px; border-left: 1px solid var(--line-strong); }
.e-actes { display: none; margin-left: auto; gap: 6px; }
.ouvert .e-actes { display: flex; }
.e-actes li { width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; border: 1px solid var(--line-strong); color: var(--text-ghost); transition: background .35s, color .35s, border-color .35s; }
.e-actes li.fait { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--accent-strong); }
.e-actes li.en-cours { border-color: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(155,143,245,.5); }
@media (max-width: 720px) { .e-tete .logo-text, .e-titre { display: none; } .ouvert .e-titre { display: none; } .e-actes li { width: 26px; height: 26px; font-size: 11px; } .e-actes { gap: 4px; } }

/* OUVERTURE */
.e-intro { padding: clamp(48px, 9vh, 110px) 0 40px; max-width: 900px; }
.ouvert .e-intro { display: none; }
.e-intro h1 { font-size: clamp(38px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--accent-strong); margin-bottom: 28px; text-wrap: balance; }
.e-intro h1 span { display: block; font-weight: 400; color: var(--accent); margin-top: .1em; }
.e-chapo { font-size: 20px; line-height: 1.6; color: var(--text-soft); max-width: 640px; margin-bottom: 36px; }
.e-regles { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.e-regles b { display: block; font-family: var(--sans); font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text); margin-bottom: 6px; }
.e-reprise { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--accent-green); }

/* LE JEU : la question à gauche, le mur à droite */
.e-jeu { display: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 44px; }
.ouvert .e-jeu { display: grid; }
@media (max-width: 960px) { .e-jeu { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; } }
.e-carte { border: 1px solid var(--accent); background: var(--bg-2); padding: clamp(22px, 3vw, 40px); box-shadow: 0 0 60px rgba(155,143,245,.08); }
.au-rapport .e-carte { display: none; }
.e-carte.entre { animation: carte-entre .45s cubic-bezier(.2,.9,.2,1); }
@keyframes carte-entre { from { opacity: 0; transform: translateX(26px); } }
.e-carte-tete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-ghost); margin-bottom: 12px; }
.e-carte-tete span:first-child { color: var(--accent); }
.e-jauge { height: 3px; background: var(--line-strong); margin-bottom: 30px; }
.e-jauge i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform-origin: 0 50%; transform: scaleX(var(--j, 0)); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.e-carte h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--accent-strong); margin-bottom: 10px; text-wrap: balance; }
.e-aide { font-size: 15px; color: var(--text-ghost); min-height: 1.5em; margin-bottom: 22px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.puce { font: inherit; font-size: 16px; font-weight: 500; min-height: 46px; padding: 10px 18px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.puce:hover { border-color: var(--accent); transform: translateY(-2px); }
.puce[aria-pressed="true"] { border-color: var(--accent-strong); background: rgba(155,143,245,.22); color: #fff; box-shadow: 0 0 22px rgba(155,143,245,.3); }
/* le tableau : des pièces épinglées, légèrement de travers */
.choix.tableau .puce { border-style: dashed; position: relative; padding-top: 16px; }
.choix.tableau .puce::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--line-strong); transition: background .2s, box-shadow .2s; }
.choix.tableau .puce:nth-child(3n+1) { transform: rotate(-1.5deg); } .choix.tableau .puce:nth-child(3n) { transform: rotate(1.2deg); }
.choix.tableau .puce[aria-pressed="true"] { border-style: solid; transform: rotate(0) scale(1.03); }
.choix.tableau .puce[aria-pressed="true"]::before { background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); }
.champ { width: 100%; font: inherit; font-size: 18px; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); padding: 14px 16px; transition: border-color .2s; }
textarea.champ { min-height: 110px; resize: vertical; line-height: 1.5; }
.champ:focus-visible { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(155,143,245,.25); }
.champ.autre { margin-top: 14px; font-size: 15px; max-width: 320px; }
.passage { padding: 14px 0; border-top: 1px solid var(--line); }
.passage-quoi { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.choix.serre { gap: 8px; }
.choix.serre .puce { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.puce.etat-0[aria-pressed="true"] { border-color: var(--accent-green); background: rgba(0,217,126,.16); box-shadow: none; }
.puce.etat-1[aria-pressed="true"] { border-color: var(--accent-2); background: rgba(74,221,232,.14); box-shadow: none; }
.puce.etat-2[aria-pressed="true"] { border-color: #F2B45A; background: rgba(242,180,90,.16); box-shadow: none; }
.puce.etat-3[aria-pressed="true"] { border-color: var(--danger); background: rgba(217,107,92,.18); box-shadow: none; }
.e-note { min-height: 1.6em; margin-top: 20px; font-size: 15px; font-style: italic; color: var(--accent-green); }
.e-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.e-retour { font: inherit; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); background: none; border: none; cursor: pointer; padding: 12px 0; min-height: 44px; }
.e-retour:hover { color: var(--accent); }
.e-nav .btn { margin-left: auto; }

/* LE MUR */
.e-mur { position: sticky; top: 84px; border: 1px solid var(--line-strong); background: linear-gradient(rgba(155,143,245,.05) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(155,143,245,.05) 1px, transparent 1px) 0 0 / 24px 100%, var(--bg); padding: 20px; }
@media (max-width: 960px) { .e-mur { position: static; } }
.e-mur-tete { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-ghost); margin-bottom: 18px; }
.e-mur-tete span:last-child { color: var(--accent-green); }
.mur { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-start; }
.mur-vide { font-size: 15px; color: var(--text-ghost); }
.piece { position: relative; padding: 16px 14px 12px; background: var(--bg-2); border: 1px solid var(--line-strong); transform: rotate(var(--r, 0deg)); max-width: 100%; }
.piece.neuve { animation: epingle .5s cubic-bezier(.2,1.3,.3,1) backwards; }
.piece::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@keyframes epingle { from { opacity: 0; transform: translateY(-14px) rotate(8deg) scale(1.12); } }
.piece-nom { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.piece-outils { display: flex; flex-wrap: wrap; gap: 5px; }
.piece-outils i { font-style: normal; font-size: 14px; font-weight: 600; padding: 2px 8px; background: rgba(155,143,245,.14); }
.fils-mur { width: 100%; display: grid; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.fil-mur { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 13px; }
.fil-mur b { font-weight: 600; } .fil-mur b:last-child { text-align: right; }
.fil-mur span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border: 1px solid; white-space: nowrap; }
.fil-0 span { color: var(--accent-green); } .fil-1 span { color: var(--accent-2); } .fil-2 span { color: #F2B45A; border-style: dashed; } .fil-3 span { color: var(--danger); border-style: dotted; }

/* LE RAPPORT */
.e-rapport { display: none; }
.au-rapport .e-rapport { display: block; }
.e-rapport > h2 { font-size: clamp(28px, 3.8vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: var(--accent-strong); margin-bottom: 32px; text-wrap: balance; }
.e-constats { display: grid; gap: 0; border-top: 2px solid var(--accent); counter-reset: c; margin-bottom: 32px; }
.e-constats li { counter-increment: c; position: relative; padding: 22px 0 22px 58px; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.55; color: var(--text-soft); animation: constat .7s cubic-bezier(.2,.9,.2,1) backwards; animation-delay: calc(var(--i, 0) * 260ms + 200ms); }
.e-constats li::before { content: counter(c); position: absolute; left: 0; top: 16px; font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.e-constats b { color: #fff; font-size: 1.12em; }
@keyframes constat { from { opacity: 0; transform: translateX(-24px); } }
.e-cite { padding: 20px 24px; border-left: 2px solid var(--accent-green); background: var(--bg-2); margin-bottom: 36px; }
.e-cite span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-green); }
.e-cite p { font-size: 20px; margin-top: 8px; }
.e-suite { background: var(--accent); color: var(--ink); padding: clamp(22px, 3vw, 40px); }
.e-suite h3 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.e-suite > p { font-size: 17px; line-height: 1.6; max-width: 560px; }
#envoi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 14px; }
@media (max-width: 560px) { #envoi { grid-template-columns: 1fr; } }
#envoi label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
#envoi input[type="text"], #envoi input[type="email"] { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--ink); background: #fff; color: var(--ink); }
#envoi input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#envoi .btn { grid-column: 1 / -1; justify-self: start; background: var(--ink); border-color: var(--ink); color: #fff; }
#envoi .btn[disabled] { opacity: .5; cursor: progress; }
.statut { grid-column: 1 / -1; font-size: 15px; font-weight: 600; min-height: 1.5em; }
.statut.err { color: #7A1A10; } .statut.ok { color: #0B4B2E; }
#envoi.envoye > div, #envoi.envoye .btn { display: none; }
.e-petit { font-size: 13px; line-height: 1.5; opacity: .8; }
.e-petit a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .e-carte.entre, .piece.neuve, .e-constats li { animation: none; } }