/* L'Atelier du Tapis d'Orient
   Direction : la nuit de Paris et les teintures du tapis. Fond bleu nuit du logo, grands aplats de teinture
   (garance, indigo), or vieilli pour le fil et les actions. Signature : le coin noué, un angle en escalier
   qui suit la grille des nœuds. */

@font-face { font-family: "Noto Serif Display"; src: url("/assets/fonts/noto-serif-display.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url("/assets/fonts/noto-serif-display-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --nuit: #0e1a33;
  --nuit-2: #16264a;
  --indigo: #1d3768;
  --garance: #7a1a1e;
  --garance-2: #5d1216;
  --or: #c7a15c;
  --or-clair: #e6cd96;
  --laine: #f1e9da;
  --papier: #fbfaf6;
  --encre: #141d33;
  --encre-2: #4a5268;
  --ligne: rgba(20, 29, 51, .16);
  --ligne-claire: rgba(241, 233, 218, .2);

  --f-titre: "Noto Serif Display", "Times New Roman", serif;
  --f-texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --marge: max(clamp(1.25rem, 4.4vw, 4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --pas: clamp(4.5rem, 10vw, 9.5rem);
  --t-1: clamp(3.1rem, 9.2vw, 9rem);
  --t-2: clamp(2.35rem, 5.4vw, 5.25rem);
  --t-3: clamp(1.7rem, 2.9vw, 2.75rem);
  --t-4: clamp(1.25rem, 1.8vw, 1.6rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --barre: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; scroll-padding-bottom: calc(var(--barre) + 1rem); color-scheme: dark; -webkit-tap-highlight-color: rgba(199, 161, 92, .28); }
a, button, summary, label, select { touch-action: manipulation; }
.demande__form, .devis, .fil, .lecture, .contact { color-scheme: light; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
body { margin: 0; background: var(--nuit); color: var(--laine); font: 400 1.0625rem/1.65 var(--f-texte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; overflow-x: clip; padding-bottom: var(--barre); }
html.menu-ouvert body { overflow: hidden; }
img, picture, canvas, svg { display: block; max-width: 100%; }
picture img { width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 300; line-height: 1.04; letter-spacing: -.012em; margin: 0; text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: var(--t-1); line-height: .98; letter-spacing: -.022em; }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-3); font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
sup { font-size: .62em; line-height: 0; vertical-align: .38em; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.evitement { position: fixed; top: .5rem; left: .5rem; z-index: 200; padding: .7rem 1rem; background: var(--laine); color: var(--encre); transform: translateY(-200%); }
.evitement:focus { transform: none; }
.lys { width: 1.25rem; height: auto; fill: var(--or); flex: none; }

/* Le coin noué : un angle en escalier, qui suit la grille des nœuds */
.bouton, .scene, .preuve__img, .rang__img, .illustration__img, .fiche-photo__img, .fiche, .demande__form {
  --s: 8px;
  clip-path: polygon(calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%, calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2), 0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s));
}
.scene { clip-path: none; }

.bouton { --s: 3px; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.1rem; padding: .7rem 1.5rem; border: 0; font-weight: 500; font-size: 1rem; line-height: 1.2; letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s; }
.bouton--or { background: var(--or); color: var(--nuit); }
.bouton--or:hover { background: var(--or-clair); }
.bouton:focus-visible { outline-offset: -4px; outline-color: var(--nuit); }
.bouton[disabled] { opacity: .6; cursor: progress; }

.lien-or, .lien-encre { display: inline-block; padding-bottom: .15em; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .35s var(--ease), color .2s; border: 0; cursor: pointer; font-weight: 500; }
.lien-or { color: var(--or-clair); }
.lien-encre { color: var(--encre); background-color: transparent; }
.lien-or:hover, .lien-encre:hover { background-size: 35% 1px; }

/* ------------------------------------------------ En-tête */
.tete { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); padding: .95rem var(--marge); color: var(--laine); transition: background-color .35s, transform .4s var(--ease), padding .3s; }
.tete::before { content: ""; position: absolute; inset: 0 0 -2.5rem; background: linear-gradient(rgba(10, 18, 36, .6), rgba(10, 18, 36, 0)); pointer-events: none; z-index: -1; transition: opacity .3s; }
.tete--pleine { background: rgba(14, 26, 51, .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-block: .6rem; }
.tete--pleine::before { opacity: 0; }
.tete--cachee { transform: translateY(-105%); }
.marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.marque__nom { font-family: var(--f-titre); line-height: 1.02; font-size: 1.3rem; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; }
.marque__nom span { display: block; font-size: .72rem; font-family: var(--f-texte); letter-spacing: .02em; opacity: .82; margin-bottom: .1rem; }
.marque__nom b { font-weight: 500; }
.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); font-size: .9375rem; }
.nav > a, .nav button { background: none; border: 0; padding: .35rem 0; text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; }
.nav > a::after, .nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.nav > a:hover::after, .nav button:hover::after, .nav button[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__groupe { position: relative; }
.nav__panneau { position: absolute; top: calc(100% + .6rem); left: -1.5rem; width: 23rem; padding: .6rem 0 1rem; background: var(--nuit); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .65); border-top: 2px solid var(--or); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.nav__groupe.est-ouvert .nav__panneau { opacity: 1; visibility: visible; transform: none; }
.nav__panneau::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.nav__panneau li a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 1.5rem; text-decoration: none; transition: background-color .2s; }
.nav__panneau li a:hover { background: var(--nuit-2); }
.nav__panneau strong { font-family: var(--f-titre); font-weight: 500; font-size: 1.25rem; }
.nav__panneau span { font-size: .8125rem; opacity: .7; text-align: right; }
.nav__plus { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.5rem 0; margin-top: .5rem; border-top: 1px solid var(--ligne-claire); font-size: .8125rem; }
.tete__tel { font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.tete__tel:hover { color: var(--or-clair); }
.tete__devis { min-height: 2.6rem; padding: .45rem 1.05rem; font-size: .9375rem; white-space: nowrap; }
.tete__menu { display: none; background: none; border: 0; padding: .5rem 0 .5rem .5rem; cursor: pointer; font-weight: 500; }
.menu-mobile { display: none; }

@media (max-width: 1120px) {
  .nav, .tete__devis { display: none; }
  .film__passer { top: 6.2rem; }
  .tete__menu { display: block; }
  .menu-mobile { display: block; position: fixed; inset: 0; z-index: 45; background: var(--nuit); padding: 5.25rem var(--marge) calc(5.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  html.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; }
  .menu-mobile__grand a { display: block; padding: .28rem 0; font: 300 clamp(2.2rem, 10vw, 3.2rem)/1.14 var(--f-titre); text-decoration: none; }
  .menu-mobile__petit { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne-claire); display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; }
  .menu-mobile__petit a { display: block; padding: .3rem 0; text-decoration: none; }
  .menu-mobile__contact { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .1rem; }
  .menu-mobile__tel { font: 400 1.75rem/1.2 var(--f-titre); color: var(--or-clair); text-decoration: none; }
  .menu-mobile__contact span { font-size: .875rem; opacity: .75; }
  html.menu-ouvert .tete { background: var(--nuit); transform: none; }
}

@media (max-width: 760px) {
  :root { --barre: calc(3.4rem + env(safe-area-inset-bottom)); }
  .tete__tel { display: none; }
  .marque__nom { font-size: 1.14rem; }
  .barre-mobile { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.6fr; padding-bottom: env(safe-area-inset-bottom); background: var(--nuit); }
  .barre-mobile a { display: flex; align-items: center; justify-content: center; min-height: 3.4rem; font-weight: 500; text-decoration: none; }
  .barre-mobile__tel { color: var(--laine); }
  .barre-mobile__devis { background: var(--or); color: var(--nuit); }
}
@media (min-width: 761px) { .barre-mobile { display: none; } }
/* Sur téléphone, la barre du bas porte déjà le devis : pas de second bouton juste au-dessus, le numéro reste affiché */
@media (max-width: 760px) { .film__actions .bouton, .hero__actions .bouton { display: none; } }

/* ------------------------------------------------ Film d'ouverture */
.film { position: relative; height: 560vh; background: var(--nuit); }
.film__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--nuit); }
.film__affiche, .film__toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__affiche img { width: 100%; height: 100%; object-fit: cover; }
/* même cadre que la première image du film, marge du relief comprise */
html.mouvement .film__affiche img { transform: scale(1.0152); }
.film__toile { opacity: 0; transition: opacity .5s; }
.film--pret .film__toile { opacity: 1; }
.film__voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(9, 16, 33, .9) 0%, rgba(9, 16, 33, .52) 34%, rgba(9, 16, 33, 0) 62%), linear-gradient(to bottom, rgba(9, 16, 33, .35), rgba(9, 16, 33, 0) 16%); }
.film__ouverture { position: absolute; left: var(--marge); right: var(--marge); bottom: clamp(2.2rem, 7vh, 4.6rem); max-width: 74rem; transition: opacity .55s, transform .7s var(--ease); }
.film__ouverture h1 { color: var(--laine); max-width: 11.5em; text-shadow: 0 2px 40px rgba(9, 16, 33, .45); }
.film__mots { display: block; margin-top: 1.1rem; font: 400 clamp(1.2rem, 1.9vw, 1.7rem)/1.25 var(--f-titre); letter-spacing: 0; color: var(--or-clair); }
html.mouvement .film__mots { animation: paraitre 1s var(--ease) .42s both; }
.film__ouverture h1 .l { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.film__ouverture h1 .l > span { display: block; }
html.mouvement .film__ouverture h1 .l > span { animation: monte 1.25s var(--ease) both; }
html.mouvement .film__ouverture h1 .l:nth-child(2) > span { animation-delay: .14s; }
html.mouvement .film__chapeau, html.mouvement .film__actions { animation: paraitre 1s var(--ease) .55s both; }
html.mouvement .film__actions { animation-delay: .72s; }
@keyframes monte { from { transform: translateY(108%); } }
@keyframes paraitre { from { opacity: 0; transform: translateY(.75rem); } }
.film__chapeau { margin-top: .7rem; max-width: 37rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; }
.film__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.film__tel { font-weight: 500; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.film__phrase { position: absolute; left: var(--marge); bottom: clamp(2.6rem, 9vh, 5.5rem); max-width: 42rem; font: 300 var(--t-2)/1.06 var(--f-titre); letter-spacing: -.012em; color: var(--laine); text-shadow: 0 2px 34px rgba(9, 16, 33, .6); opacity: 0; transform: translateY(1.5rem); transition: opacity .5s, transform .7s var(--ease); pointer-events: none; isolation: isolate; }
.film__phrase small { display: block; margin-top: .9rem; font: 400 clamp(1rem, 1.25vw, 1.2rem)/1.5 var(--f-texte); letter-spacing: 0; max-width: 30rem; }
.film__phrase--b, .film__phrase--d { left: auto; right: var(--marge); text-align: right; }
.film__phrase--b small, .film__phrase--d small { margin-left: auto; }
.film__phrase.est-actif { opacity: 1; transform: none; }
html.mouvement .film__ouverture:not(.est-actif) { opacity: 0; transform: translateY(-1.5rem); pointer-events: none; visibility: hidden; transition: opacity .55s, transform .7s var(--ease), visibility 0s .55s; }
.film__voile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--nuit) 0%, rgba(14, 26, 51, .7) 26%, rgba(14, 26, 51, 0) 62%); opacity: calc((var(--q, 0) - .9) * 10); }
.film__phrase::before { content: ""; position: absolute; inset: -38% -16%; z-index: -1; background: radial-gradient(closest-side, rgba(9, 16, 33, .66), rgba(9, 16, 33, 0)); }
.film__jauge { position: absolute; right: clamp(.65rem, 1.3vw, 1.25rem); top: 22%; bottom: 22%; width: 1px; background: rgba(241, 233, 218, .22); }
.film__jauge span { display: block; width: 100%; height: 100%; background: var(--or); transform: scaleY(0); transform-origin: 50% 0; }
.film__indice { position: absolute; right: var(--marge); bottom: clamp(2.2rem, 7vh, 4.6rem); font-size: .875rem; opacity: .85; transition: opacity .4s; writing-mode: vertical-rl; }
.film__indice::after { content: ""; display: inline-block; width: 1px; height: 3rem; margin-top: .75rem; background: currentColor; vertical-align: top; transform-origin: 50% 0; animation: indice 2.4s var(--ease) infinite; }
@keyframes indice { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.film--parti .film__indice { opacity: 0; }
.film__passer { position: absolute; right: var(--marge); top: clamp(6.2rem, 11.5vh, 7.2rem); z-index: 4; padding: .35rem 0; font-size: .875rem; text-decoration-color: var(--or); text-shadow: 0 1px 10px rgba(9, 16, 33, .9); }
.film__passer:hover { color: var(--or-clair); }
html:not(.mouvement) .film__passer { display: none; }
html:not(.mouvement) .film { height: auto; }
html:not(.mouvement) .film__scene { position: relative; height: 100vh; height: 100svh; }
html:not(.mouvement) .film__phrase, html:not(.mouvement) .film__toile, html:not(.mouvement) .film__jauge, html:not(.mouvement) .film__indice { display: none; }

@media (max-width: 760px) {
  .film { height: 490vh; }
  .film__scene { height: calc(100svh - var(--barre)); }
  .film__ouverture { bottom: 1.5rem; }
  .film__chapeau { margin-top: .9rem; font-size: 1rem; }
  .film__actions { margin-top: 1.1rem; }
  .film__actions .bouton { flex: 1 1 auto; max-width: 15rem; }
  .film__phrase { bottom: 1.75rem; right: var(--marge); }
  .film__phrase--b, .film__phrase--d { left: var(--marge); text-align: left; }
  .film__phrase--b small, .film__phrase--d small { margin-left: 0; }
  .film__indice { display: none; }
  .film__jauge { right: .4rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .film__ouverture { bottom: 1rem; }
  .film__ouverture h1 { font-size: 2.5rem; }
  .film__chapeau { margin-top: .5rem; font-size: .9375rem; max-width: 34rem; }
  .film__actions { margin-top: .6rem; }
  .film__actions .bouton { min-height: 2.6rem; }
  .film__phrase { font-size: 1.9rem; bottom: 1.25rem; }
  .film__phrase small { font-size: .9rem; margin-top: .4rem; }
  .piece__texte { bottom: .9rem; }
  .piece__texte h3 { font-size: 2rem; }
  .piece__accroche { font-size: 1rem; }
  .piece__texte p:not(.piece__accroche) { margin-top: .3rem; font-size: .875rem; line-height: 1.4; }
  .piece__texte .lien-or { margin-top: .4rem; }
  .loupe__legende { display: none; }
  .hero__texte { padding-top: 4.75rem; padding-bottom: 1.25rem; }
  .hero h1 { font-size: 2.4rem; }
}

/* ------------------------------------------------ Velours */
.velours { position: relative; height: 112vh; height: 112svh; background: var(--nuit); overflow: hidden; }
.velours canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity 1s; }
.velours--actif canvas { opacity: 1; }
.velours__repli { position: absolute; inset: 40% 0 0; }
.velours__repli::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--nuit), transparent 30%); }
.velours--actif .velours__repli { display: none; }
.velours__texte { position: absolute; left: var(--marge); right: var(--marge); top: clamp(4.5rem, 12vh, 8rem); pointer-events: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.velours__texte h2 { max-width: 9em; }
.velours__texte p { max-width: 27rem; justify-self: end; }
.velours__note { position: absolute; right: var(--marge); bottom: 1.4rem; font-size: .8125rem; opacity: .92; text-shadow: 0 0 3px rgba(9, 16, 33, .95), 0 1px 10px rgba(9, 16, 33, .95); pointer-events: none; transition: opacity .4s; }
@media (max-width: 760px) {
  .velours { height: 96svh; }
  .velours__texte { grid-template-columns: 1fr; top: 3.2rem; }
  .velours__texte p { justify-self: start; }
}

/* ------------------------------------------------ Bordure de tapis */
.bordure { --x: 0px; height: clamp(58px, 7.6vw, 104px); background: url("/assets/img/bordure.jpg") repeat-x; background-size: auto 100%; background-position: var(--x) 0; position: relative; z-index: 2; }

/* ------------------------------------------------ Enfilade des prestations */
.enfilade { background: var(--garance-2); position: relative; }
.enfilade__tete { padding: var(--pas) var(--marge) clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: end; background: var(--garance); }
.enfilade__tete h2 { max-width: 13em; }
.enfilade__tete p { max-width: 28rem; font-size: 1.125rem; }
.piece { position: relative; height: 250vh; height: 250svh; background: var(--teinte); }
.piece--nettoyage, .piece--restauration { height: 310vh; height: 310svh; }
.piece + .piece { margin-top: -100vh; margin-top: -100svh; }
.piece__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--teinte); transform-origin: 50% 40%; will-change: transform; }
.piece__media { position: absolute; inset: 0; }
.piece__media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.piece__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(9, 16, 33, .72), rgba(9, 16, 33, 0) 46%), linear-gradient(to top, rgba(9, 16, 33, .62), transparent 40%); background: linear-gradient(to right, color-mix(in srgb, var(--teinte) 88%, #000) 0%, color-mix(in srgb, var(--teinte) 58%, transparent) 26%, transparent 46%), linear-gradient(to top, rgba(9, 16, 33, .62), transparent 40%); }
.piece__texte { position: absolute; left: var(--marge); bottom: clamp(2.5rem, 9vh, 5.5rem); width: min(33rem, 86vw); z-index: 2; pointer-events: none; }
.piece__texte a { pointer-events: auto; }
.piece__texte h3 { font-size: var(--t-2); }
.piece__accroche { font: italic 300 var(--t-4)/1.25 var(--f-titre); margin-top: .35rem; color: var(--or-clair); }
.piece__texte p:not(.piece__accroche) { margin-top: 1rem; max-width: 29rem; }
.piece__texte .lien-or { margin-top: 1.25rem; }
.filmette { height: 100%; }
.filmette__scene { position: relative; height: 100%; overflow: hidden; }
.filmette__scene canvas, .filmette__affiche { position: absolute; inset: 0; width: 100%; height: 100%; }
.filmette__scene canvas { opacity: 0; transition: opacity .4s; }
.film--pret .filmette__scene canvas { opacity: 1; }
.synthese { position: absolute; right: clamp(.8rem, 1.6vw, 1.5rem); top: clamp(4.6rem, 8vh, 5.5rem); z-index: 3; font-size: .75rem; line-height: 1.2; color: var(--laine); opacity: .92; text-shadow: 0 0 3px rgba(9, 16, 33, .95), 0 1px 10px rgba(9, 16, 33, .95); pointer-events: none; }
.piece__media .synthese { inset: 5.25rem clamp(1rem, 2.2vw, 2rem) auto auto; width: auto; height: auto; }
.scene { position: relative; overflow: hidden; background: var(--nuit); }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__img img { object-position: var(--foyer, 50% 50%); }
html.mouvement .scene__img img { transform: scale(1.07); }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s; }
.relief--pret canvas { opacity: 1; }
.loupe { position: relative; overflow: hidden; background: var(--nuit); }
.loupe__repli { position: absolute; inset: 0; width: 100%; height: 100%; }
.loupe canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: none; opacity: 0; transition: opacity .8s; }
.relief--pret.loupe canvas { opacity: 1; }
.loupe__legende { position: absolute; right: var(--marge); bottom: clamp(2.5rem, 9vh, 5.5rem); width: min(23rem, calc(100% - 2 * var(--marge))); padding: 1rem 1.2rem; background: rgba(14, 26, 51, .84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3; pointer-events: none; }
.loupe__legende strong { display: block; font: 500 1.3rem/1.2 var(--f-titre); color: var(--or-clair); }
.loupe__legende span { display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.45; }
.loupe__legende.est-pose { animation: pose .45s var(--ease); }
@keyframes pose { from { opacity: 0; transform: translateY(.5rem); } }

@media (max-width: 760px) {
  .enfilade__tete { grid-template-columns: 1fr; }
  .piece__media .synthese { inset: 1rem var(--marge) auto auto; }
  .piece__scene { display: flex; flex-direction: column; }
  .piece__media { position: relative; inset: auto; flex: 1 1 56%; min-height: 0; }
  .piece__media::after { background: linear-gradient(to top, var(--teinte), transparent 22%); }
  .piece__media .synthese { z-index: 3; }
  .piece__texte { position: relative; left: auto; bottom: auto; width: auto; padding: .4rem var(--marge) calc(1.6rem + var(--barre)); flex: none; }
  .piece__texte h3 { font-size: 2.6rem; }
  .piece__texte p:not(.piece__accroche) { margin-top: .6rem; font-size: 1rem; line-height: 1.5; }
  .piece__texte .lien-or { margin-top: .75rem; }
  .loupe__legende { left: var(--marge); right: var(--marge); bottom: 1.1rem; width: auto; padding: .7rem .9rem; }
  .loupe__legende strong { font-size: 1.15rem; }
  .loupe__legende span { font-size: .875rem; }
}

/* ------------------------------------------------ Le fil d'or (déroulé) */
.fil { background: var(--papier); color: var(--encre); padding: var(--pas) var(--marge); position: relative; }
.fil__tete { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem 5rem; align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); }
.fil__tete h2 { max-width: 14em; }
.fil__corps { position: relative; max-width: 82rem; margin-inline: auto; }
.fil__corps svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fil__corps path { stroke: var(--or); stroke-width: 1.5; }
.fil__etape { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5rem, 11vw, 10rem); align-items: center; padding-block: clamp(1.25rem, 2.6vw, 2.25rem); }
.fil__txt { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; }
.fil__etape:nth-child(even) .fil__txt { order: 2; }
.fil__num { font: 300 clamp(2.6rem, 5vw, 4.25rem)/.9 var(--f-titre); color: var(--or); font-feature-settings: "lnum"; min-width: 1.1em; transition: color .4s; }
.fil__etape.est-atteinte .fil__num { color: var(--garance); }
.fil__etape h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 400; }
.fil__etape p + p { margin-top: .6rem; }
.fil__etape p a { color: var(--garance); }
.fil__etape p { margin-top: .6rem; color: var(--encre-2); max-width: 30rem; }
.fil__img { --s: 8px; aspect-ratio: 3 / 2; display: block; overflow: hidden; clip-path: polygon(calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%, calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2), 0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s)); }
.fil__suite { margin-top: clamp(2rem, 5vw, 4rem); text-align: center; position: relative; background: var(--papier); padding-top: .75rem; }
.fil--page { padding-top: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 760px) {
  .fil__tete { grid-template-columns: 1fr; }
  .fil__etape { grid-template-columns: 1fr; gap: 1rem; padding-left: 2.1rem; }
  .fil__etape:nth-child(even) .fil__txt { order: 0; }
  .fil__txt { grid-template-columns: 1fr; gap: .25rem; }
  .fil__vide { display: none; }
  .fil__num { font-size: 2.4rem; }
}

