/* Pages annexes : métiers, contact, mentions légales, confidentialité, 404. Même charte que style.css (noir, or, capitales larges). */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fil{font-size:.82rem;color:var(--pierre);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.fil a{color:var(--craie);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:5px;margin-block:-5px}
.fil a:hover{color:var(--or)}

/* ouverture photo plein écran (pages métier) */
.ouv-photo{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden}
.ouv-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:respire 16s var(--ressort) forwards}
@keyframes respire{to{transform:scale(1)}}
.ouv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.65),rgba(11,11,10,.25) 30%,rgba(11,11,10,.94) 82%)}
.ouv-photo .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:8svh}
.ouv-photo h1,.ouv-texte h1,.introuvable h1{font-size:clamp(2.3rem,6.6vw,6.2rem);line-height:.92;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;max-width:14ch}
.ouv-photo .lead{margin-top:22px;color:rgba(242,238,230,.86)}
@media (max-width:900px){.ouv-photo h1,.ouv-texte h1,.introuvable h1{font-size:9.4vw;font-stretch:105%}}

/* blocs de contenu (même grille que la page Peintre à Boulogne) */
.bloc{padding-block:90px;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;border-top:1px solid var(--filet)}
.bloc:first-child{border-top:0}
.bloc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.bloc li{padding:18px 0;border-bottom:1px solid var(--filet)}
.bloc li b{display:block;font-family:var(--enseigne);font-stretch:112%;font-weight:600;font-size:1.05rem}
.bloc li span{color:var(--pierre);font-size:.94rem}
.bloc .ba{width:100%;max-width:560px;justify-self:end}
.villes{display:flex;flex-wrap:wrap;gap:10px}
.villes span{padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--filet);font-size:.94rem}
.villes span.or{box-shadow:inset 0 0 0 1px var(--or)}
.avis{margin:0;padding:34px;border-radius:6px;background:var(--nuit-2)}
.avis blockquote{margin:0;font-family:var(--enseigne);font-stretch:110%;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.25}
.avis figcaption{margin-top:16px;font-size:.86rem;color:var(--or)}
details.q{border-bottom:1px solid var(--filet);padding-block:18px}
details.q summary{cursor:pointer;font-weight:600;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";color:var(--or);font-size:1.3rem;line-height:1;transition:transform .3s var(--ressort)}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{margin:10px 0 0;color:var(--pierre)}

/* photos de chantier */
.photos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.photos figure{margin:0;position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3}
.photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ressort)}
.photos figure:hover img{transform:scale(1.04)}
.photos figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,11,10,.88))}
.photos figcaption{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;font-size:.84rem;color:rgba(242,238,230,.8)}
.photos figcaption b{display:block;color:var(--craie);font-size:.95rem}
.photos figure:only-child,.photos figure:nth-child(3):last-child{grid-column:1/-1;aspect-ratio:16/9}

/* liens entre métiers */
.liens-metiers{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.liens-metiers a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding-block:14px;border-bottom:1px solid var(--filet);font-family:var(--enseigne);font-stretch:112%;font-weight:600;font-size:1.08rem;transition:color .2s}
.liens-metiers a span{color:var(--or);transition:transform .3s var(--ressort)}
.liens-metiers a:hover{color:var(--or)}
.liens-metiers a:hover span{transform:translateX(6px)}

.fin{padding-block:60px 140px;text-align:center}
.fin .h2{margin-bottom:28px}
.fin .cta{justify-content:center}

@media (max-width:900px){
  .bloc{grid-template-columns:1fr;gap:28px;padding-block:64px}
  .bloc ul,.liens-metiers{grid-template-columns:1fr}
  .bloc .ba{justify-self:stretch;max-width:none}
  .photos{grid-template-columns:1fr}
  .photos figure:nth-child(3):last-child{aspect-ratio:4/3}
}

