/* Luxor Collection — les 34 pages intérieures (2026-09-24). Mêmes jetons que site.css : ivoire, charbon, laiton, nuit ;
   Bodoni Moda pour les titres, Hanken Grotesk pour le texte. Une photo à la fois, jamais d'album (REGLES-DEMO §4).
   Tout est lisible sans JavaScript : les états cachés n'existent que sous .js:not(.no-anim) (site.css). */

/* ── l'en-tête d'une page : leur titre en grand, leur texte, leur photo au volet ── */
.tete-page { padding: calc(var(--nav-h) + clamp(26px, 3.4vw, 52px)) 0 clamp(56px, 7vw, 104px); background: var(--ivoire); border-bottom: 1px solid var(--filet); }
.tete-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.2vw, 76px); align-items: stretch; }
.tete-texte { display: grid; align-content: end; min-width: 0; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: clamp(30px, 6vh, 72px); font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.fil a { color: var(--encre-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.fil a:hover, .fil a:focus-visible { color: var(--laiton-txt); border-color: currentColor; }
.fil [aria-current] { color: var(--laiton-txt); }
.titre-page { font: 400 clamp(50px, 6vw, 106px)/.98 var(--serif); letter-spacing: -.022em; hyphens: none; overflow-wrap: normal; text-wrap: balance; }
.titre-page em { font-style: italic; color: var(--laiton-txt); }
.tete-lede { margin-top: clamp(22px, 2.4vw, 32px); display: grid; gap: 14px; max-width: 54ch; color: var(--encre-2); font-size: 18px; line-height: 1.62; }
.lede-titre { font: 400 clamp(23px, 1.9vw, 31px)/1.24 var(--serif); color: var(--encre); letter-spacing: -.005em; }
.tete-faits { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 18px 44px; }
.tete-faits dt { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }
.tete-faits dd { margin: 8px 0 0; font: 400 clamp(26px, 2.3vw, 38px)/1.05 var(--serif); color: var(--encre); }
.tete-actions { margin-top: 26px; }
.tete-fig { position: relative; min-height: clamp(360px, 64vh, 700px); overflow: hidden; background: var(--sable); }
.tete-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* sans photo (Moodboards) : le titre à gauche, leur texte à droite, pour ne pas laisser la moitié de l'écran vide */
.tete-page.sans-fig { padding-bottom: clamp(36px, 4vw, 56px); }
.tete-page.sans-fig .tete-grille { grid-template-columns: minmax(0, 1fr); }
.tete-page.sans-fig .tete-texte { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 5vw, 96px); align-items: end; }
.tete-page.sans-fig .fil, .tete-page.sans-fig .oeil { grid-column: 1 / -1; }
.tete-page.sans-fig .fil { margin-bottom: 36px; }
.tete-page.sans-fig .tete-lede { margin-top: 0; padding-bottom: .6em; }
/* la version de nuit (TRUELIFE) */
.tete-page.nuit { background: var(--nuit); color: var(--sur-nuit); border-bottom: 0; }
.tete-page.nuit .fil, .tete-page.nuit .tete-lede { color: var(--sur-nuit-2); }
.tete-page.nuit .fil a { color: var(--sur-nuit-2); }
.tete-page.nuit .fil [aria-current], .tete-page.nuit .titre-page em { color: var(--laiton-clair); }
.tete-page.nuit .lede-titre { color: var(--sur-nuit); }
.tete-page.nuit .tete-fig { background: var(--nuit-2); }

/* ── Collections : six chapitres, une grande photo chacun ── */
.chapitres { background: var(--papier); }
.chap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.4vw, 80px); align-items: center; max-width: 1440px; margin: 0 auto;
  padding: clamp(44px, 5vw, 84px) var(--gout); border-bottom: 1px solid var(--filet); }
