/* ==========================================================
   Trait Droit — plâtrerie, isolation, rénovation
   Univers : le tracé de chantier. Plâtre, ciment, cordeau bleu.
   Feuille unique, partagée par les cinq pages.
   ========================================================== */

:root{
  --platre:    #F7F7F4;
  --platre-2:  #EEEEE9;
  --ciment:    #1A1D1F;
  --ciment-2:  #474C50;
  --ciment-3:  #767C81;
  --trait:     #DDDDD6;
  --trait-2:   #C6C6BE;
  --cordeau:   #1B4FB3;
  --cordeau-2: #DCE6F8;
  --alerte:    #A8442A;

  --f-titre:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-texte:'Public Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --f-chiffre:'Roboto Mono',ui-monospace,Menlo,monospace;

  --marge: clamp(1.15rem, 4vw, 3rem);
  --coin: 2px;
}

@media (prefers-color-scheme: dark){
  :root{
    --platre:#131517; --platre-2:#1A1D20; --ciment:#EDEDE8; --ciment-2:#AEB3B7;
    --ciment-3:#858B90; --trait:#2A2E32; --trait-2:#3D4247;
    --cordeau:#7FA9F0; --cordeau-2:#16294D; --alerte:#E09277;
  }
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--platre); color:var(--ciment);
  font-family:var(--f-texte); font-size:clamp(1rem,0.3vw+0.95rem,1.08rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--f-titre); font-weight:700; line-height:1.05; letter-spacing:-0.025em; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--cordeau); outline-offset:2px; }

.zone{ width:min(75rem,100%); margin-inline:auto; padding-inline:var(--marge); }
.mesure{ max-width:36rem; }

.etiquette{
  font-family:var(--f-chiffre); font-size:0.7rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--cordeau); margin:0;
}
.chiffre{ font-family:var(--f-chiffre); font-variant-numeric:tabular-nums; }

/* ---------- Barre d'appel ---------- */

.appel{
  background:var(--ciment); color:var(--platre);
  font-family:var(--f-chiffre); font-size:0.74rem; letter-spacing:0.02em;
}
.appel .zone{ display:flex; flex-wrap:wrap; gap:0.3rem 1.2rem; justify-content:space-between; align-items:center; padding-block:0.55rem; }
.appel a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.appel a:hover{ border-bottom-color:currentColor; }
.appel .demo{ opacity:.6; }

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

.entete{
  position:sticky; top:0; z-index:50;
  background:var(--platre);
  border-bottom:1px solid var(--trait);
}
.entete .zone{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.9rem; }

.logo{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.logo svg{ width:26px; height:26px; flex:none; color:var(--cordeau); }
.logo .mot{ font-family:var(--f-titre); font-weight:700; font-size:1.12rem; letter-spacing:-0.03em; line-height:1; white-space:nowrap; }
.logo .sous{ display:block; font-family:var(--f-chiffre); font-weight:400; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ciment-3); margin-top:3px; }

.menu{ display:flex; align-items:center; gap:clamp(0.8rem,1.8vw,1.8rem); }
.menu a:not(.bouton){
  font-family:var(--f-texte); font-weight:500; font-size:0.92rem;
  text-decoration:none; color:var(--ciment-2);
  padding-block:0.3rem; border-bottom:2px solid transparent;
}
.menu a:not(.bouton):hover{ color:var(--ciment); border-bottom-color:var(--cordeau); }
.menu a[aria-current="page"]{ color:var(--ciment); border-bottom-color:var(--cordeau); }
@media (max-width:52rem){ .menu a:not(.bouton){ display:none; } }

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--f-titre); font-weight:600; font-size:0.92rem; letter-spacing:-0.01em;
  padding:0.7rem 1.2rem; border-radius:var(--coin); text-decoration:none; cursor:pointer;
  background:var(--cordeau); color:#fff; border:2px solid var(--cordeau);
  transition:background .15s ease, color .15s ease;
}
.bouton:hover{ background:var(--ciment); border-color:var(--ciment); color:var(--platre); }
.bouton--vide{ background:transparent; color:var(--ciment); border-color:var(--trait-2); }
.bouton--vide:hover{ background:var(--ciment); border-color:var(--ciment); color:var(--platre); }
.bouton--tel{ background:var(--ciment); border-color:var(--ciment); color:var(--platre); font-family:var(--f-chiffre); font-size:0.88rem; }
.bouton--tel:hover{ background:var(--cordeau); border-color:var(--cordeau); color:#fff; }

/* ---------- Sections ---------- */

.bloc{ padding-block:clamp(3rem,7vw,5.5rem); }
.bloc--trait{ border-top:1px solid var(--trait); }
.bloc--creux{ background:var(--platre-2); }

.titre-bloc{ display:grid; gap:0.9rem; margin-bottom:clamp(1.8rem,4vw,3rem); }
@media (min-width:56rem){ .titre-bloc{ grid-template-columns:minmax(0,1fr) minmax(0,22rem); gap:3rem; align-items:end; } }
.titre-bloc h2{ font-size:clamp(1.7rem,4vw,2.7rem); }
.titre-bloc p{ color:var(--ciment-2); }

/* ---------- Ouverture ---------- */

.ouverture{ position:relative; padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,6vw,4rem); overflow:hidden; }
.ouverture::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--trait) 1px, transparent 1px), linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.5;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}
.ouverture .zone{ position:relative; }
.ouverture h1{ font-size:clamp(2.3rem,6.6vw,4.4rem); margin-block:0.7rem 0; }
.ouverture h1 .bleu{ color:var(--cordeau); }
.ouverture .accroche{ margin-top:1.3rem; font-size:1.14em; color:var(--ciment-2); max-width:34rem; }
.actions{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:2rem; }

