/* --- Global Reset & Variables --- */
:root {
  --primary: #007bff; /* Bleu */
  --danger: #dc3545;  /* Rouge */
  --text-color: #333;
  --muted-color: #6c757d;
  --border-color: #ccc;
  --bg-light: #f4f7fa;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --page-gutter: clamp(8px, 2vw, 24px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-light);
}

/* --- App Shell & Layout --- */
.app {
  min-height: 100vh;
}

.container {
  width: auto;              /* prend toute la largeur disponible… */
  max-width: none;          /* …sans limite fixe */
  margin-inline: var(--page-gutter);   /* petit espace à gauche/droite */
  padding-inline: clamp(2px, 1.5vw, var(--spacing-md)); /* garde un peu d’air dedans */
}
/* --- Header --- */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--header-bg);
  margin-bottom: var(--spacing-md);
}

.app-header.container {
  /* 1. Remove the margin that pulls the element away from the page edges */
  margin-inline: 0;
  /* 2. OPTIONAL: Set padding-inline to 0 if you want the content itself right against the edge.
     If you want content spaced, you might skip this line or add a separate inner container. */
  padding-inline: var(--spacing-md);
}

.app-title {
  font-size: 1.5rem;
  font-weight: 500;
}

.header-controls {
  display: flex;
  gap: var(--spacing-md);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Ajouter ceci au CSS global */
.split {
  display: flex;
  flex-direction: column; /* CHANGE : Empile les éléments verticalement */
  gap: var(--spacing-md); /* Ajoute un espace entre les deux champs */
}

/* --- Utilities (Spacing, Text) --- */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }

.muted {
  opacity: .6;
  font-size: .875rem;
}
/* Grille des 4 panneaux PCS */
.pcs-panels {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: flex-start;
}

/* S’assure que chaque carte occupe toute la colonne du grid */
.pcs-panels > .card {
  height: 100%;
}


.text-sm { font-size: 0.85rem; }
.text-lg { font-size: 1.25rem; }
.mono { font-family: monospace; }
.row-start {
  display: flex;
  align-items: center;
}
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.gap-md { gap: var(--spacing-md); }
.gap-sm { gap: var(--spacing-sm); }
.flex-0 { flex: 0.8; min-width: 0; }
.flex-1 { flex: 1; min-width: 0; }
.flex-2 { flex: 2; min-width: 0; }
.flex-3 { flex: 3; min-width: 0; }
.hidden { display: none; }

.legend {
  font-size: 0.75rem;
  margin-left: var(--spacing-sm);
}
.legend.red { color: var(--danger); }
.tip {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: 0.8rem;
  color: var(--muted-color);
}
.badge.warn {
  display: inline-block;
  background-color: #ffc107; /* Jaune */
  color: #333;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.8rem;
}
.badge.tips {
  display: inline-block;
  background-color: rgba(13,110,253,.08);; /* Jaune */
  color:#084298;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.8rem;
  margin-top: var(--spacing-xs);
  margin-left: auto;
}
/* Bandeau d’avertissement pour codes PCS supprimés */
.pcs-warning-banner {
  margin-left: 12px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px; /* pill */
  background-color: #fff3cd;  /* jaune clair */
  color: #664d03;             /* texte brun */
  font-size: 0.9rem;
  font-weight: 500;
}

.pcs-invalid-banner {
  margin-left: 12px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px; /* pill */
  background-color: #f8d7da;  /* jaune clair */
  color: #842029;             /* texte brun */
  font-size: 0.9rem;
  font-weight: 500;
}

.pcs-warning-icon {
  font-size: 1rem;
}

.pcs-warning-text {
  white-space: nowrap;
}

/* --- Grids (Flexbox/Grid pour les agencements) --- */
.grid {
  display: grid;
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.wrap {
  gap: var(--spacing-md);
}
/* Pour les petits écrans */
@media (max-width: 900px) {
  .grid-3, .grid-4 {
      grid-template-columns: 1fr;
  }
}
/* Grille spécifique à la modale Izicod */
.form-grid {
  display: grid;
  grid-template-columns: max-content 1fr; /* Label à gauche, Input à droite */
  gap: var(--spacing-sm) var(--spacing-md);
  align-items: center;
}
.form-grid > .textarea {
  grid-column: 2;
}


/* --- Forms & Inputs --- */
.form-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.field-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.field-label-italic {
  font-weight: 500;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  font-style: italic;
}

.field-label-inline {
  font-weight: 500;
  font-size: 0.9rem;
}

.input, .textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
}

