/* ==========================================================================
   Structure commune à toutes les pages :
   en-tête collant, menu mobile, appel final, pied de page, barre d'appel mobile.
   Source : design-export (Main, Accueil-Mobile, Menu-Mobile, pages intérieures).
   ========================================================================== */

/* Le focus clavier ne passe jamais sous l'en-tête collant ni sous la barre d'appel. */
html { scroll-padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-width: 767px) { html { scroll-padding-bottom: 84px; } }

/* En-tête ------------------------------------------------------------------ */
.sr-entete {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.sr-entete__barre {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.sr-entete__logo { display: flex; align-items: center; flex-shrink: 0; }
.sr-entete__logo img { height: var(--logo-h); width: auto; }

/* Menu ordinateur */
.sr-nav { display: none; }
.sr-nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: var(--fs-15);
  font-weight: 500;
}
.sr-nav__lien {
  position: relative;
  color: var(--navy-900);
  text-decoration: none;
  white-space: nowrap; /* « Contrats régies » ne passe jamais sur deux lignes */
}
.sr-nav__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-card) ease;
}
.sr-nav__lien:hover { color: var(--navy-900); }
@media (hover: hover) and (pointer: fine) { .sr-nav__lien:hover::after { transform: scaleX(1); } }
.sr-nav__lien:focus-visible::after { transform: scaleX(1); }
.sr-nav__lien[aria-current="page"] {
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold);
}

.sr-entete__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sr-nav { flex-shrink: 0; }

/* Bouton « Urgence 24/7 | numéro » */
.sr-entete__appel { padding: 0 20px 0 16px; gap: 12px; }
.sr-entete__appel-label { font-size: var(--fs-14); font-weight: 600; }
.sr-entete__appel-sep { width: 1px; height: 20px; background: rgba(255,255,255,.35); }
.sr-entete__appel-numero { font-size: var(--fs-16); font-weight: 700; }

/* Bouton ☰ / ✕ */
.sr-entete__menu {
  position: relative;
  width: var(--btn-sm);
  height: var(--btn-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
  color: var(--navy-900);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) ease;
}
/* ☰ qui se change en ✕ (rotation + fondu) */
.sr-entete__menu .sr-icone {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  transition: opacity var(--dur-menu-in) ease, transform var(--dur-menu-in) var(--ease-out);
}
.sr-entete__menu .sr-icone--fermer { opacity: 0; transform: rotate(-90deg) scale(.8); }
.sr-entete__menu[aria-expanded="true"] .sr-icone--menu { opacity: 0; transform: rotate(90deg) scale(.8); }
.sr-entete__menu[aria-expanded="true"] .sr-icone--fermer { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .sr-entete__menu:active, .sr-barre-appel__ecrire:active { transform: scale(.96); transition-duration: var(--dur-press); }
}

/* Menu complet dès que logo + 5 liens + bouton d'appel tiennent sur une ligne.
   Depuis « Contrats de maintenance » (01.11.2026), il faut 1240 px pour que le bouton d'appel reste visible.
   1240–1279 px : liens un peu plus rapprochés (24 px). Dès 1280 px : 40 px, comme la maquette. */
@media (min-width: 1240px) {
  .sr-nav { display: block; }
  .sr-entete__menu { display: none; }
}
@media (min-width: 1240px) and (max-width: 1279px) {
  .sr-nav__liste { gap: var(--sp-3); }
}
@media (max-width: 767px) {
  .sr-entete__appel { display: none; } /* sur téléphone, l'appel est dans la barre fixe en bas */
}

/* Menu mobile (bleu nuit, sous l'en-tête) ----------------------------------- */
.sr-menu-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + 1px);
  z-index: 45;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy-900);
  /* Fermeture : plus rapide que l'ouverture, accélération */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-menu-out) var(--ease-ui), transform var(--dur-menu-out) var(--ease-ui);
}
/* Ouverture : fondu + glissement, décélération */
.sr-menu-mobile.est-ouvert {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-menu-in);
  transition-timing-function: var(--ease-ui);
}
.sr-menu-mobile[hidden] { display: none; }
html.sr-menu-ouvert { overflow: hidden; }

