/* ============================================================
   LS CONSTRUCTION — feuille de style principale
   ------------------------------------------------------------
   ⚑ CHARTE CLIENT : tout se règle dans le bloc :root ci-dessous.
     Changer les valeurs de couleur + les 3 familles de police
     suffit à rebrander le site entier. Rien d'autre à toucher.

   ⚑ PARTI PRIS (29/07/2026) — « le brut, sans habillage ».
     Le site a été épuré : plus de texture de béton, plus de ruban
     de chantier hachuré, plus de trame de plan, plus de cartes
     encadrées, plus de titres en contour. Ce qui reste tient en
     quatre matières : du blanc, un filet, une étiquette mono et
     les vraies photos de chantier.
     Une seule audace assumée sur tout le site : la vue drone 3D
     de l'accueil. Tout le reste doit rester silencieux autour.
     ⚠️ Avant d'ajouter un décor ici, vérifier qu'il dit quelque
        chose de vrai. Sinon, il n'a pas sa place.
   ============================================================ */

:root{
  /* ——— Couleurs ——————————————————————————————————————— */
  --blanc:        #FFFFFF;   /* dominante — 90 % des surfaces */
  --chaux:        #F3F4F1;   /* lait de chaux : UNE respiration par page */
  --beton:        #8B9096;   /* gris béton froid : texte tertiaire */
  --beton-fonce:  #4A5157;   /* texte courant */
  --graphite:     #131619;   /* titres, pied de page (jamais de noir pur) */
  --accent:       #F37B0F;   /* orange du logo LS. Trois emplois, pas un de plus :
                                bouton principal, page courante dans le menu,
                                filet de l'étiquette de section. */
  --accent-fonce: #C9620A;

  /* ——— Typographie ——————————————————————————————————— */
  --f-display: 'Archivo', 'Arial Black', sans-serif;      /* h1 et h2 SEULEMENT */
  --f-texte:   'Instrument Sans', system-ui, sans-serif;  /* lecture, sous-titres */
  --f-cote:    'JetBrains Mono', ui-monospace, monospace; /* données réelles */

  /* ——— Rythme ————————————————————————————————————————— */
  --marge:  clamp(1.25rem, 4vw, 4.5rem);
  --gouttiere: clamp(1.5rem, 2.6vw, 2.75rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --trait: color-mix(in srgb, var(--beton) 30%, transparent);
  --trait-fort: color-mix(in srgb, var(--beton) 58%, transparent);
  --rayon: 0px;              /* le gros œuvre n'a pas d'angles ronds */
  --entete-h: 74px;
}

/* ============================================================
   1. Reset & socle
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  background:var(--blanc);
  color:var(--beton-fonce);
  font-family:var(--f-texte);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.68;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--accent); color:var(--graphite); }

/* Display réservé aux deux premiers niveaux : au-delà, la police de
   lecture suffit. C'est ce qui fait taire la page.
   Deux voix, et pas une de plus : le TITRE DE PAGE (h1) est doux —
   casse normale, graisse moyenne, interlignage ouvert ; les TÊTES DE
   SECTION (h2) restent fermes, en capitales. Le contraste entre les
   deux suffit à structurer, sans que tout crie. */
h1,h2{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 100;
  margin:0;
  color:var(--graphite);
  text-wrap:balance;
}
h1{
  font-weight:500;
  font-size:clamp(2.05rem, 3.7vw, 3.3rem);
  line-height:1.14;
  letter-spacing:-.018em;
}
h2{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1.04;
  font-size:clamp(1.6rem, 3vw, 2.4rem);
}
h3,h4{
  font-family:var(--f-texte);
  font-weight:600; font-size:1.06rem; line-height:1.35;
  letter-spacing:-.005em; color:var(--graphite);
  margin:0; text-wrap:balance;
}
h4{ font-size:.95rem; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--graphite); font-weight:600; }

/* ============================================================
   2. Grille & conteneurs
   ============================================================ */
.enveloppe{
  width:min(100% - var(--marge)*2, 1240px);
  margin-inline:auto;
}
.enveloppe--etroite{ width:min(100% - var(--marge)*2, 760px); }

.bloc{ padding-block:var(--section-y); position:relative; }
.bloc--chaux{ background:var(--chaux); }
.bloc--serre{ padding-block:calc(var(--section-y) * .62); }
/* Deux sections qui se suivent sur le même fond : un filet, pas une bordure
   de section entière — c'est la seule séparation du site. */
.bloc + .bloc:not(.bloc--chaux):not(.appel){ border-top:1px solid var(--trait); }
/* après une bande de chaux, le changement de fond sépare déjà : un filet
   en plus ferait deux lignes au même endroit */
.bloc--chaux + .bloc{ border-top:0; }

