/* ==========================================================================
   ARLI EXTINCTEURS - Feuille de styles principale
   Site vitrine HTML/CSS - sans framework, sans JavaScript
   --------------------------------------------------------------------------
   SOMMAIRE
   1.  Variables de couleurs et réglages globaux
   2.  Base (typographie, titres, liens)
   3.  Conteneurs et sections
   4.  Boutons
   5.  En-tête et navigation
   6.  Hero (grande bannière)
   7.  Blocs de contenu (intro, encarts, badges)
   8.  Chiffres clés
   9.  Cartes et grilles
   10. Timeline (méthode de travail)
   11. Galerie réalisations
   12. Zone d'intervention
   13. Infos pratiques
   14. Pied de page
   15. Page mentions légales
   16. Responsive (tablette et mobile)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES DE COULEURS ET RÉGLAGES GLOBAUX
   Pour changer l'ambiance du site, modifier uniquement ces valeurs.
   ========================================================================== */
:root {
  --rouge: #c8102e;           /* Rouge principal (CTA, accents) */
  --rouge-fonce: #99091f;     /* Rouge foncé (survol, dégradés) */
  --rouge-pale: #fdf3f4;      /* Fond rouge très léger */
  --anthracite: #1d2328;      /* Gris anthracite (titres, fonds sombres) */
  --noir: #11151a;            /* Noir doux (contrastes) */
  --texte: #414a52;           /* Gris de lecture */
  --gris-clair: #f4f6f8;      /* Fond de section clair */
  --bordure: #e2e6ea;         /* Traits et contours */
  --blanc: #ffffff;

  --rayon: 14px;              /* Arrondi des cartes */
  --rayon-petit: 8px;         /* Arrondi des boutons et badges */
  --ombre: 0 4px 18px rgba(17, 21, 26, .07);
  --ombre-forte: 0 12px 32px rgba(17, 21, 26, .13);
  --largeur: 1180px;          /* Largeur maximale du contenu */
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--anthracite);
  line-height: 1.2;
  margin: 0 0 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: 2.9rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 16px; }

a { color: var(--rouge); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

ul { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 6px; }

/* Accessibilité : mise en évidence du focus clavier */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}


/* ==========================================================================
   3. CONTENEURS ET SECTIONS
   ========================================================================== */
.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 22px;
}

.section { padding: 78px 0; }

/* Variantes de fond, à alterner d'une section à l'autre */
.section--gris { background: var(--gris-clair); }
.section--rouge-pale { background: var(--rouge-pale); }
.section--sombre { background: var(--anthracite); }
.section--sombre h2,
.section--sombre h3 { color: var(--blanc); }
.section--sombre p { color: #c8ced4; }

/* En-tête de section centré */
.section-entete {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}
.section-entete p { font-size: 1.05rem; }

/* Petit libellé rouge au-dessus des titres */
.surtitre {
  display: inline-block;
  color: var(--rouge);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section--sombre .surtitre { color: #ff8a9c; }

/* Trait rouge décoratif sous un titre */
.trait::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 3px;
  background: var(--rouge);
  margin: 16px auto 0;
}
.trait--gauche::after { margin-left: 0; }


/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--rayon-petit);
  font-weight: 600;
  font-size: .98rem;
  text-align: center;
  border: 2px solid transparent;
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

/* Bouton rouge : action principale */
.btn--rouge { background: var(--rouge); color: var(--blanc); }
.btn--rouge:hover { background: var(--rouge-fonce); color: var(--blanc); }

/* Bouton anthracite : action secondaire */
.btn--sombre { background: var(--anthracite); color: var(--blanc); }
.btn--sombre:hover { background: var(--noir); color: var(--blanc); }

/* Bouton contour blanc : sur fond photo ou fond sombre */
.btn--blanc { background: var(--blanc); color: var(--anthracite); }
.btn--blanc:hover { background: #eef1f4; color: var(--anthracite); }

.btn--contour-blanc {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, .7);
}
.btn--contour-blanc:hover { background: rgba(255, 255, 255, .14); color: var(--blanc); }

/* Bouton contour foncé : sur fond clair */
.btn--contour {
  background: transparent;
  color: var(--anthracite);
  border-color: var(--bordure);
}
.btn--contour:hover { background: var(--blanc); border-color: var(--anthracite); color: var(--anthracite); }

/* Groupe de boutons */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.boutons--centre { justify-content: center; }


/* ==========================================================================
   5. EN-TÊTE ET NAVIGATION
   ========================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 22px;
  max-width: var(--largeur);
  margin: 0 auto;
}

/* Logo texte */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--anthracite);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo__marque {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--rouge), var(--rouge-fonce));
  position: relative;
  flex: 0 0 auto;
}
/* Petit pictogramme CSS (silhouette d'extincteur stylisée) */
.logo__marque::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 10px;
  height: 18px;
  border-radius: 3px 3px 4px 4px;
  background: var(--blanc);
}
.logo__marque::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
}
.logo small {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rouge);
}

