/* ==========================================================================
   Planning mural 3 semaines — L'Atelier du Trégor
   Styles portés depuis la maquette Claude Design. Les valeurs sont en
   millimètres pour que l'écran et la sortie A3 soient identiques.

   Règle de partage : tout ce qui est constant vit ici, tout ce qui dépend
   des données (colonne de départ, couleur, bord pointillé) est posé en
   style en ligne par app.js.
   ========================================================================== */

/* --- Polices servies en local : la page doit s'ouvrir sans réseau ------- */

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-narrow-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-narrow-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Page ---------------------------------------------------------------
   Marge @page à 0 : la maquette combinait une marge de 8 mm avec un
   conteneur de 420 mm, soit 16 mm de trop pour la zone imprimable A3.
   La marge visuelle est désormais portée par le padding de .feuille.      */

@page { size: A3 landscape; margin: 0; }

html, body { margin: 0; padding: 0; background: #f2f1ee; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
a { color: #111; text-decoration: underline; }
a:hover { color: #555; }

/* La bascule écran large / téléphone / impression est en fin de fichier :
   elle doit passer après les règles de mise en page des deux vues. */

/* ==========================================================================
   VUE A3
   ========================================================================== */

.feuille {
  width: 420mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 8mm;
  box-sizing: border-box;
  background: #fff;
  font-family: 'Archivo Narrow', sans-serif;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 3.5mm;
}

/* --- Bandeau de tête ---------------------------------------------------- */

.bandeau {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1.4px solid #111;
  padding-bottom: 2mm;
}
.bandeau-gauche { display: flex; align-items: baseline; gap: 5mm; }
.bandeau-titre { font-family: Caveat, cursive; font-size: 12mm; line-height: 0.95; }
.bandeau-lieu {
  font-size: 3.4mm;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 1mm;
}
.bandeau-droite { display: flex; align-items: center; gap: 4mm; }
.bandeau-mention { font-family: Caveat, cursive; font-size: 6mm; }

/* --- Navigation ± 3 semaines (jamais imprimée) -------------------------- */

.nav { display: flex; align-items: center; gap: 2mm; }
.nav-bouton {
  width: 9mm;
  height: 7mm;
  border: 1.2px solid #111;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 1.2mm;
}
.nav-bouton:disabled { border-color: #c9c9c9; cursor: default; opacity: 0.45; }

.nav-triangle {
  width: 0;
  height: 0;
  border-top: 2.1mm solid transparent;
  border-bottom: 2.1mm solid transparent;
}
.nav-triangle--gauche { border-right: 3mm solid #111; }
.nav-triangle--droite { border-left: 3mm solid #111; }
.nav-bouton:disabled .nav-triangle--gauche { border-right-color: #9a9a9a; }
.nav-bouton:disabled .nav-triangle--droite { border-left-color: #9a9a9a; }

.nav-libelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38mm;
  white-space: nowrap;
}
.nav-fenetre { font-size: 3.4mm; font-weight: 700; letter-spacing: 0.06em; }
.nav-indice { font-size: 2.6mm; color: #666; }

/* --- Grille : en-têtes --------------------------------------------------- */

.grille { position: relative; }

.entete { display: flex; align-items: stretch; border-bottom: 1.4px solid #111; }
.entete-chantier {
  width: 46mm;
  flex: 0 0 46mm;
  display: flex;
  align-items: flex-end;
  padding: 0 2mm 1.5mm 0;
  font-size: 3.2mm;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #444;
}
.entete-jours {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: auto auto;
}

.tete-semaine {
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  padding: 1mm 0 0.6mm 2mm;
}
.tete-semaine-code { font-family: Caveat, cursive; font-size: 8mm; line-height: 1; }
.tete-semaine-plage { font-size: 3mm; color: #555; padding-bottom: 1.2mm; }

.tete-jour {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4mm 0 1mm;
  border-left: 1px solid #dcdcdc;
}
.tete-jour--lundi { border-left: none; }
.tete-jour-lettre { font-family: Caveat, cursive; font-size: 5.4mm; line-height: 1; }
.tete-jour-num { font-size: 2.7mm; color: #666; }

/* --- Grille : lignes chantier -------------------------------------------- */

.ligne {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #cfcfcf;
  background: #fff;
}
/* Lignes laissées libres pour être complétées au crayon */
.ligne--vide { border-bottom: 1px dashed #c4c4c4; }
.ligne--absences { border-top: 1.4px solid #111; background: #f0f0ee; }

.ligne-titre {
  width: 46mm;
  flex: 0 0 46mm;
  padding: 1.6mm 2mm 1.6mm 0;
  box-sizing: border-box;
}
.ligne-client { font-family: Caveat, cursive; font-size: 6mm; line-height: 1.05; }
.ligne-commune { font-size: 3.1mm; color: #555; letter-spacing: 0.04em; }

/* Fond des voies : un filet de 0,25 mm au départ de chacun des 15 jours */
.voies {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: 8.4mm;
  align-content: center;
  padding: 1.7mm 0;
  background-image: repeating-linear-gradient(to right, #d9d9d9 0 0.25mm, rgba(0, 0, 0, 0) 0.25mm 6.66667%);
}

/* --- Barres -------------------------------------------------------------- */

.barre {
  margin: 0.5mm 0.6mm;
  padding: 0 2mm;
  gap: 1.8mm;
  border-radius: 3.4mm;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
/* Barre courte : on resserre et on laisse tomber nom et note */
.barre--serree { padding: 0 1mm; gap: 1mm; }

.barre-ini { font-weight: 700; font-size: 4.1mm; letter-spacing: 0.08em; }
.barre-nom {
  font-size: 3.3mm;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre-note {
  font-size: 2.9mm;
  color: #333;
  font-style: italic;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Pastille du lieu : ATELIER / CHANTIER, ou le motif d'absence */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pastille--large {
  height: 4.4mm;
  padding: 0 1.6mm;
  border-radius: 2.2mm;
  border: 1px solid #111;
  background: rgba(255, 255, 255, 0.75);
  font-size: 2.7mm;
  letter-spacing: 0.1em;
}
.pastille--serree { font-size: 2.5mm; letter-spacing: 0.02em; }

/* --- Habillages des barres ----------------------------------------------
   L'aplat reçoit sa couleur en style en ligne ; hachures et contour sont
   entièrement constants. Aucun aplat sombre : économie de toner.         */

.hab--aplat { border: 1px solid rgba(0, 0, 0, 0.32); }
.hab--hachures {
  background: repeating-linear-gradient(45deg, #ffffff 0 1.1mm, #b9b9b9 1.1mm 1.5mm);
  border: 1px solid #6d6d6d;
}
.hab--contour { background: #fff; border: 1.5px solid #111; }

/* Placé après les habillages : une absence est toujours en pointillés */
.barre--absence { border-style: dashed; border-width: 1.2px; border-color: #111; }

/* --- Calque : séparateurs de semaine et marqueurs verticaux -------------- */

.calque {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46mm;
  right: 0;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  pointer-events: none;
}
.separateur { grid-row: 1; border-left: 1.2px solid #111; }

.marqueur {
  grid-row: 1;
  background: repeating-linear-gradient(45deg, #ffffff 0 1.1mm, #b9b9b9 1.1mm 1.5mm);
  opacity: 0.62;
  border-left: 1px solid #8a8a8a;
  border-right: 1px solid #8a8a8a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marqueur-libelle {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 3.4mm;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #333;
  background: rgba(255, 255, 255, 0.82);
  padding: 2mm 0.4mm;
}

/* --- Bande « à anticiper » ----------------------------------------------- */

.anticiper {
  border: 1.4px solid #111;
  padding: 2.5mm 3mm;
  display: flex;
  flex-direction: column;
  gap: 1.6mm;
}
.anticiper-tete {
  display: flex;
  align-items: baseline;
  gap: 4mm;
  border-bottom: 1px solid #bbb;
  padding-bottom: 1.4mm;
}
.anticiper-titre { font-family: Caveat, cursive; font-size: 6.4mm; line-height: 1; }
.anticiper-soustitre {
  font-size: 2.8mm;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
}
.anticiper-colonnes,
.anticiper-ligne {
  display: grid;
  grid-template-columns: 18mm 42mm 1fr 34mm;
  gap: 3mm;
  align-items: baseline;
}
.anticiper-colonnes {
  font-size: 2.6mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  padding-bottom: 0.8mm;
  border-bottom: 1px solid #bbb;
}
.anticiper-ligne {
  font-size: 3.1mm;
  padding-bottom: 0.9mm;
  border-bottom: 1px dotted #d5d5d5;
}
.anticiper-date { font-weight: 700; letter-spacing: 0.03em; }
.anticiper-chantier { letter-spacing: 0.06em; text-transform: uppercase; }
.anticiper-objet { color: #222; }
.anticiper-cat {
  font-size: 2.7mm;
  letter-spacing: 0.1em;
  color: #333;
  border: 1px solid #b5b5b5;
  padding: 0.3mm 1.5mm;
  justify-self: start;
}
/* Débordement de la bande : le compte des lignes non affichées */
.anticiper-reste { font-size: 2.8mm; color: #666; font-style: italic; padding-top: 0.4mm; }

/* --- Pied de page -------------------------------------------------------- */

.pied {
  margin-top: auto;
  padding-top: 2mm;
  border-top: 1px solid #bbb;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6mm;
}
.legende { display: flex; flex-wrap: wrap; gap: 2mm 4mm; }
.legende-item { display: flex; align-items: center; gap: 1.5mm; font-size: 3mm; }
.legende-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8mm;
  height: 5mm;
  border-radius: 2.5mm;
  font-size: 3mm;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.pied-droite { font-size: 2.8mm; color: #555; text-align: right; white-space: nowrap; }

/* Anomalies remontées par les sources — rien ne disparaît en silence */
.avertissements {
  font-size: 2.6mm;
  color: #7a7a7a;
  text-align: right;
  white-space: normal;
  max-width: 130mm;
  margin-left: auto;
  padding-bottom: 1mm;
}
.avertissements-titre { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ==========================================================================
   VUE TÉLÉPHONE (sous 760 px)
   ========================================================================== */

.mobile {
  font-family: 'Archivo Narrow', sans-serif;
  color: #111;
  background: #fff;
  padding: 16px;
  flex-direction: column;
  gap: 22px;
}

.m-entete { border-bottom: 2px solid #111; padding-bottom: 8px; }
.m-titre { font-family: Caveat, cursive; font-size: 30px; line-height: 1; }
.m-soustitre {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}
.m-nav { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.m-nav-libelle { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }

.m-semaine { display: flex; flex-direction: column; gap: 8px; }
.m-semaine-tete {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid #111;
  padding-bottom: 4px;
}
.m-semaine-titre { font-family: Caveat, cursive; font-size: 24px; line-height: 1; }
.m-semaine-meta { font-size: 12px; color: #555; }

.m-item { border-radius: 10px; padding: 8px 10px; }
.m-item-tete { display: flex; align-items: center; gap: 8px; }
.m-item-ini { font-weight: 700; font-size: 18px; letter-spacing: 0.08em; }
.m-item-nom { font-size: 15px; }
.m-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  border: 1px solid #111;
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.m-item-chantier { font-size: 14px; margin-top: 2px; }
.m-item-jours { font-size: 13px; color: #333; }

.m-note {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
  border: 1px dashed #999;
  padding: 6px 8px;
}

/* Bande « à anticiper » sur téléphone : la liste complète, sans plafond */
.m-anticiper-ligne {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 10px;
  font-size: 14px;
  padding-bottom: 6px;
  border-bottom: 1px dotted #d5d5d5;
}
.m-anticiper-date { font-weight: 700; }
.m-anticiper-chantier { letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; }
.m-anticiper-objet { grid-column: 2; color: #222; }
.m-anticiper-cat { grid-column: 2; font-size: 11px; letter-spacing: 0.1em; color: #555; }

.m-avertissements { font-size: 12px; color: #7a7a7a; border-top: 1px solid #bbb; padding-top: 8px; }

/* --- État de chargement / erreur ---------------------------------------- */

.etat {
  font-family: 'Archivo Narrow', sans-serif;
  color: #111;
  padding: 24px;
  font-size: 16px;
}

/* ==========================================================================
   BASCULE DES VUES — à garder en dernier
   Les deux vues sont construites, puis c'est le CSS qui choisit. Résultat :
   une impression lancée depuis une fenêtre étroite donne malgré tout l'A3.
   ========================================================================== */

.mobile { display: none; }

@media (max-width: 760px) {
  .feuille { display: none; }
  .mobile  { display: flex; }
}

@media print {
  html, body { background: #fff; }
  [data-noprint] { display: none !important; }
  .feuille { display: flex !important; }
  .mobile  { display: none !important; }
}