/*
 * Peau commune de l'application connectee, validee par Flore le 25 aout 2026.
 * Elle ne change ni le plan, ni les gestes, ni les donnees : seulement le maquillage.
 */

:root{
  --hv-noir:#0b0d0c;
  --hv-cedre:#34462f;
  --hv-cedre-sombre:#26362c;
  --hv-papier:#fbfaf7;
  --hv-lin:#f3f2ed;
  --hv-trait:#cbd0c9;
  --hv-bleu:#3157ff;
  --hv-lavande:#eef0ff;
  --hv-ombre:0 1px 2px rgba(20,30,19,.05),0 12px 32px -26px rgba(20,30,19,.45);
}

body{
  color:var(--hv-noir);
  background:var(--hv-papier);
  font-family:Arial,"Helvetica Neue",sans-serif;
}

body :is(h1,h2,h3),
#vue-travail :is(h1,h2,h3),
#vue-dossiers :is(h1,h2,h3){
  color:var(--hv-noir);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:800;
  letter-spacing:-.025em;
}

#barre-app{
  gap:6px;
  padding:10px 18px;
  flex-wrap:nowrap;
  background:linear-gradient(180deg,var(--hv-cedre),#203524);
  border-bottom:0;
  box-shadow:0 6px 22px rgba(20,35,22,.16);
}

#barre-app .sr-seulement{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#barre-app .marque{
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.04em;
}

#barre-app .marque svg{width:34px;height:34px}

#barre-app .chercheur-dossier-bandeau{
  flex-basis:290px;
  margin-inline:6px 8px;
  align-self:center;
}

#barre-app .chercheur-dossier-bandeau input{
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#barre-app .chercheur-dossier-bandeau input:focus{
  outline:2px solid #aebcff;
  border-color:transparent;
  background:rgba(255,255,255,.14);
}

#barre-app .onglet{
  min-height:38px;
  padding:8px 10px;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:600;
}

#barre-app .onglet.actif{
  position:relative;
  background:transparent;
  color:#fff;
}

#barre-app .onglet.actif::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:-5px;
  left:10px;
  height:3px;
  border-radius:3px;
  background:#fff;
}

#barre-app .ico,
#barre-app .avatar{border-radius:10px}

#barre-app .nouv{
  border-radius:999px;
  background:#fff;
  color:var(--hv-cedre-sombre);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:800;
}

@media(max-width:1180px){
  #barre-app{overflow-x:auto;scrollbar-width:none}
  #barre-app::-webkit-scrollbar{display:none}
  #barre-app .chercheur-dossier-bandeau{flex:0 0 250px;order:initial}
  #barre-app .etude{min-width:145px}
  #barre-app .droite{flex:none}
}

#vue-dossiers,
#vue-nouveau-dossier,
#vue-alertes,
#vue-simulateurs,
#vue-travail{
  color:var(--hv-noir);
}

#vue-dossiers{
  box-sizing:border-box;
  max-width:1440px!important;
  padding:34px 3.5%!important;
}

#vue-dossiers>div:first-child{
  gap:10px 12px!important;
  margin-bottom:8px;
}

#vue-dossiers>div:first-child h2{
  font-size:clamp(28px,3vw,44px);
  line-height:1;
}

#vue-dossiers :is(input[type="search"],input[type="text"],select),
#vue-travail :is(input[type="search"],input[type="text"],input[type="date"],input[type="time"],select,textarea),
#vue-accueil :is(input[type="search"],input[type="text"],select,textarea){
  border:1px solid var(--hv-trait);
  border-radius:10px;
  background:#fff;
  color:var(--hv-noir);
  font-family:Arial,"Helvetica Neue",sans-serif;
  box-shadow:none;
}

#vue-dossiers :is(input,select):focus,
#vue-travail :is(input,select,textarea):focus,
#vue-accueil :is(input,select,textarea):focus{
  outline:2px solid var(--hv-bleu);
  outline-offset:1px;
  border-color:transparent;
}

#vue-dossiers #dossiers-filtre{
  min-height:46px;
  padding:11px 15px;
  font-size:15px;
}

#vue-dossiers .sous-onglets{
  gap:26px;
  margin-top:18px;
  border-bottom-color:#d9ddd7;
}

#vue-dossiers .sous-onglets button{
  padding:13px 2px 11px;
  color:#404440;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:700;
}

#vue-dossiers .sous-onglets button.on{
  color:var(--hv-cedre);
  border-bottom-width:3px;
  border-bottom-color:var(--hv-cedre);
}

#dossiers-filtres{gap:8px;margin-top:18px}

#dossiers-filtres button.fd{
  min-height:40px;
  padding:8px 13px;
  border-color:#d5d9d3;
  border-radius:10px;
  background:#fff;
  color:#252825;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:700;
}