.chap:last-child { border-bottom: 0; }
.chap-inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chap-inverse .chap-fig { order: 2; }
.chap-fig { aspect-ratio: 16 / 11; overflow: hidden; background: var(--sable); }
.chap-fig img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.chap:hover .chap-fig img, .chap:focus-within .chap-fig img { scale: 1.03; }
.chap-texte { display: grid; gap: 14px; align-content: center; min-width: 0; }
.chap-texte > p:not(.rail-rang):not(.rail-sorte) { color: var(--encre-2); max-width: 46ch; }
.chap-nom { font: 400 clamp(46px, 5vw, 86px)/.95 var(--serif); letter-spacing: -.022em; hyphens: none; }
.chap-nom a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.chap-nom a:hover, .chap-nom a:focus-visible { background-size: 100% 1px; }
.chap-portes { display: flex; gap: 10px; margin-top: 4px; }
.chap-portes img { width: 72px; height: 72px; object-fit: cover; background: #fff; border: 1px solid var(--filet); }
.chap-pastilles-rangee { grid-template-columns: repeat(13, 1fr); max-width: 380px; margin-top: 4px; }
.chap-texte .lien-fleche { justify-self: start; margin-top: 6px; }

/* ── une page de collection : le catalogue, puis les autres collections ── */
.page-catalogue { padding-block: clamp(64px, 7vw, 104px) clamp(48px, 5vw, 72px); }
.page-catalogue .catalogue-liste { max-height: 520px; }
.page-catalogue .catalogue-liste a small { font-size: 12px; color: var(--encre-3); text-align: right; }
.selecte-plus { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); padding-block: 0 clamp(70px, 8vw, 120px); align-items: start; }
.selecte-cons, .selecte-couleurs { background: var(--papier); border: 1px solid var(--filet); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; align-content: start; }
.selecte-cons { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); column-gap: 32px; }
.selecte-cons .titre-m, .selecte-cons .liste-num { grid-column: 1; }
.selecte-plan { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; background: #fff; border: 1px solid var(--filet); }
.liste-num, .pieces-num, .avantages-num { padding: 0; margin-left: 0; list-style: none; }
.liste-num { counter-reset: n; display: grid; border-top: 1px solid var(--filet); }
.liste-num li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 15px; color: var(--encre-2); }
.liste-num li::before { content: counter(n); font: 400 20px/1 var(--serif); color: var(--laiton-txt); }
.pastilles-nommees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.pastilles-nommees li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.pastille { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 1px var(--filet); }
.pastille img { width: 100%; height: 100%; object-fit: cover; }
.selecte-couleurs .lien-fleche { justify-self: start; }
.autres { padding-block: clamp(44px, 5vw, 72px) clamp(64px, 7vw, 100px); border-top: 1px solid var(--filet); }
.autres-rangee { margin-top: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.autre { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--papier); border: 1px solid var(--filet); text-decoration: none;
  transition: border-color .35s var(--ease), transform .45s var(--ease-out); }
.autre img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.autre-pastilles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; aspect-ratio: 1; }
.autre-pastilles i { border-radius: 2px; }
.autre-nom { font: 400 26px/1.05 var(--serif); }
.autre small { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--laiton-txt); }
.autre:hover, .autre:focus-visible { border-color: var(--laiton); transform: translateY(-3px); }

/* ── Les couleurs : l'atelier en grand ── */
.page-atelier { padding-block: clamp(90px, 9vw, 130px); }
.atelier-large { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.atelier-large .atelier-scene { aspect-ratio: 4 / 5; }

/* ── la bande d'appel, en bas des pages ── */
.appel { padding-block: clamp(80px, 9vw, 130px); }
.appel-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: 't p' 't a'; gap: 20px clamp(28px, 5vw, 88px); align-items: end; }
.appel .titre { grid-area: t; font-size: clamp(40px, 4.6vw, 76px); }
.appel-grille > p { grid-area: p; color: var(--sur-nuit-2); max-width: 46ch; font-size: 18px; }
.appel-actions { grid-area: a; display: flex; flex-wrap: wrap; gap: 12px; }
.appel-court { padding-block: clamp(64px, 7vw, 100px); }

/* ── vidéos : un bouton, l'iframe au clic ── */
.video-bloc { display: grid; gap: 10px; align-content: start; margin-top: 8px; }
.video-sans-image { aspect-ratio: 16 / 9; max-width: 560px; background:
  radial-gradient(120% 90% at 30% 20%, #3A3431 0%, #1A1716 70%); display: grid; place-items: center; }
.video-sans-image .video-jouer { position: static; }
.video-bloc iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-note { font-size: 13px; color: var(--encre-3); }
.nuit .video-note { color: var(--sur-nuit-2); }

/* ── Produits : quatre pages, quatre cartes ── */
.produits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); padding-block: clamp(70px, 8vw, 120px); }
.produit { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.produit-fig { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sable); margin-bottom: 8px; }
.produit-fig img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.produit:hover .produit-fig img, .produit:focus-visible .produit-fig img { scale: 1.04; }
.produit-rang { font: 600 12px/1 var(--sans); letter-spacing: .16em; color: var(--laiton-txt); }
.produit-nom { font: 400 clamp(32px, 3vw, 48px)/1.02 var(--serif); letter-spacing: -.015em; }
.produit-texte { color: var(--encre-2); max-width: 54ch; }
.produit .lien-fleche { justify-self: start; }

