/* Page Rozan : mise en page propre à l'application, posée sur rouage-tokens.css (copie de
   styles/rouage-tokens.css, jamais modifiée ici). Aucune couleur, aucun rayon ni aucune
   police en dur : tout vient des tokens (docs/DESIGN.md). Application : grille atténuée,
   verre pour l'en-tête et la connexion, données sur surface opaque ou creux. */

[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh}
p{margin:0}
h1,h2,h3{margin:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Lien d'évitement : visible au focus clavier seulement */
.lien-evitement{
  position:absolute;left:16px;top:-120px;z-index:30;padding:12px 18px;border-radius:var(--r-pill);
  background:var(--ink-900);color:var(--blanc);font-weight:600;text-decoration:none;
}
.lien-evitement:focus{top:16px}

/* En-tête : verre doux, collant */
.entete{position:sticky;top:0;z-index:10;padding:12px var(--gutter) 0}
.entete__barre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  max-width:var(--max);min-height:64px;margin-inline:auto;padding:8px 10px 8px 24px;border-radius:var(--r-pill);
}
.marque{display:flex;flex-direction:column;gap:2px;min-width:0}
.marque__nom{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:-.01em;color:var(--ink-900)}
.marque__sous{color:var(--ink-500)}
.entete__onglets{display:flex;min-width:0;order:2}
@media (min-width:1024px){
  /* Onglets au centre de la barre, entre la marque et la session */
  .entete__onglets{order:0;flex:1 1 auto;justify-content:center}
}
.entete__session{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.entete__identite{font-size:14px;color:var(--ink-700);overflow-wrap:anywhere}
.entete__identite strong{font-weight:600;color:var(--ink-900)}
@media (max-width:639px){
  /* Sur téléphone, l'en-tête sur trois lignes ne colle pas : il mangerait l'écran */
  .entete{position:static}
  .entete__barre{border-radius:var(--r-sub);padding:12px 12px 12px 16px}
}

/* Page */
.page{padding-block:32px 72px}
.page:focus{outline:none}
.titre-page{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.titre-page h1:focus,.connexion h1:focus{outline:none}
.titre-page__intro{max-width:70ch}
.titre-page__alerte{max-width:70ch;padding:12px 16px;border-radius:var(--r-ctrl);background:var(--well)}

/* Connexion et démarrage : verre, centré */
.connexion{
  display:flex;flex-direction:column;gap:20px;max-width:440px;margin:24px auto 0;padding:32px;
}
.connexion__formulaire{display:flex;flex-direction:column;gap:16px}
.connexion__formulaire .rg-btn{align-self:flex-start}
.demarrage{max-width:440px;margin:24px auto 0}
@media (max-width:639px){
  .connexion{padding:24px 20px;border-radius:var(--r-sub)}
}

/* Zones : une colonne, puis deux colonnes (5/7 et 7/5) à partir de 1024 px.
   L'ordre visuel reste celui du document (gauche à droite, haut en bas). */
.zones{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1024px){
  .zones{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .zone--deposer{grid-column:span 5}
  .zone--recap{grid-column:span 7}
  .zone--questions{grid-column:span 7}
  .zone--actions{grid-column:span 5}
  .zone--reste{grid-column:span 12}
}
.zone{display:flex;flex-direction:column;gap:20px;min-width:0;padding:24px}
.zone:focus{outline:none}
.zone:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px}
.zone__tete{display:flex;align-items:center;gap:12px}
.zone__corps,.action__corps{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:639px){
  .zone{padding:20px 16px}
}

/* Les libellés longs passent à la ligne plutôt que de déborder (390 px) */
.zones .rg-btn{max-width:100%;white-space:normal;text-align:center}

/* États de données */
.etat-chargement{display:flex;flex-direction:column;gap:10px}
.etat-chargement__bande{height:18px}
.etat-chargement__bande:first-of-type{height:28px}
.etat-vide{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;border-radius:var(--r-sub);background:var(--well)}
.etat-erreur{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px;border-radius:var(--r-sub);background:var(--well);box-shadow:inset 0 0 0 1px var(--danger-line)}

/* Dépôt */
.depot{display:flex;flex-direction:column;gap:16px}
.depot__cible{
  display:flex;flex-direction:column;gap:10px;padding:20px;
  border:1px dashed var(--line-strong);
  transition:border-color var(--ease-dur) var(--ease-out),background var(--ease-dur) var(--ease-out);
}
.depot__cible[data-survol]{border-color:var(--action);background:var(--fill-hover)}
.champ-fichier{width:100%;max-width:100%;color:var(--ink-700);font-family:var(--font-sans);font-size:14px}
.champ-fichier::file-selector-button{
  min-height:44px;margin-right:12px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:var(--ghost);color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--line-strong);
  font-family:var(--font-sans);font-weight:500;font-size:14px;cursor:pointer;
}
.champ-fichier:disabled{opacity:.5;cursor:not-allowed}
.champ-fichier:disabled::file-selector-button{cursor:not-allowed}
.depot__statut{display:flex;flex-direction:column;gap:10px;min-width:0}
.depot__statut:empty{display:none}
.depot__message{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--ink-900)}
.depot__fichier{font-size:14px;color:var(--ink-700);overflow-wrap:anywhere}
.depot__nom{font-family:var(--font-mono);color:var(--ink-900)}
.progression{height:6px;border-radius:var(--r-pill)}

