/* ==========================================================================
   Pacific Agency — en-tête, navigation, pied de page
   ========================================================================== */

/* En-tête ---------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--pa-bg);
  border-bottom: 1px solid var(--pa-line);
  transition: box-shadow var(--motion-fast) var(--ease-io);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

.site-header__inner {
  position: relative;
  display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--header-h);
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 46px; width: auto; }

/* `margin-inline: auto` centre la nav dans l'espace libre entre le logo et
   les actions — pas sur la fenêtre, puisque logo (~64px) et bloc d'actions
   (~300px) n'ont pas la même largeur. Sert de repli en dessous du seuil de
   collision mesuré (voir le media query 1220px plus bas) et sur mobile,
   où la nav n'est de toute façon plus dans le flux (position: fixed). */
.site-nav { margin-inline: auto; }
.site-nav ul {
  display: flex; align-items: center; gap: var(--space-6);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--pa-ink);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--pa-green); }
.site-nav a[aria-current="page"] { color: var(--pa-green); border-bottom-color: var(--pa-orange); }

.header__actions { display: flex; align-items: center; gap: var(--space-4); }

.header__tel {
  display: none;
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm);
  color: var(--pa-green); text-decoration: none; white-space: nowrap;
}

/* Sélecteur de langue -------------------------------------------------------
   Amélioration progressive : le HTML n'a jamais que deux <a> FR/EN dans
   .lang-switch (voir index.html). `.lang-switch > a` ci-dessous les met en
   forme tels quels, sans JavaScript. main.js les regroupe au chargement
   dans un bouton + menu (.lang-switch__toggle / .lang-switch__menu) ; une
   fois cette transformation faite, les <a> ne sont plus des enfants directs
   de .lang-switch (ils sont passés dans les <li> du menu), donc les deux
   jeux de règles ne s'appliquent jamais en même temps. */
.lang-switch {
  position: relative;
  display: flex; gap: var(--space-1);
  font-size: var(--fs-xs); font-weight: 600;
}
.lang-switch > a {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--pa-muted);
}
.lang-switch > a[aria-current="true"] { background: var(--pa-green-light); color: var(--pa-green); }

/* Bouton du menu déroulant, posé par main.js. Même gabarit visuel que le
   lien "courant" ci-dessus (fond vert clair, texte vert) pour que le clic
   sur EN/FR décidé par le client ne change rien à l'identité visuelle du
   contrôle. */
.lang-switch__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: none; border-radius: var(--radius-sm);
  background: var(--pa-green-light); color: var(--pa-green);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
}
.lang-switch__toggle::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--motion-fast) var(--ease-io);
}
.lang-switch__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Menu : positionné en absolu sous le bouton, ancré à droite. Ne déplace
   jamais le bouton "Devis" ni le numéro de téléphone, qui restent dans le
   flux du flex .header__actions — seul le menu déroulant flotte par-dessus
   le contenu de la page. */
.lang-switch__menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  z-index: 10;
  min-width: 7rem; margin: 0; padding: var(--space-2);
  list-style: none;
  background: var(--pa-bg); border: 1px solid var(--pa-line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu li + li { margin-top: var(--space-1); }
.lang-switch__menu a {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--pa-muted);
  font-size: var(--fs-xs); font-weight: 600;
}
.lang-switch__menu a:hover { color: var(--pa-green); }
.lang-switch__menu a[aria-current="true"] { background: var(--pa-green-light); color: var(--pa-green); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--pa-line); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 2px;
  background: var(--pa-ink); position: relative; transition: transform var(--motion-fast) var(--ease-io), opacity var(--motion-fast) var(--ease-io);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Navigation mobile */
@media (max-width: 979px) {
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--pa-bg); border-bottom: 1px solid var(--pa-line);
    padding: var(--space-4) 0 var(--space-6);
    transform: translateY(-120%); transition: transform var(--motion-fast) var(--ease-io);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--pa-line); }
  .site-nav a {
    display: block; padding: var(--space-4) var(--space-6);
    border-bottom: none; font-size: var(--fs-base);
  }
  .site-nav a[aria-current="page"] { border-left: 3px solid var(--pa-orange); }
}

@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .header__tel { display: inline-block; }
}

/* Centrage optique réel : la nav se centre sur `.site-header__inner` (donc
   sur la fenêtre, tant que le conteneur n'a pas atteint son plafond — voir
   plus bas) plutôt que sur l'espace libre restant.

   Re-mesuré (CDP headless Chrome, Emulation.setDeviceMetricsOverride,
   pas de 1px, layout stabilisé sur 3 frames + 30ms avant lecture) après
   l'allongement du bouton "Devis" → "Obtenir un devis" : le bord droit de
   la nav touche le bloc d'actions à 1213px de large (gapRight = +0,1px à
   1214px, −0,4px à 1213px). L'ancien seuil de 1200px est donc désormais
   dans la zone de collision et devait être déplacé.

   Limite structurelle constatée pendant le balayage : `--container` plafonne
   `.site-header__inner` à 1200px, et la nav se centre SUR ce conteneur, pas
   sur la fenêtre. Passé ce plafond (dès ~1248px de fenêtre), la géométrie
   n'évolue plus avec la largeur : la marge droite reste bloquée à 17,1px,
   quelle que soit la largeur d'écran testée (vérifié jusqu'à 2560px). Il
   est donc impossible d'obtenir les 24px de marge minimale demandés par un
   simple déplacement de seuil — 17,1px est le maximum atteignable avec ce
   conteneur et ce bouton. Signalé au client : pour atteindre 24px, il
   faudrait soit élargir `--container`, soit réduire le bloc d'actions.

   Seuil fixé à 1280px (au-delà du plafond de 1248px, donc sur le palier de
   17,1px, avec une marge confortable après le point de collision réel à
   1213px) et 275px à gauche (logo). En dessous de 1280px et jusqu'au point
   de rupture mobile à 980px, on retombe sur `margin-inline: auto`
   (ci-dessus), qui ne provoque jamais de collision. */
@media (min-width: 1280px) {
  .site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-inline: 0;
  }
  .header__actions { margin-left: auto; }
}

/* Pied de page ------------------------------------------------------------ */

.site-footer {
  background: var(--pa-green-dark);
  color: rgba(255, 255, 255, .82);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--fs-sm);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer__grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
@media (min-width: 720px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.footer__title {
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; margin-bottom: var(--space-4);
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: var(--space-2); }

.footer__logo { background: #fff; padding: var(--space-3); border-radius: var(--radius); display: inline-block; margin-bottom: var(--space-4); }
.footer__logo img { height: 44px; width: auto; }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  padding-top: var(--space-6);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .62);
}