/* ============================================
   Léo Fontanel — Maquette démo
   Esthétique reprise du site actuel :
   typo géométrique fine, blanc, gris doux.
   ============================================ */

:root {
  --txt: #2d2d2d;
  --txt-light: #4e4e4e;
  --txt-dark: #1c1c1c;
  --bg: #ffffff;
  --bg-soft: #efefef;
  --bg-footer: #3a3a3a;
  --accent: #1f1f1f;
  --maxw: 1180px;
  --header-h: 96px;          /* hauteur réelle du header (desktop) */
}

.spacer { height: calc(var(--header-h) + 4px); }
.spacer-lg { height: calc(var(--header-h) + 26px); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', 'Avenir Next', 'Futura', sans-serif;
  font-weight: 300;
  color: var(--txt);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* <picture> n'existe que pour proposer l'AVIF au navigateur : on le retire de la
   mise en page pour que toutes les regles ci-dessous continuent de viser l'image
   comme si elle etait restee enfant direct de son conteneur. */
picture { display: contents; }

/* Les attributs width/height sur les images servent a reserver la place pendant
   le chargement. Sans cette regle le navigateur les prend aussi comme HAUTEUR
   imposee et l'image est etiree. :where() garde une specificite nulle, donc
   toute regle de hauteur explicite ci-dessous (grilles, vignettes) continue de gagner. */
img:where([width][height]) { height: auto; }

a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  z-index: 100;
  border-bottom: 1px solid #eee;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
}

/* header qui s'efface quand on descend, revient quand on remonte */
.site-header.hid { transform: translateY(-101%); }
.site-header.hid:focus-within { transform: none; }
.site-header.scrolled { box-shadow: 0 3px 18px rgba(0, 0, 0, .05); }

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.logo .name {
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 400;
  color: var(--txt-dark);
}

.logo .sub {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--txt-light);
}

.main-nav {
  display: flex;
  gap: 28px;
  margin-top: 6px;
}

.main-nav > div { position: relative; }

.main-nav a, .main-nav span {
  font-size: 12px;
  letter-spacing: 2px;
  color: #434343;
  cursor: pointer;
  padding-bottom: 6px;
  display: inline-block;
}

.main-nav .active > a,
.main-nav > div > a:hover,
.main-nav > div > span:hover { color: var(--accent); }