/* Navigation principale */
.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: 8px 11px;
  border-radius: 6px;
  color: var(--anthracite);
  font-size: .93rem;
  font-weight: 600;
}
.nav a:hover { background: var(--gris-clair); color: var(--rouge); text-decoration: none; }

/* Bloc de droite : téléphone + bouton */
.entete__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.entete__tel {
  color: var(--anthracite);
  font-weight: 700;
  font-size: .98rem;
  white-space: nowrap;
}


/* ==========================================================================
   6. HERO
   Pour changer la photo : remplacer l'URL dans background-image ci-dessous.
   ========================================================================== */
.hero {
  position: relative;
  color: var(--blanc);
  background-image:
    linear-gradient(115deg, rgba(17, 21, 26, .93) 0%, rgba(29, 35, 40, .86) 42%, rgba(153, 9, 31, .78) 100%),
    url("https://images.unsplash.com/photo-1569436078135-61753b84e3e8?auto=format&fit=crop&w=1800&q=70");
  background-size: cover;
  background-position: center;
}

.hero__inner {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 108px 22px 96px;
}
.hero__contenu { max-width: 800px; }

.hero h1 {
  color: var(--blanc);
  font-size: 3.2rem;
  margin-bottom: 20px;
}
.hero p {
  font-size: 1.12rem;
  color: #e8ebee;
  max-width: 680px;
  margin-bottom: 30px;
}

/* Badge en haut du hero */
.hero__badge {
  display: inline-block;
  background: var(--rouge);
  color: var(--blanc);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 40px;
  margin-bottom: 22px;
}

/* Mention sous les boutons */
.hero__mention {
  margin-top: 28px;
  font-size: .95rem;
  color: #dfe3e7;
  border-left: 3px solid var(--rouge);
  padding-left: 14px;
}


/* ==========================================================================
   7. BLOCS DE CONTENU
   ========================================================================== */
/* Mise en page deux colonnes (texte + image) */
.duo {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 50px;
  align-items: center;
}
.duo__image img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
}

/* Badge d'expérience */
.badge {
  display: inline-block;
  background: var(--rouge);
  color: var(--blanc);
  font-weight: 700;
  font-size: .92rem;
  padding: 8px 16px;
  border-radius: 40px;
  margin-bottom: 18px;
}
.badge--clair {
  background: var(--blanc);
  color: var(--rouge);
  border: 1px solid #f0cdd3;
}

/* Encart d'information avec barre rouge */
.encart {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--rouge);
  border-radius: var(--rayon-petit);
  padding: 18px 22px;
  box-shadow: var(--ombre);
  margin-top: 6px;
}
.encart p { margin: 0; font-weight: 600; color: var(--anthracite); }

/* Liste de mots-clés / services en pastilles */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pastilles li {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--anthracite);
  margin: 0;
}
.pastilles li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rouge);
  margin-right: 9px;
  vertical-align: middle;
}


/* ==========================================================================
   8. CHIFFRES CLÉS
   ========================================================================== */
.chiffres {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.chiffre {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--rayon);
  padding: 26px 20px;
  text-align: center;
}
.chiffre strong {
  display: block;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--blanc);
  margin-bottom: 8px;
}
.chiffre span {
  display: block;
  font-size: .93rem;
  color: #b9c1c8;
}


/* ==========================================================================
   9. CARTES ET GRILLES
   ========================================================================== */
.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 26px 24px;
  box-shadow: var(--ombre);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
  border-color: #d8dde2;
}
.carte h3 { margin-bottom: 8px; }
.carte p { margin: 0; font-size: .97rem; }

/* Pictogramme CSS simple en haut de chaque carte (flamme stylisée) */
.carte__ico {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--rouge), var(--rouge-fonce));
  margin-bottom: 16px;
  position: relative;
}
.carte__ico::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%) rotate(45deg);
  width: 13px;
  height: 13px;
  border-radius: 2px 10px 10px 10px;
  background: var(--blanc);
}
.carte__ico::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 20px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .7);
}

/* Carte posée sur un fond gris ou rouge pâle */
.section--gris .carte,
.section--rouge-pale .carte { box-shadow: none; }


/* ==========================================================================
   10. TIMELINE (MÉTHODE DE TRAVAIL)
   ========================================================================== */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.etapes li {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--rouge);
  border-radius: var(--rayon);
  padding: 22px 20px;
  margin: 0;
  font-weight: 600;
  color: var(--anthracite);
}
.etapes li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 12px;
}


/* ==========================================================================
   11. GALERIE RÉALISATIONS
   ========================================================================== */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.galerie figure {
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.galerie img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.galerie figcaption {
  padding: 18px 20px;
}
.galerie figcaption strong {
  display: block;
  color: var(--anthracite);
  font-size: 1.05rem;
  margin-bottom: 5px;
}
.galerie figcaption span { font-size: .94rem; }

/* Bloc citation sobre (avis clients) */
.citation {
  max-width: 820px;
  margin: 0 auto;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--rouge);
  border-radius: var(--rayon);
  padding: 30px 32px;
  text-align: left;
  box-shadow: var(--ombre);
}
.citation p { margin: 0; font-size: 1.06rem; color: var(--anthracite); }


