/* ==========================================================
   STUDIO MOUTO — V2
   Pour changer les couleurs : modifiez les valeurs dans :root
   ========================================================== */

:root {
  --sand: #e6d5b8;
  --sand-deep: #d6bf98;
  --bordeaux: #3f0c19;
  --bordeaux-deep: #3f0c19; /* identique à --bordeaux : un seul bordeaux sur tout le site */
  --orange: #eb5a1e;
  --on-dark: #f0e4ce;

  --font-display: "Oswald", "Arial Narrow", Arial, sans-serif; /* police des titres : la même que le logo */
  --font-text: "Bricolage Grotesque", system-ui, sans-serif; /* police du texte : hébergée sur le site (dossier fonts/) */

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 70rem;
}

/* Police du texte : Bricolage Grotesque (fichier hébergé sur le site, dossier fonts/) */
@font-face {
  font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-variable.woff") format("woff");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* Police des titres : Oswald (fichier hébergé sur le site, dans le dossier fonts/) */
@font-face {
  font-family: "Oswald"; src: url("fonts/oswald-latin.woff") format("woff");
  font-weight: 200 700; font-style: normal; font-display: swap; size-adjust: 112%;
}

/* Thèmes par page : chaque univers a son fond */
body.theme-home    { --bg: var(--sand);     --fg: var(--bordeaux); --panel: var(--sand-deep); }
body.theme-atelier { --bg: var(--sand);     --fg: var(--bordeaux); --panel: var(--sand-deep); }
body.theme-studio  { --bg: var(--bordeaux); --fg: var(--on-dark);  --panel: var(--bordeaux-deep); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--fg); color: var(--bg); padding: .6rem 1rem; z-index: 10;
}
.skip-link:focus { top: .5rem; }

/* ---------- En-tête ---------- */
.site-header { background: var(--bg); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 2rem; padding-block: 1.1rem;
}
.wordmark {
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  text-decoration: none; letter-spacing: -.01em;
}
.wordmark { line-height: 0; display: block; }
.wordmark img { height: 2.9rem; width: auto; }
/* Accueil : le petit logo n'apparaît qu'une fois qu'on a commencé à défiler (le grand logo est déjà visible en haut) */
.js body.theme-home .wordmark { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.js body.theme-home .site-header.is-scrolled .wordmark { opacity: 1; visibility: visible; }
body.theme-home .site-header:not(.is-solid) .wordmark img { filter: drop-shadow(0 1px 8px rgba(0,0,0,.45)); }
@media (prefers-reduced-motion: reduce) { .js body.theme-home .wordmark { transition: none; } }
.logo-on-dark { display: none; }
body.theme-home .logo-on-dark, body.theme-studio .logo-on-dark { display: block; }
body.theme-home .logo-on-light, body.theme-studio .logo-on-light { display: none; }
body.theme-home .site-header.is-solid .logo-on-dark { display: none; }
body.theme-home .site-header.is-solid .logo-on-light { display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-nav a { text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--orange); }
.site-nav a[aria-current="page"] { border-bottom-color: currentColor; font-weight: 600; }

/* ---------- Titres ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h3 { font-size: 1.5rem; line-height: 1.15; }
p { margin: 0 0 1em; max-width: 62ch; }

/* ---------- Boutons ---------- */
.button {
  display: inline-block; text-decoration: none; font-weight: 600;
  background: var(--fg); color: var(--bg);
  padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid var(--fg);
}
.button:hover { background: var(--orange); border-color: var(--orange); color: var(--bordeaux); }
.button-line { background: transparent; color: var(--fg); }

/* ---------- Texture tissée (remplace les photos manquantes) ---------- */
.weave { position: relative; isolation: isolate; }
.weave::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.10) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px);
}

/* ================= ACCUEIL ================= */
.hero { color: #fff; background-color: #6f655a; }
/* Premier écran : photo 1 + logo centré. Il reste en place pendant que la photo 2 glisse par-dessus */
.hero-screen {
  position: sticky; top: 0; z-index: 0;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 5rem var(--gutter) 11rem;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0, transparent 9rem),
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.55)),
    url("images/fauteuil-detail.jpg") center / cover no-repeat;
  background-color: #6f655a;
}
.hero-logo { margin: 0; }
.hero-logo img { width: min(16rem, 44vw); height: auto; }

/* Second écran : la photo 2 (nette, sans transparence) glisse par-dessus la photo 1, le texte est centré dessus */
.hero-text {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 4rem var(--gutter);
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.58)),
    url("images/fauteuil-vue-2.jpg") 50% 35% / 170% auto no-repeat;
  background-color: #6f655a;
}
/* Flou diffus et progressif à la jonction des deux photos (deux couches : un flou large et doux + un flou plus serré au centre) */
.hero-text::before, .hero-text::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none;
}
.hero-text::before {
  top: -12rem; height: 24rem;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.3) 20%, #000 45%, #000 55%, rgba(0,0,0,.3) 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.3) 20%, #000 45%, #000 55%, rgba(0,0,0,.3) 80%, transparent);
}
.hero-text::after {
  top: -6rem; height: 12rem;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 25%, #000 50%, rgba(0,0,0,.4) 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 25%, #000 50%, rgba(0,0,0,.4) 75%, transparent);
}
@media (max-aspect-ratio: 1/1) {
  .hero-text { background-size: auto 185%; background-position: 50% 30%; }
}
.hero-text p {
  max-width: 40rem; margin: 0 auto; text-align: center;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.js .hero-text p {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .9s ease, transform .9s ease;
}
.js .hero-text.is-visible p { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-text p { transition: none; transform: none; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 40rem) {
  .hero-screen { background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0, transparent 9rem),
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.6)),
    url("images/fauteuil-detail.jpg") 55% center / cover no-repeat;
    background-color: #6f655a; }
}

/* Accueil : l'en-tête flotte sur la photo, sans bande beige */
/* Accueil : « Je me présente » */
.about { padding-block: clamp(3rem, 8vw, 6rem); }
.about .wrap { display: grid; gap: 2rem 4rem; grid-template-columns: 1fr; }
.about-photo { margin: 0; }
/* Forme organique reprise de la pastille du logo, étirée aux proportions de la photo (la forme fait partie de l'image) */
.about-photo img { display: block; width: 100%; max-width: 24rem; height: auto; }
.about h2 { margin-bottom: 1.5rem; }
.about-text p { max-width: 60ch; }
.about-text .about-lede { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.5; }
@media (min-width: 52rem) {
  .about .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .about-photo { position: sticky; top: 6.5rem; }
}