.input-wide { width: 100%; }
.input-md { width: 300px; } /* Exemple de largeur moyenne */

.textarea {
  resize: vertical;
}
.textarea.tall {
  min-height: 80px;
}
.textarea.h-52vh {
  min-height: 52vh;
}
.bg-muted {
  background-color: var(--bg-light);
}
/* Champ principal de saisie code PCS */
.input-lg {
  padding: 0.6rem 0.9rem;
  font-size: 1.05rem;
}

/* Ligne input + message d’erreur */
.pcs-code-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

/* Limiter la largeur du champ code pour un look plus propre */
.pcs-code-input {
  max-width: 260px;
}

/* Zone qui accueille le bandeau warning (pour rester bien alignée) */
.pcs-code-error {
  min-height: 1.8rem;
  display: flex;
  align-items: center;
}


/* Style de base pour Dash Core Components */
.dd .Select-control, .dd .Select-menu-outer {
  border-color: var(--border-color) ;
  border-radius: 4px ;
}

.dd.compact .Select-control {
  min-height: 30px;
}
.dd.compact .Select-value {
  padding-top: 0;
  padding-bottom: 0;
}

/* Dropdown “langue cible” plus étroit */
.dd.lang-target {
  width: 140px ;
  min-width: 140px ;
  max-width: 140px ;
}

/* S'il est dans une barre en flex (ex: .toolbar), empêche l’étirement */
.dd.lang-target {
  flex: 0 0 140px ;
  }

/* Optionnel : sur mobile, laisser reprendre toute la largeur */
@media (max-width: 600px) {
  .dd.lang-target {
      width: 100% ;
      min-width: 0 ;
      max-width: none ;
  }
}


/* --- Dropdown compact : hauteur alignée sur les boutons (~36px) --- */
.dd.compact .Select-control{ min-height:36px; height:36px; }

/* Aligner verticalement le texte et l’input */
.dd.compact .Select-placeholder,
.dd.compact .Select--single > .Select-control .Select-value{
line-height:34px; padding:0 8px;
}
.dd.compact .Select-input{ height:34px; }
.dd.compact .Select-input > input{ height:34px; padding:0; }

/* Zone flèche / clear à la même hauteur */
.dd.compact .Select-arrow-zone,
.dd.compact .Select-clear-zone{
height:34px; padding-top:0; padding-bottom:0;
}

/* --- Empêcher le shrink dans la toolbar + donner une largeur mini --- */
.toolbar .dd{ flex:0 0 auto; }           /* ne pas rétrécir dans le flex row */
.toolbar .dd.compact{ min-width:120px; } /* 4 chiffres + chevron sans ellipses */


/* Style pour les RadioItems (PCS Builder) */
#pcs-bp label, #pcs-ap label, #pcs-dev label, #pcs-qual label {
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

/* --- Buttons --- */
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}
.btn-primary:hover {
  background-color: #0056b3;
}

.btn-danger {
  background-color: var(--danger);
  color: white;
}
.btn-danger:hover {
  background-color: #bd2130;
}