/* Récap */
.recap__depot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-weight:500;color:var(--ink-900)}
.recap__id{color:var(--ink-500)}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tuile{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px}
.tuile__titre{color:var(--ink-500)}
.tuile__valeur{font-weight:500;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink-900)}
.tuile__valeur--texte{font-family:var(--font-sans);font-size:17px;line-height:1.2;letter-spacing:0}
.tuile__detail{font-size:13px;line-height:1.4;color:var(--ink-500)}

/* Tableaux : défilement interne de secours, fiches empilées sous 640 px */
.tableau-defilant{max-width:100%;overflow-x:auto;border-radius:var(--r-sub);background:var(--well)}
.rg-table th.col-num{text-align:right}
.rg-table td .rg-badge{vertical-align:middle}
@media (max-width:639px){
  .tableau-defilant{overflow-x:visible;padding:4px 16px}
  .empilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .empilable,.empilable tbody,.empilable tr,.empilable td{display:block;width:100%}
  .empilable tr{padding:10px 0;border-bottom:1px solid var(--line-faint)}
  .empilable tr:last-child{border-bottom:0}
  .empilable td,.empilable tr:last-child td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:5px 0;border:0;text-align:right}
  .empilable td::before{
    content:attr(data-libelle);flex:none;text-align:left;color:var(--ink-500);
    font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  }
}

/* Questions */
.questions{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.question{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 20px}
.question__resa{color:var(--ink-500)}
.question__detail{overflow-wrap:anywhere}
.question__boutons{display:flex;flex-wrap:wrap;gap:8px}
.question__offre{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.question__offre .rg-field{flex:1 1 14rem;min-width:0}
.question .rg-hint:empty,.question .rg-error:empty{display:none}
.questions__retour{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--ink-900)}

/* Encadré d'état qui porte des boutons : fond et liseré de la couleur d'état, texte encre */
.encadre{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px}
.encadre--attention{background:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-line)}
.encadre__boutons{display:flex;flex-wrap:wrap;gap:8px}
.encadre .rg-body:focus{outline:none}

/* Actions */
.action{display:flex;flex-direction:column;gap:12px;min-width:0}
.action + .action{padding-top:20px;border-top:1px solid var(--line-faint)}
.action__bouton{display:flex;flex-wrap:wrap;gap:8px}
.resultat{display:flex;flex-direction:column;gap:12px;padding:16px 20px}
.resultat:focus{outline:none}
.resultat:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px}
.resultat__titre{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink-900)}
.resultat .rg-meta{color:var(--ink-500);margin-bottom:6px}
.liste-simple{margin:0;padding-left:18px;color:var(--ink-900);font-size:14px;line-height:1.6}
.execution{padding:4px 20px}
.execution dd{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}