.preuves{ display:grid; gap:1.2rem; margin-top:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:40rem){ .preuves{ grid-template-columns:repeat(4,1fr); gap:1.5rem; } }
.preuve{ border-top:3px solid var(--cordeau); padding-top:0.8rem; }
.preuve .val{ font-family:var(--f-titre); font-weight:700; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-0.03em; display:block; }
.preuve .lib{ font-size:0.86rem; color:var(--ciment-2); display:block; margin-top:0.1rem; }

/* ---------- Cartes de service ---------- */

.grille{ display:grid; gap:1.2rem; }
@media (min-width:44rem){ .grille{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .grille--3{ grid-template-columns:repeat(3,1fr); } }

.carte{
  background:var(--platre); border:1px solid var(--trait); border-radius:var(--coin);
  padding:clamp(1.2rem,2.5vw,1.8rem); display:flex; flex-direction:column; gap:0.6rem;
  transition:border-color .15s ease, transform .15s ease;
}
.bloc--creux .carte{ background:var(--platre); }
.carte:hover{ border-color:var(--cordeau); transform:translateY(-2px); }
.carte h3{ font-size:1.2rem; }
.carte p{ color:var(--ciment-2); font-size:0.96rem; }
.carte ul{ margin:0; padding:0; list-style:none; display:grid; gap:0.3rem; font-size:0.92rem; color:var(--ciment-2); }
.carte li{ padding-left:1.1rem; position:relative; }
.carte li::before{ content:"—"; position:absolute; left:0; color:var(--cordeau); }
.carte .prix{ font-family:var(--f-chiffre); font-size:0.86rem; color:var(--ciment); margin-top:auto; padding-top:0.7rem; border-top:1px solid var(--trait); }

/* ---------- Comparateur avant / après ---------- */

.chantier{ display:grid; gap:1.5rem; padding-block:clamp(2rem,4vw,3rem); border-top:1px solid var(--trait); }
@media (min-width:60rem){ .chantier{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:3rem; align-items:center; } }
.chantier:first-of-type{ border-top:none; padding-top:0; }

.compare{ position:relative; border:1px solid var(--trait-2); border-radius:var(--coin); overflow:hidden; background:var(--platre-2); touch-action:pan-y; }
.compare .plan{ display:block; width:100%; height:auto; }
.compare .apres{ position:absolute; inset:0; width:100%; height:100%; clip-path:inset(0 0 0 50%); }
.compare .apres svg{ width:100%; height:100%; }
.poignee{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--cordeau);
  transform:translateX(-1px); pointer-events:none;
}
.poignee::after{
  content:""; position:absolute; top:50%; left:50%; width:38px; height:38px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--cordeau); border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.poignee::before{
  content:"◀ ▶"; position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%); color:#fff; font-size:9px; letter-spacing:1px;
  font-family:var(--f-chiffre);
}
.compare input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; z-index:3;
}
.compare .etiq{
  position:absolute; bottom:10px; font-family:var(--f-chiffre); font-size:0.66rem;
  letter-spacing:0.12em; text-transform:uppercase; padding:0.28rem 0.6rem; border-radius:var(--coin);
  background:rgba(26,29,31,.82); color:#F7F7F4; pointer-events:none;
}
.compare .etiq--g{ left:10px; }
.compare .etiq--d{ right:10px; }