.sr-menu-mobile__nav {
  min-height: 100%;
  padding: var(--sp-2) var(--sp-3) 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
}
.sr-menu-mobile__liste { list-style: none; margin: 0; padding: 0; }
.sr-menu-mobile__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: var(--ls-card);
}
.sr-menu-mobile__lien:hover { color: var(--white); }
.sr-menu-mobile__lien .sr-icone { color: var(--on-dark-300); }
.sr-menu-mobile__titre { display: flex; align-items: center; gap: 12px; }
.sr-menu-mobile__lien[aria-current="page"] { font-weight: 700; }
.sr-menu-mobile__lien[aria-current="page"] .sr-menu-mobile__titre::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.sr-menu-mobile__actions { display: flex; flex-direction: column; gap: 12px; }
.sr-menu-mobile__actions .sr-appel-double { height: var(--btn-lg); }
.sr-menu-mobile__actions .sr-appel-double__numero { font-size: var(--fs-20); }
.sr-menu-mobile__email { width: 100%; }
.sr-menu-mobile__adresse { margin-top: 6px; text-align: center; font-size: var(--fs-14); color: var(--on-dark-300); }

/* Bouton d'appel sur deux lignes (« Urgence 24/7 » + numéro) */
.sr-appel-double { width: 100%; }
.sr-appel-double__texte { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.sr-appel-double__label { font-size: var(--fs-12); font-weight: 500; }
.sr-appel-double__numero { font-size: var(--fs-18); font-weight: 700; }

/* Appel final (bloc sombre avant le pied de page) ----------------------------- */
.sr-final {
  background: var(--navy-900);
  color: var(--white);
  padding: 112px 0 var(--sp-12);
}
.sr-final--sans-appel { padding-top: 72px; }
.sr-final__bloc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--line-dark);
}
.sr-final__textes { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 640px; }
.sr-final__bloc--accueil .sr-final__textes { max-width: none; }
.sr-final__titre {
  font-size: var(--fs-50);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: var(--ls-h1);
  color: var(--white);
}
.sr-final__texte { font-size: var(--fs-18); line-height: var(--lh-body); color: var(--on-dark-300); }
.sr-final__boutons { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sr-final__bloc--contrats .sr-final__boutons { flex-direction: column; align-items: flex-end; gap: 14px; }

.sr-final__secondaire { padding: 0 26px; font-size: var(--fs-16); }
.sr-final__appel { padding: 0 26px 0 20px; font-size: var(--fs-18); }
.sr-final__appel--20 { padding: 0 28px 0 22px; font-size: var(--fs-20); }
.sr-final__contact { padding: 0 32px; font-size: var(--fs-17); font-weight: 700; }
.sr-final__email { font-size: var(--fs-15); color: var(--on-dark-300); text-decoration: none; }
.sr-final__email:hover { color: var(--on-dark-300); }

/* Pied de page -------------------------------------------------------------- */
.sr-pied {
  padding-top: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  font-size: var(--fs-15);
}
.sr-final--sans-appel .sr-pied { padding-top: 0; }
.sr-pied__marque { display: flex; flex-direction: column; gap: 20px; }
.sr-pied__plaque {
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--white);
}
.sr-pied__plaque img { height: var(--logo-footer-h); width: auto; }
.sr-pied__phrase { max-width: 300px; line-height: var(--lh-body); color: var(--on-dark-300); }
.sr-pied__colonne { display: flex; flex-direction: column; gap: 12px; }
.sr-pied__titre { margin-bottom: 4px; font-weight: 600; color: var(--white); }
.sr-pied__adresse { line-height: var(--lh-body); color: var(--on-dark-300); }
.sr-pied__adresse span:not(.sr-pied__virgule) { display: block; }
.sr-pied__virgule { display: none; }
.sr-pied__tel, .sr-pied__tel:hover { color: var(--white); font-weight: 600; text-decoration: none; }
.sr-pied__lien, .sr-pied__lien:hover { color: var(--on-dark-300); text-decoration: none; }
.sr-pied__copyright {
  grid-column: 1 / -1;
  margin-top: var(--sp-4);
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-14);
  color: var(--muted-dark);
}

/* Tablette */
@media (max-width: 1023px) {
  .sr-final__bloc { flex-wrap: wrap; }
  .sr-pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Barre d'appel collée en bas de l'écran (téléphone) -------------------------- */
.sr-barre-appel {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: var(--sp-1);
  padding: 10px 12px 22px;
  background: var(--white);
  box-shadow: var(--shadow-callbar);
}
.sr-barre-appel__appel { flex: 1 1 auto; width: auto; }
.sr-barre-appel__ecrire {
  flex: 0 0 52px;
  height: var(--btn);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  color: var(--navy-900);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) ease;
}
.sr-barre-appel__ecrire:hover { color: var(--navy-900); }

