/* -----------------------------------------------------------------------
   Mise en page propre à chaque section de la page publique, et aux pages
   secondaires (mentions légales, 404, confirmation/suivi de devis).
   ----------------------------------------------------------------------- */

main {
  display: block;
}

section {
  padding: var(--section-spacing) 0;
}

/* --- Hero (carrousel) et bande de mise en avant : ces deux bandeaux
   s'affranchissent volontairement de `--section-spacing`. Ce ne sont pas
   des "sections de contenu" comme services/réalisations/témoignages, mais
   des bandeaux pensés pour s'enchaîner sans espace, différenciés
   uniquement par leur fond de couleur (navy pour le hero, surface-alt
   pour la bande) — d'où le `padding: 0` explicite ci-dessous, qui prime
   sur la règle générique `section` juste au-dessus. */

.hero {
  padding: 0;
}

/* --- Bande de mise en avant --- */

.highlights-bar-section {
  padding: 0;
}

/* --- Partenaires --- */
/* Fond légèrement teinté pour distinguer la section du reste de la page
   (voir public/css/components.css pour .partenaires__label et le
   défilement .partenaires-marquee). Padding vertical PROPRE à cette
   section, plus réduit que --section-spacing (utilisé par défaut via la
   règle générique `section` ci-dessus) : bug observé en conditions
   réelles avec un seul partenaire publié — l'espacement standard des
   sections de contenu (4.5rem, pensé pour entourer un titre + une grille
   de cartes) devenait disproportionné autour d'un simple bandeau de
   logos, qui n'a ni titre imposant ni grille. La bande de mise en avant
   (.highlights-bar-section, juste au-dessus dans la page) a le même
   problème de fond — un bandeau discret, pas une section de contenu — et
   s'en tire avec `padding: 0` (fond différent des deux côtés fait déjà la
   séparation) ; ici on garde un peu de padding (le fond seul ne suffit
   pas à séparer visuellement des logos du texte des sections voisines)
   mais explicitement plus compact.
   */
.partenaires {
  background: var(--color-surface-alt);
  padding: 2.5rem 0;
}

/* --- Services --- */

.services__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* --- Réalisations --- */

.realisations {
  background: var(--color-surface-alt);
}

.realisations__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* --- Témoignages --- */

.temoignages__grid {
  grid-template-columns: repeat(2, 1fr);
}

/* --- Devis : deux colonnes (intro à gauche, formulaire à droite) --- */

.devis {
  background: var(--color-navy-dark);
}

.devis .section-title h2,
.devis-intro h2 {
  color: #fff;
}

.devis .section-title p {
  color: var(--color-navy-pale);
}

.devis__layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
}

.devis-intro {
  color: var(--color-navy-pale);
}

.devis-intro h2 {
  text-align: left;
  margin-bottom: 1rem;
}

.devis-intro__list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.devis-intro__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.devis-intro__list i {
  color: var(--color-navy-light);
}

.devis-form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

/* --- Footer --- */

.site-footer {
  background: var(--color-navy-dark);
  color: var(--color-navy-pale);
  padding: 4rem 0 0;
}

.site-footer a {
  color: var(--color-navy-pale);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.site-footer__logo {
  height: 36px;
  width: 36px;
  object-fit: contain;
}

.site-footer__brand-text {
  color: #fff;
  font-weight: 500;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.site-footer__contact i {
  color: var(--color-navy-light);
  margin-top: 0.2rem;
}

/* Icônes de réseaux sociaux : seules celles dont le champ est renseigné
   dans Paramètres sont rendues par la vue (voir views/partials/footer.ejs)
   — pas besoin ici de gérer un état "masqué", l'élément est simplement
   absent du HTML si vide. */
.site-footer__social {
  display: flex;
  gap: 0.75rem;
}

.site-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.site-footer__social a:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.site-footer__bottom {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-navy-light);
}

/* --- Pages secondaires (mentions légales, 404, devis) --- */

.simple-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.simple-page h1 {
  margin-bottom: 1.5rem;
}

.simple-page section + section {
  margin-top: 2rem;
}

.simple-page dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
}

.simple-page dt {
  font-weight: 500;
  color: var(--color-text);
}

.simple-page dd {
  margin: 0;
  color: var(--color-text-secondary);
}

.error-page {
  text-align: center;
  padding: 6rem 1.5rem;
}

