/* ============================================================================
   projet.css — pages projet (projets/*.html) et pages annexes (mentions-legales.html)
   Principe : le CADRE est celui d'Axel (papier, encre, Roboto Flex, repères, folio, la main rouge rare),
   identique sur toutes les pages ; à l'intérieur, la PLANCHE porte l'univers du projet (fond, couleur d'accent).
   Pour changer l'univers d'un projet : redéfinir --fond-projet, --texte-projet, --accent-projet sur <body>.
   Ordre : 1. cadre (page, barre, marges, position) · 2. planche · 3. types de sections · 4. pied · 5. apparition · 6. petits écrans
   ============================================================================ */

/* ---------- 1. Le cadre d'Axel ---------- */
.page-projet{--fond-projet:#0B0B0A;--texte-projet:#F1EFEA;--accent-projet:#E2332A;--trait-projet:rgba(241,239,234,.16);--doux-projet:#C9C7C0;
  --cadre-l:28px;--m:40px;background:var(--papier);background-image:var(--grain);color:var(--noir)}
.page-projet .top{background:var(--papier);background-image:var(--grain);border-bottom:1px solid var(--noir);padding:0 var(--cadre-l)}
/* marges latérales : labels verticaux (dossier, folio) */
.marge{position:fixed;top:var(--barre);bottom:0;width:var(--cadre-l);z-index:15;display:flex;align-items:center;justify-content:center;pointer-events:none}
.marge span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.marge.g{left:0}.marge.d{right:0}
.marge.d span{transform:none;position:absolute;bottom:22px}
/* indicateur de position : un repère par section, le curseur suit la lecture */
#position{position:fixed;right:0;width:var(--cadre-l);top:calc(var(--barre) + 90px);height:46vh;z-index:16}
#position .pos-piste{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(13,13,12,.3)}
#position .pos-rep{position:absolute;left:-5px;width:11px;height:1px;background:var(--noir);opacity:.5}
#position .pos-rep::after{content:"";position:absolute;inset:-6px -4px}
#position .pos-rep.actif{opacity:1;height:2px;left:-7px;width:15px}
#position .pos-curseur{position:absolute;left:-7px;width:15px;height:3px;margin-top:-1.5px;background:var(--rouge)}

/* ---------- 2. La planche : l'univers du projet ---------- */
.planche{position:relative;margin:var(--barre) var(--cadre-l) 0;background:var(--fond-projet);color:var(--texte-projet)}
.coupe{position:absolute;background:var(--noir);opacity:.6}
.coupe-claire{position:absolute;background:var(--texte-projet);opacity:.55}
.planche .lab{letter-spacing:.08em}