.btn-danger-outline {
  background-color: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-danger-outline:hover {
  background-color: var(--danger);
  color: white;
}

.btn-secondary {
  background-color: var(--muted-color);
  color: white;
}
.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-ghost {
  background-color: transparent;
  color: var(--primary);
  padding: 0.25rem 0.5rem;
}
.btn-ghost:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

.btn-block {
  width: 100%;
  margin-top: var(--spacing-md);
}
.btn-xs {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
}

/* Clipboard button */
.btn-clip {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 1.2rem;
  padding: 0 0.5rem;
}
.btn-clip:hover {
  opacity: 0.8;
}

/* --- Cards --- */
.card {
  background-color: var(--card-bg);
  padding: var(--spacing-md);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Carte douce pour bandeaux / infos */
.card-soft {
  background-color: #fff8e1;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

/* Bandeau d'avertissement Izicod */
.izicod-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.izicod-warning-title {
  font-weight: 600;
}

/* Barre d'actions en haut de l'onglet Izicod */
.izicod-toolbar {
  justify-content: flex-end;
}

/* Ligne Codelist : dropdown à gauche, actions à droite */
.izicod-codelist-row {
  align-items: flex-start;
}

/* Groupe de boutons aligné à droite */
.izicod-toolbar-actions {
  margin-left: auto;     /* pousse le groupe à droite */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
/* Légende de latéralité (chips) */
#izi-color-legend {
  margin-top: var(--spacing-xs);
}

#izi-legend-inner {
  background-color: var(--bg-light);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}


.card-title {
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--bg-light);
}

/* --- Tabs --- */
.custom-tabs {
  border-bottom: 1px solid var(--border-color);
  margin-top: var(--spacing-sm);
}

.custom-tab, .custom-tab--selected {
  font-weight: 500;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: var(--bg-light);
}

.custom-tab--selected {
  border-color: var(--border-color);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: 2px solid var(--card-bg); /* cache la ligne de séparation */
  background-color: var(--card-bg);
  color: var(--primary);
}

/* --- Login Overlay --- */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95); /* Fond très clair */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Assure qu'il est au-dessus de tout */
}

/* Style for dcc.Loading around login card */
#login-loading {
  display: inline-block;
  width: auto;
}

.login-card {
  background-color: white;
  padding: var(--spacing-lg);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 350px;
  text-align: center;
  position: relative;
  overflow: hidden; /* Pour le bandeau */
}

.flag-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  /* Exemple de drapeau (Luxembourg : Rouge, Blanc, Bleu) */
  background: linear-gradient(to right, #da291c 0%, #da291c 33%, #ffffff 33%, #ffffff 66%, #00a1e3 66%, #00a1e3 100%);
}

.login-title {
  margin-top: var(--spacing-sm);
  font-size: 1.8rem;
}

.login-card .field-label {
  text-align: left;
  display: block;
  margin-top: var(--spacing-md);
}

.login-error {
  color: var(--danger);
  margin-top: var(--spacing-sm);
  font-weight: 500;
}

/* --- Modals (overlays) --- */
.modal-overlay {
  /* Couvre toute la fenêtre d'affichage */
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Centrage horizontal et vertical du contenu (le .modal-card) */
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;    /* Centre verticalement */
  
  /* Autres styles */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2000;
}

.modal-card {
  /* Le style que vous avez fourni */
  background-color: var(--card-bg);
  padding: var(--spacing-lg);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  /* Aucun besoin de margin ou positionnement supplémentaire ici, 
     car le parent (.modal-overlay) gère le centrage Flexbox */
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--bg-light);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem;
}

.modal-close:hover {
  background-color: var(--danger);
  color: white;
}

/* --- PDF Frame --- */
/* .pdf-frame {
  width: 100%;
  min-height: 80vh;
  border: 1px solid var(--border-color);
  margin-top: var(--spacing-md);
} */

.pdf-frame{
  width: 100%;
  height: calc(100vh - 120px); /* moins de marge => iframe plus grande */
  min-height: 900px;           /* rendu "Adobe-like" même sur grands écrans */
  border: none;
  background: #f2f2f2;
}


/* --- Pre & Markdown Output --- */
.pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
  background-color: #f8f9fa;
  padding: var(--spacing-sm);
  border: 1px solid #dee2e6;
  border-radius: 4px;
  margin-top: var(--spacing-sm);
  font-size: 0.9rem;
}

/* --- DataTable Styling (minimal) --- */
/* Le style spécifique de Dash DataTable doit souvent être géré via les props `style_table`, `style_cell`, `css` */
#faq-results, #izicod-results {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

/* Style de coloration pour Izicod (latéralité) - doit être géré en JS/callback, mais voici les classes de base */
.izi-lat-left { background-color: rgba(0, 123, 255, 0.1); }    /* Bleu clair */
.izi-lat-right { background-color: rgba(255, 99, 71, 0.1); }   /* Rouge/Saumon clair */
.izi-lat-bilateral { background-color: rgba(255, 193, 7, 0.1); } /* Jaune clair */

