/* ===================== Reset global ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===================== Structure de base ===================== */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  overflow-x: hidden;
}

/* ===================== Header ===================== */
header { width: 100%; background-color: #000; padding: 10px 20px; }
header img { height:120px !important; vertical-align: middle; display: block; }

/* ===================== Titres ===================== */
h1, h3 { margin-top: 30px; text-align: center; }
h2 { margin-top: 30px; text-align: left; margin-left: 40px; }

/* ===================== Boutons & sélecteurs génériques ===================== */
button, select {
  font-size: 16px;
  
  padding: 10px 20px;
  border: 1px solid #8c8c8c;
  border-radius: 4px;
  background-color: rgb(240, 240, 240);
}

/* ===================== Tableau Handsontable ===================== */
#hot { min-width: 100%; height: 600px; overflow: hidden; }

/* ===================== Conteneurs ===================== */
.container { max-width: 900px; margin: 0 auto; text-align: center; }
.container_Excel { max-width: 800px; margin: 40px auto; }

/* ===================== Ligne select + bouton ===================== */
.selector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.selector-row select, .selector-row button { font-size: 16px; padding: 10px 20px; }

/* ===================== Titre centré uniquement ===================== */
.title-centered { text-align: center; margin-top: 40px; }

/* ===================== Contenu aligné à gauche ===================== */
.content-left { max-width: 95%; margin: 0 0 0 40px; }

/* ===================== Dropdowns génériques ===================== */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
select:hover { border-color: #999; }
select:focus { outline: none; border-color: #222; box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }

/* ===================== Upload ===================== */
.upload-row { margin-top: 20px; display: flex; justify-content: center; }
input[type="file"] {
  font-size: 16px; padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc;
  background-color: #fff; cursor: pointer;
}

/* ===================== Page index (fond) ===================== */
.index-page {
  background-image: url("Images/Background.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: 100vh; margin: 0; padding: 0;
}
.container_index {
  text-align: center; background-color: white;
  padding-top: 23px; padding-bottom: 35px; border-radius: 15px;
  padding-left: 20px; padding-right: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.logo-intermarche { display: block; margin: 0 auto 30px auto; max-width: 250px; height: auto; }
.logo-moodx { display: block; margin: 0 auto 30px auto; max-width: 200px; height: auto; }
.menu-stack { display: flex; flex-direction: column; gap: 15px; align-items: center; margin-top: 20px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 30px; justify-content: center; margin-top: 20px; }
.menu-button {
  display: block; padding: 12px 24px; font-size: 16px; background-color: rgb(222, 221, 221);
  color: #5c5858; border-radius: 6px; text-decoration: none; text-align: center; cursor: pointer;
  min-width: 200px; transition: background-color 0.2s ease;
}

/* ===================== Tableau wrapper ===================== */
.table-wrapper { overflow-x: auto; width: 100%; margin-top: 20px; }

/* ===================== Meta (list.html) ===================== */
.title-centered .meta-info { text-align: left; padding-left: 40px; }
.meta-line { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.meta-label { color:#333; font-size: 18px; }
.meta-value { color:#007acc; font-weight: normal; }
#metaContainer { display: none; text-align: left; padding-left: 40px; margin-top: 20px; }
.title-centered #metaContainer { text-align: left; padding-left: 40px; }

/* ============================================================= */
/* =============== STYLES CRÉATE.HTML (spécifiques) ============ */
/* ============================================================= */

/* Lignes label + champ */


/* Champ Titre (beau) */
#titleInput {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: box-shadow .2s ease, border-color .2s ease;
  width: 100%;
  display: inline-block;
}
#titleInput::placeholder { color:#bbb; }
#titleInput:focus { outline: none; border-color: #a0a0a0; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

/* Select Template (même look) */
#templateSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: box-shadow .2s ease, border-color .2s ease;
  width: 100%;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 12px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px; /* pour la flèche */
}
#templateSelect:focus { outline: none; border-color: #a0a0a0; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }


/* ===== Cartes sans flex ===== */
button.image-button {
  display: block;               /* pas de flex */
  width: 100%;
  height: 200px;
  padding: 16px;
  text-align: center;           /* centre le texte */
  background: #f6f6f6;
  border: 1px solid #cfcfcf;
  border-radius: 12px;
  color: #222;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}

button.image-button img {
  display: block;               /* permet le centrage via margin auto */
  margin: 0 auto 12px;          /* centre l'image + espace sous l'image */
  width: 80px;
  height: auto;
}

button.image-button span {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
}

button.image-button:hover {
  background: #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ===== Grille 2 colonnes (sans auto-fit) ===== */
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 colonnes fixes */
  gap: 24px;
  justify-items: stretch;
  align-items: stretch;
  margin-top: 20px;
}

/* Donne un peu plus de largeur pour que 2 colonnes passent vraiment */
.container {
  max-width: 500px;  /* augmente si besoin */
  margin: 0 auto;
  text-align: center;
}

/* Sur petits écrans: 1 colonne */
@media (max-width: 820px) {
  .button-grid { grid-template-columns: 1fr; }
}
/* style.css */
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:120px; }

.site-header .logo {
  display:block;
  height:120px !important;
  width:auto !important;
  max-height:none !important;
  line-height:normal;
}
/* optionnel */
.logout-btn { padding:6px 12px; cursor:pointer; }

/* ============================================================= */
/* ===============  CREATE — Formulaire propre  ================= */
/* ============================================================= */

/* Rangées + labels (label au-dessus) */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
  text-align: left;
}
.form-row > label {
  font: 700 16px/1.2 Arial, sans-serif;
  color: #111;
}

/* Dates côte à côte (2 colonnes) */
.dates-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.dates-row .col {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ===== Style commun des champs de CE formulaire (par ID) ===== */

/* Titre */
#titleInput {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 12px 18px;
  width: 100%;
  margin: 0;
}
#titleInput::placeholder { color:#bbb; }
#titleInput:focus { outline:none; border-color:#a0a0a0; box-shadow:0 0 0 3px rgba(0,0,0,.08); }

/* Date début */
#dateDebut {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 0 18px;               /* padding vertical géré ci-dessous pour WebKit */
  width: 100%;
  margin: 0;
}
#dateDebut:focus { outline:none; border-color:#a0a0a0; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
/* centrage visuel pour Chrome/Safari */
#dateDebut::-webkit-datetime-edit{ padding:12px 0; line-height:24px; }
#dateDebut::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.7; margin-right:6px; }

/* Date fin */
#dateFin {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 0 18px;
  width: 100%;
  margin: 0;
}
#dateFin:focus { outline:none; border-color:#a0a0a0; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
#dateFin::-webkit-datetime-edit{ padding:12px 0; line-height:24px; }
#dateFin::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.7; margin-right:6px; }

/* Semaine (number) */
#semaineInput {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 12px 18px;
  width: 100%;
  margin: 0;
}
#semaineInput:focus { outline:none; border-color:#a0a0a0; box-shadow:0 0 0 3px rgba(0,0,0,.08); }

/* Nombre de pages (number) */
#pagesInput {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 12px 18px;
  width: 100%;
  margin: 0;
}
#pagesInput:focus { outline:none; border-color:#a0a0a0; box-shadow:0 0 0 3px rgba(0,0,0,.08); }

/* Template (select) */
#templateSelect {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 12px 18px;
  width: 100%;
  margin: 0;
  /* flèche custom */
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 12px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
#templateSelect:focus { outline:none; border-color:#a0a0a0; box-shadow:0 0 0 3px rgba(0,0,0,.08); }

/* Import (file) */
#fileInput,
input[type="file"] {
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #d5d5d5;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  cursor: pointer;
  width: auto;
  margin: 0;                 /* supprime tout margin-top hérité */
}

/* Dates côte à côte : 2 colonnes égales */
.form-row.dates-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr;  /* colonnes égales */
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}

