/* =====================================================================
   LARTIGUE ELECTRICITE · socle maison
   Univers : acier sombre, jaune de signalisation, grille rigoureuse,
   angles vifs, monospace pour tout ce qui est chiffre ou reference.
   Aucune requete externe. Polices systeme macOS uniquement.
   ===================================================================== */

:root{
  /* --- noms du socle maison --- */
  --nuit:#12171d;            /* acier tres sombre, fond dominant */
  --nuit-2:#1b222a;          /* second plan sombre */
  --croute:#f5b301;          /* jaune de signalisation, accent de marque */
  --croute-fonce:#c98a00;
  --ble:#8e9aa7;             /* gris acier, texte secondaire sur sombre */
  --ble-clair:#dde3e9;
  --papier:#eef1f4;          /* surface claire froide */
  --craie:#ffffff;           /* DOUBLE ROLE : surface claire ET texte sur fond sombre */
  --encre:#12171d;
  --encre-douce:#586470;
  --ligne:#d5dce2;
  --ligne-nuit:rgba(255,255,255,.14);

  /* --- extensions de cette demo --- */
  --alerte:#d63a2b;
  --alerte-fond:#fdecea;
  --vif:#1f6fd0;
  --ok:#2f7d4f;

  --titre:"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
  --sans:"Lucida Grande","Lucida Sans Unicode","Segoe UI",Tahoma,Geneva,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Menlo,Monaco,"Courier New",monospace;

  --large:1320px;
  --gouttiere:22px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--craie);
  color:var(--encre-douce);
  line-height:1.72;font-size:15px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--croute);color:var(--nuit)}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

h1,h2,h3,h4,h5{
  font-family:var(--titre);color:var(--encre);
  font-weight:800;letter-spacing:-.025em;line-height:1.08;text-transform:uppercase;
}
h1{font-size:clamp(2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.1vw,2.35rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.65rem)}
h4{font-size:1.05rem}
h5{font-size:.92rem;letter-spacing:-.01em}

.mono{font-family:var(--mono)}
.caps{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:500;
}
.jaune{color:var(--croute)}
.rouge{color:var(--alerte)}

/* --- apparition au defilement, garde-fou de 4 s cote JS --- */
html.anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
html.anim .reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.anim .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* --- ruban de securite, motif diagonal maison --- */
.ruban{
  height:8px;
  background:repeating-linear-gradient(-45deg,
    var(--croute) 0 14px, var(--nuit) 14px 28px);
}
.ruban-fin{height:4px}

/* =====================  TOPBAR  ===================== */
.topbar{background:var(--nuit);color:var(--ble);border-bottom:1px solid var(--ligne-nuit)}
.topbar-in{
  max-width:var(--large);margin:0 auto;padding:.5rem 1.6rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
}
.topbar b{color:var(--craie);font-weight:500}
.topbar .pastille{
  display:inline-block;width:7px;height:7px;background:var(--croute);
  margin-right:.5rem;vertical-align:middle;
}

/* =====================  HEADER  ===================== */
header{background:var(--craie);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--ligne)}
.nav{
  max-width:var(--large);margin:0 auto;padding:1rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.logo{text-decoration:none;display:flex;align-items:center;gap:.7rem;white-space:nowrap}
.logo-eclair{
  width:34px;height:34px;background:var(--nuit);
  display:flex;align-items:center;justify-content:center;flex:0 0 34px;
}
.logo-eclair svg{width:15px;height:15px;display:block}
.logo-txt{line-height:1}
.logo-txt b{
  display:block;font-family:var(--titre);font-weight:800;font-size:1.12rem;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--encre);
}
.logo-txt span{
  display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--encre-douce);margin-top:.22rem;
}
.nav-droite{display:flex;align-items:center;gap:1.6rem}
.nav-liens{display:flex;gap:1.35rem}
.nav-liens a{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--encre);padding:.3rem 0;border-bottom:2px solid transparent;
  transition:border-color .2s,color .2s;
}
.nav-liens a:hover{border-bottom-color:var(--croute)}
.nav-liens a.actif{border-bottom-color:var(--nuit);color:var(--encre)}
.burger{
  display:none;background:none;border:1px solid var(--ligne);cursor:pointer;
  padding:.5rem .7rem;line-height:1;
}
.burger i{display:block;width:18px;height:2px;background:var(--encre);margin:3px 0}