/* ============================================================
   3. L'étiquette de section
   Un filet orange court, puis la donnée en mono. Elle ne sert
   qu'à nommer la section — jamais à décorer.
   ============================================================ */
.cote{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--f-cote);
  font-size:.7rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--beton);
  margin:0 0 1.15rem;
}
.cote::before{
  content:''; width:22px; height:1px; background:var(--accent); flex:none;
}

/* Donnée technique posée sur un visuel ou sous une photo */
.etiquette{
  font-family:var(--f-cote); font-size:.68rem; font-weight:500;
  letter-spacing:.09em; color:var(--beton);
}

/* ============================================================
   4. Boutons
   ============================================================ */
.bouton{
  --b-fond:var(--graphite); --b-texte:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.5rem;
  background:var(--b-fond); color:var(--b-texte);
  font-family:var(--f-texte); font-size:.94rem; font-weight:600;
  letter-spacing:0; text-decoration:none;
  border:1px solid var(--b-fond); border-radius:var(--rayon);
  cursor:pointer;
  transition:background .22s, color .22s, border-color .22s;
}
/* Orange de marque + texte graphite : 6,4:1 de contraste. Du blanc sur cet
   orange tomberait à 2,8:1. */
.bouton--accent{ --b-fond:var(--accent); --b-texte:var(--graphite); }
.bouton--accent:hover{ --b-fond:var(--accent-fonce); --b-texte:#fff; }
.bouton--vide{ --b-fond:transparent; --b-texte:var(--graphite); border-color:var(--trait-fort); }
.bouton--vide:hover{ --b-fond:var(--graphite); --b-texte:#fff; border-color:var(--graphite); }
.bouton__fleche{ transition:transform .22s; }
.bouton:hover .bouton__fleche{ transform:translateX(3px); }

/* Lien nu, à la place d'un troisième bouton */
.lien{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; text-decoration:none; color:var(--graphite);
  border-bottom:1px solid var(--accent); padding-bottom:.15rem;
  transition:color .2s, border-color .2s;
}
.lien:hover{ color:var(--accent-fonce); }

/* ============================================================
   5. En-tête
   ============================================================ */
.entete{
  position:sticky; top:0; z-index:60;
  height:var(--entete-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--blanc) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait);
}
.entete .enveloppe{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.logo{ display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none; }
.logo__marque{
  font-family:var(--f-display); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:1.1rem; letter-spacing:-.01em; text-transform:uppercase;
  line-height:1; color:var(--graphite);
}
.logo__marque em{ font-style:normal; color:var(--accent); }
/* Logo fourni par le client. Deux déclinaisons : logo-ls.png sur fond clair,
   logo-ls-blanc.png sur le pied graphite. Pour changer de logo : remplacer
   ces deux fichiers. */
.logo__img{ height:34px; width:auto; flex:none; }
@media (max-width:600px){ .logo__img{ height:29px; } }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav a{
  font-size:.9rem; font-weight:500;
  text-decoration:none; color:var(--beton-fonce);
  padding:.4rem 0; position:relative;
  transition:color .2s;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--accent);
  transition:width .25s ease;
}
.nav a:hover{ color:var(--graphite); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--graphite); font-weight:600; }

/* Le numéro dans l'en-tête : pour une entreprise de bâtiment, c'est le premier
   geste du visiteur. En chiffres monospacés, il se lit comme un numéro et non
   comme un mot de la navigation. */
.nav__tel{
  font-family:var(--f-cote); font-size:.85rem; font-weight:500;
  letter-spacing:.01em; white-space:nowrap; color:var(--graphite);
}
.nav__tel:hover{ color:var(--accent-fonce); }

.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--graphite); margin:5px 0; transition:transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:var(--entete-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--blanc); border-bottom:1px solid var(--trait);
    padding:.5rem var(--marge) 1.5rem;
    transform:translateY(-120%); transition:transform .35s cubic-bezier(.22,1,.36,1);
    max-height:calc(100dvh - var(--entete-h)); overflow-y:auto;
  }
  .nav[data-ouvert="true"]{ transform:translateY(0); }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--trait); font-size:1rem; }
  /* dans le menu déroulant, le numéro reste identifiable d'un coup d'œil */
  .nav__tel{ font-size:1.05rem; font-weight:600; }
  .nav a::after{ display:none; }
  .nav .bouton{ margin-top:1.2rem; justify-content:center; }
}
.nav .bouton{ color:var(--b-texte); }
.nav .bouton::after{ display:none; }

/* ============================================================
   6. Révélation au scroll — un seul mouvement sur tout le site
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--retard, 0ms);
}
[data-reveal].est-vu{ opacity:1; transform:none; }

/* ============================================================
   7. Listes à filets — remplacent les cartes encadrées
   Une ligne par ouvrage : le filet suffit à séparer, le cadre
   n'ajoutait qu'un contour de plus à regarder.
   ============================================================ */