/* Empile label + input dans chaque colonne */
.form-row.dates-row .col{
  display: flex;
  flex-direction: column;
  min-width: 0;  /* évite que le contenu pousse la colonne */
}

/* Les deux inputs prennent 100% de leur colonne */
.form-row.dates-row input[type="date"]{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Responsive: repasse en colonne si écran étroit */
@media (max-width: 700px){
  .form-row.dates-row{
    grid-template-columns: 1fr !important;
  }
}
/* Force les 2 dates à prendre toute leur colonne */
.form-row.dates-row #dateDebut,
.form-row.dates-row #dateFin {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Et garde bien la grille à 2 colonnes égales */
.form-row.dates-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}
.form-row.dates-row .col{ display:flex; flex-direction:column; min-width:0; }
/* Chrome fix : force pleine largeur pour les 2 dates */
#dateDebut,
#dateFin {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* === Champs date communs (Début, Fin, Validation, Imprimeur) === */
#dateDebut,
#dateFin,
#dateValidation,
#dateImprimeur {
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 0 18px;
  width: 100%;
  margin: 0;
}

#dateDebut:focus,
#dateFin:focus,
#dateValidation:focus,
#dateImprimeur:focus {
  outline: none;
  border-color: #a0a0a0;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* Ajustement Chrome/Safari : centrage du texte dans le champ */
