/* ==========================================================================
   Pages d'univers : feuille des gabarits (issue #14)
   --------------------------------------------------------------------------
   Chargee uniquement sur les pages qui portent une maquette (les sept univers
   et la page Realisations). Le reste du site continue de ne lire que site.css.

   Organisation, et c'est elle qui rend le remplacement d'une maquette simple :

     1. JETONS       un bloc de variables par univers. La couleur ne s'ecrit
                     jamais ailleurs.
     2. SOCLE        le vocabulaire commun aux huit maquettes (heros, manifeste,
                     chiffres, citation, familles, produits, etapes, marques,
                     showroom, appel final). Un gabarit compose ces briques.
     3. UNIVERS ...  un bloc par univers, pour ce qui lui est propre. Passer de
                     t1 a t2 revient a remplacer un seul de ces blocs.

   Charte : Inter partout, jaune #ffce44, noir, dore, blanc. Aucune police
   supplementaire, aucune ressource externe.
   ========================================================================== */

/* ==========================================================================
   1. JETONS PAR UNIVERS
   ========================================================================== */

.universe-page {
  --u-fond: #141412;
  --u-encre: #f4f2ec;
  --u-doux: #a5a29a;
  --u-accent: #ffce44;
  --u-accent-fort: #ffce44;
  --u-panneau: #1d1d1b;
  --u-filet: rgba(255, 255, 255, .14);
  --u-inverse-fond: #1d1d1b;
  --u-inverse-encre: #ffffff;
  --u-inverse-doux: #b7b7b0;
  --u-max: 1240px;
}

/* Meubles : editorial clair, creme et ocre. */
.universe-meubles {
  --u-fond: #f6f4ef; --u-encre: #1d1d1b; --u-doux: #4a4a45;
  --u-accent: #a9861f; --u-accent-fort: #a9861f;
  --u-panneau: #ffffff; --u-filet: #e6e2d8;
  --u-inverse-fond: #1d1d1b; --u-inverse-encre: #ffffff; --u-inverse-doux: #b7b7b0;
  --u-max: 1280px;
}

/* Cuisine : meme famille claire, filets plus marques. */
.universe-cuisine {
  --u-fond: #f7f5f0; --u-encre: #1d1d1b; --u-doux: #4a4a45;
  --u-accent: #a8862a; --u-accent-fort: #ffce44;
  --u-panneau: #ffffff; --u-filet: #e3ded1;
  --u-inverse-fond: #1d1d1b; --u-inverse-encre: #ffffff; --u-inverse-doux: #c9c7c1;
  --u-max: 1180px;
}

/* Literie : creme chaud, grand bloc nocturne au centre de la page. */
.universe-literie {
  --u-fond: #f7f3ec; --u-encre: #26251f; --u-doux: #55534a;
  --u-accent: #a8862a; --u-accent-fort: #ffce44;
  --u-panneau: #ffffff; --u-filet: #e5dfd2;
  --u-inverse-fond: #12110f; --u-inverse-encre: #f2efe6; --u-inverse-doux: #b7b3a6;
  --u-max: 1240px;
}

/* Bain : craie et encre, tres peu de contraste, beaucoup d'air. */
.universe-bain {
  --u-fond: #f6f3ee; --u-encre: #24241f; --u-doux: #6f6c64;
  --u-accent: #a98c2c; --u-accent-fort: #c9a63c;
  --u-panneau: #ffffff; --u-filet: #e4dfd5;
  --u-inverse-fond: #1a1a17; --u-inverse-encre: #ffffff; --u-inverse-doux: #b3b0a7;
  --u-max: 1220px;
}

/* Luminaire : nocturne, l'or est la seule couleur vive. */
.universe-luminaire {
  --u-fond: #0e0e0c; --u-encre: #f2f0ea; --u-doux: #a5a29a;
  --u-accent: #ffce44; --u-accent-fort: #ffce44;
  --u-panneau: #171714; --u-filet: rgba(255, 255, 255, .13);
  --u-inverse-fond: #171714; --u-inverse-encre: #ffffff; --u-inverse-doux: #a5a29a;
  --u-max: 1240px;
}

/* Pianos : noir profond et laiton. */
.universe-piano {
  --u-fond: #100f0d; --u-encre: #f3f1ea; --u-doux: #a29f96;
  --u-accent: #ffce44; --u-accent-fort: #e9bd3f;
  --u-panneau: #191816; --u-filet: rgba(255, 255, 255, .12);
  --u-inverse-fond: #191816; --u-inverse-encre: #ffffff; --u-inverse-doux: #a29f96;
  --u-max: 1200px;
}

/* Carrelage : nuancier, fond mineral tres neutre pour ne pas fausser les teintes. */
.universe-carrelage {
  --u-fond: #f4f2ee; --u-encre: #22221e; --u-doux: #63615a;
  --u-accent: #a9861f; --u-accent-fort: #ffce44;
  --u-panneau: #ffffff; --u-filet: #e2ded5;
  --u-inverse-fond: #22221e; --u-inverse-encre: #ffffff; --u-inverse-doux: #b5b2aa;
  --u-max: 1240px;
}

/* Realisations : magazine, papier clair et filets fins. */
.universe-realisations {
  --u-fond: #f7f5f0; --u-encre: #1d1d1b; --u-doux: #615f58;
  --u-accent: #a9861f; --u-accent-fort: #ffce44;
  --u-panneau: #ffffff; --u-filet: #e4e0d6;
  --u-inverse-fond: #1d1d1b; --u-inverse-encre: #ffffff; --u-inverse-doux: #b7b7b0;
  --u-max: 1280px;
}

