/* Entreprise Patrick Laporte — direction visuelle pen.dev (ambre sur acier noir) */
:root{
  --ink:#0E1113; --ink-2:#14181B;
  --line:#2E363C;
  --fg:#F2F4F5; --fg-muted:#98A2A9; --fg-dim:#C7CFD4;
  --amber:#E8A33D;
  --paper:#F4F3F0;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --ctl-h:44px;                 /* hauteur commune : bouton devis + plaque logo */
  --plate-inset:2px;            /* retrait du logo dans sa plaque claire */
  --gutter:clamp(1.25rem,5vw,5rem);
  --max:1320px;
  --sec:clamp(3.5rem,9vw,6.9rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--f-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance; font-weight:700}
p{margin:0}
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}

/* eyebrow : filet ambre + libellé espacé */
.eyebrow{display:flex; align-items:center; gap:.75rem; font-family:var(--f-body);
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--amber); flex:none}

/* titres de section */
.h2{font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.08; letter-spacing:-.035em; color:var(--fg)}
.head{display:flex; flex-direction:column; gap:1.1rem; max-width:34ch; margin-bottom:clamp(2.2rem,5vw,3.25rem)}
.head p{color:var(--fg-muted); max-width:56ch}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; margin-bottom:clamp(2.2rem,5vw,3.25rem)}
.head-row .head{flex:1 1 clamp(18rem,42vw,32rem); max-width:none; margin-bottom:0}
.head-row .head .h2{max-width:22ch}
.seemore{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display);
  font-size:.94rem; font-weight:600; text-decoration:none; color:var(--fg); white-space:nowrap}
.seemore svg{color:var(--amber); flex:none}
.seemore:hover{color:var(--amber)}

/* boutons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-display);
  font-size:.94rem; font-weight:600; text-decoration:none; padding:1rem 1.75rem;
  border:1px solid transparent; border-radius:2px; cursor:pointer; line-height:1}
.btn-amber{background:var(--amber); color:var(--ink)}
.btn-amber:hover{background:#F2B457}
.btn-line{border-color:#4A545B; color:var(--fg); background:none}
.btn-line:hover{border-color:var(--amber); color:var(--amber)}
.btn-line svg{color:var(--amber)}
.btn-line:hover svg{color:var(--amber)}

/* ---------------- en-tête ---------------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(14,17,19,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:1.25rem; padding-block:1rem}
.retour{display:inline-flex; align-items:center; gap:.3rem; flex:none; text-decoration:none;
  white-space:nowrap;
  font-family:var(--f-display); font-size:.82rem; font-weight:600; color:var(--fg-muted);
  border:1px solid var(--line); border-radius:2px; padding:0 .7rem 0 .45rem; height:var(--ctl-h)}
.retour:hover{color:var(--fg); border-color:var(--amber)}
.brand{display:flex; align-items:center; gap:.85rem; text-decoration:none;
  margin-right:auto; flex:none}
.baseline{display:flex; flex-direction:column; justify-content:center; gap:2px;
  font-family:var(--f-body); font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; line-height:1.15}
.baseline span{font-size:.58rem; white-space:nowrap}
.baseline span:first-child{color:var(--fg-dim)}
.baseline span:last-child{color:var(--fg-muted)}
/* posée uniquement quand LOGO_MODE vaut "monogram" dans build.py */
.mark{width:var(--ctl-h); height:var(--ctl-h); flex:none; border-radius:2px; background:var(--amber);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700;
  font-size:1rem; letter-spacing:-.03em; color:var(--ink)}