/* Barre du haut toujours visible pendant le défilement */
.site-header { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 20%, transparent); }
html { scroll-padding-top: 7rem; }
/* Accueil : transparente tant qu'on est sur les photos (le logo orange apparaît dès qu'on lit le texte), puis beige une fois sorti de la photo (voir script.js) */
body.theme-home .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; color: #fff; box-shadow: none;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
body.theme-home .site-header.is-solid {
  background: var(--sand); color: var(--bordeaux);
  box-shadow: 0 1px 0 rgba(63,12,25,.2);
}

/* Atelier : la barre du haut est transparente sur l'orange (le fond passe derrière), puis beige quand on le quitte */
body.theme-atelier .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
body.theme-atelier .site-header.is-scrolled:not(.is-solid) { background: #ee601f; box-shadow: none; }
/* Atelier : sur « Pour qui ? », la barre du haut porte elle-même la texture (beige à gauche, beige/orange à droite) */
body.theme-atelier .site-header { isolation: isolate; }
.header-tex { position: absolute; inset: 0; z-index: -1; display: none; pointer-events: none; }
.header-tex i { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; display: block; }
body.theme-atelier .site-header.is-over-texture .header-tex { display: flex; }
@media (max-width: 51.99rem) { .header-tex i + i { display: none; } }
body.theme-atelier .site-header.is-over-texture, body.theme-atelier .site-header.is-solid.is-over-texture {
  background: transparent; box-shadow: none;
}
body.theme-atelier .site-header.is-solid {
  background: var(--sand);
  box-shadow: 0 1px 0 rgba(63,12,25,.2);
}

/* Studio, haut de page : même mise en page que l'Atelier (plein écran, texture quadrillage + fibres), en bordeaux profond */
body.theme-studio .page-hero-full {
  background-color: var(--bordeaux-deep); color: var(--on-dark);
  background-image:
    linear-gradient(rgba(240,228,206,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,228,206,.10) 1px, transparent 1px);
}
body.theme-studio .page-hero-full::before { opacity: .10; }
body.theme-studio .page-hero-full h1 { color: var(--on-dark); }
/* Bouton « Parler de mon projet » en blanc (Atelier et Studio) */
.page-hero-full .button, body.theme-studio .page-hero-full .button { background: #fff; border-color: #fff; color: var(--bordeaux-deep); }
.page-hero-full .button:hover, body.theme-studio .page-hero-full .button:hover { background: var(--bordeaux-deep); border-color: var(--bordeaux-deep); color: #fff; }
/* Studio : la barre du haut est fixe, fondue dans le haut de page, puis bordeaux une fois qu'on le quitte */
body.theme-studio .site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; box-shadow: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
body.theme-studio .site-header.is-scrolled:not(.is-solid) { background: var(--bordeaux-deep); }
body.theme-studio .site-header.is-solid { background: var(--bordeaux); box-shadow: 0 1px 0 rgba(240,228,206,.2); }

/* Bas de page : sur le bloc de contact bordeaux, la barre devient bordeaux avec texte et logo orange */
body .site-header.is-on-dark, body .site-header.is-on-dark.is-solid, body .site-header.is-on-dark.is-over-texture {
  background: var(--bordeaux-deep); color: var(--orange); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body .site-header.is-on-dark .site-nav a { color: var(--orange); }
body .site-header.is-on-dark .site-nav a:hover { border-bottom-color: var(--orange); }
body .site-header.is-on-dark .header-tex { display: none !important; }
body .site-header.is-on-dark .logo-on-dark { display: block !important; filter: none; }
body .site-header.is-on-dark .logo-on-light { display: none !important; }
body .site-header.is-on-dark .wordmark { opacity: 1; visibility: visible; }

/* Douceur : défilement et survols */
html { scroll-behavior: smooth; }
.site-nav a, .button { transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav a, .button { transition: none; }
}

/* Accueil : deux espaces qui s'agrandissent au survol */
/* Les deux cases occupent tout l'écran quand on arrive dessus (l'écran « s'accroche » doucement sur elles) */
.home-offerings { display: flex; min-height: 100svh; }
html:has(.home-offerings) { scroll-snap-type: y proximity; }
.hero-text, .home-offerings { scroll-snap-align: start; scroll-margin-top: -7rem; }
.home-panel {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: .9rem; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2.5rem, 8vh, 5rem);
  text-decoration: none;
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1);
}
.home-panel h2 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1; }
.home-panel p { margin: 0; max-width: 28ch; min-height: calc(3 * 1.6em); font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.home-panel .more { font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .08em; }
.home-panel .more span { margin-left: .25rem; }

/* L'Atelier : tissage */
.home-panel-atelier, .tex-orange {
  background-color: var(--orange); color: var(--bordeaux-deep);
  background-image:
    repeating-linear-gradient(0deg,  rgba(63,12,25,.16) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, rgba(255,226,190,.22) 0 2px, transparent 2px 8px);
}
/* Le Studio : quadrillage de conception */
.home-panel-studio, .tex-bordeaux {
  background-color: var(--bordeaux); color: var(--on-dark);
  background-image:
    linear-gradient(rgba(240,228,206,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,228,206,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.home-panel:focus-visible { outline-offset: -6px; }
/* Texture textile très légère (fibres de tissu / broderie) par-dessus les motifs des cases */
.home-panel::after, .audience-panel::after, .header-tex i::after, .comment .steps li::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: 260px 260px;
}
.home-panel-atelier::after, .tex-orange::after, .tex-sand::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.75' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.05 0 0 0 0 0.08 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.88 0 0 0 0 0.72 0 0 0 1.5 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: .22;
}
.home-panel-studio::after, .tex-bordeaux::after, .tex-deep::after, .tex-bordeaux-orange::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.75' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0 0.8 0 0 0 1.3 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0 0.8 0 0 0 1.3 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: .13;
}


/* Ordinateur avec souris : le texte apparaît au survol et l'espace s'agrandit */
@media (hover: hover) and (min-width: 52rem) {
  .home-panel:hover, .home-panel:focus-visible { flex-grow: 1.7; }
  .home-offerings:has(.home-panel:hover, .home-panel:focus-visible) .home-panel:not(:hover):not(:focus-visible) { flex-grow: .6; }
  .home-panel p, .home-panel .more {
    opacity: 0; transform: translateY(.9rem);
    transition: opacity .4s ease, transform .5s ease;
  }
  .home-panel:hover p, .home-panel:focus-visible p,
  .home-panel:hover .more, .home-panel:focus-visible .more {
    opacity: 1; transform: none; transition-delay: .18s;
  }
}
/* Tablette et mobile : empilés, texte toujours visible */
@media (max-width: 51.99rem) {
  .home-offerings { flex-direction: column; }
  .home-panel { min-height: 50svh; }
}
@media (prefers-reduced-motion: reduce) {
  .home-panel, .home-panel p, .home-panel .more { transition: none !important; }
}

/* ================= PAGES UNIVERS ================= */
.page-hero { padding-block: clamp(3rem, 9vw, 7rem) clamp(2rem, 5vw, 3.5rem); }
.page-hero h1 { margin-bottom: 1.25rem; }
.page-hero p { font-size: 1.25rem; max-width: 40ch; }

.section { padding-block: clamp(2.5rem, 7vw, 5rem); border-top: 2px solid currentColor; }
.section > .wrap > h2 { margin-bottom: 2rem; }

/* Professionnel / Particulier */
.audiences { display: grid; gap: 2rem 3rem; grid-template-columns: 1fr; }
.audience h3 { margin-bottom: .75rem; }
.audience p { margin: 0; }

/* Autres couleurs pour « Pour qui ? » : sable et bordeaux profond */
.tex-sand {
  background-color: var(--sand-deep); color: var(--bordeaux);
  background-image:
    repeating-linear-gradient(0deg,  rgba(63,12,25,.14) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 8px);
}
.tex-deep {
  background-color: var(--bordeaux-deep); color: var(--on-dark);
  background-image:
    linear-gradient(rgba(240,228,206,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,228,206,.10) 1px, transparent 1px);
  background-size: 28px 28px;
}


/* Atelier : le premier écran est uniquement le titre ; les textures de « Pour qui ? » apparaissent en défilant */
.page-hero-full { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 51.99rem) { .page-hero-full { padding-top: 7rem; } }

/* Atelier, haut de page : même texture que la case bordeaux du Studio (quadrillage + fibres), en orange */
.page-hero-full {
  position: relative; isolation: isolate;
  background-color: var(--orange); color: var(--bordeaux-deep);
  background-image:
    linear-gradient(rgba(240,228,206,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,228,206,.14) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero-full::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.75' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0 0.8 0 0 0 1.3 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0 0.8 0 0 0 1.3 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: .13;
}

.page-hero-full + .section { border-top: 0; }
.comment + .section { border-top: 0; }

/* « Pour qui ? » : pleine page, sans ligne de séparation, les deux cases vont jusqu'aux bords */
.pourqui { border-top: 0; padding: 0; min-height: 100svh; display: flex; flex-direction: column; }
.pourqui + .section { border-top: 0; }
.pourqui > .wrap { width: 100%; max-width: none; margin: 0; flex: 1; display: flex; flex-direction: column; }
.pourqui { position: relative; }
/* Le titre « Pour qui ? » se place juste au-dessus des textes */
.pourqui > .wrap > h2 { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; padding: clamp(2rem, 5vw, 3rem) var(--gutter) 0; color: var(--bordeaux); font-size: clamp(2.4rem, 5.5vw, 4.25rem); line-height: 1; }
@media (min-width: 52rem) {
  .pourqui > .wrap > h2 { top: auto; bottom: calc(clamp(2rem, 5vw, 4rem) + 15.75rem); padding: 0 var(--gutter); }
}
@media (max-width: 51.99rem) {
  .pourqui .audiences-panels .audience-panel { justify-content: flex-start; }
  .pourqui .audiences-panels .audience-panel:first-child { padding-top: 6rem; }
}
.pourqui .audiences-panels { flex: 1; }
.pourqui .audience-panel { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.pourqui .audience-panel p { max-width: 34ch; }
@media (min-width: 52rem) { .pourqui .audience-panel p { min-height: calc(5 * 1.6em); } }

/* Beige avec touches d'orange (Professionnel) */
.tex-sand-orange {
  background-color: var(--sand-deep); color: var(--bordeaux);
  background-image:
    repeating-linear-gradient(0deg,  rgba(235,90,30,.22) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 8px);
}
.tex-sand-orange::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.75' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.35 0 0 0 0 0.12 0 0 0 1.8 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.94 0 0 0 0 0.82 0 0 0 1.5 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: .5;
}

/* Bordeaux avec touches d'orange (Studio, « Pour qui ? » : Particulier) */
.tex-bordeaux-orange {
  background-color: var(--bordeaux); color: var(--on-dark);
  background-image:
    linear-gradient(rgba(235,90,30,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,228,206,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Studio « Ce que je fais » : fond beige, une page entière */
.studio-offres {
  background: var(--sand); color: var(--bordeaux); border-top: 0;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(6rem, 12vw, 8rem) clamp(3rem, 7vw, 5rem);
}
.studio-offres .wrap { width: min(100% - 2 * var(--gutter), var(--max)); }
@media (max-width: 51.99rem) { .studio-offres { padding-top: 8rem; } }

/* Studio « Mes projets » : trois panneaux verticaux cliquables, qui se touchent, sur toute la largeur */
.projets { border-top: 0; padding: 0; }
.projets > .wrap { width: 100%; max-width: none; margin: 0; }
.projets > .wrap > h2 { margin: 0; padding: 6.25rem var(--gutter) clamp(1.25rem, 3vh, 2rem); font-size: clamp(2.4rem, 5.5vw, 4.25rem); line-height: 1; }
.projets-grid { display: flex; flex-direction: column; }
.projet {
  position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none;
  aspect-ratio: 4 / 5; isolation: isolate;
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1);
}
.projet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .8s cubic-bezier(.2,.7,.2,1); z-index: -2; }
.projet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(63,12,25,.82) 0%, rgba(63,12,25,.25) 38%, transparent 62%); }
.projet-label { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 3vw, 2rem) var(--gutter); display: flex; flex-direction: column; gap: .5rem; }
.projet-titre { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.05; }
.projet-more { font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .08em; }
.projet:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
@media (min-width: 52rem) {
  .projets-grid { flex-direction: row; height: max(30rem, calc(100svh - 12rem)); }
  .projet { flex: 1 1 0; aspect-ratio: auto; }
  .projets-grid:has(.projet:hover) .projet:hover { flex-grow: 1.45; }
  .projets-grid:has(.projet:hover) .projet:not(:hover) { flex-grow: .78; }
  .projet:hover img, .projet:focus-visible img { transform: scale(1.04); }
  .projet-more { opacity: 0; transform: translateY(.5rem); transition: opacity .4s ease, transform .5s ease; }
  .projet:hover .projet-more, .projet:focus-visible .projet-more { opacity: 1; transform: none; }
}
/* Sur ordinateur (avec une souris), le titre n'apparaît que quand on survole la photo */
@media (hover: hover) and (min-width: 52rem) {
  .projet::after { opacity: 0; transition: opacity .45s ease; }
  .projet-titre { opacity: 0; transform: translateY(.6rem); transition: opacity .4s ease, transform .5s ease; }
  .projet:hover::after, .projet:focus-visible::after { opacity: 1; }
  .projet:hover .projet-titre, .projet:focus-visible .projet-titre { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .projet, .projet img, .projet-more, .projet-titre, .projet::after { transition: none !important; } }

/* Pages projet */
.projet-page { padding: 0; border-top: 0; min-height: 100svh; display: grid; grid-template-columns: 1fr; }
.projet-photo { margin: 0; }
.projet-photo img { display: block; width: 100%; height: auto; }
.projet-texte { background: var(--bordeaux-deep); color: var(--on-dark); padding: clamp(2rem, 6vw, 4.5rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.projet-texte h1 { margin-bottom: 1.25rem; }
.projet-texte p { max-width: 40ch; }
.projet-retour { display: inline-block; margin-top: 2rem; font-weight: 600; text-underline-offset: .25em; }
@media (min-width: 52rem) {
  .projet-page { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .projet-photo { position: relative; }
  .projet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .projet-texte { padding-top: 7rem; }
}
@media (max-width: 51.99rem) { .projet-page { padding-top: 7.75rem; background: var(--bordeaux-deep); } }

/* Studio « Pour qui ? » : titre clair et barre du haut texturée, comme à l'Atelier */
body.theme-studio .pourqui > .wrap > h2 { color: var(--on-dark); }
/* Studio : le texte « Professionnel » est plus long, on lui laisse un peu plus de place pour que le titre ne chevauche rien */
body.theme-studio .pourqui .audience-panel p { max-width: 44ch; }
@media (min-width: 52rem) {
  body.theme-studio .pourqui .audience-panel p { min-height: calc(6 * 1.6em); }
  body.theme-studio .pourqui > .wrap > h2 { bottom: calc(clamp(2rem, 5vw, 4rem) + 15.75rem + 2.2rem); }
}
body.theme-studio .site-header { isolation: isolate; }
body.theme-studio .site-header.is-over-texture .header-tex { display: flex; }
body.theme-studio .site-header.is-over-texture, body.theme-studio .site-header.is-solid.is-over-texture {
  background: transparent; box-shadow: none;
}

/* Atelier « Pour qui ? » : deux cases avec les mêmes textures que l'accueil */
.audiences-panels { display: flex; flex-direction: column; gap: 0; }
.audience-panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem);
  min-height: 15rem;
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1);
}
.audience-panel h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.05; margin-bottom: 1rem; }
.audience-panel p { max-width: 36ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }
@media (min-width: 52rem) {
  .audiences-panels { flex-direction: row; }
  .audience-panel { flex: 1 1 0; }
  .audiences-panels:has(.audience-panel:hover) .audience-panel:hover { flex-grow: 1.35; }
  .audiences-panels:has(.audience-panel:hover) .audience-panel:not(:hover) { flex-grow: .85; }
}
@media (prefers-reduced-motion: reduce) { .audience-panel { transition: none; } }

/* Liste de prestations : titre à gauche, description à droite */
.offers { list-style: none; margin: 0; padding: 0; }
.offers li {
  display: grid; gap: .35rem 3rem; grid-template-columns: 1fr;
  padding-block: 1.25rem; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.offers li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.offers h3 { font-size: 1.6rem; }
.offers p { margin: 0; }
.tag { display: inline-block; font-size: .9rem; font-weight: 600; background: var(--orange); color: var(--bordeaux); padding: .1rem .7rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle; }

/* Étapes (vraie séquence : numérotation justifiée) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; grid-template-columns: 1fr; }
.steps li { counter-increment: step; display: grid; align-content: start; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--orange); color: var(--bordeaux);
  font-family: var(--font-display); font-size: 1.5rem;
}
.steps h3 { font-size: 1.3rem; margin-bottom: .25rem; }
.steps p { margin: 0; }

/* « Comment ça se passe » : pleine page, quatre cases texturées qui s'agrandissent au survol (comme l'accueil) */
.comment { border-top: 0; padding: 0; min-height: 100svh; display: flex; flex-direction: column; }
.comment > .wrap { width: 100%; max-width: none; margin: 0; flex: 1; display: flex; flex-direction: column; }
.comment > .wrap > h2 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); line-height: 1; margin: 0; padding: 7rem var(--gutter) clamp(1.5rem, 4vh, 2.5rem); }
.comment .steps { flex: 1; display: flex; flex-direction: column; gap: 0; }
.comment .steps li {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; gap: .6rem;
  flex: 1 1 0; min-height: 13rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem) clamp(2rem, 6vh, 4rem);
  transition: flex-grow .55s cubic-bezier(.2,.7,.2,1);
}
.comment .steps li::before { margin-bottom: .5rem; background: transparent; color: inherit; border: 2px solid currentColor; }
.comment .steps li > div { max-width: 26ch; }
.comment .steps h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: .6rem; }
.comment .steps p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }
@media (min-width: 52rem) {
  .comment .steps { flex-direction: row; }
  .comment .steps li { min-height: 0; }
  .comment .steps:has(li:hover) li:hover { flex-grow: 1.45; }
  .comment .steps:has(li:hover) li:not(:hover) { flex-grow: .85; }
}
@media (prefers-reduced-motion: reduce) { .comment .steps li { transition: none; } }