/* ==========================================================================
   2. SOCLE COMMUN
   ========================================================================== */

body.universe-page { background: var(--u-fond); color: var(--u-encre); }
.universe-page main { background: var(--u-fond); overflow-x: hidden; }

/* Le pied de page reste sombre quel que soit le parti pris de la page :
   ses couleurs (or sur noir) sont posees dans site.css sans fond explicite. */
.universe-page .site-footer { background: var(--noir); color: var(--blanc); margin-top: 0; }

/* Typographie de base des gabarits, cantonnee a <main> pour que l'en-tete et le
   pied de page gardent les couleurs de site.css sur les partis pris clairs.
   `:where()` ne compte pas dans la specificite : ces regles restent donc en
   dessous de tous les blocs qui reposent leurs propres couleurs (bandes
   sombres, citation pleine largeur, legende de heros). */
.universe-page main :where(h1, h2, h3) { color: var(--u-encre); font-weight: 300; }
.universe-page main :where(p) { color: var(--u-doux); line-height: 1.85; }
.universe-page main :where(a) { color: inherit; }

/* Le bouton or du site est dessine pour un fond noir : sur les partis pris
   clairs, il vire au jaune illisible. On le repose sur l'accent de l'univers. */
.universe-page main .btn-gold { border-color: var(--u-accent); color: var(--u-accent); }
.universe-page main .btn-gold:hover { background: var(--u-accent); color: var(--u-panneau); border-color: var(--u-accent); }
/* Sur les bandes sombres d'un univers clair, le bouton reprend l'or vif. */
.universe-page main .u-panel .btn-gold, .universe-page main .u-quote .btn-gold {
  border-color: var(--u-accent-fort); color: var(--u-accent-fort);
}

.u-wrap { max-width: var(--u-max); margin: 0 auto; padding: 0 2rem; }
.u-section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.u-section + .u-section { padding-top: 0; }
.u-section-center { text-align: center; }
.u-section-center .u-rule { margin-left: auto; margin-right: auto; }
.u-section-center .u-lead, .u-section-center .u-big { margin-left: auto; margin-right: auto; }

.u-panel { background: var(--u-inverse-fond); color: var(--u-inverse-encre); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.u-panel h2, .u-panel h3 { color: var(--u-inverse-encre); }
.u-panel p { color: var(--u-inverse-doux); }
.u-panel .u-eyebrow { color: var(--u-accent-fort); }
.u-panel-soft { background: var(--u-panneau); }
.u-section.u-panel-soft { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.u-eyebrow {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--u-accent); font-weight: 600; margin: 0;
}
.u-rule {
  display: block; width: 64px; height: 1px; margin: 1.2rem 0;
  background: linear-gradient(90deg, var(--u-accent), transparent);
}
.u-head { margin-bottom: 2.8rem; }
.u-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.18; letter-spacing: .01em; }
.u-head-center { max-width: 820px; margin-left: auto; margin-right: auto; }
.u-lead { max-width: 66ch; margin-top: 1.2rem; font-size: 1.04rem; }
.u-lead + .u-lead { margin-top: .9rem; }
.u-big {
  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.55; font-weight: 300;
  color: var(--u-encre); max-width: 24ch;
}
.u-section-center .u-big { max-width: 34ch; }
.u-sig { font-family: var(--script); font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--u-accent); margin-top: .6rem; }
.u-note { margin-top: 1.6rem; max-width: 66ch; font-size: .94rem; }

.u-acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.u-btn, .u-btn-line {
  display: inline-block; padding: .95rem 2rem; font-size: .68rem;
  letter-spacing: .24em; text-transform: uppercase; transition: .25s; cursor: pointer;
}
.u-btn { background: var(--u-encre); color: var(--u-fond); }
.u-btn:hover { background: var(--u-accent); color: #1d1d1b; }
.u-btn-line { border: 1px solid currentColor; color: var(--u-encre); }
.u-btn-line:hover { background: var(--u-encre); color: var(--u-fond); }
.u-panel .u-btn-line, .u-quote .u-btn-line { color: var(--u-inverse-encre); }

/* ---------- heros ---------- */

.u-hero { position: relative; }
.u-hero-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 82vh; }
.u-hero-tx {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(9rem, 14vw, 12rem) clamp(1.6rem, 5vw, 5rem) clamp(3.5rem, 6vw, 5.5rem);
  background: var(--u-panneau);
}
.u-hero-tx h1 {
  font-size: clamp(2.1rem, 4.6vw, 4rem); font-weight: 200; line-height: 1.08;
  letter-spacing: -.005em; margin: 1.4rem 0 0;
}
.u-hero-tx p { max-width: 46ch; margin-top: 1.4rem; }
.u-hero-ph { position: relative; overflow: hidden; background: var(--u-inverse-fond); min-height: 48vh; }
.u-hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.u-hero-photo-first .u-hero-ph { order: -1; }
.u-hero-tag {
  position: absolute; left: 0; bottom: 2.4rem; background: var(--u-panneau); color: var(--u-encre);
  padding: 1rem 1.6rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; max-width: 80%;
}
.u-hero-tag b { display: block; color: var(--u-accent); font-weight: 600; margin-bottom: .35rem; font-size: .62rem; }
.u-hero-marks { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-top: 2.2rem; }
.u-hero-marks span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--u-accent); }
.u-hero-meta { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2.4rem; }
.u-hero-meta div { max-width: 14ch; }
.u-hero-meta strong { display: block; font-size: 1.9rem; font-weight: 200; color: var(--u-accent); line-height: 1; }
.u-hero-meta span { display: block; margin-top: .5rem; font-size: .76rem; color: var(--u-doux); line-height: 1.5; }

