/* Fiches projet — même langue visuelle que le portfolio (index.html) */

:root{
  --tx:#eef2f8; --tx-2:#c4cdda; --tx-3:#8b98ab; --hd:#ffffff;
  --lime:#c6f24e; --lime-ink:#cdf35f; --lime-soft:rgba(198,242,78,.14); --blue:#84bdff;
  --amber:#ffb454; --rouge:#ff9b8a;
  --card:rgba(255,255,255,.04); --bd:rgba(255,255,255,.12); --bd-2:rgba(255,255,255,.22);
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --maxw:900px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--tx);font-family:var(--sans);font-size:16.5px;line-height:1.62;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  background:#22303f;
  background-image:
    radial-gradient(70% 40% at 50% -4%, rgba(66,138,178,.30), transparent 60%),
    radial-gradient(40% 40% at 3% 88%, rgba(104,134,78,.24), transparent 60%),
    radial-gradient(60% 30% at 50% 108%, rgba(188,146,98,.30), transparent 62%),
    linear-gradient(178deg,#22414f 0%,#243d4c 40%,#33383f 78%,#3f3a34 100%);
  background-attachment:fixed;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
a{color:var(--lime-ink)}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime-ink);font-weight:600;margin:0 0 16px}

/* barre retour */
.backbar{padding:26px 0 0}
.back{display:inline-flex;align-items:center;font-size:13.5px;color:var(--tx-2);text-decoration:none;background:var(--card);border:1px solid var(--bd);border-radius:100px;padding:8px 15px;transition:.16s}
.back:hover{border-color:var(--bd-2);color:var(--hd)}

/* en-tête de fiche */
.fiche-hero{padding:34px 0 34px;border-bottom:1px solid var(--bd)}
.fiche-hero h1{font-size:clamp(30px,5vw,48px);line-height:1.05;letter-spacing:-.032em;font-weight:600;margin:0 0 12px;color:var(--hd)}
.kindline{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin:0 0 20px}
.ctx{background:var(--card);border:1px solid var(--bd);border-left:2px solid var(--lime);border-radius:0 14px 14px 0;padding:18px 22px}
.ctx p{margin:0;color:var(--tx-2);font-size:15.5px}
.ctx p + p{margin-top:10px}

/* corps du document */
.docbody{padding:40px 0 10px;max-width:70ch}
.docbody h2{font-size:clamp(21px,3.2vw,27px);line-height:1.16;letter-spacing:-.02em;font-weight:600;color:var(--hd);margin:52px 0 16px;padding-top:26px;border-top:1px solid var(--bd)}
.docbody h2:first-child{margin-top:0;padding-top:0;border-top:none}
.docbody h3{font-size:19px;letter-spacing:-.015em;font-weight:600;color:var(--hd);margin:34px 0 12px}
.docbody h4,.docbody h5,.docbody h6{font-size:16.5px;font-weight:600;color:var(--tx);margin:26px 0 10px}
.docbody p{margin:0 0 17px;color:var(--tx-2);line-height:1.72}
.docbody strong{color:var(--hd);font-weight:600}
.docbody em{color:var(--tx)}
.docbody ul,.docbody ol{margin:0 0 20px;padding-left:22px;color:var(--tx-2)}
.docbody li{margin-bottom:8px;line-height:1.66}
.docbody a{color:var(--lime-ink);word-break:break-word}
.rule{border:none;border-top:1px solid var(--bd);margin:40px 0}
/* un séparateur du document juste avant un titre ferait doublon avec sa bordure */
.rule + h2{border-top:none;padding-top:0;margin-top:34px}

/* conventions de couleur reprises des documents d'origine */
.voice-a{color:var(--blue)}
.hilite-red{color:var(--rouge)}
.hilite-amber{color:var(--amber)}
.docbody u{text-decoration-thickness:1px;text-underline-offset:3px}
/* les titres de section restent blancs, quelle que soit leur couleur d'origine */
.docbody :is(h2,h3,h4,h5,h6) :is(.voice-a,.hilite-red,.hilite-amber){color:inherit}
.note-ref{font-family:var(--mono);font-size:11px;color:var(--lime-ink);vertical-align:super;line-height:0}
.note-ref a{text-decoration:none}

/* brief de travail : consultable, mais il ne passe pas devant la copy */
.brief{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:0 22px;margin:0 0 30px}
.brief > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;padding:15px 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);
  -webkit-user-select:none;user-select:none;transition:.16s}
.brief > summary::-webkit-details-marker{display:none}
.brief > summary::before{content:"+";font-size:15px;line-height:1;color:var(--lime-ink)}
.brief[open] > summary::before{content:"\2013"}
.brief > summary:hover{color:var(--tx-2)}
.brief > :not(summary){font-size:14.5px}
.brief h2,.brief h3,.brief h4,.brief h5,.brief h6{border-top:none;padding-top:0;margin:20px 0 8px;font-size:15.5px}
.brief p{margin-bottom:12px}
.brief ul,.brief ol{margin-bottom:14px}
.brief > :last-child{margin-bottom:18px}

/* repère laissé dans le texte d'origine (date à caler au tournage) */
.ph{font-family:var(--mono);font-size:.92em;color:var(--tx-3)}

/* tableaux */
.tbl{overflow-x:auto;margin:0 0 22px}
.tbl table{border-collapse:collapse;width:100%;font-size:15px}
.tbl td{border:1px solid var(--bd);padding:10px 13px;vertical-align:top;color:var(--tx-2)}

/* notes de bas de document */
.doc-notes{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:20px 24px;margin:34px 0 0}
.notes-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin:0 0 12px}
.doc-notes ul{margin:0;padding-left:20px}
.doc-notes li{color:var(--tx-3);font-size:14.5px;margin-bottom:7px}

/* pied */
section.contact{padding:46px 0;border-top:1px solid var(--bd);margin-top:44px}
.contact h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.02em;font-weight:600;color:var(--hd);margin:0 0 20px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--tx);text-decoration:none;background:var(--card);border:1px solid var(--bd);border-radius:100px;padding:8px 15px;transition:.16s}
.chip:hover{border-color:var(--bd-2);color:var(--hd)}
.chip.lime{background:var(--lime-soft);border-color:rgba(160,205,55,.4);color:var(--lime-ink)}
.backlink{margin:22px 0 0;font-size:14px}
.backlink a{text-decoration:none}
footer{padding:30px 0 60px;color:var(--tx-3);font-size:13px}

@media(max-width:620px){
  .docbody{padding-top:30px}
  .ctx{border-radius:0 12px 12px 0;padding:16px 18px}
}

/* visuels d'ads (statiques, vidéos) en format vertical */
.visuels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px}
.visuels.deux{grid-template-columns:repeat(2,minmax(0,260px))}
.visuels figure{margin:0}
.visuels img,.visuels video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid var(--bd);background:#000}
.visuels figcaption{font-size:13px;color:var(--tx-3);margin-top:8px}
@media(max-width:620px){.visuels{grid-template-columns:1fr 1fr}}