/* ============================================================================
   fiches.css — la page d'accueil (index.html)
   Ordre : 1. page et barre · 2. la table · 3. les fiches (feuille, onglet, cadre, repères, bandeau)
           4. fiche ouverte (aperçu) · 5. accueil · 6. rail sommaire · 7. fin À propos / contact · 8. chargement
           9. petits écrans
   Les valeurs de géométrie (positions, tailles des feuilles) sont calculées dans site.js.
   ============================================================================ */

/* ---------- 1. Page et barre du haut ---------- */
.page-index{background:var(--noir);--nav:var(--papier)}
.page-index.claire{--nav:var(--noir)}
.page-index .top{color:var(--nav);pointer-events:none;transition:color 600ms var(--machine),opacity 500ms var(--machine)}
.page-index .top a{pointer-events:auto;min-height:1em}
.page-index .top .centre{visibility:hidden}
.page-index.vue-fin .top,.page-index.ouverte .top{opacity:0}
.page-index.vue-fin .top a,.page-index.ouverte .top a{pointer-events:none}
#spacer{width:1px}

/* ---------- 2. La table ---------- */
#table{position:fixed;inset:0;z-index:1;overflow:hidden;overflow:clip;background-color:var(--table);background-image:var(--grain)}
#pile{position:absolute;inset:0}

/* ---------- 3. Les fiches : pleine largeur, bord à bord à gauche ---------- */
.fiche{position:absolute;transform-origin:0 100%;will-change:transform;outline:none;visibility:hidden}
.fiche .papier{position:absolute;inset:0;background:var(--papier);box-shadow:0 1px 0 rgba(13,13,12,.08),0 30px 60px -32px rgba(13,13,12,.55);overflow:hidden;cursor:pointer}
.fiche .papier::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.7;pointer-events:none}
.fiche .ombre{position:absolute;inset:-30px 0 0 0;background:var(--noir);opacity:0;pointer-events:none;z-index:9}
.fiche:focus-visible .papier{outline:1px dashed var(--graphite);outline-offset:-8px}
.onglet{position:absolute;top:-28px;height:29px;background:var(--papier);border-radius:5px 5px 0 0;display:flex;align-items:center;gap:9px;padding:0 12px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:0 -1px 0 rgba(13,13,12,.05)}
.onglet b{font-weight:800}

/* cadre gris (le « wrapper ») + visuel (la « figure ») qui le suit avec un léger retard à l'arrivée */
.cadre{position:absolute;left:0;top:22px;right:22px;bottom:176px;background:var(--cadre);z-index:2;transition:left 950ms var(--machine),right 950ms var(--machine),bottom 950ms var(--machine)}
.visuel{position:absolute;left:54px;top:26px;right:24px;bottom:18px;z-index:2;overflow:hidden;background:#9a9893;transform-origin:30% 100%;will-change:transform;transition:left 950ms var(--machine)}
.visuel img,.visuel canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* RÈGLE COULEUR : gris par défaut ; la couleur descend seulement au survol (et au scan de l'ouverture) */
.visuel .gris{filter:grayscale(1) contrast(1.04)}
.visuel .couleur{clip-path:inset(0 0 100% 0);transition:clip-path 900ms var(--machine)}
.visuel:hover .couleur{clip-path:inset(0 0 0 0)}
.visuel.scan .couleur{transition:none}
.visuel canvas.dissolution{image-rendering:pixelated;opacity:0;pointer-events:none}
.visuel .ligne{position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 14px 4px rgba(255,255,255,.7),0 0 60px 18px rgba(255,255,255,.18);opacity:0;pointer-events:none}
.etiquette{position:absolute;left:12px;bottom:11px;font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--noir);color:var(--papier);padding:4px 8px 3px;z-index:3}

/* repères d'imprimeur (façon OVERSCAN / CROP de The Line) : toujours visibles, jamais dans l'image ;
   le visuel (= le format fini) glisse par-dessus quand la feuille se pose */
.rp{position:absolute;pointer-events:none;z-index:1;transition:left 950ms var(--machine)}
.rp.perdu{left:40px;top:8px;right:10px;bottom:6px;border:1px dashed rgba(13,13,12,.32)}
.rp.fini{left:54px;top:26px;right:24px;bottom:18px;border:1px solid rgba(13,13,12,.42)}
.rp.securite{left:70px;top:44px;right:40px;bottom:34px;border:1px dotted rgba(13,13,12,.45)}
.rp .k,.rp .d{position:absolute;top:2px;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.rp .k{left:6px}.rp .d{right:6px}
.rp.perdu .k{left:20px}.rp.perdu .d{right:20px}
.rp .k i{font-style:normal;margin-left:10px;color:var(--noir)}
.rp .milieu{position:absolute;left:50%;top:-10px;width:1px;height:9px;background:rgba(13,13,12,.5)}
.coupe{position:absolute;background:var(--noir);opacity:.55}
.coupe.h{height:1px;width:9px}.coupe.v{width:1px;height:9px}

/* bandeau bas : grand titre (trame), numéro, année, rôle, « Ouvrir le dossier » */
.bandeau{position:absolute;left:0;right:0;bottom:0;height:176px;z-index:1;transition:height 950ms var(--machine)}
.titre-fiche{padding-right:.06em;position:absolute;left:68px;top:-16px;font-weight:720;font-size:116px;line-height:.92;letter-spacing:-.025em;white-space:nowrap;will-change:transform;transition:left 950ms var(--machine)}
.cote{position:absolute;right:22px;top:20px;bottom:20px;width:250px;display:flex;flex-direction:column;justify-content:space-between;transition:opacity 400ms var(--machine)}
.cote .no{font-size:40px;font-weight:700;font-stretch:40%;line-height:.8;letter-spacing:-.01em;align-self:flex-end}
.cote .no span{color:var(--gris)}
.cote dl{display:grid;grid-template-columns:64px 1fr;font-size:13.5px;line-height:1.25}
.cote dt{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);padding:6px 0 4px;border-top:1px solid var(--filet)}
.cote dd{padding:4px 0;border-top:1px solid var(--filet)}
.cote .ouvrir{align-self:flex-end;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);transition:color 300ms,font-stretch 500ms var(--machine)}
.fiche.devant .papier:hover .ouvrir{color:var(--noir);font-stretch:118%}

