/* ===========================================================
   RapportChantier — Design v2 (Proposition A : épuré, aéré)
   Palette : navy #1C3464 / orange #EA5B0C utilisés en accent
   Fond global : crème chaud #FBFAF8
   Ombres douces, cartes légères, plus de blocs colorés massifs
   =========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #FBFAF8;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 110px;
}

/* Layout */
.container { max-width: 640px; margin: 0 auto; padding: 18px 20px 20px; }
.hidden { display: none !important; }

/* ============================================================
   HEADER ARTISAN — allégé, sans gros bandeau navy
   Avatar rond + titre + actions en icônes minimalistes
   Le bandeau respire davantage sur smartphone (padding vertical
   plus généreux) pour éviter l'effet "écrasé" contre l'encoche.
   ============================================================ */
.header-artisan {
  background: #FBFAF8;
  color: #1a1a1a;
  /* Padding-bottom modéré : assez d'air sous le texte GÉRANT/email, sans
     créer un creux énorme avant la ligne orange. La ligne grise
     border-bottom a été retirée — une seule ligne (l'orange ::after)
     délimite le bas du bandeau. */
  padding: 26px 22px 22px;
  position: relative;
}
@media (max-width: 640px) {
  .header-artisan {
    padding: 34px 18px 26px;
  }
}
/* Support de l'encoche iOS (notch/dynamic island) : on ajoute le safe-area
   au padding-top pour que le bandeau commence VRAIMENT sous la status bar. */