/* =====================  BOUTONS  ===================== */
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;text-align:center;
  background:var(--nuit);color:var(--craie);border:2px solid var(--nuit);
  padding:.8rem 1.5rem;border-radius:0;white-space:nowrap;
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--croute);border-color:var(--croute);color:var(--nuit)}
.btn-jaune{background:var(--croute);border-color:var(--croute);color:var(--nuit)}
.btn-jaune:hover{background:var(--nuit);border-color:var(--nuit);color:var(--craie)}
.btn-vide{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-vide:hover{background:var(--encre);color:var(--craie)}
.btn-vide-clair{background:transparent;color:var(--craie);border-color:rgba(255,255,255,.45)}
.btn-vide-clair:hover{background:var(--craie);color:var(--nuit);border-color:var(--craie)}
.btn[disabled],.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-large{display:block;width:100%}

/* =====================  SECTIONS  ===================== */
section{position:relative}
.sec-in{max-width:var(--large);margin:0 auto;padding:4.6rem 1.6rem}
.sec-serree{padding-top:3rem;padding-bottom:3rem}
.sombre{background:var(--nuit);color:var(--ble)}
.sombre h1,.sombre h2,.sombre h3,.sombre h4,.sombre h5{color:var(--craie)}
.gris{background:var(--papier)}

.tete{margin-bottom:2.8rem;max-width:46rem}
.tete .caps{color:var(--croute-fonce);display:block;margin-bottom:.9rem}
.sombre .tete .caps{color:var(--croute)}
.tete p{margin-top:1rem;font-size:.95rem;max-width:40rem}
.tete-centre{margin-left:auto;margin-right:auto;text-align:center}
.tete-centre p{margin-left:auto;margin-right:auto}

/* =====================  PIED DE PAGE  ===================== */
footer{background:var(--nuit);color:var(--ble)}
.foot-in{
  max-width:var(--large);margin:0 auto;padding:3.8rem 1.6rem 2.8rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.6rem;
}
footer h6{
  color:var(--craie);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;margin-bottom:1.1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--ligne-nuit);
}
footer p{font-size:.83rem;line-height:1.85}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--croute)}
footer ul{list-style:none}
footer ul li{padding:.32rem 0;font-size:.83rem}
.foot-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-bottom:1.1rem}
.foot-logo .logo-eclair{background:var(--croute)}
.foot-logo .logo-txt b{color:var(--craie)}
.foot-logo .logo-txt span{color:var(--ble)}
.foot-tel{
  font-family:var(--mono);font-size:1.25rem;color:var(--craie);letter-spacing:.02em;
  display:block;margin:.5rem 0 .2rem;
}
.foot-bas{border-top:1px solid var(--ligne-nuit)}
.foot-bas-in{
  max-width:var(--large);margin:0 auto;padding:1.2rem 1.6rem;
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--ble);
}
.foot-bas-in .fictif{color:var(--croute)}

/* =====================  BLOCS COMMUNS  ===================== */
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gouttiere)}
.grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gouttiere)}

.fiche{background:var(--craie);border:1px solid var(--ligne);position:relative}
.sombre .fiche{background:var(--nuit-2);border-color:var(--ligne-nuit)}
.fiche-corps{padding:1.5rem 1.4rem 1.6rem}
.fiche h5{margin-bottom:.5rem}
.fiche p{font-size:.86rem}
.fiche img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fiche .num{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--croute-fonce);
  display:block;margin-bottom:.55rem;
}

/* chiffres en bandeau */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ligne-nuit)}
.chiffre{padding:2.1rem 1.4rem;border-right:1px solid var(--ligne-nuit)}
.chiffre:last-child{border-right:none}
.chiffre b{
  display:block;font-family:var(--mono);font-size:2.1rem;font-weight:500;
  color:var(--craie);line-height:1;letter-spacing:-.02em;
}
.chiffre span{
  display:block;margin-top:.7rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ble);
}

/* tableau technique */
.tableau{width:100%;border-collapse:collapse;font-size:.85rem}
.tableau th,.tableau td{
  text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--ligne);vertical-align:top;
}
.tableau th{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre);font-weight:500;background:var(--papier);
}
.tableau td.prix{font-family:var(--mono);white-space:nowrap;color:var(--encre)}
.tableau tr:last-child td{border-bottom:none}
.table-enveloppe{overflow-x:auto;max-width:100%;border:1px solid var(--ligne);background:var(--craie)}
/* Aucune grille ne doit pouvoir gonfler au-dela de l'ecran a cause de son contenu. */
.grille-2 > *,.grille-3 > *,.grille-4 > *{min-width:0}

/* etiquettes */
.etiq{
  display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .6rem;border:1px solid var(--ligne);
  color:var(--encre-douce);background:var(--craie);white-space:nowrap;
}
.etiq-jaune{background:var(--croute);border-color:var(--croute);color:var(--nuit)}
.etiq-rouge{background:var(--alerte);border-color:var(--alerte);color:var(--craie)}
.etiq-nuit{background:var(--nuit);border-color:var(--nuit);color:var(--craie)}
.etiq-ok{background:var(--ok);border-color:var(--ok);color:var(--craie)}

