/* LB RENOV SA : base commune. Charte de l'entreprise (offre AN-01830) : noir, blanc,
   turquoise #087888 exact, Poppins. Le turquoise sur noir ne fait que 3,6:1 : il sert aux
   aplats (texte blanc dessus), aux filets et aux grands textes, jamais au petit texte sur noir. */
@import url("fonts.css");

:root {
  --nuit: #111111;
  --anthracite: #1b1b1b;
  --graphite: #404040;
  --acier: #8f8f8c;
  --trait: rgba(255, 255, 255, .14);
  --platre: #ffffff;
  --gris-clair: #f3f3f2;
  --blanc: #ffffff;
  --texte: #f3f3f2;
  --texte-doux: #adadaa;
  --encre: #111111;
  --encre-douce: #6b6b6b;
  --filet-clair: #d9d9d6;
  --accent: #087888;
  --accent-sombre: #065f6c;
  --sur-accent: #ffffff;
  --reflet: var(--accent);
  --lien: var(--texte);

  --police: "LB Poppins", "Poppins", system-ui, sans-serif;
  --gouttiere: clamp(1rem, 4vw, 3.5rem);
  --max: 86rem;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --rayon: 2px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 200; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; }

::selection { background: var(--accent); color: var(--sur-accent); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: var(--rayon); }
html { scrollbar-color: var(--graphite) var(--nuit); scrollbar-width: thin; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .6rem 1rem;
  background: var(--accent); color: var(--sur-accent); font-weight: 500; text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--sortie);
}
.evitement:focus { transform: none; }

.cadre { width: min(100% - 2 * var(--gouttiere), var(--max)); margin-inline: auto; }

/* Libellés en capitales espacées, comme la devise du logo */
.capitales {
  font-size: .75rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  line-height: 1.4;
}
.filet {
  display: block; height: 1px; width: 100%;
  background: var(--reflet);
}

/* Boutons */
.bouton {
  --fond: var(--accent); --encre-bouton: var(--sur-accent); --survol: var(--blanc); --encre-survol: var(--encre);
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  min-height: 3.25rem; padding: .85rem 1.6rem;
  background: var(--fond); color: var(--encre-bouton);
  font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: var(--rayon); cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--sortie);
}
.bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--survol);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--sortie);
}
.bouton:focus-visible { color: var(--encre-survol); }
.bouton:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.bouton svg { width: 1.1rem; height: 1.1rem; transition: transform .45s var(--sortie); }
@media (hover: hover) {
  .bouton:hover { color: var(--encre-survol); }
  .bouton:hover::before { transform: scaleX(1); transform-origin: left; }
  .bouton:hover svg { transform: translateX(.25rem); }
}
.bouton--contour {
  --fond: transparent; --encre-bouton: var(--texte); --survol: var(--texte); --encre-survol: var(--nuit);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

/* Lien fléché, filet laiton */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.75rem;
  color: var(--lien); text-decoration: none; font-size: .8125rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.lien-fleche::after { content: ""; width: 3.25rem; height: 2px; background: var(--accent); transform: scaleX(.62); transform-origin: left; transition: transform .5s var(--sortie); margin-right: -1.25rem; }
.chantiers__suite { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* En-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50; background: var(--nuit);
  transition: transform .6s var(--sortie);
}
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.entete__rangee {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: 5.5rem; transition: height .5s var(--sortie);
}
.entete.est-replie .entete__rangee { height: 4.5rem; }
.entete.est-cache { transform: translateY(-100%); }
.entete__logo { display: flex; align-items: center; flex: none; color: var(--blanc); text-decoration: none; }
.entete__logo .logo-h { height: 3.25rem; width: auto; transition: height .5s var(--sortie); }
.entete.est-replie .logo-h { height: 2.65rem; }
.entete__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.entete__nav a:not(.bouton) {
  position: relative; font-size: .8125rem; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--texte-doux);
  transition: color .3s;
}
.entete__nav a:not(.bouton)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1px;
  background: var(--reflet); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--sortie);
}
.entete__tel { font-variant-numeric: tabular-nums; }
.entete .bouton { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .75rem; }
.entete__nav a[aria-current="page"] { color: var(--texte); }
.entete__nav a[aria-current="page"]::after { transform: scaleX(1); }
.entete__menu {
  display: none; position: relative; width: 2.75rem; height: 2.75rem; padding: 0; margin-left: -.25rem;
  background: transparent; border: 0; cursor: pointer; border-radius: var(--rayon);
}
.entete__menu-traits { position: absolute; inset: 0; display: grid; place-content: center; gap: 7px; }
.entete__menu-traits span { display: block; width: 1.5rem; height: 1.5px; background: var(--texte); transition: transform .5s var(--sortie); }
.entete__menu[aria-expanded="true"] .entete__menu-traits span:first-child { transform: translateY(4.25px) rotate(45deg); }
.entete__menu[aria-expanded="true"] .entete__menu-traits span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 80rem) { .entete__logo .logo-h { height: 2.65rem; } }
@media (max-width: 72rem) { .entete__tel { display: none; } }

