/* catalogue.css : le systeme des pages catalogue, marques et cadeaux (refonte v2, oct. 2026).
   Source : demos validees par Nils (livrables/demos/catalogue-refonte_2026-10). Genere par aucun
   outil : edite ici, le HTML vient de .mercury/scripts/gen-pages-caro.py. Charge APRES styles.css.
   Deux polices (Cormorant pour l'affichage, Inter pour le reste), une teinte de tuile, l'or pour
   les filets et les marques. Aucune classe de ce fichier ne sert hors des pages generees. */
:root{--papier:#FBF9F6;--tuile:#F1EDE6;--pierre:#E7E1D7;--encre:#2B2926;--gris:#6F6A62;--gris-clair:#9A948A;
  --filet:rgba(43,41,38,.12);--or:#A8893A;--or-clair:#D9C79E;--sombre:#1E1C1A;--g:1.25rem}
@media(min-width:768px){:root{--g:2.5rem}}
@media(min-width:1280px){:root{--g:3.5rem}}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--encre);font-family:'Inter',system-ui,sans-serif}
.w{max-width:1360px;margin:0 auto;padding:0 var(--g)}
.lab{font-family:'Inter',sans-serif;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.disp{font-family:'Cormorant Garamond',serif;font-weight:400;font-variant-numeric:lining-nums;color:var(--encre);letter-spacing:-.01em}
.lien{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;color:var(--encre);border-bottom:1px solid var(--encre);padding-bottom:.15rem;transition:color .2s,border-color .2s}
.lien:hover{color:var(--or);border-color:var(--or)}
.lien svg{width:.9rem;height:.9rem}
.sec{padding:4.5rem 0}
@media(min-width:768px){.sec{padding:7rem 0}}
.tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:2.25rem}
@media(min-width:768px){.tete{margin-bottom:3.25rem}}
.tete h2{font-size:2.25rem;line-height:1.05;margin-top:.75rem}
@media(min-width:768px){.tete h2{font-size:3.25rem}}
.tete p.c{max-width:30rem;font-size:.9375rem;line-height:1.65;color:var(--gris);margin-top:.9rem}

/* fil d'Ariane */
.ariane{font-size:.75rem;color:var(--gris-clair);padding:1.1rem 0 0}
.ariane a{color:var(--gris)}.ariane a:hover{color:var(--encre)}
.ariane span{margin:0 .45rem}