/* Cases en pastilles organiques (forme douce comme celle du logo), fonds apaisés pour une lecture facile */
.comment > .wrap { padding-inline: var(--gutter); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.comment > .wrap > h2 { padding-inline: 0; }
.comment .steps { gap: clamp(.9rem, 2vw, 1.5rem); }
.comment .steps li {
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 2.75rem) clamp(2.25rem, 6vh, 3.75rem);
  justify-content: flex-start;
}
/* Couleurs de la charte (orange, sable, bordeaux) avec leur texture de tissu */
.comment .steps li.tex-orange { background-color: var(--orange); color: var(--bordeaux-deep); }
.comment .steps li.tex-sand { background-color: var(--sand-deep); color: var(--bordeaux-deep); }
.comment .steps li.tex-deep { background-color: var(--bordeaux); color: var(--on-dark); }
.comment .steps li.tex-sand-orange { background-color: #e8c9a2; color: var(--bordeaux-deep); }
.comment .steps li::after { opacity: .3; }
.comment .steps li.tex-deep::after { opacity: .2; }
.comment .steps li p { font-weight: 500; }
/* Forme exacte de la pastille du logo (la 2e et la 4e sont en miroir pour varier) */
.comment .steps li { border-radius: 0; clip-path: url(#pastille-a); }
.comment .steps li:nth-child(even) { clip-path: url(#pastille-b); }
.comment .steps { gap: clamp(.25rem, 1vw, 1rem); }
.comment .steps li { padding: 3.25rem 3rem; aspect-ratio: 1 / 1.04; flex: 0 0 auto; width: min(100%, 22rem); align-self: center; }
.comment .steps li > div { max-width: 19ch; }
@media (min-width: 52rem) {
  .comment > .wrap { padding-inline: clamp(.5rem, 1.5vw, 1.5rem); }
  .comment > .wrap > h2 { padding-inline: calc(var(--gutter) - clamp(.5rem, 1.5vw, 1.5rem)); }
  .comment .steps { align-items: center; justify-content: center; }
  .comment .steps li { flex: 1 1 0; width: auto; height: auto; min-width: 0; padding: 12% 11%; }
  .comment .steps:has(li:hover) li:hover { flex-grow: 1.25; }
  .comment .steps:has(li:hover) li:not(:hover) { flex-grow: .92; }
}

/* Pastilles plus rondes : moins hautes, contenu centré */
.comment .steps li { justify-content: center; align-items: center; text-align: center; padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 3.5vw, 3rem); }
.comment .steps li > div { max-width: 21ch; }
@media (min-width: 52rem) {
  .comment .steps { align-items: center; }
  .comment .steps li { flex: 1 1 0; height: clamp(19rem, 50vh, 25rem); min-height: 0; }
}
.comment .steps li > div { max-width: 24ch; }
@media (max-width: 51.99rem) {
  .comment .steps li { flex: 0 0 auto; min-height: 12rem; padding: 2.5rem 2rem 2.75rem; justify-content: center; }
      }

/* Galerie */
.gallery { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.piece { margin: 0; max-width: 26rem; }
.frame {
  position: relative; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: 3 / 4; background-color: var(--c, var(--sand-deep));
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.10) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px);
  color: var(--tc, var(--bordeaux));
}
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-label { font-weight: 600; font-size: .95rem; padding: .35rem .9rem; border: 1.5px solid currentColor; border-radius: 999px; }
.frame:has(img) .frame-label { display: none; }
.piece figcaption { margin-top: .75rem; font-size: .95rem; }

/* Réalisations (Atelier) : photos entières (cadre = proportions de la photo, rien n'est coupé), toutes à la même hauteur */
.gallery-mosaic { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.gallery-mosaic .piece { --r: .75; max-width: 19rem; width: 100%; }
.gallery-mosaic .piece-wide { --r: 1.3333; max-width: 26rem; }
.gallery-mosaic .frame { aspect-ratio: var(--r); border-radius: 1rem; }
.gallery-mosaic .frame img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery-mosaic .frame:hover img { transform: scale(1.03); }
@media (min-width: 52rem) {
  .gallery-mosaic { display: flex; gap: 1.5rem; align-items: flex-start; }
  .gallery-mosaic .piece { flex: var(--r) 1 0; max-width: none; width: auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .gallery-mosaic .frame img { transition: none; } }

/* « Quelques-unes de mes réalisations » : pleine page, photos collées sans contour ni espace */
.realisations { border-top: 0; padding: 0; min-height: 100svh; display: flex; flex-direction: column; }
.realisations > .wrap { width: 100%; max-width: none; margin: 0; flex: 1; display: flex; flex-direction: column; }
.realisations > .wrap > h2 { margin: 0; padding: 6.25rem var(--gutter) clamp(1.25rem, 3vh, 2rem); font-size: clamp(2.4rem, 5.5vw, 4.25rem); line-height: 1; }
.realisations .gallery-mosaic { flex: 1; display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.realisations .gallery-mosaic .piece { flex: 0 0 auto; width: 100%; max-width: none; margin: 0; }
.realisations .gallery-mosaic .frame { aspect-ratio: var(--r); border-radius: 0; background: none; }
.realisations .gallery-mosaic .frame img { object-position: center; }
@media (min-width: 52rem) {
  /* Deux photos en paysage sur la première rangée, trois en portrait sur la seconde : chaque cadre suit les proportions de sa photo (aucun recadrage) */
  .realisations .gallery-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); min-height: 0; align-items: start; }
  .realisations .gallery-mosaic .piece { grid-column: span 2; flex: none; width: auto; min-width: 0; }
  .realisations .gallery-mosaic .piece-wide { grid-column: span 3; }
  .realisations .gallery-mosaic .frame { aspect-ratio: var(--r); height: auto; }
}

/* Le titre des réalisations occupe un écran entier, les photos prennent l'écran suivant */
.realisations { min-height: 0; }
.realisations > .wrap > h2 {
  min-height: 0; display: block;
  padding: 7rem var(--gutter) 2.5rem; margin: 0;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; letter-spacing: -.01em;
}
.realisations .gallery-mosaic { flex: none; }

/* Atelier : cadres en arche, comme un dossier de fauteuil */
.arch { border-radius: 999px 999px 0 0; }
/* Studio : cadres droits, comme du papier */
.flat { border-radius: 0; }
.c-orange   { --c: var(--orange);   --tc: var(--bordeaux); }
.c-bordeaux { --c: var(--bordeaux); --tc: var(--on-dark); }
.c-sand     { --c: var(--sand);     --tc: var(--bordeaux); }
.c-deep     { --c: var(--bordeaux-deep); --tc: var(--on-dark); }
.r-43 { aspect-ratio: 4 / 3; }
.r-23 { aspect-ratio: 2 / 3; }
.r-11 { aspect-ratio: 1 / 1; }

/* ---------- Contact / pied de page ---------- */
.contact { background: var(--bordeaux-deep); color: var(--on-dark); padding-block: clamp(2.5rem, 7vw, 5rem); }
.contact h2 { max-width: 18ch; margin-bottom: 1.25rem; }
.contact .button { background: var(--orange); border-color: var(--orange); color: var(--bordeaux-deep); }
.contact .button:hover { background: var(--on-dark); border-color: var(--on-dark); }
.contact dl { margin: 2rem 0 0; display: grid; gap: .25rem 2rem; grid-template-columns: max-content 1fr; }
.contact dt { opacity: .75; }
.contact dd { margin: 0; }
.contact dd a { color: inherit; text-underline-offset: .2em; }
.contact dd em { font-weight: 300; font-size: .95em; opacity: .9; }
.legal { background: var(--bordeaux-deep); color: var(--on-dark); font-size: .75rem; padding-bottom: 1.5rem; }
.legal p { opacity: .85; }
.legal .wrap { border-top: 1px solid rgba(240,228,206,.3); padding-top: 1rem; }
.legal p { margin: 0; max-width: none; display: flex; align-items: center; gap: .75rem; }
.legal-logo { height: 2rem; width: auto; flex: none; }
.todo { background: var(--orange); color: var(--bordeaux-deep); padding: 0 .35rem; font-weight: 600; }

/* ---------- Écrans larges ---------- */
@media (min-width: 52rem) {
  .offers li { grid-template-columns: 1fr 1.4fr; }
  .audiences { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li { grid-template-columns: 1fr; }
}

/* ---------- Mobile ---------- */

/* Mobile : menu plus compact pour tenir sur une ligne */
@media (max-width: 40rem) {
  .site-nav { gap: .25rem .8rem; font-size: .9rem; }
}

/* Titres des galeries (Atelier : « Quelques-unes de mes réalisations », Studio : « Mes projets ») : plus petits et centrés */
.realisations > .wrap > h2, .projets > .wrap > h2 {
  text-align: center; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1;
  padding: 6.5rem var(--gutter) clamp(1.25rem, 3vh, 2rem);
}
/* Studio : « Mes projets » un peu plus haut */
.projets > .wrap > h2 { padding-top: 5.25rem; padding-bottom: 1rem; }
@media (min-width: 52rem) { .projets-grid { height: max(30rem, calc(100svh - 10.5rem)); } }

/* Studio, « Ce que je fais » : barre du haut beige, texte et logo bordeaux */
body.theme-studio .site-header.is-on-light, body.theme-studio .site-header.is-solid.is-on-light, body.theme-studio .site-header.is-on-light.is-over-texture {
  background: var(--sand); color: var(--bordeaux); box-shadow: 0 1px 0 rgba(63,12,25,.2);
}
body.theme-studio .site-header.is-on-light .site-nav a { color: var(--bordeaux); }
body.theme-studio .site-header.is-on-light .site-nav a:hover { border-bottom-color: var(--orange); }
body.theme-studio .site-header.is-on-light .header-tex { display: none !important; }
body.theme-studio .site-header.is-on-light .logo-on-dark { display: none; }
body.theme-studio .site-header.is-on-light .logo-on-light { display: block; }

/* Pages projet : texte long (chapeau, intertitres), photo qui reste en place pendant la lecture */
.projet-texte .projet-chapo { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.25; margin-bottom: 1.5rem; max-width: 30ch; }
.projet-texte h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin: 2.25rem 0 .75rem; }
.projet-texte p { max-width: 52ch; }
@media (min-width: 52rem) {
  .projet-photo img { position: sticky; top: 0; height: 100svh; }
  .projet-texte { justify-content: flex-start; padding-top: 8rem; padding-bottom: 4.5rem; }
}

/* Pages projet (ordinateur) : la photo monte jusque derrière la barre du haut et la garde tout le long du texte.
   La barre est transparente au-dessus de la photo (logo orange) et bordeaux au-dessus du texte, pour que le texte qui défile passe dessous sans gêner le menu. */
@media (min-width: 52rem) {
  body.page-projet .site-header:not(.is-on-dark),
  body.page-projet .site-header.is-solid:not(.is-on-dark),
  body.page-projet .site-header.is-scrolled:not(.is-solid):not(.is-on-dark) {
    background: linear-gradient(to right, transparent 50%, var(--bordeaux-deep) 50%);
    box-shadow: none;
  }
  /* logo bordeaux sur la photo claire (orange seulement tout en bas, quand la barre est entièrement bordeaux) */
  body.page-projet .site-header:not(.is-on-dark) .logo-on-dark { display: none; }
  body.page-projet .site-header:not(.is-on-dark) .logo-on-light { display: block; }
}

/* CAP’EMI : la photo est descendue pour laisser voir plus de fond clair en haut (le fond prolonge celui de la photo) */
@media (min-width: 52rem) {
  .projet-photo-bas { background: #d1cfd1; }
  .projet-photo-bas img {
    top: 8svh; height: 92svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }
}

/* Page À propos : le texte « Je me présente » (titre h1 de la taille d'un h2), sous la barre du haut fixe */
.about h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1.5rem; }
.page-apropos .about { padding-top: clamp(7rem, 12vw, 9rem); }

/* Accueil : les panneaux L'Atelier / Le Studio défilent réellement derrière la barre du haut, qui reste transparente
   (elle suit le mouvement) ; seuls les couleurs du logo et du menu s'adaptent au panneau qui passe dessous */
body.theme-home .site-header.is-solid.is-over-texture { background: transparent; box-shadow: none; }
/* ordinateur : logo bordeaux sur l'orange (à gauche), menu clair sur le bordeaux (à droite) */
body.theme-home .site-header.is-over-texture .site-nav a { color: var(--on-dark); }
@media (max-width: 51.99rem) {
  /* panneaux empilés : couleurs selon le panneau qui passe sous la barre */
  body.theme-home .site-header.is-over-texture .site-nav a { color: var(--bordeaux-deep); }
  body.theme-home .site-header.is-over-texture.is-over-second .site-nav a { color: var(--on-dark); }
  body.theme-home .site-header.is-over-texture.is-over-second .logo-on-light { display: none; }
  body.theme-home .site-header.is-over-texture.is-over-second .logo-on-dark { display: block; }
}

/* Atelier : bouton « Parler de mon projet » en bordeaux */
body.theme-atelier .page-hero-full .button { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--on-dark); }
body.theme-atelier .page-hero-full .button:hover { background: var(--bordeaux-deep); border-color: var(--bordeaux-deep); color: #fff; }

/* Bloc « Un projet en tête ? » : occupe toute la hauteur de l'écran (avec la ligne légale) */
footer { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
footer .contact { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(6rem, 12vw, 8rem); }

/* « Pour qui ? » : la texture de la barre du haut suit l'agrandissement des zones au survol (comme sur l'accueil) */
.header-tex i { transition: flex-grow .55s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (min-width: 52rem) {
  body:has(.pourqui .audience-panel:first-child:hover) .header-tex i:first-child { flex-grow: 1.27; }
  body:has(.pourqui .audience-panel:first-child:hover) .header-tex i:last-child { flex-grow: .85; }
  body:has(.pourqui .audience-panel:last-child:hover) .header-tex i:first-child { flex-grow: .85; }
  body:has(.pourqui .audience-panel:last-child:hover) .header-tex i:last-child { flex-grow: 1.27; }
}
@media (prefers-reduced-motion: reduce) { .header-tex i { transition: none; } }

/* Pages projet : listes et mention de collaboration */
.projet-texte ul { margin: 0 0 1em; padding-left: 1.2em; max-width: 52ch; }
.projet-texte li { margin-bottom: .6em; padding-left: .2em; }
.projet-texte li::marker { color: var(--orange); }
.projet-texte .projet-credit { margin-top: 1.5rem; font-size: .95rem; opacity: .85; font-style: italic; }

/* Pages projet : année au-dessus du titre */
.projet-texte .projet-annee { margin: 0 0 .5rem; font-weight: 600; letter-spacing: .12em; color: var(--orange); }

/* Page CAP’EMI : galerie de photos à la place de la photo unique */
.projet-galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: #d1cfd1; margin: 0; }
.projet-galerie figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.projet-galerie img { display: block; width: 100%; height: auto; }
@media (min-width: 52rem) {
  .projet-galerie { display: block; overflow: visible; }
  .projet-galerie figure { display: block; }
}

/* CAP’EMI : le texte reste en place pendant que les photos défilent ; la barre reste transparente côté photos */
.projet-galerie figure { flex-basis: 88%; }
.projet-galerie { gap: .25rem; }
@media (min-width: 52rem) {
  .projet-galerie { gap: 0; }
  .projet-page:has(.projet-galerie) { background: var(--bordeaux-deep); align-items: start; }
  .projet-page:has(.projet-galerie) .projet-texte {
    position: sticky; top: min(0px, calc(100svh - 54rem)); align-self: start;
    min-height: 0; padding-bottom: 2.5rem;
  }
  /* logo clair au-dessus d'une photo sombre */
  body.page-projet .site-header.is-over-dark-photo:not(.is-on-dark) .logo-on-light { filter: brightness(0) invert(.94); }
}

/* Paysage émotionnel : photos assemblées en mosaïque (2 colonnes) pour raccourcir le défilement ; sur mobile, elles restent en défilement horizontal */
@media (min-width: 52rem) {
  .projet-mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bordeaux-deep); }
  .projet-mosaique figure.large { grid-column: 1 / -1; }
  .projet-mosaique figure:not(.large) img { aspect-ratio: 3 / 4; object-fit: cover; }
}

/* Mosaïque : vignettes carrées */
@media (min-width: 52rem) {
  .projet-mosaique figure.carre img { aspect-ratio: 1 / 1; object-fit: cover; }
}

/* Mosaïque CAP’EMI : une photo verticale à côté de deux photos empilées */
@media (min-width: 52rem) {
  .projet-mosaique figure.haut { grid-row: span 2; }
  .projet-mosaique figure.haut img { aspect-ratio: 2 / 3; object-fit: cover; }
  .projet-mosaique figure.cote img { height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* Studio « Mes projets » : le titre est posé sur la zone claire de la 1re photo, et les trois panneaux occupent toute la page */
.projets { position: relative; padding-top: 7.75rem; }
.projets > .wrap > h2 {
  position: absolute; z-index: 3; top: 7.75rem; left: 0; margin: 0; pointer-events: none;
  padding: .9rem var(--gutter) 0; text-align: left; color: var(--bordeaux);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1;
}
.projets-grid { height: calc(100svh - 7.75rem); min-height: 32rem; }
.projet { aspect-ratio: auto; flex: 1 1 0; }
.projet:first-child { flex: 2 1 0; }
.projet:first-child img { object-position: var(--pos, 42% 0%); }
@media (min-width: 52rem) {
  .projets { padding-top: 5.15rem; }
  .projets > .wrap > h2 { top: 5.15rem; }
  .projets-grid { height: calc(100svh - 5.15rem); min-height: 30rem; }
  .projet, .projet:first-child { flex: 1 1 0; }
}

/* Studio « Mes projets » : les photos passent derrière la barre du haut, qui devient transparente (léger dégradé bordeaux pour garder le menu lisible) */
body.theme-studio .site-header.is-over-projets, body.theme-studio .site-header.is-solid.is-over-projets {
  background: transparent; box-shadow: none;
}
body.theme-studio .site-header.is-over-projets::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 2.5rem); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(63,12,25,.88) 0%, rgba(63,12,25,.6) 55%, rgba(63,12,25,0) 100%);
}
.projets { padding-top: 0; }
@media (max-width: 51.99rem) { body.theme-studio .site-header.is-over-projets::before { height: calc(100% + .4rem); } }
.projets > .wrap > h2 { top: 0; padding-top: 8.1rem; color: var(--bordeaux); }
.projet:first-child { flex: 2.4 1 0; }
.projets-grid { height: 100svh; }
@media (min-width: 52rem) {
  .projets { padding-top: 0; }
  .projets > .wrap > h2 { top: 0; padding-top: 6.1rem; }
  .projet:first-child { flex: 1 1 0; }
  .projets-grid { height: 100svh; }
}

/* En-tête : logo et menu sont calés sur les bords de l'écran (même marge que les titres), pas sur la colonne centrale */
.site-header .wrap { width: calc(100% - 2 * var(--gutter)); max-width: none; }

/* Mobile : photos des pages projet à hauteur égale (plus de bloc gris sous la 1re photo) ; menu lisible sur « Mes projets » */
@media (max-width: 51.99rem) {
  /* pages projet : le texte d'abord, puis toutes les photos en entier, les unes sous les autres */
  .projet-page:has(.projet-galerie) .projet-texte { order: -1; }
  .projet-galerie { display: flex; flex-direction: column; overflow: visible; scroll-snap-type: none; gap: .25rem; }
  .projet-galerie figure { flex: none; width: 100%; height: auto; min-height: 0; }
  .projet-galerie img { width: 100%; height: auto; object-fit: initial; }
  body.theme-studio .site-header.is-over-projets::before {
    height: calc(100% + .8rem);
    background: linear-gradient(to bottom, rgba(63,12,25,.88) 0, rgba(63,12,25,.8) calc(100% - .9rem), rgba(63,12,25,0) 100%);
  }
  .projets > .wrap > h2 { padding-top: 8.7rem; }
}

/* Pages « Mentions légales » et « Politique de confidentialité » */
.section.legal-page { padding-block: clamp(3rem, 8vw, 6rem); }
.legal-page .wrap { width: min(100% - 2 * var(--gutter), 46rem); }
.legal-page h1 { font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1.05; margin: 0 0 .5rem; }
.legal-page .legal-maj { font-size: .9rem; opacity: .8; margin: 0 0 1.5rem; }
.legal-page h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 2.25rem 0 .6rem; }
.legal-page p { max-width: none; }
.legal-page a { text-underline-offset: .2em; }
.legal .legal-links { margin-top: .5rem; display: block; }
.legal .legal-links a { color: inherit; text-underline-offset: .2em; }

/* Mobile uniquement — Atelier « Quelques-unes de mes réalisations » : photos en mosaïque compacte, sans espace entre elles */
@media (max-width: 51.99rem) {
  .realisations .gallery-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
  .realisations .gallery-mosaic .piece { grid-column: span 2; width: 100%; min-width: 0; }
  .realisations .gallery-mosaic .piece:nth-child(1) { order: 1; }                         /* chaises à visages */
  .realisations .gallery-mosaic .piece:nth-child(3) { order: 2; grid-column: span 1; }    /* chaises orange */
  .realisations .gallery-mosaic .piece:nth-child(4) { order: 3; grid-column: span 1; }    /* fauteuil écru */
  .realisations .gallery-mosaic .piece:nth-child(2) { order: 4; }                         /* chaises médaillon */
  .realisations .gallery-mosaic .piece:nth-child(5) { order: 5; --r: 1.3333; }            /* banc, recadré en largeur */
  .realisations .gallery-mosaic .piece:nth-child(5) .frame img { object-position: 50% 72%; }
}

/* Mobile uniquement — « Mes projets » : les photos commencent sous la barre du haut, et le titre est tout en haut de la 1re photo */
@media (max-width: 51.99rem) {
  .projets { padding-top: 7.75rem; }
  .projets-grid { height: calc(100svh - 7.75rem); min-height: 30rem; }
  .projets > .wrap > h2 { top: 7.75rem; padding-top: .8rem; }
  .projet:first-child { flex: 2.6 1 0; }
  body.theme-studio .site-header.is-over-projets, body.theme-studio .site-header.is-solid.is-over-projets { background: var(--bordeaux); box-shadow: 0 1px 0 rgba(240,228,206,.2); }
  body.theme-studio .site-header.is-over-projets::before { display: none; }
}

/* « Mes projets » : le titre est descendu d'environ 10 % de la hauteur de la 1re photo (ordinateur, puis téléphone) */
@media (min-width: 52rem) {
  .projets > .wrap > h2 { padding-top: calc(6.1rem + 10svh); }
}
@media (max-width: 51.99rem) {
  .projets > .wrap > h2 { padding-top: calc(.8rem + (100svh - 7.75rem) * .0565); }
}

/* Ordinateur — « Mes projets » : la barre du haut est transparente et suit les photos (pas de dégradé, pas de bande bordeaux au-dessus) ;
   menu en bordeaux avec un léger halo crème pour rester lisible sur les photos claires comme sombres ; titre un peu plus bas qu'au départ */
@media (min-width: 52rem) {
  .projets { padding-top: 0; }
  .projets-grid { height: 100svh; }
  .projets > .wrap > h2 { top: 0; padding-top: calc(6.1rem + 4svh); }
  body.theme-studio .site-header.is-over-projets, body.theme-studio .site-header.is-solid.is-over-projets { background: transparent; box-shadow: none; }
  body.theme-studio .site-header.is-over-projets::before { display: none; }
  body.theme-studio .site-header.is-over-projets .site-nav a {
    color: var(--bordeaux);
    text-shadow: 0 0 3px #f0e4ce, 0 0 6px #f0e4ce, 0 0 10px rgba(240,228,206,.95), 0 0 18px rgba(240,228,206,.8);
  }
  body.theme-studio .site-header.is-over-projets .site-nav a[aria-current="page"], body.theme-studio .site-header.is-over-projets .site-nav a.is-active { border-bottom-color: var(--bordeaux); }
}

/* Téléphone uniquement — chaque grande section occupe exactement la hauteur de l'écran : on ne voit plus de bandeau de la section suivante en bas
   (dvh = hauteur réelle de l'écran quand la barre du navigateur se replie ; svh en secours pour les anciens téléphones) */
@media (max-width: 51.99rem) {
  .hero-text, .home-offerings { scroll-margin-top: 0; }   /* l'accroche de l'accueil ne laisse plus dépasser le bloc suivant */
  .section:not(.legal-page) { min-height: 100svh; }
  @supports (height: 100dvh) {
    .hero-screen, .hero-text, .home-offerings, .page-hero-full, .section:not(.legal-page), footer { min-height: 100dvh; }
    .projets-grid { height: calc(100dvh - 7.75rem); }
  }
}