/* ============================================================
   MEUBLE BLEU — feuille de style
   ------------------------------------------------------------
   Parti pris : ce sont les meubles qui portent le site.
   Grandes photos, beaucoup de blanc, et une palette prise sur
   les pièces elles-mêmes — l'encre bleue de la marque, le papier
   crème de l'atelier, et le rouge des laques en accent.
   ============================================================ */

:root {
  /* --- Encres --- */
  --encre: #1b1a18;
  --encre-doux: #5d564c;
  --encre-faible: #8b8275;

  /* --- Bleu de marque --- */
  --bleu: #1b3a5c;
  --bleu-fonce: #102437;
  --bleu-clair: #43719f;
  --bleu-pale: #e9eff6;

  /* --- Accent : le rouge des laques --- */
  --laque: #a13a2a;
  --laque-fonce: #7d2a1d;
  --laque-pale: #f6ebe7;

  /* --- Bois (filets, surlignages, repères d'édition) --- */
  --bois: #b07a45;
  --bois-clair: #e2c7a5;

  /* --- Papiers --- */
  --papier: #fbf8f3;
  --papier-2: #f3ece2;
  --papier-3: #eae0d2;
  --ligne: #e5dccd;
  --blanc: #ffffff;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Constantia, Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Rythme --- */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 96px;
  --section-y: clamp(64px, 9vw, 124px);

  --max: 1240px;
  /* débord des photos « jusqu'au bord de l'écran », plafonné : sur un très grand écran,
     une photo étirée jusqu'au bord dépasserait sa définition et deviendrait floue */
  --debord: min(calc((100vw - min(100vw, var(--max))) / 2 + var(--e3)), 280px);
  --max-texte: 62ch;

  --rayon: 8px;
  --rayon-l: 18px;
  --ombre: 0 1px 2px rgba(27, 26, 24, .04), 0 6px 18px -10px rgba(27, 26, 24, .16);
  --ombre-forte: 0 2px 6px rgba(27, 26, 24, .06), 0 30px 60px -28px rgba(27, 26, 24, .42);

  --transition: 220ms cubic-bezier(.22, .8, .3, 1);
  --lent: 600ms cubic-bezier(.22, .8, .3, 1);
}

/* --- Base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-anchor : quand le grand logo rétrécit, le navigateur compenserait la hauteur perdue
   en remontant la page tout en haut… où le logo regrandit → clignotement en boucle */
html { scroll-behavior: smooth; overflow-anchor: none; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--laque); color: var(--blanc); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  color: var(--bleu-fonce);
  margin: 0 0 .5em;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -.008em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Lignes : les titres et textes courts se répartissent en lignes de longueur
   égale (pas de « Des meubles / uniques, / conçus et… »), les paragraphes
   évitent le mot seul sur la dernière ligne. Les navigateurs qui ne
   connaissent pas text-wrap ont le filet posé par site.js (typo). */
h1, h2, h3, h4, .surtitre, .chapo, .hero__accroche, .btn, .projet__meta, .citation { text-wrap: balance; }

/* Retours à la ligne voulus par le propriétaire (Entrée en mode édition) : affichés tels quels */
[data-mb] { white-space: pre-line; }
/* Largeur choisie en mode édition (−/+) : remplace la largeur par défaut du texte,
   sans jamais dépasser la place disponible */
[data-mb-largeur] { max-width: min(var(--largeur-choisie), 100%) !important; }
p, li, dd, blockquote { text-wrap: pretty; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--e3); }

/* Les images « à fond perdu » se calent sur 100vw, qui compte la barre de
   défilement : ce clip absorbe le surplus. `clip` et non `hidden`, pour ne
   pas casser le `position: sticky` de l'en-tête. */