/* encadre d'avertissement */
.avert{
  border-left:4px solid var(--alerte);background:var(--alerte-fond);
  padding:1.1rem 1.3rem;font-size:.87rem;color:#7c2018;
}
.avert b{color:#5d1712}
.note{
  border-left:4px solid var(--croute);background:#fff8e6;
  padding:1.1rem 1.3rem;font-size:.87rem;color:#6b5100;
}

/* fil d'ariane / bandeau de page */
.bandeau-page{background:var(--nuit);color:var(--ble);position:relative;overflow:hidden}
.bandeau-page .sec-in{padding-top:3.4rem;padding-bottom:3.4rem;position:relative;z-index:2}
.bandeau-page h1{color:var(--craie);max-width:22ch}
.bandeau-page p{margin-top:1rem;max-width:44rem;font-size:.95rem}
.bandeau-page .fil{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--croute);margin-bottom:1.1rem;
}
.bandeau-page .fil a{text-decoration:none;color:var(--ble)}
.bandeau-page .fond{
  position:absolute;inset:0;opacity:.2;object-fit:cover;width:100%;height:100%;z-index:1;
}

/* =====================  RESPONSIF  ===================== */
@media(max-width:1000px){
  .grille-4{grid-template-columns:repeat(2,1fr)}
  .grille-3{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:repeat(2,1fr)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .chiffre:nth-child(2n){border-right:none}
  .chiffre{border-bottom:1px solid var(--ligne-nuit)}
}
@media(max-width:820px){
  .nav{gap:.8rem}
  .nav-droite .btn{padding:.6rem .85rem;font-size:.62rem;letter-spacing:.08em}
  .nav-liens{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--craie);border-bottom:1px solid var(--ligne);
    flex-direction:column;gap:0;padding:.4rem 1.6rem 1rem;
  }
  .nav-liens.ouvert{display:flex}
  .nav-liens a{padding:.75rem 0;border-bottom:1px solid var(--ligne)}
  .nav-liens a:hover{border-bottom-color:var(--croute)}
  header{position:relative}
  .nav{position:relative}
  .burger{display:block}
  .nav-droite{gap:.7rem}
}
@media(max-width:700px){
  body{font-size:14.5px}
  .sec-in{padding:3.2rem 1.15rem}
  .grille-3,.grille-2,.grille-4{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:2rem;padding:3rem 1.15rem 2.2rem}
  .chiffres{grid-template-columns:1fr}
  .chiffre{border-right:none}
  .topbar-in{padding:.5rem 1.15rem;font-size:.63rem;gap:.5rem;justify-content:center;text-align:center}
  .nav{padding:.85rem 1.15rem}
  .nav-liens{padding-left:1.15rem;padding-right:1.15rem}
  .foot-bas-in{padding:1.1rem 1.15rem;justify-content:center;text-align:center}
  .tete{margin-bottom:2rem}
}
/* Sous 620 px, l'en-tete se reduit a l'essentiel : le logo raccourci,
   le bouton d'urgence et le burger doivent tenir sur une seule ligne. */
@media(max-width:620px){
  .nav{gap:.6rem}
  .logo{gap:.5rem}
  .logo-eclair{width:30px;height:30px;flex:0 0 30px}
  .logo-txt b{font-size:.98rem}
  .logo-txt span{display:none}
  .nav-droite{gap:.5rem;min-width:0}
  .nav-droite .btn{
    padding:.55rem .7rem;font-size:.58rem;letter-spacing:.05em;
    overflow:hidden;text-overflow:ellipsis;max-width:9.5rem;
  }
  .burger{padding:.45rem .55rem}
  .burger i{width:16px}
}
/* Sous 430 px, le bouton d'en-tete disparait : il est repris en grand
   dans le hero et dans le pied de page, il n'a pas besoin d'etre ici. */
@media(max-width:430px){
  .nav-droite .btn{display:none}
}
@media(max-width:400px){
  .sec-in{padding-left:1rem;padding-right:1rem}
  .nav{padding-left:1rem;padding-right:1rem}
  .topbar-in{padding-left:1rem;padding-right:1rem}
  .foot-in{padding-left:1rem;padding-right:1rem}
  .foot-bas-in{padding-left:1rem;padding-right:1rem}
  .logo-txt b{font-size:.95rem}
  .btn{padding:.75rem 1rem;font-size:.66rem;letter-spacing:.08em}
}