.liste{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--trait);
}
.liste > li{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.4rem clamp(1.5rem,4vw,4rem);
  padding:1.5rem 0;
  border-bottom:1px solid var(--trait);
}
.liste h3{ margin:0; }
.liste p{ margin:0; font-size:1rem; }
.liste .etiquette{ display:block; margin-top:.45rem; }
@media (max-width:760px){
  .liste > li{ grid-template-columns:1fr; gap:.5rem; padding:1.3rem 0; }
}

/* Deux colonnes de texte : titre à gauche, chapô à droite */
.duo{
  display:grid; gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.duo--titre{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); margin-bottom:clamp(2.5rem,5vw,4rem); }
@media (max-width:860px){
  .duo, .duo--titre{ grid-template-columns:1fr; gap:1.5rem; }
  .duo--titre{ margin-bottom:2.5rem; }
}

.chapo{ font-size:clamp(1.04rem,1.3vw,1.16rem); max-width:60ch; }
.chapo strong{ font-weight:600; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.75rem,3vw,2.5rem); }

/* Photo pleine largeur + légende : le seul « visuel » du site en dehors
   de la vue drone. La légende est de l'information, pas un ornement. */
.planche-photo{ margin:0; }
.planche-photo img{ width:100%; object-fit:cover; }
.planche-photo figcaption{
  display:flex; flex-wrap:wrap; gap:.35rem 1.25rem;
  margin-top:.85rem;
  font-family:var(--f-cote); font-size:.68rem; letter-spacing:.09em;
  color:var(--beton);
}

/* ============================================================
   8. Pied de page
   ============================================================ */
.pied{
  background:var(--graphite); color:rgba(255,255,255,.72);
  padding-block:clamp(3rem,5vw,4.5rem) 1.75rem;
}
.pied a{ color:inherit; text-decoration:none; transition:color .2s; }
.pied a:hover{ color:#fff; }
.pied__haut{
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,200px), 1fr));
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.pied h4{
  color:rgba(255,255,255,.42); margin-bottom:1rem;
  font-family:var(--f-cote); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.94rem; }
.pied__bas{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  padding-top:1.5rem;
  font-family:var(--f-cote); font-size:.66rem; letter-spacing:.06em;
  color:rgba(255,255,255,.42);
}
.pied .logo__marque{ color:#fff; font-size:1.2rem; }
.pied .logo__img{ height:40px; }
.pied__mot{ margin-top:1rem; max-width:28ch; font-size:.94rem; }

/* ============================================================
   9. Utilitaires
   ============================================================ */
.saut-contenu{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--graphite); color:#fff; padding:.8rem 1.2rem;
  font-family:var(--f-cote); font-size:.78rem;
}
.saut-contenu:focus{ left:var(--marge); top:.6rem; }
.invisible{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ---------- Ouverture de page : étiquette, titre, chapô, photo ----------
   Le gabarit des pages internes : titre, chapô, puis une photo en 16/9
   sous le texte. Pas de marge basse — celle de la section suivante
   suffit, sinon les deux s'additionnent et la photo se met à flotter.
   (L'accueil a sa propre ouverture en deux colonnes : voir accueil.css.) */
.hero{ padding-block:clamp(3.5rem,8vw,7rem) 0; }
.hero h1{ max-width:26ch; }
.hero .chapo{ margin-top:1.6rem; }
.hero__photo{ margin-top:clamp(3rem,6vw,5rem); }
.hero__photo img{ aspect-ratio:16/9; }

/* Ouverture sans photo (contact, mentions légales) */
.ouverture h1{ max-width:24ch; }
.ouverture .chapo{ margin-top:1.5rem; }

/* ---------- Appel à l'action de fin de page ---------- */
.appel{ border-top:1px solid var(--trait); }
.appel__centre{ text-align:center; }
.appel__centre .cote{ justify-content:center; }
.appel__centre .chapo{ margin:1.5rem auto 0; }
.appel__centre .actions{ justify-content:center; }

/* Renvoi vers une fiche chantier : « ça, on l'a fait là » */
.renvoi{ margin:1.15rem 0 0; font-size:.92rem; }
.renvoi a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--graphite);
  border-bottom:1px solid var(--accent); padding-bottom:.15rem;
  transition:color .2s;
}
.renvoi a:hover{ color:var(--accent-fonce); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

/* === Crédit Aelvon === */
.credit-aelvon-row{width:100%;align-self:stretch;box-sizing:border-box;padding:14px 0 20px;text-align:center;line-height:1}
.credit-aelvon{display:inline-flex;align-items:center;gap:.5em;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.02em;opacity:.6;transition:opacity .2s ease;white-space:nowrap}
.credit-aelvon:hover{opacity:1}
.credit-aelvon img{height:19px;width:auto;display:block}