.u-hero-full { height: 84vh; min-height: 460px; overflow: hidden; }
/* Le heros accepte une video aussi bien qu'une image (issue #201). Elle prend
   EXACTEMENT la place du `<img>` qu'elle remplace, filtre de luminosite compris
   La legende se pose par-dessus, et un cadrage different la laisserait sur du
   vide. Chaque univers qui retouche la luminosite de son heros retouche donc
   les deux ensemble, jamais l'une sans l'autre. */
.u-hero-full > img,
.u-hero-full > video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
.u-hero-cap {
  position: absolute; inset: auto 0 0 0; padding: 0 clamp(1.6rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  text-align: center; background: linear-gradient(transparent, rgba(12, 12, 10, .78));
}
.u-hero-cap h1 {
  color: #fff; font-weight: 200; font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: .14em; text-transform: uppercase;
}
.u-hero-cap .u-eyebrow { color: var(--u-accent-fort); }
.u-hero-cap .u-lead { color: #ddd9d0; margin-left: auto; margin-right: auto; }
.u-hero-cap .u-sig { color: var(--u-accent-fort); }
.u-hero-cap-left { text-align: left; }
.u-hero-cap-left .u-lead { margin-left: 0; max-width: 58ch; }

/* ---------- chiffres ---------- */

.u-figures { background: var(--u-inverse-fond); color: var(--u-inverse-encre); }
.u-figures-in {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--u-filet); max-width: var(--u-max); margin: 0 auto;
}
.u-figure { background: var(--u-inverse-fond); padding: clamp(2.2rem, 4vw, 3.4rem) 1.4rem; text-align: center; }
.u-figure b { display: block; font-size: clamp(1.7rem, 3.2vw, 2.9rem); font-weight: 200; color: var(--u-accent-fort); }
.u-figure span {
  display: block; margin-top: .8rem; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--u-inverse-doux); line-height: 1.6;
}

/* ---------- manifeste deux colonnes ---------- */

.u-mani { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.u-mani-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.u-mani-in h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.15; }
.u-mani-body p { margin-bottom: 1.2rem; }
.u-mani-body p:first-child { font-size: 1.18rem; color: var(--u-encre); line-height: 1.75; }

/* ---------- familles ---------- */

.u-zone {
  font-size: .8rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--u-accent); margin: 3rem 0 1.4rem; font-weight: 600;
}
.u-fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.u-fam { display: block; background: var(--u-panneau); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.u-fam:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, .12); }
.u-fam-ph { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.u-fam-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.u-fam:hover .u-fam-ph img { transform: scale(1.04); }
.u-fam-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; padding: 1.3rem 1.4rem 1.5rem;
}
.u-fam-cap h3 { font-size: 1.18rem; font-weight: 400; letter-spacing: .03em; }
.u-fam-cap i { font-style: normal; font-size: .66rem; letter-spacing: .18em; color: var(--u-accent); white-space: nowrap; }

/* ---------- citation pleine largeur ---------- */

.u-quote {
  position: relative; padding: clamp(4.5rem, 10vw, 9rem) 2rem; text-align: center;
  background: #141412; color: #fff; overflow: hidden;
}
.u-quote > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.u-quote blockquote { position: relative; max-width: 960px; margin: 0 auto; }
.u-quote blockquote p {
  font-size: clamp(1.25rem, 3vw, 2.2rem); font-weight: 200; line-height: 1.45; color: #fff;
}
.u-quote cite {
  display: block; margin-top: 1.8rem; font-style: normal; font-size: .68rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--u-accent-fort);
}

/* ---------- produits ---------- */

.u-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem; }
.u-prod-grid-2 { grid-template-columns: repeat(2, 1fr); }
.u-prod-grid-3 { grid-template-columns: repeat(3, 1fr); }
.u-prod-grid-4 { grid-template-columns: repeat(4, 1fr); }
.u-prod { display: block; background: var(--u-panneau); transition: transform .28s, box-shadow .28s; }
.u-prod:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0, 0, 0, .12); }
.u-prod-ph { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--u-fond); }
.u-prod-large .u-prod-ph { aspect-ratio: 16 / 10; }
.u-prod-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.u-prod:hover .u-prod-ph img { transform: scale(1.04); }
.u-prod-b { display: block; padding: 1.1rem 1.2rem 1.4rem; }
.u-prod-brand {
  display: block; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--u-accent); font-weight: 600;
}
.u-prod-b h3 { font-size: 1rem; font-weight: 400; margin-top: .5rem; line-height: 1.35; }
.u-prod-slim .u-prod-b h3 { font-size: .92rem; }

/* ---------- etapes ---------- */

.u-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.u-steps-3 { grid-template-columns: repeat(3, 1fr); }
.u-step { border-top: 2px solid var(--u-encre); padding-top: 1.4rem; }
.u-panel .u-step, .u-panel-soft .u-step { border-top-color: var(--u-accent); }
.u-step-n { display: block; font-size: 2.2rem; font-weight: 200; color: var(--u-accent); line-height: 1; }
.u-step h3 { font-size: 1.06rem; font-weight: 500; margin: .8rem 0 .6rem; letter-spacing: .02em; }
.u-step p { font-size: .92rem; }

/* ---------- listes ---------- */

.u-deflist { margin: 2rem 0 0; }
.u-deflist > div { display: grid; grid-template-columns: 140px 1fr; gap: 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--u-filet); }
.u-deflist dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--u-accent); font-weight: 600; }
.u-deflist dd { margin: 0; color: var(--u-doux); line-height: 1.7; font-size: .94rem; }
.u-deflist-tight > div { grid-template-columns: 110px 1fr; padding: .7rem 0; }
.u-panel .u-deflist dd { color: var(--u-inverse-doux); }

