/* Gabarit des pages de l'Atelier (avis d'Archi §2.2, PF-06, PF-08) : réinitialisation, en-tête, bandeau du projet, zone de
   messages, pied, zone de contenu, menu latéral, petits écrans. L'en-tête, le bandeau du projet, la barre des étapes, la zone de
   messages et le pied sont écrits par commun/coquille.js (et commun/etapes.js).
   La mise en page seulement : les composants sont dans composants.css, les jetons dans theme.css.
   Toutes les pages chargent ce seul fichier : <link rel="stylesheet" href="/commun/coquille.css"> (l'éditeur ajoute ensuite
   meuble/atelier.css). Plus de bloc transitoire ni de classe « coquille » depuis PF-08 (É6).
   :has() (Chrome / Edge 105, Safari 15.4) sert seulement à deux règles de composants.css (ligne de tableau qui s'ouvre, liste
   des fenêtres), à la zone de messages et à l'étiquette d'une case à cocher, ci-dessous (un navigateur plus ancien garde
   seulement l'étiquette plus petite). Polices Montserrat et Figtree : Google Fonts, toléré jusqu'à F15 (autonomie hors ligne). */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700;800&family=Figtree:wght@300;400;500;600&display=swap");
@import url("theme.css");
@import url("composants.css");

/* ----- réinitialisation ----- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;min-height:100vh;display:flex;flex-direction:column}
body > :is(main, .zone-messages, .refus){width:100%}
button,input,select{font:inherit;color:inherit}
input,select{background:var(--pv-fond);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
input:focus-visible,select:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
/* champs : 44 px au doigt (en attendant le composant Champ) ; une case à cocher se touche par son étiquette.
   Poids zéro (:where) : l'éditeur, dont les panneaux sont denses, garde ses champs (meuble/atelier.css, S11) */