/* Style pour l'élément de statut de copie (pcs-copy-status) */
.text-success {
  color: #28a745; /* Vert */
  font-weight: 500;
}


/* Container du bloc */
.form-stack {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-md);
  background: transparent;  /* pas de fond */
  box-shadow: none;         /* pas d'ombre */
  border: 0;                /* pas de border autour des dropdowns */
}

/* Tous les champs prennent la largeur dispo */
.w-100 { width: 100%; }

/* Empilement vertical avec rythme constant */
.stack > * + * { margin-top: var(--spacing-sm); }

/* Barre "ajouter à ma checklist" alignée et responsive */
.inline-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.inline-bar .btn { flex: 0 0 auto; }
.inline-bar .dd  { flex: 1 1 auto; }

/* Centrage du bouton "Vider" */
.center-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* Nettoyage du look des dropdowns (optionnel) */
.dd .Select-control {
  border-color: var(--border-color) ;  /* déjà dans ton CSS global, on garde fin */
  box-shadow: none ;                   /* supprime l'ombre forcée inline */
}

/* Un form-field compact ne s'étire pas */
.form-field.flex-0 {
  flex: 0 0 auto ;
  width: auto ;      /* ← crucial : annule width:100% de .form-field */
  max-width: none ;
}

/* Permet aux form-field de partager l'espace horizontal au lieu de prendre 100% */
.form-field.inline-item {
  width: auto;             /* Ne force plus la largeur à 100% */
  flex-grow: 0;            /* Ne grandit pas par défaut */
}

/* Modificateur pour donner une largeur minimum dans un contexte inline */
.form-field.inline-item.w-min-lg {
  min-width: 200px; /* Exemple de largeur minimum pour les champs (ajuster au besoin) */
}

/* DeepTranslate en 2 colonnes */
.split{
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* 2 colonnes égales */
gap: var(--spacing-md);
align-items: start;
}

/* même hauteur pour les 2 zones */
.h-52vh{ min-height:52vh; }

/* que les textareas prennent toute la largeur */
.textarea{ width:100%; }

/* Pour l'alignement sur la même ligne et l'espacement */
.d-flex {
  display: flex ;
}

/* Pour pousser les éléments aux extrémités de la ligne */
.justify-content-between {
  justify-content: space-between ;
}

/* Pour le centrage vertical */
.align-items-center {
  align-items: center ;
}

/* Optionnel: pour un peu d'espace en dessous */
.mb-2 {
  margin-bottom: 0.5rem ; /* 0.5rem est standard Bootstrap */
}

.badge.tips.details {
  background-color: #fffde7; /* Jaune pâle, presque crème */
  color: #424242;          /* Texte gris foncé */
  border: 1px solid #f9fbe7; /* Bordure très discrète */
}

/* Responsive : repasse en lignes sur petit écran */
@media (max-width:1100px){
.split{ grid-template-columns: 1fr; }
}

/* ================================
 Mobile fixes — IZICOD + FAQ
 À coller en bas de app.css
 ================================ */