#dossiers-filtres button.fd.on{
  border-color:var(--hv-cedre);
  background:#f2f6ee;
  color:var(--hv-cedre);
}

#dossiers-filtres .cptf{
  border:0;
  background:var(--hv-lin);
  color:#4e534e;
}

#vue-dossiers .porte-dossiers{
  border:1px solid #d7dbd5;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--hv-ombre);
}

#vue-dossiers .porte-dossiers .porte-bloc{
  background:rgba(251,250,247,.94);
}

#vue-dossiers table.cartes-dossiers{
  border-spacing:0 10px;
}

#vue-dossiers .cartes-dossiers thead th{
  padding-block:8px!important;
  border:0;
  color:#666b67;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:700;
  letter-spacing:.02em;
}

#vue-dossiers .cartes-dossiers tbody tr{
  background:#fff;
  box-shadow:var(--hv-ombre);
}

#vue-dossiers .cartes-dossiers tbody td{
  padding-top:16px!important;
  padding-bottom:16px!important;
  border-top:1px solid #e0e3df;
  border-bottom:1px solid #e0e3df;
}

#vue-dossiers .cartes-dossiers tbody td:first-child{border-radius:12px 0 0 12px}
#vue-dossiers .cartes-dossiers tbody td:last-child{border-radius:0 12px 12px 0}

#vue-travail{
  background:var(--hv-papier);
}

#vue-travail .rail{
  background:#fff;
  border-right:1px solid #d8dcd7;
}

#vue-travail .carte,
#vue-travail .panneau,
#vue-accueil .carte,
#vue-accueil .panneau{
  border:1px solid #d8dcd7;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--hv-ombre);
}

#vue-travail button:not(.discret):not(.ico),
#vue-dossiers button:not(.discret):not(.fd),
#vue-accueil button:not(.discret):not(.ico){
  border-radius:10px;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:700;
}

#vue-travail button.discret,
#vue-dossiers button.discret,
#vue-accueil button.discret{
  border-color:#ccd1ca;
  border-radius:10px;
  background:#fff;
  color:var(--hv-cedre);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:700;
}

#vue-travail .nav-rubriques button{
  border-radius:9px;
  font-family:Arial,"Helvetica Neue",sans-serif;
}

/* Tableau de bord plus dense : les raccourcis gardent leur contenu et leurs gestes.
   Dans une même rangee, leurs fonds s'alignent sur la carte la plus chargee. */
#vue-accueil{
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#vue-accueil :is(h1,h2,h3),
#vue-accueil .salut{
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#vue-accueil .cartes{
  align-items:stretch;
  gap:12px;
}

#vue-accueil .kc{
  gap:3px;
  padding:12px 14px;
  height:100%;
}

#vue-accueil .kc .haut{margin-bottom:1px}

#vue-accueil .kc .ic{
  width:32px;
  height:32px;
  border-radius:9px;
}

#vue-accueil .kc .ic svg{
  width:17px;
  height:17px;
}

#vue-accueil .kc h3{line-height:1.25}

#vue-accueil .kc.ouverte{
  margin-bottom:12px;
  padding:12px 15px;
}

#vue-accueil .kc.ouverte .haut{
  position:absolute;
  top:12px;
  left:15px;
}

#vue-accueil .kc.ouverte h3{
  margin-left:44px;
}

#vue-accueil .champ-demander{
  margin-top:9px;
  padding:5px 8px;
}

#vue-accueil .ligne-demander{margin-top:-2px}

#vue-accueil .apercu{margin-top:5px}

#vue-accueil .apercu .cr{padding:6px 9px}

/* Le geste du bandeau MFA doit rester lisible sur son fond ocre. */
#bandeau-mfa button.discret{
  background:#fffaf0;
  color:#4b3508;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  font-weight:700;
}

#bandeau-mfa button.discret:hover{
  background:#fff;
  color:#2f2105;
}

/* Courrier : la vue a trois volets rejoint la meme matiere que le reste du produit. */
#vue-courrier{
  color:var(--hv-noir);
  background:var(--hv-lin);
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#vue-courrier :is(button,input,select,textarea){
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#courrier-entete{
  padding:12px 18px;
  border-bottom:1px solid #d7dbd5;
  background:#fff;
  box-shadow:0 8px 24px -24px rgba(20,30,19,.55);
}

.courrier-identite strong{
  color:var(--hv-noir);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
}

#courrier-entete .courrier-chercher input{
  border:1px solid var(--hv-trait);
  border-radius:10px;
  background:var(--hv-papier);
  box-shadow:none;
}

#courrier-entete .courrier-chercher input:focus{
  outline:2px solid var(--hv-bleu);
  outline-offset:1px;
  border-color:transparent;
}