main { overflow-x: clip; }
.section { padding: var(--section-y) 0; }
.section--serre { padding: clamp(44px, 6vw, 76px) 0; }
.section--papier { background: var(--papier-2); }
.section--sombre, .section--bleu { background: var(--bleu-fonce); color: #cfdcea; }
.section--sombre h2, .section--sombre h3,
.section--bleu h2, .section--bleu h3 { color: var(--blanc); }

/* Surtitre : petit filet coloré puis le mot, comme une étiquette d'atelier */
.surtitre {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laque);
  margin: 0 0 var(--e2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.surtitre::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.section--sombre .surtitre, .section--bleu .surtitre { color: var(--bois-clair); }

.chapo {
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  line-height: 1.6;
  color: var(--encre-doux);
  max-width: var(--max-texte);
}
.section--sombre .chapo, .section--bleu .chapo { color: #b9cadd; }

/* 72ch (et non 58) : une introduction d'une phrase tient sur une ligne au lieu de deux */
/* La limite de largeur est portée par CHAQUE texte, pas par le bloc : sinon un texte
   élargi depuis le mode édition (data-mb-largeur) resterait coincé dans son parent.
   42rem ≈ les 72ch d'avant, mesurés dans la police du bloc. */
.entete-section { margin-bottom: var(--e5); }
.entete-section > * { max-width: 42rem; }

/* Bandeau de titre des pages intérieures — même respiration partout */
.entete-page {
  background: var(--papier-2);
  border-bottom: 1px solid var(--ligne);
  padding: clamp(56px, 7vw, 100px) 0 clamp(44px, 5vw, 68px);
}
/* même règle que .entete-section : la limite (≈ les 64ch d'avant) est portée par chaque
   texte, sinon un texte élargi en mode édition bute sur ce bloc et non sur la page */
.entete-page .entete-section { margin-bottom: 0; }
.entete-page .entete-section > * { max-width: 38rem; }

/* --- Boutons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--bleu);
  border-radius: 100px;
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: var(--bleu-fonce);
  border-color: var(--bleu-fonce);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--ombre);
}
.btn--ligne { background: transparent; color: var(--bleu); }
.btn--ligne:hover { background: var(--bleu); color: var(--blanc); }
.btn--clair { background: var(--laque); border-color: var(--laque); }
.btn--clair:hover { background: var(--laque-fonce); border-color: var(--laque-fonce); }
.btn--fantome { background: transparent; border-color: rgba(255, 255, 255, .45); color: var(--blanc); }
.btn--fantome:hover { background: rgba(255, 255, 255, .14); border-color: var(--blanc); }

/* --- En-tête / navigation ----------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 248, 243, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.entete.defile { box-shadow: var(--ombre); }

/* tant qu'on n'a pas défilé, l'en-tête se fond dans la page */
.entete:not(.defile) { background: var(--papier); border-bottom-color: transparent; }

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: 82px;
}
.logo { display: flex; align-items: center; gap: 14px; }
.logo:hover { text-decoration: none; }
/* Logo en grand (×2) en haut de page ; il reprend sa taille dès qu'on défile,
   sinon l'en-tête collant mangerait trop d'écran */
.logo__marque {
  width: 88px; height: 108px;
  border-radius: 14px;
  background: var(--bleu);
  display: grid; place-items: center;
  flex: none;
  transition: background var(--transition), transform var(--transition),
              width var(--transition), height var(--transition), border-radius var(--transition);
}
.logo__marque img { height: 92px; width: auto; max-width: none; display: block; transition: height var(--transition); }
.entete:not(.defile) .entete__inner { padding: 14px 0; }
.entete__inner { transition: padding var(--transition); }
.entete.defile .logo__marque { width: 44px; height: 54px; border-radius: 10px; }
.entete.defile .logo__marque img { height: 46px; }
.logo:hover .logo__marque { transform: rotate(-4deg); }
.logo__nom {
  font-family: var(--serif);
  font-size: 1.34rem;
  font-weight: 600;
  color: var(--bleu-fonce);
  line-height: 1.1;
  display: block;
  transition: color var(--transition);
}
.logo__baseline {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-doux);           /* encre-faible : contraste 3,8, trop pâle */
  transition: color var(--transition);
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--encre);
  transition: color var(--transition), background var(--transition);
}
.nav a:hover { background: var(--papier-2); text-decoration: none; }
/* soulignement qui se déploie depuis la gauche */
.nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--laque);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav > a:not(.btn):hover::after, .nav > a.actif::after { transform: scaleX(1); }
.nav a.actif { font-weight: 600; }
/* `.nav a` impose l'encre sombre : le bouton doit reprendre son texte blanc, sinon il est illisible */
.nav .btn, .nav .btn:hover { margin-left: 12px; padding: 11px 22px; color: var(--blanc); }
.nav .btn:hover { background: var(--bleu-fonce); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  background: var(--blanc);
  cursor: pointer;
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--bleu-fonce);
}
.burger span { top: 22px; }
.burger span::before { top: -6px; left: 0; right: 0; }
.burger span::after { top: 6px; left: 0; right: 0; }

/* --- Hero ---------------------------------------------------
   Texte sur papier, photo pleine hauteur filant jusqu'au bord de
   l'écran. Les photos de l'atelier sont prises sur mur blanc :
   du texte posé dessus obligerait à un voile sombre qui les
   ternirait. Ici elles gardent leurs couleurs d'origine. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--e3) clamp(56px, 8vw, 104px);
  /* pas de clip ici : il rognerait justement le débord de la photo (voir main) */
}
.hero__media {
  /* déborde jusqu'au bord droit de la fenêtre */
  margin-right: calc(-1 * var(--debord));
  border-radius: var(--rayon-l) 0 0 var(--rayon-l);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--papier-2);
}
.hero__media img {
  width: 100%;
  height: clamp(340px, 70vh, 660px);
  object-fit: cover;
  /* photo verticale dans un cadre horizontal : on cadre un peu sous le centre, pour garder
     les dessins posés sur le pupitre ET le bureau (le centre coupait le haut des dessins) */
  object-position: 50% 62%;
  animation: heroZoom 1600ms var(--lent) both;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* 14ch cassait le titre en 5 lignes inégales ; 18ch + équilibrage = 3 lignes régulières */
.hero h1 { max-width: 18ch; margin-bottom: .35em; }
.hero__accroche {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  color: var(--encre-doux);
  max-width: 44ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--e4); }

