/* PJ-Bati — variante 2, style affirmé.
   Titres massifs en cuivre sur marine, aplats de couleur, formes arrondies,
   photo encadrée de cartes flottantes. Se charge après site.css. */
:root {
  --bleu-gris: #DDE8EB;   /* 2e aplat clair, tiré du marine */
  --rayon: 999px;         /* boutons en pilule */
  --rayon-carte: 28px;
  --rayon-moyen: 18px;
  --ombre: 0 14px 34px rgba(2, 28, 39, .18);
}

/* Titres massifs */
.titre-massif { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
.heros--v2 h1.titre-massif { color: var(--cuivre); font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem); }
.heros--v2.heros--page h1.titre-massif { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.8rem); }
h2 { font-weight: 700; letter-spacing: -.015em; }
.titre-section { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* En-tête en pilule flottante */
.entete { background: var(--marine); border-bottom: 0; padding-block: 14px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
.entete__barre { background: var(--papier); border-radius: var(--rayon); min-height: 64px; padding-inline: 1.4rem .6rem; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.entete .enveloppe.entete__barre { max-width: calc(var(--largeur) - 40px); margin-inline: auto; padding-left: 1.4rem; padding-right: .6rem; }
.marque img:first-child { width: 40px; }
.marque img:last-child { width: 112px; }
.nav a, .nav summary { color: var(--marine); border-radius: var(--rayon); }
.nav a:hover, .nav .ouvrant:hover > a, .nav .ouvrant:focus-within > a { background: var(--pierre); color: var(--marine); }
.sous-menu { border-top: 0; border-radius: var(--rayon-moyen); top: calc(100% + 10px); overflow: hidden; }
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.entete__tel { color: var(--marine); }
.entete__tel:hover { color: var(--cuivre-encre); }
.entete .btn--cuivre { background: var(--marine); color: var(--papier); }
.entete .btn--cuivre:hover { background: var(--marine-2); color: var(--papier); }
.menu-mobile > summary { color: var(--marine); border-color: var(--trait); border-radius: var(--rayon); }
.menu-mobile__panneau { top: calc(100% + 10px); border-top: 0; border-radius: var(--rayon-moyen); left: 0; right: 0; }
@media (max-width: 560px) { .entete__barre { padding-inline: 1rem .5rem; } .marque img:last-child { width: 96px; } .marque img:first-child { width: 34px; } }

/* Boutons */
.btn { border-radius: var(--rayon); font-weight: 600; padding-inline: 1.6rem; }

/* Héros : photo arrondie et cartes flottantes */
.heros--v2 .heros__grille { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 7vw, 6rem); }
.heros--v2 .heros__chapo { color: var(--sur-marine); }
.collage { position: relative; padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem); min-width: 0; }
.collage__photo { margin: 0; border-radius: var(--rayon-carte); overflow: hidden; background: var(--marine-2); }
.collage__photo img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.collage__photo .attente { aspect-ratio: 4 / 4.2; border-radius: var(--rayon-carte); }
.puce { position: absolute; display: grid; gap: .1rem; background: var(--papier); color: var(--encre); padding: .85rem 1.15rem; border-radius: var(--rayon-moyen); box-shadow: var(--ombre); max-width: 220px; }
.puce b { font-family: var(--f-titre); font-weight: 800; font-size: 1.45rem; color: var(--marine); line-height: 1.1; letter-spacing: -.01em; }
.puce span { font-size: var(--t-xs); color: var(--gris); line-height: 1.35; }
.puce .etoiles { font-size: .95rem; color: var(--cuivre); }
.puce--haut { top: 8%; left: 0; }
.puce--milieu { top: 46%; right: 0; background: var(--cuivre); }
.puce--milieu b, .puce--milieu span { color: var(--marine); }
.puce--bas { bottom: 0; left: 12%; }
@media (max-width: 860px) {
  .collage { padding: 0 .5rem 2rem .5rem; }
  .puce { padding: .65rem .9rem; max-width: 175px; }
  .puce b { font-size: 1.15rem; }
  .puce--haut { top: 4%; left: -.25rem; }
  .puce--milieu { right: -.25rem; }
  .puce--bas { left: 6%; }
}

/* Aplats */
.bande--cuivre { background: var(--cuivre); color: var(--marine); }
.bande--cuivre h2 { color: var(--marine); }
.bande--pierre { background: var(--bleu-gris); }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.chiffre-carte { background: var(--papier); border-radius: var(--rayon-carte); padding: 1.6rem 1.5rem 1.75rem; display: grid; gap: .4rem; align-content: start; }
.chiffre-carte b { font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3rem); color: var(--marine); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chiffre-carte span { color: var(--gris); font-size: var(--t-s); }
@media (max-width: 900px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .chiffres { grid-template-columns: 1fr; } }

/* Engagements en cartes */
.engagement { border-top: 0; background: var(--pierre); border-radius: var(--rayon-carte); padding: 1.5rem; }

/* Gammes : grandes cartes arrondies */
.gammes { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gamme { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: .75rem; background: var(--papier); border: 0; border-radius: var(--rayon-carte); padding: 1.75rem; }
.gamme:hover { background: var(--papier); box-shadow: 0 0 0 2px var(--marine); }
.gamme h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.015em; }
.gamme__uw { order: -1; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.gamme__uw b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; }
.gamme__uw span { display: inline; }
.gamme__lien { display: inline-block !important; margin-top: .25rem; }
.gamme__lien::after { content: ""; }
@media (max-width: 820px) { .gammes { grid-template-columns: 1fr; } .gamme p { grid-row: auto; } }
.aussi a { border-radius: var(--rayon); border: 0; padding: .5rem 1rem; }

/* Services : panneau arrondi */
.services__liste { border-top: 0; background: var(--marine-2); border-radius: var(--rayon-carte); padding: .5rem 1.75rem; }
.service:last-child { border-bottom: 0; }

/* Étapes */
.etapes li::before { border-radius: 50%; background: var(--cuivre); border-color: var(--cuivre); font-weight: 700; }

/* Avis */
.avis blockquote { border-left: 0; border-radius: var(--rayon-carte); }
.avis-note b { font-weight: 800; }

/* Emplacements photo */
.attente { border-radius: var(--rayon-carte); }

/* Zones */
.zones__liens a { background: var(--papier); border: 0; border-radius: var(--rayon); padding: .75rem 1.2rem; }

/* FAQ */
.faq { border-top: 0; display: grid; gap: .6rem; }
.faq details { border: 0; background: var(--pierre); border-radius: var(--rayon-moyen); padding-inline: 1.4rem; }
.faq summary { font-weight: 600; }

/* Pages produit */
.fiche { border-radius: var(--rayon-carte); background: var(--pierre); border: 0; }
.fiche--signature { background: var(--marine); }
.fiche--signature h2, .fiche--signature .spec dd, .fiche--signature .fiche__pourqui b { color: var(--papier); }
.fiche--signature p, .fiche--signature .fiche__tete span, .fiche--signature .spec dt { color: var(--sur-marine); }
.fiche--signature .spec a { color: var(--cuivre); }
.fiche__pourqui { background: var(--papier); border-radius: var(--rayon-moyen); }
.fiche--signature .fiche__pourqui { background: var(--marine-2); color: var(--sur-marine); }
.fiche h2 { font-weight: 800; }
@media (max-width: 520px) { .fiche--signature .spec dd { border-color: rgba(255,255,255,.15); } }
.tableau { border-radius: var(--rayon-carte); border: 0; }
.garanties { border: 0; gap: .75rem; }
.garanties div { border: 0; background: var(--marine-2); border-radius: var(--rayon-moyen); }
.garanties b { font-weight: 800; color: var(--cuivre); }
.delai b { font-weight: 800; }

/* Révision : héros épuré, texte réduit */
.heros--v2 .collage__photo { margin: 0; }
.heros--v2 .collage__photo img, .heros--v2 .collage__photo .attente { aspect-ratio: 4 / 3.6; }
.etapes--court li { padding-top: 3.2rem; }
.etapes--court h3 { font-size: 1.05rem; }
@media (max-width: 900px) { .etapes--court li { padding: .35rem 0 0 3.6rem; min-height: 2.4rem; } .etapes--court li::after { bottom: -1.5rem; } }
.zones__liens--ligne { display: flex; flex-wrap: wrap; gap: .6rem; }
.zones__liens--ligne a { padding: .8rem 1.4rem; }
.appel h2.titre-massif { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); max-width: 30rem; }
.services { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.services .titre-section { margin-bottom: 0; }
.avis blockquote p { font-size: 1.1rem; }
.chiffre-carte span a { color: var(--cuivre-encre); }
.gamme { background: var(--pierre); }
.gamme:hover { background: var(--pierre); }
.bande:not(.bande--pierre) .aussi a { background: var(--pierre); }
@media (max-width: 420px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chiffre-carte { padding: 1.1rem 1rem 1.2rem; border-radius: var(--rayon-moyen); } .chiffre-carte b { font-size: 1.9rem; } }

/* ===== Composants des pages intérieures ===== */
.intro { color: var(--gris); font-size: var(--t-l); line-height: 1.5; max-width: 46rem; margin-bottom: 1.75rem; }
.bande--marine .intro { color: var(--sur-marine); }
.bande--cuivre .intro, .bande--cuivre .note { color: var(--marine); }
.cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.5rem; }
.cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .cartes--3 { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .cartes--2 { grid-template-columns: 1fr; } }
.carte { background: var(--pierre); border-radius: var(--rayon-carte); padding: 1.6rem 1.6rem 1.75rem; display: grid; gap: .6rem; align-content: start; }
.bande--pierre .carte { background: var(--papier); }
.bande--marine .carte { background: var(--marine-2); }
.carte h3 { font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; }
.carte p { color: var(--gris); }
.bande--marine .carte p { color: var(--sur-marine); }
.carte__lien { font-family: var(--f-titre); font-weight: 600; text-decoration: none; margin-top: .25rem; }
.liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; max-width: 48rem; }
.liste li { position: relative; padding-left: 1.6rem; }
.liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; border-radius: 3px; background: var(--cuivre); }
.fiche--signature .liste li { color: var(--papier); }
.encart { background: var(--pierre); border-radius: var(--rayon-carte); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: .8rem; max-width: 52rem; font-size: var(--t-l); line-height: 1.55; }
.bande--pierre .encart { background: var(--papier); }
.bande--cuivre .encart { background: var(--papier); color: var(--encre); }
.prose { display: grid; gap: 1rem; max-width: 46rem; }