/* ── Tiroirs et cabinets ── */
.page-caisson .pieces-num { counter-reset: none; }
.pieces-num li { grid-template-columns: 30px 1fr !important; padding-left: 0 !important; }
.pieces-num li::before { display: none; }
.pieces-num li b { font: 400 18px/1.2 var(--serif); color: var(--laiton-txt); }
.pieces-num li span { color: var(--encre); }
.pieces-num li.allume b { color: var(--encre); }
.oeil-sous { margin: 6px 0 -10px; }
.photos-caisson { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 44px); align-items: end; padding-block: clamp(70px, 8vw, 120px) clamp(40px, 5vw, 70px); }
.photos-caisson-texte { align-self: center; display: grid; gap: 14px; }
.photos-caisson-texte p { color: var(--encre-2); max-width: 36ch; }
.photos-caisson-fig { background: #fff; border: 1px solid var(--filet); overflow: hidden; }
.photos-caisson-fig img { width: 100%; height: auto; }
.fiches { padding-block: clamp(30px, 4vw, 60px) clamp(70px, 8vw, 110px); }
.fiches-rangee { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.fiches-rangee li { display: grid; gap: 12px; align-content: start; font-size: 15px; }
.fiche-img { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border: 1px solid var(--filet); padding: 14px; overflow: hidden; }
.fiche-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fiches-rangee b { font-weight: 500; line-height: 1.35; }
.labels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: clamp(80px, 9vw, 130px); }
.labels-bloc { background: var(--papier); border: 1px solid var(--filet); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; align-content: start; }
.labels-bloc > p { color: var(--encre-2); max-width: 54ch; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; padding-top: 18px; border-top: 1px solid var(--filet); }
.logos img { width: auto; max-width: 150px; max-height: 74px; }

/* ── du texte à la suite (Garantie, TRUELIFE, articles) ── */
.puces-texte { display: grid; border-top: 1px solid var(--filet); margin: 4px 0; }
.puces-texte li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--filet); position: relative; color: var(--encre-2); font-size: 16px; }
.puces-texte li::before { content: ''; position: absolute; left: 0; top: 21px; width: 9px; height: 1px; background: var(--laiton); }
.sous-titre { font: 400 clamp(24px, 2vw, 32px)/1.15 var(--serif); margin-top: 10px; }

/* ── Garantie et entretien ── */
.entretien-page { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; padding-block: clamp(70px, 8vw, 120px); }
.entretien-fig { aspect-ratio: 622 / 842; overflow: hidden; background: var(--sable); position: sticky; top: calc(var(--nav-h) + 24px); }
.entretien-fig img { width: 100%; height: 100%; object-fit: cover; }
.entretien-texte { display: grid; gap: 32px; }
.entretien-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.entretien-col h3 { font: 400 28px/1.1 var(--serif); margin-bottom: 14px; }
.entretien-col li { padding: 11px 0 11px 22px; position: relative; color: var(--encre-2); font-size: 15.5px; border-bottom: 1px solid var(--filet); }
.entretien-col li::before { content: ''; position: absolute; left: 0; top: 22px; width: 9px; height: 1px; background: var(--laiton); }
.entretien-col li:last-child { color: var(--encre); }