/* ---------- 4. Fiche ouverte (l'aperçu) : le cadre libère une colonne de détail ---------- */
.fiche.ouverte .cadre{left:22px;right:440px;bottom:200px}
.fiche.ouverte .visuel{left:26px}
.fiche.ouverte .rp.perdu{left:12px}.fiche.ouverte .rp.fini{left:26px}.fiche.ouverte .rp.securite{left:42px}
.fiche.ouverte .bandeau{height:200px}
.fiche.ouverte .titre-fiche{left:22px}
.fiche.ouverte .cote{opacity:0;pointer-events:none}
.fiche.ouverte .papier{cursor:default}
.fiche.ouverte .onglet,.fiche.ouverte .papier>.hand,.fiche.ouverte .papier>.hand-note{opacity:0;transition:opacity 300ms}
.apercu{position:absolute;right:22px;top:22px;bottom:22px;width:396px;z-index:3;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity 500ms var(--machine),visibility 0s 500ms}
.fiche.detail .apercu{opacity:1;visibility:visible;transition:opacity 600ms var(--machine)}
.ap-tete{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--noir);padding-bottom:10px}
.ap-tete .fermer{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--noir);padding:7px 11px 6px;cursor:pointer}
.ap-tete .fermer:hover{background:var(--noir);color:var(--papier)}
.ap-sous{font-size:22px;line-height:1.25;font-weight:520;margin-top:18px;letter-spacing:-.005em}
.ap-meta{display:grid;grid-template-columns:96px 1fr;margin-top:40px;border-bottom:1px solid var(--filet)}
.ap-meta dt{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);padding:10px 0 7px;border-top:1px solid var(--filet)}
.ap-meta dd{font-size:15px;padding:7px 0;border-top:1px solid var(--filet)}
.ap-meta dd i{display:inline-block;width:22px;height:14px;vertical-align:-2px;margin-right:5px;box-shadow:inset 0 0 0 1px rgba(13,13,12,.15)}
.ap-meta .hx{font-size:12px;margin-right:10px;color:var(--graphite);font-variant-numeric:tabular-nums}
.ap-texte{font-size:15px;line-height:1.45;margin-top:40px}
.cible{white-space:nowrap}
.ap-cta{margin-top:22px;display:flex;align-items:center;gap:14px}
.ap-cta .complet{display:inline-flex;align-items:baseline;gap:10px;font-size:19px;font-weight:620;letter-spacing:-.01em;text-decoration:none;border:1px solid var(--noir);padding:11px 16px 10px;background:var(--noir);color:var(--papier);transition:font-stretch 500ms var(--machine),background 300ms,color 300ms}
.ap-cta a.complet:hover{font-stretch:118%;background:transparent;color:var(--noir)}
.ap-cta .complet.inactif{background:transparent;color:var(--gris);border-color:rgba(13,13,12,.25);cursor:not-allowed}
.vignettes{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vignettes div{position:relative;height:84px;overflow:hidden;background:#9a9893}
.vignettes img,.vignettes canvas{width:100%;height:100%;object-fit:cover;display:block}
.vignettes .etiquette{font-size:9px;left:6px;bottom:6px;padding:2px 5px}
.ap-pied{display:flex;justify-content:space-between;margin-top:10px;color:var(--graphite)}

/* ---------- 5. Accueil : le bordereau (grille visible, « Portfolio » tramé, tampon, phrase, intitulé) ---------- */
#accueil{position:absolute;inset:0;z-index:0;will-change:transform}
.a-grille{position:absolute;left:var(--marge);right:var(--marge);top:var(--barre);bottom:0;pointer-events:none}
.a-grille i{border-left:1px solid rgba(13,13,12,.075);border-right:1px solid rgba(13,13,12,.075);position:relative}
.a-grille i span{position:absolute;left:5px;top:6px;font-family:var(--mono);font-size:8.5px;color:rgba(13,13,12,.42);letter-spacing:.06em}
.a-in{position:absolute;left:var(--marge);right:var(--marge);top:76px;z-index:1;opacity:0}
.prete .a-in{opacity:1;transition:opacity 700ms var(--machine)}
.a-tete{grid-column:1/13;display:flex;justify-content:space-between;border-bottom:1px solid var(--noir);padding-bottom:9px}
.a-tete span:nth-child(2){color:var(--graphite)}
.a-titre{grid-column:1/13;justify-self:start;width:max-content;padding:0 .07em .04em 0;margin-left:-.02em;font-weight:840;letter-spacing:-.04em;line-height:.76;margin-top:16px;white-space:nowrap;font-stretch:86%}
.a-phrase{grid-column:1/9;font-size:44px;font-weight:680;letter-spacing:-.025em;line-height:1;margin-top:34px;align-self:end}
.a-int{grid-column:9/13;align-self:end;border-top:1px solid var(--noir);padding-top:9px}
.a-int .lab{color:var(--graphite);font-size:10px;display:block;margin-bottom:6px}
.a-int b{font-size:16px;font-weight:560}
.tampon{position:absolute;border:2px solid var(--noir);padding:4px;transform:rotate(-6deg);mix-blend-mode:multiply;opacity:.86;line-height:1;text-align:center}
.tampon>div{border:1px solid var(--noir);padding:8px 16px 7px}
.tampon .l1{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tampon .l2{display:block;font-size:32px;font-weight:800;font-stretch:40%;margin-top:5px;text-transform:uppercase;letter-spacing:.01em}
.hand-note.md{font-size:38px}

/* ---------- 6. Rail sommaire (visible seulement pendant les fiches, ne bouge qu'avec le lecteur) ---------- */
#rail{position:fixed;right:0;top:50%;width:var(--rail);height:520px;margin-top:-250px;z-index:25;opacity:0;pointer-events:none;transition:opacity 600ms var(--machine)}
#rail.visible{opacity:1;pointer-events:auto}
#rail .piste{position:absolute;right:40px;top:0;bottom:0;width:1px;background:rgba(13,13,12,.35)}
#rail .graduation{position:absolute;right:40px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(to bottom,rgba(13,13,12,.3) 0 1px,transparent 1px 13px)}
#rail a{position:absolute;right:40px;transform:translateY(-50%);display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--graphite);height:24px;flex-direction:row-reverse}
#rail a i{display:block;width:14px;height:1px;background:var(--noir)}
#rail a .n{font-size:11px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
#rail a .nom{position:absolute;right:44px;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--noir);background:var(--table);padding:3px 6px;opacity:0;transform:translateX(6px);transition:opacity 400ms var(--machine),transform 400ms var(--machine);pointer-events:none}
#rail a:hover .nom{opacity:1;transform:none}
#rail a.actif{color:var(--noir)}
#rail a.actif i{width:22px;height:2px}
#rail .curseur{position:absolute;right:30px;width:22px;height:3px;background:var(--noir);transform:translateY(-1.5px)}
#rail .suite{position:absolute;right:30px;bottom:-30px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}

/* ---------- 7. Fin À propos / contact, façon The Line ---------- */
#fin{position:fixed;inset:0;z-index:35;pointer-events:none;visibility:hidden;overflow:hidden}
#fin.posee{pointer-events:auto}
.f-feuille{position:absolute;inset:0;background:var(--noir);color:var(--papier);will-change:transform;overflow:hidden}
.f-feuille::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.35;pointer-events:none}
.f-bande{position:absolute;left:-10vw;width:120vw;top:-320px;height:650px;background:var(--papier);color:var(--noir);transform-origin:50% 60%;will-change:transform;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.f-bande::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.6}
.f-nom{position:relative;font-weight:860;line-height:.74;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;margin-bottom:46px}
.f-perso{position:absolute;left:50%;top:252px;width:440px;margin-left:-220px;mix-blend-mode:difference;pointer-events:none;will-change:transform}
.f-perso img{display:block;width:100%}
.f-cols{position:absolute;left:var(--marge);right:var(--marge);top:430px;bottom:70px;grid-template-rows:auto 1fr auto}
.f-cols .lab{color:var(--gris);display:block;margin-bottom:12px;font-size:10.5px}
.f-contact{grid-column:1/5;grid-row:1}
.f-contact>.lab{margin-bottom:26px}
.f-ecrire{display:inline-flex;align-items:baseline;gap:16px;font-size:80px;line-height:.9;font-weight:760;letter-spacing:-.03em;text-decoration:none;transition:font-stretch 700ms var(--machine)}
.f-ecrire .ar{width:.8em;height:.5em;vertical-align:.1em}.f-ecrire .ar path{stroke-width:2.6}
.f-ecrire:hover{font-stretch:125%}
.f-mail{display:inline-block;font-size:24px;font-weight:520;letter-spacing:-.01em;margin-top:70px;text-decoration:none;border-bottom:1px solid rgba(241,239,234,.4)}
.f-mail:hover{border-color:var(--papier)}
.f-apropos{grid-column:9/13;grid-row:1}
.f-pres{font-size:16px;line-height:1.5;color:var(--toner)}
.f-pres b{color:var(--papier);font-weight:600}
.f-form{display:grid;grid-template-columns:96px 1fr;margin-top:16px;border-top:1px solid rgba(241,239,234,.2);font-size:14px}
.f-form dt{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);padding:9px 0}
.f-form dd{padding:7px 0}
.f-signature{grid-column:1/5;grid-row:3;font-size:27px;line-height:1.08;font-weight:640;letter-spacing:-.02em}
.f-signature span{color:var(--gris)}
.f-mini{grid-column:9/13;grid-row:3;display:grid;grid-template-columns:.9fr 1.3fr .8fr;column-gap:20px;font-size:15px;line-height:1.55}
.f-mini a{text-decoration:none;border-bottom:1px solid rgba(241,239,234,.4)}
.f-mini a:hover{border-color:var(--papier)}
.f-feuille .pied{position:absolute;left:var(--marge);right:var(--marge);bottom:22px;color:var(--toner);border-color:rgba(241,239,234,.22)}
#fin .monte{opacity:0;transform:translateY(18px)}
#fin.posee .monte{opacity:1;transform:none;transition:opacity 700ms var(--machine) var(--rd,0ms),transform 900ms var(--machine) var(--rd,0ms)}

/* ---------- 8. Chargement façon The Line : peu d'infos, un compteur qui a du sens, une barre qui devient la feuille ---------- */
#chargement{position:fixed;inset:0;z-index:50;background:var(--noir);color:var(--papier);overflow:hidden}
#chargement .compteur{position:absolute;left:34px;top:56px;font-weight:130;font-size:300px;line-height:.8;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;font-stretch:25%}
#chargement .compteur small{font-size:.32em;font-weight:200;color:var(--gris);letter-spacing:0;margin-left:.06em}
#chargement .compteur em{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:18px 0 0 8px}
#chargement .qui{position:absolute;left:var(--marge);bottom:40px;opacity:0;transform:translateY(10px)}
#chargement .qui b{display:block;font-size:30px;font-weight:620;letter-spacing:-.015em}
#chargement .qui span{display:block;font-size:17px;color:var(--toner);margin-top:6px}
#chargement .barre{position:absolute;left:0;top:0;height:2px;width:0;background:#55544F}

/* ---------- 9. Petits écrans (garde-fou : rien ne déborde ; le vrai responsive est dans la TODO) ---------- */
@media (max-width:900px){
  #chargement .compteur{font-size:150px}
  .a-phrase{grid-column:1/13;font-size:28px}
  .a-int{grid-column:1/13;margin-top:16px}
  .tampon{display:none}
  .cote{width:150px}
  .apercu{width:auto;left:22px;top:auto;height:50%;background:var(--papier)}
  .f-perso{width:240px;margin-left:-120px}
  .f-cols{top:330px;overflow:auto}
  .f-contact,.f-apropos,.f-signature,.f-mini{grid-column:1/13;grid-row:auto}
  .f-ecrire{font-size:48px}
}