/* ---------- coordonnees cliquables (issues #29 et #30) ----------
   Les liens d'adresse, de telephone et d'e-mail sont ceux de src/html.ts,
   partages avec le pied de page et la page Contact. Leur mise en forme d'origine
   est calibree pour le fond sombre du site et pose un pictogramme qui tient lieu
   d'intitule.

   Dans un gabarit d'univers, ni l'un ni l'autre ne convient. La couleur, d'abord :
   un univers peut etre creme comme nocturne, donc elle doit venir des jetons de
   l'univers et non d'un gris fixe. Le pictogramme ensuite : ici la coordonnee
   arrive toujours dans un contexte qui porte deja son etiquette, le « dt » d'une
   liste showroom, un sur-titre, ou le fil d'une phrase. Un pin de carte y ferait
   doublon, et la mise en flex casserait la ligne au milieu du texte. On repasse
   donc en rendu inline, souligne pour rester reconnaissable comme lien. */
.universe-page main .coords-line {
  display: inline; color: inherit; gap: 0;
  text-decoration: underline; text-decoration-color: var(--u-accent);
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.universe-page main .coords-line:hover,
.universe-page main .coords-line:focus-visible {
  color: var(--u-accent-fort); text-decoration-color: var(--u-accent-fort);
}
.universe-page main .coords-ic { display: none; }
/* Le soulignement est deja porte par le lien : celui que site.css ajoute sur le
   « span » au survol du lien carte ferait un doublon a un autre decalage. */
.universe-page main .map-link:hover span,
.universe-page main .map-link:focus-visible span { text-decoration: none; }

.u-numlist { list-style: none; margin: 1.8rem 0 0; counter-reset: u-num; }
.u-numlist li {
  counter-increment: u-num; padding: .9rem 0 .9rem 3rem; position: relative;
  border-top: 1px solid var(--u-filet); font-size: .94rem; color: var(--u-inverse-doux);
}
.u-numlist li::before {
  content: counter(u-num, decimal-leading-zero); position: absolute; left: 0; top: .9rem;
  color: var(--u-accent-fort); font-weight: 500;
}
.u-ticks { list-style: none; margin: 1.6rem 0 0; }
.u-ticks li { padding: .6rem 0 .6rem 1.6rem; position: relative; font-size: .94rem; color: var(--u-doux); }
.u-ticks li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 8px; height: 1px; background: var(--u-accent); }
.u-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; }
.u-tags li {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--u-filet); padding: .45rem .8rem; color: var(--u-doux);
}

/* ---------- marques ---------- */

/* Les logos de la mediatheque sont des aplats clairs, dessines pour le fond
   noir du site : la bande reste donc sombre sur tous les partis pris, y compris
   les partis pris creme. */
.u-brands { background: var(--u-inverse-fond); color: var(--u-inverse-encre); padding: clamp(3rem, 6vw, 5rem) 0; }
.u-brands .u-eyebrow { color: var(--u-accent-fort); text-align: center; margin-bottom: 2.4rem; }
.u-brand-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem 3rem; }
.u-brand-logos img { height: 40px; width: auto; opacity: .78; transition: opacity .25s; }
.u-brand-logos img:hover { opacity: 1; }
.u-brand-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.4rem; max-width: 1000px; margin: 0 auto; }
.u-brand-names span {
  font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--u-inverse-doux); transition: color .25s;
}
.u-brand-names span:hover { color: var(--u-accent-fort); }

/* ---------- diptyques ---------- */

.u-duo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--u-panneau); }
.u-duo-tx { padding: clamp(2.6rem, 6vw, 5.5rem) clamp(1.6rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.u-duo-tx h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.18; }
.u-duo-tx p { margin-top: 1.2rem; max-width: 50ch; }
.u-duo-ph { overflow: hidden; background: var(--u-fond); min-height: 340px; }
.u-duo-ph img { width: 100%; height: 100%; object-fit: cover; }

/* Sans visuel (univers encore sans photo en base), le diptyque redevient un
   bloc de texte pleine largeur plutot qu'une moitie de page vide. */
.u-duo:not(:has(> .u-duo-ph)), .u-star:not(:has(> .u-star-ph)) { grid-template-columns: 1fr; }
.u-duo:not(:has(> .u-duo-ph)) .u-duo-tx,
.u-star:not(:has(> .u-star-ph)) .u-star-tx { max-width: 900px; margin: 0 auto; width: 100%; }
.universe-cuisine .u-cui-step:not(:has(img, video)) { grid-template-columns: 1fr; }
.universe-cuisine .u-cui-step:not(:has(img, video)) .u-cui-step-ph { display: none; }

/* ---------- appel final ---------- */

.u-cta { position: relative; padding: clamp(4rem, 9vw, 8rem) 2rem; text-align: center; overflow: hidden; background: var(--u-fond); }
.u-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.u-cta-in { position: relative; max-width: 720px; margin: 0 auto; }
.u-cta-in h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 200; line-height: 1.14; margin-top: 1rem; }
.u-cta-in p { margin-top: 1.4rem; }
.u-cta-in .u-acts { justify-content: center; }
.u-cta-in .u-sig { margin-top: 2.2rem; }
.u-cta > img ~ .u-cta-in h2, .u-cta > img ~ .u-cta-in p { color: #fff; }

/* ---------- mosaique ---------- */

.u-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.u-mosaic figure { position: relative; overflow: hidden; margin: 0; background: var(--u-panneau); }
.u-mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
.u-mosaic img, .u-mosaic video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .7s; }
.u-mosaic figure:first-child img { aspect-ratio: 1; }
.u-mosaic figure:hover img { transform: scale(1.04); }
.u-mosaic figcaption {
  position: absolute; inset: auto 0 0 0; padding: .8rem 1rem; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}