.brand-txt{display:flex; flex-direction:column; gap:2px}
.brand-txt b{font-family:var(--f-display); font-size:.95rem; font-weight:700; letter-spacing:.09em; color:var(--fg)}
.brand-txt span{font-size:.58rem; letter-spacing:.17em; color:var(--fg-muted); white-space:nowrap}
.nav{display:flex; gap:1.6rem; flex:none}
.nav a{font-size:.88rem; color:var(--fg-muted); text-decoration:none; white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.topbar-tel{display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; flex:none;
  font-weight:600; text-decoration:none; color:var(--fg); white-space:nowrap}
.topbar-tel svg{color:var(--amber)}
.topbar .btn{height:var(--ctl-h); padding:0 1.35rem; font-size:.86rem; flex:none; white-space:nowrap}
/* Le bandeau ne doit jamais passer sur deux lignes : on retire par paliers,
   du moins utile au plus utile. L'ordre a été calé sur la largeur réelle des
   éléments, bouton « Accueil » des pages intérieures compris. */
@media(max-width:1500px){ .nav{gap:1.25rem} }
/* La baseline tient plus tôt sur l'accueil, qui n'a pas le bouton « Accueil ». */
@media(max-width:1440px){ .topbar.interieure .baseline{display:none} }
@media(max-width:1300px){ .baseline{display:none} }
@media(max-width:1400px){ .topbar-tel span{display:none} }
@media(max-width:1240px){ .nav{display:none} .topbar-tel span{display:inline} }
@media(max-width:820px){ .topbar-tel span{display:none} }
@media(max-width:700px){
  .topbar .wrap{gap:.6rem}
  .btn-devis span{display:none}
  .btn-devis{padding:0 .95rem}
  .retour span{display:none}
  .retour{padding:0 .45rem}
}

/* ---------------- hero ---------------- */
.hero{position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(30rem,72vh,41rem); overflow:hidden}
.hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,19,.94) 0%,rgba(14,17,19,.55) 62%,rgba(14,17,19,.92) 100%)}
.hero .inner{display:flex; flex-direction:column; gap:1.75rem; max-width:48rem}
.hero h1{font-size:clamp(2.5rem,7.4vw,4.9rem); line-height:1.02; letter-spacing:-.04em}
.hero p{max-width:40rem; font-size:clamp(1.02rem,1.9vw,1.2rem); line-height:1.6; color:var(--fg-dim)}
.hero p strong{display:block; margin-bottom:.45rem; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.32; letter-spacing:-.02em; color:var(--fg);
  text-wrap:balance}
.hero .actions{display:flex; flex-wrap:wrap; gap:.9rem}

/* ---------------- barre de chiffres ---------------- */
.stats{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding-block:1.9rem}
.stat{text-align:center}
.stat b{display:block; font-family:var(--f-display); font-size:clamp(1.4rem,3vw,1.9rem);
  font-weight:700; letter-spacing:-.03em; color:var(--amber); font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem; color:var(--fg-muted)}
@media(max-width:760px){ .stats .wrap{grid-template-columns:1fr 1fr; gap:1.4rem} }

/* ---------------- sections ---------------- */
section{padding-block:var(--sec)}
.sec-ink2{background:var(--ink-2)}

/* savoir-faire */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1.35rem}
.tile{position:relative; display:block; text-decoration:none; overflow:hidden;
  border:1px solid var(--line); border-radius:2px; background:var(--ink-2)}
.tile img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .55s ease}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1rem .9rem;
  background:linear-gradient(0deg,rgba(14,17,19,.93) 12%,rgba(14,17,19,0));
  font-family:var(--f-display); font-size:.92rem; font-weight:600;
  /* toujours sur le dégradé sombre de la photo : ne suit pas le thème de la section */
  color:#F2F4F5}
@media(max-width:1000px){ .tiles{grid-template-columns:1fr 1fr; gap:1rem} }

/* méthode */
/* trois étapes successives, séparées par un filet — l'ordre porte du sens */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line); padding-top:clamp(1.75rem,3vw,2.5rem)}
.step{display:flex; flex-direction:column; gap:.85rem;
  padding-inline:clamp(1.5rem,3vw,2.75rem); border-left:1px solid var(--line)}
.step:first-child{padding-left:0; border-left:0}
.step:last-child{padding-right:0}
.step .num{font-family:var(--f-display); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  color:var(--fg-muted); font-variant-numeric:tabular-nums}
/* l'icône se cale sur la première ligne du titre, pas au centre du bloc */
.step h3{display:flex; align-items:flex-start; gap:.6rem; font-size:1.14rem;
  letter-spacing:-.02em; color:var(--fg); line-height:1.25}