#dateDebut::-webkit-datetime-edit,
#dateFin::-webkit-datetime-edit,
#dateValidation::-webkit-datetime-edit,
#dateImprimeur::-webkit-datetime-edit {
  padding: 12px 0;
  line-height: 24px;
}

#dateDebut::-webkit-calendar-picker-indicator,
#dateFin::-webkit-calendar-picker-indicator,
#dateValidation::-webkit-calendar-picker-indicator,
#dateImprimeur::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .7;
  margin-right: 6px;
}

/* Garde la rangée en 2 colonnes égales */
.form-row.dates-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}
.form-row.dates-row .col{ display:flex; flex-direction:column; min-width:0; }

/* Base: jamais de display:none ici pour éviter les conflits */

/* Par défaut : masqué via la classe générique */
.meta-wrap {
  display: none;
  text-align: left;
  align-self: flex-start;
}

/* Affiché quand le JS ajoute la classe */
.meta-wrap.is-visible {
  display: block;
}

/* Si l’attribut HTML hidden est présent, on force le masquage */
#metaContainer[hidden] {
  display: none !important;
}

/* Ceinture et bretelles : si visible + id, on gagne sur toute autre règle résiduelle */
#metaContainer.is-visible {
  
}
/* Conteneur global */
#metaContainer {
  display: table;
  border-collapse: collapse;

  font-size: 15px;

 
  text-align: left;
  align-self: flex-start;
}

/* Chaque ligne */
.meta-row {
  display: table-row;
}

/* Les cellules */
.meta-cell {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;   /* texte centré */
  vertical-align: middle;
  font-size: 15px;
}

/* Les libellés (Titres) */
.meta-label {
  font-weight: bold;
  background: #f2f2f2;
  min-width: 150px;
}

/* Les valeurs */
.meta-value {
  color: #222;
}
.meta-table {
  display: table;
  border-collapse: collapse;
  margin: 20px 40px;
  width: auto; /* ou 100% si tu veux la largeur complète */
  border: 1px solid #ccc;
  background: #fff;
}
/* Les en-têtes (titres) */
.meta-header {
  font-weight: bold;
  background: #f0f0f0;
}
/* Tableau méta */
.meta-table-horizontal {
  border-collapse: collapse;   /* fusionne les bordures */
  table-layout: fixed;         /* colonnes de largeur régulière */
  width: auto;                 /* mets 100% si tu veux plein écran */
  margin: 12px 0 18px 0;
  background: #fff;
  border: 1px solid #d7d7d7;   /* cadre extérieur */
}