#btn-courrier-balayer{
  border:0;
  border-radius:999px;
  background:var(--hv-cedre)!important;
  font-weight:800;
  box-shadow:none!important;
}

#courrier-3volets{
  gap:0;
  border-top:0;
  background:#fff;
}

#courrier-dossiers{
  padding:14px 10px;
  border-right:1px solid #d8dcd7!important;
  background:#f2f4ef!important;
}

#courrier-dossiers .cd-dossier{
  margin-bottom:2px;
  border-radius:9px!important;
}

#courrier-dossiers .cd-dossier.actif{
  background:#dfe9dc!important;
  color:var(--hv-cedre-sombre)!important;
}

#courrier-liste{
  border-right:1px solid #d8dcd7!important;
  background:#fff;
}

#courrier-onglets{
  border-bottom:1px solid #d8dcd7!important;
  background:var(--hv-papier)!important;
}

#courrier-onglets button{
  border-radius:8px 8px 0 0!important;
  font-weight:700;
}

#courrier-onglets button.actif{
  color:var(--hv-cedre)!important;
  border-bottom-color:var(--hv-cedre)!important;
}

#courrier-apercu{
  background:#fff;
}

#courrier-apercu .apercu-objet{
  color:var(--hv-noir);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
}

#courrier-apercu .apercu-corps{
  width:100%;
  max-width:none;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

#courrier-actions{
  background:var(--hv-papier)!important;
}

#courrier-reglages,
.courrier-menu-liste{
  border:1px solid #d8dcd7!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:var(--hv-ombre)!important;
}

#vue-travail .nav-rubriques button:hover{background:var(--hv-lin)}

#vue-travail .nav-rubriques button.on,
#vue-travail .nav-rubriques button.actif{
  background:#edf2e8;
  color:var(--hv-cedre);
  font-weight:800;
}

#vue-travail :is(.badge,.pastille,.etat){
  border-radius:999px;
}

@media(max-width:1180px){
  #barre-app{padding-inline:12px}
  #barre-app .chercheur-dossier-bandeau{order:initial;flex:0 0 250px}
  #barre-app .etude{display:none}
}

@media(max-width:760px){
  #vue-dossiers{padding:22px 16px!important}
  #vue-dossiers>div:first-child h2{white-space:normal!important}
  #vue-dossiers .sous-onglets{gap:14px;overflow-x:auto}
  #barre-app .onglet{padding-inline:8px}
}

/* Les autres vues de premier niveau partagent les memes surfaces et controles. */
#vue-nouveau-dossier,
#vue-alertes,
#vue-simulateurs{
  color:var(--hv-noir);
  background:var(--hv-papier);
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#vue-nouveau-dossier :is(h1,h2,h3),
#vue-alertes :is(h1,h2,h3),
#vue-simulateurs :is(h1,h2,h3){
  color:var(--hv-noir);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:800;
  letter-spacing:-.025em;
}

#vue-nouveau-dossier .carte{
  padding:24px;
  border:1px solid #d8dcd7;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--hv-ombre);
}

#vue-nouveau-dossier :is(input,select,textarea),
#vue-alertes :is(input,select,textarea){
  border:1px solid var(--hv-trait);
  border-radius:10px;
  background:#fff;
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#vue-alertes .al-page{max-width:1440px;padding:32px 3.5%}

#vue-alertes .al-tete{
  align-items:center;
  padding-bottom:18px;
  border-bottom-color:#d8dcd7;
}

#vue-alertes .al-titre h2{font-size:clamp(28px,3vw,42px)}

#vue-alertes .al-dossier{
  border-color:#d8dcd7;
  border-radius:16px;
  box-shadow:var(--hv-ombre);
}

#vue-alertes .al-dossier-tete,
#vue-alertes .al-personne-tete{background:var(--hv-lin)}

#vue-alertes .al-detail p,
#vue-travail .rubrique .carte>p,
#vue-travail .rubrique .carte>div>p{
  width:100%;
  max-width:none;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

#vue-simulateurs>div:first-child{
  max-width:1440px!important;
  padding:24px 3.5% 12px!important;
}

#cadre-simulateurs{
  width:calc(100% - 7%)!important;
  margin:0 3.5% 28px!important;
  border:1px solid #d8dcd7!important;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--hv-ombre);
}

#vue-travail .carte{
  border-color:#d8dcd7;
  border-radius:14px;
  box-shadow:var(--hv-ombre);
}

#vue-travail :is(input,select,textarea){
  border-color:var(--hv-trait);
  border-radius:10px;
  font-family:Arial,"Helvetica Neue",sans-serif;
}

#vue-travail details>summary{font-family:Arial,"Helvetica Neue",sans-serif}