/* ouverture : texte et photo côte à côte, la photo n'a plus à porter le texte */
.ouv{display:grid;gap:2rem;padding:1.5rem 0 4rem}
@media(min-width:960px){.ouv{grid-template-columns:5fr 7fr;gap:4.5rem;align-items:end;padding:2.5rem 0 6rem}}
.ouv .ph{order:-1;aspect-ratio:4/3;overflow:hidden;background:var(--pierre)}
@media(min-width:960px){.ouv .ph{order:0;aspect-ratio:5/4}}
.ouv .ph img{width:100%;height:100%;object-fit:cover}
.ouv h1{font-size:4rem;line-height:.92;margin:.9rem 0 1.4rem}
@media(min-width:768px){.ouv h1{font-size:6.5rem}}
@media(min-width:1280px){.ouv h1{font-size:7.5rem}}
.ouv p.chapo{font-size:1.0625rem;line-height:1.7;color:#4A4640;max-width:30rem}
.faits{display:flex;flex-wrap:wrap;gap:1.75rem 2.5rem;margin:2.25rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--filet)}
.faits div{font-size:.8125rem;color:var(--gris);line-height:1.35}
.faits b{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:2.25rem;line-height:1;color:var(--encre);margin-bottom:.3rem;font-variant-numeric:lining-nums}
.visite{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:2rem;font-size:.875rem;color:#4A4640}
.etat{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;color:var(--encre)}
.etat i{width:.5rem;height:.5rem;border-radius:50%;background:var(--gris-clair)}
.etat.ouvert i{background:#5E8C5A;box-shadow:0 0 0 4px rgba(94,140,90,.15)}

/* sommaire de page, collant */
.somm{position:sticky;top:61px;z-index:30;background:rgba(251,249,246,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
@media(min-width:768px){.somm{top:69px}}
.somm ul{display:flex;gap:2rem;overflow-x:auto;white-space:nowrap;list-style:none;margin:0;padding:0;scrollbar-width:none}
.somm ul::-webkit-scrollbar{display:none}
.somm a{display:block;padding:.95rem 0;font-size:.8125rem;color:var(--gris);border-bottom:1px solid transparent;margin-bottom:-1px}
.somm a:hover{color:var(--encre)}
.somm a sup{font-size:.65rem;margin-left:.2rem;color:var(--gris-clair)}

/* sélection : une pièce en grand, puis quatre, mise en page de magazine */
.sel{background:var(--tuile)}
.sel .tuile{background:var(--papier)}
.pieces{display:grid;gap:2.75rem 1.25rem;grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0}
.pieces li:first-child{grid-column:1/-1}
@media(min-width:960px){
  .pieces{grid-template-columns:repeat(12,1fr);gap:4rem 2rem}
  .pieces li:nth-child(1){grid-column:1/8;grid-row:1/3}
  .pieces li:nth-child(2){grid-column:8/13}
  .pieces li:nth-child(3){grid-column:8/13}
  .pieces li:nth-child(4){grid-column:1/7}
  .pieces li:nth-child(5){grid-column:7/13}
  .pieces li:nth-child(2) .tuile,.pieces li:nth-child(3) .tuile{aspect-ratio:16/10}
  .pieces li:nth-child(4) .tuile,.pieces li:nth-child(5) .tuile{aspect-ratio:4/3}
}
.tuile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--tuile)}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
a:hover .tuile img{transform:scale(1.035)}
.pieces .tuile img{inset:12%;width:76%;height:76%}
.pieces li:first-child .tuile{aspect-ratio:4/5}
.pieces li:first-child .tuile img{inset:14%;width:72%;height:72%}
@media(min-width:960px){.pieces li:first-child,.pieces li:first-child>a{display:flex;flex-direction:column}
  .pieces li:first-child>a{height:100%}.pieces li:first-child .tuile{aspect-ratio:auto;flex:1;min-height:560px}}
.legende{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;padding-top:1.1rem}
.legende .n{grid-row:1/4;font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--or);line-height:1.6;font-variant-numeric:lining-nums}
.legende h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.5rem;line-height:1.15;color:var(--encre)}
@media(min-width:960px){.legende h3{font-size:1.75rem}.pieces li:first-child .legende h3{font-size:2.25rem}}
.legende p{font-size:.9375rem;line-height:1.55;color:var(--gris);max-width:28rem}
.legende .lab{margin-top:.35rem}