.step h3 svg{flex:none; color:var(--amber); margin-top:.12em}
.step p{color:var(--fg-muted); font-size:.96rem; max-width:34ch}
@media(max-width:860px){
  .steps{grid-template-columns:1fr; gap:clamp(1.75rem,4vw,2.25rem)}
  .step{padding:0; padding-top:clamp(1.5rem,3.5vw,2rem); border-left:0; border-top:1px solid var(--line)}
  .step:first-child{padding-top:0; border-top:0}
}

/* à propos */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.about .prose{display:flex; flex-direction:column; gap:1.15rem}
.about .prose p{color:var(--fg-muted)}
.pull{border-left:2px solid var(--amber); padding:.35rem 0 .35rem 1.25rem;
  font-family:var(--f-display); font-size:1.14rem; font-weight:600; color:var(--fg); letter-spacing:-.02em}
.checks{display:flex; flex-direction:column; gap:.8rem; margin-top:.35rem}
.check{display:flex; align-items:flex-start; gap:.7rem; font-size:.96rem; color:var(--fg-dim)}
.check svg{color:var(--amber); flex:none; margin-top:.2rem}
.about figure{position:relative; margin:0}
.about figure img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px}
.credit{position:absolute; left:0; bottom:0; background:rgba(14,17,19,.74);
  backdrop-filter:blur(4px); font-size:.66rem; letter-spacing:.05em; padding:.45rem .75rem;
  /* plaque sombre posée sur la photo : indépendante du thème de la section */
  color:#B9C1C6}
@media(max-width:900px){ .about{grid-template-columns:1fr} }

/* réalisations */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.card{display:block; text-decoration:none; border:1px solid var(--line); border-radius:2px;
  overflow:hidden; background:var(--ink-2)}
.card img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .55s ease}
.card:hover img{transform:scale(1.04)}
.card .meta{padding:1rem 1.15rem 1.2rem}
.card h3{font-size:1rem; letter-spacing:-.015em; color:var(--fg)}
.card span{display:block; margin-top:.3rem; font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-muted)}
@media(max-width:980px){ .grid{grid-template-columns:1fr 1fr; gap:1.1rem} }
@media(max-width:580px){ .grid{grid-template-columns:1fr} }

/* avis — un par vue, texte à gauche, photo ou note à droite */
.quote{margin:0; padding:0; background:none; border:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(13rem,19rem);
  gap:clamp(1.5rem,3.5vw,3rem); align-items:center}
.quote-txt{display:flex; flex-direction:column; gap:.95rem; max-width:72ch}
.quote-txt .stars{font-size:1.15rem}
.quote-txt p{font-size:1rem; line-height:1.65; color:var(--fg); text-wrap:pretty}
.quote footer{display:flex; align-items:baseline; flex-wrap:wrap; gap:.2rem .7rem; margin-top:.2rem}
.quote footer::before{content:""; width:26px; height:2px; background:currentColor;
  align-self:center; opacity:.45; flex:none}
.quote cite{font-style:normal; font-family:var(--f-display); font-weight:700;
  font-size:.95rem; color:var(--fg)}
.quote small{font-size:.78rem; letter-spacing:.06em; color:var(--fg-muted)}

.quote-media{display:block; width:100%; height:clamp(9.5rem,20vw,13rem);
  border-radius:2px; overflow:hidden; line-height:0}
.quote-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
a.quote-media:hover img{transform:scale(1.05)}