.error-page__code {
  font-size: 5rem;
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Responsive : tablette (<= 992px) puis mobile (< 768px).
   ----------------------------------------------------------------------- */

@media (max-width: 992px) {
  .services__grid,
  .realisations__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .devis__layout {
    grid-template-columns: 1fr;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    /* Une seule redéfinition ici suffit à réduire l'espacement de toutes
       les sections qui lisent `--section-spacing` (voir variables.css) :
       pas besoin de dupliquer la valeur dans chaque règle mobile. */
    --section-spacing: 3rem;
  }

  .services__grid,
  .realisations__grid,
  .temoignages__grid {
    grid-template-columns: 1fr;
  }

  .highlights-bar__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .highlights-bar__item:nth-child(2n + 1) {
    border-left: none;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .carousel__track {
    min-height: 560px;
  }

  /* --- Navigation mobile (menu hamburger) --- */
  .hamburger {
    display: flex;
  }

  /* Bug corrigé (débordement horizontal, "bande blanche" visible sur les
     téléphones les plus étroits) : la rangée du header ([logo+nom] ...
     [sélecteur de langue] [bouton "Demander un devis"] [hamburger], voir
     .site-header__actions dans components.css) ne tenait plus dans la
     largeur disponible sur les appareils les plus contraints (~320px de
     large, ex: iPhone SE 1re génération) — mesuré : 49px de débordement
     (document.documentElement.scrollWidth - window.innerWidth). En cause :
     les enfants d'une rangée flex n'acceptent jamais, par défaut, de
     rétrécir sous la largeur de leur propre CONTENU (min-width: auto
     implicite) — le bouton ne pouvait donc plus se comprimer une fois son
     texte déjà passé à deux lignes, et débordait plutôt que de continuer à
     rétrécir. Comme le hero (fond de couleur) fait, lui, exactement la
     largeur de son propre conteneur (jamais celle, élargie, de la page une
     fois le header débordant), l'écart entre les deux se voyait comme un
     bandeau blanc au bord droit du hero, alors que la vraie cause était
     entièrement dans le header, pas dans le hero lui-même.
     Corrigé à la source, pas en ajoutant un `min-width: 0` en compensant
     ailleurs : ce bouton est de toute façon REDONDANT sur mobile — la même
     action "Demander un devis" reste accessible via le lien du tiroir de
     menu mobile juste en dessous (voir .site-nav__links dans
     views/partials/header.ejs) et via le bouton présent dans le hero
     lui-même. Le supprimer de cette rangée précise élimine le plus gros
     contributeur au débordement, sans perdre aucune fonctionnalité. */
  .site-header__actions .btn-primary {
    display: none;
  }

  /* Bug corrigé (texte du hero qui chevauche visuellement les flèches de
     navigation) : sur mobile, `.carousel__content` occupait toute la
     largeur de `.container` (lui-même juste réduit de 1.5rem de padding de
     chaque côté, voir base.css) — bien moins que ce qu'il faut pour
     dégager les flèches, qui restent positionnées à 1rem du bord et
     mesurent 44px de diamètre (voir .carousel__arrow dans components.css).
     Une marge horizontale dédiée au conteneur de texte, UNIQUEMENT sur
     mobile (le desktop a largement la place, flèches et texte ne se
     croisent jamais au-delà de 768px) : 3.5rem de chaque côté, ajoutés au
     1.5rem déjà fourni par `.container`, pour un dégagement total de 5rem
     (80px) depuis le bord de l'écran — au-delà du bord droit d'une flèche
     (1rem + 44px = 60px), avec ~20px de respiration supplémentaire.
     Vérifié pixel par pixel (comparaison des rectangles texte/flèche, pas
     seulement visuellement) sur les 3 slides existantes, en français et en
     anglais. */
  .carousel__content {
    margin: 0 3.5rem;
  }

  .site-nav__links {
    /* Le menu passe en tiroir déroulant sous le header (voir js/main.js,
       qui bascule .site-nav--open selon l'état aria-expanded du bouton
       hamburger). */
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .site-nav--open .site-nav__links {
    max-height: 400px;
  }

  .site-nav__links a {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: block;
  }

  /* Le bouton "Demander un devis" et le sélecteur de langue restent
     visibles en permanence dans la barre du header, même sur mobile :
     seuls les liens d'ancre (Services, Réalisations...) passent dans le
     tiroir du menu hamburger. */
  .site-header__actions .btn-primary {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
}