/* ---------- temoignages ---------- */

.u-temoins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.u-temoin { background: var(--u-panneau); border-top: 2px solid var(--u-accent); padding: 2rem 1.8rem; }
.u-panel-soft .u-temoin { background: var(--u-fond); }
.u-temoin p { font-size: .96rem; line-height: 1.8; }
.u-temoin cite {
  display: block; margin-top: 1.2rem; font-style: normal; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--u-accent);
}
.u-temoin-solo { max-width: 720px; margin: 0 auto; text-align: center; border-top: 0; }
.u-temoin-solo p { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 300; }

.u-empty { max-width: 640px; }
.u-empty p { font-size: 1.05rem; }

/* ==========================================================================
   3. UNIVERS MEUBLES (t1 : editorial)
   ========================================================================== */

/* Grille de familles asymetrique : les deux premieres cartes sur six colonnes,
   les suivantes sur quatre. Le garde `:has` evite la grille douze colonnes
   quand l'univers ne compte que trois ou quatre familles publiees. */
.universe-meubles .u-fam-grid:has(> :nth-child(5)) { grid-template-columns: repeat(12, 1fr); }
.universe-meubles .u-fam-grid:has(> :nth-child(5)) > * { grid-column: span 4; }
.universe-meubles .u-fam-grid:has(> :nth-child(5)) > :nth-child(-n+2) { grid-column: span 6; }
.universe-meubles .u-fam-grid:has(> :nth-child(5)) > :nth-child(-n+2) .u-fam-ph { aspect-ratio: 16 / 10; }

.universe-meubles .u-mani-body p:first-child::first-letter {
  float: left; font-size: 4.2rem; line-height: .82; padding: .35rem .5rem 0 0;
  color: var(--u-accent); font-weight: 300;
}
.universe-meubles .u-matieres .u-deflist-cols > div { grid-template-columns: 130px 1fr; }
.universe-meubles .u-hero-tx h1 { text-transform: none; }

/* ==========================================================================
   4. UNIVERS CUISINE (t1 : le projet pas a pas)
   ========================================================================== */