/* Cellules */
.meta-table-horizontal th,
.meta-table-horizontal td {
  border: 1px solid #d7d7d7;   /* lignes entre les cases */
  padding: 8px 10px;
  text-align: center;          /* texte centré */
  vertical-align: middle;
  white-space: nowrap;         /* évite les retours à la ligne */
}

/* En‑têtes */
.meta-table-horizontal th {
  background: #f4f4f4;
  font-weight: 700;
}

/* Optionnel : forcer l’ancrage à gauche du bloc (si tu utilises meta-force-left) */
.meta-force-left {
  margin-left: 0;
}
.meta-title {
  /* espace au-dessus et au-dessous */
  font-size: 18px;
  font-weight: 700;
  color: #111;
  text-align: left;             /* aligné à gauche */
}
.meta-title span {
  font-weight: 400;
  color: #000000;               /* met la valeur en couleur */
}
.link-cell { text-align: center; }
.excel-logo { width: 45px; height: auto; transition: transform .2s; cursor: pointer; }
a[style*="pointer-events: none"] .excel-logo { opacity: .4; cursor: default; }
.excel-logo:hover { transform: scale(1.08); }
/* css/login.css */
.login-title {
  text-align: center;
  font-size: 24px;
  margin: 20px 0;
}
.welcome-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin: 20px 0;
  color: #333;
}

/* Conteneur général du formulaire */
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}

/* Chaque ligne label + input */
.login-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

/* Labels */
.login-field label {
  flex: 0 0 120px; /* largeur fixe du label */
  font-weight: bold;
  text-align: right;
}

/* Champs */
.login-field input {
  flex: 1; /* prend tout l’espace restant */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

/* Bouton */
.login-form button {
  background-color: #0073e6;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

.login-form button:hover {
  background-color: #005bb5;
}
button.has-dot::after {
  content: " ●";
  color: limegreen;
  font-size: 1.2em;
}

/* Dropdown */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.dropdown { position: relative; display: inline-block; }

.dropbtn {
  background: #333;
  color: #fff;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
/* Panneau principal */
.dropdown-content{
  display:none;position:absolute;top:calc(100% + 4px);right:0;left:auto;
  min-width:220px;background:#f9f9f9;border:1px solid #e5e5e5;box-shadow:0 6px 16px rgba(0,0,0,.15);z-index:1000;
  overflow:visible;
  padding: 6px 0;              /* ⇐ on met le padding ici (et plus sur .menu-list) */
}
.dropdown.open .dropdown-content{display:block}

/* Liste : plus de padding, sinon ça décale le <li> */
.menu-list{ list-style:none; margin:0; padding:0; }  /* ⇐ corrige le décalage */
.menu-item{ position: static; }
.menu-link,.logout-link,.submenu-toggle{
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  width:100%;padding:10px 14px;color:#333;text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;font:inherit
}
.menu-link:hover,.logout-link:hover,.submenu-toggle:hover{background:#eee}
.dropdown-content hr{margin:6px 0;border:0;border-top:1px solid #eee}

/* Sous‑menu à GAUCHE, parfaitement aligné */
.submenu{ position: static; }
/* Sous-menu sorti à GAUCHE, top piloté en JS */
.submenu-content{
  display:none;
  position:absolute;         /* <-- relatif à .dropdown-content */
  right:100%;                /* sort à gauche */
  top:0;                     /* sera recalé en JS */
  left:auto;
  margin:0;
  min-width:220px;
  background:#fff;
  border:1px solid #e5e5e5;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  z-index:1100;
}
.submenu.open > .submenu-content{ display:block; }
.submenu .submenu-link{display:block;padding:10px 14px;text-decoration:none;color:#333}
.submenu .submenu-link:hover{background:#f2f2f2}

/* Mobile */
@media (max-width:640px){
  .submenu-content{position:relative;top:0;right:0;left:0;margin:0;box-shadow:none;border:none}
}
.submenu-toggle:focus{ outline: none; }
.link-cell.is-disabled a {
  pointer-events: none;
  cursor: not-allowed;
}
.link-cell.is-disabled .excel-logo {
  opacity: .35;
  filter: grayscale(1);
}