/* grille complète */
.filtres{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--g)) 2rem;padding:0 var(--g)}
.filtres::-webkit-scrollbar{display:none}
.filtres button{flex:none;font:inherit;font-size:.8125rem;color:var(--encre);background:transparent;border:1px solid var(--filet);border-radius:999px;padding:.55rem 1rem;min-height:40px;cursor:pointer;transition:all .2s}
.filtres button:hover{border-color:var(--encre)}
.filtres button[aria-pressed=true]{background:var(--encre);border-color:var(--encre);color:#fff}
.filtres button span{color:var(--gris-clair);margin-left:.3rem}
.filtres button[aria-pressed=true] span{color:rgba(255,255,255,.6)}
.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:2.25rem 1rem;list-style:none;margin:0;padding:0}
@media(min-width:768px){.grille{grid-template-columns:repeat(3,1fr);gap:3rem 1.5rem}}
@media(min-width:1100px){.grille{grid-template-columns:repeat(4,1fr)}}
.grille li[hidden]{display:none}
.carte{display:block}
.carte .tuile img{inset:9%;width:82%;height:82%}
.carte .tuile.basse img{inset:17%;width:66%;height:66%}
.carte .lab{display:block;margin-top:1rem;font-size:.625rem}
.carte .nom{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.3rem;line-height:1.15;color:var(--encre);margin-top:.3rem}
.carte .det{display:block;font-size:.8125rem;color:var(--gris);margin-top:.2rem}
/* fin de grille : renvoi vers les pièces sans photo */
.suite{grid-column:span 1;display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:1.75rem;background:var(--pierre);min-height:14rem}
@media(min-width:768px){.suite{grid-column:span 3;padding:2.5rem 3rem}}
.suite p.g{font-family:'Cormorant Garamond',serif;font-size:1.5rem;line-height:1.2;color:var(--encre);max-width:34rem}
@media(min-width:768px){.suite p.g{font-size:2rem}}
.suite .lien{align-self:flex-start}
/* tuile éditoriale dans la grille */
.encart{grid-column:span 2;display:grid;background:var(--sombre);color:#fff;overflow:hidden}
@media(min-width:768px){.encart{grid-template-columns:1fr 1fr}}
.encart .ph{aspect-ratio:4/3;overflow:hidden}
@media(min-width:768px){.encart .ph{aspect-ratio:auto}}
.encart .ph img{width:100%;height:100%;object-fit:cover}
.encart .tx{padding:1.75rem 1.5rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.8rem}
@media(min-width:768px){.encart .tx{padding:2.25rem}}
.encart .lab{color:var(--or-clair)}
.encart h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.9rem;line-height:1.1}
.encart p{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.75)}
.encart .lien{color:#fff;border-color:rgba(255,255,255,.6);align-self:flex-start;margin-top:.4rem}
.encart .lien:hover{color:var(--or-clair);border-color:var(--or-clair)}

/* sans photo : un carnet par maison */
.carnets{display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:960px){.carnets{grid-template-columns:5fr 3fr 4fr;gap:3.5rem}}
.carnet header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--encre)}
.carnet h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.75rem;line-height:1;color:var(--encre)}
.carnet h3 small{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:400;color:var(--gris-clair);margin-left:.5rem}
.carnet .lien{font-size:.75rem;border-bottom-color:var(--filet)}
.carnet .cols{display:grid;gap:0 2rem}
@media(min-width:560px){.carnet .cols.deux{grid-template-columns:1fr 1fr}}
.carnet h4{font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin:1.5rem 0 .25rem}
.carnet ul{list-style:none;margin:0;padding:0}
.carnet li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--filet)}
.carnet li .nom{font-size:.9375rem;color:var(--encre)}
.carnet li .det{font-size:.8125rem;color:var(--gris-clair);text-align:right}
.note{display:flex;gap:.75rem;align-items:flex-start;margin-top:3rem;padding:1.25rem 1.5rem;background:var(--papier);font-size:.875rem;line-height:1.6;color:#4A4640;max-width:42rem}
.note svg{flex:none;width:1.1rem;height:1.1rem;margin-top:.15rem;color:var(--or)}
.note a{color:var(--encre);font-weight:500;border-bottom:1px solid var(--filet)}

/* bientôt */
.bientot{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.bientot summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 0}
.bientot summary::-webkit-details-marker{display:none}
.bientot summary .t{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.6rem;color:var(--encre)}
.bientot summary .n{display:block;font-size:.8125rem;color:var(--gris);margin-top:.25rem}
.bientot summary i{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--filet);border-radius:50%;font-style:normal;color:var(--encre);transition:transform .25s}
.bientot[open] summary i{transform:rotate(45deg)}
.bientot .corps{display:grid;gap:1.5rem;padding:0 0 2rem;font-size:.9375rem;line-height:1.7;color:#4A4640}
@media(min-width:768px){.bientot .corps{grid-template-columns:1fr 1fr;gap:3rem}}
.bientot .corps b{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.3rem;color:var(--encre);margin-bottom:.2rem}

/* passerelles */
.ponts{display:grid;gap:2.5rem 1.5rem;grid-template-columns:1fr}
@media(min-width:768px){.ponts{grid-template-columns:repeat(3,1fr)}}
.pont .ph{aspect-ratio:4/5;overflow:hidden;background:var(--pierre)}
.pont .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pont:hover .ph img{transform:scale(1.04)}
.pont .lab{display:block;margin-top:1.1rem}
.pont h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.75rem;line-height:1.1;color:var(--encre);margin:.35rem 0 .4rem}
.pont p{font-size:.9375rem;line-height:1.55;color:var(--gris)}