/* Le panneau du heros est sombre : la cuisine s'annonce sur fond noir. */
.universe-cuisine .u-hero-tx { background: #141412; }
.universe-cuisine .u-hero-tx h1 {
  color: #fff; text-transform: uppercase; letter-spacing: .07em; font-size: clamp(1.8rem, 3.6vw, 3.2rem);
}
.universe-cuisine .u-hero-tx p { color: #cfcdc7; }
.universe-cuisine .u-hero-tx .u-sig { color: var(--u-accent-fort); }

/* Colonne d'etapes alternees, pleine largeur. */
.universe-cuisine .u-cui-step { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2px; }
.universe-cuisine .u-cui-step:nth-child(even) .u-cui-step-tx { order: -1; }
.universe-cuisine .u-cui-step-ph { overflow: hidden; background: #e8e4da; min-height: 320px; }
.universe-cuisine .u-cui-step-ph img { width: 100%; height: 100%; object-fit: cover; }
.universe-cuisine .u-cui-step-tx {
  background: var(--u-panneau); padding: clamp(2.2rem, 4.5vw, 3.6rem);
  display: flex; flex-direction: column; justify-content: center;
}
.universe-cuisine .u-cui-step-n { font-size: 3.2rem; font-weight: 200; color: var(--u-accent-fort); line-height: 1; }
.universe-cuisine .u-cui-step-tx h3 { font-size: 1.45rem; margin: .5rem 0 .8rem; letter-spacing: .03em; }
.universe-cuisine .u-cui-step-tx ul { margin: 1.1rem 0 0 1.1rem; color: var(--u-doux); line-height: 1.9; font-size: .92rem; }

.universe-cuisine .u-cui-plan-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.universe-cuisine .u-cui-plan-ph img { width: 100%; height: auto; }

/* ==========================================================================
   5. UNIVERS LITERIE (t1 : guide de choix)
   ========================================================================== */

.universe-literie .u-guide .u-head { max-width: 62ch; }
.universe-literie .u-guide-q { border-top: 1px solid rgba(255, 206, 68, .22); padding: 1.6rem 0; }
.universe-literie .u-guide-lab {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--u-inverse-doux); margin-bottom: 1rem;
}
.universe-literie .u-guide-lab b { color: var(--u-accent-fort); font-weight: 500; margin-right: .7rem; }
.universe-literie .u-guide-opts { display: flex; flex-wrap: wrap; gap: .7rem; }
.universe-literie .u-opt {
  border: 1px solid rgba(255, 255, 255, .22); background: none; color: #e9e6db;
  font-family: var(--sans); font-size: .82rem; letter-spacing: .07em;
  padding: .8rem 1.3rem; cursor: pointer; transition: .22s; line-height: 1.3; text-align: left;
}
.universe-literie .u-opt:hover { border-color: var(--u-accent-fort); }
.universe-literie .u-opt[aria-pressed="true"] { background: var(--u-accent-fort); border-color: var(--u-accent-fort); color: #12110f; font-weight: 600; }
.universe-literie .u-opt:focus-visible { outline: 2px solid var(--u-accent-fort); outline-offset: 2px; }
.universe-literie .u-guide-result {
  margin-top: 2.4rem; border: 1px solid rgba(255, 206, 68, .35); padding: 2rem 2.2rem;
  display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center;
}
.universe-literie .u-guide-result h3 { color: #fff; font-size: 1.35rem; }
.universe-literie .u-guide-result p { color: var(--u-inverse-doux); margin-top: .6rem; max-width: 52ch; }
.universe-literie .u-guide-result .u-acts { margin-top: 0; }

.u-gauge { display: inline-flex; gap: .35rem; margin-top: 1.2rem; }
.u-gauge i { display: block; width: 26px; height: 4px; background: var(--u-filet); }
.u-gauge i.on { background: var(--u-accent); }
.u-panel .u-gauge i { background: rgba(255, 255, 255, .18); }
.u-panel .u-gauge i.on { background: var(--u-accent-fort); }

.universe-literie .u-echelle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.universe-literie .u-echelon { border-top: 2px solid var(--u-encre); padding-top: 1.3rem; }
.universe-literie .u-echelon-n {
  display: block; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--u-accent); font-weight: 600;
}
.universe-literie .u-echelon h3 { font-size: 1.15rem; margin: .7rem 0 .6rem; font-weight: 400; }
.universe-literie .u-echelon p { font-size: .92rem; }
.universe-literie .u-som-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-bottom: 3rem; }
.universe-literie .u-som-duo p { margin-bottom: 1.1rem; }
.universe-literie .u-som-ph img { width: 100%; height: auto; }

/* ==========================================================================
   6. UNIVERS BAIN (t1 : l'atelier du calme)
   ========================================================================== */

.universe-bain .u-hero-cap h1 { letter-spacing: .18em; }
.universe-bain .u-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }
.universe-bain .u-cat { background: var(--u-panneau); border: 1px solid var(--u-filet); padding: 1.4rem 1.5rem 1.7rem; transition: .3s; }
.universe-bain .u-cat:hover { border-color: var(--u-accent-fort); transform: translateY(-4px); }
.universe-bain .u-cat-n { display: block; font-size: .7rem; letter-spacing: .28em; color: var(--u-accent); }
.universe-bain .u-cat h3 { font-size: 1.15rem; margin: .6rem 0 .5rem; font-weight: 400; }
.universe-bain .u-cat p { font-size: .9rem; line-height: 1.7; }
.universe-bain .u-duo-rev .u-duo-tx { background: #ece7de; }

/* ==========================================================================
   7. UNIVERS LUMINAIRE (t1 : Nocturne)
   ========================================================================== */

.universe-luminaire .u-hero-full > img,
.universe-luminaire .u-hero-full > video { filter: brightness(.5); }
.universe-luminaire .u-hero-cap { background: linear-gradient(transparent, rgba(8, 8, 7, .9)); }

.universe-luminaire .u-couches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.universe-luminaire .u-couche { position: relative; padding: 2.6rem 1.8rem 2rem; background: var(--u-panneau); overflow: hidden; }
.universe-luminaire .u-halo {
  position: absolute; top: -60px; right: -40px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 68, .32), transparent 68%);
  pointer-events: none;
}
.universe-luminaire .u-halo-2 { background: radial-gradient(circle, rgba(255, 206, 68, .2), transparent 66%); }
.universe-luminaire .u-halo-3 { background: radial-gradient(circle, rgba(255, 206, 68, .12), transparent 64%); }
.universe-luminaire .u-couche-n { display: block; font-size: 2rem; font-weight: 200; color: var(--u-accent); line-height: 1; }
.universe-luminaire .u-couche h3 { font-size: 1.2rem; margin: .6rem 0 .7rem; font-weight: 400; }
.universe-luminaire .u-couche p { font-size: .92rem; }

.u-stars { padding-bottom: 2rem; }
.u-star { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--u-panneau); margin-bottom: 2px; }
.u-star-rev .u-star-ph { order: 1; }
.u-star-ph { overflow: hidden; background: var(--u-fond); }
.u-star-ph img { width: 100%; height: 100%; object-fit: cover; }
.u-star-tx { padding: clamp(2.2rem, 5vw, 4.5rem); }
.u-star-tx h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin: .5rem 0 1rem; }

.universe-luminaire .u-temps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.universe-luminaire .u-temp { text-align: center; }
.u-disc {
  display: block; width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.2rem;
  background: radial-gradient(circle at 40% 35%, var(--u-disc), rgba(0, 0, 0, .35));
  box-shadow: 0 0 42px -6px var(--u-disc);
}
.universe-luminaire .u-temp strong { display: block; font-size: 1.25rem; font-weight: 300; color: var(--u-accent); }
.universe-luminaire .u-temp h3 { font-size: 1rem; margin: .4rem 0 .6rem; font-weight: 400; }
.universe-luminaire .u-temp p { font-size: .88rem; }

.universe-luminaire .u-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.universe-luminaire .u-scene { border-left: 1px solid var(--u-filet); padding-left: 1.4rem; }
.universe-luminaire .u-scene-h { display: block; font-size: 1.6rem; font-weight: 200; color: var(--u-accent); }
.universe-luminaire .u-scene h3 { font-size: 1.05rem; margin: .5rem 0 .6rem; font-weight: 400; }
.universe-luminaire .u-scene p { font-size: .9rem; }

/* ==========================================================================
   8. UNIVERS PIANOS (t1 : Nocturne)
   ========================================================================== */

.universe-piano .u-hero-full > img,
.universe-piano .u-hero-full > video { filter: brightness(.52); }
.universe-piano .u-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.universe-piano .u-mat { margin: 0; background: var(--u-panneau); }
.universe-piano .u-mat img { width: 100%; height: auto; }
.universe-piano .u-mat figcaption { padding: 1.4rem 1.5rem 1.8rem; }
.universe-piano .u-mat h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: .6rem; }
.universe-piano .u-mat p { font-size: .92rem; }