/* --- Bandeau chiffres --------------------------------------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e4);
}
.chiffre { padding-top: var(--e3); border-top: 2px solid var(--bois-clair); }
.chiffre__valeur {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--bleu-fonce);
  display: block;
  line-height: 1.1;
  margin-bottom: 2px;
}
.chiffre__label { font-size: .92rem; color: var(--encre-doux); }

/* --- Blocs deux colonnes ------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.duo--inverse .duo__media { order: -1; }
.duo__media img {
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--papier-3);
}
/* variante : l'image touche le bord de l'écran.
   `overflow-x: clip` sur la section absorbe la largeur de la barre de défilement
   (100vw la compte, pas la zone visible) — clip plutôt que hidden, qui casserait
   le `position: sticky` de l'en-tête. */
.section:has(.duo--bord) { overflow-x: clip; }
.duo--bord { align-items: center; }
.duo--bord .duo__media { margin-right: calc(-1 * var(--debord)); }
.duo--bord .duo__media img {
  border-radius: var(--rayon-l) 0 0 var(--rayon-l);
  aspect-ratio: 5 / 4;
}
.duo--inverse.duo--bord .duo__media {
  margin-right: 0;
  margin-left: calc(-1 * var(--debord));
}
.duo--inverse.duo--bord .duo__media img { border-radius: 0 var(--rayon-l) var(--rayon-l) 0; }
/* photo + légende (« L'atelier » : dire au visiteur que ce sont des maquettes) */
figure.duo__media { margin: 0; }
.duo__legende { margin-top: 12px; font-size: .9rem; font-style: italic; color: var(--encre-doux); }
/* au-delà de ~1750 px, le débord plafonné (--debord) n'atteint plus le bord de l'écran : la
   photo s'arrêtait 280 px après toutes les autres sections, au milieu du vide (décalage vu
   par Lucas). Sans débord, elle s'aligne sur la colonne commune et reprend ses 4 coins. */
@media (min-width: 1753px) {
  :root { --debord: 0px; }
  .hero__media, .duo--bord .duo__media img, .duo--inverse.duo--bord .duo__media img { border-radius: var(--rayon-l); }
}

/* texte long à côté d'une photo (« Mon parcours ») : la photo reste en vue pendant la lecture */
.duo--haut { align-items: start; }
.duo__media--colle { position: sticky; top: 110px; }
/* le meuble se voit EN ENTIER : proportions de la photo, pas de recadrage ; hauteur bornée
   à l'écran (la photo reste visible d'un coup), centrée si elle devient plus étroite */
.duo__media--colle img {
  aspect-ratio: auto; object-fit: contain;
  width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 140px);
  display: block; margin-inline: auto;
}

/* --- Mon travail : trois traits, une photo chacun ----------- */
.citation {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--encre);
  max-width: 60ch;
}
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e4) var(--e3);
}
/* même cadrage que la boutique : la pièce entière, qu'elle soit haute ou large */
.theme__image {
  border-radius: var(--rayon-l);
  background: var(--papier-2);
  margin-bottom: var(--e3);
  overflow: hidden;
}
.theme__image img { aspect-ratio: 1 / 1; object-fit: contain; padding: var(--e2); width: 100%; }
.theme h3 { margin-bottom: .4em; }
.theme p { color: var(--encre-doux); font-size: .97rem; margin: 0; }

/* --- Cartes savoir-faire ------------------------------------ */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e3);
}
.carte {
  position: relative;
  background: var(--blanc);
  border-radius: var(--rayon-l);
  padding: var(--e4) var(--e3) var(--e4);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--laque);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lent);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte:hover::before { transform: scaleX(1); }
.carte h3 { margin-bottom: .45em; }
.carte p { color: var(--encre-doux); font-size: .96rem; margin: 0; }
.carte__num {
  font-family: var(--serif);
  color: var(--laque);
  font-size: 1rem;
  letter-spacing: .08em;
  display: block;
  margin-bottom: var(--e2);
}
.section--papier .carte { background: var(--papier); }

/* --- Étapes ------------------------------------------------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
}
.etape { position: relative; border-top: 2px solid rgba(226, 199, 165, .4); padding-top: var(--e3); }
.etape::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bois-clair);
}
.etape h3 { font-family: var(--sans); font-size: 1rem; color: var(--blanc); margin-bottom: .35em; }
.etape p { font-size: .93rem; color: #b0c2d6; margin: 0; }

/* --- Témoignages -------------------------------------------- */
.temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--e3); }
.temoignage {
  position: relative;
  background: var(--blanc);
  border-radius: var(--rayon-l);
  padding: var(--e5) var(--e4) var(--e4);
  margin: 0;
}
.temoignage::before {
  content: "«";
  position: absolute;
  top: 14px; left: var(--e4);
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--laque);
  opacity: .22;
}
.temoignage p { font-family: var(--serif); font-size: 1.14rem; line-height: 1.55; color: var(--encre); }
.temoignage footer { font-size: .86rem; letter-spacing: .04em; color: var(--encre-faible); margin-top: var(--e2); }
.section--papier .temoignage { background: var(--papier); }