/* contact */
.ouv-texte{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:56px}
.ouv-texte .lead{margin-top:22px}
.moyens{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:90px}
.moyen{display:flex;flex-direction:column;gap:6px;padding:28px;border-radius:8px;background:var(--nuit-2);box-shadow:inset 0 1px 0 rgba(242,238,230,.06);transition:box-shadow .25s,transform .25s var(--ressort)}
.moyen:hover{box-shadow:inset 0 0 0 1px var(--or)}
.moyen:active{transform:scale(.98)}
.moyen .sur{margin:0 0 6px}
.moyen b{font-family:var(--enseigne);font-stretch:112%;font-weight:600;font-size:clamp(1.25rem,2.2vw,1.7rem);font-variant-numeric:tabular-nums}
.moyen b.mail{font-size:clamp(.98rem,1.4vw,1.1rem);overflow-wrap:anywhere}
.moyen small{color:var(--pierre);font-size:.88rem}
@media (max-width:900px){.moyens{grid-template-columns:1fr;padding-bottom:64px}}
.contact{background:var(--nuit-2);padding-block:110px}
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
.contact .info{color:var(--pierre);max-width:30em}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form .plein{grid-column:1/-1}
label{display:grid;gap:8px;font-size:.84rem;color:var(--pierre)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--craie);background:transparent;border:0;border-bottom:1px solid rgba(242,238,230,.28);border-radius:0;padding:10px 0;width:100%;min-width:0;transition:border-color .2s}
select option{background:var(--nuit-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or)}
textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.82rem}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--or)}
.consent a{color:var(--craie);text-decoration:underline;text-underline-offset:3px}
.retour{grid-column:1/-1;margin:0;font-size:.92rem;color:var(--or-clair)}
@media (max-width:900px){.contact{padding-block:72px}.contact .wrap{grid-template-columns:1fr;gap:40px}form{grid-template-columns:1fr}}

/* textes légaux : lisibles, pas de décor */
.texte-legal{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:120px;max-width:820px}
.texte-legal h1{font-size:clamp(1.6rem,7.4vw,3.6rem);hyphens:auto;overflow-wrap:break-word;font-stretch:118%;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.texte-legal .maj{color:var(--pierre);font-size:.86rem;margin:14px 0 36px}
.texte-legal .lead{max-width:none;margin-bottom:8px}
.texte-legal h2{font-size:1.15rem;font-stretch:112%;margin:44px 0 12px;color:var(--or)}
.texte-legal p{margin:0 0 12px;color:rgba(242,238,230,.86);line-height:1.75}
.texte-legal a{color:var(--craie);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.texte-legal table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:.92rem}
.texte-legal th,.texte-legal td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--filet)}
.texte-legal th{font-family:var(--enseigne);font-stretch:112%;font-weight:600;color:var(--craie)}
.texte-legal td{color:var(--pierre)}
@media (max-width:700px){
  .texte-legal thead{display:none}
  .texte-legal tr{display:block;padding:12px 0;border-bottom:1px solid var(--filet)}
  .texte-legal td{display:block;border:0;padding:3px 0}
  .texte-legal td:first-child{color:var(--craie);font-weight:600}
}
.manque{color:var(--or);font-style:normal}

/* 404 */
.introuvable{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:150px;padding-bottom:120px;position:relative}
.introuvable .geant{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:110px;margin:0;font-family:var(--enseigne);font-stretch:125%;font-weight:800;font-size:clamp(7rem,26vw,22rem);line-height:.8;color:rgba(207,168,90,.09);pointer-events:none;user-select:none}
.introuvable .lead{margin-top:22px}
.introuvable .liens-metiers{max-width:760px}

@media (prefers-reduced-motion:reduce){.ouv-photo>img{animation:none;transform:none}}

/* page architectes & syndics : titre plus long, donc plus petit */
.ouv-photo.pro h1{font-size:clamp(2.1rem,5vw,4.6rem);max-width:17ch}
@media (max-width:900px){.ouv-photo.pro h1{font-size:8.4vw}}