/* à défaut de photo : la note moyenne, sur pastille sombre */
.bloc-note{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; background:var(--ink); line-height:1.3; text-align:center; padding:1.5rem}
.bloc-note b{font-family:var(--f-display); font-size:clamp(2.1rem,4.2vw,2.9rem); font-weight:700;
  letter-spacing:-.04em; line-height:1; color:#E8A33D; font-variant-numeric:tabular-nums}
.bloc-note .stars{color:#E8A33D; font-size:1.35rem}
.bloc-note .stars .off{color:#5A4A2C}
.bloc-note small{font-size:.75rem; letter-spacing:.05em; color:#A9B0B5}

@media(max-width:820px){
  .quote{grid-template-columns:1fr; gap:1.35rem}
  .quote-media{height:clamp(9rem,40vw,13rem)}
}

/* contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.details{display:flex; flex-direction:column}
.detail{display:flex; align-items:center; gap:1.15rem; padding-block:1.4rem; border-bottom:1px solid var(--line)}
.detail:first-child{border-top:1px solid var(--line)}
.detail svg{color:var(--amber); flex:none}
.detail span{display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-muted)}
.detail b,.detail a{font-family:var(--f-display); font-size:1.05rem; font-weight:600;
  color:var(--fg); text-decoration:none; letter-spacing:-.01em}
.detail a:hover{color:var(--amber)}
form{display:flex; flex-direction:column; gap:1rem; background:var(--ink-2);
  border:1px solid var(--line); border-radius:2px; padding:clamp(1.35rem,3vw,2.1rem)}
label{display:block; margin-bottom:.4rem; font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted)}
input,textarea,select{width:100%; font:inherit; font-size:.95rem; color:var(--fg);
  background:var(--ink); border:1px solid var(--line); border-radius:2px; padding:.8rem .9rem}
input::placeholder,textarea::placeholder{color:#6D777D}
input:focus,textarea:focus,select:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:transparent}
textarea{min-height:130px; resize:vertical}
form .btn{justify-content:center; width:100%}
.form-note{font-size:.8rem; color:var(--fg-muted)}
@media(max-width:900px){ .contact{grid-template-columns:1fr} }

/* bandeau de rappel */
.cta-band{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.6rem; padding-block:clamp(2.2rem,5vw,3.2rem)}
.cta-band h2{font-size:clamp(1.5rem,3.4vw,2.15rem); letter-spacing:-.03em; color:var(--fg)}
.cta-band p{color:var(--fg-muted); margin-top:.5rem}
.cta-band .actions{display:flex; flex-wrap:wrap; gap:.9rem}

/* pied de page */
footer.site{background:var(--ink); border-top:1px solid var(--line); padding-block:2.4rem}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--fg-muted)}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--amber)}

/* ---------------- pages intérieures ---------------- */
.pagehead{background:var(--ink-2); border-bottom:1px solid var(--line); padding-block:clamp(2.4rem,6vw,3.8rem)}
.pagehead h1{font-size:clamp(2rem,5.4vw,3.4rem); letter-spacing:-.035em; margin-top:.9rem; color:var(--fg)}
.pagehead .lede{color:var(--fg-muted); margin-top:1rem; max-width:56ch}
.crumb{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-muted)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--amber)}

.galnav{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.6rem}
.galnav a{font-family:var(--f-display); font-size:.86rem; font-weight:600; text-decoration:none;
  padding:.6rem 1.05rem; border:1px solid var(--line); border-radius:2px; color:var(--fg-muted)}
.galnav a:hover{border-color:var(--amber); color:var(--fg)}
.galnav a[aria-current="page"]{background:var(--amber); border-color:var(--amber); color:var(--ink)}

.galgrid{columns:3; column-gap:1.35rem}
@media(max-width:980px){ .galgrid{columns:2; column-gap:1rem} }
@media(max-width:580px){ .galgrid{columns:1} }
.galgrid button{display:block; width:100%; padding:0; margin:0 0 1.35rem; line-height:0;
  border:1px solid var(--line); border-radius:2px; background:var(--ink-2);
  cursor:zoom-in; break-inside:avoid; overflow:hidden}
.galgrid button img{width:100%; height:auto; transition:opacity .35s ease}
.galgrid button:hover img{opacity:.78}

.lb{border:0; padding:0; width:100%; height:100%; max-width:100vw; max-height:100vh;
  background:rgba(8,10,11,.96); overscroll-behavior:contain; touch-action:pan-y}
