/* VigiChantier : système "Signalétique de chantier" (P6-D1).
   Encre/papier, couleurs de vigilance en surfaces fonctionnelles,
   bordures 3px, radius 0, contrôles 56px, capitales 900.
   Police d'affichage : Archivo Black (OFL), woff2 embarqué (P6-D2),
   voir /static/OFL-archivo-black.txt. */

@font-face {
  font-family: 'Archivo Black';
  src: url('/static/archivo-black.woff2') format('woff2');
  font-display: swap;
}

:root {
  --encre: #16181D;      /* texte, bordures, boutons */
  --papier: #FAFAF7;     /* fond de page */
  --blanc: #FFFFFF;      /* fond des cartes */
  --gris: #5F6672;       /* texte secondaire */
  --filet: #D8DCE0;      /* séparateurs */
  --marque: #F26419;     /* accents de marque, PAS le niveau orange */
  --vert: #2F8F4E;
  --jaune: #F5C400;      /* texte encre par-dessus, jamais blanc */
  --orange: #F26419;
  --rouge: #C1121F;
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.55;
  margin: 0;
}

.contenu {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--encre);
}

a:hover {
  color: var(--marque);
}

/* ---- Affichage (titres) ------------------------------------------- */

.titre {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* ---- Bandeau de démonstration --------------------------------------- */
/* Étiquetage permanent des données fictives (P11-D2, ligne rouge de la
   spec §2). Fond de marque, texte encre : il ne peut pas se confondre avec
   une bande de niveau de vigilance. */

.bandeau-demo {
  margin: 0;
  padding: 12px 20px;
  background: var(--marque);
  color: var(--encre);
  border-bottom: 3px solid var(--encre);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.bandeau-demo a {
  color: var(--encre);
  text-underline-offset: 3px;
}

/* ---- Navigation ---------------------------------------------------- */

.nav-principal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 3px solid var(--encre);
}

.nav-principal .marque {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.marque-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.nav-principal .nav-liens {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-principal .nav-liens a {
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.nav-principal .nav-connexion {
  border: 3px solid var(--encre);
  padding: 8px 14px;
  font-weight: 700;
  text-decoration: none;
}

/* ---- Boutons -------------------------------------------------------- */

.btn {
  height: 56px;
  background: var(--encre);
  color: var(--papier);
  border: 3px solid var(--encre);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15px;
  border-radius: 0;
  cursor: pointer;
  width: 100%;
  /* Boîte identique pour <button> et <a> */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: inherit;
  text-decoration: none;
}

.btn-secondaire {
  background: var(--papier);
  color: var(--encre);
}

.btn-ligne {
  width: auto;
  padding: 0 22px;
}

/* ---- Champs de formulaire ------------------------------------------ */

input:not([type='checkbox']):not([type='radio']),
select {
  height: 56px;
  border: 3px solid var(--encre);
  background: var(--blanc);
  padding: 0 16px;
  font-size: 16px;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--encre);
}

label {
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Rayures de danger : UNIQUEMENT au-dessus d'une bande orange
   ou rouge (P6-D1) ---------------------------------------------------- */

.rayures {
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--encre) 0 14px, var(--orange) 14px 28px);
}

.rayures-rouge {
  background: repeating-linear-gradient(-45deg, var(--encre) 0 14px, var(--rouge) 14px 28px);
}

/* ---- Bande de niveau pleine largeur --------------------------------- */

.bande-niveau {
  padding: 22px 20px;
  color: #fff;
}

/* Pleine largeur dans la colonne de contenu. */
.contenu .bande-niveau,
.contenu .rayures {
  margin: 0 -20px;
}

.bande-niveau .bande-etiquette {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bande-niveau .bande-valeur {
  font-size: 58px;
}

.bande-vert { background: var(--vert); }
.bande-jaune { background: var(--jaune); color: var(--encre); }
.bande-orange { background: var(--orange); }
.bande-rouge { background: var(--rouge); }
/* Bande neutre (données indisponibles). */
.bande-encre { background: var(--encre); }

/* Variante compacte : la bande "Demain" sous la bande du jour. */
.bande-compacte {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bande-valeur-compacte {
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.bande-indispo {
  margin: 6px 0 0;
  font-weight: 700;
}

/* ---- Pastille de niveau (listes, tableaux de bord) ------------------ */

.chip-niveau {
  display: inline-block;
  padding: 5px 14px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
}

.chip-vert { background: var(--vert); }
.chip-jaune { background: var(--jaune); color: var(--encre); }
.chip-orange { background: var(--orange); }
.chip-rouge { background: var(--rouge); }

/* ---- Cartes ---------------------------------------------------------- */

.carte {
  border: 3px solid var(--encre);
  background: var(--blanc);
  padding: 14px;
}

.carte-marque {
  border-color: var(--marque);
  background: #FFF4EE;
}

/* ---- Ligne d'obligation ---------------------------------------------- */

.ligne-obligation {
  border-left: 6px solid var(--encre);
  border-bottom: 2px solid var(--filet);
  padding: 12px 0 12px 14px;
}

.ligne-obligation .obligation-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
}

.ligne-obligation .obligation-ref {
  font-size: 12px;
  color: var(--gris);
  margin-top: 3px;
}

/* Ligne accentuée marque (CIBTP). */
.ligne-marque {
  border-left-color: var(--marque);
}

/* ---- Marqueur "fait" (checklist du jour) ------------------------------ */

.coche-faite {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--encre);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Checklist du jour (Plan 6 tâche 5) -------------------------------- */

.titre-jour {
  font-size: 28px;
  margin: 0;
}

.jour-date {
  font-size: 14px;
  color: var(--gris);
  font-weight: 700;
  margin: 2px 0 6px;
}

.pile-obligations {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.carte-obligation {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carte-obligation form {
  margin: 0;
}

.carte-obligation .obligation-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.carte-obligation .obligation-ref {
  font-size: 12px;
  color: var(--gris);
}

/* Obligation faite : rangée coche + libellé, action d'annulation à droite. */
.obligation-faite {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.obligation-corps {
  flex-grow: 1;
}

.etat-annule {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gris);
}

/* Bannière lecture seule : carte au ton .avert, la copie ne change pas. */
.carte-note {
  color: var(--gris);
  font-size: 13px;
}

.carte-note p {
  margin: 0;
}

/* ---- Listes en lignes (documents, CIBTP) ------------------------------- */

.liste-lignes {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}

.liste-lignes form {
  margin: 8px 0 0;
}

.cibtp-total {
  font-size: 16px;
}

/* ---- Accueil : héros et sections marketing (P6-D3) -------------------- */

.heros {
  background: var(--encre);
  color: var(--papier);
  padding: 26px 20px 30px;
}

.contenu .heros {
  margin: 0 -20px;
}

.heros-titre {
  font-size: 34px;
  color: var(--papier);
  margin: 0 0 12px;
}

.heros-sous {
  font-size: 15px;
  line-height: 1.5;
  color: #C9CDD4;
  margin: 0;
}

/* Rangée de CTA du héros (P8-D3). */
.heros-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* CTA primaire sur fond encre : bord papier pour rester visible. */
.btn-hero {
  border-color: var(--papier);
}

.verificateur {
  padding: 24px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.champ-groupe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.separateur-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gris);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.separateur-ou::before,
.separateur-ou::after {
  content: '';
  flex-grow: 1;
  height: 2px;
  background: var(--filet);
}

.section-titre {
  font-size: 20px;
  margin: 30px 0 14px;
}

.rangee-atout {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.rangee-atout p {
  margin: 0;
  font-size: 14px;
}

.carre-atout {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.carre-jaune { background: var(--jaune); }
.carre-marque { background: var(--marque); }
.carre-encre { background: var(--encre); }

/* Bandeau de confiance factuel (P13-D4). */
.bandeau-confiance {
  border-bottom: 2px solid var(--filet);
  padding: 10px 20px;
  font-size: 13px;
  color: var(--gris);
  text-align: center;
}

.bandeau-confiance p { margin: 0; }
.bandeau-confiance a { color: var(--gris); font-weight: 700; }

/* Captures produit (P13-D1). */
.capture-rangee {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
}

@media (min-width: 640px) {
  .capture-rangee {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  .capture-visuel {
    flex: 0 0 55%;
  }

  .capture-texte {
    flex: 1;
  }
}

.capture-visuel img {
  width: 100%;
  height: auto;
  border: 3px solid var(--encre);
  display: block;
  cursor: zoom-in;
}

.capture-nom {
  font-size: 18px;
  margin: 0 0 6px;
}

.capture-texte p {
  margin: 0;
  font-size: 14px;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(22, 24, 29, 0.88);
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border: 3px solid var(--papier);
}

/* Récit "Un jour orange" (P13-D2). */
.recit p {
  max-width: 62ch;
  margin: 0 0 1rem;
}

/* Argument CIBTP (P13-D3). */
.argument-cibtp p {
  max-width: 62ch;
  margin: 0 0 1rem;
}

.niveaux-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.niveaux-liste li {
  margin-bottom: 10px;
  font-size: 14px;
}

.niveaux-liste .chip-niveau {
  margin-right: 8px;
}

.teaser-tarifs {
  margin: 24px 0;
}

.teaser-tarifs p {
  margin: 0 0 12px;
}

.faq {
  margin-bottom: 28px;
}

.faq-item {
  border: 3px solid var(--encre);
  background: var(--blanc);
  margin-bottom: 10px;
}

.faq-item summary {
  padding: 13px 14px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.faq-item p {
  margin: 0;
  padding: 0 14px 13px;
  font-size: 14px;
}

/* ---- Tarifs ------------------------------------------------------------ */

.tarifs-grille {
  display: grid;
  gap: 14px;
  margin: 18px 0 14px;
}

@media (min-width: 640px) {
  .tarifs-grille {
    grid-template-columns: repeat(3, 1fr);
  }

  .tarif-pack {
    max-width: 60%;
  }
}

.tarif-nom {
  font-size: 21px;
  margin: 0 0 8px;
}

.tarif-prix {
  font-size: 17px;
  font-weight: 900;
  margin: 0 0 8px;
}

.tarif-detail {
  font-size: 14px;
  margin: 0 0 6px;
}

.tarif-cta {
  margin: 12px 0 0;
}

.btn-carte {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* ---- Page vigilance publique ------------------------------------------- */

.lien-retour {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.entete-page {
  margin: 4px 0 16px;
}

.surtitre {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris);
  margin: 0;
}

.titre-page {
  font-size: 30px;
  margin: 0;
}

.obligations-titre {
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 24px 0 12px;
}

.cta-compte {
  margin: 24px 0 28px;
}

.cta-compte p {
  margin: 0 0 12px;
}

/* ---- Connexion ---------------------------------------------------------- */

.carte-connexion {
  max-width: 440px;
  margin: 32px auto;
  padding: 24px 20px;
}

.titre-connexion {
  font-size: 24px;
  margin: 0 0 10px;
}

/* ---- Compte : tableau de bord (Plan 6 tâche 4) --------------------------- */

.carte-chantier {
  margin-bottom: 14px;
}

/* Carte d'état du jour (P11-D5), en tête du tableau de bord. */
.carte-etat {
  border-color: var(--marque);
  background: #FFF4EE;
  margin-bottom: 18px;
}

.carte-etat p:last-child {
  margin-bottom: 0;
}

/* Épisode ouvert signalé sur la carte du chantier. */
.badge-episode {
  display: inline-block;
  border: 2px solid var(--encre);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  margin: 0 0 12px;
}

/* Action du jour non cliquable : constat, pas un bouton. */
.action-jour {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 12px;
}

.carte-chantier .btn-ligne {
  margin-bottom: 12px;
}

.chantier-nom {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0;
}

.chantier-nom a {
  text-decoration: none;
}

.chantier-dept {
  font-size: 13px;
  margin: 2px 0 10px;
}

.chantier-niveaux {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* Variante inline 44px : actions secondaires des cartes (archiver,
   notifications, déconnexion). Le plancher de 44px reste respecté. */
.btn-44 {
  height: 44px;
  font-size: 13px;
  padding: 0 16px;
}

.formulaire-pile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.carte-section {
  margin-bottom: 18px;
}

.carte-sous-titre {
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 4px;
}

/* Rangée interne d'une carte, séparée par un filet. */
.rangee-filet {
  border-bottom: 2px solid var(--filet);
  padding: 9px 0;
  font-size: 14px;
}

.rangee-filet:last-child {
  border-bottom: 0;
}

.pile-boutons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.pile-boutons form {
  margin: 0;
}

/* ---- Historique du chantier (Plan 6 tâche 4) ----------------------------- */

.carte-episode {
  margin-bottom: 14px;
}

.episode-dates {
  font-weight: 700;
}

.episode-jours {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.episode-jours li {
  border-bottom: 2px solid var(--filet);
  padding: 7px 0;
  font-size: 14px;
}

.episode-jours li:last-child {
  border-bottom: 0;
}

.episode-jours a {
  text-decoration: none;
  font-weight: 700;
}

.actions-rangee {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}

/* Les libellés longs passent sur deux lignes sans déborder de la boîte. */
.actions-rangee .btn {
  height: auto;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
}

.pied-actions {
  margin: 24px 0;
}

/* ---- Divers ------------------------------------------------------------ */

.meta {
  color: var(--gris);
  font-size: 12px;
}

.erreur {
  border: 3px solid var(--rouge);
  background: #FDECEA;
  color: var(--rouge);
  padding: 10px 14px;
  font-weight: 700;
}

.avert {
  border-top: 2px solid var(--filet);
  color: var(--gris);
  font-size: 12px;
  padding: 16px 0;
}

.avert a {
  color: var(--gris);
}

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 2px;
}

/* ---- Carte de France (P7-D2) ---- */

.carte-france {
  width: 100%;
  height: auto;
  display: block;
}

.carte-dept {
  stroke: var(--papier);
  stroke-width: 1;
}

.carte-vert { fill: var(--vert); }
.carte-jaune { fill: var(--jaune); }
.carte-orange { fill: var(--orange); }
.carte-rouge { fill: var(--rouge); }
.carte-inconnu { fill: #C9CDD4; }

.carte-france a:hover path,
.carte-france a:focus-visible path {
  stroke: var(--encre);
  stroke-width: 2;
}

/* Pastille de légende « donnée indisponible » : même gris que la carte. */
.chip-inconnu {
  background: #C9CDD4;
  color: var(--encre);
}

/* ---- Autocomplete adresses (P7-D1) ---- */

.champ-adresse {
  position: relative;
}

.suggestions-adresse {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-top: 0;
}

.suggestions-adresse li {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 16px;
  cursor: pointer;
}

.suggestions-adresse li[aria-selected="true"],
.suggestions-adresse li:hover {
  background: var(--encre);
  color: var(--papier);
}

.suggestions-adresse li:hover .meta,
.suggestions-adresse li[aria-selected="true"] .meta {
  color: var(--filet);
}

/* ---- Guides (P9-D1) ---------------------------------------------------- */

.guide p {
  margin: 0 0 1rem 0;
  max-width: 62ch;
}

.guide ul {
  padding-left: 1.2rem;
  max-width: 62ch;
}

.guide li {
  margin: 0.35rem 0;
}