/* --- Portfolio ---------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--e5); }
.filtre {
  padding: 10px 20px;
  border: 1px solid var(--ligne);
  border-radius: 100px;
  background: transparent;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--encre-doux);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.filtre:hover { border-color: var(--laque); color: var(--laque); }
.filtre.actif { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--blanc); }

/* Grille à 3 colonnes fixes sur ordinateur (2 sur tablette, 1 sur téléphone).
   Le catalogue était en « colonnes de journal » : filtré à 4 meubles, il retombait
   sur 2 colonnes. Il partage désormais la grille et le cadre carré de la boutique. */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4) var(--e3); }
@media (max-width: 1100px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .galerie { grid-template-columns: minmax(0, 1fr); } }

.projet {
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
.projet__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--papier-3);
  box-shadow: var(--ombre);
  transition: box-shadow var(--lent);
}
.projet__image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  transition: transform 900ms cubic-bezier(.22, .8, .3, 1);
}
.projet:hover .projet__image { box-shadow: var(--ombre-forte); }
.projet:hover .projet__image img { transform: scale(1.045); }
.projet__etiquette {
  position: absolute; top: 16px; left: 16px;
  background: rgba(251, 248, 243, .92);
  backdrop-filter: blur(6px);
  color: var(--bleu-fonce);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
}
.projet__compte {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(16, 36, 55, .78);
  backdrop-filter: blur(6px);
  color: var(--blanc);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 6px 13px;
  border-radius: 100px;
}
.projet__corps { padding: var(--e3) 2px 0; }
.projet__corps h3 { margin-bottom: .3em; transition: color var(--transition); }
.projet:hover .projet__corps h3 { color: var(--laque); }
/* porte soit « lieu · année », soit les matériaux : pas de capitales,
   la liste des essences y serait illisible */
.projet__meta {
  font-size: .88rem;
  color: var(--encre-faible);
  margin-bottom: var(--e2);
}
.projet__corps p { font-size: .95rem; color: var(--encre-doux); margin: 0; }
.projet__lire {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--e2);
  font-size: .9rem;
  font-weight: 600;
  color: var(--bleu);
}
.projet__lire::after { content: "→"; transition: transform var(--transition); }
.projet:hover .projet__lire::after { transform: translateX(5px); }

/* variante lien (aperçu sur l'accueil) */
a.projet { display: block; text-decoration: none; color: inherit; }
a.projet:hover { text-decoration: none; }

/* lien d'évitement pour le clavier */
.saut-lien:focus {
  position: static !important;
  display: inline-block;
  margin: 8px var(--e3);
  padding: 10px 16px;
  background: var(--bleu);
  color: var(--blanc);
  border-radius: var(--rayon);
}
:focus-visible { outline: 2px solid var(--laque); outline-offset: 3px; }

/* --- Fiche projet (modale) ---------------------------------- */
.modale {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16, 36, 55, .68);
  backdrop-filter: blur(3px);
  display: none;
  padding: var(--e3);
  overflow-y: auto;
}
.modale.ouverte { display: grid; place-items: start center; }
.modale__boite {
  background: var(--papier);
  border-radius: var(--rayon-l);
  max-width: 940px;
  width: 100%;
  margin: var(--e4) 0;
  overflow: hidden;
  position: relative;
  box-shadow: var(--ombre-forte);
}
.modale__fermer {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(251, 248, 243, .94);
  backdrop-filter: blur(6px);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--bleu-fonce);
  z-index: 2;
  transition: background var(--transition), transform var(--transition);
}
.modale__fermer:hover { background: var(--blanc); transform: rotate(90deg); }

/* Visionneuse : hauteur fixe + « contain », pour afficher en entier aussi bien
   un buffet en longueur qu'une armoire en hauteur. */
.modale__image { position: relative; background: var(--papier-2); }
.modale__image img {
  width: 100%;
  height: clamp(240px, 56vh, 540px);
  object-fit: contain;
  background: var(--papier-2);
}
.modale__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(251, 248, 243, .92);
  backdrop-filter: blur(6px);
  box-shadow: var(--ombre);
  color: var(--bleu-fonce);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.modale__nav:hover { background: var(--blanc); }
.modale__nav--prec { left: var(--e2); }
.modale__nav--suiv { right: var(--e2); }
.modale__nav--prec:hover { transform: translateY(-50%) translateX(-3px); }
.modale__nav--suiv:hover { transform: translateY(-50%) translateX(3px); }
.modale__compteur {
  position: absolute; right: var(--e2); bottom: var(--e2);
  background: rgba(16, 36, 55, .78);
  color: var(--blanc);
  font-size: .76rem;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 100px;
}
.modale__compteur:empty { display: none; }