/* Reste à faire */
.reste{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.reste__ligne{
  display:grid;grid-template-columns:9rem minmax(0,1fr) auto;align-items:baseline;gap:8px 20px;
  padding:14px 0;border-bottom:1px solid var(--line-faint);
}
.reste__ligne:first-child{padding-top:0}
.reste__ligne:last-child{border-bottom:0;padding-bottom:0}
.reste__texte{display:flex;flex-direction:column;gap:4px;min-width:0}
.reste__ref{font-weight:500;color:var(--ink-900)}
.reste__libelle{color:var(--ink-700);overflow-wrap:anywhere}
.reste__du{white-space:nowrap;color:var(--ink-900)}
.reste__du .rg-meta{color:var(--ink-500)}
@media (max-width:639px){
  .reste__ligne{grid-template-columns:minmax(0,1fr)}
  .reste__du{white-space:normal}
}


/* Onglets : le contrôle segmenté du design system, sans script de pastille */
.entete__onglets .rg-seg{max-width:100%;overflow-x:auto}
.panneau{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Le principe et son schéma masquable */
.principe{display:flex;flex-direction:column;gap:16px;padding:24px}
.principe__tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.principe__texte{max-width:78ch}
.schema{
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none;
}
@media (min-width:640px){.schema{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .schema{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  /* Flèche vers l'étape suivante, dans l'espace entre deux cartes */
  .schema__etape{position:relative}
  .schema__etape:not(:last-child)::after{
    content:"\2192";position:absolute;top:50%;right:-24px;width:20px;transform:translateY(-50%);
    text-align:center;font-size:18px;line-height:1;color:var(--action);pointer-events:none;
  }
}
.schema__etape{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:16px}
.schema__lien{margin-top:auto;color:var(--action-deep);font-size:14px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.schema__lien:hover{text-decoration-color:currentColor}
.schema__lien:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px}
.zone{scroll-margin-top:96px}
@media (max-width:639px){.principe{padding:20px 16px}}

/* Outils en développement */
.encours{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:640px;padding:24px}

/* Assistant : bouton fixe en bas à droite, tiroir de verre dense à droite (feuille plein
   écran sous 640 px), fil des messages, cartes d'action. Sélecteurs préfixés par .rg-plan :
   la planche pose position:relative sur chaque enfant du body. */
.rg-plan>.chat-bouton{
  position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:20;
  min-height:48px;padding:0 24px;
}
.rg-plan>.chat{
  position:fixed;z-index:25;top:12px;right:12px;bottom:12px;
  width:min(440px,calc(100vw - 24px));
  display:flex;flex-direction:column;border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(170deg,var(--glass-dense-top),var(--glass-dense-bottom));
}
@media (min-width:1024px){
  /* Sous l'en-tête collant (une ligne à cette largeur) : la session reste accessible */
  .rg-plan>.chat{top:92px}
}
@media (max-width:639px){
  .rg-plan>.chat{top:0;right:0;bottom:0;left:0;width:auto;height:100dvh;border-radius:var(--r-sub) var(--r-sub) 0 0}
}
.chat__tete{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 20px 16px;border-bottom:1px solid var(--line);
}
.chat__titres{display:flex;flex-direction:column;gap:4px;min-width:0}
.chat__titres h2:focus{outline:none}
.chat__titres h2:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.chat__modele{overflow-wrap:anywhere}
.chat__commandes{display:flex;flex-wrap:wrap;gap:8px}
.chat__corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px}
.chat__fil{display:flex;flex-direction:column;gap:16px}
.chat__fil:empty{display:none}

/* Accueil */
.chat-accueil{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.chat-accueil__texte{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.chat-accueil__inactif{display:flex;flex-direction:column;gap:8px;padding:16px 20px}
.chat-suggestions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:0;list-style:none}
.chat-suggestions li{max-width:100%}
.chat-suggestion{
  appearance:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500;text-align:left;
  min-height:40px;max-width:100%;padding:8px 16px;border-radius:var(--r-pill);
  color:var(--action-deep);background:var(--blanc);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:box-shadow .2s,background .2s;
}
.chat-suggestion:hover{box-shadow:inset 0 0 0 1px var(--action)}
.chat-suggestion:disabled{opacity:.45;cursor:not-allowed}

/* Messages : utilisateur à droite, assistant à gauche */
.chat-msg{display:flex;flex-direction:column;gap:10px;max-width:100%;min-width:0}
.chat-msg--user{align-self:flex-end;max-width:85%}
.chat-msg--user .chat-msg__para{
  padding:10px 14px;border-radius:var(--r-sub);background:var(--action-soft);color:var(--ink-900);
}
.chat-msg--assistant{align-self:stretch}
.chat-msg__bulle{
  display:flex;flex-direction:column;gap:8px;max-width:92%;padding:12px 16px;border-radius:var(--r-sub);
  background:var(--blanc);box-shadow:0 0 0 1px var(--line);color:var(--ink-900);
}
.chat-msg__para{font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.chat-msg__liste{margin:0;padding-left:20px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.chat-msg__liste li + li{margin-top:4px}

/* Cartes d'action */
.chat-cartes{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.chat-carte{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 16px}
.chat-carte:focus{outline:none}
.chat-carte:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.chat-carte__tete{display:flex;flex-wrap:wrap;gap:6px}
.chat-carte__resume{font-weight:500;color:var(--ink-900);overflow-wrap:anywhere}
.chat-carte__boutons{display:flex;flex-wrap:wrap;gap:8px}
.chat-carte__resultat{
  padding:8px 12px;border-radius:var(--r-ctrl);background:var(--success-bg);color:var(--success);
  font-size:14px;overflow-wrap:anywhere;white-space:pre-line;
}
.chat-carte .rg-error{overflow-wrap:anywhere}
.chat-carte--refusee{background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.chat-carte--refusee .chat-carte__resume{font-weight:400;color:var(--ink-500);text-decoration:line-through;text-decoration-color:var(--ink-300)}

/* Bas du panneau : état, erreur, saisie */
.chat__bas{display:flex;flex-direction:column;gap:8px;padding:12px 20px 20px;border-top:1px solid var(--line)}
.chat__etat{font-size:14px;color:var(--ink-700)}
.chat__etat:empty{display:none}
.chat__etat--attente::before{
  content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:var(--r-pill);
  background:var(--action);vertical-align:middle;animation:chat-attente 1s ease-in-out infinite alternate;
}
@keyframes chat-attente{from{opacity:.3}to{opacity:1}}
.chat__erreur{overflow-wrap:anywhere}
.chat__saisie{display:flex;flex-direction:column;gap:8px}
.chat__champ{min-height:84px;max-height:40vh;padding:10px 14px;line-height:1.45;resize:vertical}
.chat__pied{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.chat__compteur{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.chat__compteur--alerte{color:var(--warning)}
.chat__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media (max-width:639px){
  .chat__tete{padding:16px 16px 12px}
  .chat__corps{padding:12px 16px}
  .chat__bas{padding:10px 16px 16px}
  .chat__aide{display:none}
}