@media (max-width: 62rem) {
  .entete__nav a:not(.bouton) { display: none; }
  .entete__nav { gap: .75rem; }
  .entete__menu { display: block; }
}
@media (max-width: 36rem) {
  .entete__logo .logo-h, .entete.est-replie .logo-h { height: 2.3rem; }
  .entete__nav > .bouton { display: none; }
}

/* Menu plein écran (téléphone et tablette) */
.menu { position: fixed; inset: 0; z-index: 45; overflow-y: auto; background: var(--nuit); padding: 6.5rem 0 2.5rem; }
.menu__nav { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; gap: 3rem; }
.menu__liste { border-top: 1px solid var(--trait); }
.menu__liste li { border-bottom: 1px solid var(--trait); }
.menu__liste a {
  display: block; padding: .9rem 0; font-size: clamp(2rem, 1.2rem + 4vw, 3rem); font-weight: 200; letter-spacing: -.03em;
  line-height: 1.1; text-decoration: none; color: var(--texte);
}
.menu__liste a[aria-current="page"] { color: var(--accent); }
.menu__pied { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.menu__pied .bouton { margin-bottom: 1rem; }
.menu__tel { color: var(--texte-doux); text-decoration: none; font-variant-numeric: tabular-nums; }
.menu.est-ouvert .menu__liste li { animation: menu-entre .9s var(--sortie) backwards; }
.menu.est-ouvert .menu__liste li:nth-child(2) { animation-delay: 50ms; }
.menu.est-ouvert .menu__liste li:nth-child(3) { animation-delay: 100ms; }
.menu.est-ouvert .menu__liste li:nth-child(4) { animation-delay: 150ms; }
.menu.est-ouvert .menu__liste li:nth-child(5) { animation-delay: 200ms; }
.menu.est-ouvert { animation: menu-fond .5s var(--sortie) backwards; }
@keyframes menu-entre { from { opacity: 0; transform: translateX(-1.5rem); } }
@keyframes menu-fond { from { clip-path: inset(0 0 100% 0); } }

/* Transitions entre pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-old(root) { animation: vt-sort .35s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-entre .75s var(--sortie) both; }
@keyframes vt-sort { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(20px); } }

/* Pied de page */
.pied { padding-block: clamp(4rem, 9vw, 7rem) 2rem; background: var(--nuit); border-top: 1px solid var(--trait); }
.pied__grille { display: grid; gap: 3rem 2rem; grid-template-columns: 1.4fr repeat(4, 1fr); }
.pied__cartes { margin-top: .9rem; }
.pied__cartes li + li { margin-top: .35rem; }
.pied .pied__itineraire { color: var(--texte); font-size: .875rem; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.pied__showroom { margin-top: .6rem; font-size: .8125rem; color: var(--texte-doux); }
.pied .logo { width: 11rem; color: var(--blanc); }
.pied__baseline { margin-top: 1.5rem; max-width: 15rem; font-size: .9375rem; line-height: 1.5; color: var(--texte-doux); }
main:has(.appel) ~ .pied .pied__baseline { display: none; }
.pied h2 { display: flex; align-items: center; gap: .7rem; font-size: .75rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--texte); margin-bottom: 1.1rem; line-height: 1.4; }
.pied h2::before { content: ""; flex: none; width: 1.25rem; height: 2px; background: var(--accent); }
.pied li + li { margin-top: .45rem; }
.pied a { text-decoration: none; color: var(--texte-doux); transition: color .3s; }
.pied address { font-style: normal; color: var(--texte-doux); }
.pied__bas {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--trait);
  font-size: .8125rem; color: var(--acier);
}
@media (max-width: 62rem) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .pied__grille { grid-template-columns: 1fr; } }