/* 1) Sur mobile : toutes les "barres" en row-wrap passent en colonne */
@media (max-width: 720px) {

  /* Conteneurs principaux des pages (FAQ + IZICOD) */
  #page5-content .row-wrap,
  #page3-content .row-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  /* Les items flex-* ne doivent plus essayer de se partager une ligne */
  #page5-content .flex-0,
  #page5-content .flex-1,
  #page5-content .flex-2,
  #page5-content .flex-3,
  #page3-content .flex-0,
  #page3-content .flex-1,
  #page3-content .flex-2,
  #page3-content .flex-3 {
    flex: 1 1 100% ;
    width: 100% ;
    min-width: 0 ;
  }

  /* IMPORTANT : vous avez une règle globale qui force parfois .form-field.flex-0
     à width:auto ; sur mobile on annule pour éviter les superpositions */
  #page5-content .form-field.flex-0,
  #page3-content .form-field.flex-0 {
    width: 100% ;
  }

  /* 2) Boutons d’action : pleine largeur et pas de chevauchement */
  #page5-content .btn,
  #page3-content .btn {
    width: 100%;
  }

  /* 3) IZICOD : la ligne "Codelist + actions + toolbar" doit s'empiler */
  #page5-content .izicod-codelist-row {
    align-items: stretch;
  }

  #page5-content .izicod-toolbar-actions {
    margin-left: 0;              /* annule le push à droite */
    width: 100%;
    justify-content: stretch;
  }

  /* Le dropdown de codelist doit prendre toute la largeur */
  #page5-content #izi-codelist-dd,
  #page5-content #izi-codelist-dd .Select-control {
    width: 100% ;
  }

  /* 4) FAQ : input de recherche et dropdowns sur 100% */
  #page3-content #faq-query,
  #page3-content .dd,
  #page3-content .dd .Select-control {
    width: 100% ;
  }

  /* 5) Petits ajustements de lisibilité */
  #page5-content .badge.tips,
  #page3-content .badge.tips {
    margin-left: 0;
    display: block;
    width: 100%;
  }
}

/* Bonus : sur très petits écrans, réduire un peu les gaps */
@media (max-width: 420px) {
  #page5-content .gap-md,
  #page3-content .gap-md { gap: var(--spacing-sm); }
}

/* ================================
 Tablet fixes — IZICOD + FAQ
 721px → 1024px : layout 2 colonnes
 ================================ */
 @media (min-width: 721px) and (max-width: 1024px) {

  /* Row-wrap : on autorise le wrap propre */
  #page5-content .row-wrap,
  #page3-content .row-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  /* Par défaut sur tablette : form-fields en 2 colonnes */
  #page5-content .form-field,
  #page3-content .form-field {
    flex: 1 1 calc(50% - var(--spacing-md));
    width: calc(50% - var(--spacing-md));
    min-width: 280px; /* évite les colonnes trop étroites qui se superposent */
  }

  /* Les champs "larges" restent en pleine largeur */
  #page5-content #izicod-comment-q,
  #page3-content #faq-query {
    width: 100% ;
  }
  #page5-content .form-field:has(#izicod-comment-q),
  #page3-content .form-field:has(#faq-query) {
    flex: 1 1 100% ;
    width: 100% ;
  }

  /* Si :has n'est pas supporté par votre cible,
     gardez quand même l'input full width (au-dessus) et ignorez ce bloc. */

  /* Actions (boutons) : sur tablette, on évite le 100% systématique */
  #page5-content .btn,
  #page3-content .btn {
    width: auto;
  }

  /* IZICOD : barre Codelist → 1) dropdown plein, 2) boutons à côté, 3) toolbar à la ligne si besoin */
  #page5-content .izicod-codelist-row {
    align-items: center;
  }

  /* Le dropdown de codelist prend toute la première ligne */
  #page5-content #izi-codelist-dd {
    flex: 1 1 100% ;
    width: 100% ;
    min-width: 0 ;
  }

  /* Les boutons "Vider / Copier / Ajouter" se placent ensuite en wrap */
  #page5-content .izicod-codelist-row > .btn,
  #page5-content .izicod-codelist-row > .btn-clip {
    flex: 0 0 auto;
  }

  /* Toolbar actions à droite, mais passe à la ligne si manque de place */
  #page5-content .izicod-toolbar-actions {
    margin-left: auto;
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-end;
  }

  /* FAQ : le bouton Exporter peut rester compact et aligné sans casser */
  #page3-content #btn-export-faq {
    white-space: nowrap;
  }

  /* Evite que les dropdowns "multi" dépassent */
  #page5-content .dd,
  #page3-content .dd {
    min-width: 0;
  }
}


/* ================================
 Header responsive — Luxicode
 (Titre + Année + Aide/Déconnexion)
 ================================ */