/* ==========================================================================
   12. ZONE D'INTERVENTION
   ========================================================================== */
.zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.villes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.villes li {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 9px 15px;
  font-weight: 600;
  font-size: .94rem;
  color: var(--anthracite);
  margin: 0;
}
.departements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.departements li {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 16px 18px;
  margin: 0;
  font-weight: 700;
  color: var(--anthracite);
}
.departements li small {
  display: block;
  font-weight: 500;
  color: var(--texte);
  font-size: .86rem;
}


/* ==========================================================================
   13. INFOS PRATIQUES
   ========================================================================== */
.infos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 34px;
}
.info-bloc {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 26px 24px;
  box-shadow: var(--ombre);
}
.info-bloc h3 { font-size: 1.08rem; }
.info-bloc p { margin: 0 0 6px; font-size: .98rem; }
.info-bloc a { font-weight: 700; }

/* Tableau des horaires (liste de définitions) */
.horaires {
  margin: 0;
  font-size: .96rem;
}
.horaires div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--bordure);
}
.horaires div:last-child { border-bottom: 0; }
.horaires dt { font-weight: 700; color: var(--anthracite); margin: 0; }
.horaires dd { margin: 0; text-align: right; }
.horaires .ferme { color: var(--rouge); font-weight: 600; }

/* Bandeau d'appel à l'action */
.cta {
  background: linear-gradient(120deg, var(--anthracite), var(--noir) 55%, var(--rouge-fonce));
  border-radius: var(--rayon);
  padding: 44px 40px;
  text-align: center;
  color: var(--blanc);
}
.cta h2 { color: var(--blanc); }
.cta p { color: #d3d9de; max-width: 680px; margin: 0 auto 26px; }


/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */
.pied {
  background: var(--anthracite);
  color: #b4bcc3;
  padding: 62px 0 0;
  font-size: .96rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
}
.pied h3 {
  color: var(--blanc);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.pied a { color: #d5dbe0; }
.pied a:hover { color: var(--blanc); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied .logo { color: var(--blanc); margin-bottom: 14px; }

/* Réseaux sociaux */
.reseaux {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.reseaux a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rayon-petit);
  font-size: .9rem;
  font-weight: 600;
}
.reseaux a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }

/* Bas de page : copyright + mention agence */
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: .9rem;
}


/* ==========================================================================
   15. PAGE MENTIONS LÉGALES
   ========================================================================== */
.page-entete {
  background: linear-gradient(120deg, var(--anthracite), var(--noir) 60%, var(--rouge-fonce));
  color: var(--blanc);
  padding: 70px 0 60px;
}
.page-entete h1 { color: var(--blanc); font-size: 2.6rem; margin-bottom: 10px; }
.page-entete p { color: #d3d9de; margin: 0; }

.contenu-legal {
  max-width: 860px;
  margin: 0 auto;
}
.contenu-legal h2 {
  font-size: 1.4rem;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--bordure);
}
.contenu-legal h2:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.contenu-legal address {
  font-style: normal;
  background: var(--gris-clair);
  border-radius: var(--rayon-petit);
  padding: 20px 22px;
  margin-bottom: 18px;
}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* --- Grand écran intermédiaire / petit portable --- */
@media (max-width: 1080px) {
  .entete__inner { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; }
  .nav ul { justify-content: flex-start; }
  .chiffres { grid-template-columns: repeat(3, 1fr); }
}

/* --- Tablette --- */
@media (max-width: 900px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.8rem; }
  .hero h1 { font-size: 2.4rem; }
  .hero__inner { padding: 74px 22px 66px; }
  .section { padding: 58px 0; }

  .duo,
  .zone { grid-template-columns: 1fr; gap: 30px; }
  .duo__image img { min-height: 260px; }

  .grille,
  .grille--4,
  .galerie,
  .infos { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.55rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1.02rem; }
  .section { padding: 46px 0; }
  .conteneur { padding: 0 18px; }

  /* En-tête compacté : navigation défilante horizontalement */
  .entete__inner { padding: 12px 18px; gap: 12px; }
  .entete__tel { display: none; }
  .nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav ul { flex-wrap: nowrap; gap: 2px; padding-bottom: 4px; }
  .nav a { white-space: nowrap; padding: 8px 10px; font-size: .9rem; }

  /* Tout passe en une seule colonne */
  .chiffres,
  .grille,
  .grille--2,
  .grille--4,
  .galerie,
  .infos,
  .etapes,
  .departements,
  .pied__grille { grid-template-columns: 1fr; }

  /* Boutons pleine largeur et faciles à cliquer */
  .boutons { flex-direction: column; }
  .btn { width: 100%; padding: 15px 20px; }

  .cta { padding: 34px 22px; }
  .citation { padding: 24px 22px; }
  .galerie img { height: 190px; }
  .horaires div { flex-direction: column; gap: 2px; }
  .horaires dd { text-align: left; }
  .pied__bas { flex-direction: column; }
}