.main-nav .active > a { border-top: 2px solid #8a8a8a; padding-top: 4px; }

.dropdown .menu {
  display: none;
  position: absolute;
  top: 100%; left: -10px;
  background: #fff;
  border: 1px solid #eee;
  padding: 8px 0;
  min-width: 160px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.dropdown:hover .menu,
.dropdown:focus-within .menu,              /* au clavier : Tab ouvre le menu */
.dropdown.open .menu { display: block; }   /* .open = toggle tactile */

.dropdown .menu a {
  display: block;
  padding: 7px 18px;
  letter-spacing: 2px;
  font-size: 11.5px;
}

.dropdown .menu a:hover { background: #f5f5f5; }

/* ---------- Burger (caché sur desktop) ---------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  z-index: 130;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: #3a3a3a;
  transition: transform .3s ease, opacity .3s ease;
}

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero (accueil) ---------- */

.hero {
  height: 100vh;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  position: relative;
}

/* Sur ecran etroit le cadre de l'image d'accueil devient vertical : on decale
   la fenetre vers la jetee, sinon il ne reste qu'une bande d'eau et de ciel. */
@media (max-width: 900px) {
  .hero { background-position: 75% center; }
}

.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  padding: 0 24px 90px;
  color: #fff;
}

.hero h1 {
  font-weight: 300;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.hero p {
  font-size: 15px;
  letter-spacing: 1px;
  opacity: .92;
  margin-bottom: 28px;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 12px;
  letter-spacing: 2.5px;
  border: 1px solid rgba(255,255,255,.85);
  color: #fff;
  transition: background .25s, color .25s;
}

.btn:hover { background: #fff; color: #222; }

.btn.dark {
  border-color: #3a3a3a;
  color: #2b2b2b;
}

.btn.dark:hover { background: #3a3a3a; color: #fff; }

/* ---------- Sections génériques ---------- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 76px 24px;
}

.section.soft { max-width: none; background: var(--bg-soft); }

.section.soft > .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 3px;
  color: #373737;
  margin-bottom: 8px;
}

.section-sub {
  text-align: center;
  font-size: 15px;
  color: var(--txt-light);
  letter-spacing: 1px;
  max-width: 640px;
  margin: 0 auto 42px;
}

/* ---------- Bandeau clients ---------- */

.clients {
  text-align: center;
  padding: 44px 24px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.clients .label {
  font-size: 11px;
  letter-spacing: 3px;
  color: #5e5e5e;
  margin-bottom: 18px;
}

.clients .names {
  font-size: 14px;
  letter-spacing: 2.5px;
  color: #494949;
  font-weight: 400;
}

.clients .car {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 980px;
  margin: 0 auto;
}

.clients .car-track {
  overflow: hidden;
  flex: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.clients .car-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 56px;
  width: max-content;
  padding: 4px 0;
  will-change: transform;
}

.clients .car-inner span { white-space: nowrap; }

.car-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: #c2c2c2;
  padding: 2px 10px 6px;
  transition: color .25s;
}

.car-btn:hover { color: #1f1f1f; }

/* ---------- Cartes projets ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.card {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.card .thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.card:hover .thumb img { transform: scale(1.04); }

.card .meta { padding: 16px 4px 0; }

.card .cat {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  color: #5e5e5e;
}

.card h3 {
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--txt-dark);
  margin: 4px 0 2px;
}

.card .link {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #535353;
}

.card:hover .link { color: var(--accent); }

/* ---------- Tuiles services ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.tile:hover img { transform: scale(1.05); }

.tile .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 3px;
}

/* ---------- Galeries ---------- */

.gallery-section { padding-top: 64px; }

.gallery-head { text-align: center; max-width: 680px; margin: 0 auto 36px; }

.gallery-head h1,
.gallery-head h2 {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #373737;
  margin-bottom: 6px;
}

.gallery-head .tagline {
  font-size: 15px;
  font-weight: 400;
  color: #454545;
  margin-bottom: 14px;
}

.gallery-head p { font-size: 14px; color: var(--txt-light); }

.grid {
  display: grid;
  gap: 14px;
}

.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.grid a { overflow: hidden; display: block; }

.grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform .5s ease, opacity .5s;
  cursor: zoom-in;
}

.grid.landscape img { aspect-ratio: 4 / 3; }

.grid img:hover { transform: scale(1.03); }

/* ---------- Bande CTA ---------- */

.cta-band {
  background: var(--bg-soft);
  text-align: center;
  padding: 64px 24px;
}

.cta-band h2 {
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 2px;
  color: #404040;
  margin-bottom: 8px;
}

.cta-band p {
  color: var(--txt-light);
  font-size: 14px;
  margin-bottom: 26px;
}

/* ---------- Page projet ---------- */

.project-hero {
  height: 62vh;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.project-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 50%);
}

.project-hero .inner {
  position: relative; z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  padding: 0 24px 48px;
  color: #fff;
}

.project-hero .cat { font-size: 11px; letter-spacing: 3px; opacity: .85; }

.project-hero h1 {
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: 1.5px;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  justify-content: center;
  padding: 26px 24px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: #535353;
}

.project-meta strong { font-weight: 400; color: #404040; }

.project-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 20px;
  font-size: 15.5px;
  color: #3f3f3f;
}

.project-intro p + p { margin-top: 14px; }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.full { margin-top: 14px; }

.back-link {
  font-size: 12px;
  letter-spacing: 2px;
  color: #535353;
  display: inline-block;
  margin-bottom: 18px;
}

.back-link:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-footer);
  color: #cfcfcf;
  padding: 30px 24px;
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  letter-spacing: 1px;
}

.footer-inner a:hover { color: #fff; }

.socials { display: flex; gap: 18px; }

.socials svg { width: 18px; height: 18px; fill: #cfcfcf; }

.socials a:hover svg { fill: #fff; }

/* ---------- Effets "quali" : révélation au scroll, fondus, transitions ---------- */

/* transition douce entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .22s; }
::view-transition-new(root) { animation-duration: .22s; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s cubic-bezier(.25, .4, .25, 1), transform .55s cubic-bezier(.25, .4, .25, 1);
  }

  .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* fondu des images à leur chargement */
  .grid img, .fluid img, .fa-air img, .card img, .tiles img, .diptych a {
    opacity: 0;
  }

  .grid img.ld, .fluid img.ld, .fa-air img.ld, .card img.ld, .tiles img.ld {
    opacity: 1;
  }

  .grid img, .fluid img, .fa-air img, .card img, .tiles img {
    transition: opacity .45s ease, transform .45s cubic-bezier(.25, .4, .25, 1);
  }

  .diptych a { transition: opacity .55s ease; }
  .diptych a.ld { opacity: 1; }
}

/* micro-interactions */
.card .link { transition: color .25s; }

.card .link::after { content: ''; }

.card:hover h3 { color: #000; }

.veil-center .big { transition: letter-spacing .45s ease; }

.diptych a:hover .veil-center .big { letter-spacing: 9px; }

.btn, .btn.dark { transition: background .3s, color .3s, letter-spacing .3s; }

.btn:hover, .btn.dark:hover { letter-spacing: 3.5px; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0;
  background: rgba(12, 12, 12, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  transition: opacity .3s ease;
}

.lightbox.open { display: flex; }

.lightbox.visible { opacity: 1; }

.lightbox img {
  max-width: 86vw;
  max-height: 84vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .32s ease, transform .45s cubic-bezier(.25, .4, .25, 1);
  cursor: pointer;            /* clic = photo suivante */
}

.lightbox img[style*="opacity: 1"] { transform: scale(1); }

.lightbox .close {
  position: absolute;
  top: 16px; right: 26px;
  color: #fff;
  font-size: 32px;
  font-weight: 200;
  cursor: pointer;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s;
  z-index: 3;
}

.lightbox .close:hover { opacity: 1; }

.lb-btn {
  background: transparent;
  border: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 54px;
  font-weight: 200;
  line-height: 1;
  padding: 36px 26px;
  cursor: pointer;
  user-select: none;
  opacity: .65;
  transition: opacity .2s;
  z-index: 2;
}

.lb-btn:hover { opacity: 1; }

.lb-prev { left: 4px; }
.lb-next { right: 4px; }

.lb-counter {
  position: absolute;
  top: 22px; left: 28px;
  color: #aaa;
  font-size: 12px;
  letter-spacing: 2.5px;
}

.lb-caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #bbb;
  font-size: 12.5px;
  letter-spacing: 1px;
  max-width: 80vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .lb-btn { font-size: 38px; padding: 26px 14px; }
  .lightbox img { max-width: 96vw; max-height: 80vh; }
}

/* ---------- Pastille démo ---------- */

.demo-pill {
  position: fixed;
  bottom: 14px; left: 14px;
  background: #1f1f1f;
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 2px;
  padding: 7px 14px;
  border-radius: 30px;
  z-index: 150;
  opacity: .85;
}

.demo-disabled { cursor: default; }

.demo-disabled:hover .link::after,
.demo-disabled:hover .veil::after {
  content: ' · non inclus dans la démo';
  font-size: 10px;
  letter-spacing: 1px;
  opacity: .8;
}

/* ---------- Indicateur de scroll (hero) ---------- */

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  opacity: .8;
  animation: cue 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 9px); }
}

/* ---------- Bloc portrait (accueil) ---------- */

.about-teaser {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 52px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.about-teaser img { width: 100%; height: auto; }

.about-teaser p { font-size: 15px; color: #3f3f3f; margin-bottom: 12px; }

@media (max-width: 760px) {
  .about-teaser { grid-template-columns: 1fr; }
  .about-teaser img { max-width: 280px; margin: 0 auto; }
}

/* ---------- Respiration entre le hero et les portes ---------- */

.gap-air { height: clamp(70px, 13vh, 140px); }

/* ---------- Diptyque accueil (équilibre commercial / fine-art) ---------- */

.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 28px;
}

.diptych a {
  position: relative;
  height: 64vh;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* variante hub : 4 tuiles en 2×2, moins hautes */
.diptych.quad a { height: 42vh; min-height: 300px; }

/* variante hub : 3 tuiles en ligne (Produit en veille) */
.diptych.trio { grid-template-columns: repeat(3, 1fr); }
.diptych.trio a { height: 42vh; min-height: 300px; }
@media (max-width: 900px) { .diptych.trio { grid-template-columns: 1fr; } }

.diptych a::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.28);
  transition: background .35s;
}

.diptych a:hover::after { background: rgba(0,0,0,.12); }

.veil-center {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
}

.veil-center .big {
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 6px;
  font-weight: 300;
}

.veil-center .small {
  font-size: 13px;
  letter-spacing: 1.5px;
  opacity: .9;
}

/* ---------- Galerie fluide (rangées justifiées, mix V/H) ---------- */

.fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fluid a {
  flex-grow: calc(var(--r) * 100);
  flex-basis: calc(var(--r) * 330px);
  overflow: hidden;
}

.fluid a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--r);
  cursor: zoom-in;
  transition: transform .5s ease;
}