.fiche h3{ font-size:clamp(1.35rem,2.6vw,1.8rem); }
.fiche .lieu{ font-family:var(--f-chiffre); font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--cordeau); margin-bottom:0.5rem; }
.fiche p{ color:var(--ciment-2); margin-top:0.8rem; }
.fiche dl{ display:grid; grid-template-columns:auto 1fr; gap:0.45rem 1.2rem; margin:1.3rem 0 0; font-size:0.93rem; }
.fiche dt{ font-family:var(--f-chiffre); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ciment-3); padding-top:0.15rem; }
.fiche dd{ margin:0; font-weight:500; }

/* ---------- Bandeau d'appel à l'action ---------- */

.rappel{ background:var(--ciment); color:var(--platre); }
.rappel .zone{ display:grid; gap:1.5rem; padding-block:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:56rem){ .rappel .zone{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3rem; } }
.rappel h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); }
.rappel p{ color:#B9BFC4; margin-top:0.6rem; max-width:34rem; }
.rappel .actions{ margin-top:0; }
.rappel .bouton--vide{ color:var(--platre); border-color:rgba(247,247,244,.35); }
.rappel .bouton--vide:hover{ background:var(--platre); color:var(--ciment); border-color:var(--platre); }

/* ---------- Formulaire ---------- */

.form{ display:grid; gap:1.1rem; }
.duo{ display:grid; gap:1.1rem; }
@media (min-width:34rem){ .duo{ grid-template-columns:1fr 1fr; } }
.champ{ display:grid; gap:0.35rem; }
.champ label{ font-family:var(--f-titre); font-weight:600; font-size:0.88rem; }
.champ .aide{ font-size:0.8rem; color:var(--ciment-3); }
.champ input,.champ select,.champ textarea{
  font-family:var(--f-texte); font-size:1rem; color:var(--ciment);
  background:var(--platre); border:1px solid var(--trait-2); border-radius:var(--coin);
  padding:0.75rem 0.85rem; width:100%;
}
.champ input:hover,.champ select:hover,.champ textarea:hover{ border-color:var(--ciment-3); }
.champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none; border-color:var(--cordeau); box-shadow:0 0 0 3px var(--cordeau-2); }
.champ textarea{ min-height:6.5rem; resize:vertical; }
.champ--erreur input,.champ--erreur textarea{ border-color:var(--alerte); }
.rgpd{ font-size:0.82rem; color:var(--ciment-3); }
.reponse{
  display:none; gap:0.7rem; align-items:flex-start; padding:0.9rem 1.1rem;
  border-radius:var(--coin); border:1px solid var(--cordeau); background:var(--cordeau-2);
  font-size:0.94rem;
}
.reponse[data-visible="true"]{ display:flex; }
.reponse[data-etat="erreur"]{ border-color:var(--alerte); background:transparent; color:var(--alerte); }
.pot-de-miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Coordonnées ---------- */

.coord{ display:grid; gap:1.4rem; }
.coord > div{ display:grid; gap:0.15rem; }
.coord dt{ font-family:var(--f-chiffre); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ciment-3); }
.coord dd{ margin:0; font-size:1.05rem; }
.coord a{ text-decoration:none; border-bottom:1px solid var(--trait-2); }
.coord a:hover{ border-bottom-color:var(--cordeau); }

/* ---------- Pied ---------- */

.pied{ background:var(--platre-2); border-top:1px solid var(--trait); padding-block:clamp(2.2rem,5vw,3.2rem); font-size:0.92rem; }
.pied-haut{ display:grid; gap:1.6rem; }
@media (min-width:52rem){ .pied-haut{ grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; } }
.pied h4{ font-family:var(--f-chiffre); font-weight:500; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--ciment-3); margin-bottom:0.65rem; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.4rem; }
.pied a{ color:var(--ciment-2); text-decoration:none; }
.pied a:hover{ color:var(--ciment); }
.pied-bas{
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--trait);
  font-family:var(--f-chiffre); font-size:0.7rem; color:var(--ciment-3);
  display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem; justify-content:space-between;
}

/* ---------- Page de texte (mentions) ---------- */

.texte{ max-width:44rem; display:grid; gap:1.5rem; }
.texte h2{ font-size:1.25rem; margin-top:1rem; }
.texte p{ color:var(--ciment-2); }

/* ---------- Apparitions ---------- */

.monte{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.monte[data-vu="true"]{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .monte{ opacity:1; transform:none; }
  .carte:hover{ transform:none; }
}

/* ---------- Ajustements petits écrans ---------- */
.menu .bouton{ white-space:nowrap; }
@media (max-width:30rem){
  .logo .sous{ display:none; }
  .entete .bouton{ padding:0.62rem 0.9rem; font-size:0.86rem; }
  .appel .zone{ font-size:0.68rem; }
}