/* ------------------------------------------------ Photos réelles */
.preuves { background: var(--nuit); padding-block: var(--pas); }
.preuves__tete { padding-inline: var(--marge); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem 5rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.preuves__fleches { display: flex; gap: .5rem; margin-top: 1rem; }
.preuves__fleches button { width: 3rem; height: 3rem; background: none; border: 1px solid var(--ligne-claire); color: var(--laine); cursor: pointer; font-size: 1.1rem; transition: background-color .2s, color .2s, border-color .2s; }
.preuves__fleches button:hover { background: var(--or); color: var(--nuit); border-color: var(--or); }
@media (hover: none) { .preuves__fleches { display: none; } }
.preuves__rail { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; padding-inline: var(--marge); padding-bottom: 1rem; scroll-snap-type: x proximity; scroll-padding-inline: var(--marge); scrollbar-width: thin; scrollbar-color: var(--or) transparent; }
.preuve { flex: 0 0 clamp(17.5rem, 31vw, 29rem); margin: 0; scroll-snap-align: start; }
.preuve__img { aspect-ratio: 4 / 5; display: block; overflow: hidden; }
.preuve__img img, .fiche-photo__img img { filter: saturate(.94) contrast(1.03); }
.preuve figcaption { margin-top: .85rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.preuve figcaption strong { font-weight: 400; line-height: 1.35; }
.preuve figcaption span { font-size: .8125rem; color: var(--or-clair); flex: none; }
.preuves__suite { padding: 1.5rem var(--marge) 0; }
@media (max-width: 760px) { .preuves__tete { grid-template-columns: 1fr; } .preuve { flex-basis: 78vw; } }

/* ------------------------------------------------ Carte */
.carte { background: var(--indigo); padding: var(--pas) var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: center; overflow: hidden; }
.carte__texte > p { margin-top: 1.25rem; max-width: 33rem; }
.carte__listes { margin-top: 2rem; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); }
.carte__groupe { font: 500 1.3rem/1.2 var(--f-titre); color: var(--or-clair); margin-bottom: .55rem; }
.carte__listes li a { display: inline-block; padding: .18rem 0; text-decoration: none; transition: color .2s, transform .25s var(--ease); }
.carte__listes li a:hover, .carte__listes li a.est-actif { color: var(--or-clair); transform: translateX(.3rem); }
.carte__note { margin-top: 1.75rem; font-size: .9375rem; opacity: .85; }
.carte__plan { position: relative; perspective: 1500px; min-height: 26rem; }
.carte__incline { --rx: 46deg; --rz: -14deg; transform: rotateX(var(--rx)) rotateZ(var(--rz)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.carte__incline svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 28px rgba(5, 12, 28, .55)); }
.carte__nom { position: absolute; right: 0; bottom: 0; font: 300 clamp(1.5rem, 2.6vw, 2.5rem)/1 var(--f-titre); color: var(--or-clair); min-height: 1em; }
.c-fond { fill: #1a3160; stroke: rgba(241, 233, 218, .14); stroke-width: .6; }
.c-seine { fill: none; stroke: #2f5597; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.c-ep { fill: #8a6a33; stroke: #8a6a33; stroke-width: 1; }
.c-zone { fill: var(--or); stroke: #f3e2b8; stroke-width: .8; transition: fill .25s, transform .3s var(--ease); cursor: pointer; }
a.est-actif .c-zone, a:hover .c-zone, a:focus .c-zone, .c-lien.est-actif .c-zone { fill: #f6e6bd; transform: translateY(-5px); }
@media (max-width: 960px) {
  .carte { grid-template-columns: 1fr; }
  .carte__plan { order: -1; min-height: 0; margin: -1.5rem -6% 0; }
  .carte__nom { display: none; }
}

/* ------------------------------------------------ Questions */
.accueil-faq { background: var(--papier); color: var(--encre); padding: var(--pas) var(--marge); }
.accueil-faq .questions { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.accueil-faq > p { margin-top: 2rem; text-align: right; }
.questions h2 { margin-bottom: 1rem; }
.question { border-top: 1px solid var(--ligne); }
.question:last-child { border-bottom: 1px solid var(--ligne); }
.question summary { list-style: none; cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 0; position: relative; font: 500 clamp(1.1rem, 1.5vw, 1.32rem)/1.3 var(--f-titre); }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: ""; position: absolute; right: .25rem; top: 1.55rem; width: .8rem; height: .8rem; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1px 100% no-repeat; transition: transform .3s var(--ease); }
.question[open] summary::after { transform: rotate(45deg); }
.question__r { padding: 0 2.2rem 1.25rem 0; color: var(--encre-2); }
@media (max-width: 860px) { .accueil-faq .questions { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Demande de contact */
.demande { background: var(--garance); padding: var(--pas) var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.demande__intro > p:not(.demande__tel) { margin-top: 1.1rem; max-width: 29rem; font-size: 1.125rem; }
.demande__tel { margin-top: 2rem; display: flex; flex-direction: column; }
.demande__tel a { font: 300 clamp(2rem, 3.6vw, 3.2rem)/1.1 var(--f-titre); text-decoration: none; color: var(--or-clair); font-feature-settings: "lnum"; }
.demande__tel span { font-size: .9375rem; opacity: .85; margin-top: .2rem; }
.demande__assurances { margin-top: 1.5rem; display: grid; gap: .35rem; font-size: .9375rem; }
.demande__assurances li { padding-left: 1.3rem; position: relative; }
.demande__assurances li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; background: var(--or); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.demande__form { --s: 10px; background: var(--papier); color: var(--encre); padding: clamp(1.5rem, 3vw, 2.75rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
.demande__form .bouton { grid-column: 1 / -1; justify-self: start; min-width: 15rem; }
.champ { display: flex; flex-direction: column; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label, .choix-groupe legend { font-weight: 500; font-size: .9375rem; margin-bottom: .3rem; padding: 0; }
.champ label span, .choix-groupe legend span { font-weight: 400; color: var(--encre-2); }
.champ input:not([type="checkbox"]), .champ select, .champ textarea { width: 100%; min-height: 3rem; padding: .6rem .1rem; border: 0; border-bottom: 1px solid rgba(20, 29, 51, .45); border-radius: 0; background: transparent; color: var(--encre); font-size: 1.0625rem; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.champ select { background-color: transparent; color: var(--encre); background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(-45deg, transparent 50%, var(--encre) 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.champ select option { color: var(--encre); background: var(--papier); }
.champ textarea { resize: vertical; min-height: 4.2rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--garance); box-shadow: 0 1px 0 var(--garance); }
.champ [aria-invalid="true"] { border-color: #a11c1c; }
.champ ::placeholder { color: #7a8092; }
.champ--case { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .65rem; }
.champ--case input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--garance); flex: none; }
.champ--case label { flex: 1 1 70%; font-weight: 400; margin: 0; }
.champ--case .erreur { flex-basis: 100%; }
.erreur { color: #a11c1c; font-size: .875rem; margin-top: .25rem; }
.erreur:empty { display: none; }
.erreur-envoi { grid-column: 1 / -1; color: #a11c1c; font-weight: 500; }
.aide { font-size: .875rem; color: var(--encre-2); margin-bottom: .35rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
  .demande { grid-template-columns: 1fr; }
  .demande__form { grid-template-columns: 1fr; }
  .demande__form .bouton { width: 100%; }
}

/* ------------------------------------------------ Pied de page */
.franges { height: clamp(44px, 5.6vw, 80px); background: var(--nuit) url("/assets/img/frange.webp") repeat-x 0 0 / auto 100%; }
.pied { background: var(--nuit); padding: clamp(3rem, 6vw, 5.5rem) var(--marge) 1.75rem; font-size: .9375rem; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto minmax(0, 1.3fr); gap: 2.5rem clamp(2rem, 4vw, 4.5rem); }
.pied__sceau { width: 132px; height: 132px; display: block; border-radius: 50%; overflow: hidden; background: #fff; }
.pied__signature { margin-top: 1.25rem; font: italic 300 1.5rem/1.2 var(--f-titre); }
.pied__tel { margin-top: .9rem; }
.pied__tel a { font: 400 1.5rem/1.2 var(--f-titre); color: var(--or-clair); text-decoration: none; font-feature-settings: "lnum"; }
.pied__heures { margin-top: .4rem; max-width: 22rem; opacity: .8; }
.pied__titre { font: 500 1.15rem/1.2 var(--f-titre); color: var(--or-clair); margin-bottom: .7rem; }
.pied__titre a { text-decoration: none; }
.pied__col li a { display: inline-block; padding: .17rem 0; text-decoration: none; opacity: .9; }
.pied__col li a:hover { opacity: 1; text-decoration: underline; }
.pied__col--zones ul { columns: 2; column-gap: 1.5rem; }
.pied__bas { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne-claire); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-size: .8125rem; opacity: .78; }
.pied__bas p:last-child { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
@media (max-width: 960px) { .pied__haut { grid-template-columns: 1fr 1fr; } .pied__marque, .pied__col--zones { grid-column: 1 / -1; } }

/* ------------------------------------------------ En-têtes de page */
.hero { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; background: var(--teinte, var(--nuit)); color: var(--laine); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media .scene, .hero__media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(9, 16, 33, .95) 0%, rgba(9, 16, 33, .74) 36%, rgba(9, 16, 33, .3) 62%, rgba(9, 16, 33, 0) 82%), linear-gradient(to bottom, rgba(9, 16, 33, .5), rgba(9, 16, 33, 0) 20%); }
.hero__texte { position: relative; z-index: 2; width: 100%; padding: 8rem var(--marge) clamp(2.25rem, 6vh, 4.25rem); max-width: 86rem; }
.hero h1 { font-size: clamp(2.7rem, 7vw, 7rem); max-width: 13em; text-shadow: 0 2px 40px rgba(9, 16, 33, .4); }
.hero__chapo { margin-top: 1.1rem; max-width: 44rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; }
.hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; }
.hero__tel { font-weight: 500; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.hero--court { min-height: 68vh; min-height: 68svh; }
.hero--mince { min-height: 46vh; min-height: 46svh; }
.hero--mince h1 { font-size: clamp(2.5rem, 5.4vw, 5rem); }
.hero--mince .hero__media::after { background: linear-gradient(to top, rgba(9, 16, 33, .95) 0%, rgba(9, 16, 33, .8) 55%, rgba(9, 16, 33, .6) 100%); }
.ariane { margin-bottom: 1rem; font-size: .875rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .1rem .55rem; }
.ariane li + li::before { content: "/"; margin-right: .55rem; opacity: .55; }
.ariane a { text-decoration: none; opacity: .85; }
.ariane a:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------ Lecture */
.lecture { background: var(--papier); color: var(--encre); padding: clamp(3rem, 7vw, 6.5rem) var(--marge); display: grid; grid-template-columns: minmax(0, 46rem) minmax(16rem, 21rem); gap: 3rem clamp(2.5rem, 7vw, 7.5rem); justify-content: center; align-items: start; }
.lecture--seule { display: block; }
.lecture--avant { padding-bottom: 0; }
.lecture--seule > .prose, .lecture--seule.prose { max-width: 46rem; margin-inline: auto; }
.prose { min-width: 0; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { font-size: clamp(1.75rem, 2.7vw, 2.4rem); font-weight: 400; line-height: 1.1; margin-top: clamp(2.5rem, 5vw, 3.75rem); scroll-margin-top: 6rem; }
.prose h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-top: 2rem; }
.prose h3 a { text-decoration-color: var(--or); }
.prose > h2:first-child, .prose > .sous-pages + h2 { margin-top: 0; }
.prose a { color: var(--garance); }
.prose a:hover { color: var(--encre); }
.prose ul, .prose ol { display: grid; gap: .45rem; }
.prose ul > li { padding-left: 1.2rem; position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .66em; width: .45rem; height: .45rem; background: var(--or); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; padding-left: 1.8rem; position: relative; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: -.08em; font: 400 1.25rem/1.4 var(--f-titre); color: var(--garance); font-feature-settings: "lnum"; }
.prose aside { background: var(--laine); padding: 1.25rem 1.4rem; }
.prose section { margin-top: 2rem; }
.prose .questions h2 { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1rem; }
.prose .question ::before { display: none; }
.accroche { font: 400 clamp(1.2rem, 1.55vw, 1.42rem)/1.42 var(--f-titre); }
.sous-pages { background: var(--laine); padding: 1.1rem 1.35rem; margin-bottom: 2.25rem; }
.sous-pages p { font-weight: 500; margin-bottom: .35rem; }
.sous-pages ul { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
.sous-pages ul > li { padding: 0; }
.sous-pages ul > li::before { display: none; }
.repere { background: var(--nuit); color: var(--laine); padding: clamp(1.4rem, 3vw, 2.25rem); margin-block: 2.25rem !important; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.5rem; align-items: center; }
.prose .repere { background: var(--nuit); }
.repere strong { grid-row: span 2; font: 300 clamp(2.4rem, 5vw, 4rem)/1 var(--f-titre); color: var(--or-clair); font-feature-settings: "lnum"; white-space: nowrap; }
.repere.repere--long { grid-template-columns: 1fr; }
.repere.repere--long strong { grid-row: auto; font-size: clamp(1.9rem, 3.4vw, 2.75rem); white-space: normal; }
.repere p { font-size: 1.0625rem; line-height: 1.4; }
.repere cite { font-style: normal; font-size: .8125rem; opacity: .7; }
.conseil { margin: 2.5rem 0 0 !important; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--teinte, var(--garance)); color: var(--laine); }
.conseil__t { font-size: .875rem; opacity: .85; margin-bottom: .5rem; }
.conseil p:last-child { font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.42 var(--f-titre); }
.illustration { margin: 2.25rem 0 !important; }
.illustration__img { aspect-ratio: 16 / 9; display: block; overflow: hidden; }
.illustration figcaption { margin-top: .65rem; font-size: .9375rem; line-height: 1.45; color: var(--encre-2); }
.illustration figcaption span { display: inline-block; font-size: .8125rem; color: var(--garance); }
.illustrations { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 2.25rem 0 !important; }
.illustrations .illustration { margin: 0 !important; }
.illustrations .illustration__img { aspect-ratio: 4 / 3; }
.illustrations--photos .illustration__img { aspect-ratio: 4 / 5; }
@media (max-width: 560px) { .illustrations { grid-template-columns: 1fr; } }
.sources { margin-top: 2rem !important; font-size: .875rem; color: var(--encre-2); }
.sources summary { cursor: pointer; }
.sources ul { margin-top: .5rem; display: flex !important; flex-wrap: wrap; gap: .2rem 1rem; }
.sources ul > li { padding: 0; }
.sources ul > li::before { display: none; }
.lecture__cote { position: sticky; top: 5.5rem; display: grid; gap: 1.5rem; }
.fiche { --s: 8px; background: var(--teinte, var(--nuit)); color: var(--laine); padding: 1.6rem 1.5rem; }
.fiche__titre { font: 500 1.45rem/1.15 var(--f-titre); }
.fiche ul { margin-top: .85rem; display: grid; gap: .4rem; font-size: .9375rem; }
.fiche .bouton { margin-top: 1.1rem; width: 100%; }
.fiche__tel { display: block; margin-top: .8rem; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.fiche-autres p, .quartiers p { font-weight: 500; font-size: .9375rem; margin-bottom: .3rem; }
.fiche-autres li a { display: inline-block; padding: .16rem 0; color: var(--garance); }
.fiche-lien a { color: var(--garance); }
.quartiers ul { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .9375rem; color: var(--encre-2); }
@media (max-width: 980px) {
  .lecture { grid-template-columns: 1fr; }
  .lecture__cote { position: static; }
  .hero { min-height: 82svh; }
  .hero--court { min-height: 62svh; }
  .hero--mince { min-height: 42svh; }
}

/* Listes de prestations, secteurs */
.pres-de-vous, .services-ici { background: var(--laine); color: var(--encre); padding: clamp(3rem, 6vw, 5.5rem) var(--marge); }
.pres-de-vous h2, .services-ici h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.pres-de-vous > p { margin-top: .75rem; max-width: 36rem; }
.pres-de-vous ul { margin-top: 1.75rem; columns: 3 15rem; column-gap: 2.5rem; }
.pres-de-vous li a { display: inline-block; padding: .22rem 0; color: var(--garance); }
.services-ici ul { margin-top: 2rem; }
.ligne-service { border-top: 1px solid var(--ligne); }
.ligne-service:last-child { border-bottom: 1px solid var(--ligne); }
.ligne-service a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem 3rem; padding: 1.35rem 0; text-decoration: none; transition: padding-left .35s var(--ease), background-color .3s; align-items: baseline; }
.ligne-service a:hover { padding-left: .9rem; }
.ligne-service__nom { font: 300 clamp(1.7rem, 3vw, 2.75rem)/1.1 var(--f-titre); color: var(--teinte); }
.ligne-service__texte { max-width: 42rem; }
@media (max-width: 760px) { .ligne-service a { grid-template-columns: 1fr; } }
.voisins { margin-top: 2.5rem !important; }
.voisins p { font-weight: 500; }
.voisins ul { display: flex !important; flex-wrap: wrap; gap: .3rem 1.25rem; margin-top: .4rem; }
.voisins ul > li { padding: 0; }
.voisins ul > li::before { display: none; }
.rangs { background: var(--papier); color: var(--encre); padding: clamp(3rem, 6vw, 5.5rem) var(--marge); display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.rang a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: center; text-decoration: none; }
.rang:nth-child(even) a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.rang__img { aspect-ratio: 16 / 9; display: block; overflow: hidden; grid-column: 1; grid-row: 1 / span 2; }
.rang:nth-child(even) .rang__img { grid-column: 2; }
.rang__nom { grid-column: 2; font: 300 var(--t-2)/1.05 var(--f-titre); color: var(--teinte); align-self: end; }
.rang__texte { grid-column: 2; align-self: start; max-width: 30rem; }
.rang:nth-child(even) .rang__nom, .rang:nth-child(even) .rang__texte { grid-column: 1; }
.rang a:hover .rang__nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
@media (max-width: 760px) {
  .rang a, .rang:nth-child(even) a { grid-template-columns: 1fr; }
  .rang__img, .rang:nth-child(even) .rang__img { grid-column: 1; grid-row: auto; }
  .rang__nom, .rang__texte, .rang:nth-child(even) .rang__nom, .rang:nth-child(even) .rang__texte { grid-column: 1; }
}
.articles { background: var(--papier); color: var(--encre); padding: clamp(3rem, 6vw, 5.5rem) var(--marge); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(2.5rem, 4vw, 4rem); }
.article a { display: block; text-decoration: none; }
.article__img { aspect-ratio: 3 / 2; display: block; overflow: hidden; clip-path: polygon(16px 0, calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px, 100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%, 16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px), 0 16px, 8px 16px, 8px 8px, 16px 8px); }
.article__meta { display: block; margin-top: 1rem; font-size: .875rem; font-weight: 500; color: var(--garance); }
.article h2 { margin-top: .35rem; font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 400; line-height: 1.12; }
.article a:hover h2 { color: var(--garance); }
.article p { margin-top: .6rem; color: var(--encre-2); max-width: 36rem; }
.prose-note { text-align: center; }

/* Galerie, contact, pages à part */
/* Les deux premières photos, les mieux définies, en grand ; les images tirées de vidéos plus petites, donc plus nettes */
.galerie { background: var(--papier); color: var(--encre); padding: clamp(3rem, 6vw, 5.5rem) var(--marge); display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1.25rem, 2.6vw, 2.5rem); }
.fiche-photo { margin: 0; grid-column: span 2; }
.fiche-photo:nth-child(-n+2) { grid-column: span 3; }
.fiche-photo__img { aspect-ratio: 3 / 4; display: block; overflow: hidden; }
.fiche-photo:nth-child(-n+2) .fiche-photo__img { aspect-ratio: 4 / 3; }
.fiche-photo__img img, .preuve__img img, .illustration__img img { object-position: var(--cadre, 50% 50%); }
.hero--photo .scene__img img { transform: none !important; }
.fiche-photo figcaption { margin-top: .9rem; }
.fiche-photo__p { font-size: .875rem; color: var(--garance); font-weight: 500; }
.fiche-photo h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.16; margin-top: .25rem; }
.fiche-photo:nth-child(-n+2) h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); }
.fiche-photo p { margin-top: .4rem; color: var(--encre-2); max-width: 36rem; }
@media (max-width: 860px) { .galerie { grid-template-columns: 1fr 1fr; } .fiche-photo, .fiche-photo:nth-child(-n+2) { grid-column: span 1; } .fiche-photo:nth-child(-n+2) .fiche-photo__img { aspect-ratio: 3 / 4; } }
@media (max-width: 560px) { .galerie { grid-template-columns: 1fr; } .fiche-photo:nth-child(-n+2) .fiche-photo__img { aspect-ratio: 4 / 3; } }
.contact { background: var(--papier); color: var(--encre); padding: clamp(2.5rem, 6vw, 5.5rem) var(--marge); display: grid; grid-template-columns: minmax(0, 44rem) minmax(16rem, 24rem); gap: 3rem clamp(2.5rem, 7vw, 7rem); justify-content: center; align-items: start; }
.devis { display: block; }
.devis fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.35rem; }
.devis > fieldset > legend { font: 300 clamp(1.9rem, 3.2vw, 2.75rem)/1.1 var(--f-titre); padding: 0; margin-bottom: 1rem; }
.devis__avancement { font-size: .9375rem; color: var(--garance); font-weight: 500; margin-bottom: .75rem; }
.choix-groupe { display: block !important; }
.choix-grille { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span { display: block; padding: .6rem 1rem; min-height: 2.9rem; line-height: 1.65rem; border: 1px solid rgba(20, 29, 51, .4); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.choix input:checked + span { background: var(--nuit); color: var(--laine); border-color: var(--nuit); }
.choix input:focus-visible + span { outline: 2px solid var(--garance); outline-offset: 2px; }
.devis__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.devis__rgpd { margin-top: 1.75rem; font-size: .875rem; color: var(--encre-2); }
.contact__cote { display: grid; gap: .65rem; }
.contact__cote h2 { font-size: 1.55rem; margin-top: 1.25rem; }
.contact__cote h2:first-child { margin-top: 0; }
.contact__tel a { font: 300 clamp(2rem, 3.2vw, 2.75rem)/1.1 var(--f-titre); color: var(--garance); text-decoration: none; font-feature-settings: "lnum"; }
.contact__cote a { color: var(--garance); overflow-wrap: anywhere; }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }
.merci { min-height: 74vh; padding: 9rem var(--marge) 5rem; max-width: 56rem; margin-inline: auto; display: grid; gap: 1.1rem; align-content: center; }
.merci h1 { font-size: clamp(2.6rem, 6vw, 5.5rem); }
.merci a { overflow-wrap: anywhere; }
.plan-site { background: var(--papier); color: var(--encre); padding: 8rem var(--marge) 5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2.5rem 3rem; }
.plan-site > div:first-child { grid-column: 1 / -1; }
.plan-site h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.plan-site h2 { font-size: 1.45rem; margin-bottom: .5rem; color: var(--garance); }
.plan-site li a { display: inline-block; padding: .12rem 0; font-size: .9375rem; }
.module-loupe { background: var(--nuit); padding: var(--pas) var(--marge) 0; }
.module-loupe > p { margin-top: .75rem; }
.module-loupe .loupe { margin-top: 2rem; margin-inline: calc(var(--marge) * -1); height: 88vh; height: 88svh; }

/* ------------------------------------------------ Révélation unique */
html.mouvement [data-vu] { opacity: 0; transform: translateY(1.25rem); transition: opacity .8s var(--ease), transform .9s var(--ease); }
html.mouvement [data-vu].est-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .piece { height: auto; min-height: 100svh; }
  .piece + .piece { margin-top: 0; }
  .piece__scene { position: relative; }
  @view-transition { navigation: none; }
}

@media print {
  .tete, .barre-mobile, .film__toile, .velours canvas, .demande__form, .franges { display: none !important; }
  body { background: #fff; color: #000; }
}