/* ── TRUELIFE ── */
.truelife-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding-block: clamp(80px, 9vw, 130px); }
.truelife-fig { aspect-ratio: 622 / 842; overflow: hidden; background: var(--sable); }
.truelife-fig img { width: 100%; height: 100%; object-fit: cover; }
.avantages-num { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--filet); }
.avantages-num li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--filet); font-size: 16px; }
.avantages-num b { font: 400 20px/1.1 var(--serif); color: var(--laiton-txt); }
.techno { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 't f' 'l f'; gap: 24px clamp(28px, 5vw, 88px); padding-block: 0 clamp(80px, 9vw, 130px); align-items: start; }
.techno-texte { grid-area: t; display: grid; gap: 16px; color: var(--encre-2); max-width: 64ch; }
.techno-texte .sous-titre { color: var(--encre); }
.techno-fig { grid-area: f; overflow: hidden; background: #fff; border: 1px solid var(--filet); }
.techno-fig img { width: 100%; height: auto; }
.techno-lien { grid-area: l; }

/* ── Blogue et nouvelles ── */
.articles { padding-block: clamp(60px, 7vw, 100px) clamp(80px, 9vw, 130px); display: grid; }
.article { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; padding-block: clamp(48px, 6vw, 86px); border-top: 1px solid var(--filet); }
.article:first-child { border-top: 0; padding-top: 0; }
.article-inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.article-inverse .article-fig { order: 2; }
.article-fig { overflow: hidden; background: var(--sable); aspect-ratio: 622 / 842; max-height: 78vh; position: sticky; top: calc(var(--nav-h) + 24px); }
.article-fig img { width: 100%; height: 100%; object-fit: cover; }
.article-fig.paysage { aspect-ratio: auto; }                     /* la photo en paysage garde son format (pages.py) */
.article-fig.paysage img { height: auto; }
.article-texte { display: grid; gap: 16px; align-content: start; color: var(--encre-2); max-width: 66ch; }
.article-texte .oeil { margin-bottom: 0; }
.article-texte .titre-m { color: var(--encre); margin-bottom: 4px; }
.article-plus { max-width: 520px; overflow: hidden; background: var(--sable); }
.article-plus img { width: 100%; height: auto; }

/* ── Inspirations ── */
.page-insp { padding-top: clamp(70px, 8vw, 120px); }
.page-insp .insp-texte .titre-m { font-size: clamp(30px, 2.8vw, 44px); }

/* ── Moodboards : une photo à la fois, filtrée comme leur galerie ── */
.mood { padding-block: clamp(40px, 5vw, 70px) clamp(80px, 9vw, 130px); }
.mood-puces { justify-content: center; margin-bottom: 28px; }
.mood-cadre { display: grid; gap: 18px; }
.mood-fig { margin: 0; background: var(--sable); display: grid; place-items: center; overflow: hidden; }
.mood-fig img { width: min(100%, var(--nw, 100%)); height: auto; max-height: min(78vh, 900px); object-fit: contain; }   /* largeur explicite : sinon Chrome charge les 62 photos */
.mood-nav, .mood-aide { display: none; }
.mood-js .mood-cadre { height: min(76vh, 860px); position: relative; background: var(--sable); }
.mood-js .mood-fig { display: none; position: absolute; inset: 0; background: transparent; }
.mood-js .mood-fig.is-on { display: grid; animation: moodEntre .6s var(--ease-out); }
.mood-js .mood-fig img { max-height: 100%; }
.mood-js .mood-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 22px; }
.mood-js .mood-aide { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--encre-3); }
.mood-rang { font: 500 13px/1 var(--sans); letter-spacing: .12em; color: var(--encre-2); min-width: 80px; text-align: center; }
@keyframes moodEntre { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }

/* ── À propos : l'usine, trois machines ── */
.page-usine .usine-tete { align-items: start; }
.page-usine .engagement p { font-size: clamp(22px, 1.9vw, 30px); }
.machines-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usine-bas-page { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; }
.usine-bas-page .video-sans-image { max-width: 640px; }

/* ── Nous joindre ── */
.page-contact { padding-top: clamp(60px, 7vw, 100px); }
.requis { color: var(--laiton-txt); }

/* ── tablette et téléphone ── */
@media (max-width: 1180px) {
  .autres-rangee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fiches-rangee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photos-caisson { grid-template-columns: 1fr 1fr; }
  .photos-caisson-texte { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .tete-grille, .chap, .chap-inverse, .selecte-plus, .appel-grille, .produits, .labels, .entretien-page, .truelife-page, .techno,
  .article, .article-inverse, .usine-bas-page { grid-template-columns: minmax(0, 1fr); }
  .appel-grille { grid-template-areas: 't' 'p' 'a'; }
  .techno { grid-template-areas: 't' 'f' 'l'; }
  .chap-inverse .chap-fig, .article-inverse .article-fig { order: 0; }
  .tete-fig { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .tete-page.sans-fig .tete-texte { grid-template-columns: minmax(0, 1fr); }
  .tete-page.sans-fig .tete-lede { margin-top: 20px; }
  .tete-page { padding-top: calc(var(--nav-h) + 20px); }
  .fil { margin-bottom: 22px; }
  .entretien-fig, .article-fig { position: static; max-height: none; }
  .article-fig { aspect-ratio: 4 / 5; }
  .entretien-fig { aspect-ratio: 4 / 3; }
  .entretien-cols, .avantages-num { grid-template-columns: 1fr; }
  .selecte-cons { grid-template-columns: 1fr; }
  .selecte-plan { grid-column: 1; grid-row: auto; max-width: 260px; }
  .atelier-large { grid-template-columns: 1fr; }
  .mood-js .mood-cadre { height: min(64vh, 560px); }
}
@media (max-width: 600px) {
  .titre-page { font-size: clamp(42px, 12.5vw, 60px); }
  .tete-lede { font-size: 16.5px; }
  .tete-faits { gap: 14px 28px; }
  .autres-rangee, .fiches-rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos-caisson { grid-template-columns: 1fr; }
  .pastilles-nommees { grid-template-columns: 1fr 1fr; }
  .chap-portes img { width: 56px; height: 56px; }
  .chap-pastilles-rangee { grid-template-columns: repeat(10, 1fr); }
}