/* ==========================================================================
   LAURENT MARÉCHAL - Chauffagiste à Villecresnes
   Feuille de style unique (site vitrine HTML + CSS, sans framework)
   --------------------------------------------------------------------------
   SOMMAIRE
   1.  Variables de couleurs et réglages généraux
   2.  Base (typographie, titres, liens, images)
   3.  Structure (conteneur, sections, fonds alternés)
   4.  Boutons
   5.  Bandeau haut + En-tête + Navigation
   6.  Bouton fixe "Nous contacter"
   7.  Hero (grande image + voile bleu)
   8.  Blocs image + texte (duo)
   9.  Cartes, grilles, badges
   10. Chiffres clés
   11. Timeline (méthode de travail)
   12. Galerie réalisations
   13. Infos pratiques
   14. Pied de page
   15. Page Mentions légales
   16. Responsive (tablette + mobile)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES — modifier ici pour changer toute la charte du site
   ========================================================================== */
:root {
  /* Couleurs principales */
  --bleu-profond: #0a2540;   /* couleur principale (header hero, sections sombres) */
  --bleu: #123e6b;           /* bleu intermédiaire */
  --bleu-accent: #2b8ccb;    /* bleu clair : accents techniques, icônes */
  --bleu-pale: #eaf2f9;      /* fond de section bleu très léger */
  --gris-clair: #f5f7f9;     /* fond de section gris très clair */
  --anthracite: #1e252d;     /* titres et textes forts */
  --texte: #46505c;          /* texte courant */
  --bordure: #e2e8ef;        /* bordures de cartes */
  --acier: #8b97a5;          /* gris acier : détails techniques */
  --urgence: #c0392b;        /* rouge discret : urgence 24h */
  --blanc: #ffffff;

  /* Réglages */
  --rayon: 14px;                              /* arrondi des cartes */
  --rayon-petit: 8px;
  --ombre: 0 6px 24px rgba(10, 37, 64, 0.07); /* ombre légère */
  --ombre-forte: 0 14px 40px rgba(10, 37, 64, 0.14);
  --largeur-max: 1180px;                      /* largeur du contenu */
}


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

html {
  scroll-behavior: smooth;   /* défilement doux vers les ancres */
}

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

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

h1 { font-size: 2.7rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 16px; }

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

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

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

/* Icônes SVG (sprite défini en haut du body) */
.ico {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Lien d'évitement pour l'accessibilité clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu-profond);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.saut-contenu:focus { left: 8px; top: 8px; }


/* ==========================================================================
   3. STRUCTURE
   ========================================================================== */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 84px 0;
  scroll-margin-top: 90px; /* évite que le header masque les titres au clic sur une ancre */
}

