/* =========================================================================
   Boîte à plans — feuille de style
   ========================================================================= */

:root{
  --papier:#E9EDF0; --surface:#fff; --surface2:#F4F6F8;
  --encre:#111820; --doux:#5B6874; --trait:#CFD8DF; --trait-fort:#9FAEBB;
  --tirage:#1B4A8F; --tirage-c:#DCE6F5; --sur-tirage:#fff;
  --visa:#1E7355;   --visa-c:#DCEDE5;
  --alerte:#A8391F; --alerte-c:#F3E0DA;
  --gestion:#6B3FA0;--gestion-c:#E8DFF4;
  --masque:#8A96A1; --masque-c:#E4E8EB;
  --orange:#8A5A12; --orange-c:#F6EBD6;
  --r:4px;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#0D1216; --surface:#141A20; --surface2:#1A2229;
    --encre:#DFE6EB; --doux:#8B99A5; --trait:#26313A; --trait-fort:#3C4A55;
    /* Le bleu s'éclaircit en sombre pour rester lisible sur le fond : du
       blanc par-dessus ne contrasterait plus (2,5:1). On y pose donc
       l'encre du fond, qui remonte à 7,7:1. */
    --tirage:#7BA6E8; --tirage-c:#1B2C45; --sur-tirage:#0D1216;
    --visa:#5EBE96;   --visa-c:#143026;
    --alerte:#E08163; --alerte-c:#3A1F17;
    --gestion:#B392DC;--gestion-c:#291C3A;
    --masque:#7A8791; --masque-c:#212A31;
    --orange:#D9A65B; --orange-c:#33260F;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--papier);color:var(--encre);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--tirage)}
:focus-visible{outline:2px solid var(--tirage);outline-offset:2px}
h1{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
h2{font-size:13px;font-weight:600;margin:0}
.intro{color:var(--doux);margin:0 0 18px;max-width:72ch}
.discret{color:var(--doux);font-size:12.5px}
.nowrap{white-space:nowrap}
.droite{text-align:right}
.enligne{display:inline}

/* ---------- Bandeau ---------- */
.topbar{display:flex;align-items:center;gap:16px;height:58px;padding:0 18px;
  background:var(--surface);border-bottom:1px solid var(--trait);flex-wrap:wrap;
  position:sticky;top:0;z-index:20}
.mark a{text-decoration:none;color:inherit}
.mark b{font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.projet{display:flex;align-items:center;gap:8px;padding:5px 10px;min-width:0;
  border:1px solid var(--trait);border-radius:var(--r);background:var(--surface2)}
.projet .code{font-family:var(--mono);font-size:11px;color:var(--tirage)}
.projet .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw;font-weight:500}
.spacer{flex:1}
.moi{display:flex;align-items:center;gap:8px}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--tirage-c);color:var(--tirage);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:0 0 auto}
.pill{font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--trait);color:var(--doux)}

/* ---------- Colonne de navigation ---------- */
.corps{display:flex;min-height:calc(100vh - 58px)}
.rail{width:210px;flex:0 0 210px;background:var(--surface);border-right:1px solid var(--trait);padding:14px 10px}
.rail a{display:block;padding:8px 10px;margin-bottom:2px;border-radius:var(--r);
  color:var(--doux);text-decoration:none;font-size:13.5px}
.rail a:hover{background:var(--surface2);color:var(--encre)}
.rail a.actif{background:var(--tirage-c);color:var(--tirage);font-weight:600}
.principal{flex:1;min-width:0;padding:20px;overflow:auto}
.page{max-width:1180px}

/* ---------- Messages ---------- */
.alerte{border-radius:var(--r);padding:10px 13px;margin-bottom:16px;font-size:13.5px;
  border:1px solid var(--trait);background:var(--surface);border-left:3px solid var(--tirage)}
.alerte.ok{border-left-color:var(--visa)}
.alerte.ko{border-left-color:var(--alerte);background:var(--alerte-c);color:var(--alerte)}
.alerte.attention{border-left-color:var(--orange);background:var(--orange-c);color:var(--orange)}
.alerte code{font-family:var(--mono);font-size:11.5px;word-break:break-all}