.universe-piano .u-ref {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  background: var(--u-panneau); margin-bottom: 2px;
}
.universe-piano .u-ref:nth-child(even) .u-ref-ph { order: 1; }
.universe-piano .u-ref-ph { overflow: hidden; background: var(--u-fond); }
.universe-piano .u-ref-ph img { width: 100%; height: 100%; object-fit: cover; }
.universe-piano .u-ref-tx { padding: clamp(2.2rem, 5vw, 4rem); }
.universe-piano .u-ref-n { display: block; font-size: 2.4rem; font-weight: 200; color: rgba(255, 206, 68, .35); line-height: 1; }
.universe-piano .u-ref-tx h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: .3rem 0 1rem; }
.universe-piano .u-ref-tx .u-btn-line { margin-top: 1.6rem; }
.universe-piano .u-refs .u-wrap { padding-bottom: 2.5rem; }

.universe-piano .u-couleurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.universe-piano .u-couleur { margin: 0; text-align: center; }
.u-couleur-ph {
  display: block; aspect-ratio: 4 / 3; background: var(--u-teinte);
  box-shadow: inset 0 -50px 60px -50px rgba(0, 0, 0, .6);
}
.universe-piano .u-couleur figcaption {
  margin-top: .9rem; font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--u-doux);
}

/* ==========================================================================
   9. UNIVERS CARRELAGE (t1 : le nuancier)
   ========================================================================== */

.universe-carrelage .u-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.universe-carrelage .u-swatch { display: grid; grid-template-columns: 74px 1fr; gap: 1.1rem; align-items: start; }
.u-swatch-chip { display: block; aspect-ratio: 1; background: var(--u-teinte); border: 1px solid var(--u-filet); }
.u-swatch-lab b { display: block; font-size: .95rem; font-weight: 500; letter-spacing: .04em; }
.u-swatch-lab span { display: block; margin-top: .4rem; font-size: .84rem; line-height: 1.65; color: var(--u-doux); }

.universe-carrelage .u-bande { margin: 0; }
.universe-carrelage .u-bande img, .universe-carrelage .u-bande video { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.universe-carrelage .u-bande figcaption {
  max-width: var(--u-max); margin: 1rem auto 0; padding: 0 2rem;
  font-size: .78rem; letter-spacing: .1em; color: var(--u-doux);
}

.universe-carrelage .u-fins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.universe-carrelage .u-fin { background: var(--u-fond); padding-bottom: 1.6rem; }
.universe-carrelage .u-fin-ph { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.universe-carrelage .u-fin-ph img { width: 100%; height: 100%; object-fit: cover; }
.universe-carrelage .u-fin h3 { font-size: 1.2rem; font-weight: 400; margin: 1.3rem 1.4rem .6rem; }
.universe-carrelage .u-fin > p { margin: 0 1.4rem; font-size: .92rem; }
.universe-carrelage .u-fin .u-deflist { margin: 1.2rem 1.4rem 0; }

.universe-carrelage .u-formats { display: grid; gap: .2rem; }
.universe-carrelage .u-format {
  display: grid; grid-template-columns: 140px minmax(120px, 1fr) 1.4fr; gap: 1.4rem;
  align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--u-filet);
}
.universe-carrelage .u-format b { font-size: .95rem; font-weight: 500; }
.universe-carrelage .u-format span:last-child { font-size: .86rem; color: var(--u-doux); }
.u-format-bar { display: block; height: 6px; background: var(--u-filet); }
.u-format-bar i { display: block; height: 100%; background: var(--u-accent); }

/* ==========================================================================
   10. PAGE REALISATIONS (t1 : Magazine)
   ========================================================================== */

.universe-realisations .u-mag { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.8rem; }
.universe-realisations .u-mag-card { grid-column: span 2; display: block; }
.universe-realisations .u-mag:has(> :nth-child(3)) > :first-child { grid-column: span 4; }
.universe-realisations .u-mag:has(> :nth-child(3)) > :nth-child(2) { grid-column: span 2; }
.universe-realisations .u-mag-ph { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--u-panneau); }
.universe-realisations .u-mag-card:first-child .u-mag-ph { aspect-ratio: 16 / 9; }
.universe-realisations .u-mag-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.universe-realisations .u-mag-card:hover .u-mag-ph img { transform: scale(1.04); }
.universe-realisations .u-mag-n {
  position: absolute; top: 0; left: 0; z-index: 1; background: var(--u-fond);
  padding: .6rem .9rem; font-size: .72rem; letter-spacing: .16em; color: var(--u-accent);
}
.universe-realisations .u-mag-meta {
  display: block; margin-top: 1rem; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--u-accent);
}
.universe-realisations .u-mag-card h3 { font-size: 1.3rem; font-weight: 400; margin: .6rem 0 .6rem; }
.universe-realisations .u-mag-card p { font-size: .92rem; }

.universe-realisations .u-focus-gal { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 2.4rem; }
.universe-realisations .u-focus-gal figure { margin: 0; overflow: hidden; }
.universe-realisations .u-focus-gal figure.big { grid-row: span 2; }
.universe-realisations .u-focus-gal img { width: 100%; height: 100%; object-fit: cover; }
.universe-realisations .u-lots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.universe-realisations .u-lot { border-top: 1px solid var(--u-filet); padding-top: 1rem; }
.universe-realisations .u-lot b {
  display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--u-accent); font-weight: 600; margin-bottom: .5rem;
}
.universe-realisations .u-lot span { font-size: .9rem; color: var(--u-doux); line-height: 1.7; }