/* Fonds alternés */
.section--gris  { background: var(--gris-clair); }
.section--bleu  { background: var(--bleu-pale); }
.section--sombre {
  background: linear-gradient(160deg, var(--bleu-profond), #0e3057 60%, var(--bleu));
  color: #d6e2ee;
}
.section--sombre h2,
.section--sombre h3 { color: #fff; }

/* En-tête de section */
.entete-section {
  max-width: 760px;
  margin-bottom: 44px;
}
.entete-section--centre {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sur-titre {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-accent);
  margin: 0 0 10px;
}
.section--sombre .sur-titre { color: #7dc1ea; }

.chapeau {
  font-size: 1.06rem;
  margin-bottom: 0;
}


/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn .ico { width: 19px; height: 19px; }

/* Bouton principal bleu */
.btn--principal {
  background: var(--bleu-accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(43, 140, 203, 0.28);
}
.btn--principal:hover { background: #1f79b3; }

/* Bouton foncé (bleu profond) */
.btn--fonce {
  background: var(--bleu-profond);
  color: #fff;
}
.btn--fonce:hover { background: #143459; }

/* Bouton contour clair (sur image ou fond sombre) */
.btn--clair {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.btn--clair:hover { background: #fff; color: var(--bleu-profond); }

/* Bouton contour foncé (sur fond blanc) */
.btn--contour {
  border-color: var(--bordure);
  background: #fff;
  color: var(--bleu-profond);
}
.btn--contour:hover { border-color: var(--bleu-accent); color: var(--bleu-accent); }

/* Bouton urgence (rouge discret) */
.btn--urgence {
  background: var(--urgence);
  color: #fff;
  box-shadow: 0 8px 20px rgba(192, 57, 43, 0.25);
}
.btn--urgence:hover { background: #a9301f; }

/* Groupe de boutons */
.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* ==========================================================================
   5. BANDEAU HAUT + EN-TÊTE
   ========================================================================== */
/* Fine bande d'informations au-dessus du header */
.bandeau-haut {
  background: var(--bleu-profond);
  color: #cddced;
  font-size: 0.86rem;
}
.bandeau-haut .conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
}
.bandeau-haut a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bandeau-haut a:hover { text-decoration: underline; }
.bandeau-haut .ico { width: 16px; height: 16px; color: #7dc1ea; }
.bandeau-haut .pastille-urgence {
  margin-left: auto;
  background: var(--urgence);
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
}

/* En-tête blanc collant */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--bordure);
  backdrop-filter: blur(6px);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Logo texte */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.logo__marque {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--bleu-profond), var(--bleu-accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}
.logo__nom {
  display: block;
  font-weight: 800;
  color: var(--anthracite);
  font-size: 1.06rem;
  line-height: 1.15;
}
.logo__metier {
  display: block;
  font-size: 0.76rem;
  color: var(--acier);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Navigation principale */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav a {
  text-decoration: none;
  color: var(--texte);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 8px 9px;
  border-radius: var(--rayon-petit);
  white-space: nowrap;
}
.nav a:hover { color: var(--bleu-accent); background: var(--bleu-pale); }

.entete .btn { padding: 11px 20px; flex: none; }


/* ==========================================================================
   6. BOUTON FIXE "NOUS CONTACTER" (visible pendant le scroll)
   ========================================================================== */
.btn-fixe {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--urgence);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.2s ease;
}
.btn-fixe:hover { transform: translateY(-2px); background: #a9301f; }
.btn-fixe .ico { width: 19px; height: 19px; }


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bleu-profond);
}
/* Image de fond en balise img (meilleur pour le SEO et l'accessibilité) */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile bleu profond / anthracite par-dessus la photo */
.hero__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 28, 50, 0.95) 0%, rgba(10, 37, 64, 0.86) 45%, rgba(18, 62, 107, 0.62) 100%),
    linear-gradient(to top, rgba(8, 28, 50, 0.85), rgba(8, 28, 50, 0) 55%);
}
.hero__contenu {
  position: relative;
  z-index: 2;
  color: #dce8f3;
  padding-top: 90px;
  padding-bottom: 90px;
  max-width: 900px;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero__sous-titre {
  font-size: 1.14rem;
  max-width: 60ch;
  color: #cfdeec;
  margin-bottom: 30px;
}
/* Petite étiquette au-dessus du titre */
.hero__etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.hero__etiquette .point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #58d68d;
}
/* Mention des prestations sous les boutons */
.hero__mention {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #b9cddf;
  font-size: 0.93rem;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   8. BLOCS IMAGE + TEXTE
   ========================================================================== */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
/* Image à gauche, texte à droite */
.duo--inverse .duo__media { order: -1; }

.duo__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
}

/* Encart d'information dans une colonne texte */
.encart {
  background: var(--blanc);
  border-left: 4px solid var(--bleu-accent);
  border-radius: var(--rayon-petit);
  padding: 18px 22px;
  box-shadow: var(--ombre);
  font-size: 0.98rem;
  margin-bottom: 0;
}
.section--gris .encart,
.section--bleu .encart { background: #fff; }

/* Étiquette "35 ans d'expérience" */
.badge-experience {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bleu-profond);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.badge-experience .ico { width: 18px; height: 18px; color: #7dc1ea; }

/* Liste à puces "check" */
.liste-check {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
}
.liste-check li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.99rem;
}
.liste-check .ico {
  width: 20px;
  height: 20px;
  color: var(--bleu-accent);
  margin-top: 3px;
}


/* ==========================================================================
   9. CARTES, GRILLES, BADGES
   ========================================================================== */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 24px;
}
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.grille + .grille,
.duo + .grille { margin-top: 44px; }

/* Carte standard */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 28px 26px;
  box-shadow: var(--ombre);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
  border-color: #cfe0ef;
}
.carte h3 { margin-bottom: 9px; }
.carte p { margin-bottom: 0; font-size: 0.97rem; }

/* Pictogramme de carte */
.carte__ico {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--bleu-pale);
  color: var(--bleu);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.carte__ico .ico { width: 25px; height: 25px; }

/* Cartes sur fond sombre */
.section--sombre .carte {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: #cddced;
}
.section--sombre .carte:hover { background: rgba(255, 255, 255, 0.09); }
.section--sombre .carte__ico {
  background: rgba(125, 193, 234, 0.16);
  color: #7dc1ea;
}

/* Badges texte (certifications, marques, villes) */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--anthracite);
  box-shadow: var(--ombre);
}
.badge .ico { width: 17px; height: 17px; color: var(--bleu-accent); }

/* Badge marque (plus discret) */
.badge--marque {
  background: var(--gris-clair);
  box-shadow: none;
  color: var(--texte);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Badge ville */
.badge--ville {
  background: var(--bleu-pale);
  border-color: #d3e4f2;
  box-shadow: none;
  font-weight: 600;
  color: var(--bleu);
}

/* Bloc "avis clients" sobre */
.bloc-citation {
  background: #fff;
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--bleu-accent);
  border-radius: var(--rayon);
  padding: 34px 36px;
  box-shadow: var(--ombre);
  max-width: 860px;
}
.bloc-citation p:last-child { margin-bottom: 0; }
.bloc-citation .gros-texte {
  font-size: 1.16rem;
  color: var(--anthracite);
  font-weight: 600;
}


/* ==========================================================================
   10. CHIFFRES CLÉS
   ========================================================================== */
.chiffres {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.chiffre {
  text-align: center;
  padding: 26px 14px;
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.chiffre__valeur {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 6px;
}
.chiffre__label {
  display: block;
  font-size: 0.92rem;
  color: #b9cddf;
}


/* ==========================================================================
   11. TIMELINE (méthode de travail)
   ========================================================================== */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.timeline li {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px 22px 22px;
  box-shadow: var(--ombre);
  padding-top: 34px;
}
/* Numéro d'étape */
.timeline li::before {
  content: attr(data-etape);
  position: absolute;
  top: -15px;
  left: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bleu-accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(43, 140, 203, 0.35);
}
.timeline strong {
  display: block;
  color: var(--anthracite);
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.timeline span { font-size: 0.94rem; }


/* ==========================================================================
   12. GALERIE RÉALISATIONS
   ========================================================================== */
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.galerie figure {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
}
.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galerie figcaption {
  padding: 13px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--anthracite);
}
.mention-photos {
  font-size: 0.85rem;
  color: var(--acier);
  margin-top: 26px;
}


/* ==========================================================================
   13. INFOS PRATIQUES
   ========================================================================== */
.infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.bloc-infos {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--rayon);
  padding: 32px 30px;
}
.bloc-infos h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7dc1ea;
  margin-bottom: 18px;
}
.liste-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.liste-contact li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.liste-contact .ico { color: #7dc1ea; margin-top: 3px; }
.liste-contact a { color: #fff; text-decoration: none; font-weight: 700; }
.liste-contact a:hover { text-decoration: underline; }
.liste-contact strong { color: #fff; display: block; }

/* Tableau des horaires */
.horaires {
  list-style: none;
  padding: 0;
  margin: 0;
}
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  font-size: 0.97rem;
}
.horaires li:last-child { border-bottom: 0; }
.horaires span:first-child { color: #b9cddf; }
.horaires span:last-child { color: #fff; font-weight: 600; text-align: right; }


/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */
.pied {
  background: var(--anthracite);
  color: #aeb8c4;
  padding: 64px 0 0;
  font-size: 0.95rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
}
.pied h3 {
  color: #fff;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.pied a { color: #cfd7e0; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pied .logo__nom { color: #fff; }
.pied .logo__metier { color: var(--acier); }
.pied__intro { margin: 18px 0 0; max-width: 34ch; }

/* Réseaux sociaux */
.reseaux { display: flex; gap: 12px; margin-top: 8px; }
.reseaux a {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s ease;
}
.reseaux a:hover { background: var(--bleu-accent); }

/* Barre basse du pied de page */
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  font-size: 0.89rem;
}
.pied__bas .signature { margin-left: auto; }
.pied__bas .signature strong { color: #fff; }


/* ==========================================================================
   15. PAGE MENTIONS LÉGALES
   ========================================================================== */
.entete-page {
  background: linear-gradient(140deg, var(--bleu-profond), var(--bleu));
  color: #cddced;
  padding: 72px 0 66px;
}
.entete-page h1 { color: #fff; font-size: 2.3rem; margin-bottom: 8px; }
.entete-page p { margin: 0; }
.entete-page .sur-titre { color: #7dc1ea; }

.contenu-legal {
  max-width: 820px;
  padding-top: 72px;
  padding-bottom: 80px;
}
.contenu-legal article {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 30px 32px;
  box-shadow: var(--ombre);
  margin-bottom: 22px;
}
.contenu-legal h2 {
  font-size: 1.22rem;
  margin-bottom: 12px;
}
.contenu-legal article p:last-child { margin-bottom: 0; }
.contenu-legal address {
  font-style: normal;
  line-height: 1.8;
}


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

/* --- Petit écran d'ordinateur : la navigation passe sur une ligne dédiée,
       défilable horizontalement (aucun JavaScript nécessaire) --- */
@media (max-width: 1180px) {
  .entete .conteneur { flex-wrap: wrap; row-gap: 12px; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .entete .btn { margin-left: auto; }
}

/* --- Tablette --- */
@media (max-width: 1020px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }

  .section { padding: 68px 0; }

  .duo { grid-template-columns: 1fr; gap: 34px; }
  .duo--inverse .duo__media { order: 0; }

  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .infos { grid-template-columns: 1fr; gap: 26px; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 34px; }

  .hero { min-height: 560px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.08rem; }

  .conteneur { padding: 0 18px; }
  .section { padding: 54px 0; }
  .entete-section { margin-bottom: 32px; }

  /* Bandeau haut simplifié */
  .bandeau-haut { font-size: 0.8rem; }
  .bandeau-haut .pastille-urgence { margin-left: 0; }

  /* Hero */
  .hero { min-height: 0; }
  .hero__contenu { padding-top: 64px; padding-bottom: 64px; }
  .hero h1 { max-width: none; }
  .hero__sous-titre { font-size: 1.02rem; }

  /* Boutons pleine largeur, faciles à cliquer */
  .groupe-btn { flex-direction: column; align-items: stretch; }
  .groupe-btn .btn { width: 100%; }
  .entete .btn { padding: 10px 16px; font-size: 0.88rem; }

  /* Une colonne partout */
  .grille, .grille--3 { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }

  .carte { padding: 24px 22px; }
  .bloc-citation { padding: 26px 24px; }
  .bloc-infos { padding: 26px 22px; }
  .contenu-legal article { padding: 24px 22px; }

  /* Bouton fixe plus discret sur mobile */
  .btn-fixe {
    right: 14px;
    bottom: 14px;
    padding: 12px 18px;
    font-size: 0.88rem;
  }

  .pied__bas { flex-direction: column; align-items: flex-start; }
  .pied__bas .signature { margin-left: 0; }
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}