.lb::backdrop{background:rgba(8,10,11,.96)}
.lb-inner{display:flex; align-items:center; justify-content:center; height:100%; padding:clamp(1rem,4vw,3rem)}
.lb img{max-width:100%; max-height:86vh; width:auto; height:auto; object-fit:contain;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.lb-btn{position:fixed; background:none; border:0; color:var(--fg); cursor:pointer;
  font-size:2.2rem; line-height:1; padding:.6rem .95rem; font-family:var(--f-display); opacity:.7}
.lb-btn:hover{opacity:1; color:var(--amber)}
.lb-prev{left:.3rem; top:50%; transform:translateY(-50%)}
.lb-next{right:.3rem; top:50%; transform:translateY(-50%)}
.lb-close{top:.4rem; right:.7rem; font-size:1.7rem}
.lb-count{position:fixed; bottom:1.1rem; left:50%; transform:translateX(-50%); color:var(--fg-muted);
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.15em; font-variant-numeric:tabular-nums}

/* ---------------- mentions légales ---------------- */
.legal-layout{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start}

.sommaire{position:sticky; top:6rem}
.sommaire-titre{font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:1rem}
.sommaire ol{list-style:none; margin:0; padding:0; counter-reset:s;
  display:flex; flex-direction:column; gap:.15rem}
.sommaire li{counter-increment:s}
.sommaire a{display:flex; gap:.7rem; padding:.45rem 0; text-decoration:none;
  font-size:.88rem; color:var(--fg-muted); border-bottom:1px solid transparent}
.sommaire a::before{content:counter(s,decimal-leading-zero);
  font-variant-numeric:tabular-nums; color:var(--line); flex:none}
.sommaire a:hover{color:var(--fg)}
.sommaire a:hover::before{color:var(--amber)}
@media(max-width:900px){
  .legal-layout{grid-template-columns:1fr; gap:2.5rem}
  .sommaire{position:static; padding-bottom:1.5rem; border-bottom:1px solid var(--line)}
  .sommaire ol{display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem}
}
@media(max-width:560px){ .sommaire ol{grid-template-columns:1fr} }

.legal{max-width:68ch; display:flex; flex-direction:column; gap:1.9rem}
.legal .bloc{display:flex; flex-direction:column; gap:.75rem; scroll-margin-top:5.5rem}
.legal h2{font-size:1.15rem; letter-spacing:-.025em; color:var(--fg);
  padding-bottom:.6rem; margin-bottom:.15rem; border-bottom:1px solid var(--line)}
.legal .bloc p + p{margin-top:-.1rem}
.legal p{color:var(--fg-muted); font-size:.97rem}
.legal b{color:var(--fg); font-weight:600}
.legal a{color:var(--amber); text-underline-offset:3px}

/* fiche d'identité de l'éditeur */
.fiche{border:1px solid var(--line); border-radius:2px; background:var(--ink-2)}
.fiche .ligne{display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:1rem; padding:.7rem 1.1rem; border-bottom:1px solid var(--line)}
.fiche .ligne:last-child{border-bottom:0}
.fiche span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-muted); align-self:center}
.fiche b,.fiche a{font-family:var(--f-display); font-weight:600; font-size:.98rem;
  letter-spacing:-.01em}
.fiche b{color:var(--fg)}
.fiche a{color:var(--amber); text-decoration:none}
.fiche a:hover{text-decoration:underline}
@media(max-width:560px){
  .fiche .ligne{grid-template-columns:1fr; gap:.25rem}
  .fiche span{align-self:start}
}

a:focus-visible,button:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
@media(prefers-reduced-motion:reduce){ *{transition:none!important} html{scroll-behavior:auto} }

/* marque : logo de Patrick sur plaque claire */
.plate{display:grid; place-items:center; flex:none; background:var(--paper);
  border-radius:2px; height:var(--ctl-h); padding:0 calc(var(--plate-inset) * 1.5)}
.plate img{height:calc(var(--ctl-h) - var(--plate-inset) * 2); width:auto}
@media(max-width:520px){ :root{--ctl-h:40px} }
@media(max-width:380px){ :root{--ctl-h:36px} .topbar .wrap{gap:.45rem} }