.modale__vignettes {
  display: flex;
  gap: 10px;
  padding: 14px var(--e3);
  overflow-x: auto;
  background: var(--papier-2);
  border-top: 1px solid var(--ligne);
}
.modale__vignette {
  flex: 0 0 auto;
  width: 82px; height: 60px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  background: var(--blanc);
  cursor: pointer;
  opacity: .62;
  transition: opacity var(--transition), border-color var(--transition), transform var(--transition);
}
.modale__vignette img { width: 100%; height: 100%; object-fit: cover; }
.modale__vignette:hover { opacity: 1; transform: translateY(-2px); }
.modale__vignette.actif { opacity: 1; border-color: var(--laque); }

.modale__corps { padding: var(--e5) clamp(24px, 4vw, 56px) var(--e5); }
.modale__corps h2 { margin-bottom: .35em; }
.modale__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin: var(--e3) 0 var(--e4);
  padding: var(--e3) 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.modale__meta div { font-size: .95rem; }
.modale__meta dt {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laque);
  font-weight: 700;
  margin-bottom: 3px;
}
.modale__texte { font-size: 1.06rem; color: var(--encre-doux); line-height: 1.72; }
.modale__action { margin-top: var(--e4); }

/* --- Listes diverses ---------------------------------------- */
.puces { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.puces li { padding-left: 30px; position: relative; color: var(--encre-doux); }
.puces li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 16px; height: 2px;
  background: var(--laque);
}
.etiquettes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.etiquettes li {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  color: var(--bleu-fonce);
  border-radius: 100px;
  padding: 8px 17px;
  font-size: .88rem;
  transition: border-color var(--transition), color var(--transition);
}
.etiquettes li:hover { border-color: var(--laque); color: var(--laque); }

.prose > * { max-width: 66ch; }
.prose p { color: var(--encre-doux); }
/* la première ligne d'un texte de présentation se détache, comme un chapô de magazine */
.prose p:first-of-type {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--encre);
}

/* --- Formulaire --------------------------------------------- */
.contact__grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.formulaire {
  background: var(--blanc);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre);
  padding: clamp(26px, 4vw, 44px);
}
.champ { margin-bottom: var(--e3); }
.champ label { display: block; font-size: .88rem; font-weight: 600; color: var(--bleu-fonce); margin-bottom: 8px; }
.champ .aide { font-weight: 400; color: var(--encre-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--papier);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.champ textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--laque);
  box-shadow: 0 0 0 3px var(--laque-pale);
}
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
/* champ piège à robots : hors écran (pas display:none, que certains robots repèrent) */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rgpd { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--encre-doux); }
/* case assez grande pour un doigt (la case native fait 13 px) */
.rgpd input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--bleu); }
.note-form { margin-top: 14px; font-size: .85rem; color: var(--encre-doux); }
.note-form a { color: var(--bleu-fonce); text-decoration: underline; text-underline-offset: 2px; }
.message-form { padding: 15px 18px; border-radius: var(--rayon); margin-bottom: var(--e3); font-size: .95rem; display: none; }
.message-form.ok { display: block; background: #e8f2ea; color: #245c33; border: 1px solid #bcd9c3; }
.message-form.ko { display: block; background: #fbeceb; color: #8d2d24; border: 1px solid #f0c8c4; }

.bloc-info {
  background: var(--blanc);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre);
  padding: var(--e4) var(--e3);
  margin-bottom: var(--e3);
}
.bloc-info h3 { font-family: var(--sans); font-size: 1rem; }
.info-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.info-liste div { font-size: .95rem; }
.info-liste dt {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laque);
  font-weight: 700;
  margin-bottom: 4px;
}

/* --- Mentions légales --------------------------------------- */
/* Impressum en carte à gauche (reste en vue pendant la lecture), texte à droite */
.mentions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.mentions .bloc-info { position: sticky; top: 110px; margin-bottom: 0; }
.mentions .bloc-info h2 { font-family: var(--sans); font-size: 1rem; margin-bottom: var(--e3); }
.mentions dd { margin: 0; overflow-wrap: anywhere; }      /* une adresse e-mail longue ne déborde pas */
.mentions__texte > * { max-width: 66ch; }
.mentions__texte h2 { margin-bottom: var(--e3); }
.mentions__texte h2 + * { margin-top: 0; }
.mentions__texte .rubrique + .rubrique { margin-top: var(--e3); }
.rubrique h3 { font-family: var(--sans); font-size: 1.05rem; margin-bottom: .35em; }
.rubrique p, .mentions__texte > p { color: var(--encre-doux); }
#droits { margin-top: var(--e5); }
.mentions__maj { margin-top: var(--e4); font-size: .85rem; }
/* une ancre (#donnees) ne passe pas sous l'en-tête collant */
.mentions [id] { scroll-margin-top: 120px; }