/* Bandeau d'appel au devis */
/* Contexte clair (fond blanc ou gris clair) : les composants reprennent l'encre noire */
.clair, .appel, .rubrique--claire, .rubrique--grise {
  --texte: var(--encre); --texte-doux: var(--encre-douce); --acier: var(--encre-douce); --trait: var(--filet-clair);
  --anthracite: var(--gris-clair); --lien: var(--accent);
  color: var(--texte);
}
.clair .bouton, .appel .bouton, .rubrique--claire .bouton, .rubrique--grise .bouton { --survol: var(--encre); --encre-survol: var(--blanc); }
.clair .bouton--contour, .appel .bouton--contour, .rubrique--claire .bouton--contour, .rubrique--grise .bouton--contour {
  --encre-bouton: var(--encre); --survol: var(--encre); --encre-survol: var(--blanc); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35);
}

.appel { position: relative; padding-block: clamp(5rem, 12vw, 10rem); background: var(--blanc); overflow: hidden; }
.appel h2 { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 5.25rem); max-width: 15ch; }
.appel h2 strong { font-weight: 600; }
.appel p { max-width: 46ch; margin-top: 1.5rem; color: var(--encre-douce); }
.appel__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.appel__horaires { margin-top: 2rem; font-size: .9375rem; color: var(--encre-douce); }

/* Révélations : contenu visible par défaut, l'animation part d'un état visible */
.js [data-revele] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Héros commun : texte animé en CSS (pas de JS au-dessus de la ligne de flottaison) */
.heros { position: relative; min-height: 100svh; padding-top: 7.5rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.heros h1 { font-size: clamp(2.6rem, 1.1rem + 5.2vw, 6rem); max-width: 12ch; }
.heros h1 strong { font-weight: 600; }
.heros__baseline { display: flex; align-items: center; gap: 1rem; max-width: 32ch; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: clamp(1.1rem, .85rem + .9vw, 1.6rem); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--texte); }
.heros__baseline::before { content: ""; flex: none; width: clamp(1.75rem, 3.5vw, 3rem); height: 2px; background: var(--accent); }
.heros__baseline + .heros__chapo { margin-top: clamp(1rem, 2vw, 1.5rem); }
.heros__chapo { max-width: 44ch; margin-top: clamp(1.5rem, 3vw, 2.25rem); color: var(--texte-doux); }
.heros__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(2rem, 4vw, 3rem); }
.heros__preuve { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2.5rem; color: var(--texte-doux); }
.heros__preuve li { display: flex; align-items: center; gap: .6rem; font-size: .875rem; }
.heros__preuve li::before { content: ""; width: 1.25rem; height: 1px; background: var(--reflet); }
.entree { animation: entree 1.3s var(--sortie) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes entree { from { opacity: 0; transform: translateY(26px); } }

/* Titres de section */
.titre-section { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.5rem); max-width: 16ch; }
.titre-section strong, .chantiers h2 strong, .entreprise h2 strong { font-weight: 600; }