/* la boutique */
.bq{background:var(--sombre);color:#fff}
.bq .grid2{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.bq .grid2{grid-template-columns:6fr 5fr;gap:5rem}}
.bq .ph{aspect-ratio:4/3;overflow:hidden}
.bq .ph img{width:100%;height:100%;object-fit:cover}
.bq .lab{color:var(--or-clair)}
.bq h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2.5rem;line-height:1.05;margin:.8rem 0 2rem}
@media(min-width:768px){.bq h2{font-size:3.25rem}}
.bq dl{display:grid;grid-template-columns:7rem 1fr;gap:1.1rem 1.5rem;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.85);margin:0}
.bq dt{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:.25rem}
.bq dd{margin:0}
.bq .etat{color:#fff}
.bq .etat.ouvert i{background:#8CC488;box-shadow:0 0 0 4px rgba(140,196,136,.18)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:0 1.4rem;font-size:.8125rem;font-weight:500;border:1px solid rgba(255,255,255,.35);color:#fff;transition:all .2s}
.btn svg{width:1rem;height:1rem}
.btn:hover{border-color:#fff}
.btn.plein{background:#fff;color:var(--sombre);border-color:#fff}
.btn.plein:hover{background:var(--or-clair);border-color:var(--or-clair)}

/* marque */
.pres{display:grid;gap:2rem}
@media(min-width:960px){.pres{grid-template-columns:5fr 6fr;gap:5rem;align-items:start}}
.pres .gros{font-family:'Cormorant Garamond',serif;font-size:2rem;line-height:1.2;color:var(--encre)}
@media(min-width:768px){.pres .gros{font-size:2.6rem}}
.pres p.t{font-size:1rem;line-height:1.75;color:#4A4640}
.pres p.t+p.t{margin-top:1rem}
.mosa{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;list-style:none;margin:0;padding:0}
@media(min-width:960px){.mosa{grid-template-columns:repeat(12,1fr);gap:1.5rem}.mosa li:nth-child(1){grid-column:1/6;grid-row:1/3}.mosa li:nth-child(2){grid-column:6/9}.mosa li:nth-child(3){grid-column:9/13}.mosa li:nth-child(4){grid-column:6/10}.mosa li:nth-child(5){grid-column:10/13}}
.mosa .ph{aspect-ratio:4/5;overflow:hidden;background:var(--pierre);height:100%}
.mosa li:nth-child(1) .ph{aspect-ratio:auto}
@media(max-width:959px){.mosa li:nth-child(1){grid-column:1/-1}.mosa li:nth-child(1) .ph{aspect-ratio:4/3}}
.mosa img{width:100%;height:100%;object-fit:cover}
.mosa figure{height:100%;display:flex;flex-direction:column}
.mosa figcaption{font-size:.8125rem;line-height:1.45;color:var(--gris);margin-top:.6rem}

/* l'en-tête et le pied du site s'alignent sur la même colonne que la page */
body>header .container,body>nav .container,body>footer .container{max-width:1360px;padding-left:var(--g);padding-right:var(--g)}
@media(max-width:959px){.legende{display:block}.legende .n{display:block;font-size:1rem;line-height:1;margin-bottom:.45rem}
  .pieces li:not(:first-child) .legende h3{font-size:1.3rem}.pieces li:not(:first-child) .legende p{font-size:.875rem}}
@media(max-width:479px){.faits{gap:1.5rem}.faits div{flex:1 1 0;min-width:0}.faits b{font-size:2rem}}
@media(max-width:767px){.suite{padding:1.25rem;min-height:0}.suite p.g{font-size:1.2rem}}
/* page maison : le mur en photos */
.mur{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem;list-style:none;margin:0;padding:0}
@media(min-width:960px){.mur{grid-template-columns:repeat(4,1fr);gap:2rem 1.75rem;padding-bottom:4.5rem}.mur li:nth-child(even){transform:translateY(4.5rem)}}
.mur .ph{aspect-ratio:3/4;overflow:hidden;background:var(--pierre)}
.mur img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mur a:hover img{transform:scale(1.03)}
.mur figcaption{display:flex;gap:.75rem;padding-top:.9rem;font-size:.875rem;line-height:1.5;color:var(--gris)}
.mur figcaption .n{font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--or);font-variant-numeric:lining-nums}
.pres .faits{margin-top:2rem}
.carnet.large .cols{gap:0 4rem}
.sec:not(.sel) .note{background:var(--tuile)}
.carnet h4 small{font-size:inherit;color:var(--gris-clair);letter-spacing:inherit}
@media(max-width:767px){.pont .ph{aspect-ratio:3/2}}

/* .btn existe aussi dans styles.css (bande de survol animee) : ici le bouton reste plat */
.bq .btn{position:static;overflow:visible}
.bq .btn::after{content:none}

/* --- compléments du générateur (lot 2) --- */
picture{display:contents}
.carnets{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}
.ouv.long h1{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02}
@media(min-width:960px){.ouv.sans-photo{grid-template-columns:minmax(0,46rem)}}
.idees{display:grid;gap:2.5rem 3rem;grid-template-columns:1fr}
@media(min-width:768px){.idees{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.idees{grid-template-columns:repeat(3,1fr)}}
.idee{border-top:1px solid var(--filet);padding-top:1.4rem}
.idee h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.75rem;line-height:1.1;color:var(--encre);margin:0 0 .6rem}
.idee p{font-size:.9375rem;line-height:1.6;color:var(--gris);margin:0 0 .6rem}
.idee p.m a{color:var(--encre);border-bottom:1px solid var(--filet)}
.idee p.m a:hover{color:var(--or);border-color:var(--or)}
.idee .lien{margin-top:.6rem}
.faq{display:grid;gap:1.6rem 3rem;max-width:52rem}
.faq div{border-top:1px solid var(--filet);padding-top:1rem}
.faq h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.4rem;line-height:1.2;color:var(--encre);margin:0 0 .4rem}
.faq p{font-size:.9375rem;line-height:1.65;color:var(--gris);margin:0}
.maisons{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.maisons a,.maisons span{display:inline-block;padding:.5rem .9rem;border:1px solid var(--filet);font-size:.875rem;color:var(--encre);transition:border-color .2s,color .2s}
.maisons a:hover{border-color:var(--or);color:var(--or)}
.maisons span{color:var(--gris)}
@media(min-width:768px){.ponts.deux{grid-template-columns:repeat(2,1fr)}}
.pieces.libre{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.pieces.libre li{grid-column:auto;grid-row:auto}
.ph.vide{display:flex;align-items:center;justify-content:center;background:var(--pierre);aspect-ratio:4/5}
.ph.vide span{font-family:'Cormorant Garamond',serif;font-size:4rem;color:var(--or);opacity:.5}
@media(max-width:767px){.ph.vide{aspect-ratio:3/2}}
.mur.court{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),26rem));justify-content:start}

/* carnets : un nom ne se coupe jamais ; un carnet de plus de 8 lignes prend toute la rangée, sur deux sous-colonnes */
.carnet li .nom{white-space:nowrap}
.carnet:not(.large) .cols.deux{grid-template-columns:1fr}
@media(min-width:960px){.carnets .carnet.large{grid-column:1/-1}}
@media(max-width:559px){.carnet li .nom{white-space:normal}}
@media(max-width:959px){.carnet.large .cols.deux{grid-template-columns:1fr}}