.fluid a:hover img { transform: scale(1.025); }

/* la dernière rangée ne s'étire pas exagérément */
.fluid::after {
  content: '';
  flex-grow: 1000000;
  flex-basis: 0;
}

/* ---------- Fine-art : images non recadrées, avec de l'air ---------- */

.fa-air {
  columns: 3;
  column-gap: 56px;
  max-width: 1060px;
  margin: 0 auto;
}

.fa-air a {
  display: block;
  margin-bottom: 56px;
  break-inside: avoid;
}

.fa-air img {
  width: 100%;
  height: auto;          /* jamais recadrée */
  cursor: zoom-in;
  transition: opacity .35s;
}

.fa-air a:hover img { opacity: .88; }
.fa-trio {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  max-width: 1060px;
  margin: 0 auto;
}

.fa-trio a { flex: 1; }

.fa-trio img { width: 100%; height: auto; }

/* ---------- Mur de logos (À propos) ---------- */

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 34px 46px;
  max-width: 960px;
  margin: 0 auto;
}

.logo-wall img {
  max-height: 56px;
  max-width: 170px;          /* contient les logos très larges (Nutanix...) */
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .3s, opacity .3s;
}

.logo-wall img:hover { filter: none; opacity: 1; }

/* variante mono : gris nuancé, et le survol reste en noir & blanc (jamais de couleur) */
.logo-wall--mono img { filter: grayscale(1); opacity: .7; }
.logo-wall--mono img:hover { filter: grayscale(1); opacity: 1; }
.logo-wall--mono .logo-text { color: #535353; }

/* marques sans logo exploitable : nom typographié, aligné sur les images */
.logo-wall .logo-text {
  font-size: 15px;
  letter-spacing: 2.5px;
  font-weight: 400;
  color: #535353;
  line-height: 56px;
}

/* ---------- À propos ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

.about-photo { position: sticky; top: 110px; }  /* le portrait suit pendant la lecture */

.about-photo img { width: 100%; }

.about-text h3 {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2px;
  color: #373737;
  margin: 26px 0 6px;
  text-transform: uppercase;
}

.about-text p {
  font-size: 15px;
  color: #3f3f3f;
  margin-bottom: 16px;
  max-width: 70ch;          /* lignes plus courtes = plus lisibles */
}

.awards {
  list-style: none;
  font-size: 13.5px;
  color: #494949;
  text-align: center;
}

.awards li {
  padding: 9px 0;
  border-bottom: 1px solid #f2f2f2;
}

.awards li:last-child { border-bottom: none; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.contact-line { margin-bottom: 16px; font-size: 14.5px; }

.contact-line strong {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #5e5e5e;
}

.dark-socials { margin-top: 22px; }

.dark-socials svg { fill: #8a8a8a; width: 20px; height: 20px; }

.dark-socials a:hover svg { fill: #1f1f1f; }

.contact-form { display: flex; flex-direction: column; gap: 14px; }

.contact-form label {
  font-size: 11px;
  letter-spacing: 2px;
  color: #5e5e5e;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 300;
  color: #323232;
  border: 1px solid #ddd;
  background: #fff;
  padding: 11px 12px;
  outline: none;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: #6f6f6f; }

.contact-form button {
  cursor: pointer;
  background: none;
  font-family: inherit;
  align-self: flex-start;
}

/* ---------- Tirages (boutique Saal intégrée) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 960px;
  margin: 30px auto 0;
  text-align: center;
}

.steps .n { font-size: 30px; color: #b2b2b2; font-weight: 300; }

.steps h3 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #404040;
  margin: 8px 0 6px;
  text-transform: uppercase;
}

.steps p { font-size: 13.5px; color: #494949; }

.portal-wrap {
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid #ececec;
}

.portal-frame {
  width: 100%;
  height: 82vh;
  min-height: 560px;
  border: 0;
  display: block;
}

/* encart d'attente de la boutique Saal */
.portal-placeholder {
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 60px 24px;
  text-align: center;
}

.pp-inner { max-width: 520px; }

.pp-kicker {
  font-size: 11px;
  letter-spacing: 3px;
  color: #6e6e6e;
}

.pp-inner h2 {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 1.5px;
  color: #404040;
  margin: 10px 0 14px;
}

.pp-inner p {
  font-size: 14px;
  color: #494949;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .portal-frame { height: 70vh; }
}

/* ---------- Divers ---------- */

.note {
  font-size: 13px;
  color: #5e5e5e;
  text-align: center;
  font-style: italic;
}

.note a { text-decoration: underline; }

.project-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 24px 40px;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: #535353;
}

.project-nav a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */

/* ----- ≤ 900px : grilles et colonnes ----- */
@media (max-width: 900px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 340px; margin: 0 auto; }  /* sticky désactivé */
  .contact-grid { grid-template-columns: 1fr; }
  .fa-air { columns: 2; column-gap: 32px; }
  .fa-air a { margin-bottom: 32px; }
  .fa-trio { flex-direction: column; gap: 40px; max-width: 480px; }
}

/* ----- ≤ 860px : header compact + menu burger plein écran ----- */
@media (max-width: 860px) {
  :root { --header-h: 60px; }

  /* pas de backdrop-filter ici : il piégerait le menu fixed dans le header */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .98);
  }

  body.nav-open .site-header { transform: none !important; }

  .header-inner {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    height: var(--header-h);
  }

  .logo .name { font-size: 19px; letter-spacing: 3px; }
  .logo .sub { display: none; }

  .nav-toggle { display: flex; }

  /* le menu devient un panneau plein écran */
  .main-nav {
    position: fixed;
    inset: 0;
    margin: 0;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    transform: translateY(-102%);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    z-index: 120;
    overflow-y: auto;
    padding: 70px 0 40px;
  }

  body.nav-open .main-nav { transform: none; }
  body.nav-open { overflow: hidden; }

  .main-nav > div { text-align: center; }

  .main-nav a, .main-nav span {
    font-size: 16px;
    letter-spacing: 3px;
    padding-bottom: 0;
  }

  .main-nav .active > a { border-top: none; padding-top: 0; color: #000; }

  /* sous-menus à plat : le label devient une rubrique (cliquable vers la page hub) */
  .dropdown > .drop-label {
    font-size: 11px;
    color: #6e6e6e;
  }

  .dropdown .menu,
  .dropdown:hover .menu {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 8px 0 0;
    min-width: 0;
  }

  .dropdown .menu a {
    display: block;
    padding: 7px 0;
    font-size: 16px;
    letter-spacing: 3px;
  }

  .dropdown .menu a:hover { background: none; }
}

/* ----- ≤ 640px : téléphone ----- */
@media (max-width: 640px) {
  .section { padding: 52px 18px; }
  .section.soft > .inner { padding: 0 18px; }

  .hero { height: 72vh; min-height: 440px; }
  .hero-content { padding: 0 18px 64px; }

  .gap-air { height: clamp(48px, 8vh, 80px); }

  .diptych { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }
  .diptych a { height: 44vh; min-height: 280px; }

  .duo { grid-template-columns: 1fr; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* mosaïque projets : chaque photo en pleine largeur */
  .fluid { gap: 12px; }
  .fluid a { flex-basis: 100%; flex-grow: 1; }

  .fa-air { columns: 1; }

  .lb-btn { font-size: 38px; padding: 26px 12px; }
  .lightbox img { max-width: 96vw; max-height: 78vh; }
  .lb-caption { font-size: 11px; bottom: 14px; }
  .lb-counter { top: 18px; left: 18px; }

  .cta-band { padding: 48px 18px; }

  .footer-inner { justify-content: center; text-align: center; }

  .demo-pill { font-size: 9px; padding: 5px 10px; bottom: 10px; left: 10px; }

  .project-meta { gap: 8px 20px; padding: 20px 16px; }
  .project-intro { padding: 40px 18px 14px; }
}

/* Sélecteur de langue FR/EN */
.lang-switch{position:absolute;top:26px;right:58px;display:flex;gap:6px;align-items:center;font-size:12px;letter-spacing:1px;z-index:70}
.lang-switch a{color:inherit;opacity:.5;text-decoration:none;transition:opacity .2s}
.lang-switch a:hover{opacity:1}
.lang-switch .cur{opacity:1;font-weight:500}
.lang-switch>span{opacity:.35}
@media(max-width:760px){.lang-switch{right:64px;top:22px}}

/* ---- Offre tirages : deux supports cote a cote ---- */

.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1020px;
  margin: 0 auto;
  border-top: 1px solid #ececec;
}

.offer { padding: 34px 40px 30px; }
.offer + .offer { border-left: 1px solid #ececec; }

.offer .kicker {
  font-size: 10.5px;
  letter-spacing: 3px;
  color: #737373;
  text-transform: uppercase;
}

.offer h3 {
  font-weight: 300;
  font-size: 23px;
  letter-spacing: 1.5px;
  color: #373737;
  margin: 9px 0 4px;
}

.offer .lede {
  font-size: 14px;
  color: #535353;
  min-height: 42px;
  margin-bottom: 22px;
}

.offer .sizes { list-style: none; }

.offer .sizes li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid #f2f2f2;
  font-size: 15px;
}

.offer .sizes li:first-child { border-top: none; }

.offer .sizes .dim { color: #3a3a3a; letter-spacing: .5px; }
.offer .sizes .dim em { font-style: normal; color: #6e6e6e; font-size: 12.5px; letter-spacing: 1px; }

.offer .sizes .price {
  color: #252525;
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.offer .incl {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #f2f2f2;
  list-style: none;
  font-size: 13.5px;
  color: #535353;
  line-height: 1.75;
}

.offer .incl li { padding-left: 16px; position: relative; }
.offer .incl li::before { content: '\2013'; position: absolute; left: 0; color: #b2b2b2; }

.edition-note {
  max-width: 1020px;
  margin: 0 auto;
  border-top: 1px solid #ececec;
  padding: 26px 40px 0;
  font-size: 13.5px;
  color: #535353;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 46px;
}

.edition-note strong {
  font-weight: 400;
  color: #3a3a3a;
  letter-spacing: 1.5px;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}

@media (max-width: 820px) {
  .offers { grid-template-columns: 1fr; }
  .offer { padding: 30px 4px 26px; }
  .offer + .offer { border-left: none; border-top: 1px solid #ececec; }
  .offer .lede { min-height: 0; }
  .edition-note { padding: 24px 4px 0; gap: 18px; }
}

/* ---- Bandeau de bas de page : constat, pas argumentaire ---- */

.cta-band .band-line {
  font-size: 16.5px;
  color: #454545;
  letter-spacing: .3px;
  max-width: 56ch;
  margin: 0 auto 26px;
}

/* ---- Page stages ----------------------------------------------------------
   Page de texte : c'est la typographie qui doit porter, pas le remplissage.
   Titres tres grands et tres legers, colonne centree, beaucoup d'air.        */

.ws {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.ws h2 {
  font-weight: 200;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: .06em;
  color: #2d2d2d;
  margin: 0;
}

/* filet court sous le titre : une respiration, pas un ornement */
.ws h2::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  background: #cfcfcf;
  margin: 30px auto 34px;
}

.ws p {
  font-size: 17.5px;
  line-height: 1.95;
  letter-spacing: .2px;
  color: #434343;
  margin: 0 auto;
  max-width: 600px;
}

.ws p + p { margin-top: 22px; }

.ws .aside {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #737373;
  margin-top: 34px;
}

.ws .act { margin-top: 40px; }

@media (max-width: 640px) {
  .ws p { font-size: 16.5px; line-height: 1.85; }
  .ws h2::after { margin: 24px auto 28px; }
}

/* ---- Tirages : lignes de format cliquables (lien de paiement) ---- */

.offer .sizes li { padding: 0; }

.offer .sizes .buy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 10px 14px 2px;
  margin: 0 -10px 0 -2px;
  transition: background .2s, padding .2s;
}

.offer .sizes .buy:hover { background: #f6f6f6; }

.offer .sizes .buy .price::after {
  content: ' \2192';
  color: #aeaeae;
  transition: color .2s;
}

.offer .sizes .buy:hover .price::after { color: #1f1f1f; }

.offer .sizes .buy:focus-visible { outline: 2px solid #8a8a8a; outline-offset: 2px; }

/* ---- Choix de l'image avant paiement ---- */

.pick {
  max-width: 1020px;
  margin: 0 auto;
  border-top: 1px solid #ececec;
  padding: 26px 40px 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.pick label {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #535353;
}

.pick select {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 300;
  color: #323232;
  border: 1px solid #ddd;
  background: #fff;
  padding: 9px 12px;
  outline: none;
  min-width: 220px;
}

.pick select:focus { border-color: #6f6f6f; }

.pick .hint { font-size: 13px; color: #6b6b6b; }
.pick .hint a { text-decoration: underline; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.pick select.shake { animation: shake .3s ease 2; border-color: #a63f2b; }

@media (prefers-reduced-motion: reduce) {
  .pick select.shake { animation: none; }
}

@media (max-width: 820px) {
  .pick { padding: 24px 4px 4px; }
  .pick select { min-width: 0; flex: 1; }
}

/* --- Sur mesure (page Tirages) : grille 2x2, meme grammaire que .offers --- */
.custom {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid #ececec;
}

.custom > div {
  padding: 30px 40px 28px;
  border-bottom: 1px solid #ececec;
}

.custom > div:nth-child(odd) { border-right: 1px solid #ececec; }

.custom h3 {
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 1.2px;
  color: #373737;
  margin: 0 0 10px;
}

.custom p {
  font-size: 14px;
  line-height: 1.85;
  color: #535353;
  margin: 0;
}

@media (max-width: 820px) {
  .custom { grid-template-columns: 1fr; }
  .custom > div { padding: 26px 4px 24px; }
  .custom > div:nth-child(odd) { border-right: none; }
}

.contact-line .pays { color: #6e6e6e; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-left: 6px; }


/* --- Retour du formulaire de contact --- */
.form-avis { margin: 14px 0 0; font-size: 14px; line-height: 1.6; min-height: 1px; }
.form-avis[data-etat="ok"] { color: #3d7a52; }
.form-avis[data-etat="ko"] { color: #a63f2b; }
.contact-form .miel { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }




/* --- Galeries commerciales : la mosaique des pages projet, un peu plus
   serree pour que dix-sept portraits ne fassent pas six ecrans. --- */
.fluid.dense a { flex-basis: calc(var(--r) * 250px); }

@media (max-width: 1100px) { .fluid.dense a { flex-basis: calc(var(--r) * 190px); } }
@media (max-width: 700px)  { .fluid.dense a { flex-basis: calc(var(--r) * 140px); }
                             .fluid.dense { gap: 8px; } }


/* ---------- Navigation au clavier ----------
   Sans cette regle, un visiteur qui navigue au clavier (ou un lecteur d'ecran)
   ne voit jamais ou il se trouve : le contour par defaut du navigateur etait
   supprime par les remises a zero, sans rien mettre a la place. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #1f1f1f;
  outline-offset: 3px;
  border-radius: 2px;
}

.lightbox a:focus-visible,
.lightbox [role="button"]:focus-visible { outline-color: #fff; }


/* ---------- Garde-fou : aucune image ne peut rester invisible ----------
   Les vignettes et les blocs partent a opacity 0 et attendent une classe posee
   par script.js. Si ce fichier ne se charge pas, arrive perime depuis le cache
   du navigateur, ou tombe sur une erreur, la page se remplirait de rectangles
   blancs -- c'est exactement ce qui est arrive en septembre 2026.
   Ces regles annulent donc l'invisibilite tant que JavaScript n'a pas confirme
   sa presence en posant la classe .js sur <html>, des la premiere ligne du
   <head>. Le pire cas devient "pas de fondu", jamais "pas de photo". */
html:not(.js) .grid img,
html:not(.js) .fluid img,
html:not(.js) .fa-air img,
html:not(.js) .card img,
html:not(.js) .tiles img,
html:not(.js) .diptych a,
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Accueil et tirages validés par Léo le 12 septembre 2026. */
.home-hero {
  margin-top:var(--header-h);
  height:calc(90svh - var(--header-h));
  min-height:480px;
  background-position:center;
}
.home-hero::after { background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 65%); }
.home-hero .hero-content { max-width:1440px; padding:0 clamp(24px,5vw,80px) 65px; }
/* Titre : typographie d’origine, à la demande de Léo. */
.home-hero h1 { max-width:none; font-size:clamp(26px,4vw,44px); letter-spacing:2px; line-height:1.65; font-weight:300; margin-bottom:10px; }
.home-hero p { font-size:16px; letter-spacing:.6px; margin:0; }
.home-hero + .gap-air { height:64px; }
.home-portals { gap:28px; padding:0 clamp(24px,5vw,80px); max-width:1600px; scroll-margin-top:110px; }
.home-portals a { height:54vh; min-height:380px; align-items:flex-end; justify-content:flex-start; }
.home-portals a::after { background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 65%); }
.home-portals a:hover::after { background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 70%); }
.home-portals .veil-center { width:100%; text-align:left; padding:32px; gap:10px; }
.home-portals .big { font-size:clamp(25px,3vw,40px); letter-spacing:3px; }
.home-portals .small { font-size:15px; letter-spacing:.5px; opacity:1; }
.home-portals + .gap-air { height:64px; }
.home-portals ~ .clients .label { font-size:12px; }
@media(max-width:860px) {
  .home-hero { background-position:75% center; height:calc(80svh - var(--header-h)); min-height:460px; }
  .home-hero .hero-content { padding:0 24px 80px; }
  .home-hero p { max-width:320px; font-size:16px; }
  .home-portals { grid-template-columns:1fr; gap:24px; padding:0 24px; }
  .home-portals a { height:58svh; min-height:340px; }
  .home-portals .veil-center { padding:24px; }
  .home-portals .small { max-width:280px; }
  .home-hero + .gap-air,.home-portals + .gap-air { height:40px; }
}

/* Atelier de tirages : photographie a gauche, choix et recapitulatif a droite. */
.print-intro { max-width:1440px; margin:0 auto; padding:28px 40px 34px; display:grid; grid-template-columns:1fr 2fr; gap:48px; align-items:start; text-align:left; }
.print-intro .section-title { text-align:left; margin:0; font-size:clamp(30px,3.2vw,44px); line-height:1.3; letter-spacing:1.5px; }
.print-intro .section-sub { text-align:left; margin:0; max-width:680px; font-size:17px; line-height:1.85; letter-spacing:.3px; color:#555; }
.print-materials { max-width:1440px; margin:auto; padding:0 40px 48px; }
.print-materials-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px 48px; border-top:1px solid #dededb; padding-top:28px; }
.print-materials-grid > p { font-size:15px; line-height:1.85; color:#555; max-width:580px; }
.print-materials-grid strong { font-weight:400; color:#222; }
.print-materials-grid .print-materials-note { grid-column:1/-1; max-width:none; font-size:14px; color:#777; padding-top:2px; }
.print-process { padding-top:48px; padding-bottom:48px; }
.print-bespoke { padding-top:56px; padding-bottom:24px; }
.print-shop { max-width:1440px; padding:0 40px 80px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:48px; align-items:start; }
.print-shop button,.print-dialog button,.print-shop select { font:inherit; color:inherit; cursor:pointer; }
.print-section-heading { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.print-section-heading h2 { font-size:22px; font-weight:300; letter-spacing:.5px; }
.print-step { font-size:12px; color:#777; letter-spacing:1px; }
.print-filters { display:flex; gap:24px; border-bottom:1px solid #ddd; }
.gallery-shortcuts { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; padding:20px 24px; }
.gallery-shortcuts a { font-size:14px; border-bottom:1px solid #aaa; padding:6px 0; }
#architecture, #paysages-marins { scroll-margin-top:110px; }
.print-filters button { background:none; border:0; border-bottom:2px solid transparent; padding:8px 0 12px; font-size:15px; }
.print-filters button[aria-pressed=true] { border-bottom-color:#222; }
.print-filters span { font-size:12px; color:#777; margin-left:6px; }
.print-help { font-size:14px; color:#666; margin:14px 0 24px; }
.print-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; }
.print-enlarge { width:100%; border:0; background:#f7f7f5; display:block; padding:16px; height:200px; }
.print-enlarge img { width:100%; height:100%; object-fit:contain; transition:transform .25s; }
.print-enlarge:hover img { transform:scale(1.035); }
.print-choice-caption { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:10px; font-size:13px; }
.print-select { border:0; border-bottom:1px solid #999; padding:6px 0; background:none; font-size:13px!important; min-height:36px; }
.print-select[aria-pressed=true] { color:#fff; background:#292929; border:0; padding:6px 10px; }
.print-choice:has(.print-select[aria-pressed=true]) .print-enlarge { outline:1px solid #222; outline-offset:3px; }
.print-count { font-size:13px; color:#777; text-align:center; margin:14px 0; }
.print-config { position:sticky; top:110px; padding:24px; background:#f7f7f5; border:1px solid #e8e8e4; scroll-margin-top:100px; }
.print-selected-image { height:200px; display:grid; place-items:center; background:#eaeaea; padding:16px; }
.print-selected-image img { width:100%; height:168px; object-fit:contain; }
.print-empty { font-size:14px; color:#777; text-align:center; max-width:190px; }
.print-selected-name { text-align:center; font-size:14px; margin:14px 0 26px; }
.print-config .print-section-heading { gap:10px; margin-bottom:20px; }
.print-config h2 { font-size:21px; }
.print-support { border:0; padding:0; margin:0 0 20px; }
.print-support legend,.print-format-label { font-size:14px; margin-bottom:8px; display:block; }
.print-support label { display:flex; gap:10px; align-items:center; padding:12px; border:1px solid #ddd; background:white; margin-top:8px; cursor:pointer; font-size:15px; }
.print-support label:has(input:checked) { border-color:#333; }
.print-support input { accent-color:#222; width:16px; height:16px; flex-shrink:0; }
.print-support small { display:block; font-size:12px; color:#666; margin-top:3px; }
#print-format { width:100%; background:white; border:1px solid #bbb; border-radius:0; padding:12px; font-size:16px; min-height:48px; }
.print-material { font-size:13px; line-height:1.65; color:#666; margin:12px 0 20px; }
.print-total { border-top:1px solid #ddd; padding-top:18px; display:flex; justify-content:space-between; align-items:baseline; font-size:15px; }
.print-total strong { font-size:28px; font-weight:300; }
.print-summary { font-size:13px; line-height:1.65; margin:8px 0 18px; color:#555; }
.print-checkout { display:block; padding:14px; text-align:center; background:#222; color:white; font-size:15px; letter-spacing:1px; }
.print-checkout[aria-disabled=true] { background:#ddd; color:#777; cursor:default; }
.print-delivery { text-align:center; font-size:12px; line-height:1.8; color:#666; margin:14px 0; }
.print-custom { display:block; text-align:center; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.print-dialog { border:0; background:#fafafa; padding:36px; max-width:1000px; width:90vw; max-height:92svh; margin:auto; }
.print-dialog::backdrop { background:#000c; }
.print-dialog > img { width:100%; height:65svh; object-fit:contain; }
.print-dialog-close { position:absolute; right:12px; top:4px; font-size:32px!important; width:44px; height:44px; background:none; border:0; }
.print-dialog-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:22px; }
.print-dialog h2 { font-size:18px; font-weight:300; }
.print-dialog-choose { background:#222; color:white!important; border:0; padding:14px 22px; }
.print-shop [hidden],.print-dialog [hidden] { display:none!important; }
.lb-print-order { position:absolute; bottom:20px; right:24px; padding:10px 16px; border:1px solid #aaa; color:#fff; font-size:14px; z-index:5; }
.lightbox:has(.lb-print-order:not([hidden])) .lb-caption { bottom:74px; }
.lightbox:has(.lb-print-order:not([hidden])) img { max-height:calc(100svh - 180px); margin-bottom:48px; }
.lb-print-order[hidden] { display:none; }
.lb-caption { white-space:normal; }
@media(min-width:1450px) { .print-enlarge { height:245px; } }
@media(max-width:1100px) { .print-shop { padding:0 24px 64px; gap:28px; grid-template-columns:minmax(0,1fr) 320px; }.print-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .print-shop { grid-template-columns:1fr; }.print-config { position:static; max-width:600px; width:100%; margin:auto; }.print-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.print-selected-image { height:260px; }.print-selected-image img { height:228px; } }
@media(max-width:600px) { .print-intro { padding-bottom:32px; }.print-shop { padding:0 18px 50px; }.print-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }.print-enlarge { height:170px; padding:8px; }.print-choice-caption { flex-wrap:wrap; gap:0 8px; font-size:12px; }.print-filters { gap:18px; }.print-filters button { font-size:14px; }.print-config { padding:22px; }.print-dialog { padding:32px 16px 20px; width:95vw; }.print-dialog > img { height:56svh; }.print-dialog-bottom { flex-direction:column; gap:12px; }.print-dialog-choose { width:100%; } }
@media(prefers-reduced-motion:reduce){.print-enlarge img {transition:none;}}

/* Le bas du récapitulatif reste accessible, même sur un écran peu haut. */
@media(min-width:901px){ .print-config { top:min(110px,calc(100svh - var(--config-height,1030px) - 24px)); } }
.print-change { display:block; margin:-12px auto 24px; padding:6px 0; border:0; border-bottom:1px solid #aaa; background:none; font-size:13px!important; }

/* Tirages : introduction et supports alignes sur le catalogue, textes conserves. */
@media(max-width:1100px) {
  .print-intro { padding:24px 24px 28px; gap:28px; }
  .print-materials { padding:0 24px 40px; }
  .print-materials-grid { column-gap:32px; }
}
@media(max-width:700px) {
  .print-intro { grid-template-columns:1fr; gap:18px; padding:20px 18px 26px; }
  .print-intro .section-sub { font-size:16px; line-height:1.8; }
  .print-materials { padding:0 18px 34px; }
  .print-materials-grid { grid-template-columns:1fr; gap:18px; padding-top:22px; }
  .print-materials-grid .print-materials-note { font-size:14px; }
  .print-process { padding-top:36px; padding-bottom:36px; }
  .print-bespoke { padding-top:40px; }
}

/* Composition editoriale des tirages : photographie sur passe-partout en ouverture. */
.print-intro { grid-template-columns:1fr 1fr; gap:72px; align-items:center; padding-top:24px; padding-bottom:48px; }
.print-intro-copy { max-width:490px; }
.print-intro .section-title { font-size:clamp(36px,4.4vw,60px); font-weight:300; letter-spacing:1px; margin-bottom:24px; }
.print-intro .section-sub { font-size:17px; line-height:1.9; }
.print-intro-link { display:inline-flex; align-items:center; gap:32px; margin-top:26px; padding:8px 0; border-bottom:1px solid #777; font-size:14px; }
.print-intro-link span { font-size:22px; }
.print-intro-art { background:#eeede9; min-height:330px; padding:38px 52px; display:grid; place-items:center; }
.print-paper-preview { background:#fff; padding:25px; width:100%; max-width:440px; transform:rotate(-2deg); box-shadow:4px 12px 22px #29251e20; }
.print-paper-preview img { display:block; width:100%; height:230px; object-fit:contain; }
.print-materials { padding-bottom:48px; }
.print-materials-grid { gap:22px 64px; padding-top:28px; }
.print-material-story h2 { font-size:23px; line-height:1.4; font-weight:300; margin-bottom:12px; letter-spacing:.4px; }
.print-material-story p { font-size:15px; line-height:1.85; color:#666; }
.print-materials-grid .print-materials-note { border-top:1px solid #e8e8e4; padding-top:18px; }
.print-shop { border-top:1px solid #dededb; padding-top:38px; }
.print-catalog > .print-section-heading h2 { font-size:27px; }
.print-enlarge { background:#fff; padding:12px; height:220px; }
.print-choice { padding:8px 8px 0; border:1px solid #eee; transition:border-color .2s; }
.print-choice:hover { border-color:#aaa; }
/* Le catalogue complet s'ouvre à la demande, sans limiter le choix d'images. */
.print-picker-intro { align-self:start; }
.print-picker-open { display:block; width:100%; padding:24px; border:1px solid #ddd; background:#fff; color:inherit; text-align:left; cursor:pointer; font:inherit; transition:border-color .2s; }
.print-picker-open:hover { border-color:#555; }
.print-picker-mosaic { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; padding:12px 0 32px; }
.print-picker-mosaic img { display:block; width:100%; height:210px; object-fit:contain; }
.print-picker-label { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:24px; line-height:1.4; }
.print-picker-label > span { font-size:30px; }
.print-picker-detail { display:block; margin-top:10px; font-size:14px; color:#666; }
.print-picker-hint { margin-top:18px; max-width:480px; font-size:15px; line-height:1.7; color:#666; }
.print-picker-dialog { width:min(1180px,calc(100vw - 48px)); max-width:none; height:calc(100svh - 48px); max-height:none; margin:auto; padding:32px; border:0; background:white; color:#222; overflow:auto; }
.print-picker-dialog::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.print-picker-close { position:sticky; top:0; float:right; z-index:4; display:grid; place-items:center; width:44px; height:44px; margin:-12px -12px 0 12px; border:0; background:white; color:#222; font-size:30px; cursor:pointer; }
.print-picker-dialog .print-section-heading { padding-right:44px; }
.print-picker-dialog .print-filters { position:sticky; top:-32px; z-index:3; padding-top:16px; padding-right:48px; background:#fff; }
.print-picker-dialog .print-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
body:has(.print-picker-dialog[open]) { overflow:hidden; }
@media(max-width:1000px) { .print-picker-dialog .print-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
  .print-picker-open { padding:18px; }
  .print-picker-mosaic { gap:14px; padding:0 0 20px; }
  .print-picker-mosaic img { height:150px; }
  .print-picker-label { font-size:21px; }
  .print-picker-dialog { width:100%; height:100svh; padding:20px 16px; }
  .print-picker-dialog .print-filters { top:-20px; padding-top:14px; }
  .print-picker-dialog .print-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .print-picker-close { margin:-6px 0 0 8px; }
}
.print-choice:has(.print-select[aria-pressed=true]) { border-color:#333; }
.print-choice:has(.print-select[aria-pressed=true]) .print-enlarge { outline:none; }
.print-choice-caption { padding:4px 4px 10px; }
.print-config { background:#f5f4f1; border:0; padding:28px; }
.print-config > .print-section-heading { border-bottom:1px solid #d9d8d3; padding-bottom:20px; margin-bottom:22px; }
.print-selected-image { background:#ebeae6; }
.print-selected-image:has(#print-selected[hidden]) { height:90px; background:transparent; border:1px dashed #c9c7c1; }
.print-selected-name { margin:12px 0 22px; }
.print-selected-image:has(#print-selected[hidden]) + .print-selected-name { display:none; }
.print-selected-image:has(#print-selected[hidden]) { margin-bottom:22px; }
.print-config .print-support label { background:#ffffffa0; border-color:#d5d4ce; }
.print-config .print-support label:has(input:checked) { background:white; border-color:#333; }
@media(max-width:1100px) {
 .print-intro { gap:36px; }
 .print-intro-art { min-height:300px; padding:32px; }
 .print-paper-preview { padding:20px; }
 .print-paper-preview img { height:200px; }
 .print-config { padding:22px; }
}
@media(max-width:700px) {
 .print-intro { grid-template-columns:1fr; gap:30px; padding-bottom:32px; }
 .print-intro-copy { max-width:none; }
 .print-intro .section-title { margin-bottom:18px; }
 .print-intro .section-sub { font-size:16px; }
 .print-intro-link { margin-top:18px; }
 .print-intro-art { min-height:250px; padding:28px 40px; }
 .print-paper-preview img { height:180px; }
 .print-materials-grid { gap:24px; }
 .print-material-story h2 { font-size:22px; margin-bottom:8px; }
 .print-materials { padding-bottom:30px; }
 .print-shop { padding-top:28px; }
 .print-catalog > .print-section-heading h2 { font-size:23px; }
 .print-enlarge { height:160px; padding:6px; }
 .print-choice { padding:4px 4px 0; }
 .print-choice-caption { padding:2px 4px 8px; }
}
@media(prefers-reduced-motion:reduce) { .print-choice { transition:none; } }

/* Deux finitions illustrees : memes dimensions, fond blanc et textes originaux. */
.print-comparison-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:28px; }
.print-comparison-intro .print-intro-copy { max-width:760px; }
.print-comparison-intro .section-title { font-size:clamp(34px,3.5vw,48px); margin-bottom:16px; }
.print-comparison-intro .section-sub { max-width:730px; font-size:16px; }
.print-comparison-intro .print-intro-link { flex-shrink:0; margin:0 0 5px; }
.print-comparison .print-materials-grid { border-top:0; padding-top:0; gap:0 48px; }
/* Trois rangées partagées : visuels, titres puis descriptions. */
.print-comparison .print-material-story { display:grid; grid-template-rows:subgrid; grid-row:span 3; }
.print-finish-visual { width:100%; aspect-ratio:3/2; display:grid; place-items:center; background:#fff; margin-bottom:24px; }
.print-finish-paper { padding:0; background:#fff; }
/* Une vraie feuille blanche doit se distinguer du fond de la page : la marge
   est volontairement généreuse, comme sur un tirage Photo Rag à encadrer. */
.print-finish-paper .print-paper-preview { width:82%; max-width:none; padding:7.5%; transform:none; border:1px solid #e1e1e1; box-shadow:0 2px 8px #00000010; }
.print-finish-paper .print-paper-preview img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.print-finish-frame > img { display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(1); }
.print-comparison .print-material-story h2 { font-size:25px; margin-bottom:12px; }
.print-comparison .print-material-story p { max-width:560px; }
.print-comparison .print-materials-note { padding-top:22px; margin-top:2px; }
@media(max-width:1100px) {
  .print-comparison-intro { gap:28px; }
  .print-comparison-intro .print-intro-copy { max-width:65%; }
  .print-comparison .print-materials-grid { column-gap:32px; }
}
@media(max-width:700px) {
  .print-comparison-intro { display:block; padding-bottom:16px; }
  .print-comparison-intro .print-intro-copy { max-width:none; }
  .print-comparison-intro .print-intro-link { margin-top:16px; }
  .print-comparison .print-materials-grid { gap:28px; }
  .print-comparison .print-material-story { display:block; grid-row:auto; }
  .print-finish-visual { margin-bottom:18px; }
  .print-comparison .print-material-story h2 { font-size:23px; }
}

/* Audit 14/09 : réserver la place du sélecteur de langue dans le menu. */
@media(min-width:861px) {
  .header-inner { max-width:1340px; padding-right:126px; gap:8px 24px; }
  .lang-switch { right:28px; }
}
@media(min-width:861px) and (max-width:1150px) {
  .header-inner { flex-wrap:nowrap; align-items:center; min-height:86px; }
  .logo { flex-direction:column; gap:4px; flex-shrink:0; }
  .logo .name { font-size:22px; letter-spacing:3px; }
  .logo .sub { font-size:9px; letter-spacing:2px; }
  .main-nav { gap:14px; }
  .main-nav a, .main-nav span { font-size:10px; letter-spacing:1px; }
}