/* Téléphone ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sr-final { padding: var(--sp-8) 0 var(--sp-6); }
  .sr-final--accueil { padding-top: 72px; }
  .sr-final__bloc {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .sr-final__bloc--accueil { gap: 20px; }
  .sr-final__titre { font-size: var(--fs-32); line-height: 1.08; letter-spacing: var(--ls-display); }
  .sr-final__texte { font-size: var(--fs-16); }
  .sr-final__boutons,
  .sr-final__bloc--contrats .sr-final__boutons { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 6px; }
  .sr-final__boutons .btn { width: 100%; }
  .sr-final__appel, .sr-final__appel--20, .sr-final__appel-xl {
    order: -1;
    height: var(--btn-lg);
    padding: 0;
    gap: 12px;
    font-size: var(--fs-20);
  }
  .sr-final__appel-xl svg { width: 20px; height: 20px; }
  .sr-final__bloc--accueil .sr-final__boutons { margin-top: var(--sp-1); }
  .sr-final__secondaire { height: var(--btn); }
  .sr-final__contact { height: var(--btn); font-size: var(--fs-16); }

  .sr-pied {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--line-dark);
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .sr-final--sans-appel .sr-pied { margin-top: 0; padding-top: 0; border-top: 0; }
  .sr-pied__plaque { padding: 10px 14px; }
  .sr-pied__contact { gap: var(--sp-1); }
  .sr-pied__adresse span:not(.sr-pied__virgule) { display: inline; }
  .sr-pied__virgule { display: inline; }
  .sr-pied__pages, .sr-pied__legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sr-pied__legal { margin-top: -16px; } /* les 6 liens forment une seule grille, comme dans l'export */
  .sr-pied__copyright { margin-top: 0; padding-top: 20px; font-size: var(--fs-13); }
}

/* Passage d'une page à l'autre en fondu (Gioele, 02.11.2026) ------------------
   L'ancienne page s'efface (0,16 s), la nouvelle apparaît en fondu en montant de 8 px (0,26 s).
   L'en-tête (logo, menu, numéro) et la barre d'appel du téléphone restent immobiles : le numéro
   n'est jamais caché. Navigateurs récents seulement (Chrome, Edge, Safari 18.2+) ; les autres
   changent de page comme avant. Rien si le visiteur a demandé de réduire les animations. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sr-entete { view-transition-name: sr-entete; }
  .sr-barre-appel { view-transition-name: sr-barre-appel; }
  ::view-transition-old(root) { animation: sr-page-sortie .16s var(--ease-ui) both; }
  ::view-transition-new(root) { animation: sr-page-entree .26s var(--ease-ui) both; }
  ::view-transition-group(sr-entete), ::view-transition-group(sr-barre-appel),
  ::view-transition-old(sr-entete), ::view-transition-new(sr-entete),
  ::view-transition-old(sr-barre-appel), ::view-transition-new(sr-barre-appel) { animation: none; }
  ::view-transition-old(sr-entete), ::view-transition-old(sr-barre-appel) { display: none; }
}
@keyframes sr-page-sortie { to { opacity: 0; } }
@keyframes sr-page-entree { from { opacity: 0; transform: translateY(8px); } }

/* Photo dans le bandeau d'appel final (Gioele, 02.11.2026) -------------------
   « Photos du site » → « Photo du bandeau d'appel » (sinon la Photo Histoire). La photo couvre
   toute la largeur, du haut du bloc sombre jusqu'au trait qui le sépare du pied de page, très
   assombrie (plus foncée côté texte) et effacée vers le bas : le pied de page reste bleu nuit uni. */
.sr-final { --final-haut: 112px; overflow-x: clip; isolation: isolate; }
.sr-final__bloc--photo { position: relative; }
.sr-final__photo {
  position: absolute;
  top: calc(-1 * var(--final-haut));
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.sr-final__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%; /* l'horizon et le soleil du coucher de soleil sur le Léman */
  filter: brightness(.7) sepia(.3) saturate(1.4); /* assombrie mais dorée (un voile bleu rendait le soleil gris) */
}
.sr-final__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,31,58,.88) 0%, rgba(11,31,58,.88) 30%, rgba(11,31,58,.35) 62%, rgba(11,31,58,.1) 100%);
}
@media (max-width: 767px) {
  .sr-final { --final-haut: var(--sp-8); }
  .sr-final--accueil { --final-haut: 72px; }
  .sr-final__photo { bottom: -24px; }
  .sr-final__photo::after { background: linear-gradient(180deg, rgba(11,31,58,.5) 0%, rgba(11,31,58,.78) 100%); }
}