/* ==========================================================================
   OLEA ALC : NAVIGATION (08/10/2026)
   Menu lateral a deux niveaux, onglets a adresse propre, fil d'Ariane,
   bandeau de confirmation, panneau lateral et fenetres de formulaire.
   Regle : aucun bouton ne fait defiler la page (pas d'ancre, pas de
   scrollIntoView) ; chaque ecran a son adresse.
   Charte : laterite #B7482B, soleil #F8AF3C, brun #432918, sable #CBBBA0,
   gris #666666 / #B8B8B8, noir #000000, blanc #FFFFFF.
   ========================================================================== */

/* ---- Menu lateral : modules depliables --------------------------------- */
#alc-shell .side-nav{padding-bottom:18px}
#alc-shell .nav-group{margin-top:10px}
#alc-shell .nav-title{padding:8px 12px 4px}
#alc-shell .nav-link{height:38px}
#alc-shell .nav-badge{margin-left:auto}
#alc-shell .nav-mod{position:relative}
#alc-shell .nav-row{position:relative;display:flex;align-items:center}
#alc-shell .nav-row .nav-link{flex:1 1 auto;min-width:0;padding-right:40px}
#alc-shell .nav-row .nav-badge{margin-right:2px}
#alc-shell .nav-tog{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;min-height:30px !important;padding:0;display:grid;place-items:center;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:8px !important;color:var(--sh-muted) !important;cursor:pointer}
#alc-shell .nav-tog:hover{background:rgba(183,72,43,.08) !important;color:var(--sh-lat) !important}
#alc-shell .nav-tog:focus-visible{outline:2px solid #F8AF3C;outline-offset:1px}
#alc-shell .nav-tog svg{transition:transform 180ms var(--sh-ease)}
#alc-shell .nav-mod.is-open > .nav-row .nav-tog svg{transform:rotate(90deg)}
#alc-shell .nav-sub{display:none;margin:2px 0 6px 21px;padding-left:12px;
  border-left:1px solid rgba(67,41,24,.16)}
#alc-shell .nav-mod.is-open > .nav-sub{display:block}
#alc-shell .nav-sublink{position:relative;display:flex;align-items:center;min-height:32px;padding:6px 10px;
  margin:1px 0;border-radius:8px;color:#432918;text-decoration:none;font-size:13px;font-weight:500;
  line-height:1.25;transition:background 150ms var(--sh-ease),color 150ms var(--sh-ease)}
#alc-shell .nav-sublink:hover{background:rgba(183,72,43,.06);color:#B7482B}
#alc-shell .nav-sublink.is-active{color:#B7482B;font-weight:600;background:rgba(248,175,60,.16)}
#alc-shell .nav-sublink.is-active::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;
  width:2px;border-radius:2px;background:#B7482B}
#alc-shell .nav-link:focus-visible,#alc-shell .nav-sublink:focus-visible{outline:2px solid #F8AF3C;outline-offset:1px}

/* ---- Fil d'Ariane ------------------------------------------------------- */
#alc-shell .ariane{margin:-6px 0 10px}
#alc-shell .ariane ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;
  font-size:12.5px;color:#666666}
#alc-shell .ariane li{display:inline-flex;align-items:center;gap:4px}
#alc-shell .ariane li + li::before{content:"";width:6px;height:6px;margin:0 6px 0 2px;
  border-right:1.5px solid #B8B8B8;border-top:1.5px solid #B8B8B8;transform:rotate(45deg)}
#alc-shell .ariane a{color:#936037;text-decoration:none;font-weight:500}
#alc-shell .ariane a:hover{color:#B7482B;text-decoration:underline}
#alc-shell .ariane [aria-current] span{color:#432918;font-weight:600}

/* ---- Onglets a adresse propre ------------------------------------------ */
#alc-shell .onglets{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;margin:0 0 20px;
  border-bottom:1px solid rgba(67,41,24,.16);scrollbar-width:thin}
#alc-shell .onglet{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:10px 14px 11px;color:#666666;text-decoration:none;font-size:13.5px;font-weight:600;
  white-space:nowrap;border-radius:8px 8px 0 0;transition:color 150ms var(--sh-ease),background 150ms var(--sh-ease)}
#alc-shell .onglet:hover{color:#432918;background:rgba(203,187,160,.22)}
#alc-shell .onglet.is-active{color:#B7482B}
#alc-shell .onglet.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:#B7482B}
#alc-shell .onglet:focus-visible{outline:2px solid #F8AF3C;outline-offset:-2px}
#alc-shell .onglet-n{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;
  border-radius:999px;background:rgba(203,187,160,.35);color:#432918;font-size:11.5px;font-weight:700}
#alc-shell .onglet.is-active .onglet-n{background:rgba(183,72,43,.12);color:#B7482B}

/* ---- Bandeau de confirmation (reste visible en haut) ------------------- */
#alc-shell .alc-bandeaux{position:sticky;top:calc(var(--sh-top-h) + 10px);z-index:28;
  display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
#alc-shell .alc-bandeaux .flash{margin:0;box-shadow:0 8px 24px -12px rgba(67,41,24,.35)}
#alc-shell .alc-bandeaux .flash.flash-out{pointer-events:none}