/* ---------- Panneaux et tableaux ---------- */
.panneau{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r)}
.tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--trait)}
.tete .actions{display:flex;align-items:center;gap:8px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;font-weight:600;color:var(--doux);
  padding:8px 12px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--trait);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
.barre-outils{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.barre-outils input{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:6px 10px}

/* ---------- Explorateur ---------- */
.explorateur{display:grid;grid-template-columns:270px 1fr;gap:16px;align-items:start}
.arbre{padding:8px 6px;max-height:62vh;overflow:auto}
.branche .rameaux{margin-left:14px;border-left:1px solid var(--trait);padding-left:4px}
.noeud{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:var(--r);
  text-decoration:none;color:var(--encre);font-size:13px}
.noeud:hover{background:var(--surface2)}
.noeud.actif{background:var(--tirage-c);color:var(--tirage);font-weight:600}
.noeud.inerte{color:var(--doux);opacity:.6}
.noeud .nom{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.point{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.point.lecture{background:var(--tirage)}
.point.depot{background:var(--visa)}
.point.gestion{background:var(--gestion)}
.fil{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--doux);flex-wrap:wrap}
.fil a{color:var(--doux);text-decoration:none}
.fil a:hover{color:var(--tirage);text-decoration:underline}
.fil .sep{color:var(--trait-fort)}
.fil .ici{color:var(--encre);font-weight:600}
.zone-depot{margin:12px;padding:14px;border:1px dashed var(--trait-fort);border-radius:var(--r);
  text-align:center;color:var(--doux);font-size:13px}
.zone-depot.fermee{border-style:solid;border-color:var(--trait);background:var(--surface2)}

.nomfichier{display:flex;align-items:center;gap:10px;min-width:0}
.nomfichier .txt{min-width:0}
.nomfichier .t1{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nomfichier .t1 a{text-decoration:none;color:var(--encre)}
.nomfichier .t1 a:hover{color:var(--tirage);text-decoration:underline}
.nomfichier .t2{font-family:var(--mono);font-size:11px;color:var(--doux)}
.lien-discret{font-family:var(--mono);font-size:11px;color:var(--tirage)}
.ext{display:inline-flex;align-items:center;justify-content:center;width:34px;height:22px;
  border-radius:2px;font-family:var(--mono);font-size:10px;font-weight:500;flex:0 0 auto;
  background:var(--masque-c);color:var(--masque)}
.ext.pdf{background:var(--alerte-c);color:var(--alerte)}
.ext.dwg,.ext.dxf{background:var(--tirage-c);color:var(--tirage)}
.ext.ifc,.ext.rvt,.ext.skp{background:var(--gestion-c);color:var(--gestion)}
.ext.xls,.ext.xlsx,.ext.csv{background:var(--visa-c);color:var(--visa)}
.ext.dossier{background:var(--surface2);color:var(--doux)}

.indice{font-family:var(--mono);font-size:12px;border:1px solid var(--trait);border-radius:2px;padding:1px 6px}
.indice.ancien{opacity:.6}
.plus{border:1px solid var(--trait);background:var(--surface);border-radius:2px;width:22px;height:22px;
  cursor:pointer;color:var(--tirage);font-size:15px;line-height:1;margin-left:6px;padding:0;vertical-align:middle}
.plus:hover{background:var(--tirage);border-color:var(--tirage);color:var(--sur-tirage)}
tr.version td{background:var(--surface2);padding-top:6px;padding-bottom:6px;font-size:12.5px}
tr.version:hover td{background:var(--surface2)}
.ligne-version{padding-left:44px;color:var(--doux);display:flex;gap:8px;align-items:center}
.ligne-version .courant{color:var(--visa);font-weight:500}

.etiquette{display:inline-flex;align-items:center;font-size:11.5px;padding:2px 7px;border-radius:2px;white-space:nowrap}
.etiquette.lecture{background:var(--tirage-c);color:var(--tirage)}
.etiquette.depot{background:var(--visa-c);color:var(--visa)}
.etiquette.gestion{background:var(--gestion-c);color:var(--gestion)}
.etiquette.aucun{background:var(--masque-c);color:var(--masque)}

.vide{padding:32px 16px;text-align:center;color:var(--doux)}
.vide p{margin:0 0 12px}

/* ---------- Boutons ---------- */
.btn{display:inline-block;border:1px solid var(--trait-fort);background:var(--surface);color:var(--encre);
  border-radius:var(--r);padding:6px 12px;cursor:pointer;font-size:13px;font-weight:500;text-decoration:none}
.btn:hover{border-color:var(--doux)}
.btn.primaire{background:var(--tirage);border-color:var(--tirage);color:var(--sur-tirage)}
.btn.primaire:hover{filter:brightness(1.1)}
.btn.petit{padding:3px 9px;font-size:12px}
/* Un bouton qui porte une flèche. Elle recule d'un cheveu au survol : elle
   dit vers où l'on repart. Défini ici et non dans chaque écran, pour que
   l'explorateur et les visionneuses n'en aient qu'une seule version. */
.btn.retour{display:inline-flex;align-items:center;gap:6px}
.retour svg{flex:0 0 auto;transition:transform .15s}
.retour:hover svg{transform:translateX(-2px)}
@media (prefers-reduced-motion:reduce){ .retour:hover svg{transform:none} }
.btn.fantome{border-color:var(--trait);color:var(--doux)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Bouton d'ouverture du visionneur IFC */
.btn.oeil{display:inline-flex;align-items:center;gap:6px;
  border-color:var(--gestion);color:var(--gestion);background:var(--gestion-c)}
.btn.oeil:hover{background:var(--gestion);color:#fff;border-color:var(--gestion)}
.btn.oeil svg{display:block}

/* ---------- Formulaires ---------- */
.champ{margin-bottom:13px}
.champ label{display:block;font-size:12.5px;color:var(--doux);margin-bottom:4px}
.champ input,.champ select,.champ textarea{width:100%;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--r);padding:8px 10px;font-size:13.5px}
.champ.case label{display:flex;align-items:center;gap:8px;color:var(--encre);font-size:13.5px}
.champ.case input{width:auto}
.deux{display:flex;gap:12px}
.deux .champ{flex:1}
select{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:5px 7px;font-size:13px}

/* ---------- Fenêtres modales ---------- */
.voile{position:fixed;inset:0;background:rgba(10,16,22,.5);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:50}
.voile[hidden]{display:none}
.fenetre{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);
  width:min(560px,100%);max-height:88vh;overflow:auto;box-shadow:0 18px 40px rgba(10,16,22,.28)}
.fenetre header{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--trait)}
.fenetre header h2{font-size:15px}
.fenetre .contenu{padding:16px}
.fenetre footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--trait)}
.fermer{background:none;border:1px solid var(--trait);border-radius:var(--r);width:30px;height:30px;
  cursor:pointer;color:var(--doux);font-size:16px;line-height:1}