:where(input:not([type=checkbox]):not([type=radio]), select){min-height:var(--cible)}
:where(label:has(> input[type=checkbox])){min-height:var(--cible)}
code{font-family:inherit;word-break:break-all}
/* la page reste masquée tant que la coquille n'a pas vérifié la connexion et le droit (commun/coquille.js) */
body:not(.pret) > :is(main, #contenu){visibility:hidden}

/* ----- en-tête (commun/coquille.js) : logo, navigation selon les droits, personne connectée ; collé en haut ----- */
.haut{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;min-height:64px;padding:10px var(--marge-page);
  background:var(--bg);border-bottom:1px solid var(--line)}
.haut a{color:inherit;text-decoration:none}
.haut .logo{display:inline-flex;align-items:center;min-height:var(--cible);border-radius:8px}
.haut .typo{height:22px}
.haut a:focus-visible,.moi:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.spacer{flex:1}
.nav-principale{display:flex;gap:6px}
.nav-principale a{display:inline-flex;align-items:center;min-height:var(--cible);padding:0 16px;border-radius:999px;font-weight:500}
.nav-principale a:hover{background:var(--accent-survol)}
.nav-principale a[aria-current="page"]{background:var(--accent-actif);box-shadow:inset 0 -2px 0 var(--pv-orange)}
.btn-menu{display:none}
.personne{position:relative}
.moi{display:flex;align-items:center;gap:8px;min-height:var(--cible);background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:5px 14px 5px 8px;cursor:pointer}
.moi .pastille{width:30px;height:30px;border-radius:50%;background:var(--pv-marin);display:grid;place-items:center;font-weight:600;
  font-size:13px}
.moi .role{font-size:12px;color:var(--muted)}
.menu-personne{position:absolute;right:0;top:calc(100% + 6px);z-index:6;display:grid;gap:8px;min-width:220px;padding:10px;
  background:var(--panel);border:1px solid var(--line-fort);border-radius:12px;box-shadow:var(--ombre-fenetre)}

/* ----- bandeau du projet (mode « projet » : projet, éditeur, Van en 3D) : client · véhicule · étape de vente · version · état
   d'enregistrement, puis la barre des 5 étapes ; contenu pleine largeur, pas de pied (plein travail) ----- */
.bandeau-projet{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px var(--marge-page);border-bottom:1px solid var(--line);
  background:var(--bg)}
.bandeau-projet .etapes{margin-left:auto}
.mode-projet .zone-messages{max-width:none;padding:10px var(--marge-page) 0}
/* barre propre à une page du projet (outils de l'éditeur, vue interne du projet), sous la zone de messages */
.barre-page{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px var(--marge-page) 0}

/* ----- zone de messages (sous l'en-tête) et pied ----- */
.zone-messages{display:grid;gap:8px;max-width:var(--contenu-max);margin:0 auto;padding:var(--marge-page) var(--marge-page) 0}
.pied{display:flex;align-items:center;gap:16px;min-height:48px;margin-top:auto;padding:10px var(--marge-page);border-top:1px solid var(--line);
  color:var(--muted);font-size:13px}

/* ----- zone de contenu ----- */
body > main{max-width:var(--contenu-max);margin:0 auto;padding:var(--marge-page);display:grid;gap:var(--marge-page)}
h1{font-size:22px;margin:0 0 6px}
.intro{color:var(--muted);font-size:14px;margin:0 0 18px}
.rang{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.rang label.large{flex:1;min-width:280px}
.rang label.large input{width:100%}
input.court{width:110px}

/* panneau latéral caché : le contenu prend toute la largeur */
main:has(> aside[hidden]){grid-template-columns:minmax(0,1fr)}

/* page « Projets » (accueil, PF-12) : bonjour et « Nouveau projet » sur une ligne, « À traiter », cartes des récents, liste */
main.accueil{grid-template-columns:minmax(0,1fr);align-content:start}
main.accueil > *{min-width:0} /* la liste défile dans son cadre (.tablewrap), jamais la page */
.accueil-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.accueil-tete h1{margin:0}
.accueil h2{font-family:var(--f-soustitre);font-weight:300;letter-spacing:.25em;text-transform:uppercase;font-size:13px;color:var(--muted);
  margin:0 0 12px}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
/* carte d'un projet : le lien couvre toute la carte ; « Présenter » (É8) reste touchable par-dessus */
.carte.carte-projet{position:relative;margin:0;border-radius:10px;padding:14px 16px}
.carte-projet:hover,.carte-projet:focus-within{border-color:var(--pv-orange)}
.carte-projet .carte-lien{color:inherit;text-decoration:none}
.carte-projet .carte-lien::after{content:'';position:absolute;inset:0;border-radius:10px}
.carte-projet .carte-lien:focus-visible{outline:none}
.carte-projet .carte-lien:focus-visible::after{outline:2px solid var(--pv-orange);outline-offset:2px}
.carte-projet .carte-lien b{display:block;font-size:16px}
.carte-projet .btn{position:relative;z-index:1}
.carte-projet .qui{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.carte-projet .qui > span{white-space:nowrap}
.carte-projet .qui .btn{margin-left:auto}
.carte-projet .version{margin-left:auto}
.liste-masquee{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.liste-masquee .btn{margin-left:auto}
/* menu « … » d'une carte (PF-14) : actions secondaires (Changer l'étape, Archiver), ouvertes par un <details> de 44 px */
.carte-projet .carte-lien{display:block;padding-right:40px}
.carte-projet .menu-carte{position:absolute;top:6px;right:6px;z-index:2}
.menu-carte summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-width:var(--cible);
  min-height:var(--cible);border-radius:999px;cursor:pointer;color:var(--muted);font-size:20px;line-height:1}
.menu-carte summary::-webkit-details-marker{display:none}
.menu-carte summary:hover,.menu-carte[open] summary{background:var(--accent-survol)}
.menu-carte summary:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.menu-liste{position:absolute;right:0;top:100%;display:grid;gap:6px;min-width:180px;padding:10px;background:var(--panel);
  border:1px solid var(--line-fort);border-radius:12px;box-shadow:var(--ombre-fenetre)}
.accueil .lien-archives{margin:0;text-align:right;font-size:13.5px}
.lien-archives a{display:inline-flex;align-items:center;min-height:var(--cible);color:var(--muted)}
.accueil .plus{margin:12px 0 0;text-align:center}
.accueil #tous td[colspan]{color:var(--muted)}
.accueil td a.nom{display:inline-flex;align-items:center;min-height:var(--cible)} /* cible au doigt, comme les boutons de la ligne */
.a-traiter{border:1px dashed var(--line);border-radius:10px;padding:12px 16px}
.illisibles{font-size:13px;color:var(--muted)}
.illisibles b{color:var(--ink);font-weight:600}
.illisibles ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}
.illisibles code{color:var(--ink)}

/* page « Kits » (lecture, sans coûts) : une carte par kit, sa composition au prix de vente */
main.kits-vente{grid-template-columns:minmax(0,1fr);align-content:start}
.grille-kits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.kits-vente .carte{margin:0;min-width:0}
.kits-vente .carte h2{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.kits-vente .carte h2 .total{margin-left:auto;font-family:var(--f-corps);font-weight:600}
.kits-vente .tablewrap > table{font-size:13.5px}
.kits-vente th.num{text-align:right}

/* page à sections : menu latéral (main > nav) et contenu (Gestion) */
main.sections{max-width:1100px;grid-template-columns:220px minmax(0,1fr)}
main.sections > *{min-width:0} /* un tableau large défile dans son cadre (.tablewrap), jamais la page */
.sections td.act{white-space:normal;width:auto;min-width:150px}
.sections td.act .btn{margin:2px 0 2px 4px}
.sections h2 + p{margin:0 0 8px}
.sections ul{margin:0;padding-left:18px}
.sections td a{color:inherit}
.sections td > span{white-space:nowrap}
.sections .erreur,.sections .ok{margin-top:8px}
main > nav{display:flex;flex-direction:column;gap:6px}
main > nav a{display:flex;align-items:center;min-height:var(--cible);padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:inherit;text-decoration:none}
main > nav a[aria-current="page"]{border-color:var(--pv-orange);background:var(--accent-actif)}
main > nav a:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}

/* gabarit A « Accès » (commun/acces.js) : une carte au centre, sans navigation (connexion, session terminée, page introuvable) */
main.acces{display:block;max-width:460px;padding-top:56px}
.acces-carte{display:grid;gap:12px;padding:28px 24px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-align:center}
.acces-carte h1{font-family:var(--f-titre);font-size:24px;margin:0}
.acces-carte .intro{margin:0}
.acces-logo{width:88px;height:88px;margin:0 auto}
.acces-etat{margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.acces-form{display:grid;gap:6px;text-align:left}
.acces-form label{font-size:14px;color:var(--muted);margin-top:6px}
.acces-form input{width:100%}
.acces-form .btn.primary{width:100%;margin-top:8px}
.champ-mdp{display:flex;gap:8px}
.champ-mdp input{flex:1;min-width:0}
.lien-acces{display:inline-flex;align-items:center;justify-content:center;min-height:var(--cible);color:inherit}
.acces-carte > .btn{justify-self:center}

/* page « Mon compte » : une carte par sujet, formulaire en colonne */
main.compte{max-width:640px}
.compte dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0}
.compte dt{color:var(--muted)}
.compte dd{margin:0}
.compte .sessions{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.compte .sessions li{display:flex;justify-content:space-between;align-items:center;gap:12px}
.compte form{display:grid;gap:6px;max-width:420px}
.compte form .btn.primary{justify-self:start;margin-top:8px}
/* bandeau d'une section de Gestion (un seul administrateur actif) */
.avis{margin:0 0 16px;padding:10px 14px;border:1px solid var(--pv-orange);border-radius:10px;background:var(--accent-actif)}

/* vue d'un projet pour le client et la télé (commun/vue-projet.js, É7) ; page « Mon projet » (gabarit D) */
main.mon-projet{max-width:760px;align-content:start;padding-bottom:120px}
.vp-salut{font-family:var(--f-titre);font-size:22px;margin:0}
.vue-projet{display:grid;gap:18px}
.vp-tete h1{font-family:var(--f-titre);font-size:30px;margin:0}
.vp-vehicule{margin:2px 0 0;color:var(--pv-beige)}
.vp-progression h2{font-family:var(--f-soustitre);font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:12.5px;
  color:var(--muted);margin:0 0 10px}
.vp-points{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.vp-points li{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.vp-points li.fait{color:var(--ink);border-color:var(--pv-beige)}
.vp-points li.ici{color:var(--pv-blanc);border-color:var(--pv-orange);background:var(--accent-actif);font-weight:600}
.vp-confirme{margin:10px 0 0;font-weight:600}
.vp-prepare{margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.vp-resume{width:100%;border-collapse:collapse}
.vp-resume caption{text-align:left;font-family:var(--f-soustitre);letter-spacing:.22em;text-transform:uppercase;font-size:12.5px;
  color:var(--muted);padding-bottom:8px}
.vp-resume td{padding:8px 0;border-top:1px solid var(--line)}
.vp-resume td:last-child{text-align:right;white-space:nowrap}
.vp-resume tfoot td{font-weight:700;border-top:2px solid var(--line-fort)}
.vp-version{margin:0;font-size:13px;color:var(--muted)}
/* écrans de section (É8) : choix retenus marqués, choix offerts plus discrets ; « Ma soumission » du client, sections dépliables */
.vp-retenu{display:inline-block;margin-right:10px;padding:1px 10px;border-radius:999px;border:1px solid var(--pv-orange);
  background:var(--accent-actif);color:var(--pv-blanc);font-size:12.5px;font-weight:600;vertical-align:middle}
.vp-resume tr.offert td{color:var(--muted)}
.vp-resume .vp-autres td{color:var(--muted);font-style:italic;text-align:left}
.vp-soumission h2{font-family:var(--f-soustitre);font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:12.5px;
  color:var(--muted);margin:0 0 10px}
.vp-deplier{border-top:1px solid var(--line)}
.vp-deplier summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--cible);cursor:pointer;
  font-weight:600}
.vp-deplier .vp-section{margin-bottom:12px}
.vp-bas{position:fixed;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:14px 16px;
  background:var(--pv-marin);color:var(--pv-blanc);font-weight:600}
.vp-point{color:var(--pv-beige)}
.squelette{height:18px;border-radius:8px;background:var(--panel)}
.squelette.titre{height:34px;width:60%}
.squelette.bloc{height:220px}
/* carte « Accès du client » (commun/acces-client.js) sur la page du projet */
.acces-clients{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.acces-clients li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--pv-fond);border-radius:8px;padding:6px 8px}
.acces-clients li > span{flex:1;min-width:160px}
.acces-clients small{color:var(--muted)}

/* page refusée : message centré et bouton de retour */
.refus{max-width:520px;margin:80px auto;padding:0 var(--marge-page-etroite);text-align:center}

/* ----- petits écrans ----- */
/* sous 900 px : marges étroites ; la navigation passe dans le bouton « Menu » (44 px, texte visible), ouverte sous l'en-tête */
@media (max-width:900px){
  body > main{padding:var(--marge-page-etroite)}
  main.acces{padding-top:32px}
  .haut{gap:10px;padding:10px var(--marge-page-etroite)}
  .zone-messages,.mode-projet .zone-messages{padding:var(--marge-page-etroite) var(--marge-page-etroite) 0}
  .bandeau-projet{padding:8px var(--marge-page-etroite)}
  .bandeau-projet .etapes{margin-left:0}
  .barre-page{padding:10px var(--marge-page-etroite) 0}
  .pied{padding:10px var(--marge-page-etroite)}
  .btn-menu{display:inline-flex}
  .nav-principale{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:8px var(--marge-page-etroite);
    background:var(--bg);border-bottom:1px solid var(--line)}
  .nav-principale.ouverte{display:flex}
  main.sections{grid-template-columns:1fr}
  main.sections > nav{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:560px){.moi .role{display:none}}