/* ==========================================================================
   CGM Construction — feuille de style principale
   Structure : variables > reset > layout > composants > responsive
   Palette et typographie alignées sur le site actuel (cgm-construction.lu) :
   police Inter, accent bleu #7ab2ce, design plat (pas d'ombres/arrondis),
   grand rythme vertical (sections ~100px), une section sombre d'accent.
   ========================================================================== */

:root {
  --color-primary: #7ab2ce;      /* bleu accent (boutons, liens, chiffres) */
  --color-primary-dark: #5f97b3;
  --color-text: #25282a;         /* texte courant */
  --color-text-light: #6b6f70;
  --color-heading: #161922;      /* titres */
  --color-bg: #ffffff;
  --color-bg-dark: #1a1c1d;      /* section sombre d'accent (ex: Zinguerie) */
  --color-eyebrow-on-dark: #cdcdcd;
  --color-border: #e0e0dc;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --container-width: 1220px;
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, ul, figure { margin: 0; padding: 0; }
img { max-width: 100%; display: block; border-radius: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-bg);
}
h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--color-heading); }
h1 { font-size: 52px; line-height: 1.3; font-weight: 700; letter-spacing: -1px; }
h2 { font-size: 48px; line-height: 1.3; font-weight: 700; letter-spacing: -1px; }
h3 { font-size: 32px; line-height: 1.35; font-weight: 700; }
h4 { font-size: 24px; line-height: 1.4; font-weight: 400; }
h5 { font-size: 20px; line-height: 1.4; font-weight: 400; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container--wide { max-width: 1520px; }

/* Rythme vertical du contenu (espacement entre titres/paragraphes/listes) */
.section h1,
.section h2,
.section h3,
.section h4 { margin-bottom: 20px; }
.section h1:last-child,
.section h2:last-child,
.section h3:last-child { margin-bottom: 0; }
.section p,
.section ul:not(.services-grid),
.section ol { margin-bottom: 20px; }
.section p:last-child,
.section ul:last-child,
.section ol:last-child { margin-bottom: 0; }

/* Boutons (design plat : pas d'arrondi, libellés courts et gras) */
.btn {
  display: inline-block;
  padding: 16px 32px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--color-primary-dark); }
.btn--outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 14px 30px;
}
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--outline-light {
  background: transparent;
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  padding: 14px 30px;
}
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--color-primary-dark); }
.btn--small { padding: 12px 25px; font-size: 12px; }

.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.text-accent { color: var(--color-primary); }
.bullet-list { list-style: disc; margin: 16px 0; padding-left: 20px; }
.bullet-list li { padding: 4px 0; }
.section--dark .bullet-list li::marker { color: var(--color-primary); }

/* Header : transparent en haut de page sur TOUTES les pages, devient
   opaque (fond sombre, texte blanc) dès qu'on scrolle — même comportement
   partout, avec juste une différence de texte au tout début (blanc sur le
   hero photo de l'accueil, foncé sur le fond clair des autres pages). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  box-shadow: none;
  /* transition sur background-color (et non le raccourci "background") :
     certains navigateurs n'animent pas correctement depuis le mot-clé
     "transparent" quand la transition porte sur le raccourci "background". */
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  background-color: var(--color-bg-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.site-header.is-scrolled .main-nav a { color: #fff; }
/* Le header étant sorti du flux (fixed), on réserve sa hauteur en haut du
   contenu sur les pages sans hero (l'accueil s'en charge lui-même via son
   hero en quasi plein écran). */
body:not(.has-hero) main { padding-top: 96px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo img { height: 48px; width: auto; }
/* CGM Construction : logo carré (monogramme) + libellé texte à côté, le
   fichier logo fourni étant un visuel de type "profil" (portrait, avec
   accroche et sous-titre) plutôt qu'un lockup horizontal pour header. */
.site-logo { display: flex; align-items: center; gap: 10px; }
.site-logo__text { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-heading); letter-spacing: -.2px; }
body.has-hero .site-header:not(.is-scrolled) .site-logo__text { color: #fff; }
.site-logo__text strong { font-weight: 700; }
.main-nav ul {
  display: flex;
  gap: 4px;
  align-items: center;
}
.main-nav a { display: inline-block; padding: 35px 14px; font-size: 15px; font-weight: 500; color: var(--color-text); transition: color .2s ease; }
.main-nav .has-submenu { position: relative; }
.main-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg-dark);
  min-width: 220px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  padding: 8px 0;
  z-index: 10;
}
.main-nav .has-submenu:hover .submenu { display: block; }
.main-nav .submenu li { width: 100%; }
.main-nav .submenu a { display: block; padding: 10px 16px; color: rgba(255,255,255,.75); }
.main-nav .submenu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.site-phone {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
  background: var(--color-primary);
  padding: 12px 20px;
  transition: background .2s ease;
}
.site-phone:hover { background: var(--color-primary-dark); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--color-text);
  transition: background-color .2s ease;
}