/* Chantiers filmés */
.chantiers { padding-block: clamp(5rem, 11vw, 9rem); }
.chantiers__tete { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; }
.chantiers h2 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.5rem); max-width: 14ch; }
.chantiers__tete p { color: var(--texte-doux); max-width: 42ch; }
.chantiers__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.chantier__media { position: relative; aspect-ratio: 608 / 864; overflow: hidden; background: var(--anthracite); border-radius: var(--rayon); }
.chantier__media video, .chantier__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.chantier h3 { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.chantier p { margin-top: .4rem; font-size: .9375rem; color: var(--texte-doux); }
.chantier:nth-child(even) { margin-top: clamp(0rem, 6vw, 5rem); }
@media (max-width: 56rem) {
  .chantiers__tete { grid-template-columns: 1fr; }
  .chantiers__liste { grid-template-columns: 1fr 1fr; }
}

/* Entreprise */
.entreprise { padding-block: clamp(5rem, 11vw, 9rem); background: var(--anthracite); }
.entreprise__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.entreprise__photo { border-radius: var(--rayon); overflow: hidden; }
.entreprise__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 50%; }
.entreprise h2 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4rem); max-width: 14ch; }
.entreprise__texte > p { margin-top: 1.5rem; color: var(--texte-doux); max-width: 50ch; }
.engagements { margin-top: 2.5rem; border-top: 1px solid var(--trait); }
.engagements li { padding-block: 1.05rem; border-bottom: 1px solid var(--trait); color: var(--texte-doux); }
.engagements span { color: var(--texte); font-weight: 400; }
.entreprise__plomb { display: inline-flex; align-items: center; gap: .75rem; margin-top: 2rem !important; color: var(--texte) !important; font-size: .9375rem; }
.entreprise__plomb::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--accent); }
.fournisseurs { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; margin-top: clamp(4rem, 8vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--trait); color: var(--texte-doux); }
.fournisseurs ul { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 5vw, 4.5rem); }
.fournisseurs li { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 200; letter-spacing: .06em; color: var(--texte); }
@media (max-width: 56rem) { .entreprise__grille { grid-template-columns: 1fr; } }

@media (hover: hover) {
  .chantier:hover .chantier__media video { transform: scale(1.04); }
  .lien-fleche:hover::after { transform: scaleX(1); }
  .entete__nav a:not(.bouton):hover { color: var(--texte); }
  .entete__nav a:not(.bouton):hover::after { transform: scaleX(1); transform-origin: left; }
  .pied a:hover { color: var(--texte); }
}

/* Barre d'action fixe au téléphone */
.barre-mobile { display: none; }
@media (max-width: 62rem) {
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .6rem var(--gouttiere) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(17, 17, 17, .92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-top: 2px solid var(--accent);
    transform: translateY(110%); transition: transform .6s var(--sortie);
  }
  .barre-mobile.est-visible { transform: none; }
  .barre-mobile__appel {
    display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem;
    border-radius: var(--rayon); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); text-decoration: none; color: var(--texte);
  }
  .barre-mobile__appel svg { width: 1.15rem; height: 1.15rem; color: var(--accent); }
  .barre-mobile__appel > span { display: flex; flex-direction: column; line-height: 1.15; }
  .barre-mobile__label { font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
  .barre-mobile__etat { font-size: .6875rem; color: var(--texte-doux); }
  .barre-mobile__etat:empty { display: none; }
  .barre-mobile__devis { justify-content: center; min-height: 3.25rem; padding-inline: .75rem; font-size: .75rem; letter-spacing: .14em; white-space: nowrap; }
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .page-devis .barre-mobile { display: none; }
  .page-devis { padding-bottom: 0; }
}

/* Ouvert maintenant / fermé */
.ouverture { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .8125rem; color: var(--texte-doux); }
.ouverture:empty { display: none; }
.ouverture::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acier); flex: none; }
.ouverture.est-ouvert::before { background: #7fbf8e; box-shadow: 0 0 0 3px rgba(127, 191, 142, .18); }
.ouverture.est-ouvert { color: var(--texte); }
.ouverture--grand { margin: 0 0 1rem; font-size: .9375rem; }
.barre-mobile__etat.est-ouvert { color: #a6d8b1; }

/* Sélecteur de langue */
.langue {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2rem; padding: .25rem .5rem;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--rayon);
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-decoration: none; color: var(--texte-doux);
  transition: color .3s, border-color .3s;
}
.entete__nav a.langue::after { display: none; }
.langue--menu { min-height: 2.75rem; margin-top: .5rem; padding: .5rem .9rem; font-size: .8125rem; letter-spacing: .08em; }
@media (hover: hover) { .langue:hover { color: var(--texte); border-color: var(--accent); } }
@media (max-width: 62rem) { .entete__nav .langue:not(.langue--menu) { display: none; } }