/* ---------- 3. Types de sections (voir projets/_modele.html) ---------- */
/* 3.1 hero : image plein cadre + grand titre (trame des titres) */
.p-hero{position:relative;height:calc(100vh - var(--barre) - var(--cadre-l));min-height:600px;overflow:hidden;background:var(--fond-projet)}
.p-hero img{position:absolute;top:0;bottom:0;right:0;width:62%;height:100%;object-fit:cover;animation:p-zoom 2.4s var(--machine) both}
@keyframes p-zoom{from{transform:scale(1.12);opacity:0}to{transform:scale(1.04);opacity:1}}
.p-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--fond-projet) 38%,transparent 60%),linear-gradient(0deg,var(--fond-projet) 0%,transparent 30%);opacity:.95}
.p-hero .h-in{position:absolute;left:var(--m);right:var(--m);bottom:44px;z-index:2}
.p-hero .h-k{display:flex;gap:28px;color:var(--doux-projet);margin-bottom:18px}
.p-hero .h-k b{color:var(--accent-projet);font-weight:600}
.p-titre{font-weight:900;font-stretch:25%;text-transform:uppercase;line-height:.8;letter-spacing:-.01em;font-size:min(23vw,300px);max-width:62%;padding-right:.05em}
.p-hero .h-sous{font-size:22px;font-weight:450;margin-top:16px;color:var(--doux-projet);max-width:620px}
.p-hero .h-rp{position:absolute;right:var(--m);bottom:44px;z-index:2;color:var(--doux-projet)}
/* 3.2 méta + 3.3 texte */
.p-meta{padding:80px var(--m) 90px;row-gap:40px}
.p-meta dl{grid-column:1/6;display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--texte-projet);align-self:start}
.p-meta dt{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);padding:12px 0 10px;border-bottom:1px solid var(--trait-projet)}
.p-meta dd{font-size:16px;padding:9px 0 10px;border-bottom:1px solid var(--trait-projet)}
.p-texte{grid-column:7/13}
.p-texte .lab{color:var(--gris);display:block;margin-bottom:16px}
.p-texte p{font-size:24px;line-height:1.35;font-weight:420;letter-spacing:-.005em}
.p-texte p+p{font-size:16px;line-height:1.55;color:var(--doux-projet);margin-top:22px;max-width:560px}
.p-texte b{font-weight:640}
/* en-tête de section numérotée */
.p-sec{padding-bottom:110px}
.p-sec-tete{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--trait-projet);padding:12px var(--m) 22px;color:var(--doux-projet)}
.p-sec-tete b{font-weight:800;font-stretch:30%;font-size:30px;color:var(--texte-projet);line-height:1}
.p-sec-tete .t{font-size:15px;font-weight:600;color:var(--texte-projet)}
.p-sec-tete .r{margin-left:auto}
.legende{display:flex;justify-content:space-between;margin-top:10px;color:var(--gris)}
.img{position:relative}
.img img{width:100%;height:auto}
.img.blanc{background:#fff}          /* un mockup livré sur fond blanc garde son blanc */
.img.sombre{background:rgba(255,255,255,.05)}
.placeholder{display:flex;align-items:center;justify-content:center;background:#8F8D88;color:var(--papier);min-height:320px;font-size:11px;font-weight:600;letter-spacing:.06em}
/* 3.4 pleine largeur (avec repères d'imprimeur discrets : .repere) */
.p-pleine{padding:0 var(--m)}
.repere{position:relative;padding:22px}
.repere::before{content:"";position:absolute;inset:10px;border:1px dashed var(--trait-projet);pointer-events:none}
.repere .rk,.repere .rd{position:absolute;top:-4px;color:var(--gris)}
.repere .rk{left:34px}.repere .rd{right:34px}
/* 3.5 bento à 2 et à 3 */
.p-bento2,.p-bento3{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere);padding:0 var(--m)}
.p-bento2>*{grid-column:span 6;display:flex;align-items:center;justify-content:center;padding:40px 30px}
.p-bento2 img{width:74%}
.p-bento3>:first-child{grid-column:1/8;grid-row:1/3;display:flex;align-items:center;justify-content:center;padding:40px}
.p-bento3>:first-child img{width:78%}
.p-bento3>:not(:first-child){grid-column:8/13;display:flex;align-items:center;justify-content:center;padding:18px}
/* 3.6 image + texte */
.p-imtexte{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gouttiere);padding:0 var(--m);align-items:center}
.p-imtexte>.img{grid-column:1/9}
.p-imtexte>.tx{grid-column:9/13}
.p-imtexte.inverse>.img{grid-column:5/13;grid-row:1}
.p-imtexte.inverse>.tx{grid-column:1/5;grid-row:1}
.p-imtexte h3{font-size:44px;font-weight:800;font-stretch:30%;text-transform:uppercase;line-height:.9}
.p-imtexte ul{list-style:none;margin-top:22px;border-top:1px solid var(--texte-projet)}
.p-imtexte li{display:grid;grid-template-columns:34px 1fr;padding:12px 0;border-bottom:1px solid var(--trait-projet);font-size:17px}
.p-imtexte li span{font-family:var(--mono);font-size:10px;color:var(--gris);padding-top:4px}
.p-imtexte p{font-size:15px;line-height:1.5;color:var(--doux-projet);margin-top:18px}
/* 3.7 citation */
.p-citation{padding:40px var(--m) 120px}
.p-citation p{font-weight:900;font-stretch:25%;text-transform:uppercase;font-size:min(13vw,190px);line-height:.82;letter-spacing:-.005em}
.p-citation p span{color:var(--accent-projet)}
.p-citation small{display:block;margin-top:18px;color:var(--gris)}
/* 3.8 note manuscrite : voir data-note sur une figure .img (site.js, section 2) */

/* ---------- 4. Pied de page (cadre d'Axel) ---------- */
.p-pied{position:relative;margin:0 var(--cadre-l);padding:34px 12px 26px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gouttiere);align-items:end;color:var(--noir)}
.p-pied .lab{color:var(--graphite)}
.p-suivant{grid-column:1/9;text-decoration:none;display:block}
.p-suivant b{display:flex;align-items:baseline;gap:20px;font-size:110px;font-weight:780;letter-spacing:-.03em;line-height:.9;margin-top:10px;transition:font-stretch 700ms var(--machine)}
.p-suivant:hover b{font-stretch:122%}
.p-suivant .ar{width:.7em;height:.45em}.p-suivant .ar path{stroke-width:2.6}
.p-retour{grid-column:9/13;justify-self:end;text-align:right}
.p-retour a{font-size:20px;font-weight:560;text-decoration:none;border-bottom:1px solid var(--noir);transition:font-stretch 500ms var(--machine)}
.p-retour a:hover{font-stretch:118%}
.p-pied .pied{grid-column:1/13;margin-top:34px;color:var(--graphite);border-color:var(--noir)}

/* ---------- 5. Apparition au scroll (légère) ---------- */
.apparait{opacity:0;transform:translateY(34px);transition:opacity 900ms var(--machine),transform 1100ms var(--machine)}
.apparait.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.apparait{opacity:1;transform:none}}

/* ---------- 6. Petits écrans (garde-fou ; responsive complet : TODO) ---------- */
@media (max-width:900px){
  .page-projet{--cadre-l:10px;--m:16px}
  .marge,#position{display:none}
  .p-meta dl,.p-texte,.p-imtexte>.img,.p-imtexte>.tx,.p-bento2>*,.p-bento3>*,.p-suivant,.p-retour{grid-column:1/-1!important;grid-row:auto!important}
  .p-suivant b{font-size:56px}
  .p-retour{justify-self:start;text-align:left;margin-top:30px}
  .p-hero img{width:100%;opacity:.5}
}