@supports (padding-top: env(safe-area-inset-top)) {
  .header-artisan {
    padding-top: calc(26px + env(safe-area-inset-top));
  }
  @media (max-width: 640px) {
    .header-artisan {
      padding-top: calc(34px + env(safe-area-inset-top));
    }
  }
}
.header-artisan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /* Ligne animée : dégradé orange ↔ navy qui oscille en aller-retour.
     La gradient fait 200% de la largeur du header, on déplace sa
     background-position de 0% à 100% (et retour via `alternate`), ce qui
     fait défiler la transition de couleur de gauche à droite puis droite
     à gauche. 3px de hauteur pour que l'animation soit bien visible. */
  height: 3px;
  background: linear-gradient(
    90deg,
    #EA5B0C 0%,
    #1C3464 25%,
    #EA5B0C 50%,
    #1C3464 75%,
    #EA5B0C 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0%;
  animation: headerLineSweep 5s ease-in-out infinite alternate;
}
@keyframes headerLineSweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .header-artisan::after {
    animation: none;
    background: linear-gradient(90deg, #EA5B0C 0%, #1C3464 100%);
  }
}
.header-artisan .top {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 0;
}
.header-artisan .back {
  color: #555;
  cursor: pointer;
  background: #F4F0E8;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 500;
  flex-shrink: 0;
}
.header-artisan .back:hover { background: #ECE6D9; }

/* Avatar rond avec initiales (orange sur fond pâle) — cliquable pour
   ouvrir la fiche entreprise. Animation "halo" pour signaler visuellement
   l'interactivité (pulse doux orange à l'écoute), léger scale au survol. */
.header-artisan .header-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE5D9, #FFCBA8);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #C84A09;
  font-size: 1rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 0 rgba(234, 91, 12, 0.55);
  animation: avatarBreathe 2.8s ease-in-out infinite;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.header-artisan .header-avatar:hover {
  transform: scale(1.06);
  animation-play-state: paused;
  box-shadow: 0 0 0 6px rgba(234, 91, 12, 0.18);
}
.header-artisan .header-avatar:active {
  transform: scale(0.96);
}
.header-artisan .header-avatar::after {
  /* Petit indicateur "engrenage" en bas-à-droite pour renforcer la
     signification "cliquable → fiche entreprise". Masqué au survol. */
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #EA5B0C url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>") center/8px no-repeat;
  border: 1.5px solid #FBFAF8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
@keyframes avatarBreathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(234, 91, 12, 0.35),
                0 0 0 0 rgba(234, 91, 12, 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(234, 91, 12, 0.14),
                0 0 14px 2px rgba(234, 91, 12, 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-artisan .header-avatar { animation: none; }
}

.header-artisan .header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.header-artisan h1 {
  font-size: 1.22rem;
  font-weight: 700;
  color: #1C3464;
  line-height: 1.25;
  margin: 0;
}
.header-artisan .subtitle {
  font-size: 0.74rem;
  color: #999;
  line-height: 1.45;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.header-artisan .subtitle .subtitle-name {
  font-weight: 600;
  color: #555;
  font-size: 0.82rem;
  letter-spacing: 0.1px;
  line-height: 1.3;
}
.header-artisan .subtitle .subtitle-legal {
  font-size: 0.7rem;
  color: #B0AC9F;
  letter-spacing: 0.2px;
  line-height: 1.35;
}
.header-artisan .subtitle .subtitle-identity {
  margin-top: 2px;
}

/* Boutons icône (déconnexion, paramètres) */
.header-artisan .logout-btn,
.header-artisan .settings-btn {
  background: #F4F0E8;
  color: #555;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.header-artisan .logout-btn:hover,
.header-artisan .settings-btn:hover { background: #ECE6D9; }
.header-artisan .logout-btn {
  font-size: 0.78rem;
  width: auto;
  padding: 0 14px;
  border-radius: 18px;
}

/* ============================================================
   HEADER CLIENT (vue partagée publique)
   Garde le navy plein car ambiance "officielle"
   ============================================================ */
.header-client {
  background: #1C3464;
  color: white;
  padding: 28px 20px 32px;
  text-align: center;
  border-bottom: 3px solid #EA5B0C;
}
.header-client h1 { font-size: 1.4rem; margin-bottom: 6px; }
.header-client .sub { font-size: 0.95rem; opacity: 0.95; }
.header-client .address { font-size: 0.85rem; opacity: 0.85; margin-top: 4px; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  background: #EA5B0C; color: white; border: none;
  padding: 13px 20px; border-radius: 14px; font-size: 0.95rem;
  font-weight: 600; cursor: pointer; width: 100%; font-family: inherit;
  transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.btn-loading {
  cursor: wait !important;
  opacity: 0.85 !important;
  position: relative;
  animation: btnPulse 1.4s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(234,91,12,0.2); }
  50% { box-shadow: 0 6px 22px rgba(234,91,12,0.45); }
}
.btn.ghost { background: transparent; color: #555; border: 1px solid #E8E2D6; }
.btn.ghost:hover { background: #FAF7F2; }
.btn.pdf { background: #1C3464; }
.btn.blue { background: #1E88E5; }
.btn.small { padding: 8px 14px; font-size: 0.85rem; width: auto; border-radius: 10px; }
.btn.btn-compact {
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
}

/* ============================================================
   BARRE DE RECHERCHE + FILTRES (allégés, sans card conteneur)
   ============================================================ */
.search-bar {
  background: transparent;
  padding: 16px 0 4px;
  margin-bottom: 8px;
  box-shadow: none;
  border-radius: 0;
}
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  border: 1px solid #F0EBE2;
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #B0AC9F;
  display: flex;
  align-items: center;
}
#search-input {
  width: 100%;
  padding: 14px 44px 14px 42px;
  border: none;
  background: transparent;
  border-radius: 14px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #333;
}
#search-input:focus { outline: none; }
#search-input::placeholder { color: #B0AC9F; }
.search-clear {
  position: absolute;
  right: 10px;
  background: #F4F0E8;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-clear:hover { background: #ECE6D9; }

.search-filters {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.filter-chip {
  background: white;
  border: 1px solid #E8E2D6;
  color: #555;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.15s;
}
.filter-chip:hover { background: #FAF7F2; }
.filter-chip.active {
  background: #1C3464;
  color: white;
  border-color: #1C3464;
}
.filter-chip-archive {
  background: #FFF5EC;
  border-color: #F0A772;
  color: #B85F1A;
}
.filter-chip-archive:hover { background: #FFE9D5; }
.filter-chip-archive.active {
  background: #F0A772;
  border-color: #F0A772;
  color: white;
}
.search-count {
  margin-top: 12px;
  font-size: 0.8rem;
  color: #B0AC9F;
  padding-left: 4px;
  font-weight: 500;
}

/* ============================================================
   CARTES DOSSIERS (refonte avec dot-badge + stat-chips)
   ============================================================ */
.card {
  background: white;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.07); }
.card:active { transform: scale(0.99); }
/* On supprime la flèche absolue (devient un › discret en bas droite, après les chips) */
.card::after { content: none; }

/* Card de levée de réserves : indentée sous son chantier parent.
   L'indentation (margin-left) + le fond pêche suffisent à faire
   comprendre la filiation. Pas de trait de connexion. */
.card.card-sav {
  margin-left: 28px;
  margin-top: 4px;
  background: #FFFBF5;
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
  position: relative;
}

/* Card "dimmed" : le parent est affiché en contexte parce qu'un de
   ses SAV matche la recherche. On l'atténue pour que l'œil aille
   directement sur le(s) SAV matchant en dessous. */
.card.card-dimmed {
  opacity: 0.55;
}
.card.card-dimmed:hover { opacity: 1; }

.card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1C3464;
  margin: 6px 0 4px;
  line-height: 1.25;
}
.card .client {
  color: #7A7A7A;
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.card .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #F4F0E8;
}
.card .meta span {
  font-size: 0.72rem;
  color: #555;
  background: #F7F3EC;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.card .meta::after {
  content: "›";
  margin-left: auto;
  color: #C9C2B5;
  font-size: 1.1rem;
  font-weight: 300;
}

/* Cercle de rang navy sur les cartes dossier */
.rang-circle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1C3464;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Badge photo séparé du badge passages */
.card .meta-photo {
  margin-left: 6px;
}

/* ============================================================
   BADGES (pastille colorée + texte UPPERCASE)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888;
  background: transparent;
  margin-bottom: 0;
}
.badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #EA5B0C;
  display: inline-block;
  flex-shrink: 0;
}
.badge.devis::before { background: #1C3464; }
.badge.archived::before { background: #F0A772; }
/* Badges composés pour les dossiers archivés — distinguent visuellement un
   chantier clos par PV signé (pastille verte = succès, garantie décennale
   active) d'un devis archivé en legacy (pastille grise, neutre). */
.badge.chantier.archived::before { background: #2E7D32; }
.badge.devis.archived::before { background: #888888; }
.badge.archived { color: #666; }
/* Date à droite dans la card */
.card .badge {
  display: inline-flex;
  margin-bottom: 0;
}

/* ============================================================
   DÉTAIL DOSSIER
   ============================================================ */
.detail-header {
  background: white;
  padding: 26px 22px 18px;
  /* Grand espace sous le header-artisan (logo) + padding-top généreux dans
     la carte elle-même, pour que le premier badge "Chantier" ne colle pas
     à la photo de profil et soit clairement détaché. */
  margin: 32px 0 0;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
@media (max-width: 640px) {
  .detail-header {
    margin-top: 40px;
    padding-top: 28px;
  }
}
.detail-header > div:first-child { margin-bottom: 4px; }
.detail-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1C3464;
  margin: 10px 0 14px;
  line-height: 1.2;
}
.detail-header .meta {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.7;
}
.detail-header .meta a { color: #EA5B0C; font-weight: 600; text-decoration: none; }
.detail-header .share {
  margin-top: 14px;
  padding: 12px;
  background: #FAF7F2;
  border-radius: 10px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-all;
}
.copy-btn {
  background: #EA5B0C; color: white; border: none;
  padding: 6px 10px; border-radius: 6px; font-size: 0.8rem;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  font-weight: 600;
}

/* Detail-actions ancien (legacy) — gardé au cas où */
.detail-actions { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.detail-actions .btn { flex: 1; min-width: 140px; }

/* Detail-actions-compact : grille 2x2 de tuiles (action principale).
   Depuis la réorganisation chronologique des actions (avril 2026), le
   regroupement est :
     - Ligne 1 (:nth-of-type(1)) : gestion générale (Modifier / Supprimer /
       Clôturer devis) en boutons texte fins "ghost" sur 3 colonnes.
     - Ligne 2 (:nth-of-type(2)) : actions chronologiques (+Ajouter / PDF /
       PV de réception / Portfolio) en tuiles 2x2 colorées.
   Spécificité maximale (#view-detail) pour gagner sur tout */
#view-detail .detail-actions-compact,
.detail-actions.detail-actions-compact {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
  flex-wrap: unset !important;
}
#view-detail .detail-actions-compact .btn,
.detail-actions.detail-actions-compact .btn {
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 16px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 14px;
  background: white;
  color: #1C3464;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  border: none;
  text-align: center;
  letter-spacing: 0.1px;
}
#view-detail .detail-actions-compact .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
/* Le bouton "Ajouter" reste orange plein (action principale) */
#view-detail .detail-actions-compact #add-passage-btn {
  background: #EA5B0C !important;
  color: white !important;
  box-shadow: 0 6px 16px rgba(234,91,12,0.25);
}
#view-detail .detail-actions-compact #pdf-btn {
  background: #0F1F4D !important; color: white !important;
}

/* Bouton "PV de réception" — gradient orange pour se distinguer des autres
   actions compactes de la ligne (Ajouter / PDF / Portfolio), tout en restant
   au même gabarit. Respiration légère pour attirer l'œil sans dominer. */
.reception-btn {
  background: linear-gradient(135deg, #EA5B0C 0%, #C24708 100%) !important;
  color: white !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(234, 91, 12, 0.25);
  animation: reception-btn-breath 3.2s ease-in-out infinite;
}
.reception-btn:hover,
.reception-btn:focus-visible {
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
  transform: translateY(-1px);
}
.reception-btn:active { transform: translateY(0); }
@keyframes reception-btn-breath {
  0%, 100% { box-shadow: 0 2px 8px rgba(234, 91, 12, 0.25), 0 0 0 0 rgba(234, 91, 12, 0); }
  50%      { box-shadow: 0 3px 10px rgba(234, 91, 12, 0.35), 0 0 0 4px rgba(234, 91, 12, 0.12); }
}
@media (prefers-reduced-motion: reduce) { .reception-btn { animation: none; } }

/* Pads signature du PV (plus compacts que celui des paramètres — 2 côte à côte) */
#rcp-sig-artisan-wrap canvas,
#rcp-sig-client-wrap canvas {
  height: 140px;
}
#view-detail .detail-actions-compact #pdf-portfolio-btn {
  background: white !important; color: #1C3464 !important;
  border: 2px solid #1C3464 !important;
}

/* Première ligne d'actions (Modifier / Supprimer / Clôturer) en boutons
   texte fins "ghost". On utilise flexbox (et non grid) pour que les boutons
   visibles se répartissent automatiquement sur toute la largeur quand l'un
   d'eux est masqué (ex. Clôturer caché pour les chantiers → Modifier et
   Supprimer occupent 50% chacun au lieu de 33%). */
#view-detail .detail-actions-compact:nth-of-type(1) {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: unset !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
#view-detail .detail-actions-compact:nth-of-type(1) .btn {
  flex: 1 1 0 !important;
}
#view-detail .detail-actions-compact:nth-of-type(1) .btn {
  background: transparent !important;
  color: #555 !important;
  border: 1px solid #E8E2D6 !important;
  padding: 9px 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#view-detail .detail-actions-compact:nth-of-type(1) .btn:hover {
  background: #FAF7F2 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Réaffirme les couleurs spécifiques (rouge pour Supprimer, navy pour
   Clôturer) que le sélecteur générique ci-dessus écraserait sinon avec
   !important. Les styles inline du HTML ne peuvent pas battre ces règles. */
#view-detail .detail-actions-compact:nth-of-type(1) #delete-dossier-btn {
  color: #BE1522 !important;
  border-color: #F5C6C6 !important;
}
#view-detail .detail-actions-compact:nth-of-type(1) #archive-dossier-btn {
  color: #1C3464 !important;
  border-color: #CBD5E0 !important;
}

/* Deuxième ligne d'actions (+Ajouter / PDF / PV / Portfolio) :
   tuiles 2x2 colorées (style par défaut de .detail-actions-compact). */
#view-detail .detail-actions-compact:nth-of-type(2) {
  margin-top: 10px !important;
}

/* ============================================================
   SECTION TITLE
   ============================================================ */
.section-title {
  font-size: 0.78rem;
  color: #B0AC9F;
  margin: 24px 0 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Variante avec bouton toggle à droite (ex. Passages collapsible) */
.section-title-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.collapse-toggle {
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #B0AC9F;
  transition: background 0.15s, color 0.15s;
}
.collapse-toggle:hover { background: #F4F0E8; color: #555; }
.collapse-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.collapse-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }

/* Flash de surbrillance quand on arrive sur une réserve via clic depuis
   une card indentée (1.1, 1.2) de la liste principale. Aide l'œil à
   repérer la réserve visée après scroll automatique. */
@keyframes reserveFlash {
  0%   { box-shadow: 0 0 0 0 rgba(234, 91, 12, 0); }
  20%  { box-shadow: 0 0 0 5px rgba(234, 91, 12, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(234, 91, 12, 0); }
}
.reserve-card.reserve-flash {
  animation: reserveFlash 1.8s ease-out;
}

/* ============================================================
   PASSAGES (cards de rapport)
   ============================================================ */
.report-card {
  background: white;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  min-width: 0;
}
.report-date {
  font-size: 0.78rem;
  color: #B0AC9F;
  margin-bottom: 10px;
  text-transform: capitalize;
  font-weight: 500;
}
.report-note {
  background: #FAF7F2;
  padding: 14px;
  border-radius: 12px;
  margin: 12px 0;
  line-height: 1.55;
  color: #333;
  font-size: 0.92rem;
  border-left: 3px solid #EA5B0C;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}
.client .report-note { border-left-color: #1E88E5; }

/* Photos grid dans les passages (vue détail) */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  align-items: start;
}
.photos-grid .photo-with-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.photos-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  display: block;
}
.photos-grid .photo-caption-view {
  font-size: 0.76rem;
  color: #555;
  font-style: italic;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.photos-grid .photo-meta {
  font-size: 0.65rem;
  color: #999;
  line-height: 1.3;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* ============================================================
   TIMELINE (vue client)
   ============================================================ */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px;
  width: 2px; background: #E3F2FD;
}
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before {
  content: ''; position: absolute; left: -24px; top: 20px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; border: 3px solid #1E88E5;
}
.timeline-item.latest::before {
  background: #1E88E5; box-shadow: 0 0 0 4px rgba(30,136,229,0.2);
}

/* ============================================================
   MODALES
   ============================================================ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(28,52,100,0.6);
  z-index: 10000; padding: 20px; overflow-y: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.modal-open #map-wrapper { visibility: hidden; }
.modal-overlay.show { display: flex; align-items: flex-start; justify-content: center; }
.modal {
  background: #FBFAF8;
  border-radius: 22px;
  padding: 26px 24px;
  width: 100%; max-width: 560px;
  margin: 20px auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.modal h2 {
  margin-bottom: 20px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #1C3464;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1C3464;
}

/* ============================================================
   Toggle "Émettre des réserves" (modale PV de réception)
   Structure stricte pour éviter le problème de rendu observé sur
   iPhone (la label se refermait autour du seul checkbox, le texte
   passait en-dessous) : display:flex fiable via classe, pas d'inline.
   ============================================================ */
label.reserves-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-weight: normal;
  user-select: none;
  padding: 12px 14px;
  background: #FFF5EC;
  border: 1px solid #EAB670;
  border-radius: 10px;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}
label.reserves-toggle .reserves-toggle-input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #EA5B0C;
  margin: 2px 0 0 0;
  /* Neutralise les styles globaux éventuels de .field input */
  padding: 0;
  border: initial;
  border-radius: 0;
  background: initial;
}
label.reserves-toggle .reserves-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  color: #7C4F10;
  line-height: 1.35;
  display: block;
}
label.reserves-toggle .reserves-toggle-title {
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
label.reserves-toggle .reserves-toggle-sub {
  display: block;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 4px;
  line-height: 1.4;
}
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #E8E2D6;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  background: white;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: #EA5B0C;
  box-shadow: 0 0 0 3px rgba(234,91,12,0.1);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  justify-content: flex-end;
}
.modal-actions .btn {
  flex: 0 0 auto;
  width: auto;
  padding: 10px 18px;
  font-size: 0.9rem;
  border-radius: 12px;
}
@media (max-width: 480px) {
  .modal-actions {
    flex-direction: column-reverse;
  }
  .modal-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Type picker */
.type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-option {
  border: 2px solid #E8E2D6;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  background: white;
}
.type-option.selected {
  border-color: #EA5B0C;
  background: #FFF5F0;
  box-shadow: 0 2px 8px rgba(234,91,12,0.1);
}
.type-option .emoji {
  margin: 0 auto 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1C3464;
}
.type-option .emoji svg { width: 30px; height: 30px; display: block; }
.type-option.selected .emoji { color: #EA5B0C; }
.type-option .label { font-size: 0.88rem; font-weight: 700; color: #1C3464; }
.type-option .desc { font-size: 0.74rem; color: #888; margin-top: 4px; }

/* Photo upload (modale passage) */
.photo-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  align-items: start;
}
.photo-thumb-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}
.photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.photo-thumb .remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: white;
  border: none; border-radius: 50%;
  width: 22px; height: 22px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.photo-arrows {
  position: absolute;
  bottom: 4px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.photo-arrow {
  background: rgba(0,0,0,0.65);
  color: white;
  border: none;
  border-radius: 50%;
  width: 26px; height: 26px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.photo-arrow:active {
  background: var(--orange);
}
.photo-caption-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.78rem;
  border: 1px solid #E8E2D6;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  color: #333;
  background: #FAF7F2;
}
.photo-caption-input:focus {
  outline: none;
  border-color: #EA5B0C;
  background: white;
}
.photo-add {
  aspect-ratio: 1;
  border: 2px dashed #EA5B0C;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #EA5B0C;
  font-size: 1.8rem;
  cursor: pointer;
  background: white;
  align-self: start;
  width: 100%;
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: #B0AC9F;
}
.empty-icon {
  margin: 0 auto 12px;
  color: #C2BCAF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-icon svg { width: 56px; height: 56px; display: block; }
.empty p { color: #7A7A7A; }
.empty h3 { font-size: 1.1rem; margin-bottom: 8px; color: #1C3464; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: #1C3464; color: white;
  padding: 12px 20px; border-radius: 12px;
  font-size: 0.9rem; z-index: 200;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
  max-width: 90%; text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  font-weight: 600;
}
.toast.show { opacity: 1; }
.toast.error { background: #BE1522; }
.toast.success { background: #2E7D32; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: white;
}
.auth-top {
  flex: 0 0 auto;
  background: white;
  padding: 50px 24px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-top .brand-mark .brand-ico svg { width: 72px; height: 58px; }
.auth-top .brand-mark .brand-name { font-size: 1.7rem; }
.auth-top .brand-mark .brand-tag { font-size: 0.86rem; margin-top: 4px; }
.auth-bottom {
  flex: 1 1 auto;
  background: #1C3464;
  padding: 36px 20px 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  position: relative;
  margin-top: -16px;
}
.auth-bottom::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}
.auth-card {
  background: white;
  border-radius: 22px;
  padding: 32px 26px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  margin-top: 16px;
}
@media (max-width: 420px) {
  .auth-top { padding: 36px 20px 28px; }
  .auth-top .brand-mark .brand-ico svg { width: 60px; height: 48px; }
  .auth-top .brand-mark .brand-name { font-size: 1.4rem; }
  .auth-top .brand-mark .brand-tag { font-size: 0.78rem; }
  .auth-bottom { padding: 32px 16px 32px; }
  .auth-card { padding: 28px 20px; }
}
.auth-card h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: #1C3464;
  font-weight: 800;
}
.auth-card .auth-subtitle {
  color: #7A7A7A;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
.auth-card .switch {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
  color: #666;
}
.auth-card .switch a {
  color: #EA5B0C;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   LIGHTBOX (zoom photo)
   ============================================================ */
.lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 11000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; }
.lightbox .close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.2);
  color: white; border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
  border: 3px solid #F4F0E8;
  border-top: 3px solid #EA5B0C;
  border-radius: 50%;
  width: 30px; height: 30px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ============================================================
   INSTALL BANNER (PWA)
   ============================================================ */
.install-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #EA5B0C 0%, #C24708 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(234,91,12,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: relative;
  z-index: 10;
}
.install-banner.hidden { display: none; }
.install-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  line-height: 1.35;
}
.install-text strong { font-weight: 700; font-size: 0.95rem; }
.install-text span { font-size: 0.78rem; opacity: 0.92; }
.install-btn-action {
  background: white;
  color: #EA5B0C;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.install-btn-action:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.install-btn-action:active { transform: translateY(0); }
.install-btn-close {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}
.install-btn-close:hover { background: rgba(255,255,255,0.3); }

/* Masque automatiquement la bannière install quand l'app est lancée en
   mode standalone (PWA déjà installée). Défense en profondeur : install.js
   ferait de toute façon return early, mais au cas où le SW intercepte le
   JS avant exécution, la bannière reste cachée. */
body.is-standalone .install-banner { display: none !important; }

/* ============================================================
   VOICE BUTTON (dictée)
   ============================================================ */
.voice-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: white;
  border: 1px solid #E8E2D6;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  font-family: inherit;
}
.voice-btn:hover { background: #FAF7F2; }
.voice-btn.recording {
  background: #FFEDED;
  border-color: #E57373;
  color: #BE1522;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(190,21,34,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(190,21,34,0); }
}

/* ============================================================
   Pavé "Mon abonnement" dans la modale paramètres
   Effet "respiration" doux pour signaler la cliquabilité — halo orange
   subtil autour du bloc qui pulse en 3s. Respecte prefers-reduced-motion.
   ============================================================ */
.settings-subscription-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1C3464, #0F1F4D);
  border-radius: 12px;
  text-decoration: none;
  color: white;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(28,52,100,0.15);
  animation: settings-subscription-breath 2.8s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.settings-subscription-link:hover,
.settings-subscription-link:focus-visible {
  transform: translateY(-1px);
}
.settings-subscription-link:active { transform: translateY(0); }
.settings-subscription-link .ssl-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.settings-subscription-link .ssl-text {
  flex: 1;
  min-width: 0;
}
.settings-subscription-link .ssl-title {
  font-weight: 700;
  font-size: 0.98rem;
}
.settings-subscription-link .ssl-sub {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 2px;
}
.settings-subscription-link .ssl-arrow {
  font-size: 1.2rem;
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}
.settings-subscription-link:hover .ssl-arrow {
  transform: translateX(4px);
  opacity: 1;
}

@keyframes settings-subscription-breath {
  0%, 100% {
    background: linear-gradient(135deg, #1C3464 0%, #0F1F4D 100%);
    box-shadow: 0 2px 10px rgba(28,52,100,0.25),
                0 0 0 0 rgba(42,71,133,0.0);
  }
  50% {
    background: linear-gradient(135deg, #2A4785 0%, #1C3464 100%);
    box-shadow: 0 10px 32px rgba(42,71,133,0.55),
                0 0 0 10px rgba(42,71,133,0.22);
  }
}

/* Respecte la préférence système de réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .settings-subscription-link {
    animation: none;
  }
}

/* ============================================================
   Adresse cliquable dans la fiche détail d'un dossier
   Effet respirant discret pour signaler la navigabilité, sans pointillé.
   ============================================================ */
.addr-link {
  display: inline-flex;
  align-items: center;
  color: #EA5B0C;
  font-weight: 600;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(234,91,12,0.08);
  transition: background 0.2s ease, transform 0.1s ease;
  animation: addr-link-breath 2.6s ease-in-out infinite;
}
.addr-link:hover,
.addr-link:focus-visible {
  background: rgba(234,91,12,0.16);
  transform: translateY(-1px);
}
.addr-link:active { transform: translateY(0); }

@keyframes addr-link-breath {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(234,91,12,0.0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(234,91,12,0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .addr-link { animation: none; }
}

/* ============================================================
   SIGNATURE PAD (modale paramètres)
   ============================================================ */
.signature-pad-wrap {
  position: relative;
  border: 2px dashed #EA5B0C;
  border-radius: 12px;
  background: white;
  overflow: hidden;
  touch-action: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.signature-pad-wrap canvas {
  display: block;
  width: 100%;
  height: 180px;
  cursor: crosshair;
  touch-action: none;
  background: white;
  transition: opacity 0.25s ease;
}
.signature-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #B0AC9F;
  font-size: 0.92rem;
  font-style: italic;
  pointer-events: none;
  user-select: none;
}
.signature-pad-wrap.has-signature .signature-placeholder { display: none; }

/* Badge "verrouillé" — visible uniquement en état has-signature.
   S'affiche en haut à droite de la zone de signature. */
.signature-lock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(46, 125, 50, 0.92);
  color: white;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.25);
  pointer-events: none;
}

/* État "signature enregistrée" : bordure verte + canvas non modifiable + badge. */
.signature-pad-wrap.has-signature {
  border-color: #2E7D32;
  border-style: solid;
  background: #F4FBF5;
}
.signature-pad-wrap.has-signature canvas {
  pointer-events: none;
  cursor: default;
}
.signature-pad-wrap.has-signature .signature-lock-badge {
  display: inline-flex;
}

/* =====================================================================
   MODALE RÉCEPTION (PV) — Anti-débordement mobile/tablette
   =====================================================================
   Sur petit écran, les deux canvas de signature côte à côte débordent du
   cadre de la modale et les champs date/lieu se chevauchent. On force
   la modale à rester dans le viewport, on ajoute min-width:0 pour que les
   canvas puissent rétrécir dans les grids, et on bascule en 1 colonne
   sous 560px. */
#modal-reception .modal {
  /* Borne supérieure cohérente avec le viewport pour éviter tout overflow */
  max-width: min(720px, calc(100vw - 40px));
  box-sizing: border-box;
}
/* Les wraps de signature : autoriser le rétrécissement dans la grille */
#rcp-sig-artisan-wrap,
#rcp-sig-client-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* Canvas eux-mêmes : s'étirent à 100% de leur wrap, jamais au-delà */
#rcp-sig-artisan-wrap canvas,
#rcp-sig-client-wrap canvas {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}
/* Les champs de saisie dans cette modale : éviter tout overflow horizontal */
#modal-reception .field input,
#modal-reception .field textarea {
  max-width: 100%;
  box-sizing: border-box;
}
/* Boutons Effacer/Modifier sous chaque canvas : wrap propre si étroit */
#rcp-sig-artisan-wrap ~ div,
#rcp-sig-client-wrap ~ div {
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  /* Sur mobile : la grille 2-colonnes (date+lieu en haut, signatures au
     milieu) passe en 1 colonne. On cible les divs inline-stylés de la
     modale PV (ligne 425 pour date/lieu, ligne 484 pour signatures dans
     app.html). */
  #modal-reception > div > div[style*="grid-template-columns:1fr 1fr"],
  #modal-reception #rcp-signatures-block > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Hauteur des canvas un peu réduite pour économiser l'espace vertical */
  #rcp-sig-artisan-wrap canvas,
  #rcp-sig-client-wrap canvas {
    height: 120px !important;
  }
}

/* ============================================================
   BRAND WORDMARK (logo visible sur la page d'accueil de l'app)
   ============================================================ */
.brand-wordmark {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  /* Padding-bottom généreux : pousse la liste des dossiers (et donc le
     premier badge CHANTIER) plus bas, sans toucher au wordmark lui-même. */
  padding: 28px 0 36px;
  width: 100%;
  text-align: center;
}
@media (max-width: 640px) {
  .brand-wordmark { padding: 28px 0 44px; }
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  /* margin-left/right auto centre le contenu dans le flux, au cas où
     un parent block n'appliquerait pas le justify-content correctement. */
  margin-left: auto;
  margin-right: auto;
}
.brand-mark .brand-ico { display: flex; align-items: center; flex-shrink: 0; }
.brand-mark .brand-ico svg { width: 64px; height: 51px; display: block; }
.brand-mark .brand-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.brand-mark .brand-name {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #1C3464;
}
.brand-mark .brand-accent { color: #EA5B0C; }
.brand-mark .brand-name sup {
  font-size: 0.5em; font-weight: 400;
  opacity: 0.65; margin-left: 2px;
  vertical-align: super; color: #1C3464;
}
.brand-mark .brand-tag {
  font-size: 0.92rem;
  font-style: italic;
  color: #7A7A7A;
  font-weight: 400;
  margin-top: 4px;
  letter-spacing: 0.2px;
}
@media (max-width: 420px) {
  .brand-mark .brand-ico svg { width: 54px; height: 43px; }
  .brand-mark .brand-name { font-size: 1.55rem; }
  .brand-mark .brand-tag { font-size: 0.82rem; }
  .brand-mark .brand-ico svg { width: 38px; height: 30px; }
}

/* ============================================================
   FAB (Nouveau dossier — bouton flottant)
   ============================================================ */
.fab,
#fab {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #EA5B0C;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 28px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 28px rgba(234,91,12,0.4);
  cursor: pointer;
  font-family: inherit;
  width: auto;
  max-width: 280px;
  z-index: 5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 420px) {
  .container { padding: 22px 16px 20px; }
  .header-artisan { padding: 12px 16px; }
  .filter-chip { padding: 7px 12px; font-size: 0.76rem; }
  .modal { padding: 22px 20px; border-radius: 18px; }
}