.universe-realisations .u-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.universe-realisations .u-ba figure { position: relative; margin: 0; overflow: hidden; }
.universe-realisations .u-ba img { width: 100%; height: auto; }
.u-ba-tag {
  position: absolute; top: 0; left: 0; z-index: 1; background: var(--u-encre); color: var(--u-fond);
  padding: .55rem 1rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .u-hero-split { grid-template-columns: 1fr; min-height: 0; }
  .u-hero-ph { min-height: 56vh; }
  .u-hero-photo-first .u-hero-ph { order: -1; }
  .u-mani-in { grid-template-columns: 1fr; gap: 2rem; }
  .u-duo, .u-star, .u-cui-plan-in { grid-template-columns: 1fr; }
  .u-star-rev .u-star-ph { order: -1; }
  .u-duo-ph, .u-star-ph { min-height: 320px; }
  .u-figures-in { grid-template-columns: repeat(2, 1fr); }
  .u-steps, .u-steps-3 { grid-template-columns: repeat(2, 1fr); }
  .u-prod-grid-3, .u-prod-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .u-temoins { grid-template-columns: 1fr; }
  .u-mosaic { grid-template-columns: repeat(2, 1fr); }
  .universe-cuisine .u-cui-step { grid-template-columns: 1fr; }
  .universe-cuisine .u-cui-step:nth-child(even) .u-cui-step-tx { order: 0; }
  .universe-cuisine .u-cui-plan-in { grid-template-columns: 1fr; }
  .universe-literie .u-echelle { grid-template-columns: repeat(2, 1fr); }
  .universe-literie .u-som-duo { grid-template-columns: 1fr; }
  .universe-literie .u-guide-result { grid-template-columns: 1fr; }
  .universe-luminaire .u-couches, .universe-luminaire .u-temps, .universe-luminaire .u-scenes { grid-template-columns: repeat(2, 1fr); }
  .universe-piano .u-mats, .universe-piano .u-couleurs { grid-template-columns: repeat(2, 1fr); }
  .universe-piano .u-ref { grid-template-columns: 1fr; }
  .universe-piano .u-ref:nth-child(even) .u-ref-ph { order: -1; }
  .universe-carrelage .u-fins { grid-template-columns: 1fr; }
  .universe-realisations .u-mag { grid-template-columns: repeat(4, 1fr); }
  .universe-realisations .u-mag-card,
  .universe-realisations .u-mag:has(> :nth-child(3)) > :first-child,
  .universe-realisations .u-mag:has(> :nth-child(3)) > :nth-child(2) { grid-column: span 2; }
  .universe-realisations .u-lots { grid-template-columns: repeat(2, 1fr); }
  .universe-meubles .u-fam-grid:has(> :nth-child(5)) > *,
  .universe-meubles .u-fam-grid:has(> :nth-child(5)) > :nth-child(-n+2) { grid-column: span 6; }
}

@media (max-width: 700px) {
  .u-wrap { padding: 0 1.2rem; }
  .u-quote, .u-cta { padding-left: 1.2rem; padding-right: 1.2rem; }
  .u-hero-full { height: 68vh; min-height: 380px; }
  .u-hero-ph { min-height: 42vh; }
  .u-figures-in, .u-steps, .u-steps-3 { grid-template-columns: 1fr; }
  .u-prod-grid, .u-prod-grid-2, .u-prod-grid-3, .u-prod-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .u-prod-large, .u-prod-grid.u-prod-large { grid-template-columns: 1fr; }
  .u-fam-grid { grid-template-columns: 1fr; }
  .u-deflist > div, .u-deflist-tight > div { grid-template-columns: 1fr; gap: .3rem; }
  .u-mosaic { grid-template-columns: 1fr; }
  .u-mosaic figure:first-child { grid-column: span 1; grid-row: span 1; }
  .u-acts { gap: .6rem; }
  .u-btn, .u-btn-line { padding: .85rem 1.4rem; font-size: .64rem; letter-spacing: .18em; }
  .u-hero-meta { gap: 1.2rem; }
  .u-hero-meta div { max-width: none; flex: 1 1 40%; }
  .universe-meubles .u-fam-grid:has(> :nth-child(5)) { grid-template-columns: 1fr; }
  .universe-meubles .u-fam-grid:has(> :nth-child(5)) > *,
  .universe-meubles .u-fam-grid:has(> :nth-child(5)) > :nth-child(-n+2) { grid-column: span 1; }
  .universe-literie .u-echelle { grid-template-columns: 1fr; }
  .universe-literie .u-opt { width: 100%; }
  .universe-luminaire .u-couches, .universe-luminaire .u-temps, .universe-luminaire .u-scenes { grid-template-columns: 1fr; }
  .universe-piano .u-mats, .universe-piano .u-couleurs { grid-template-columns: repeat(2, 1fr); }
  .universe-carrelage .u-swatches { grid-template-columns: 1fr; }
  .universe-carrelage .u-format { grid-template-columns: 1fr; gap: .5rem; }
  .universe-realisations .u-mag { grid-template-columns: 1fr; }
  .universe-realisations .u-mag-card,
  .universe-realisations .u-mag:has(> :nth-child(3)) > :first-child,
  .universe-realisations .u-mag:has(> :nth-child(3)) > :nth-child(2) { grid-column: span 1; }
  .universe-realisations .u-focus-gal { grid-template-columns: 1fr; }
  .universe-realisations .u-focus-gal figure.big { grid-row: span 1; }
  .universe-realisations .u-lots, .universe-realisations .u-ba { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .u-fam, .u-prod, .u-mag-card, .u-cat { transition: none; }
  .u-fam-ph img, .u-prod-ph img, .u-mosaic img, .u-mag-ph img { transition: none; }
}