/* S4 « Synthèse » : base S3 (fond plâtre, flou gaussien), rectangles « ombre portée » de S2 sur les pages Public / Particulier */
.v-s4 .badge-ia { display: none !important; }

/* ---------- Rectangles « ombre portée » (S2), découverte en diagonale, sans reflet ---------- */
.v5-diag { position: relative; overflow: hidden; }
.v5-diag img { clip-path: polygon(0 0, 0 0, 0 0, 0 0); transition: clip-path 1.4s cubic-bezier(.7,0,.2,1), transform 2.2s var(--ease); transform: scale(1.08); }
.v5-diag.vu img { clip-path: polygon(0 0, 200% 0, 0 200%, 0 0); transform: none; }
.v5-diag::after { display: none !important; }
@media (prefers-reduced-motion: reduce) { .v5-diag img { clip-path: none; transform: none; transition: none; } }

.s4-intro { padding: clamp(120px, 20vh, 200px) var(--m) clamp(40px, 7vh, 80px); max-width: var(--largeur); margin: 0 auto; }
.s4-intro .m-massif { font-size: clamp(54px, 11vw, 170px); }
.s4-intro-n { margin-top: 18px; font: 300 12px/1.4 'Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.s4-rects { padding: 0 var(--m) clamp(80px, 14vh, 160px); max-width: var(--largeur); margin: 0 auto; }
.v5-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 34px) clamp(14px, 2vw, 28px); }
.v5-carte { display: block; color: inherit; }
.v5-carte:nth-child(3n+2) { margin-top: 9vh; }
.v5-carte .ph { aspect-ratio: 4 / 5; background: #dcd8d0; }
.v5-carte .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-carte .inf { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.v5-carte .inf b { font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.v5-carte .inf span { color: #3c3b38; font-size: 13px; line-height: 1.4; }
.v5-carte:hover .ph img { transform: scale(1.03); transition-duration: .9s; }
@media (max-width: 760px) { .v5-grille { grid-template-columns: 1fr 1fr; } .v5-carte:nth-child(3n+2) { margin-top: 0; } .v5-carte:nth-child(even) { margin-top: 6vh; } .v5-carte .inf b { font-size: 13px; } .v5-carte .inf span { font-size: 12px; } }

/* Galerie de la page projet */
.s4-cover { height: 100svh; position: relative; overflow: hidden; cursor: zoom-in; background: #111; }
.s4-cover-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Couverture de la fiche projet (Pio, 3 nov.) : la photo suit le doigt quand on glisse vers le projet voisin ;
   l'acronyme et le descriptif apparaissent quelques secondes, puis s'effacent pour laisser la photo seule. */
.s4-cover { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.s4-cover-ph { position: absolute; inset: 0; z-index: 1; transition: transform .32s cubic-bezier(.3,.7,.2,1), opacity .32s ease; will-change: opacity; }
/* Dissolution vers le projet voisin (Pio, 3 nov.) : sa photo attend sous la photo actuelle, qui s'efface dessus. */
.s4-cover-sous { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s4-cover-sous img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s4-cover-sous img:not([src]) { display: none; }
.s4-cover-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,0) 46%); opacity: 0; animation: s4-titre-voile 4.4s ease .3s forwards; }
.s4-cover.s4-clair .s4-cover-voile { background: linear-gradient(0deg, rgba(255,255,255,.4), rgba(255,255,255,0) 46%); }
.s4-cover-titre { position: absolute; left: var(--m); right: var(--m); bottom: calc(clamp(40px, 10vh, 100px) + env(safe-area-inset-bottom, 0px)); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 12px; max-width: var(--largeur); margin: 0 auto; color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.4);
  opacity: 0; animation: s4-titre-flash 4.4s cubic-bezier(.3,.6,.3,1) .3s forwards; }
.s4-cover-titre strong { font: 800 clamp(46px, 10vw, 130px)/.9 var(--sans); letter-spacing: .01em; text-transform: uppercase; }
.s4-cover-titre span { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.4; max-width: 40ch; color: rgba(255,255,255,.9); }
.s4-cover.s4-clair .s4-cover-titre { color: #111; text-shadow: 0 1px 16px rgba(255,255,255,.4); }
.s4-cover.s4-clair .s4-cover-titre span { color: rgba(17,17,17,.85); }
@keyframes s4-titre-flash { 0% { opacity: 0; transform: translateY(16px); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes s4-titre-voile { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .s4-cover-ph { transition: none; }
  @keyframes s4-titre-flash { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
}
.v5-galerie { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 60px) clamp(14px, 2vw, 28px); padding: 40px var(--m) 120px; max-width: 1500px; margin: 0 auto; }
.v5-fig { cursor: zoom-in; }
.v5-fig img { width: 100%; height: auto; display: block; }
.v5-fig:nth-child(4n+1) { grid-column: 1 / span 7; }
.v5-fig:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 14vh; }
.v5-fig:nth-child(4n+3) { grid-column: 3 / span 10; }
.v5-fig:nth-child(4n+4) { grid-column: 1 / span 6; }
@media (max-width: 760px) { .v5-galerie { grid-template-columns: 1fr; } .v5-fig:nth-child(n) { grid-column: auto; margin-top: 0; } .v5-fig:nth-child(even) { margin-left: 14%; } }

/* ---------- Carrousel de l'accueil : éléments communs ---------- */
.s4-car { position: relative; }
.s4-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.s4-tete .m-etiquette { margin-bottom: 10px; }
.s4-h2 { font: 900 clamp(30px, 4.4vw, 60px)/.9 var(--sans); letter-spacing: -.04em; text-transform: uppercase; }
.s4-filtres button { padding: 8px 13px; font-size: 11px; }
/* Sur photo : texte blanc, ou noir quand la photo est claire */
.s4a, .s4b, .s4c { --t: #fff; --t2: rgba(255,255,255,.78); --ombre: 0 1px 14px rgba(0,0,0,.35); color: var(--t); }
.s4a.s4-clair, .s4b.s4-clair, .s4c.s4-clair { --t: #111; --t2: rgba(17,17,17,.78); --ombre: 0 1px 14px rgba(255,255,255,.35); }
.s4a .s4-tete, .s4b .s4-tete, .s4c .s4-tete { position: relative; z-index: 3; }
.s4a .m-etiquette, .s4b .m-etiquette, .s4c .m-etiquette { color: var(--t2); transition: color .6s; }
.s4a .s4-h2, .s4b .s4-h2, .s4c .s4-h2 { color: var(--t); text-shadow: var(--ombre); transition: color .6s; }
.s4a .s4-filtres button, .s4b .s4-filtres button, .s4c .s4-filtres button { color: var(--t); border-color: var(--t2); background: transparent; transition: color .6s, border-color .6s, background .3s; }
.s4a .s4-filtres button[aria-pressed="true"], .s4b .s4-filtres button[aria-pressed="true"], .s4c .s4-filtres button[aria-pressed="true"] { background: var(--t); color: #fff; border-color: var(--t); }
.s4a:not(.s4-clair) .s4-filtres button[aria-pressed="true"], .s4b:not(.s4-clair) .s4-filtres button[aria-pressed="true"], .s4c:not(.s4-clair) .s4-filtres button[aria-pressed="true"] { color: #111; }
.s4a-fond img, .s4b-fond img, .s4c-fond img, .s4d-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 6s ease-out; }
.s4a-fond img.on, .s4b-fond img.on, .s4c-fond img.on, .s4d-cadre img.on { opacity: 1; transform: scale(1); }

/* A « Liste fine » */
.s4a { padding: clamp(80px, 14vh, 140px) var(--m) 30vh; }
/* Hauteur « grande » (lvh) : sur téléphone, quand la barre d'adresse se replie, la fenêtre grandit au-delà de 100svh
   et une bande du fond plâtre apparaissait sous la photo, en bas de l'écran (29 octobre). */
.s4a-fond { position: sticky; top: 0; height: 100vh; height: 100lvh; margin: calc(-1 * clamp(80px, 14vh, 140px)) calc(-1 * var(--m)) -100vh; margin-bottom: -100lvh; overflow: hidden; z-index: 0; background: #1a1a1a; }
.s4a-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 55%); transition: opacity .6s; }
.s4a.s4-clair .s4a-fond::after { opacity: 0; }
/* Pio, 3 nov. : le bloc « Projets » (Tous / Particulier / Public) était collé à l'aiguillage et passait sous l'en-tête : descendu un peu */
.s4a .s4-tete { max-width: var(--largeur); margin: clamp(64px, 9vh, 100px) auto 6vh; }
.s4a-liste { position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 0; max-width: var(--largeur); }
.s4a-liste li { padding: 7vh 0; }
.s4a-liste a { display: inline-flex; flex-direction: column; gap: 6px; color: var(--t); opacity: .38; transition: opacity .5s, color .6s; text-shadow: var(--ombre); }
.s4a-liste a.actif { opacity: 1; }
.s4a-liste strong { font: 800 clamp(22px, 2.6vw, 34px)/1 var(--sans); letter-spacing: .02em; }
.s4a-liste span { font-size: 13px; line-height: 1.35; max-width: 34ch; color: var(--t2); }
@media (hover: hover) and (min-width: 761px) { .s4a-liste li { padding: 3.2vh 0; } .s4a-liste a:hover { opacity: 1; } }

/* B « Une à la fois » */
.s4b-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: clamp(80px, 12vh, 120px) var(--m) 0; box-sizing: border-box; }
.s4b-fond { position: absolute; inset: 0; background: #1a1a1a; }
.s4b-voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.34), rgba(0,0,0,0) 34%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 26%); pointer-events: none; transition: opacity .6s; }
.s4b.s4-clair .s4b-voile { opacity: 0; }
.s4b-n { position: absolute; right: var(--m); bottom: calc(5vh + 4px); z-index: 3; font: 300 12px/1 'Plex Mono', ui-monospace, monospace; letter-spacing: .14em; color: var(--t); text-shadow: var(--ombre); }
.s4b-rail { position: absolute; right: calc(var(--m) * .45); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 5px; }
.s4b-rail i { width: 2px; height: 10px; background: var(--t); opacity: .3; transition: opacity .3s, height .3s; }
.s4b-rail i.on { opacity: 1; height: 22px; }
.s4b-leg { position: absolute; left: var(--m); bottom: 5vh; z-index: 3; max-width: min(560px, 74vw); display: flex; flex-direction: column; gap: 8px; color: var(--t); text-shadow: var(--ombre); }
.s4b-leg strong { font: 800 clamp(30px, 4vw, 54px)/.95 var(--sans); letter-spacing: .01em; }
.s4b-leg span { font-size: 14px; line-height: 1.4; color: var(--t2); }
.s4b-leg em { font-style: normal; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; color: var(--t); }
.s4b-leg.on { animation: s4-leve .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes s4-leve { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* C « Bandeau » */
.s4c { height: 100svh; overflow: hidden; padding: clamp(80px, 12vh, 120px) var(--m) 0; box-sizing: border-box; }
.s4c-fond { position: absolute; inset: 0; background: #1a1a1a; cursor: pointer; }
.s4c-voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.36), rgba(0,0,0,0) 30%), linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 24%); pointer-events: none; transition: opacity .6s; }
.s4c.s4-clair .s4c-voile { opacity: 0; }
.s4c-bas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: 4vh; }
.s4c-desc { margin: 0 var(--m) 6px; font-size: 14px; line-height: 1.4; max-width: 48ch; color: var(--t); text-shadow: var(--ombre); }
.s4c-voir { display: inline-block; margin: 0 var(--m) 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--t); text-shadow: var(--ombre); }
.s4c-bande { display: flex; gap: clamp(18px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 50vw 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.s4c-bande::-webkit-scrollbar { display: none; }
.s4c-bande button { flex: none; scroll-snap-align: center; font: 800 clamp(20px, 2.4vw, 30px)/1 var(--sans); letter-spacing: .02em; color: var(--t); opacity: .4; text-shadow: var(--ombre); transition: opacity .4s, color .6s; padding: 4px 0; background: none; border: 0; cursor: pointer; }
.s4c-bande button.on { opacity: 1; }

/* D « Vitrine » */
.s4d { padding: clamp(80px, 14vh, 140px) var(--m); max-width: var(--largeur); margin: 0 auto; }
.s4d .s4-tete { margin-bottom: 6vh; }
.s4d-grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 70px); align-items: start; }
.s4d-photo { order: 2; position: sticky; top: 12vh; }
.s4d-cadre { position: relative; height: 76svh; overflow: hidden; background: #dcd8d0; cursor: pointer; }
.s4d-leg { margin-top: 10px; font: 300 11px/1.4 'Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); min-height: 1.4em; }
.s4d-liste { order: 1; list-style: none; margin: 0; padding: 0 0 20vh; }
.s4d-liste li { border-top: 1px solid var(--filet); }
.s4d-liste a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; color: var(--encre); opacity: .45; transition: opacity .4s, padding .4s; }
.s4d-liste a.actif { opacity: 1; padding-left: 14px; }
.s4d-liste strong { font: 800 clamp(20px, 2.2vw, 30px)/1 var(--sans); letter-spacing: .02em; }
.s4d-liste span { font-size: 13px; color: #3c3b38; line-height: 1.35; }
@media (max-width: 760px) {
  .s4d-grille { display: block; }
  .s4d-photo { position: sticky; top: 58px; z-index: 2; background: var(--noir); padding-bottom: 8px; }
  .s4d-cadre { height: 44svh; }
  .s4d-liste { padding-bottom: 40vh; }
  .s4d-liste a { padding: 14px 0; }
}

/* ---------- L'atelier ---------- */
.s4-sec { padding-top: clamp(40px, 8vh, 90px); padding-bottom: clamp(40px, 8vh, 90px); }
.s4-at { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: 0; }
.s4-at-ph { aspect-ratio: 4 / 5; position: sticky; top: 14vh; }
.s4-at-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s4-at-txt p { font-size: 16px; line-height: 1.65; color: #2c2b29; margin: 0 0 1.1em; max-width: 62ch; }
.s4-at-txt .s4-chapeau { font: 400 clamp(18px, 1.8vw, 23px)/1.4 var(--sans); color: var(--encre); letter-spacing: -.01em; }
.s4-at-txt .m-duo { margin: 6px 0 34px; }
.s4-at-txt p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.s4-chiffres { margin-top: 0; border-top-color: var(--filet); }
.s4-chiffres-sec .m-etiquette { margin-bottom: 0; }
.s4-chiffres span { color: #3c3b38; }
.s4-prog-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--filet); padding-top: 22px; }
.s4-prog-cols b { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.s4-prog-cols span { font-size: 14px; line-height: 1.55; color: #3c3b38; }
.s4-refs-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 40px); border-top: 1px solid var(--filet); padding-top: 22px; align-items: start; }
.s4-ref summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer; padding-bottom: 10px; }
.s4-ref summary::-webkit-details-marker { display: none; }
.s4-ref summary b { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.s4-ref summary span { font: 300 12px 'Plex Mono', ui-monospace, monospace; color: var(--gris); margin-left: auto; }
.s4-ref ul { list-style: none; margin: 0; padding: 0; }
.s4-ref li { font-size: 13px; line-height: 1.45; color: #3c3b38; padding: 7px 0; border-top: 1px solid rgba(18,18,18,.08); }
.s4-encours ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 40px; border-top: 1px solid var(--filet); padding-top: 14px; }
.s4-encours li { font-size: 14px; line-height: 1.5; padding: 6px 0; break-inside: avoid; }
/* Listes de L'atelier : sigle de trois lettres en gras, puis la description (Pio, 3 nov.) */
li.s4-lsig { display: grid; grid-template-columns: 3.4em 1fr; column-gap: .7em; align-items: baseline; }
.s4-sigle { font-weight: 700; letter-spacing: .04em; color: var(--encre, #121212); white-space: nowrap; }
.s4-sigle-vide { opacity: .35; }
@media (max-width: 760px) {
  .s4-at { display: block; }
  .s4-at-ph { position: relative; top: 0; margin-bottom: 30px; aspect-ratio: 4 / 3; }
  .s4-prog-cols, .s4-refs-cols { grid-template-columns: 1fr; }
  .s4-ref { border-bottom: 1px solid var(--filet); padding: 14px 0 4px; }
  .s4-ref summary::after { content: '+'; font-weight: 300; font-size: 20px; line-height: 1; }
  .s4-ref[open] summary::after { content: '–'; }
  .s4-encours ul { columns: 1; }
}

/* ---------- Contact ---------- */
.s4-ct { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(28px, 5vw, 80px); align-items: stretch; padding-top: 0; }
.s4-ct-info { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--filet); padding-top: 26px; }
.s4-ct-mail { font: 800 clamp(24px, 3.4vw, 48px)/1.05 var(--sans); letter-spacing: -.02em; color: var(--encre); word-break: break-word; }
.s4-ct-tel { font: 400 clamp(20px, 2.4vw, 32px)/1.1 var(--sans); color: var(--encre); margin-bottom: 24px; }
.s4-wa { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin: -8px 0 24px; padding: 11px 18px 11px 14px; border: 1px solid var(--encre); border-radius: 999px; color: var(--encre); font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; }
.s4-wa svg { width: 18px; height: 18px; flex: none; }
.s4-wa:hover, .s4-wa:focus-visible { background: var(--encre); color: var(--noir, #ebe9e4); }
/* Contact : e-mail seul centré, logos des réseaux dessous */
.s4-ct-info { align-items: center; text-align: center; }
.s4-ct-info .s4-ct-mail { text-align: center; }
.s4-ct-res { display: flex; justify-content: center; gap: 14px; margin: 6px 0 24px; }
.s4-ct-res a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--filet); border-radius: 50%; color: var(--encre); transition: background .25s, color .25s; }
.s4-ct-res svg { width: 22px; height: 22px; }
.s4-ct-res a:hover, .s4-ct-res a:focus-visible { background: var(--encre); color: var(--noir, #ebe9e4); }
.s4-ct-info .s4-ct-bloc { align-items: center; align-self: stretch; }
.s4-ct-bloc { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--filet); font-size: 15px; line-height: 1.5; }
.s4-ct-bloc b { font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.s4-ct-bloc a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; width: fit-content; }
.s4-ct-adr { display: flex; flex-direction: column; margin: 0; }
.s4-ct-adr + .s4-ct-adr { margin-top: 12px; }
.s4-ct-ph { min-height: 60svh; position: relative; }
.s4-ct-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .s4-ct { display: flex; flex-direction: column-reverse; } .s4-ct-ph { min-height: 46svh; } }

/* Renvoi entre L'atelier et Contact */
.s4-renvoi { display: block; text-align: center; padding: clamp(60px, 12vh, 130px) var(--m); border-top: 1px solid var(--filet); color: var(--encre); }
.s4-renvoi .m-etiquette { justify-content: center; margin-bottom: 14px; }
.s4-renvoi strong { font: 900 clamp(40px, 8vw, 120px)/.9 var(--sans); letter-spacing: -.05em; text-transform: uppercase; }

/* Pied */
.s4-pied { display: flex; flex-direction: column; gap: 22px; padding: 28px var(--m) 40px; border-top: 1px solid var(--filet); font-size: 12px; color: var(--gris); }
.s4-pied a { color: var(--encre); }
/* Trois liens (Particulier, Public, Contact) en trois colonnes égales sur toute la largeur, sans filets */
.s4-pied-l { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; letter-spacing: .14em; text-transform: uppercase; }
.s4-pied-l a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 4px; text-align: center; white-space: nowrap; }
.s4-pied-c { display: block; text-align: center; letter-spacing: .08em; }
/* « Mentions légales » en tout petit à côté de « © MJA » (Pio, 3 nov.) */
.s4-pied-c .s4-pied-ml { display: inline-block; margin-left: 1.4em; padding: 10px 0; font-size: 10px; letter-spacing: .1em; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Accueil : le pied passe au-dessus du fond fixe du carrousel une fois le dernier projet dépassé */
.v-s4 .s4-car + .s4-pied { position: relative; z-index: 2; background: var(--noir, #fff); }
/* Page Mentions légales */
.s4-ml { max-width: 760px; margin: 0 auto; }
.s4-ml-art { padding: 26px 0; border-top: 1px solid var(--filet); }
.s4-ml-art:first-child { border-top: 0; padding-top: 0; }
.s4-ml-art h2 { margin: 0 0 12px; font: 800 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--encre); }
.s4-ml-art p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; text-align: justify; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; }
.s4-ml-art a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.s4-ml-ac { background: #fff3b0; color: #6a5300; padding: 0 4px; font-weight: 600; }
.s4-ml-maj { margin: 18px 0 0; font-size: 12px; color: var(--gris); }
@media (max-width: 760px) {
  .s4-pied-l { grid-template-columns: repeat(3, 1fr); font-size: 11px; letter-spacing: .07em; }
}
@media (max-width: 340px) { .s4-pied-l { font-size: 10px; letter-spacing: .03em; } }
/* Pio, 3 nov. : pied de page en minuscules (seule la 1re lettre en capitale, « MJA » reste en sigle)
   et plus petit, jamais plus grand que les liens « L'atelier » / « Contact » de l'en-tête. */
.v-s4 .s4-pied, .v-s4 .s4-pied-l, .v-s4 .s4-pied-c, .v-s4 .s4-pied-c .s4-pied-ml { text-transform: none; }
.v-s4 .s4-pied { font-size: 11px; letter-spacing: .02em; }
.v-s4 .s4-pied-l { font-size: 12px; letter-spacing: .03em; }
.v-s4 .s4-pied-c { letter-spacing: .02em; }
.v-s4 .s4-pied-c .s4-pied-ml { font-size: 10.5px; letter-spacing: .02em; }
@media (max-width: 760px) {
  .v-s4 .s4-pied { font-size: 10px; }
  .v-s4 .s4-pied-l { font-size: 10.5px; letter-spacing: .03em; }
  .v-s4 .s4-pied-c .s4-pied-ml { font-size: 10px; }
}
/* Pio, 3 nov. 9 h 30 : pied de page plus compact. Moins de blanc sous le trait, entre la ligne
   Particulier / Public / Contact et la ligne « © MJA · Mentions légales », et en bas de page.
   Liens encore assez hauts pour le doigt (36 px et 30 px). */
.v-s4 .s4-pied { gap: 0; padding: 8px var(--m) calc(12px + env(safe-area-inset-bottom, 0px)); }
.v-s4 .s4-pied-l a { min-height: 36px; }
.v-s4 .s4-pied-c { line-height: 1.2; }
.v-s4 .s4-pied-c .s4-pied-ml { padding: 8px 0; vertical-align: middle; }
.v-s4 .s4-pied-c { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.s4-vars { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.s4-vars a { padding: 6px 10px; border: 1px solid var(--filet); border-radius: 999px; }
.s4-vars a.on { background: var(--encre); color: var(--noir); border-color: var(--encre); }

/* En-tête : le logo garde sa taille ; navigation visible sur l'accueil une fois le splash pass\u00e9 */
.v-s4 .k-tete .k-marque { flex: none; }
body.v-s4.s4-passe[data-vue="accueil"] .b-nav { opacity: 1; pointer-events: auto; }
/* Pio, 29 oct. soir : pendant l'intro (logo plein écran sur flou gaussien), le petit logo de l'en-tête
   faisait doublon. Il est masqué tant que le grand logo est là, et revient (en fondu) quand celui-ci
   s'est évaporé, au défilement ou tout seul au bout de quelques secondes. Seulement sur l'accueil. */
.v-s4 .k-tete .k-marque { transition: opacity .6s; }
body.v-s4[data-vue="accueil"]:not(.k-logo-parti):not(.s4-passe) .k-tete .k-marque { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .v-s4 .m-nav { gap: 11px; font-size: 10px; letter-spacing: .08em; } }
@media (max-width: 380px) { .v-s4 .m-nav { gap: 8px; letter-spacing: .03em; } }
/* En haut : L’atelier et Contact (voir kit.css, .v-s) ; Particulier et Public passent par l’aiguillage de l’accueil */
/* Pio, 29 oct. soir : tout petit logo Instagram juste à côté de Contact, au trait, couleur du bandeau (blanc ou noir).
   Zone de toucher agrandie (invisible) autour du pictogramme, sans changer sa taille. */
.v-s4 .m-nav a.s4-ig { position: relative; display: inline-flex; align-items: center; line-height: 0; margin-left: -10px; border: 0; }
.v-s4 .m-nav a.s4-ig svg { width: 12px; height: 12px; display: block; }
.v-s4 .m-nav a.s4-ig::after { content: ''; position: absolute; inset: -12px -10px; }
.v-s4 .k-tete:not(.clair) .m-nav a.s4-ig svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
@media (max-width: 760px) { .v-s4 .m-nav a.s4-ig { margin-left: -2px; } .v-s4 .m-nav a.s4-ig svg { width: 11px; height: 11px; } }

/* Pio, 29 oct. : le projet du milieu (sélectionné) se lit nettement mieux sur la photo.
   Voile local très doux derrière lui (sans encadré), ombre plus dense, graisse plus forte ;
   les autres lignes restent discrètes pour laisser voir la photo. */
.s4a-liste a { position: relative; opacity: .3; }
.s4a-liste a::before { content: ''; position: absolute; inset: -22px -48px -22px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)); opacity: 0; transition: opacity .5s; }
.s4a.s4-clair .s4a-liste a::before { background: radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,.34) 55%, rgba(255,255,255,0)); }
.s4a-liste a.actif { opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5); }
.s4a.s4-clair .s4a-liste a.actif { text-shadow: 0 1px 2px rgba(255,255,255,.6), 0 2px 16px rgba(255,255,255,.55); }
.s4a-liste a.actif::before { opacity: 1; }
.s4a-liste a.actif strong { font-weight: 900; letter-spacing: .03em; }
.s4a-liste a.actif span { color: var(--t); font-weight: 500; }

/* Année sous le descriptif du carrousel (années dictées par Pio, 29 octobre).
   Essai Pio, 29 oct. soir : même écriture que le descriptif (police, taille, graisse, couleur, casse),
   posée juste en dessous comme une deuxième ligne du descriptif, plus simple et plus sobre. */
.s4-annee { display: block; font: inherit; font-size: 13px; line-height: 1.35; font-weight: inherit; letter-spacing: normal; text-transform: none; color: var(--t2, var(--gris)); }
.s4-annee[hidden] { display: none; }
.s4a-liste .s4-annee { margin-top: -4px; max-width: 34ch; color: var(--t2); }
.s4a-liste a.actif .s4-annee { color: var(--t); font-weight: 500; }
.s4b-leg .s4-annee { margin-top: -6px; font-size: 14px; line-height: 1.4; color: var(--t2); }
.s4c-annee { margin: -4px var(--m) 10px; font-size: 14px; line-height: 1.4; max-width: 48ch; color: var(--t); text-shadow: var(--ombre); }
.s4d-liste .s4-annee { margin-top: -2px; color: #3c3b38; }

/* Pio, 29 oct. soir : logo du bandeau légèrement plus grand, pour qu'il pèse à peu près comme L'atelier et Contact.
   Hauteur seule (largeur auto, proportions gardées). Le grand logo de l'intro et la taille des liens ne changent pas. */
.v-s4 .k-tete .k-marque img { height: 15px; width: auto; }
@media (max-width: 760px) { .v-s4 .k-tete .k-marque img { height: 12px; } }
@media (max-width: 370px) { .v-s4 .k-tete .k-marque img { height: 11px; } }
@media (max-width: 340px) { .v-s4 .k-tete .k-marque img { height: 10px; } }

/* Navigation du carrousel uniquement : pas de sélection de texte à l'appui long.
   Les descriptions et coordonnées des autres pages restent copiables. */
.v-s4 .s4-car,
.v-s4 .s4-car * {
  -webkit-user-select: none;
  user-select: none;
}

/* Pio, 29 oct. soir : bande plâtre entre le splash et l'aiguillage Particulier / Public, sur téléphone.
   Même cause que la bande du bas du carrousel : la scène collante du splash faisait 100svh (écran avec barre
   d'adresse) ; une fois la barre de Chrome repliée au défilement, l'écran gagne ~56 px et le bas laissait voir
   le fond plâtre de la page, jusqu'à l'arrivée de l'aiguillage. Même règle : la scène prend la grande hauteur
   (lvh), les photos couvrent tout l'écran. Le logo reste centré sur la petite hauteur (svh) et ne bouge pas ;
   le titre et la barre de progression restent au bas de la partie visible (dvh). */
@supports (height: 100lvh) and (height: 100dvh) and (height: 100svh) {
  .v-s4 .k-verre-stage { height: 100lvh; }
  .v-s4 .k-verre-stage .k-verre-logo { bottom: calc(100lvh - 100svh); }
  .v-s4 .k-verre-stage .k-mono-titre { bottom: calc(clamp(34px, 7vh, 64px) + env(safe-area-inset-bottom) + 100lvh - 100dvh); }
  .v-s4 .k-verre-stage .k-mono-barre { bottom: calc(100lvh - 100dvh); }
}

/* Descriptif sur deux lignes quand le projet a une collaboration (PSF : « …, Var » puis « En collaboration avec BBM Architectes ») */
.s4a-liste a > span, .s4b-leg > span, .s4c-desc, .s4d-liste a > span, .v5-desc { white-space: pre-line; }

/* Pio, 29 oct. soir : bandeau aligné graphiquement. L'atelier, Contact et le pictogramme Instagram prennent
   exactement la hauteur des lettres du logo Mascherpa Juppé Architectes (capitales du logo = 56/72 de la hauteur
   de l'image ; capitales d'Inter Tight = 0,727 em ; trait du pictogramme = 82 % de sa boîte).
   Tout est centré sur la même ligne : mêmes hauts, mêmes bas. Le logo garde ses proportions.
   Sur téléphone, logo, mots et écarts suivent ensemble la largeur de l'écran pour ne jamais déborder. */
.v-s4 .k-tete { --logo-h: 15px; --cap: calc(var(--logo-h) * 56 / 72); }
.v-s4 .k-tete .k-marque img { height: var(--logo-h); width: auto; }
.v-s4 .k-tete .m-nav { gap: 1.6em; font-size: calc(var(--cap) / .727); line-height: 1; letter-spacing: .16em; }
.v-s4 .k-tete .m-nav a { display: block; }
/* Lien actif souligné sans bordure : la bordure ajoutait 1 px et remontait le mot */
.v-s4 .k-tete .m-nav a.actif { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.v-s4 .k-tete .m-nav a.s4-ig { margin-left: -.4em; }
.v-s4 .k-tete .m-nav a.s4-ig svg { width: calc(var(--cap) / .821); height: calc(var(--cap) / .821); }
@media (max-width: 760px) {
  .v-s4 .k-tete { --logo-h: clamp(9px, calc((100vw - 52px) / 29.5), 12px); }
  .v-s4 .k-tete .m-nav { gap: .95em; letter-spacing: .06em; }
  .v-s4 .k-tete .m-nav a.s4-ig { margin-left: 0; }
}
/* Calage fin mesuré à l'encre : les capitales d'Inter Tight et le pictogramme se posent sur les lettres du logo */
@media (max-width: 760px) {
  .v-s4 .k-tete .m-nav a:not(.s4-ig) { transform: translateY(.04em); }
  .v-s4 .k-tete .m-nav a.s4-ig { transform: translateY(-.035em); }
}

/* Lien principal = S4 (29 octobre) : le bouton « ← Propositions » renverrait sur S4 elle-même, on le masque. */
.v-s4 .mj-retour-choix { display: none !important; }

/* Pio, 3 nov. matin : bande blanche à droite sur téléphone (le menu et Instagram débordaient dedans) et bande plâtre en bas.
   Cause : le halo derrière le projet actif du carrousel (::before, 48 px à droite du texte) dépassait l'écran quand un
   descriptif occupe toute la largeur (nouveaux projets JDT / STR). Chrome élargissait alors la page de 392 à 424 px :
   défilement horizontal, bandeau plus large que l'écran, et la photo du carrousel (100lvh) ne couvrait plus le bas.
   On coupe tout débordement horizontal (clip : ne casse pas les éléments collants), au niveau de la page et du carrousel,
   et le fond du carrousel est sombre pour qu'aucune bande claire n'apparaisse sous la photo. */
html:has(body.v-s4), body.v-s4 { overflow-x: clip; }
.v-s4 .s4-car { overflow-x: clip; }
.v-s4 .s4a { background: #1a1a1a; }

/* Pio, 3 nov. matin : sous Particulier / Public, plus de « Glissez, puis touchez un côté » ;
   au-dessus de « Projets », plus de mention « Sélection » ni de grand trait. */
.v-s4 .k-seuil .invite { display: none !important; }

/* Splash : appui long = pause ; pas de menu ni de sélection au doigt sur la photo */
.v-s4 .k-verre-stage { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.v-s4 .k-verre-stage .k-mono-diapos img { -webkit-user-drag: none; }

/* Pio, 3 nov. matin : logo Mascherpa Juppé du bandeau 1,2 fois plus grand, pour s'aligner visuellement avec
   L'atelier et Contact. Seul le logo grandit (proportions gardées) ; la taille des mots ne change pas. */
.v-s4 .k-tete .k-marque img { height: calc(var(--logo-h) * 1.2); width: auto; }

/* Pio, 3 nov. matin (page L'atelier, sur téléphone) : plus aucune césure avec tiret au milieu des mots
   (« Nou-vel », « univer-sité »…). Les mots passent entiers à la ligne, partout sur le site. */
.v-s4, .v-s4 * { -webkit-hyphens: manual !important; hyphens: manual !important; }

/* Pio, 3 nov. matin, page L'atelier en portrait : moins de blanc.
   - En haut, sous le bandeau : le grand blanc avant le titre est réduit de moitié environ (pages L'atelier, Contact, Particulier, Public).
   - Entre le texte de présentation et « L'atelier en chiffres » : blanc divisé par deux (environ 140 → 70 px).
   - Entre les chiffres et les programmes, et entre les blocs suivants : un peu réduit (environ 124 → 84 px). */
@media (orientation: portrait) and (max-width: 900px) {
  .v-s4 .s4-intro { padding-top: 64px; padding-bottom: 34px; }
  .v-s4 .s4-sec.s4-at { padding-bottom: 22px; }
  .v-s4 .s4-sec.s4-chiffres-sec { padding-top: 31px; padding-bottom: 42px; }
  .v-s4 .s4-sec.s4-prog, .v-s4 .s4-sec.s4-refs, .v-s4 .s4-sec.s4-encours { padding-top: 42px; padding-bottom: 42px; }
}
/* Sur téléphone, avec le logo 1,2 fois plus grand, l'ensemble logo + mots + Instagram doit tenir dans la largeur :
   l'icône Instagram sortait de l'écran. Le logo garde son rapport 1,2 avec les mots, et le tout suit la largeur. */
@media (max-width: 760px) {
  .v-s4 .k-tete { --logo-h: clamp(8px, calc((100vw - 52px) / 32.7), 12px); }
}

/* Pio, 3 nov. après-midi : liens Particulier et Public dans le bandeau, sur ordinateur uniquement (masqués sur téléphone
   et sur les écrans trop étroits pour tout aligner sur une ligne avec le logo). */
@media (max-width: 1023px) { .v-s4 .k-tete .m-nav a.s4-nav-ordi { display: none; } }

/* Pio, 3 nov. matin, page Contact : les textes centrés en hauteur entre les deux traits gris.
   - Bloc e-mail + WhatsApp / Instagram / LinkedIn : même blanc au-dessus et au-dessous (27 / 38 px avant).
   - Bloc Adresses : le trait du bas est celui du pied de page ; le blanc du bas (80 px) passe au même que celui du haut. */
.v-s4 .s4-ct { padding-bottom: 0; }
.v-s4 .s4-ct-info { padding-top: 30px; }
.v-s4 .s4-ct-res { margin-bottom: 16px; }
.v-s4 .s4-ct-bloc { padding: 30px 0 32px; }

/* Cases à cocher des typologies (page Public, Pio 3 nov.) : carré blanc, noir une fois coché */
.s4-typo { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.s4-case { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: 300 12px/1.4 'Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--encre, #111);
  -webkit-tap-highlight-color: transparent; }
.s4-case i { width: 13px; height: 13px; flex: none; border: 1px solid #111; background: #fff; transition: background .15s; }
.s4-case[aria-checked="true"] i { background: #111; }
.s4-case:focus-visible { outline: 1px solid #111; outline-offset: 3px; }
/* Pio, 3 nov. : sur téléphone en portrait, les cases passent sur deux lignes, en deux colonnes alignées
   (Éducation au-dessus de Sportif, Logement au-dessus de Concours), au lieu de trois cases puis une seule. */
@media (max-width: 767px) and (orientation: portrait) {
  .s4-typo { display: grid; grid-template-columns: max-content max-content; justify-content: start; gap: 10px 26px; }
  .s4-case { justify-self: start; }
}
.s4-carte[hidden] { display: none !important; }
.s4-rlp-concours { display: none; }
.s4-departement-portrait::before { content: ', '; }
@media (max-width: 767px) and (orientation: portrait) {
  .s4-departement-portrait, .s4-rlp-concours { display: block; }
  .s4-departement-portrait::before { content: none; }
}

/* Fiches projets (Pio, 3 nov.) : premier descriptif un peu plus petit, bloc « Texte complet et équipe » collé au tableau,
   texte développé du même noir que le descriptif et le tableau (il était gris très clair, hérité du fond sombre). */
.v-s4 .k-fiche .m-p-cols .desc { font-size: clamp(14.5px, 1.1vw, 16.5px); }
/* seulement quand la fiche a un « Texte complet » : les fiches sans ce bloc gardent leur espace avant « Projet suivant » */
.v-s4 .k-fiche + .k-complet { padding-top: 0; margin-top: calc(clamp(26px, 4vh, 44px) - clamp(80px, 14vh, 160px)); }
.v-s4 .k-complet .complet-corps, .v-s4 .k-complet .complet-corps li, .v-s4 .k-complet .complet-corps li span { color: #3c3b38; }

/* Descriptions bilingues (Pio, 3 nov.) : le français d'abord, l'anglais dans un bloc distinct, texte justifié partout */
.v-s4 .k-fiche .m-p-cols .desc, .v-s4 .k-complet .complet-langue p { text-align: justify; text-justify: inter-word; }
.v-s4 .k-desc-langues .desc { margin: 0; }
.v-s4 .k-desc-langues .desc-en { margin-top: 1.1em; padding-top: 1.1em; border-top: 1px solid rgba(0, 0, 0, .12); }
.v-s4 .k-complet .complet-langue + .complet-langue { margin-top: 26px; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, .12); }
.v-s4 .k-complet .complet-langue h4:first-child { margin-top: 18px; }
.v-s4 .k-complet .complet-titre-en { font-style: italic; }