/* Prix : HTVA en grand, TVA en dessous (lisible) */
.prix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.prix { background: var(--papier); border-radius: var(--rayon-carte); padding: 1.6rem; display: grid; gap: .45rem; align-content: start; border: 2px solid var(--trait); max-width: 520px; }
.bande--pierre .prix { border-color: transparent; }
.prix h3 { font-size: 1.15rem; font-weight: 700; }
.prix__htva { font-family: var(--f-titre); color: var(--marine); }
.prix__htva b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prix__tva { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: var(--t-s); color: var(--gris); font-variant-numeric: tabular-nums; }
.prix__tva b { color: var(--encre); font-weight: 600; }
.prix__detail { font-size: var(--t-s); color: var(--gris); border-top: 1px solid var(--trait); padding-top: .6rem; margin-top: .25rem; }

/* Formulaires */
.formulaire { display: grid; gap: 1.25rem; max-width: 52rem; }
.formulaire__bloc { background: var(--pierre); border-radius: var(--rayon-carte); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; }
.formulaire__bloc h3 { font-size: 1.25rem; font-weight: 700; }
.formulaire__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.champ { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.champ--large, fieldset.champ, .formulaire__champs > .option--case { grid-column: 1 / -1; }
.champ label, .champ legend { font-weight: 600; font-size: var(--t-s); color: var(--marine); padding: 0; }
.facultatif { font-weight: 400; color: var(--gris); }
.champ input:not([type=radio]):not([type=checkbox]), .champ textarea { width: 100%; font: inherit; font-size: 1rem; padding: .75rem .9rem; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--papier); color: var(--encre); }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(228,139,83,.35); }
.options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.option { display: inline-flex; align-items: center; gap: .5rem; background: var(--papier); border: 1.5px solid var(--trait); border-radius: 999px; padding: .5rem .95rem; cursor: pointer; font-size: var(--t-s); }
.option:has(input:checked) { border-color: var(--marine); background: var(--marine); color: var(--papier); }
.option input { accent-color: var(--cuivre); margin: 0; }
.option--case { border-radius: 14px; align-items: flex-start; }
.aide { font-size: var(--t-xs); color: var(--gris); }
.formulaire > .btn { justify-self: start; }
@media (max-width: 640px) { .formulaire__champs { grid-template-columns: 1fr; } }

/* Frise chronologique (vraie séquence d'années) */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 52rem; }
.frise li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .15rem 1.25rem; padding-block: 1.1rem; border-top: 1px solid var(--trait); }
.frise b { grid-row: 1 / span 2; font-family: var(--f-titre); font-weight: 800; font-size: 1.7rem; color: var(--cuivre-encre); line-height: 1; font-variant-numeric: tabular-nums; }
.frise h3 { font-size: 1.15rem; font-weight: 700; }
.frise p { color: var(--gris); }

/* Équipe et réalisations */
.equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.equipe figure { margin: 0; display: grid; gap: .6rem; }
.equipe figcaption { color: var(--gris); font-size: var(--t-s); }
.equipe figcaption b { display: block; font-family: var(--f-titre); font-weight: 700; color: var(--marine); font-size: 1.1rem; }
@media (max-width: 860px) { .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.realisations--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .realisations--2 { grid-template-columns: 1fr; } }

/* Médias du héros autres qu'une photo */
.heros--v2 .collage__photo:has(.contact-carte), .heros--v2 .collage__photo:has(.delais-devis) { background: transparent; overflow: visible; }
.contact-carte, .delais-devis { background: var(--papier); color: var(--encre); border-radius: var(--rayon-carte); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.1rem; }
.contact-carte p { display: grid; gap: .1rem; }
.contact-carte span { font-size: var(--t-xs); color: var(--gris); font-weight: 600; }
.contact-carte a { font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); color: var(--marine); text-decoration: none; word-break: break-word; }
.delais-devis h2 { font-size: 1.3rem; }
.delais-devis .chiffres { grid-template-columns: 1fr; gap: .6rem; }
.delais-devis .chiffre-carte { background: var(--pierre); border-radius: var(--rayon-moyen); padding: 1rem 1.2rem; }
.delais-devis .chiffre-carte b { font-size: 1.9rem; }
.heros--v2 .heros__texte .actions:empty { display: none; }