.progression{height:6px;background:var(--surface2);border:1px solid var(--trait);
  border-radius:99px;overflow:hidden;margin:14px 0 8px}
.progression .barre{height:100%;width:0;background:var(--tirage);transition:width .15s linear}
.etat{margin:0}

/* ---------- Matrice des droits ---------- */
.matrice-cadre{overflow-x:auto;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r)}
table.matrice{min-width:720px}
table.matrice th.col-groupe{text-align:center;min-width:140px;border-left:1px solid var(--trait);color:var(--encre);font-size:12.5px}
table.matrice td{padding:6px 10px}
table.matrice td.cellule{border-left:1px solid var(--trait);text-align:center}
table.matrice td.cellule form{margin:0}
.etiquette-dossier{display:flex;align-items:center;gap:8px;white-space:nowrap}
.etiquette-dossier .code{font-family:var(--mono);font-size:11px;color:var(--doux)}
select.droit{width:100%;border:1px solid transparent;background:var(--surface2);
  border-radius:2px;padding:4px 6px;font-size:12.5px;cursor:pointer}
select.droit:hover{border-color:var(--trait-fort)}
select.droit.lecture{background:var(--tirage-c);color:var(--tirage)}
select.droit.depot{background:var(--visa-c);color:var(--visa)}
select.droit.gestion{background:var(--gestion-c);color:var(--gestion)}
select.droit.aucun{background:var(--masque-c);color:var(--masque)}
select.droit.herite{opacity:.62;font-style:italic}
.legende{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--doux)}
.legende div{display:flex;align-items:center;gap:6px}
.pastille-c{width:12px;height:12px;border-radius:2px;display:inline-block}
.pastille-c.aucun{background:var(--masque-c)}
.pastille-c.lecture{background:var(--tirage-c)}
.pastille-c.depot{background:var(--visa-c)}
.pastille-c.gestion{background:var(--gestion-c)}