/* piège à robots (invisible mais accessible aux lecteurs d'écran comme champ ignoré) */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
/* message d'erreur du formulaire */
.alerte{margin-top:1.25rem; padding:.9rem 1.1rem; border-radius:2px;
  background:rgba(232,163,61,.1); border:1px solid rgba(232,163,61,.35); color:var(--fg)}
.alerte a{color:var(--amber); font-weight:600}

/* étoiles : la part non obtenue reste visible mais éteinte */
.stars{color:var(--amber); letter-spacing:.2em; line-height:1}
.stars .off{color:#3D464C}

/* ---------------- carrousel d'avis ---------------- */
.slider{position:relative}
.track{display:flex; gap:1.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:.25rem}
.track::-webkit-scrollbar{display:none}
/* un seul avis par vue : la disposition horizontale occupe toute la largeur */
.track>.quote{flex:0 0 100%; scroll-snap-align:start}
@media(max-width:980px){ .track{gap:1rem} }

.slider-ctl{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:1.75rem}
.dots{display:flex; gap:.5rem}
.dots button{width:26px; height:3px; padding:0; border:0; border-radius:2px;
  background:var(--line); cursor:pointer; transition:background .3s ease}
.dots button[aria-current="true"]{background:var(--amber); width:40px}
.arrows{display:flex; gap:.5rem}
.arrows button{width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:2px; color:var(--fg-muted);
  font-family:var(--f-display); font-size:1.4rem; line-height:1}
.arrows button:hover{border-color:var(--amber); color:var(--amber)}

/* photo du chantier dans un avis */

/* indication de balayage, sur écrans tactiles uniquement */
@media(hover:none){
  .lb-prev,.lb-next{display:none}
  .lb-count::after{content:" · balayez pour naviguer"; letter-spacing:.04em; opacity:.65}
}

/* la photo d'un avis renvoie vers la galerie */

/* ---------------- sections claires ----------------
   Une section sur deux passe sur fond papier. Comme tous les composants
   puisent leurs couleurs dans les variables, il suffit de les redéfinir ici :
   rien d'autre n'est à réécrire. */
.sec-clair{
  --ink-2:#FFFFFF;          /* surfaces posées sur le fond clair */
  --fg:#14181B;             /* texte principal */
  --fg-dim:#3C464C;
  --fg-muted:#5C666D;
  --line:#DDDAD2;
  --amber:#A96A12;          /* ambre assombri : illisible en clair sinon */
  background:var(--paper);
  color:var(--fg);
}
.sec-clair .stars .off{color:#C9C6BE}
.sec-clair .tile{border-color:#D6D3CB}
.sec-clair .quote{background:#FFFFFF}
.sec-clair .pull{color:var(--fg)}

/* ---------------- bandeau ambre des avis ----------------
   Le seul aplat de couleur de la page. Ambre mat, et toute la hiérarchie
   déclinée en bruns : sur cet aplat, ni blanc ni noir pur ne tiennent. */
.sec-ambre{
  --ink-2:#FBF3E3;
  --fg:#241703;             /* titres et citations : brun presque noir */
  --fg-dim:#372408;
  --fg-muted:#4C340D;       /* mentions secondaires */
  --line:#B8842C;
  --amber:#4E3004;          /* note, étoiles, filets : brun profond */
  background:#D9992F;
  color:var(--fg);
}
.sec-ambre .eyebrow::before{background:#6E4E12}
.sec-ambre .stars .off{color:#B8842C}
.sec-ambre .arrows button{border-color:#9C6C1F; color:#4C340D}
.sec-ambre .arrows button:hover{border-color:var(--amber); color:var(--amber)}
.sec-ambre .dots button{background:#BE8A2C}
.sec-ambre .dots button[aria-current="true"]{background:var(--amber)}

/* champs obligatoires et retour de saisie */
.oblig{color:var(--amber)}
input:user-invalid,textarea:user-invalid{border-color:#E3714C}
input:user-valid,textarea:user-valid{border-color:#4F7A55}