/* ===== Vie : survols ===== */
.gamme, .carte, .chiffre-carte, .avis blockquote, .prix, .zones__liens a, .aussi a, .btn, .realisations figure, .duo figure {
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background-color .15s, color .15s, border-color .15s;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gamme:hover, .carte:hover, .chiffre-carte:hover, .avis blockquote:hover, .prix:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(2, 28, 39, .16); }
  .bande--marine .carte:hover, .bande--cuivre .chiffre-carte:hover { box-shadow: 0 18px 38px rgba(2, 28, 39, .32); }
  .gamme:hover { box-shadow: 0 18px 38px rgba(2, 28, 39, .16), 0 0 0 2px var(--marine); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2, 28, 39, .22); }
  .zones__liens a:hover, .aussi a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2, 28, 39, .12); }
  .service { transition: padding-left .2s; }
  .service:hover { padding-left: .5rem; }
  .collage__photo img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .collage__photo:hover img { transform: scale(1.04); }
}
.entete { transition: box-shadow .2s; }
.entete.defile .entete__barre { box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ===== Châssis 3D ===== */
.chassis3d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.chassis3d .titre-section { margin-bottom: 1.5rem; }
.chassis3d__infos { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.chassis3d__infos li { background: var(--papier); border-radius: var(--rayon-moyen); padding: 1rem 1.1rem; display: grid; gap: .15rem; }
.chassis3d__infos b { font-family: var(--f-titre); font-weight: 800; font-size: 1.6rem; color: var(--marine); letter-spacing: -.02em; line-height: 1.1; }
.chassis3d__infos span { font-size: var(--t-s); color: var(--gris); }
.chassis3d__scene { perspective: 1100px; height: 440px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; }
.chassis3d__objet { position: relative; width: 270px; height: 350px; transform-style: preserve-3d; transition: transform .3s ease-out; }
.c3-d { position: absolute; inset: 0; border: 20px solid #3A4A52; border-radius: 3px; transform: translateZ(calc(var(--i) * -4px)); }
.c3-d:first-child { border-color: #4A5C65; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.c3-d:nth-child(n+5) { border-color: #2C3940; }
.c3-d:nth-child(n+10) { border-color: #1F2A30; }
.c3-ouvrant { position: absolute; inset: 20px; transform-style: preserve-3d; transform-origin: left center; transform: translateZ(-14px); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.est-ouvert .c3-ouvrant { transform: translateZ(-14px) rotateY(-58deg); }
.c3-o { position: absolute; inset: 0; border: 16px solid #42545D; transform: translateZ(calc(var(--i) * -3px)); }
.c3-o:first-child { border-color: #53666F; }
.c3-o:nth-child(n+6) { border-color: #2F3D44; }
.c3-verre { position: absolute; inset: 16px; transform: translateZ(-14px);
  background: linear-gradient(125deg, rgba(214,234,240,.75) 0%, rgba(150,190,205,.45) 38%, rgba(255,255,255,.85) 46%, rgba(150,190,205,.35) 52%, rgba(110,160,180,.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.c3-poignee { position: absolute; right: 3px; top: 50%; width: 9px; height: 52px; margin-top: -26px; border-radius: 5px; background: linear-gradient(90deg, #DCE3E6, #9AA8AE); transform: translateZ(4px); }
@media (max-width: 860px) {
  .chassis3d { grid-template-columns: 1fr; }
  .chassis3d__scene { height: 360px; order: -1; }
  .chassis3d__objet { width: 210px; height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .chassis3d__objet, .c3-ouvrant { transition: none; } }

/* ===== Coulissant animé (photos réelles) ===== */
.coulissant { margin: 0; display: grid; gap: 1rem; max-width: 1000px; }
.coulissant__scene { position: relative; border-radius: var(--rayon-carte); overflow: hidden; aspect-ratio: 1600 / 1077; background: var(--pierre); }
.coulissant__fond { width: 100%; height: 100%; object-fit: cover; display: block; }
.coulissant__clip { position: absolute; left: 28.678%; top: 12.593%; width: 40.648%; height: 82.469%; overflow: hidden; }
.coulissant__vantail { width: 100%; height: 100%; display: block; transform: translateX(0); transition: transform 2.6s cubic-bezier(.45,.05,.25,1); will-change: transform; }
.coulissant.est-ouvert .coulissant__vantail { transform: translateX(100%); }
.coulissant figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; color: var(--gris); font-size: var(--t-s); }
@media (prefers-reduced-motion: reduce) { .coulissant__vantail { transition: none; } }

/* Sous-menus : pont invisible sous l'onglet + fermeture retardée, pour ne pas perdre le menu en déplaçant la souris */
.ouvrant::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 18px; }
.sous-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.ouvrant.est-ouvert > .sous-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
.sous-menu.sans-transition { transition: none !important; }
/* Sans JavaScript : ouverture au survol et au clavier */
html:not(.js) .ouvrant:hover > .sous-menu, html:not(.js) .ouvrant:focus-within > .sous-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sous-menu { transform: none; } }

/* Le reflet reste fixe : seul le cadre de l'ouvrant glisse, et le vitrage (avec son reflet) se découvre progressivement */
.coulissant__clip picture { position: absolute; inset: 0; }
.coulissant__reflet { width: 100%; height: 100%; display: block;
  -webkit-clip-path: inset(0 0 0 6.033%); clip-path: inset(0 0 0 6.033%);
  transition: clip-path 2.6s cubic-bezier(.45,.05,.25,1), -webkit-clip-path 2.6s cubic-bezier(.45,.05,.25,1); }
.coulissant.est-ouvert .coulissant__reflet { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); }
@media (prefers-reduced-motion: reduce) { .coulissant__reflet { transition: none; } }

/* ===== Vitrine : sélecteur de modèles ===== */
.vitrine { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.vitrine__liste { display: grid; gap: .6rem; }
.vitrine__choix { font: inherit; text-align: left; cursor: pointer; display: grid; gap: .1rem; background: var(--papier); color: var(--encre); border: 2px solid transparent; border-radius: var(--rayon-moyen); padding: 1rem 1.2rem; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.vitrine__choix b { font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; color: var(--marine); letter-spacing: -.01em; }
.vitrine__choix span { font-size: var(--t-s); color: var(--gris); }
.vitrine__choix:hover { border-color: var(--marine); }
.vitrine__choix[aria-selected="true"] { background: var(--marine); border-color: var(--marine); }
.vitrine__choix[aria-selected="true"] b { color: var(--cuivre); }
.vitrine__choix[aria-selected="true"] span { color: var(--sur-marine); }
.vitrine__panneaux { display: grid; gap: 1.25rem; min-width: 0; }
.vitrine__panneau { display: grid; gap: 1rem; background: var(--papier); border-radius: var(--rayon-carte); padding: .75rem; }
.vitrine__photo { margin: 0; border-radius: calc(var(--rayon-carte) - 8px); overflow: hidden; aspect-ratio: 900 / 990; background: var(--pierre); }
.vitrine__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine__texte { display: grid; gap: .6rem; padding: .25rem .75rem 1rem; align-content: start; }
.vitrine__texte h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.015em; }
.vitrine__texte p { color: var(--gris); }
.vitrine__specs { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.vitrine__specs li { background: var(--pierre); color: var(--marine); border-radius: 999px; padding: .4rem .85rem; font-size: var(--t-s); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Mode interactif (activé par le script) */
.vitrine.est-interactive { grid-template-columns: minmax(0, .75fr) minmax(0, 2fr); align-items: start; }
.vitrine.est-interactive .vitrine__panneaux { display: block; position: relative; }
.vitrine.est-interactive .vitrine__panneau { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.vitrine.est-interactive .vitrine__panneau:not(.est-actif) { display: none; }
.vitrine.est-interactive .vitrine__panneau.est-actif .vitrine__photo img { animation: vitrine-photo .6s cubic-bezier(.2,.7,.2,1); }
.vitrine.est-interactive .vitrine__panneau.est-actif .vitrine__texte { animation: vitrine-texte .5s cubic-bezier(.2,.7,.2,1); }
@keyframes vitrine-photo { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes vitrine-texte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .vitrine.est-interactive { grid-template-columns: 1fr; }
  .vitrine.est-interactive .vitrine__liste { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; scrollbar-width: none; }
  .vitrine.est-interactive .vitrine__choix { flex: 0 0 auto; padding: .7rem 1rem; }
  .vitrine.est-interactive .vitrine__choix b { font-size: 1.05rem; }
  .vitrine.est-interactive .vitrine__panneau { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vitrine__panneau .vitrine__photo img, .vitrine__panneau .vitrine__texte { animation: none !important; } }

/* Coulissants : coupe HST à côté des deux explications, photo PVC */
.hst { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.hst .cartes { grid-template-columns: 1fr; }
.hst__coupe { margin: 0; background: #fff; border-radius: var(--rayon-carte); padding: clamp(1rem, 2.5vw, 1.75rem); }
.hst__coupe img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.hst__coupe figcaption, .pvc-photo figcaption { font-size: var(--t-s); color: var(--gris); margin-top: .75rem; }
.pvc-photo { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.pvc-photo img { display: block; width: 100%; height: auto; border-radius: var(--rayon-carte); }
@media (max-width: 820px) { .hst { grid-template-columns: 1fr; } }

/* Essentiel : fondu fermé / décompressé + coupe du profilé */
.pvc-titre { font-family: var(--f-titre); font-weight: 800; color: var(--marine); font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); margin: clamp(2rem, 5vw, 3.5rem) 0 1rem; }
.pvc-duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.decomp, .pvc-coupe { margin: 0; background: #fff; border-radius: var(--rayon-carte); overflow: hidden; display: flex; flex-direction: column; }
.decomp__scene { position: relative; }
.decomp__scene img { display: block; width: 100%; height: auto; }
.decomp__ouvert { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(.45,.05,.25,1); }
.decomp.est-ouvert .decomp__ouvert { opacity: 1; }
.decomp figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 1rem 1.25rem; font-size: var(--t-s); color: var(--gris); }
.pvc-coupe { justify-content: center; padding: clamp(1rem, 2.5vw, 1.5rem); }
.pvc-coupe img { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.pvc-coupe figcaption { font-size: var(--t-s); color: var(--gris); margin-top: .75rem; }
.pvc-photo { margin-bottom: 1rem; }
@media (max-width: 820px) { .pvc-duo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .decomp__ouvert { transition: none; } }

/* Coulissant / levant-coulissant : chaque explication avec sa coupe */
.coupes { display: grid; gap: 1rem; }
.coupes__ligne { display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 18vw, 200px); gap: 1rem; align-items: stretch; }
.coupes__ligne .carte { display: flex; flex-direction: column; justify-content: center; }
.coupes__img { margin: 0; background: #fff; border: 2px solid var(--pierre); border-radius: var(--rayon-carte); padding: .6rem .6rem .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; }
.coupes__img img { display: block; width: 100%; height: 150px; object-fit: contain; }
.coupes__img figcaption { font-size: .78rem; line-height: 1.3; color: var(--gris); text-align: center; }
@media (max-width: 560px) { .coupes__ligne { grid-template-columns: minmax(0, 1fr) 92px; gap: .6rem; } .coupes__img { padding: .4rem .3rem; } .coupes__img img { height: 110px; } .coupes__img figcaption { font-size: .68rem; } .coupes__ligne .carte { padding: 1.1rem 1.1rem; } }
.pvc-anim { max-width: 640px; }

/* Accueil : diaporama plein cadre */
.heros--diapo { position: relative; isolation: isolate; min-height: clamp(560px, 86svh, 860px); display: flex; align-items: center; }
.heros--diapo > .enveloppe { position: relative; z-index: 2; width: 100%; }
.heros--diapo .heros__grille { grid-template-columns: minmax(0, 1fr); }
.heros--diapo .heros__texte { max-width: 38rem; }
.diapo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--marine); }
.diapo__vue { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.diapo__vue img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.diapo__vue.est-active { opacity: 1; }
.diapo.anime .diapo__vue.est-active img, .diapo.anime .diapo__vue.sortant img { animation: diapo-zoom 9s linear forwards; }
@keyframes diapo-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.heros--diapo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,42,57,.92) 0%, rgba(4,42,57,.75) 32%, rgba(4,42,57,.15) 68%, rgba(4,42,57,0) 100%), linear-gradient(0deg, rgba(4,42,57,.45), rgba(4,42,57,0) 30%); }
.heros--diapo .heros__chapo, .heros--diapo .avis-ligne { color: #fff; }
.diapo__pause { position: absolute; z-index: 3; right: max(16px, 2vw); bottom: max(16px, 2vw); font: 600 .8rem var(--f-texte); color: #fff; background: rgba(4,42,57,.55); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; backdrop-filter: blur(4px); }
.diapo__pause:hover { background: rgba(4,42,57,.8); }
.diapo__pause:focus-visible { outline: 3px solid var(--cuivre); outline-offset: 2px; }
@media (max-width: 700px) {
  .heros--diapo { align-items: flex-end; min-height: max(620px, 92svh); }
  .diapo__vue img { object-position: 50% 30%; }
  .heros--diapo::after { background: linear-gradient(0deg, rgba(4,42,57,.96) 0%, rgba(4,42,57,.88) 45%, rgba(4,42,57,.55) 62%, rgba(4,42,57,0) 85%); }
}
@media (prefers-reduced-motion: reduce) { .diapo__vue { transition: none; } .diapo.anime .diapo__vue img { animation: none; } }

/* Diaporama dans le cadre photo d'un en-tête de page */
.diapo-cadre { position: relative; aspect-ratio: 4 / 3.6; isolation: isolate; }
.diapo-cadre .diapo { border-radius: inherit; }
.diapo-cadre .diapo__vue img { aspect-ratio: auto; object-position: 50% 50%; }
.diapo-cadre .diapo__pause { right: 12px; bottom: 12px; }
.diapo__credit { position: absolute; z-index: 3; left: 14px; bottom: 16px; font-size: .72rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Logo : zone cliquable agrandie (toute la hauteur de la barre, marge autour) */
.marque { position: relative; padding: .6rem .8rem; margin: -.6rem -.8rem; min-height: 48px; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.marque::after { content: ""; position: absolute; inset: -6px -10px; }
.marque img { pointer-events: none; }

/* Profilés en coupe : fond blanc, image entière */
.vitrine--coupes .vitrine__photo { aspect-ratio: 1; background: #fff; }
.vitrine--coupes .vitrine__photo img { object-fit: contain; }

/* Bascule entre deux variantes superposées (profil standard / débordant) */
.bascule { position: relative; }
.bascule__autre { position: absolute; inset: 0; opacity: 0; transition: opacity .9s cubic-bezier(.45,.05,.25,1); }
.bascule__autre img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bascule .bascule__autre.est-visible { opacity: 1; }
.vitrine.est-interactive .vitrine__panneau.est-actif .bascule__autre img { animation: none; }
.bascule__choix { position: absolute; left: 12px; top: 12px; display: flex; gap: 4px; padding: 4px; background: rgba(4,42,57,.88); border-radius: 999px; backdrop-filter: blur(6px); white-space: nowrap; }
.bascule__choix button { font: 600 .82rem var(--f-texte); color: var(--sur-marine); background: transparent; border: 0; border-radius: 999px; padding: .5rem .95rem; cursor: pointer; min-height: 36px; }
.bascule__choix button[aria-pressed="true"] { background: var(--cuivre); color: var(--marine); }
.bascule__choix button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bascule__autre { transition: none; } }

/* Réalisation détaillée : mosaïque 3 photos + texte + prix */
.chantier { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); background: var(--papier); border-radius: var(--rayon-carte); padding: clamp(.75rem, 1.5vw, 1rem); box-shadow: 0 10px 30px rgba(4,42,57,.08); align-items: start; }
.bande--pierre .chantier { box-shadow: none; }
.chantier__photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: .6rem; }
.chantier__photo { border-radius: calc(var(--rayon-carte) - 8px); overflow: hidden; background: var(--pierre); }
.chantier__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chantier__photo--1 { grid-column: 1; grid-row: 1; }
.chantier__photo--2 { grid-column: 2; grid-row: 1 / span 2; }
.chantier__photo--3 { grid-column: 1; grid-row: 2; }
.chantier__texte { display: grid; gap: .8rem; padding: .75rem .75rem 1rem; align-content: start; }
.chantier__lieu { font-size: var(--t-s); font-weight: 600; color: var(--cuivre-encre); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.chantier__texte h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); font-weight: 800; letter-spacing: -.015em; margin: 0; }
.chantier__prix { background: var(--marine); color: var(--sur-marine); border-radius: var(--rayon-moyen); padding: 1rem 1.2rem; display: grid; gap: .2rem; }
.chantier__prix p { margin: 0; }
.chantier__prix b { font-family: var(--f-titre); font-weight: 800; font-size: 1.7rem; color: var(--cuivre); font-variant-numeric: tabular-nums; }
.chantier__prix p:nth-child(2) { color: var(--papier); font-weight: 600; }
.chantier__prix span { font-size: .78rem; }
@media (max-width: 900px) { .chantier { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .chantier__photos { grid-template-columns: 1fr; } .chantier__photo--1, .chantier__photo--3 { grid-column: 1; grid-row: auto; } .chantier__photo--2 { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3 !important; } .chantier__photo--2 img { object-position: 50% 60%; } }

/* Photos de réalisations dans les grilles : même format que les cadres d'attente */
.realisations figure img, .duo figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--rayon-carte); display: block; }
.realisations figcaption a { font-weight: 600; }
.chantier__photo--2 img { object-position: 25% 50%; }
.chantier__photo--2 img[src*="real-thon-porte"] { object-position: 0% 70%; }
.chantiers { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

/* Réalisation avec photos verticales : grande à gauche, détails empilés à droite */
.chantier--portrait .chantier__photos { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.chantier--portrait .chantier__photo:first-child { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 3 / 4; }
.chantier--portrait .chantier__photo:not(:first-child) { grid-column: 2; grid-row: auto; aspect-ratio: auto; min-height: 0; }
@media (max-width: 520px) { .chantier--portrait .chantier__photos { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; } .chantier--portrait .chantier__photo:first-child { grid-column: 1 / span 3; grid-row: 1; aspect-ratio: 3 / 4 !important; } .chantier--portrait .chantier__photo:not(:first-child) { grid-column: auto; grid-row: 2; aspect-ratio: 3 / 4 !important; } }
@media (min-width: 521px) {
  .chantier--portrait .chantier__photo:not(:first-child) { position: relative; }
  .chantier--portrait .chantier__photo:not(:first-child) picture, .chantier--portrait .chantier__photo:not(:first-child) img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* MasterLine : coupe avec bascule Functional / Hidden Vent + explications */
.designs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.designs .cartes { grid-template-columns: 1fr; }
.bascule-seule { margin: 0; border-radius: var(--rayon-carte); overflow: hidden; aspect-ratio: 1; background: #001b33; }
.bascule-seule img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .designs { grid-template-columns: 1fr; } }
.designs + .intro { margin-top: 1.75rem; }

/* Variantes prises sous des angles différents : fondu enchaîné (l'une sort, puis l'autre entre), sans superposition */
.bascule--enchaine .bascule__autre { transition: opacity .35s ease; }
.bascule--enchaine .bascule__autre.est-visible { transition-delay: .3s; }
.bascule--enchaine > picture:first-child img { transition: opacity .35s ease .3s; }
.bascule--enchaine.montre-autre > picture:first-child img { opacity: 0; transition-delay: 0s; }
.bascule-seule.bascule--enchaine { background: #fff; }
.bascule-seule.bascule--enchaine img { object-fit: contain; }

/* Fondu « matière » : les deux images se superposent en se floutant, la nouvelle se reconstruit nette */
.bascule--enchaine .bascule__autre, .bascule--enchaine .bascule__autre.est-visible { transition: opacity 1s cubic-bezier(.45,.05,.25,1), filter 1s cubic-bezier(.45,.05,.25,1), transform 1s cubic-bezier(.45,.05,.25,1); transition-delay: 0s; }
.bascule--enchaine .bascule__autre { filter: blur(10px); transform: scale(.97); }
.bascule--enchaine .bascule__autre.est-visible { filter: blur(0); transform: none; }
.bascule--enchaine > picture:first-child img, .bascule--enchaine.montre-autre > picture:first-child img { transition: opacity 1s cubic-bezier(.45,.05,.25,1), filter 1s cubic-bezier(.45,.05,.25,1), transform 1s cubic-bezier(.45,.05,.25,1); transition-delay: 0s; }
.bascule--enchaine.montre-autre > picture:first-child img { filter: blur(10px); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .bascule--enchaine .bascule__autre, .bascule--enchaine > picture img { filter: none !important; transform: none !important; } }

/* SlimLine : les trois designs en situation, en petit */
.en-situation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.en-situation figure { margin: 0; display: grid; gap: .6rem; }
.en-situation img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-moyen); display: block; }
.en-situation figcaption { font-size: var(--t-s); color: var(--gris); display: grid; gap: .1rem; }
.en-situation figcaption b { font-family: var(--f-titre); font-weight: 800; color: var(--marine); font-size: 1.05rem; }
@media (max-width: 700px) { .en-situation { grid-template-columns: 1fr 1fr; } .en-situation figure:last-child { grid-column: 1 / span 2; } }
.en-situation--portes figcaption { line-height: 1.5; }
.en-situation--portes img { aspect-ratio: 4 / 5; }
.en-situation figure { align-content: start; }
.fiche__sous { font-family: var(--f-titre); font-weight: 800; font-size: 1rem; margin: 1rem 0 .4rem; color: inherit; } .fiche--signature .fiche__sous { color: var(--cuivre); }

/* Portes : « Ce qui ne se voit pas » */
.anatomie { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: 1.5rem; }
.anatomie__bloc { background: var(--papier); border: 2px solid var(--pierre); border-radius: var(--rayon-carte); padding: .75rem .75rem 1.25rem; display: grid; gap: .6rem; align-content: start; }
.anatomie__bloc figure { margin: 0; }
.anatomie__bloc svg { display: block; width: 100%; height: auto; border-radius: calc(var(--rayon-carte) - 8px); }
.anatomie__bloc h3 { font-size: 1.2rem; font-weight: 800; padding: 0 .5rem; margin: .25rem 0 0; }
.anatomie__bloc p { color: var(--gris); padding: 0 .5rem; margin: 0; }
.anatomie__bloc b { color: var(--marine); }
@media (min-width: 1000px) { .anatomie { grid-template-columns: repeat(6, minmax(0, 1fr)); } .anatomie__bloc { grid-column: span 2; } .anatomie__bloc:nth-child(n+4) { grid-column: span 3; } .anatomie__bloc:nth-child(n+4) svg { max-height: 260px; width: 100%; } }
.anatomie__bloc--photo .bascule-seule { aspect-ratio: 1200 / 751; background: #042A39; border-radius: calc(var(--rayon-carte) - 8px); }
.anatomie__bloc--photo .bascule-seule img { object-fit: cover; }
.anatomie__bloc--photo .bascule__choix { left: 10px; top: 10px; }
.anatomie__bloc--photo .bascule__choix button { padding: .4rem .7rem; font-size: .75rem; min-height: 32px; }
@media (min-width: 1000px) { .anatomie__bloc:nth-child(-n+2) { grid-column: span 3; } .anatomie__bloc:nth-child(n+3) { grid-column: span 2; } .anatomie__bloc:nth-child(n+4) svg { max-height: none; } }
.anatomie-seuil .bascule-seule { aspect-ratio: 1200 / 751; background: #042A39; } .anatomie-seuil .bascule-seule img { object-fit: cover; }
.prix-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; align-items: stretch; } .prix-duo .prix { max-width: none; height: 100%; }

/* Volets et screens : formes et tailles de coffre */
.coffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); margin: 1.5rem 0 clamp(1.5rem, 4vw, 2.5rem); }
.coffre { background: var(--pierre); border-radius: var(--rayon-carte); padding: 1rem 1rem 1.25rem; display: grid; gap: .4rem; align-content: start; }
.coffre figure { margin: 0 0 .25rem; background: #fff; border-radius: calc(var(--rayon-carte) - 8px); padding: .5rem; }
.coffre svg { display: block; width: 100%; height: auto; max-height: 130px; }
.coffre h3 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.coffre p { color: var(--gris); font-size: var(--t-s); margin: 0; }
.coffres-tailles { margin: 0; background: #fff; border-radius: var(--rayon-carte); padding: clamp(1rem, 3vw, 2rem); }
.bande--pierre .coffres-tailles { background: #fff; }
.coffres-tailles svg { display: block; width: 100%; height: auto; }
.coffres-infos { align-items: center; }
@media (max-width: 820px) { .coffres { grid-template-columns: 1fr 1fr; } }
.bande:not(.bande--pierre) .coffres-tailles { background: var(--pierre); }
.coffres + .en-situation { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.titre-section + .en-situation { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.toiles { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.toiles span { font-family: var(--f-titre); font-weight: 800; color: var(--marine); margin-right: .5rem; }
.toiles figure { margin: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(4,42,57,.15); }
.toiles img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vidéo YouTube au clic */
.video { margin: 0; max-width: 900px; }
.video__lien, .video__cadre { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rayon-carte); overflow: hidden; border: 0; background: var(--marine); }
.video__lien img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.7); transition: filter .3s, transform .6s; }
.video__lien:hover img { filter: brightness(.85); transform: scale(1.02); }
.video__bouton { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.video__bouton::after { content: ""; position: absolute; left: 34px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--marine); }
.video__titre { position: absolute; left: 1.25rem; bottom: 1rem; right: 1.25rem; color: #fff; font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.video figcaption { font-size: var(--t-s); color: var(--gris); margin-top: .6rem; }
.video__lien:focus-visible { outline: 3px solid var(--cuivre); outline-offset: 3px; }
.designs--flyscreen { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.designs--flyscreen figure { margin: 0; }
.designs--flyscreen img { width: 100%; height: auto; border-radius: var(--rayon-moyen); display: block; }
@media (max-width: 760px) { .designs--flyscreen { grid-template-columns: 1fr; } }
/* Bardage : nuancier RAL */
.designs--ral { align-items: center; }
.ral { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.ral span { aspect-ratio: 1; border-radius: 12px; position: relative; box-shadow: inset 0 0 0 1px rgba(4,42,57,.12); }
.ral small { position: absolute; left: .45rem; bottom: .35rem; font-size: .68rem; font-weight: 600; color: inherit; opacity: .85; }
.chiffre-carte b[data-depart] { transition: color .3s; }
.chiffre-carte b[data-depart].est-arrive { color: var(--cuivre-encre, #A4511F); }
.en-situation--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .en-situation--2 { grid-template-columns: 1fr; } .en-situation--2 figure:last-child { grid-column: auto; } }
.en-situation--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .en-situation--4 { grid-template-columns: 1fr 1fr; } .en-situation--4 figure:last-child { grid-column: auto; } }
/* FAQ */
.faq { display: grid; gap: .75rem; max-width: 860px; }
.faq__item { background: var(--papier); border: 2px solid var(--pierre); border-radius: 18px; padding: 0 1.25rem; }
.bande--pierre .faq__item { border-color: transparent; }
.faq__item summary { cursor: pointer; list-style: none; font-family: var(--f-titre); font-weight: 700; color: var(--marine); padding: 1rem 2rem 1rem 0; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item p { margin: 0 0 1.1rem; color: var(--gris); }
.faq__item summary:focus-visible { outline: 3px solid var(--cuivre); outline-offset: 3px; border-radius: 6px; }
/* Gammes : coupe technique en filigrane */
.gamme { position: relative; overflow: hidden; isolation: isolate; }
.gamme > *:not(.gamme__coupe) { position: relative; z-index: 1; }
.gamme__coupe { position: absolute; z-index: 0; right: 3%; bottom: 4%; height: 92%; width: auto; max-width: 55%; object-fit: contain; object-position: right bottom; opacity: .16; pointer-events: none; transition: opacity .35s ease, transform .5s ease; -webkit-mask-image: linear-gradient(to left, #000 45%, transparent); mask-image: linear-gradient(to left, #000 45%, transparent); }
.gamme:hover .gamme__coupe, .gamme:focus-visible .gamme__coupe { opacity: .32; transform: translateX(-3%) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .gamme__coupe { transition: none; } .gamme:hover .gamme__coupe { transform: none; } }
.carte__liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .25rem; }
/* Menu : « Menuiseries » et « Services » ouvrent seulement leur sous-menu */
.nav .nav__ouvrir { background: none; border: 0; cursor: pointer; color: var(--marine); font-family: var(--f-titre); font-size: 1rem; padding: .55rem .75rem; border-radius: var(--rayon); display: block; line-height: inherit; }
.nav .nav__ouvrir:hover, .nav .ouvrant.est-ouvert > .nav__ouvrir { background: var(--pierre); color: var(--marine); }
.nav .nav__ouvrir:focus-visible { outline: 3px solid var(--cuivre); outline-offset: 2px; }
.ouvrant > .nav__ouvrir::after { content: ""; display: inline-block; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-.2em); margin-left: .5em; opacity: .7; }
.ouvrant.est-ouvert > .sous-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
/* Coulissants PVC : même sélecteur que l'aluminium */
.vitrine--pvc .vitrine__photo { aspect-ratio: 1; }
.vitrine--pvc .decomp { margin: 0; }
.vitrine--pvc .decomp__scene { border-radius: calc(var(--rayon-carte) - 8px); overflow: hidden; }
/* Articles et pages de texte */
.article { font-size: 1.06rem; line-height: 1.7; }
.article h2 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); color: var(--marine); margin: 1.2rem 0 0; letter-spacing: -.01em; }
.article h3 { font-family: var(--f-titre); font-weight: 700; font-size: 1.15rem; color: var(--marine); margin: 1rem 0 0; }
.article p { margin: 0; color: var(--encre); }
.article .liste { margin: 0; }
.article a { color: var(--cuivre-encre); }

/* Liens sur fond marine : cuivre lisible, effet néon au survol */
.bande--marine a:not(.btn):not(.gamme), .bande--marine .note a { color: var(--cuivre); transition: color .2s, text-shadow .2s; }
.bande--marine a:not(.btn):not(.gamme):hover, .bande--marine a:not(.btn):not(.gamme):focus-visible {
  color: #FFE3CC;
  text-shadow: 0 0 6px rgba(255, 170, 110, .95), 0 0 16px rgba(228, 139, 83, .8), 0 0 28px rgba(228, 139, 83, .5);
}
.prix__img { margin: .6rem 0 0; height: 200px; display: flex; align-items: center; justify-content: center; }
.prix__img picture, .prix__img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.prix__img img { border-radius: 12px; }

/* Animations schématiques (garage, cylindre) */
.anim { margin: 0; background: var(--papier); border-radius: var(--rayon-carte); padding: clamp(1rem, 3vw, 1.75rem); border: 2px solid var(--trait); }
.bande--pierre .anim { border-color: transparent; }
.anim svg { width: 100%; height: auto; display: block; font-family: var(--f-texte, inherit); }
.anim figcaption { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1rem; font-size: var(--t-s, .9rem); color: var(--encre); }
.anim figcaption span { flex: 1 1 260px; }
.g-plafond, .g-sol { fill: var(--trait); }
.g-mur { fill: #B9C7CC; }
.g-rail { fill: none; stroke: #8FA3AA; stroke-width: 4; stroke-linecap: round; }
.g-moteur-rail { stroke: #8FA3AA; stroke-width: 3; }
.g-moteur { fill: var(--marine); }
.g-panneau { stroke: var(--cuivre); stroke-width: 12; stroke-linecap: butt; }
.g-ressort { fill: none; stroke: var(--marine); stroke-width: 2.2; stroke-linejoin: round; }
.g-cable { stroke: var(--marine); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.g-poulie { fill: var(--papier); stroke: var(--marine); stroke-width: 2; }
.g-cote line { stroke: var(--marine); stroke-width: 1.2; }
.g-cote text, .g-legende { fill: var(--marine); font-size: 13px; font-weight: 700; }
.g-legende--fin { font-weight: 400; }
.g-fleche { stroke: var(--marine); stroke-width: 1.2; }
.c-titre { fill: var(--marine); font-size: 15px; font-weight: 700; }
.c-note { fill: #5B6E75; font-size: 12.5px; }
.c-profil { fill: #C9D3D6; stroke: #8FA3AA; stroke-width: 2; }
.c-rotor { fill: #E2E8EA; stroke: #8FA3AA; stroke-width: 1.5; }
.c-fente { fill: var(--marine); }
.c-cle rect { fill: var(--cuivre); }
.c-cle .c-trou { fill: var(--papier); }
.c-cle--int rect { fill: #A4511F; }
.c-cle, .c-pene, .c-ouvrant, .c-ok { transform-box: fill-box; transform-origin: 50% 50%; }
.c-dormant { fill: #B9C7CC; }
.c-ouvrant { fill: var(--pierre); stroke: #8FA3AA; stroke-width: 2; }
.c-pene { fill: var(--marine); }
.c-ok circle { fill: #2E8B57; } .c-ok path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .c-ok text { fill: #2E8B57; font-size: 14px; font-weight: 700; }
/* état de départ (avec JS) */
.js [data-cylindre] .c-cle--ext { opacity: 0; transform: scale(1.7); }
.js [data-cylindre] .c-ok { opacity: 0; }
/* lecture */
.js [data-cylindre].est-joue .c-cle--ext { animation: cle-ext 2s ease forwards; }
@keyframes cle-ext { 0% { opacity: 0; transform: scale(1.7) rotate(0); } 30% { opacity: 1; transform: scale(1) rotate(0); } 45% { transform: scale(1) rotate(0); } 75%, 100% { opacity: 1; transform: scale(1) rotate(90deg); } }
.js [data-cylindre].est-joue .c-ouvrant { animation: ouvrant 3.4s ease forwards; }
@keyframes ouvrant { 0%, 72% { transform: translateX(0); } 100% { transform: translateX(-26px); } }
.js [data-cylindre].est-joue .c-pene { animation: pene-ouvrant 3.4s ease forwards; }
@keyframes pene-ouvrant { 0%, 45% { transform: translateX(0); } 65%, 72% { transform: translateX(-40px); } 100% { transform: translateX(-66px); } }
.js [data-cylindre].est-joue .c-ok { animation: ok 3.8s ease forwards; }
@keyframes ok { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-cylindre] .c-cle--ext, .js [data-cylindre] .c-ok { opacity: 1; transform: rotate(90deg); animation: none !important; }
  .js [data-cylindre] .c-ok { transform: none; }
  .js [data-cylindre] .c-pene { transform: translateX(-66px); animation: none !important; }
  .js [data-cylindre] .c-ouvrant { transform: translateX(-26px); animation: none !important; }
}
.anim-cadre { max-width: 860px; }

/* Séquence d'images (porte de garage qui s'ouvre) */
.sequence__scene { position: relative; border-radius: var(--rayon-moyen); overflow: hidden; }
.sequence__scene picture:not(:first-child) img { position: absolute; inset: 0; height: 100%; }
.sequence__vue { opacity: 0; transition: opacity .9s ease; }
.sequence__vue.est-active { opacity: 1; }
.sequence__scene picture:first-child .sequence__vue { opacity: 1; }
.sequence__bouton { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; font: 700 .85rem/1 var(--f-titre); color: var(--papier); background: rgba(4, 42, 57, .82); border: 0; border-radius: var(--rayon); padding: .65rem 1rem; cursor: pointer; backdrop-filter: blur(4px); }
.sequence__bouton:hover, .sequence__bouton:focus-visible { background: var(--cuivre); color: var(--marine); }
.anim-cadre--carre { max-width: 760px; }
.anim-cadre--carre .sequence { grid-template-columns: minmax(0, 300px) 1fr; align-items: center; gap: 1rem 1.75rem; }
.anim-cadre--carre .sequence__bouton { font-size: .78rem; padding: .55rem .85rem; left: .5rem; bottom: .5rem; }
.anim-cadre--carre .sequence figcaption { gap: .5rem; }
.txt-cuivre { color: var(--cuivre-encre); font-weight: 800; }
@media (max-width: 600px) { .anim-cadre--carre .sequence { grid-template-columns: 1fr; } .anim-cadre--carre .sequence__scene { max-width: 280px; } }
.anim-cadre .sequence { margin: 0; display: grid; gap: .75rem; }
.anim-cadre .sequence img { width: 100%; height: auto; display: block; }
.anim-cadre .sequence figcaption { display: grid; gap: .15rem; font-size: var(--t-s); color: var(--gris); }
.anim-cadre .sequence figcaption b { font-family: var(--f-titre); font-weight: 800; color: var(--marine); font-size: 1.05rem; }
.anim-cadre .sequence figcaption b.txt-cuivre { color: var(--cuivre-encre); font-family: inherit; font-size: inherit; }
.anim-cadre--carre .sequence__scene { border-radius: var(--rayon-carte); border: 2px solid var(--trait); }
.anim-cadre--carre .sequence figcaption { background: var(--pierre); border-radius: var(--rayon-carte); padding: 1.4rem 1.6rem; }
.prix:has(.prix__img) { display: flex; flex-direction: column; } .prix:has(.prix__img) .prix__img { margin-top: auto; padding-top: .6rem; }
.equipe img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon-moyen); display: block; }
.equipe figure { align-content: start; }

/* Entretien : gestes en cartes photo animées (en-tête) */
.heros--v2 .collage__photo:has(.gestes) { background: var(--marine-2); }
.gestes { aspect-ratio: 4 / 3.6; display: grid; grid-template-rows: 1fr auto auto; padding: clamp(1rem, 3vw, 1.6rem); gap: .9rem; color: var(--papier); }
.gestes__pile { position: relative; }
.geste { position: absolute; left: 50%; top: 50%; width: min(54%, 290px); margin: 0; background: #fff; padding: 8px 8px 22px; border-radius: 6px; box-shadow: 0 16px 34px rgba(0,0,0,.35);
  transform: translate(10%, -50%) rotate(calc(var(--tilt) + 10deg)); opacity: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.geste img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 3px; }
.geste.est-active { transform: translate(-50%, -50%) rotate(var(--tilt)); opacity: 1; z-index: 2; }
.geste.est-sortie { transform: translate(-120%, -46%) rotate(calc(var(--tilt) - 12deg)) scale(.9); opacity: 0; }
.gestes__fleche { position: absolute; right: 2%; top: 4%; width: clamp(56px, 16%, 96px); z-index: 3; fill: none; stroke: var(--cuivre); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.gestes__fleche path:first-child { stroke-dasharray: 130; stroke-dashoffset: 130; }
.gestes__pointe { opacity: 0; }
.gestes.est-fleche .gestes__fleche path:first-child { animation: trait-fleche .9s ease forwards; }
.gestes.est-fleche .gestes__pointe { animation: pointe-fleche .2s ease .8s forwards; }
@keyframes trait-fleche { to { stroke-dashoffset: 0; } }
@keyframes pointe-fleche { to { opacity: 1; } }
.gestes__textes { display: grid; min-height: 5.6em; }
.geste-texte { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.geste-texte.est-active { opacity: 1; transform: none; transition-delay: .25s; }
.geste-texte b { display: flex; align-items: center; gap: .55rem; font-family: var(--f-titre); font-size: 1.15rem; color: var(--papier); }
.geste-texte b span { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--cuivre); color: var(--marine); font-size: .85rem; font-weight: 800; }
.geste-texte p { margin: .3rem 0 .15rem; color: var(--sur-marine); font-size: .95rem; }
.geste-texte em { font-style: normal; font-size: .85rem; color: var(--cuivre); font-weight: 600; }
.gestes__points { display: flex; gap: .45rem; }
.gestes__points button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; }
.gestes__points button[aria-current] { background: var(--cuivre); width: 22px; border-radius: 6px; }
@media (max-width: 600px) { .gestes { aspect-ratio: auto; grid-template-rows: 230px auto auto; } }
@media (prefers-reduced-motion: reduce) { .geste, .geste-texte { transition: none; } .gestes__fleche path { animation: none !important; stroke-dashoffset: 0; opacity: 1; } }
.encart + .chiffres { margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.prix-grille:has(.kit-contenu) { align-items: stretch; }
.pictos { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .9rem .6rem; }
.pictos li { display: grid; justify-items: center; text-align: center; gap: .35rem; font-size: .8rem; line-height: 1.25; color: var(--gris); }
.pictos svg { width: 44px; height: 44px; fill: none; stroke: var(--marine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pictos .p-accent { stroke: var(--cuivre); }
.kit-contenu .pictos { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: .9rem; }
.kit-contenu .pictos svg { width: 52px; height: 52px; }
@media (max-width: 700px) { .kit-contenu .pictos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.retouche { display: block; margin-top: .3rem; font-size: .8rem; font-style: italic; opacity: .8; }
/* Photo d'intro en fond d'écran (Réalisations, MasterLine 8) : photo pleine largeur, fondu marine sous le texte */
.heros:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) { position: relative; isolation: isolate; }
.heros:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) .heros__grille { grid-template-columns: minmax(0, 1fr); min-height: clamp(420px, 46vw, 600px); align-items: center; }
.heros:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) .heros__texte { position: relative; z-index: 2; max-width: 34rem; }
.heros .collage__photo:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) { position: absolute; inset: 0; z-index: 0; border-radius: 0; margin: 0; background: var(--marine); }
.heros .collage__photo:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) picture, .heros .collage__photo img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"]) { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 62% 50%; transform: none !important; }
.heros .collage__photo:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"]))::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--marine) 0%, rgba(4,42,57,.93) 30%, rgba(4,42,57,.55) 50%, rgba(4,42,57,0) 70%); }
@media (max-width: 860px) {
  .heros:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) .heros__grille { min-height: 0; padding-bottom: calc(50.3vw + 1rem); }
  .heros .collage__photo:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) { top: auto; height: auto; }
  .heros .collage__photo:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"])) img { height: auto; aspect-ratio: 1600 / 805; }
  .heros .collage__photo:has(img:is([src*="realisations-heros"],[src*="baie-vitree-masterline"],[src*="bardage-alu-paralline"],[src*="transfo-ouverture"]))::after { background: linear-gradient(180deg, var(--marine) 0%, rgba(4,42,57,0) 35%); }
}.heros .collage__photo img[src*="baie-vitree-masterline"] { object-position: 60% 55%; }
@media (max-width: 860px) {
  .heros:has(img[src*="baie-vitree-masterline"]) .heros__grille { padding-bottom: calc(94vw + 1rem); }
  .heros .collage__photo img[src*="baie-vitree-masterline"] { aspect-ratio: 1800 / 1699; }
}

/* Coulissants : diaporama en fond d'écran, fondu marine sous le texte */
.heros--page:has(.diapo-cadre) { position: relative; isolation: isolate; }
.heros--page:has(.diapo-cadre) .heros__grille { grid-template-columns: minmax(0, 1fr); min-height: clamp(420px, 46vw, 600px); align-items: center; }
.heros--page:has(.diapo-cadre) .heros__texte { position: relative; z-index: 2; max-width: 34rem; }
.heros--page .collage__photo:has(.diapo-cadre) { position: absolute; inset: 0; z-index: 0; border-radius: 0; margin: 0; background: var(--marine); overflow: hidden; }
.heros--page .collage__photo .diapo-cadre { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.heros--page .collage__photo .diapo { position: absolute; inset: 0; }
.heros--page .collage__photo .diapo__vue img { aspect-ratio: auto; object-position: 60% 50%; }
.heros--page .collage__photo:has(.diapo-cadre)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--marine) 0%, rgba(4,42,57,.93) 30%, rgba(4,42,57,.55) 50%, rgba(4,42,57,0) 70%); }
.heros--page .collage__photo .diapo__credit { position: absolute; z-index: 2; right: max(16px, 2vw); top: 12px; font-size: .72rem; color: rgba(255,255,255,.75); }
@media (max-width: 860px) {
  .heros--page:has(.diapo-cadre) .heros__grille { min-height: 0; padding-bottom: calc(80vw + 1rem); }
  .heros--page .collage__photo:has(.diapo-cadre) { top: auto; height: 80vw; }
  .heros--page .collage__photo:has(.diapo-cadre)::after { background: linear-gradient(180deg, var(--marine) 0%, rgba(4,42,57,0) 35%); }
  .heros--page .collage__photo .diapo__credit { top: auto; bottom: 12px; left: 16px; right: auto; }
}
@media (max-width: 860px) {
  .heros:has(img[src*="bardage-alu-paralline"],[src*="transfo-ouverture"]) .heros__grille { padding-bottom: calc(94vw + 1rem); }
  .heros .collage__photo img[src*="bardage-alu-paralline"] { aspect-ratio: 670 / 630; }
}
.heros .collage__photo img[src*="bardage-alu-paralline"] { object-position: 60% 28%; }
@media (max-width: 860px) {
  .heros:has(img[src*="transfo-ouverture"]) .heros__grille { padding-bottom: calc(67vw + 1rem); }
  .heros .collage__photo img[src*="transfo-ouverture"] { aspect-ratio: 1400 / 937; }
}
.heros .collage__photo img[src*="transfo-ouverture"] { object-position: 55% 80%; }
.en-situation--carre img { aspect-ratio: 1 / 1; }
.ossature-demo { align-items: center; }
.ossature-demo .collage__photo img { aspect-ratio: 3 / 4; }
.ossature-demo .encart { max-width: none; }
.fiche__photo { margin: 0 0 1.1rem; }
.fiche__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-moyen); display: block; }
.fiche__photo figcaption { font-size: var(--t-s); color: var(--gris); margin-top: .45rem; }
.fiche--signature .fiche__photo figcaption { color: var(--sur-marine); }
/* Bardages : les 4 coiffes */
.coiffes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.coiffe { margin: 0; background: var(--papier); border-radius: var(--rayon-carte); padding: 1rem 1rem 1.3rem; display: grid; gap: .5rem; align-content: start; }
.coiffe img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
.coiffe figcaption { display: grid; gap: .15rem; font-size: var(--t-s); color: var(--gris); }
.coiffe figcaption b { font-family: var(--f-titre); font-weight: 800; font-size: 1.3rem; color: var(--marine); }
.coiffe__prof { font-family: var(--f-titre); font-weight: 700; color: var(--cuivre-encre); font-size: 1rem; }
@media (max-width: 860px) { .coiffes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Réalisations : petite fiche technique du chantier, dans la colonne de texte */
.heros__fiche { margin: 1.4rem 0 0; max-width: 30rem; padding: .75rem 1rem; border-left: 3px solid var(--cuivre); border-radius: 4px 12px 12px 4px;
  background: rgba(255,255,255,.06); color: var(--sur-marine); font-size: .8rem; line-height: 1.45; display: grid; gap: .15rem; }
.heros__fiche b { color: var(--cuivre); font-family: var(--f-titre); font-size: .86rem; }
@media (max-width: 860px) { .heros:has(img[src*="realisations-heros"]) .heros__grille { padding-bottom: calc(50.3vw + 1rem); } }

/* Recrutement : trois profils côte à côte */
.deux-gammes.trois-profils { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 1000px) { .deux-gammes.trois-profils { grid-template-columns: 1fr; } }
/* Formulaire de devis court (étape 1) */
.formulaire .mention { font-size: var(--t-s); color: var(--texte-doux, #5b6b72); margin: -.25rem 0 0; }
.formulaire .erreur { color: #B3261E; font-size: var(--t-s); margin: .4rem 0 0; }
.formulaire [hidden] { display: none !important; }
.gestes__note { font-size: .78rem; color: rgba(255,255,255,.55); margin: -.6rem 0 0; padding: 0 1.5rem 1.1rem; text-align: left; }
.partenaires-photos { display: grid; grid-template-columns: 1fr 2.59fr; gap: 1.25rem; margin-top: 1.5rem; align-items: start; }
.partenaire-photo { margin: 0; min-width: 0; }
@media (max-width: 760px) { .partenaires-photos { grid-template-columns: 1fr; } }
.partenaire-photo img { width: 100%; height: auto; display: block; border-radius: var(--rayon-carte, 12px); }
.partenaire-photo figcaption { font-size: var(--t-s); color: var(--texte-doux, #5b6b72); margin-top: .5rem; }

/* Menu mobile : trois rubriques repliables (Menuiseries, Services, PJ-Bati) */
.menu-groupe { border-bottom: 1px solid rgba(255,255,255,.14); }
.menu-groupe > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-family: var(--f-titre); font-weight: 600; font-size: 1.25rem; color: var(--papier); }
.menu-groupe > summary::-webkit-details-marker { display: none; }
.menu-groupe > summary::after { content: ""; width: .6rem; height: .6rem; border-right: 2px solid var(--cuivre); border-bottom: 2px solid var(--cuivre); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s; }
.menu-groupe[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.menu-groupe > summary:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 2px; }
.menu-groupe ul { padding: 0 0 .75rem .9rem !important; border-left: 2px solid var(--cuivre); margin-bottom: .9rem !important; }
.menu-groupe a:last-child, .menu-groupe li:last-child a { border-bottom: 0; }
.menu-groupe a[aria-current="page"] { color: var(--cuivre); }
.menu-mobile__tel { display: block; padding: 1rem 0 0; color: var(--papier); font-family: var(--f-titre); font-weight: 600; text-decoration: none; border: 0 !important; }
.entete__contact .menu-mobile__panneau .btn { display: flex; justify-content: center; background: var(--cuivre); color: var(--marine); }
/* Menu mobile en carte blanche, page assombrie derrière */
.menu-mobile[open] > summary::before { content: ""; position: fixed; inset: 0; background: rgba(2, 20, 28, .62); cursor: default; }
.menu-mobile[open] > summary { position: relative; z-index: 1; background: var(--marine); color: var(--papier); border-color: var(--marine); }
.menu-mobile__panneau { z-index: 2; background: var(--papier); color: var(--encre); box-shadow: 0 18px 44px rgba(0,0,0,.35); padding-top: .25rem; }
.menu-mobile__panneau a { color: var(--marine); border-bottom-color: var(--trait); }
.menu-groupe { border-bottom-color: var(--trait); }
.menu-groupe > summary { color: var(--marine); }
.menu-groupe > summary::after { border-color: var(--cuivre-encre); }
.menu-groupe[open] > summary { color: var(--cuivre-encre); }
.menu-groupe a[aria-current="page"] { color: var(--cuivre-encre); font-weight: 600; }
.menu-mobile__tel { color: var(--marine); }
.entete__contact .menu-mobile__panneau .btn { background: var(--cuivre); color: var(--marine); }
.menu-mobile[open] > summary::before { z-index: -1; }
.menu-mobile .mm-fermer, .menu-mobile[open] .mm-ouvrir { display: none; }
.menu-mobile[open] .mm-fermer { display: inline; }
/* Correctif mobile : les proportions propres à chaque photo de héros n'étaient pas appliquées (règle générique plus forte) */
@media (max-width: 860px) {
  .heros.heros--v2 .collage__photo img[src*="baie-vitree-masterline"] { aspect-ratio: 1800 / 1699; }
  .heros.heros--v2 .collage__photo img[src*="bardage-alu-paralline"] { aspect-ratio: 670 / 630; }
  .heros.heros--v2 .collage__photo img[src*="transfo-ouverture"] { aspect-ratio: 1400 / 937; }
}
.collage__photo:has(.photo-mention) { position: relative; }
.photo-mention { position: absolute; right: .75rem; bottom: .6rem; font-size: .72rem; color: rgba(255,255,255,.9); background: rgba(4,42,57,.55); padding: .15rem .5rem; border-radius: 999px; }