/* --- Appel à l'action --------------------------------------- */
.cta { text-align: center; }
/* 27rem ≈ les 46ch d'avant ; centré, et réglable texte par texte */
.cta > * { max-width: 27rem; margin-left: auto; margin-right: auto; }
/* Titre du bandeau (« Une pièce vous plaît ? ») sur UNE ligne : toute la largeur du bandeau,
   taille qui suit l'écran. Un réglage de largeur n'a plus de sens ici (d'où le !important qui
   l'emporte sur [data-mb-largeur]) ; un titre très long repasse proprement sur deux lignes. */
.cta h2, .cta h2[data-mb-largeur] { max-width: none !important; font-size: min(3rem, 5.5vw); }
.cta .chapo { margin: 0 auto var(--e4); }
/* « Me contacter » + téléphone : toujours sur une seule ligne, en deux moitiés égales */
.cta__actions { display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.cta__actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; line-height: 1.25; }

/* --- Pied de page ------------------------------------------- */
.pied {
  background: var(--bleu-fonce);
  color: #a8bdd2;
  padding: var(--e6) 0 var(--e4);
  font-size: .93rem;
}
.pied a { color: #dce6f1; }
/* pied SYMÉTRIQUE (choix de Lucas) : 3 colonnes égales, la 2ᵉ centrée sur l'axe de la page —
   pile sous le bouton « Me contacter » de l'encart centré au-dessus —, la 3ᵉ calée à droite */
.pied__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); margin-bottom: var(--e5); }
.pied__grille > :nth-child(2) { text-align: center; }
.pied__grille > :nth-child(3) { text-align: right; }
.pied h4 {
  color: var(--bois-clair);
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
}
.pied__nom { font-family: var(--serif); font-size: 1.6rem; color: var(--blanc); margin-bottom: .35em; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pied ul a { transition: color var(--transition); }
.pied ul a:hover { color: var(--bois-clair); }
/* barre du bas sur la MÊME grille que les colonnes du dessus : « Mentions légales » au centre
   sous « Contact », « Espace propriétaire » à droite sous « Le site » (mêmes points de rupture) */
.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: var(--e3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--e5);
  row-gap: 14px;
  justify-items: start;
  align-items: baseline;
  font-size: .8rem;
  color: #7f95ad;
}
.pied__bas > :nth-child(2) { justify-self: center; }
.pied__bas > :nth-child(3) { justify-self: end; }
/* signature du prestataire, en bas de la colonne « Meuble Bleu » du pied */
.pied__credit { margin-top: var(--e3); font-size: .8rem; color: #7f95ad; }
.pied__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Responsive --------------------------------------------- */
@media (max-width: 980px) {
  .hero, .duo, .contact__grille { grid-template-columns: 1fr; gap: var(--e4); }
  .mentions { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .mentions .bloc-info { position: static; }
  .hero__media { margin-right: 0; border-radius: var(--rayon-l); }
  .hero__media img { height: clamp(280px, 46vh, 420px); }
  .duo--inverse .duo__media { order: 0; }
  /* une seule colonne : la photo suit le texte, elle n'a plus de raison de rester collée */
  .duo__media--colle { position: static; }
  .duo__media--colle img { max-height: 80vh; }   /* toujours en entier, juste moins haute */
  .duo--bord .duo__media,
  .duo--inverse.duo--bord .duo__media { margin-left: 0; margin-right: 0; }
  .duo--bord .duo__media img,
  .duo--inverse.duo--bord .duo__media img { border-radius: var(--rayon-l); }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: var(--e4); }
  .pied__bas { grid-template-columns: 1fr 1fr; column-gap: var(--e4); }
  /* sur 2 colonnes, la symétrie n'a plus de sens : tout reprend le calage à gauche */
  .pied__grille > :nth-child(n), .pied__bas > :nth-child(n) { text-align: left; justify-self: start; }
}

@media (max-width: 760px) {
  .burger { display: block; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--ligne);
    flex-direction: column;
    align-items: stretch;
    padding: 14px var(--e3) 22px;
    gap: 2px;
    display: none;
    box-shadow: var(--ombre);
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: 13px 6px; }
  .nav > a:not(.btn)::after { display: none; }
  .nav .btn { margin: 12px 0 0; justify-content: center; }
  .entete__inner { position: relative; min-height: 70px; }
  .logo__marque { width: 66px; height: 81px; border-radius: 12px; }    /* ×1,5 sur téléphone */
  .logo__marque img { height: 69px; }
  .entete:not(.defile) .entete__inner { padding: 8px 0; }
  .champ--duo { grid-template-columns: 1fr; }
  .modale { padding: 12px; }
  .modale__boite { margin: 12px 0; }
  .modale__corps { padding: var(--e4) var(--e3); }
  .modale__image img { height: clamp(200px, 42vh, 360px); }
  .modale__nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .modale__vignette { width: 66px; height: 50px; }
  .temoignage { padding: var(--e5) var(--e3) var(--e3); }
  .temoignage::before { left: var(--e3); }
  body { font-size: 16px; }
}