/* ---------- Cartes de groupes ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:14px}
.carte h3{margin:0 0 2px;font-size:14.5px;font-weight:600}
.jetons{margin:10px 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.jeton{font-size:12px;background:var(--surface2);border:1px solid var(--trait);border-radius:2px;padding:2px 7px}
.pastille{font-size:11.5px;padding:2px 8px;border-radius:99px}
.pastille.active{background:var(--visa-c);color:var(--visa)}
.pastille.attente{background:var(--orange-c);color:var(--orange)}

/* ---------- Journal ---------- */
.journal .ligne-journal{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--trait);font-size:13px}
.journal .ligne-journal:last-child{border-bottom:0}
.journal time{font-family:var(--mono);font-size:11.5px;color:var(--doux);flex:0 0 130px}
.journal .qui{font-weight:500}
.pagination{display:flex;align-items:center;gap:12px;margin-top:14px}

/* ---------- Pages de connexion ---------- */
body.centre{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.carte-connexion{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);
  padding:26px;width:min(400px,100%)}
.carte-connexion.large{width:min(560px,100%)}
.carte-connexion h1{margin-bottom:14px}
.enseigne{margin-bottom:20px}
.enseigne b{display:block;font-size:18px;letter-spacing:-.02em}
.enseigne span{font-size:12.5px;color:var(--doux)}
.carte-connexion .btn{width:100%;text-align:center}
.aide{color:var(--doux);font-size:12.5px;margin:16px 0 0}
.liste-etapes{color:var(--doux);font-size:13px;padding-left:18px;margin:0 0 16px}

/* ---------- Page de présentation ---------- */
body.presentation{display:flex;flex-direction:column;min-height:100vh;background:var(--papier)}
.tete-accueil{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px;border-bottom:1px solid var(--trait);background:var(--surface);flex-wrap:wrap}
.enseigne-accueil b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em}
.enseigne-accueil span{font-size:12.5px;color:var(--doux)}
.scene{flex:1;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:0;max-width:100%}
.piste{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform}
@media (prefers-reduced-motion:reduce){.piste{transition:none}}
.diapo{flex:0 0 100%;min-width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:48px;align-items:center;padding:44px 48px;max-width:1180px;margin:0 auto}
.diapo .propos{max-width:56ch}
.diapo h2{font-size:32px;font-weight:700;letter-spacing:-.025em;margin:10px 0 6px;line-height:1.1}
.diapo .accroche{font-size:17px;color:var(--encre);margin:0 0 14px;font-weight:500}
.diapo p{color:var(--doux);margin:0 0 16px;line-height:1.55}
.statut{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:2px}
.statut.ouvert{background:var(--visa-c);color:var(--visa)}
.statut.chantier{background:var(--orange-c);color:var(--orange)}
.points-cles{list-style:none;padding:0;margin:0 0 20px;border-top:1px solid var(--trait)}
.points-cles li{padding:9px 0 9px 18px;border-bottom:1px solid var(--trait);
  font-size:13.5px;position:relative}
.points-cles li::before{content:'';position:absolute;left:0;top:16px;
  width:7px;height:1px;background:var(--trait-fort)}
.illustration{color:var(--encre);display:flex;justify-content:center}
.illustration svg{width:100%;max-width:400px;height:auto}
.illustration .remplissage rect,.illustration .remplissage path{fill:var(--surface2);
  stroke:var(--trait-fort);stroke-width:1}
.illustration .remplissage .accent{fill:var(--tirage-c);stroke:var(--tirage);stroke-opacity:.5}
.illustration .remplissage .fait{fill:var(--visa-c);stroke:var(--visa);stroke-opacity:.4}
.illustration .lettre{font-family:var(--mono);font-size:13px;fill:var(--tirage)}
.illustration .epingle circle{fill:var(--alerte-c);stroke:var(--alerte);stroke-width:1.2}
.commandes{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 30px}
.fleche{width:38px;height:38px;border:1px solid var(--trait);background:var(--surface);
  border-radius:50%;cursor:pointer;color:var(--doux);font-size:20px;line-height:1}