/* ---- Bouton Retour ------------------------------------------------------ */
#alc-shell .btn-retour{gap:6px;padding:0 14px 0 10px}

/* ---- Fenetre de formulaire (<dialog>) et panneau lateral --------------- */
.alc-fenetre{border:0;padding:0;border-radius:16px;width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);color:#000000;
  font-family:'Avenir Next LT Pro','Segoe UI',Roboto,Arial,sans-serif}
.alc-fenetre::backdrop{background:rgba(34,28,24,.46)}
.alc-fenetre-tete{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(67,41,24,.12);
  background:linear-gradient(90deg,rgba(248,175,60,.14),rgba(255,255,255,0))}
.alc-fenetre-tete h2{flex:1;margin:0;font-size:17px;font-weight:600;color:#432918}
#alc-shell dialog.alc-fenetre .alc-fenetre-x{width:34px;height:34px;min-height:34px !important;padding:0 !important;
  display:grid;place-items:center;border-radius:8px !important;border:1px solid rgba(67,41,24,.18) !important;
  background:#FFFFFF !important;color:#432918 !important;font-size:20px;line-height:1;cursor:pointer;box-shadow:none !important}
#alc-shell dialog.alc-fenetre .alc-fenetre-x:hover{color:#B7482B !important;border-color:rgba(183,72,43,.45) !important}
.alc-fenetre-corps{padding:16px 20px 6px;overflow:auto;max-height:calc(100vh - 190px)}
.alc-fenetre-corps p{margin:0 0 12px;line-height:1.5;color:#432918}
.alc-fenetre-pied{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid rgba(67,41,24,.10)}
.alc-fenetre .p3-f,.alc-fenetre .champ{display:flex;flex-direction:column;margin:0 0 12px}
.alc-fenetre label{font-size:12.5px;font-weight:600;color:#432918;margin:0 0 5px}
.alc-fenetre :is(input,select){height:38px;padding:0 12px;border:1px solid rgba(34,28,24,.16);border-radius:10px;
  background:#FFFFFF;color:#000000;font-family:inherit;font-size:14px}
.alc-fenetre :is(input[type=checkbox]){height:auto;accent-color:#B7482B}
.alc-fenetre .p3-checks label{display:flex;align-items:center;gap:8px;font-weight:500;margin:4px 0}
.alc-fenetre :is(input,select):focus{outline:none;border-color:#F8AF3C;box-shadow:0 0 0 3px rgba(248,175,60,.30)}
.alc-fenetre .sep{height:1px;background:rgba(67,41,24,.10);margin:8px 0 14px}
@media (max-width:560px){
  .alc-fenetre{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;margin:0}
  .alc-fenetre-corps{max-height:calc(100vh - 140px)}
}

/* ---- Formulaire en page dediee ----------------------------------------- */
#alc-shell .form-page{max-width:760px}
#alc-shell .form-page .p3-form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
#alc-shell .champ-erreur{color:#B7482B;font-size:12.5px;margin-top:4px}

/* ---- Pagination simple ------------------------------------------------- */
#alc-shell .pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:12px 0 0;font-size:13px;color:#666666}
#alc-shell .pagination .pg-btns{display:flex;gap:8px}

/* ---- Telephone : menu repliable propre -------------------------------- */
@media (max-width:900px){
  #alc-shell .side{width:300px}
  #alc-shell .nav-link{height:44px}
  #alc-shell .nav-sublink{min-height:40px;font-size:14px}
  #alc-shell .nav-tog{width:40px;height:40px;min-height:40px !important}
  #alc-shell .alc-bandeaux{top:calc(var(--sh-top-h) + 6px)}
  #alc-shell .onglets{margin:0 -14px 16px;padding:0 14px}
  #alc-shell .ariane{margin:-2px 0 8px}
}

/* ---- Production : vue d'ensemble -------------------------------------- */
#alc-shell .pp-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#alc-shell .pp-duo > .pp-sec{margin-top:6px}
#alc-shell .pp-liens-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 16px}
#alc-shell .pp-lien-carte{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;
  background:#FFFFFF;border:1px solid rgba(67,41,24,.12);box-shadow:var(--sh-sh-1);text-decoration:none;
  color:#432918;transition:border-color 150ms var(--sh-ease),box-shadow 150ms var(--sh-ease),transform 150ms var(--sh-ease)}
#alc-shell .pp-lien-carte strong{font-size:14.5px;color:#B7482B}
#alc-shell .pp-lien-carte span{font-size:12.5px;color:#666666;line-height:1.4}
#alc-shell .pp-lien-carte:hover{border-color:rgba(183,72,43,.4);box-shadow:var(--sh-sh-3);transform:translateY(-1px)}
@media (max-width:1100px){#alc-shell .pp-duo{grid-template-columns:1fr}}
@media (max-width:900px){#alc-shell .pp-liens-grille{grid-template-columns:1fr}}

/* ---- Saisie restauree (sans defilement) : surlignage bref ------------ */
#alc-shell .alc-champ-restaure{box-shadow:0 0 0 3px rgba(248,175,60,.55) !important;border-color:#F8AF3C !important;
  transition:box-shadow 600ms ease}

/* ======================================================================
   08/10/2026 : audit a froid avant la demonstration
   ====================================================================== */
/* Point 9 : barre de filtres du reporting, le bouton « Reinitialiser » ne
   deborde plus (la zone d'actions passe a la ligne au besoin). */
#alc-shell .filtres form > *{min-width:0}
#alc-shell .filtres form .actions{grid-column:span 2;flex-wrap:wrap;row-gap:8px;min-width:0}
#alc-shell .filtres form .actions .lien-raz{white-space:nowrap}
@media (max-width:700px){#alc-shell .filtres form .actions{grid-column:1 / -1}}

/* Point 10 : la pastille « Premiers pas » ne recouvre jamais le contenu
   (reserve en bas de page tant qu'elle est affichee). */
body.avec-aide-pp #alc-shell .main-col main{padding-bottom:104px}

/* Point 15 : tableaux larges sur telephone, defilement horizontal DANS le
   tableau, jamais de la page entiere. */
@media (max-width:900px){
  #alc-shell .main-col table.p2-mini,
  #alc-shell .main-col table.tbl,
  #alc-shell .main-col .panel-body > table{display:block;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  #alc-shell .main-col .panel,#alc-shell .main-col .p2-list{max-width:100%;min-width:0}
  /* 08/10/2026 (soir) : un tableau qui defile lui-meme ne garde pas un
     en-tete colle a la hauteur de la barre du haut (il recouvrait la
     premiere ligne sur telephone) : en-tete a sa place, au-dessus des lignes. */
  #alc-shell .main-col table.p2-mini th,
  #alc-shell .main-col table.tbl th,
  #alc-shell .main-col .panel-body > table th,
  #alc-shell .main-col .alc-table-scroll table th{position:static !important;top:auto !important}
}

/* Point 4 : libelles complets dans les petits tableaux de la fiche (type de
   message, reponses et motifs de l'Assistant ALC), jamais tronques. */
#alc-shell .main-col table.p2-mini td:nth-child(2){max-width:none;overflow:visible;text-overflow:clip;white-space:normal}
#alc-shell .main-col table.p2-mini .badge{white-space:normal;line-height:1.3}
/* Point 3 : nom du gestionnaire de test affiche en entier */
#alc-shell .kpi .kpi-value.p2-txt.p2-txt-long{white-space:normal;overflow:visible;font-size:17px;line-height:1.25}

/* ===== 08/10/2026 (contre-verification 17 h) ============================ */
/* Point 8 : sur telephone, la pastille « Premiers pas » ne reste jamais
   au-dessus du menu ouvert (elle se masque tant que le tiroir est ouvert). */
@media (max-width:900px){
  body.menu-ouvert .aide-pp,
  body:has(#alc-shell.is-open) .aide-pp{display:none !important}
}
/* Point 2 : liste /sinistres sur telephone = une carte par dossier
   (plus de colonnes tronquees). Tableau inchange au-dela de 640 px. */
@media (max-width:640px){
  #alc-shell .p2-list #p2-table,
  #alc-shell .p2-list #p2-table tbody{display:block;width:100%}
  #alc-shell .p2-list #p2-table colgroup,
  #alc-shell .p2-list #p2-table thead{display:none}
  #alc-shell .p2-list:has(#p2-table){background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
  #alc-shell .p2-list #p2-table tr.p2-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px 14px;margin:0 0 10px;padding:12px 14px;background:var(--sh-card,#fff);
    border:1px solid var(--sh-line,rgba(67,41,24,.12));border-radius:14px;box-shadow:0 1px 3px rgba(34,28,24,.06)}
  #alc-shell .p2-list #p2-table tr.p2-row[hidden]{display:none !important}
  #alc-shell .main-col .p2-list #p2-table tr.p2-row td{display:block;height:auto;padding:0 !important;border:0;
    overflow:visible;white-space:normal;min-width:0;background:transparent !important}
  #alc-shell .p2-list #p2-table tr.p2-row td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;
    font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sh-muted,#7a6a5d);margin-bottom:2px}
  #alc-shell .p2-list #p2-table tr.p2-row td.c-tete{grid-column:1 / -1;display:flex;align-items:baseline;
    justify-content:space-between;gap:10px;padding-bottom:6px !important;border-bottom:1px solid var(--sh-line,rgba(67,41,24,.10))}
  #alc-shell .p2-list #p2-table tr.p2-row td.c-sitm{grid-column:1 / -1}
  #alc-shell .p2-list #p2-table tr.p2-row td.num{text-align:left}
  #alc-shell .p2-list #p2-table .p2-cell{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  #alc-shell .p2-list #p2-table tr.p2-row td.c-tete .p2-cell + .p2-cell{margin-top:0}
  #alc-shell .p2-list #p2-table .badge{white-space:normal}
  #alc-shell .p2-list #p2-table tr:not(.p2-row){display:block}
  #alc-shell .p2-list #p2-table tr:not(.p2-row)[hidden]{display:none !important}
  #alc-shell .p2-list #p2-table tr:not(.p2-row) td{display:block}
}