/* MARTINI-DRM — styles propres au site (Bootstrap 5.3 fait le reste).
   Identité reprise de la plaquette : noir, rouge, blanc. Pages publiques larges et lisibles,
   administration sobre, claire, utilisable au téléphone en plein soleil. */

:root {
  --drm-noir: #0e1013;
  --drm-noir-2: #1a1d22;
  --drm-rouge: #c8102e;
  --drm-rouge-fonce: #a20d25;
  --drm-gris: #6b7280;
  --drm-fond: #f6f7f9;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #fff;
  color: #17181a;
}

h1, h2, h3, .marque {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- Barre du haut ------------------------------------------------------------------------- */
.barre {
  background: var(--drm-noir);
  color: #fff;
}
.barre .marque {
  font-size: 1.35rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
.barre .marque span { color: var(--drm-rouge); }
.barre a.lien {
  color: #d7dade;
  text-decoration: none;
  padding: .4rem .6rem;
  border-radius: .35rem;
  font-weight: 600;
}
.barre a.lien:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.btn-rouge {
  background: var(--drm-rouge);
  border-color: var(--drm-rouge);
  color: #fff;
  font-weight: 700;
}
.btn-rouge:hover, .btn-rouge:focus { background: var(--drm-rouge-fonce); border-color: var(--drm-rouge-fonce); color: #fff; }

/* --- Bandeau d'accueil --------------------------------------------------------------------- */
.hero {
  background: linear-gradient(rgba(10, 11, 13, .72), rgba(10, 11, 13, .86)),
              url("../img/hero-banniere.jpg") center/cover no-repeat;
  color: #fff;
  padding: 4.5rem 0 3.5rem;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); text-transform: uppercase; }
.hero .accroche { font-size: 1.1rem; color: #e6e7ea; max-width: 40rem; }
.hero .pastille {
  display: inline-block;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2rem;
  padding: .35rem .9rem;
  margin: .25rem .35rem .25rem 0;
  font-weight: 600;
  font-size: .9rem;
}

/* --- Sections ------------------------------------------------------------------------------- */
.section { padding: 3.5rem 0; }
.section-titre { margin-bottom: 2rem; }
.section-titre .sur {
  color: var(--drm-rouge);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
}
.fond-gris { background: var(--drm-fond); }

/* Hauteur volontairement NON imposée : une carte prend la hauteur de son contenu. `height: 100%`
   ici faisait déborder la carte du tarif par-dessus la carte des échanges et le pied de page dès
   qu'une colonne voisine était plus haute (mesuré : 406 × 254 px de superposition en 390 px de
   large). Pour aligner des cartes côte à côte, utiliser la classe Bootstrap `h-100` sur la carte. */
.carte-service, .carte-garantie {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: .75rem;
  padding: 1.5rem;
}
.carte-service .icone { font-size: 2rem; line-height: 1; }
.carte-service h3 { font-size: 1.15rem; margin-top: .75rem; }
.carte-garantie { border-left: 4px solid var(--drm-rouge); }

.galerie img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: .6rem;
  cursor: zoom-in;
}
.galerie figure { margin: 0 0 1rem; }
.galerie figcaption { font-size: .85rem; color: var(--drm-gris); margin-top: .4rem; }

.pied {
  background: var(--drm-noir);
  color: #b9bdc4;
  padding: 2.5rem 0 1.5rem;
  font-size: .92rem;
}
.pied a { color: #fff; }
.pied .marque { font-size: 1.2rem; color: #fff; text-transform: uppercase; font-weight: 800; }
.pied .marque span { color: var(--drm-rouge); }

/* --- Bouton d'appel flottant (mobile) -------------------------------------------------------- */
.appel-mobile {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* --- Suivi client --------------------------------------------------------------------------- */
.etape { border-left: 3px solid #dfe2e6; padding: 0 0 1.4rem 1.1rem; position: relative; }
.etape::before {
  content: "";
  position: absolute;
  left: -8.5px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dfe2e6;
  border: 2px solid #fff;
}
.etape.faite { border-left-color: var(--drm-rouge); }
.etape.faite::before { background: var(--drm-rouge); }
.etape.en-cours { border-left-color: #dfe2e6; }
.etape.en-cours::before { background: #fff; border-color: var(--drm-rouge); box-shadow: 0 0 0 3px rgba(200, 16, 46, .18); }
.etape .quand { font-size: .82rem; color: var(--drm-gris); }
.fil-message { border-radius: .6rem; padding: .75rem .9rem; margin-bottom: .6rem; max-width: 90%; }
.fil-client { background: #eef1f5; }
.fil-patron { background: #fff3f5; border: 1px solid #f6d3d9; margin-left: auto; }

/* --- Administration ------------------------------------------------------------------------- */
.admin .carte {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: .6rem;
  padding: 1rem;
}
.admin .statut { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.admin .ligne-dossier:active { background: #f1f3f6; }
.barre-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #dfe2e6;
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
  z-index: 1020;
}
.compteur { font-variant-numeric: tabular-nums; }
.barre-graphe { background: var(--drm-rouge); height: 8px; border-radius: 4px; }

@media print {
  .barre, .pied, .appel-mobile, .barre-actions, .sans-impression { display: none !important; }
  body { background: #fff; }
}