/* Base : sécurise le wrap si le header est en flex */
.app-header {
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Le titre ne doit pas imposer une largeur minimale */
.app-title {
  min-width: 0;
  word-break: break-word;
}

/* Les contrôles peuvent passer à la ligne */
.header-controls {
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* Toolbars : autorise le retour à la ligne */
.header-controls .toolbar {
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--spacing-sm);
}

/* Dropdown compact : évite le débordement */
#year-dd,
#year-dd .Select-control {
  min-width: 12rem; /* desktop/tablet: largeur confortable */
  max-width: 100%;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {

  /* Empile : titre puis contrôles */
  .app-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* Chaque toolbar devient une ligne */
  .header-controls .toolbar {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  /* Année + dropdown sur une même ligne, sans overflow */
  .field-label-inline {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #year-dd,
  #year-dd .Select-control {
    flex: 1 1 auto;
    min-width: 0;       /* clé pour éviter la casse/overflow */
    width: 100%;
  }

  /* Boutons Aide / Déconnexion : pleine largeur (ou 50/50 si souhaité) */
  .header-controls .toolbar:last-child {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-sm);
    }
    .header-controls .toolbar:last-child .btn { width: 100%; }
    
}

/* ---------- Tablette ---------- */
@media (min-width: 721px) and (max-width: 1024px) {

  /* Header sur 2 lignes : titre puis contrôles si besoin */
  .app-header {
    align-items: flex-start;
  }

  .app-title {
    flex: 1 1 100%;
  }

  .header-controls {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  /* Dropdown un peu plus compact sur tablette */
  #year-dd,
  #year-dd .Select-control {
    min-width: 10rem;
  }
}

/* 1) Limiter la largeur de la dropdown */
#page4-content .form-field {
    max-width: 720px;      /* ajustez (ex: 560px / 640px / 800px) */
  }
  
  /* Le composant Dash Dropdown prend la largeur du form-field */
  #page4-content #pdf-select,
  #page4-content #pdf-select .Select-control {
    width: 100%;
  }
  
  /* 2) Ajouter de l’espace entre la dropdown et l’iframe */
  #page4-content .form-field {
    margin-bottom: var(--spacing-md);
  }
  
  /* Optionnel : si vous voulez que le PDF occupe bien la carte */
  #page4-content .pdf-frame {
    display: block;
    width: 100%;
    margin-top: var(--spacing-sm);
  }


/* ================================
 Index — "Recherche dans l'index" + "Astuce" : anti-overlap mobile
 ================================ */
@media (max-width: 720px) {

  /* Cible le conteneur qui a exactement ces 2 enfants (label + astuce) */
  div:has(> label.form-field.flex-2):has(> small.badge.tips.details) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
  }

  /* Le label prend toute la largeur, pas de comportement inline */
  div:has(> label.form-field.flex-2):has(> small.badge.tips.details)
  > label.form-field.flex-2 {
    display: block;
    width: 100%;
    margin: 0;
    position: static; /* au cas où une règle globale le positionnerait */
  }

  /* L’astuce passe sous le label et ne “flotte” pas à droite */
  div:has(> label.form-field.flex-2):has(> small.badge.tips.details)
  > small.badge.tips.details {
    display: block;
    width: 100%;
    margin-left: 0 ;  /* si une règle desktop pousse à droite */
    margin-top: 0;
    white-space: normal;
  }
}

.field-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:.5rem;
}
.btn-clear{
border:0;
background:transparent;
font-size:1.25rem;
line-height:1;
padding:.25rem .5rem;
cursor:pointer;
opacity:.75;
}
.btn-clear:hover{ opacity:1; }


/* ================================
 Page 7 — Split pane (Index | Tabular)
 - Panneau gauche redimensionnable
 - Responsive: empilement sur tablette/mobile
 ================================ */
.split-pane{
/* valeurs ajustées dynamiquement par assets/split-pane.js */
--split-left: 36%;
--split-top: 46%;

display:flex;
gap:0;               /* la poignée gère la séparation visuelle */
align-items:stretch;
width:100%;
}

/* Hauteur "application" sur desktop pour éviter un scroll page + un scroll panneau */
@media (min-width: 1101px){
.split-pane{ height: calc(100vh - 220px); }
.split-pane > .card{ height: 100%; }
}

.pane-left{
flex: 0 0 var(--split-left);
min-width: 280px;
max-width: 70%;
overflow: auto;
border-right: 0;
}

.pane-right{
flex: 1 1 auto;
min-width: 360px;
overflow: auto;
}