.fleche:hover{border-color:var(--trait-fort);color:var(--encre)}
.points{display:flex;gap:8px}
.point-diapo{width:9px;height:9px;border-radius:50%;border:1px solid var(--trait-fort);
  background:none;padding:0;cursor:pointer}
.point-diapo.actif{background:var(--tirage);border-color:var(--tirage)}
.pied-accueil{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 26px;border-top:1px solid var(--trait);background:var(--surface);
  font-size:12.5px;color:var(--doux)}

@media (max-width:880px){
  .diapo{grid-template-columns:1fr;gap:26px;padding:26px 20px}
  .diapo h2{font-size:25px}
  .illustration{order:-1}
  .illustration svg{max-width:280px}
  .tete-accueil{padding:14px 18px}
}

@media (max-width:880px){
  .corps{flex-direction:column}
  .rail{width:100%;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--trait);
    display:flex;gap:4px;overflow-x:auto;padding:8px}
  .rail a{white-space:nowrap;margin:0}
  .explorateur{grid-template-columns:1fr}
  .hide-s{display:none}
  .principal{padding:14px}
  .projet .nom{max-width:50vw}
  .deux{flex-direction:column;gap:0}
}

/* ---------- Glissement entre écrans ----------
   Transition de navigation entre documents : le navigateur photographie
   l'écran sortant et l'écran entrant, puis les anime. Pas de JavaScript,
   et le bouton Retour continue de fonctionner normalement.

   Les deux documents doivent déclarer @view-transition, d'où sa place ici,
   dans la feuille que toutes les pages chargent.

   Les écrans sont rangés sur un axe : le tableau de travail à gauche, la
   boîte à plans au centre, les visionneuses à droite. Le sens du glissement
   dépend donc du trajet, pas de la page d'arrivée — l'explorateur est
   abordé par la gauche en venant d'une visionneuse, et par la droite en
   venant du tableau. Une règle fixe dans chaque page ne saurait pas le dire.

   C'est transitions.js qui pose data-sens sur <html> avant le premier rendu,
   et les deux jeux d'animations ci-dessous s'y accrochent.

   Là où l'API n'existe pas — Firefox à ce jour — la navigation reste
   instantanée : rien ne casse, l'effet est simplement absent. */

@view-transition{ navigation:auto }

/* Nommer le bandeau le sort de l'instantané de la page : il est capturé
   à part et n'est donc pas emporté par le glissement. Comme il occupe la
   même place sur les deux écrans, il ne bouge pas — c'est le contenu qui
   glisse dessous. */
.topbar{ view-transition-name:bandeau }

@keyframes glisse-entre-gauche{ from{ transform:translateX(-100%) } }
@keyframes glisse-entre-droite{ from{ transform:translateX(100%)  } }
@keyframes glisse-sort-gauche { to  { transform:translateX(-100%) } }
@keyframes glisse-sort-droite { to  { transform:translateX(100%)  } }

/* « avant » : on s'enfonce vers la droite de l'axe. */
html[data-sens="avant"]::view-transition-old(root){
  animation:.26s cubic-bezier(.4,0,.2,1) both glisse-sort-gauche;
}
html[data-sens="avant"]::view-transition-new(root){
  animation:.26s cubic-bezier(.4,0,.2,1) both glisse-entre-droite;
}

/* « arriere » : on revient vers la gauche de l'axe. */
html[data-sens="arriere"]::view-transition-old(root){
  animation:.26s cubic-bezier(.4,0,.2,1) both glisse-sort-droite;
}
html[data-sens="arriere"]::view-transition-new(root){
  animation:.26s cubic-bezier(.4,0,.2,1) both glisse-entre-gauche;
}

/* Un glissement plein écran est exactement ce qui déclenche les nausées
   vestibulaires : on le remplace par un fondu court. Sortant et entrant
   ont des fondus distincts — un seul pour les deux ferait réapparaître
   l'écran qu'on quitte. */
@keyframes fondu-sort { to  { opacity:0 } }
@keyframes fondu-entre{ from{ opacity:0 } }

@media (prefers-reduced-motion:reduce){
  html[data-sens]::view-transition-old(root){ animation:.12s ease both fondu-sort  }
  html[data-sens]::view-transition-new(root){ animation:.12s ease both fondu-entre }
}