/* Sur l'accueil, le hero est une photo sombre : le texte du header (et
   l'icône du menu burger) restent blancs dès le départ (tant qu'on n'a pas
   scrollé). Sur les autres pages, le haut de page est clair, donc le texte
   et l'icône restent dans leur couleur foncée par défaut jusqu'au scroll. */
body.has-hero .site-header:not(.is-scrolled) .main-nav a { color: #fff; }
body.has-hero .site-header:not(.is-scrolled) .nav-toggle span { background: #fff; }
/* Une fois le header devenu sombre au scroll (sur toutes les pages), l'icône
   reste lisible en blanc, comme les liens du menu. */
.site-header.is-scrolled .nav-toggle span { background: #fff; }

/* Hero */
.hero {
  position: relative;
  color: #fff;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
@media (min-width: 901px) {
  .hero:not(.hero--page) { min-height: 92vh; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 24, .55);
}
/* .hero__content réutilise .container (donc max-width:1220 + margin:0 auto)
   pour garder le même repère gauche que le reste du site. La largeur du texte
   est limitée sur ses enfants plutôt que sur le container lui-même : lui
   donner son propre max-width le ferait recentrer au milieu de la section
   (plus étroit + centré) au lieu de démarrer à gauche comme les autres blocs. */
.hero__content { position: relative; z-index: 1; }
.hero__content > * { max-width: 640px; }
.hero__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1px; color: rgba(255,255,255,.85); margin: 0 0 16px; }
.hero h1 { color: #fff; margin: 0 0 28px; }
.hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Variante courte : bannière de titre en haut des pages intérieures (photo en
   fond, pas besoin de prendre presque tout l'écran comme sur l'accueil). */
.hero--page { min-height: 420px; }
.hero--page::before { background: rgba(20, 22, 24, .35); }
.hero--page h1 { margin: 0 0 12px; }
.hero--page h2 {
  color: rgba(255,255,255,.85);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 901px) {
  .hero--page { min-height: 60vh; }
}
@media (max-width: 640px) {
  .hero--page { min-height: 340px; }
}

/* Sections génériques */
.section { padding: 100px 0; }
.section--alt { background: #f7f7f5; }
.section--warm { background: #f5f3ef; }
.section--dark { background: var(--color-bg-dark); color: rgba(255,255,255,.75); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .eyebrow { color: var(--color-eyebrow-on-dark); }
.section--dark a:not(.btn) { color: var(--color-primary); }
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: center;
}
.section-grid--top { align-items: start; margin-top: 32px; }

/* Section "bandeau photo" mi-page (ex : "Pose de toiture à neuf",
   "Isolation combles habitables") : photo plein cadre en fond, texte
   contraint en largeur pour rester sur la zone la plus lisible de la photo,
   comme sur le design d'origine. Variante claire par défaut (texte sombre,
   photo plutôt claire) ; .photo-section--dark pour une photo sombre (texte
   blanc), même logique que .section--dark. */
.photo-section {
  background-size: cover;
  background-position: center;
  padding: 90px 0;
}
.photo-section .container > * { max-width: 560px; }
.photo-section h1,
.photo-section h2,
.photo-section h3,
.photo-section h4 { margin-bottom: 20px; }
.photo-section h1:last-child,
.photo-section h2:last-child,
.photo-section h3:last-child { margin-bottom: 0; }
.photo-section p,
.photo-section ul,
.photo-section ol { margin-bottom: 20px; }
.photo-section p:last-child,
.photo-section ul:last-child,
.photo-section ol:last-child { margin-bottom: 0; }
.photo-section--dark { color: rgba(255,255,255,.85); }
.photo-section--dark h1, .photo-section--dark h2, .photo-section--dark h3, .photo-section--dark h4 { color: #fff; }
.photo-section--dark .eyebrow { color: var(--color-eyebrow-on-dark); }
.photo-section--dark a:not(.btn) { color: var(--color-primary); }

/* Cartes services : grille façon tableau, avec fines lignes de séparation
   et un fond qui s'éclaircit légèrement au survol de chaque case. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: 40px;
}
.service-card {
  display: block;
  background: var(--color-bg);
  padding: 56px 48px;
  transition: background .2s ease;
  cursor: pointer;
}
.service-card:hover { background: #f0efe9; }
.service-card__number {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.service-card__img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 20px;
}

/* Lignes "tableau" 3 colonnes (photo | numéro | texte) sur fond sombre,
   pages travaux-toiture / ravalement-facade : reprend la technique hairline
   de .services-grid (gap 1px + fond de la couleur des bordures, chaque
   cellule avec son propre fond opaque) au lieu de bordures/padding manuels. */
.trio-grid {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: stretch;
  gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
.trio-grid__photo,
.trio-grid__number,
.trio-grid__text {
  background: var(--color-bg-dark);
}
.trio-grid__photo {
  overflow: hidden;
  min-height: 320px;
}
.trio-grid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trio-grid__number {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.trio-grid__number img { width: 100%; max-width: 90px; }
.trio-grid__text {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Petites illustrations décoratives (traits fins) utilisées dans certaines
   sections texte + image : on plafonne leur taille pour qu'elles restent
   discrètes au lieu d'occuper toute la largeur de la colonne. */
.decor-icon { width: 100%; max-width: 280px; margin: 0 auto; }
.service-card h3 { transition: color .2s ease; }
.service-card:hover h3 { color: var(--color-primary); }

/* Figure d'intro (badge décennale + photo) */
.intro-figure { position: relative; width: fit-content; margin: 0 auto; }
.intro-figure__photo { }
.intro-figure__badge {
  position: absolute;
  bottom: -30px;
  left: -20px;
  width: 130px;
  height: auto;
}

/* CTA section (bloc partagé, fond clair, disposition en ligne) */
.cta-section { border-top: 1px solid var(--color-border); padding: 64px 0; }
.cta-section__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-section .eyebrow { margin: 0; flex: 0 0 auto; }
/* Spécificité de ".cta-section" ajoutée pour l'emporter sur la règle
   générique ".section h2 { margin-bottom: 20px }" : sans ça, ce
   margin-bottom s'ajoutait au gap du flex (surtout visible empilé sur
   mobile, d'où l'énorme espace avant le bouton). */
.cta-section .cta-section__heading { flex: 1 1 320px; margin: 0; }
.cta-section .btn { flex: 0 0 auto; }

/* Formulaire de contact */
.contact-form { display: grid; gap: 16px; max-width: 640px; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.form-message { padding: 12px 16px; border-radius: 0; margin-bottom: 16px; }
.form-message--success { background: #e3f5e6; color: #1f7a34; }
.form-message--error { background: #fdeaea; color: #b02a2a; }

/* Footer (fond clair, comme le site actuel) */
.site-footer { background: #fff; color: var(--color-text); border-top: 1px solid var(--color-border); padding-top: 72px; }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 56px;
}
.site-footer h3, .site-footer h4, .site-footer h5 { color: var(--color-heading); margin-bottom: 12px; }
.site-footer h3 { font-size: 32px; font-weight: 700; }
.site-footer h4 { font-size: 24px; font-weight: 400; }
.site-footer h5 { font-size: 20px; font-weight: 400; }
.site-footer p { color: var(--color-text-light); margin-bottom: 16px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer .btn--outline { border-color: var(--color-primary); color: var(--color-primary); }
.site-footer .btn--outline:hover { background: var(--color-primary); color: #fff; }
.site-footer__bottom a { text-decoration: underline; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__logo { height: 40px; margin-bottom: 12px; }
.site-footer__col ul li { padding: 4px 0; }
.site-footer__col ul a { font-size: 15px; font-weight: 500; color: var(--color-text); }
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 16px 0;
  font-size: .85rem;
  color: var(--color-text-light);
  text-align: center;
}

/* Galerie "Nos réalisations" */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.gallery-item:hover img { transform: scale(1.06); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 88vw; max-height: 88vh; object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  padding: 8px 16px;
}
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.25); }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Pages légales */
.legal-content .container { max-width: 860px; }
.legal-content h1 { margin-bottom: 24px; }
.legal-content h3 { margin-top: 32px; margin-bottom: 12px; font-size: 24px; }
.legal-content p, .legal-content ul { margin-bottom: 16px; }
.legal-content ul { padding-left: 20px; list-style: disc; }

/* Responsive */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .section-grid { grid-template-columns: 1fr; }
  /* Sur mobile (colonne unique), le numéro/pictogramme doit toujours arriver
     avant le texte, même sur les sections où il est placé après dans le HTML
     pour alterner les côtés en desktop. */
  .section-grid .decor-icon { order: -1; }
  /* Lignes 3 colonnes (photo | numéro | texte) : on empile en 1 colonne,
     numéro d'abord, puis texte, puis photo — même logique que ci-dessus,
     quel que soit l'ordre alterné en desktop. */
  /* Empilée en 1 colonne, la grille hairline (fond clair + gap 1px) laisse
     un mince liseré entre les blocs empilés : sur mobile on le supprime en
     repassant le fond de la grille en transparent (le fond sombre de la
     section suffit). */
  .trio-grid { grid-template-columns: 1fr; background: transparent; border: 0; }
  .trio-grid__number { order: -1; padding: 32px 16px 8px; }
  .trio-grid__text { order: 0; padding: 8px 32px 40px; }
  .trio-grid__photo { order: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 40px; }
  h2 { font-size: 36px; }
  .section { padding: 64px 0; }
}

@media (max-width: 640px) {
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-bg-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 16px; gap: 4px; }
  .main-nav a { padding: 12px 8px; color: #fff !important; }
  .nav-toggle { display: flex; }
  .site-phone { background: transparent; color: var(--color-primary); padding: 8px 0; }
  body.has-hero .site-header .site-phone { color: #fff; }
  .main-nav .submenu {
    display: block;
    position: static;
    background: transparent;
    box-shadow: none;
    padding-left: 16px;
  }
  .main-nav .submenu a { color: rgba(255,255,255,.75) !important; }
  .main-nav .submenu a:hover { background: rgba(255,255,255,.08); }
  .intro-figure__badge { left: 0; bottom: -20px; width: 90px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 32px 24px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .cta-section__inner { flex-direction: column; align-items: flex-start; }
  /* "flex: 1 1 320px" fixe une largeur de 320px en ligne (desktop), mais dès
     qu'on repasse en colonne (ci-dessus) le 320px s'applique à l'axe
     principal qui devient vertical : ça forçait une hauteur de 320px sur le
     bloc titre, d'où l'énorme espace vide avant le bouton. */
  .cta-section .cta-section__heading { flex-basis: auto; }
}

/* Bandeau de consentement cookies (RGPD). Masqué par défaut (transform),
   affiché via la classe .is-visible ajoutée en JS (assets/js/cookie-consent.js)
   quand aucun choix valide n'est encore enregistré. Fond sombre pour rester
   cohérent avec le reste du site (footer CTA, sections --dark). */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--color-bg-dark);
  color: rgba(255,255,255,.8);
  padding: 22px 0;
  box-shadow: 0 -2px 16px rgba(0,0,0,.25);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner__text { margin: 0; font-size: 14px; line-height: 1.6; flex: 1 1 420px; }
.cookie-banner__text a { color: var(--color-primary); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex: 0 0 auto; }

@media (max-width: 700px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1 1 0; text-align: center; }
}