/* Poignée de redimensionnement */
.splitter{
flex: 0 0 10px;
cursor: col-resize;
position: relative;
background: transparent;
}
.splitter::before{
content:"";
position:absolute;
inset: 0;
margin: 0 auto;
width: 2px;
height: 100%;
background: rgba(0,0,0,0.15);
}
.splitter:hover::before,
.splitter:focus::before{
background: rgba(0,0,0,0.35);
}
.splitter:focus{
outline: none;
}

/* Tablette & mobile : empilement vertical + hauteur réglable */
@media (max-width: 1100px){
.split-pane{
  flex-direction: column;
  height: calc(100vh - 260px);
}

.pane-left{
  flex: 0 0 var(--split-top);
  min-width: 0;
  max-width: none;
  min-height: 220px;
  max-height: 70vh;
}

.pane-right{
  min-width: 0;
  flex: 1 1 auto;
}

.splitter{
  flex: 0 0 10px;
  width: 100%;
  height: 10px;
  cursor: row-resize;
}
.splitter::before{
  width: 100%;
  height: 2px;
}
}

/* Index : suppression UI de la checklist (déjà gérée dans le panneau Tabular) */
.pane-left button[id*="indexes-add-button"]{ display:none ; }

/* Page 7 — Mobile: ne pas forcer une hauteur fixe du split-pane */
@media (max-width: 720px){
  .split-pane{
    height: auto ;         /* laisse le contenu définir la hauteur */
  }

  .pane-left{
    min-height: 0 ;        /* évite de “manger” toute la hauteur */
    max-height: none ;
  }

  .pane-right{
    min-height: 260px;               /* garantit qu’on voit le panneau Tabular */
  }

  /* le splitter horizontal reste OK */
}

/* Split pane — indispensable pour que le drag fonctionne sur mobile */
.splitter{
  touch-action: none;              /* empêche le navigateur de convertir le drag en scroll */
  -webkit-user-select: none;
  user-select: none;
}
.split-pane.is-resizing,
.split-pane.is-resizing *{
  -webkit-user-select: none;
  user-select: none;
}

/* Évite que le scroll "rebond" prenne la main sur le drag */
.pane-left, .pane-right{
  overscroll-behavior: contain;
}

.details-link-btn{
  background: none;
  border: none;
  padding: 0;
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.details-link-btn:hover{
  opacity: 0.85;
}


.code-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:6px 0;
}
.code-link-btn{
  background:none;
  border:none;
  padding:0;
  color:#0d6efd;
  text-decoration:underline;
  cursor:pointer;
  font-weight:600;
}
.code-desc-span{
  color:#111;
}
.modal-section-title{
  font-weight:700;
  margin-bottom:6px;
}

.modal-title-line{
  font-weight:700;
  font-size:18px;
}


/* Conteneur global */


/* Corps (le Pre généré par format_text_with_links) */


/* ------- Thèmes par type (à ajuster) ------- */


.tabular-instruction--note,
.tabular-instruction--sevenChrNote,
.tabular-instruction--sevenChrDef,
.tabular-instruction--includes,


/* ================================
   TABULAR — Code block + Instruction blocks + Modal breadcrumb/notes (EPURE)
   ================================ */

.tabular-code-block{
  padding: 8px 0;
  border-top: 1px solid #eee;
}