@media (max-width: 520px) {
  .pied__grille { grid-template-columns: 1fr; gap: var(--e4); }
  .pied__bas { grid-template-columns: 1fr; }
  /* liens du pied : 20 px de haut sur 12 px d'écart, trop serrés pour un doigt → zone de 40 px */
  .pied ul { gap: 0; }
  .pied ul a, .pied .lien-proprietaire, .pied__bas a, .info-liste a { display: inline-block; padding: 10px 0; }
  .logo__baseline { display: none; }
  /* boutons côte à côte sur téléphone (accueil + bandeau final) : deux moitiés égales ;
     un libellé trop long passe sur deux lignes DANS son bouton au lieu de déborder */
  .hero__actions { flex-wrap: nowrap; gap: 10px; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
                        padding: 14px 10px; font-size: .9rem; line-height: 1.25; }
  .cta__actions .btn { padding: 14px 10px; font-size: .9rem; }
  .cta__actions [data-mb-tel] { white-space: nowrap; }   /* un numéro ne se coupe pas en deux */
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* --- Apparition au défilement -------------------------------- */
/* --i porte le rang de l'élément dans sa liste : les cartes arrivent en cascade */
.apparait {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--lent), transform var(--lent);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } }

/* --- Impression --------------------------------------------- */
@media print {
  .entete, .pied, .btn, .filtres, .modale,
  .barre-edition, .barre-largeur, .modale-fond, .toast, .lien-proprietaire { display: none !important; }
  body { background: #fff; }
  .hero::after { display: none; }
}

/* ============================================================
   ESPACE PROPRIÉTAIRE (édition dans la page)
   ============================================================ */

/* lien discret dans le pied de page */
.lien-proprietaire {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: .8rem;
  color: rgba(220, 230, 241, .5);
  text-decoration: underline;
  cursor: pointer;
}
.lien-proprietaire:hover { color: #dce6f1; }

/* champs modifiables */
body.edition [data-mb] {
  outline: 1.5px dashed var(--bois);
  outline-offset: 4px;
  border-radius: 3px;
  cursor: text;
}
body.edition [data-mb]:hover { background-image: linear-gradient(rgba(181, 118, 60, .12), rgba(181, 118, 60, .12)); }
/* En cours de saisie, le texte GARDE son fond : un fond blanc imposé rendait illisibles
   tous les textes blancs (encarts bleus, pied de page, boutons). Seul le cadre change :
   bleu sur fond clair, bois clair sur fond sombre. */
body.edition [data-mb]:focus { outline: 2px solid var(--bleu); outline-offset: 4px; background-image: none; }
body.edition :is(.section--bleu, .section--sombre, .pied, .btn) [data-mb]:focus,
body.edition .btn[data-mb]:focus { outline-color: var(--bois-clair); }
body.edition .projet__meta span:empty { display: inline-block; min-width: 70px; }
body.edition .projet { cursor: default; }
body.edition .projet__lire { display: none; }
.projet__meta span:empty { display: none; }
.projet__meta:has(span:empty) .projet__sep { display: none; }

/* photos remplaçables */
body.edition [data-mb-src] { cursor: pointer; outline: 1.5px dashed var(--bois); outline-offset: 3px; }
/* .hero__media est déjà positionné (il remplit le hero) : ne pas le repasser en relative */
body.edition .projet__image, body.edition .duo__media { position: relative; }
body.edition .projet__image::after,
body.edition .hero__media::before,
body.edition .duo__media::after {
  content: "Changer la photo";
  position: absolute;
  z-index: 3;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(22, 48, 78, .88);
  color: var(--blanc);
  padding: 8px 15px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}

/* barre d'édition */
.barre-edition {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(160%);
  z-index: 95;
  background: var(--bleu-fonce);
  color: #dce6f1;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  box-shadow: 0 18px 46px -16px rgba(0, 0, 0, .6);
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
  flex-wrap: wrap;
  /* sans max-content, un bloc placé à left:50% ne dispose que de la moitié de l'écran et passe à la ligne */
  width: max-content;
  max-width: calc(100vw - 24px);
  justify-content: center;
}
body.edition .barre-edition { transform: translateX(-50%) translateY(0); }
.barre-edition__etat { font-size: .82rem; white-space: nowrap; }
.barre-edition__etat b { color: var(--bois-clair); }
.barre-edition button, .barre-edition a {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.barre-edition button:disabled { opacity: .6; cursor: default; }
.be-enregistrer { background: var(--bois); color: var(--blanc); }
.be-enregistrer:hover { background: #a1682f; }
.be-neutre { background: rgba(255, 255, 255, .16); color: #eaf1f8; }
.be-neutre:hover { background: rgba(255, 255, 255, .28); text-decoration: none; }
.be-quitter { background: rgba(255, 255, 255, .1); color: #eaf1f8; }
.be-quitter:hover { background: rgba(255, 255, 255, .22); }

/* modales de l'espace propriétaire */
.modale-fond {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(22, 48, 78, .55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modale-fond.ouverte { display: flex; }
.modale-boite {
  background: var(--papier);
  border-radius: 8px;
  max-width: 400px;
  width: 100%;
  padding: 32px 30px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.modale-boite--large { max-width: 540px; max-height: 90vh; overflow-y: auto; }
.modale-boite h3 { font-size: 1.5rem; margin-bottom: .2em; }
.modale-boite > p { font-size: .9rem; color: var(--encre-doux); margin-bottom: 16px; }
.modale-boite input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--blanc);
  margin-bottom: 10px;
  color: var(--encre);
}
.modale-boite input:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 3px rgba(61, 107, 158, .15); }
.modale-boite .btn { width: 100%; justify-content: center; }
.modale-boite__x {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--encre-doux);
}
.modale-boite__err { color: #9b2226; font-size: .85rem; font-weight: 600; min-height: 20px; margin: 0 0 8px; }
.modale-boite__lbl {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bois);
  margin: 16px 0 6px;
}
.modale-boite__aide { font-size: .8rem; color: var(--encre-doux); margin: 0 0 10px; }

/* message temporaire */
.toast {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bleu);
  color: var(--blanc);
  padding: 12px 22px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 600;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* barre de largeur : apparaît au-dessus du bloc de texte en cours de modification */
.barre-largeur {
  position: absolute;
  z-index: 96;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  background: var(--bleu-fonce);
  color: #dce6f1;
  border-radius: 100px;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .55);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.barre-largeur.visible { display: flex; }
.barre-largeur span { margin-right: 4px; }
.barre-largeur button {
  font: inherit;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
}
.barre-largeur button:hover { background: rgba(255, 255, 255, .28); }
.barre-largeur .aide-entree { color: var(--bois-clair); font-weight: 500; margin-left: 6px; }
@media (max-width: 760px) { .barre-largeur .aide-entree { display: none; } }

/* changement de page en mode édition (les liens du menu y sont modifiables) */
.be-pages select {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .16);
  color: #eaf1f8;
  cursor: pointer;
}
.be-pages select option { color: var(--encre); }

@media (max-width: 760px) {
  .barre-edition { bottom: 12px; gap: 6px; padding: 9px 10px; }
  .barre-edition__etat { display: none; }
  .barre-edition button, .barre-edition a, .be-pages select { padding: 8px 12px; font-size: .8rem; }
  /* sous 16 px, iOS zoome la page dès qu'on touche la liste */
  .be-pages select { font-size: 16px; }
}
@media (max-width: 420px) {
  /* petit téléphone : les boutons secondaires de la barre ne gardent que leur icône
     (le nom complet reste lu par les lecteurs d'écran via aria-label) */
  .be-texte { display: none; }
}

/* ============================================================
   BOUTIQUE
   ============================================================ */

/* grille régulière : contrairement au portfolio, on compare des pièces et leurs prix,
   les cartes doivent s'aligner. Mais un buffet de 2 m et une armoire haute ne tiennent
   pas dans le même cadre sans être rognés : la photo entière est posée dans un cadre carré. */
.galerie--boutique .projet__image { background: var(--papier-2); }
/* sur une section déjà crème, le cadre prend le papier clair pour rester visible */
.section--papier .galerie--boutique .projet__image { background: var(--papier); }
.galerie--boutique .projet__image img { aspect-ratio: 1 / 1; object-fit: contain; padding: var(--e2); }
.galerie--boutique .projet:hover .projet__image img { transform: scale(1.025); }

/* nom et prix côte à côte quand ils tiennent sur une ligne ; sinon le prix passe dessous,
   au lieu d'écraser le nom en colonne étroite (« Pupitre / à piètement rouge ») */
.article__ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--e2); row-gap: 2px; }
.article__ligne h3 { margin-bottom: .2em; flex: 1 1 max-content; max-width: 100%; }
.article__prix {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--laque);
  white-space: nowrap;
  margin: 0;
}
.article .projet__meta { margin-bottom: .4em; }

/* pastille d'état : fond opaque pour rester lisible sur n'importe quelle photo */
.article__statut { background: var(--blanc); }
.article--reservee .article__statut { background: var(--bois-clair); color: var(--encre); }
.article--vendue .article__statut { background: var(--bleu-fonce); color: var(--blanc); }
.article--vendue .projet__image img { filter: grayscale(.55); opacity: .8; }
.article--vendue .article__prix { color: var(--encre-faible); text-decoration: line-through; }

/* la description se lit dans la fiche ; sur la carte, seulement pour la modifier */
.article__description { display: none; }
body.edition .article__description { display: block; margin-top: .6em; }
/* en édition, la pastille d'état se clique pour passer à l'état suivant */
body.edition [data-mb-statut] { cursor: pointer; outline: 1.5px dashed var(--bois); outline-offset: 2px; }

.boutique__vide {
  max-width: 56ch;
  padding: var(--e4);
  border: 1px dashed var(--ligne);
  border-radius: var(--rayon-l);
  color: var(--encre-doux);
  background: var(--papier-2);
}

/* --- accessibilité ----------------------------------------- */
[hidden] { display: none !important; }
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}