.tabular-code-header{
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.tabular-code-link{
  background: none;
  border: none;
  padding: 0;
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}

.tabular-code-desc{
  color: #111;
  font-weight: 700;
}

/* Instructions: indent "officiel" + empilement des blocs */
.tabular-code-instructions{
  margin-left: 18px;
  margin-top: 8px;
  color: #111;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bloc générique d'instruction */
.tabular-instruction{
  border: 1px solid rgba(0,0,0,0.08);
  border-left-width: 6px;
  border-radius: 4px;
  padding: 6px 10px;
}

/* Label d'instruction (style "officiel") */
.tabular-instruction-title{
  display: inline-block;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  background: rgba(0,0,0,0.06);
}

/* Le contenu vient de format_text_with_links -> html.Pre */
.tabular-instruction-body pre{
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  white-space: pre-wrap;
}

/* --- Thèmes par type --- */

/* EXCLUDES (rouge) */
.tabular-instruction--excludes1{
  background: #fdecea;
  border-left-color: #d93025;
}
.tabular-instruction--excludes1 .tabular-instruction-title{
  background: #f9d3cf;
}

.tabular-instruction--excludes2{
  background: #f3e9d4;
  border-left-color: #efdcb7;
}
.tabular-instruction--excludes2 .tabular-instruction-title{
  background: #e4c488;
}

/* USE ADDITIONAL CODE (bleu) */
.tabular-instruction--useAdditionalCode{
  background: #e8f1fe;
  border-left-color: #1a73e8;
}
.tabular-instruction--useAdditionalCode .tabular-instruction-title{
  background: #d2e3fc;
}

/* CODE FIRST / CODE ALSO */
.tabular-instruction--codeFirst{
  background: #e3f2fd;
  border-left-color: #0288d1;
}
.tabular-instruction--codeFirst .tabular-instruction-title{
  background: #d6ecfb;
}

.tabular-instruction--codeAlso{
  background: #f3e8fd;
  border-left-color: #7e57c2;
}
.tabular-instruction--codeAlso .tabular-instruction-title{
  background: #e7d7fb;
}

/* NOTES / INCLUDES / INCLUSION TERMS */
.tabular-instruction--note,
.tabular-instruction--sevenChrNote,
.tabular-instruction--sevenChrDef,
.tabular-instruction--includes,
.tabular-instruction--inclusionTerm{
  background: #f7f7f7;
  border-left-color: #bdbdbd;
}
.tabular-instruction--note .tabular-instruction-title,
.tabular-instruction--sevenChrNote .tabular-instruction-title,
.tabular-instruction--sevenChrDef .tabular-instruction-title,
.tabular-instruction--includes .tabular-instruction-title,
.tabular-instruction--inclusionTerm .tabular-instruction-title{
  background: #eeeeee;
}

/* Modal breadcrumb */
.breadcrumb-wrap{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}

.crumb-link{
  background:none;
  border:none;
  padding:0;
  color:#0d6efd;
  text-decoration:underline;
  cursor:pointer;
  font-weight:600;
}

/* Parent notes */
.parent-notes-block{
  padding: 8px 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fafafa;
}

.parent-notes-title{
  font-weight: 700;
  color: #111;
}

.parent-notes-body{
  margin-left: 10px;
  margin-top: 6px;
}

.parent-notes-header{
  margin-bottom: 6px;
}

.parent-notes-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 18px;  /* même indent que tabular, optionnel */
}

.tabular-actions-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

/* Container check consistency */
.consistency-blocks{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Styles spécifiques si vous voulez différencier HAC / POA */
.tabular-instruction--consistency-hac{
  background: #fff7e6;
  border-left-color: #f29900;
}
.tabular-instruction--consistency-hac .tabular-instruction-title{
  background: #ffe6b3;
}

.tabular-instruction--consistency-poa{
  background: #e8efeb;
  border-left-color: #4ebe8c;
}
.tabular-instruction--consistency-poa .tabular-instruction-title{
  background: #c9e5d8;
}

/* Conteneur principal qui couvre tout l'écran avec flou */
.modal-overlay-transparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

/* Carte de la modale */
.modal-card-fixed {
    background-color: #ffffff;
    width: 90%;
    max-width: 950px;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* Pour séparer header et corps */
    position: relative;
    overflow: hidden;
}

/* Header qui reste toujours visible en haut */
.modal-header-sticky {
    flex: 0 0 auto;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #eeeeee;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Zone de contenu qui scrolle */
.modal-body-scroll {
    flex: 1 1 auto;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    background: #fff;
}

/* Titres à l'intérieur de la modale */
.modal-body-scroll h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #1a1a1a;
    border-left: 4px solid var(--primary);
    padding-left: 10px;
}

.consistency-rule-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.consistency-owner-block {
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

.consistency-owner-header {
  font-weight: 600;
  margin-bottom: 6px;
}

.consistency-owner-body pre {
  margin: 0;
  line-height: 1.45;
}